/* 전역 변수 선언 */
:root {
  --thumb-width: 20vw;
  --thumb-height: 20vw;
  --outline-color:#eeeeee;
}

/* ─────────────────────────────────────────────────────────
 * [스크롤 컨텍스트 일원화]
 *
 * 공통 CSS(common.css) 쪽에 body { height:100%; overflow:auto } 계열
 * 규칙이 남아 있어 document.body 자체가 스크롤 컨테이너가 되는 상태.
 * 그 결과:
 *   - window.scrollY / documentElement.scrollTop 은 0 고정
 *   - 실제 스크롤은 document.body.scrollTop 으로만 잡힘
 *   - window 기준으로 높이를 계산하는 스크립트는 "상단 일정 구간까지
 *     scrollTop 이 안 움직이는 것처럼" 보여 오작동.
 *
 * 스크롤 주체를 html(=window) 로 되돌린다.
 * ───────────────────────────────────────────────────────── */
html {
	height: auto !important;
	overflow-y: auto !important;
	overflow-x: hidden;
}
body {
	height: auto !important;
	min-height: 100%;
	/* body 는 스크롤 컨테이너 금지 — 단, lockScroll() 이 inline 으로
	 * overflow:hidden 을 세팅하는 동작은 허용해야 하므로
	 * !important 는 쓰지 않음. */
	overflow: visible;
}

p {
	margin:0;
}

H1 {
	font-family:'NanumSquare';
}

hr {
	border:1px solid #777777;
	border-width:1px 0 0 0;
	margin-bottom:12px;
}

.subscribe-banner {
	height:460px;
	margin:40px 0 0 0;
}



.head-copy {
	display:inline-block;
	width:calc(39% - 40px);
	vertical-align: top;
	padding:0 0 0 40px;
	margin:140px 0 0 0;
}

h2 {
	font-family:'NanumSquare';
	font-weight:300;
	font-size:48px;
	letter-spacing: -2px;
	padding:0px 0 0 0px;
	margin:0;
	line-height:1.3;
}

h2 span {
	font-weight:600;
}

p.head-text {
	font-family:'NanumSquare';
	font-weight:400;
	font-size:20px;
	letter-spacing: -0.5px;
	margin:0px;
	margin:20px 0 0 0;
	color:#333333;
	line-height: 1.4;
	text-align:left;
}

.head-visual {
	display:inline-block;
	width:calc(60% - 100px);
	height:460px;
	background-color:#f7f7f7;
	border-radius:20px;
	overflow:hidden;
	margin:0 0 0 100px;
	position: relative; /* 자식 요소의 absolute 위치를 부모에 상대적으로 설정 */
}

.head-visual img {
	position:absolute;
	object-fit: cover;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1.15);
}

.head-visual .before-image {
	clip-path: inset(0 50% 0 0); /* 초기: 왼쪽 절반만 표시 */
	z-index:2;
}

.head-visual .after-image {
	clip-path: inset(0 0 0 50%); /* 초기: 오른쪽 절반만 표시 */
	z-index:1;
}

.info-copy {
	display:inline-block;
	width:100%;
	vertical-align: top;
	padding:60px 0 60px 0;
	text-align:center;
}

/*
.info-copy p.head-text {
	font-family:'NanumSquare';
	font-weight:300;
	font-size:22px;
	letter-spacing: -0.5px;
	margin:0px;
	margin:14px 0 0 2px;
	color:#333333;
	line-height: 1.4;
}
*/

.info-visual {
	display:inline-block;
	width:100%;
	height:440px;
	background-color:#f7f7f7;
	border-radius:20px;
	overflow:hidden;
	margin:0;
	position: relative; /* 자식 요소의 absolute 위치를 부모에 상대적으로 설정 */
	background-image:url('https://img.artnshop.net/subscribe/subscribe_info_main_visual_brighter.jpg');
	background-size: cover;
	background-position: center;
}

.info-4season {
	display:inline-block;
	width:100%;
	height:440px;
	background-color:#f7f7f7;
	border-radius:20px;
	overflow:hidden;
	margin:0;
	position: relative; /* 자식 요소의 absolute 위치를 부모에 상대적으로 설정 */
	background-image:url('https://img.artnshop.net/subscribe/4season.jpg');
	background-size: cover;
	background-position: center;
}

.start-banner {
	height:200px;
	margin:0px 0 0 0;
	background-color:#ffffff;
}

.start-copy {
	vertical-align: top;
}

.start-copy h3 {
	font-family:'NanumSquare';
	font-weight:300;
	font-size:36px;
	letter-spacing: -2px;
	margin:0px;
	padding:50px 0 0 0px;
	line-height:1.4;
	text-align:center;
}

.start-copy h3 span {
	font-weight:600;
}

.slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  cursor: ew-resize;
  z-index: 10;
}

.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.subscribe-banner p.head-text span {
	font-weight:800;
}

.subscribe-banner button, .subscribe-list button, .sub-submit button {
	font-family:'NanumSquare';
	font-weight:800;
	font-size:18px;
	padding:12px 26px;
	border-radius:6px;
}

button.black {
	margin:30px 0 0 4px;
	background-color:#000000;
	color:#ffffff !important;
}

button.white {
	margin:30px 0 0 6px;
	background-color:#ffffff;
	color:#000000 !important;
}

button.start {
	width:100%;
	height:49px;
	margin:10px 0 0 0;
	background-color:#000000;
	border:0;
	color:#ffffff !important;
}

button.more {
	width:100%;
	height:49px;
	margin:6px 0 0 0;
	background-color:#ffffff;
	color:#000000 !important;
}

button.functionbtn {
	border:0px solid #cccccc;
	font-size:13px;
	font-weight:600;
	padding:12px 15px;
	border-radius:6px;
	background-color:#333333;
	color:#ffffff;
	margin:0 0 0 10px;
}

button.btn-req-more {
	background-color:transparent;
	border:0;
	font-size:0.7em;
	width:100%;
	padding:0 8px 18px;
	margin:-14px 0 0 0;
}

.subscribe-title {
	font-family:'Noto Sans KR';
	padding:60px 60px 40px;
	margin:0;
	font-size:1.6em;
	font-weight:600;
	letter-spacing:-1.5px;
}

.curationWrap {
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;   /* IE, Edge */
	scrollbar-width: none;      /* Firefox */
	cursor: grab;
	/* 🔥 관성 스크롤 (모바일 핵심) */
	-webkit-overflow-scrolling: touch;
	user-select: none;        /* 🔥 텍스트 선택 방지 */
}

/* ──────────────────────────────────────────────────────────
 * subscribe-detail 내부 강제 overflow 해제
 *
 * 이유:
 *   .subscribe-detail 의 본문은 DB(echo $result['detail']) 에서 출력되는
 *   레거시 HTML 이라, 내부에 `overflow:auto` + 고정 height 박스가 섞여 들어오는
 *   경우가 있음. 이 박스가 window 와 별도 스크롤 컨테이너로 동작하면
 *   해당 영역 위에서는 휠/터치 세로 스크롤이 그 박스에서 먹히고
 *   window.scrollTop 이 변하지 않는다.
 *   → 사용자가 말한 "일정 높이까지 scrollTop 인식 안되다가
 *      갑자기 인식되는" 증상의 원인.
 * ────────────────────────────────────────────────────────── */
.subscribe-detail,
.subscribe-detail * {
	max-height: none !important;
	overflow: visible !important;
}
/* 단, 본문 안에 있을 수 있는 이미지는 원래 visible 이라 영향 없음.
 * iframe 등 의도된 스크롤 요소가 있으면 별도 클래스로 예외 처리할 것. */

.curationWrap:active {
	cursor: grabbing;
}

/* 드래그 중 텍스트 선택 방지 */
.curationWrap.dragging,
.curationWrap.dragging * {
	user-select: none;
}

/* ✅ 드래그 중 snap OFF */
.curationWrap.no-snap {
  scroll-snap-type: none !important;
}

.curationWrap img, .curationWrap a {
	-webkit-user-drag: none;
}

.curationWrap::-webkit-scrollbar {
	display: none;              /* Chrome, Safari */
}

.curationTrack {
	display: flex;
}

.curationUl {
/* ── 카드 폭 산출 기준 (여기 두 값만 바꾸면 전체 조정됨) ── */
--gap: clamp(16px, 0.8vw + 6px, 40px);  /* 카드 사이 간격 */
--side: 40px;                           /* 브라우저 좌우 여백(마진+패딩) 고정분 */
/* 카드 폭 = (브라우저 가로폭 - 좌우여백) 을 6등분, gap 정산 → 화면에 정확히 6개 */
--card-w: calc((100vw - var(--side)) / 6 - var(--gap));

list-style: none;
/* activated 작품 전체를 한 줄로 이어 붙여 카드 1개 단위로 가로 슬라이드.
   (repeat(6,1fr) 고정 그리드였을 땐 6개 초과분이 다음 줄로 wrap 되어 2행으로 내려감) */
display: flex;
gap: var(--gap);
padding: 0 0 0 var(--gap);   /* 왼쪽 여백 = gap (6개가 폭에 정확히 채워지도록) */
margin:0 0 40px 0;

flex: 0 0 auto;   /* track(flex) 안에서 UL 은 내용폭만큼 늘어남 */
width: auto;
max-width: none;
box-sizing: border-box;
}

.curationUl li {
	/* flex-basis 로 폭 고정 → 줄바꿈 없이 한 줄 유지, 나머지는 가로 스크롤 */
	width: var(--card-w);
	flex: 0 0 var(--card-w);
	display:block;
	scroll-snap-align: start;
}

.curationUl li .thumbframe {
	display:flex;
	align-items:center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1; /* 정사각형 유지 */
	background-color:#f4f4f4;
	overflow: hidden;  
}

.curationUl li img.thumbnail {
	width:100%;
	height:100%;
	object-fit: cover;
	transform: scale(1.15);          /* 기본: 20% 확대 (크롭 효과) */
	transition: transform 0.4s ease; /* 부드러운 전환 */
}

.curationUl li .thumbframe:hover img.thumbnail {
	transform: scale(1.25);            /* 호버: 원본 비율로 축소 */
}

.artwork-title {
	font-family:'Noto Sans KR';
	font-size:0.98em;
	letter-spacing: -0.5;
	font-weight:600;
	margin:12px 0 8px;
	padding:0 8px;
}

.artwork-description {
	font-family:'Arial';
	font-size:0.82em;
	letter-spacing: -0.5;
	font-weight:400;
	line-height:1.4;
	margin:6px 0;
	padding:0 8px;
	color:#999999;
}

.artwork-available {

	margin:10px 0 0;
	padding:5px 8px 6px;

}

.artwork-available button {
	font-family:'Noto Sans KR';
	font-size:0.72em;
	letter-spacing: -0.5;
	font-weight:600;
	line-height:1;
	border:1px solid #9966cc;
	border-radius:3px;
	line-height:1;
	padding:4px 7px 5px;
	background-color:transparent;
	color:#9966cc;
}

.artwork-available button:hover {
	background-color:#f9f6fc;
}

/* 예약가능(재고 없음·제작가능) — 빠른배송과 동일 스케일, 회색 */
.artwork-subable {
	margin:10px 0 0;
	padding:5px 8px 6px;
}
.artwork-subable button {
	font-family:'Noto Sans KR';
	font-size:0.72em;
	letter-spacing: -0.5;
	font-weight:600;
	line-height:1;
	border:1px solid #999999;
	border-radius:3px;
	padding:4px 7px 5px;
	background-color:transparent;
	color:#999999;
}

.artwork-rented {
	font-family:'Noto Sans KR';
	font-size:0.82em;
	letter-spacing: -0.5;
	font-weight:600;
	line-height:1.4;
	margin:10px 0 0;
	padding:0 8px;
	color:#bbbbbb;
}

.subscribe-detail {
	display:inline-block;
	width:949px;
	padding:0px 30px 60px 0;
	vertical-align: top;
	border:0px solid #f4f4f4;
	border-width:0 1px 0 0;
}

.subscribe-info {
	font-family: 'NanumSquare';
	display:inline-block;
	vertical-align:top;
	width:390px;
	padding:2px 0 0 26px;
	position:sticky;
	top:107px;

}

.subscribe-info hr {
	border:0px solid #f4f4f4;
	border-width:1px 0 0 0;
	margin:10px 0 20px;
}

/* 좋아요 / 공유 액션 — 작가명/제목 윗줄에 우측 정렬 */
.artwork-actions {
	display:flex;
	justify-content:flex-end;
	gap:6px;
	margin-bottom:2px;
}
.artwork-actions button {
	width:38px;
	height:38px;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .15s, border-color .15s;
}
.artwork-actions button:hover {
	background:transparent;
}
.artwork-actions svg path {
	fill:none;
	stroke:#bbb;
	stroke-width:2;
}
.artwork-actions .act-like.on svg path {
	fill:#ff4d4d;
	stroke:#ff4d4d;
}
.artwork-actions .act-share svg path,
.artwork-actions .act-copy svg path {
	fill:#999;
	stroke:none;
}

img.common_image {
	max-width:100%;
}

p.artistname {
	font-size:0.9em;
	font-weight:600;
	letter-spacing: -0.5px;
	margin:10px 0 0 1px;
}

h1.name {
	margin:5px 0;
	font-weight:700;
	font-size:1.5em;
	color:#777777;
	margin:4px 0 0 0px;
	letter-spacing: -1px;
}

p.description {
	font-size:0.8em;
	margin:16px 0 0 0;
	color:#444444;
	line-height: 1.4;
}

p.subtitle {
	font-size:0.75em;
	margin:0 0 20px 0;
	color:#444444;
}

p.info {
	font-size:0.8em;
	line-height:1.24;
	margin:0 0 6px 0;
	letter-spacing: -0.5px;
}

p.warning {
	font-size:0.78em;
	line-height:1.3;
	margin:0 0 12px 0;
	letter-spacing: -0.5px;
}

p.small-desc {
	font-family: 'NanumSquare';
	text-align:left; margin:10px 0 0 10px; color:#666; font-size:14px;letter-spacing:-0.5px;line-height:1.6;
}

select.subscribe-select {
	font-family: 'NanumSquare';
	font-size:0.8em;
	width:100%;
	background-repeat:no-repeat;
	background-image: url('https://img.artnshop.net/img/select_bg_white.gif');
	background-color:#ffffff;
	border-radius:0;
	border:0px solid #dddddd;
	border-width:0 0 1px 0;
}

select.option-select {
	font-family: 'NanumSquare';
	font-size:0.8em;
	width:100%;
	background-repeat:no-repeat;
	background-image: url('https://img.artnshop.net/img/select_bg_white.gif');
	background-color:#ffffff;
	border-radius:4px;
}

button.buy {
	font-family:'NanumSquare';
	font-weight:800;
	font-size:16px;
	width:100%;
	padding:12px 26px;
	border-radius:6px;
	margin:10px 0 0 0;
	background-color:#000000;
	color:#ffffff !important;
}

#all-full-msg {
	margin:22px 0 10px;
}

.red {
	color:#ff0000;
}

.section-visual {
	background-color: color(srgb 0.986 0.989 0.94);
	padding:20px 0;
}

p.h2-sub {
	font-family:'NanumSquare';
	font-size:24px;
	text-align:center;
	margin:20px 0 0 0;
	font-weight:300;
	letter-spacing: -1px;
	line-height:1.6;
	color:#666666;
}

p.h2-warn {
	font-family:'NanumSquare';
	font-size:20px;
	text-align:left;
	margin:14px 10px 0 40px;
	font-weight:300;
	letter-spacing: -1px;
	line-height:1.4;
	color:#666666;
	transform: scaleX(0.96);
}

p.h2-sub span, p.h2-warn span {
	font-weight:600;
	color:#333333;
}

p.point {
	font-family:'NanumSquare';
	font-size:34px;
	text-align:center;
	margin:60px 0 0 0;
	font-weight:300;
	letter-spacing: -1px;
	line-height:1.5;
	color:#666666;
}

p.point span {
	font-weight:600;
	color:#333333;
}

section .compare {
	padding:20px 0;
	border-radius:10px;
}

section .compare th {
	background-color:#f2f2f2;
}

section .compare td {
	background-color:#fdfdfd;
}

section .compare td span {
	font-weight:800;
	color:#224466;
}

section .compare th, section .compare td {
	font-size:20px;
}

/* COMPARE */
.subscribe-page .compare table {
  width:100%;
  border-collapse:collapse;
  text-align:center;
}
.subscribe-page .compare th,
.subscribe-page .compare td {
  border-bottom:1px solid #eee;
  padding:20px;
}

.context {
	text-align:center;
	padding:20px;
}

.context-part {
	display:inline-block;
	width:22%;
	margin:0 10px;
	border:0px solid #000000;
	vertical-align: top;
}

.context-text {
	padding:20px 10px;
	background-color:#ffffff;
}

.context h3 {
	background-color:#000000;
	color:#ffffff;
	padding:10px;
	margin:0;
}

h3 {
	font-family:'NanumSquare';
	font-weight:800;
	margin:50px 0 10px;
}

.sub-plan h4, .sub-agree h4  {
	font-family:'NanumSquare';
	margin:30px 0 8px;
	font-size:16px;
	font-weight:500;
	color:#777777;
}

.sub-plan {
}

label.plan-item div {
	font-family:'NanumSquare';
	display:inline-block;
	width:calc(30% - 60px);
	padding:24px 36px 24px 36px;
	margin:10px 3px 10px;
	font-weight:600;
	border:2px solid var( --outline-color);
	border-radius:10px;
	color:#777777;
	vertical-align:top;
	cursor: pointer;
}

label.plan-item:nth-child(4n) div {
	margin-right:0;
}

.checked-icon {
	display:none;
	position:relative;
	margin:-256px 0 0 208px;
}

label.plan-item input[type=radio]:checked + div {
	border-color: #000000;
	color:#000000;
	p.plan-desc span {
		color:#ff0000;
	}
	.checked-icon {
		display:inline-block;
	}
}

 p.plan-name {
	font-size:16px;
	font-weight:800;
	margin:0 0 4px 0;
}

p.plan-price {
	font-size:18px;
	font-weight:800;
	margin:0 0 16px 0;

}

p.plan-price span {
	font-size:12px;
	font-weight:400;
}

/* ── 월/연 결제 토글 (연 가격 있는 플랜만 노출) ────────────
 * ⚠ 상위 `label.plan-item div`(자손 결합자)가 카드 내부 div 까지 잡으므로
 *   `label.plan-item` 으로 명시도를 올리고 상속된 박스 스타일(width/padding/border/display)을 리셋 */
/* 노트는 항상 자리를 차지(visibility)해 월/연 토글 시 카드 높이가 변하지 않게 함.
   월결제(기본)에서는 숨기되 공간은 유지, 연결제(data-cycle=yearly)에서만 노출 */
p.plan-cycle-note {
	visibility:hidden;
	font-size:12px;
	font-weight:600;
	color:#224466;
	margin:-8px 0 12px;
	letter-spacing:-0.5px;
}
label.plan-item[data-cycle="yearly"] .plan-cycle-note { visibility:visible; }
p.plan-cycle-note b { font-weight:800; }
label.plan-item .cycle-toggle {
	display:flex;
	width:auto;
	padding:0;
	margin:0 0 14px;
	border:1px solid #dddddd;
	border-radius:8px;
	overflow:hidden;
}
label.plan-item .cycle-toggle .cyc {
	flex:1;
	width:auto;
	padding:8px 0;
	margin:0;
	font-family:'NanumSquare';
	font-size:13px;
	font-weight:700;
	color:#888888;
	background-color:#f7f7f7;
	border:0;
	border-radius:0;
	cursor:pointer;
}
label.plan-item .cycle-toggle .cyc.active {
	background-color:#111111;
	color:#ffffff;
}

p.plan-desc {
	font-size:14px;
	line-height:1.3;
	font-weight:400;
	margin:4px 0 8px;
	letter-spacing:-0.5px;
}

label.plan-item input[type=radio], label.pay-method input[type=radio] {
	display:none;
}

label.pay-method div {
	font-family:'NanumSquare';
	display:inline-block;
	width:calc(100% - 102px);
	padding:24px 36px 24px 36px;
	margin:10px 3px 10px;
	font-weight:600;
	border:2px solid var( --outline-color);
	border-radius:10px;
	color:#777777;
	vertical-align:top;
	cursor: pointer;
}

label.pay-method input[type=radio]:checked + div {
	border-color: #000000;
	color:#000000;
	p.plan-desc span {
		color:#ff0000;
	}
}

.sub-shipping .input-area {
	width:calc(100% - 102px);
	border:0px solid var( --outline-color);
	background-color:#fbfbfb;
	border-radius:10px;
	padding:24px 36px 14px;
}

.sub-shipping .input-area p {
	display:inline-block;
	width:130px;
}

.sub-shipping input {
	font-family:'NanumSquare';
	font-size:15px;
	background-color:#ffffff;
	border:1px solid #cccccc;
	//border-width:0 0 0 0;
	border-radius:6px;
	font-weight:600;
	margin-bottom:14px;
}

.sub-shipping input::placeholder {
	color:#bbbbbb;
	font-weight:600;
}

.tnc {
	width:100%;
	height:180px;
	padding:15px;
	font-size:12px;
	border:2px solid var( --outline-color);
	border-radius:10px;
	margin:10px 0;
	resize:none;
}

.sub-submit {
	margin:30px 0 100px;
	text-align:center;
}

.sub-agree div {
	font-family:'NanumSquare';
	font-size:13px;
	font-weight:600;
	letter-spacing:-0.5px;
	line-height:1.8;
	margin:6px 0 0 0;
}

.sub-agree div input[type=checkbox] {
	vertical-align: -2px;
}

p.paymethod {
	font-family:'NanumSquare';
	font-size:16px;
	font-weight:800;
}

p.header {
	font-family:'NanumSquare';
	font-size:14px;
	font-weight:600;
}

p.header span {
	color:#ff0000;
}

div.warning {
	font-family:'NanumSquare';
	background-color:#f7f7f7;
	padding:20px 16px;
	margin:12px 0 0 0;
	font-size:13px;
	width:calc(100% - 66px);
	letter-spacing:-0.5px;
	line-height:2;
	border-radius:10px;
}

table.condition {
	width:100%;
	border-collapse: collapse;
}

table.condition tr th {
	font-size:0.7em;
	padding:9px 8px 6px;
	border:0px solid #e6e6e6;
	border-width:0 0 1px 0;
	background-color:#f4f4f4;
	text-align:center;
}

table.condition tr td {
	font-size:0.76em;
	padding:6px 8px;
	border:0px solid #e6e6e6;
	border-width:0 0 1px 0;
	text-align:center;
}

/* 구독조건 테이블 - 재고 상태 뱃지 */
.opt-available {
	display:inline-block;
	font-size:0.88em;
	font-weight:700;
	color:#5b8c5a;
	background-color:#FF0000;
	border:1px solid #FF0000;
	border-radius:3px;
	padding:2px 7px;
	letter-spacing:-0.3px;
	white-space:nowrap;
}

.opt-unavailable {
	display:inline-block;
	font-size:0.88em;
	font-weight:700;
	color:#ffffff;
	background-color:#33AA66;
	border:1px solid #33AA66;
	border-radius:3px;
	padding:2px 7px;
	letter-spacing:-0.3px;
	white-space:nowrap;
}

/* 이용신청 영역 - 구독 시작하기 링크 버튼 */
a.btn-start-subscribe {
	font-family:'NanumSquare';
	font-weight:800;
	font-size:16px;
	display:block;
	width:100%;
	padding:12px 26px;
	border-radius:6px;
	margin:10px 0 0 0;
	background-color:#000000;
	color:#ffffff !important;
	text-align:center;
	text-decoration:none;
	box-sizing:border-box;
	cursor:pointer;
}

a.btn-start-subscribe:hover {
	background-color:#333333;
}

/* ── 내 구독 현황 ──────────────────────────── */
.my-sub-info {
	background-color:#f8f8f8;
	border:1px solid #e8e8e8;
	border-radius:6px;
	padding:10px 14px;
	margin:8px 0 12px;
}
.sub-plan-row {
	font-size:13px;
	color:#444;
	margin:3px 0;
	padding:0;
}
.sub-slot-ok   { color:#3a7d44; font-weight:600; }
.sub-slot-swap { color:#b07d00; font-weight:600; }
.sub-slot-full { color:#999;    font-weight:600; }

/* ── 이미 이용/신청 중 알림 ──────────────────── */
.sub-status-notice {
	font-size:13px;
	border-radius:6px;
	padding:9px 14px 9px 34px;
	margin:0 0 6px;
	text-indent: -20px;
}
.sub-status-notice.rented {
	border:1px solid #777777;
	color:#000000;
}
.sub-status-notice.requested {
	border:1px solid #777777;
	color:#000000;
}

ul.community-tab li {
	width: calc(50.0% - 2px);
	display: inline-block;
	font-size: 16px;
	padding: 15px 0 10px;
	text-align: center;
	font-family: 'NanumSquare';
	font-weight: 700;
	letter-spacing: -0.5px;
	border-bottom: 2px solid #bbbbbb;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
}

ul.community-tab li:nth-child(1).active {
	border: 0px solid #bbbbbb;
	border-width: 2px 2px 0 0;
	border-radius: 0 5px 0 0;
	padding: 15px 0 12px;
	background-color: #ffffff;
}

ul.community-tab li:nth-child(2).active {
	border: 0px solid #bbbbbb;
	border-width: 2px 0 0 2px;
	border-radius: 5px 0 0 0;
	padding: 15px 0 12px;
	background-color: #ffffff;
}

ul.community-tab li:last-child {
	width: calc(50.0% - 2px);
}