/* 전역 변수 선언 */
: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;
}

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;
	height:100%;
	top: 50%; /* 수직 중앙 */
	left: 50%; /* 수평 중앙 */
	transform: translate(-50%, -50%); /* 중앙 정렬 */
}

.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: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.5);
  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 {
list-style: none;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(16px, 0.8vw + 6px, 40px);
padding: 0 0 0 clamp(16px, 0.8vw + 6px, 40px);
margin:0 0 40px 0;

/* 🔥 이 3개가 핵심 */
flex: 0 0 auto;   /* 🔥 핵심 */
width: 100%;
max-width: 100%;   /* 👉 이거 중요 */
flex-shrink: 0;
box-sizing: border-box;
}

.curationUl li {
	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;
}

.curationUl li img.thumbnail {
	width:100%;
	height:100%;
	object-fit: cover;
}

.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-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:979px;
	padding:0px 0px 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;
}

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-sub 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:-196px 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;
}

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:#eef6ee;
	border:1px solid #b6d9b5;
	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:#999999;
	background-color:#f4f4f4;
	border:1px solid #dddddd;
	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;
}