@charset "utf-8";
/* =========================================================================
   북토리 - 내 디자인 캘린더 (calendar/index2.asp) 전용 스타일
   - 피그마: 디자인_캘린더인트로2 (node 2:303)
   - 폰트: Noto Sans KR (header.asp에서 notosanskr.css 로드)
   - 레이아웃: 전체 폭 밴드 + 1200px 중앙 정렬 이너 (기존 사이트 규칙)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 디자인 토큰
   ------------------------------------------------------------------------- */
:root {
	--mcld-orange: #ff6e41;   /* 나의 디자인캘린더 포인트 */
	--mcld-navy:   #010aaa;   /* 상단 띠 / 강조 배경 */
	--mcld-blue:   #0075c2;   /* 북토리 로고 색상 */
	--mcld-red:    #ff3838;   /* 강조 빨강 */
	--mcld-black:  #333333;   /* 기본 검정 */
	--mcld-gray:   #666666;   /* 중간(보조) */
	--mcld-gray-l: #cccccc;   /* 밝은 회색 */
	--mcld-bg:     #f8f8f8;   /* 배경 회색 */
	--mcld-bg2:    #EFF1F9;   /* 배경 하늘색 */
	--mcld-white:  #ffffff;
}

/* -------------------------------------------------------------------------
   2. 공통 레이아웃 / 타이포
   ------------------------------------------------------------------------- */
.mcld {
	min-width: 1200px;
	font-family: "Noto Sans KR", sans-serif;
	color: var(--mcld-black);
	letter-spacing: 0;
	line-height: 1.4;
	background: var(--mcld-bg); /* 페이지 전체 은은한 베이스 배경 #f8f8f8 */
}
.mcld * { box-sizing: border-box; }
.mcld img { max-width: 100%; vertical-align: top; }

/* 전체 폭 밴드 안의 1200px 중앙 정렬 컨테이너 */
.mcld-inner {
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* 섹션 대표 타이틀 (파랑, 가운데) */
.mcld-sec-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mcld-blue);
	text-align: center;
}
/* 좌측 정렬 소제목 (검정, 자간 좁게) */
.mcld-sub-title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--mcld-black);
}

/* 공통 버튼 */
.mcld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Noto Sans KR", sans-serif;
	gap: 4px;
	height: 64px;
	min-width: 200px;
	padding: 0 24px;
	border-radius: 3px;
	border: none;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
}
.mcld-btn:hover { opacity: .88; transform: translateY(-2px); }
.mcld-btn--white  { background: var(--mcld-white);  color: var(--mcld-orange); }
.mcld-btn--white:hover  { background: var(--mcld-white);  color: var(--mcld-orange); }
.mcld-btn--whiteNavy   { background: var(--mcld-white);  color: var(--mcld-navy); }
.mcld-btn--whiteNavy:hover   { background: var(--mcld-white);  color: var(--mcld-navy); }

.mcld-btn--blue   { background: var(--mcld-blue);  color: var(--mcld-white); }
.mcld-btn--blue:hover   { background: var(--mcld-blue);  color: var(--mcld-white);}
.mcld-btn--orange { background: var(--mcld-orange); color: var(--mcld-white); }
.mcld-btn--navy   { background: var(--mcld-navy);   color: var(--mcld-white); }

/* -------------------------------------------------------------------------
   2-1. 페이지 상단 히어로 밴드 (캘린더)
   - 배경: band_hero_bg.png (1920*400) 전체 폭 밴드, 이미지 중앙 기준 정렬
   ------------------------------------------------------------------------- */
.mcld-hero {
	display: flex;
	align-items: center;
	height: 400px;
	background: url("/images/ko/img-mycld/band_hero_bg.png") no-repeat center top var(--mcld-white);
	background-size: cover; 
	padding-bottom: 80px; 
}
.mcld-hero__title {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--mcld-black);
}
.mcld-hero__desc {
	margin-top: 18px;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--mcld-gray);
}

/* -------------------------------------------------------------------------
   3. Hero (세상 하나뿐인 나의 디자인으로 캘린더 만들기)
   ------------------------------------------------------------------------- */
.mcld-mydesign {
	position: relative;
	height: 653px;      /* 원본 컬러 밴드 높이 */
	overflow: hidden;   /* 패럴랙스 오브젝트가 섹션 밖으로 나가지 않도록 */
	background: var(--mcld-orange);
}
.mcld-mydesign .mcld-inner {
	position: relative;
	z-index: 5;        /* 오브젝트 레이어보다 위 */
	height: 100%;
	padding-top: 125px;
}

/* 패럴랙스 무대 : 1920 기준 캔버스를 화면 중앙에 고정 */
.mcld-mydesign__scene {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1920px;
	height: 653px;
	margin-left: -960px;
	pointer-events: none;
}
.mcld-mydesign__layer {
	position: absolute;
	display: block;
	max-width: none;
	will-change: transform;
}
/* 오브젝트 위치 : 원본 합성본과 픽셀 정합으로 산출 (뒤 → 앞) */
.mcld-mydesign__layer--cal  { left: 936px;  top: -23px; width: 591px; z-index: 1; }
.mcld-mydesign__layer--note { left: 1142px; top: 139px; width: 599px; z-index: 2; }
.mcld-mydesign__layer--pink { left: 1049px; top: 459px; width: 107px; z-index: 3; }
.mcld-mydesign__layer--blue { left: 1526px; top: 426px; width: 214px; z-index: 4; }

/* MY 아이콘 (Figma export) */
.mcld-mydesign__icon { width: 84px; height: auto; }

/* MY 배지 아이콘 - CSS 대체본(미사용, 이미지 미제공 시 fallback) */
.mcld-mydesign__badge {
	position: relative;
	width: 71px;
	height: 43px;
	border: 2px solid var(--mcld-white);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--mcld-white);
}
/* 상단 제본 눈금 */
.mcld-mydesign__badge::before {
	content: "";
	position: absolute;
	left: 6px; right: 6px; top: -1px;
	height: 6px;
	background-image: repeating-linear-gradient(to right, var(--mcld-white) 0 3px, transparent 3px 7px);
}
/* 하단 흰 바 */
.mcld-mydesign__badge::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -13px;
	height: 8px;
	background: var(--mcld-white);
	border-radius: 2px;
}

.mcld-mydesign__title {
	margin-top: 42px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mcld-white);
}
.mcld-mydesign__desc {
	margin-top: 14px;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: var(--mcld-white);
}
.mcld-mydesign__btns {
	margin-top: 24px;
	display: flex;
	gap: 20px;
}

/* -------------------------------------------------------------------------
   4. 특별함 + 캘린더 크기 비교 / 사이즈 정보
   ------------------------------------------------------------------------- */
.mcld-special {
	padding: 55px 0 60px;
	background: transparent;
}
.mcld-special .mcld-sec-title { margin-bottom: 50px; }

/* 특별함 인포그래픽 이미지 */
.mcld-feature {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
.mcld-note {
	margin-top: 12px;
	font-size: 12px;
	color: var(--mcld-gray);
	position: absolute;
	bottom: 10px;
	left: 20px;
}
.mcld-note::before {
	content: "\25CF";
	margin-right: 5px;
	font-size: 8px;
	vertical-align: 2px;
}

/* 크기 비교 */
.mcld-size { margin-top: 50px; }
.mcld-size__head { margin-bottom: 30px; }

/* 캘린더가 놓이는 눈금 무대 */
.mcld-size__stage {
	position: relative;
	height: 405px;
	margin-bottom: 90px;
	background: repeating-linear-gradient(to bottom, transparent 0 24px, #ebebeb 24px 25px);
}
.mcld-size__item {
	position: absolute;
	bottom: 0;
}
.mcld-size__item img {
	display: block;
	width: 100%;
	height: auto;
}
/* A4 크기 기준(뒤쪽 반투명 카드) */
.mcld-size__item--ref { z-index: 0; }
.mcld-size__a4 {
	position: absolute;
	top: 13px;
	left: 76%;
	transform: translateX(-50%);
	font-size: 30px;
	font-weight: 700;
	color: var(--mcld-gray-l);
}
/* 캘린더 하단 캡션 */
.mcld-size__cap {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 14px;
	text-align: center;
	white-space: nowrap;
}
.mcld-size__cap b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-size__cap span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--mcld-gray);
}

/* -------------------------------------------------------------------------
   5. 주문 및 견적문의 (전화 / 이메일 / 게시판)
   ------------------------------------------------------------------------- */
.mcld-contact {
	padding: 55px 0 60px;
	background: var(--mcld-white);
}
.mcld-contact--band { background: transparent; }
.mcld-contact__title {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -1.5px;
	text-align: center;
	color: var(--mcld-black);
}
.mcld-contact__cols {
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	padding: 50px;
}
.mcld-contact__col {
	flex: 1 1 0;
	padding: 0 30px;
}
.mcld-contact__col:first-child { padding-left: 0; }
.mcld-contact__col:last-child  { padding-right: 0; }
.mcld-contact__div {
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 118px;
	background: #e5e5e5;
}
.mcld-contact__col h4 {
	font-size: 24px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-contact__col p {
	margin-top: 19px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-gray);
}
.mcld-contact__val {
	margin-top: 16px;
	font-size: 24px;
	font-weight: 700;
	color: var(--mcld-blue);
}
.mcld-contact__write {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 156px;
	height: 37px;
	border-radius: 3px;
	background: var(--mcld-blue);
	color: var(--mcld-white);
	font-size: 16px;
	text-decoration: none;
	transition: opacity .2s;
	margin-top: 12px;
}
.mcld-contact__write:hover { opacity: .88; color: var(--mcld-white); text-decoration: none; }

/* 하단 주문/견적문의 - 박스형 카드 (Component 13) */
.mcld-orderbox {
	display: flex;
	gap: 20px;
	margin-top: 50px;
}
.mcld-orderbox__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 44px 30px;
	background: #eef4fb;
	border-radius: 10px;
	text-align: center;
}
.mcld-orderbox__item h4 {
	font-size: 22px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-orderbox__item p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-gray);
}
.mcld-orderbox__item .val {
	margin-top: 14px;
	font-size: 22px;
	font-weight: 700;
	color: var(--mcld-blue);
}
.mcld-orderbox__item .val a { color: inherit; text-decoration: none; }
.mcld-orderbox__item .mcld-contact__write { margin-top: 16px; }

/* -------------------------------------------------------------------------
   6. 문의 게시판 폼 (전문가 손길로 탄생한 특별한 캘린더)
   ------------------------------------------------------------------------- */
.mcld-inquiry {
	padding: 100px 0 120px;
	background: var(--mcld-white);
}
.mcld-inquiry__head { text-align: center; margin-bottom: 50px; }
.mcld-inquiry__title {
	font-size: 40px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-inquiry__desc {
	max-width: 680px;
	margin: 24px auto 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--mcld-gray);
}

/* 폼 패널 */
.mcld-form { background: var(--mcld-white); border: 1px solid #fff; }/*보더컬러 e5e5e5*/

/* 개인정보 동의 */
.mcld-agree { padding: 10px 0px; border-bottom: 1px solid #e5e5e5; }
.mcld-agree__text {
	height: 200px;
	overflow-y: auto;
	padding: 20px;
	border-top: 3px solid #333;
	background: var(--mcld-bg);
	font-size: 13px;
	line-height: 22px;
	color: var(--mcld-gray);
	white-space: pre-line;
	font-weight: 300;
}
.mcld-agree__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: var(--mcld-black);
    cursor: pointer;
    background: var(--mcld-bg);
    border-bottom: 1px solid #333;
    padding: 20px;
}
.mcld-agree__check input { width: 18px; height: 18px;  accent-color: var(--mcld-blue);color: var(--mcld-white); }

/* 필드 행 (라벨 + 입력) */
.mcld-field {
	display: flex;
	align-items: flex-start;
	padding: 12px 0px;
	border-bottom: 1px solid #f0f0f0;
}

.mcld-field:nth-child(2) {	border-top: 3px solid #333;
}

.mcld-field__label {
	flex: 0 0 200px;
	padding-top: 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--mcld-black);
}
.mcld-field__label .req { color: var(--mcld-red); margin-left: 2px; }
.mcld-field__body { flex: 1 1 auto; }

/* 입력 요소 공통 */
.mcld-input {
	padding: 0 14px;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	font-size: 14px;
	color: var(--mcld-black);
	vertical-align: middle;
}
.mcld-input:focus { outline: none; border-color: var(--mcld-blue); }
.mcld-input--name { width: 336px; }
.mcld-input--tel  { width: 100px; }
.mcld-input--mail { width: 300px; }
.mcld-input--qty  { width: 302px; }
.mcld-inline { display: flex; align-items: center; gap: 10px; }
.mcld-inline .at { color: var(--mcld-gray); }
.mcld-inline .unit { font-size: 14px; color: var(--mcld-gray); }
.mcld-textarea {
	width: 100%;
	height: 163px;
	padding: 14px;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	font-size: 14px;
	line-height: 22px;
	resize: vertical;
}
.mcld-textarea:focus { outline: none; border-color: var(--mcld-blue); }

/* 캘린더 종류 선택 카드 */
.mcld-caltype { display: flex; gap: 15px; }
.mcld-caltype__card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 12px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: var(--mcld-white);
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}
.mcld-caltype__card input {
	position: absolute;
	top: 12px; left: 12px;
	width: 17px; height: 17px;
	accent-color: var(--mcld-blue);
	color: var(--mcld-white);
}
.mcld-caltype__card:has(input:checked) {
	border-color: var(--mcld-blue);
	box-shadow: 0 0 0 1px var(--mcld-blue) inset;
}
.mcld-caltype__thumb {
	height: 215px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 18px;
}
.mcld-caltype__thumb img { width: auto; height: auto; max-height: 215px; }
.mcld-caltype__name { font-size: 16px; font-weight: 700; color: var(--mcld-black); }
.mcld-caltype__size {
	margin-top: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--mcld-gray);
	text-align: center;
}

/* 수정 영역 체크박스 */
.mcld-revise { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 8px; }
.mcld-revise label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--mcld-black);
	cursor: pointer;
}
.mcld-revise input { width: 17px; height: 17px; accent-color: var(--mcld-blue);color: var(--mcld-white); }

/* 첨부파일 */
.mcld-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mcld-file__btn {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border: 1px solid #bbb;
	border-radius: 2px;
	background: var(--mcld-bg);
	font-size: 12px;
	color: var(--mcld-black);
	cursor: pointer;
}
.mcld-file__name { font-size: 14px; color: var(--mcld-gray); }
.mcld-file input[type="file"] { display: none; }
.mcld-file__note { width: 100%; margin-top: 8px; font-size: 13px; color: var(--mcld-gray); }

/* 하단 버튼 */
.mcld-form__btns { display: flex; justify-content: center; gap: 20px; padding: 40px; }
.mcld-form__btns .mcld-btn { min-width: 300px; }
.mcld-btn--line {
	background: var(--mcld-white);
	color: var(--mcld-gray);
	border: 1px solid #ccc;
}

/* -------------------------------------------------------------------------
   7. 다양한 템플릿으로 쉽고 빠르게 (네이비 밴드)
   ------------------------------------------------------------------------- */
.mcld-band {
	position: relative;
	height: 654px;      /* 원본 컬러 밴드 높이 */
	overflow: hidden;   /* 패럴랙스 오브젝트가 파란 영역 밖으로 나가지 않도록 */
	background: var(--mcld-navy);
}
.mcld-band .mcld-inner {
	position: relative;
	z-index: 5;
	height: 100%;
	padding-top: 113px;
}

/* 패럴랙스 무대 : 1920 기준 캔버스를 화면 중앙에 고정 */
.mcld-band__scene {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1920px;
	height: 654px;
	margin-left: -960px;
	pointer-events: none;
}
.mcld-band__layer {
	position: absolute;
	display: block;
	max-width: none;
	will-change: transform;
}
/* 오브젝트 위치 : 원본 합성본과 픽셀 정합으로 산출 (뒤 → 앞) */
.mcld-band__layer--dayoff { left: 658px;  top: 429px; width: 425px; z-index: 2; }
.mcld-band__layer--big    { left: 934px;  top: -37px; width: 850px; z-index: 3; }
.mcld-band__layer--cube3  { left: 1637px; top: 374px; width: 200px; z-index: 1; }
.mcld-band__layer--cube4  { left: 1582px; top: 31px; width: 100px; z-index: 4; }
.mcld-band__title {
	margin-top: 22px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mcld-white);
}
.mcld-band__desc {
	margin-top: 14px;
	font-size: 16px;
	line-height: 22px;
	color: var(--mcld-white);
}
.mcld-band__btn { margin-top: 24px; }

/* -------------------------------------------------------------------------
   8. 커스텀 옵션 그리드 (지그재그)
   ------------------------------------------------------------------------- */
.mcld-custom { padding: 50px 0 100px; background: var(--mcld-bg2);}
.mcld-custom__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mcld-custom__row:nth-of-type(even) { flex-direction: row-reverse; }
.mcld-custom__photo { flex: 0 0 600px; }
.mcld-custom__photo img {
	display: block;
	width: 600px;
	height: 450px;
	object-fit: cover;
	border-radius: 8px;
}
.mcld-custom__text { flex: 0 0 480px; }
.mcld-custom__tag {
	font-size: 16px;
	font-weight: 700;
	color: var(--mcld-blue);
}
.mcld-custom__lead {
	margin-top: 14px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mcld-black);
}
.mcld-custom__body {
	margin-top: 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-gray);
}
.mcld-custom__body .noti { display: block; margin-top: 8px; color:  var(--mcld-red); }

/* -------------------------------------------------------------------------
   9. 이동탭 (페이지 내 이동 / 상단 sticky 메뉴바)
      - why/ds-serv.asp 의 #menubar 패턴을 따름
   ------------------------------------------------------------------------- */
/* sticky 전환 시 레이아웃 밀림 방지용 자리 확보 (높이는 JS가 설정) */
.mcld-menuwrap { position: relative; padding: 50px 0px 140px 0px;background: #fff; }

.mcld-menubar {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	background-color: var(--mcld-white);
	z-index: 999;
}
/* 스크롤 시 상단 고정 (ds-serv .sticky 패턴) */
.mcld-menubar.sticky {
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--mcld-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
/* 알약 버튼 3개 : 854 = 268*3 + 25*2 (Figma Group 172) */
.mcld-menubar__inner {
 display: flex;
	justify-content: center;
	width: 810px;
	margin: 0 auto;
	gap: 20px;
}
.mcld-menubar a {
	position: relative; /* 보조 설명(data-tip) 기준 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 58px;
	border: 1px solid var(--mcld-black);
	border-radius: 100px;
	background: var(--mcld-white);
	font-size: 20px;
	color: var(--mcld-black);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.mcld-menubar a:focus { outline: none; }
/* 활성 탭 : 검정 채움 + 흰 글자 */
.mcld-menubar a.on {
	background: var(--mcld-black);
	color: var(--mcld-white);
}

.mcld-menubar a[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% - 94px);
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	font-size: 14px;
	font-weight: 300;
	color: #2b2929;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	background: #fff;
 border-bottom: 1px solid #dddd; 
	border-radius: 100px;
	padding: 6px 20px;
	z-index: 999;
}
/* 말풍선 꼬리 외곽선 */
.mcld-menubar a[data-tip]::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  width: 16px;  height: 16px;
  background: #fff;
  border-top: 1px solid #dddd; 
  border-left: 1px solid #dddd; 
  transform: translateX(-50%) rotate(45deg);
	 opacity: 0;
}

.mcld-menubar a[data-tip]:hover::after,
.mcld-menubar a[data-tip]:focus-visible::after ,
.mcld-menubar a[data-tip]:hover::before,
.mcld-menubar a[data-tip]:focus-visible::before {
	opacity: 1;
}

/* 스크린리더 전용 (화면에서 감춤) */
.mcld-blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* =========================================================================
   10. 템플릿 캘린더 목록 (calendar/template_list.asp)
        - 피그마: 2_depth2_템플릿목록
        - 색상/컨테이너/입력요소는 위 공통 토큰과 .mcld-inner, .mcld-input 재사용
   ========================================================================= */

/* -------------------------------------------------------------------------
   10-1. 분류 탭 (전체보기 / 탁상용 3종 / 벽걸이)
   ------------------------------------------------------------------------- */
.mcld-tpl-tabs {
	background: #f6f6f6;;
	border-bottom: 1px solid #d2d2d2;;
}
.mcld-tpl-tabs__list {
	display: flex;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.mcld-tpl-tabs__item { flex: 1 1 0; }
.mcld-tpl-tabs__btn {
	display: block;
	width: 100%;
	padding: 20px 8px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--mcld-black);
	cursor: pointer;
	transition: color .2s;
}
.mcld-tpl-tabs__btn:hover { color: var(--mcld-blue); }
/* 페이지 이동용 링크 탭 (index2.asp 로 이동) */
.mcld-tpl-tabs__btn--link { text-decoration: none; }
/* 활성 탭 : 파랑 + 굵게 */
.mcld-tpl-tabs__btn[aria-selected="true"] {
	color: var(--mcld-blue);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   10-2. 목록 그리드
   ------------------------------------------------------------------------- */
.mcld-tpl-list { padding: 30px 0 100px; background: var(--mcld-white); }
.mcld-tpl-list__notice {
	margin-bottom: 40px;
	font-size: 15px;
	color: var(--mcld-black);
	text-align: right;
}
.mcld-tpl-list__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 56px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mcld-tpl-list__empty {
	grid-column: 1 / -1;
	padding: 80px 0;
	color: var(--mcld-gray);
	text-align: center;
}

/* 카드 (템플릿목록섬네일) */
.mcld-tpl-card__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.mcld-tpl-card__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 296px;
	padding: 24px;
	border-radius: 10px;
	background: var(--mcld-bg);
	overflow: hidden;
}
.mcld-tpl-card__thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	transition: opacity .2s;
}
/* 마우스 오버 시 노출되는 _hover 이미지 (기본 이미지 위에 겹쳐서 페이드 전환) */
.mcld-tpl-card__thumb-hover {
	position: absolute;
	object-fit: contain;
	opacity: 0;
}
.mcld-tpl-card__btn:hover .mcld-tpl-card__thumb-hover,
.mcld-tpl-card__btn:focus-visible .mcld-tpl-card__thumb-hover { opacity: 1; }
.mcld-tpl-card__btn:focus-visible .mcld-tpl-card__thumb {
	outline: 2px solid var(--mcld-blue);
	outline-offset: 2px;
}
.mcld-tpl-card__name {
	display: block;
	margin-top: 18px;
	font-size: 20px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-tpl-card__size {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--mcld-gray);
}

/* 변경 가능 항목 태그 (툴팁 리스트) */
.mcld-tpl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.mcld-tpl-tag {
	display: flex;
 align-items: center;
 justify-content: center;
 min-width: 58px;
 min-height: 46px;
 border: 1px solid currentColor;
 border-radius: 3px;
 background: var(--mcld-white);
 font-size: 12px;
 font-weight: 500;
 line-height: 1;
 text-align: center;
 color: var(--mcld-blue);
}
.mcld-tpl-tag--orange { color: var(--mcld-orange); }
.mcld-tpl-tag--red    { color: var(--mcld-red); }
.mcld-tpl-tag--gray   { color: var(--mcld-gray); }
.mcld-tpl-tag--teal   { color: #17b0b8; }

/* 설명 툴팁이 붙는 태그 : 마우스오버/포커스로 안내 노출 */
.mcld-tpl-tag--tip { cursor: help; }
.mcld-tpl-tag--tip:focus-visible {
	outline: 1px solid var(--mcld-blue);
	outline-offset: 0px;
}

/* =========================================================================
   태그 설명 말풍선 툴팁 (변경예시보기)
   - JS 가 body 에 하나만 만들어 재사용, --tip-color 로 태그색 테두리 지정
   - 문구 + 예시 이미지, 위쪽으로 향한 꼬리(태그를 가리킴)
   ========================================================================= */
.mcld-tip {
	--tip-color: var(--mcld-blue);
	position: fixed;
	z-index: 1100;               /* 팝업(z-index:101)/딤보다 위 */
	width: 320px;
	max-width: calc(100vw - 20px);
	padding: 18px 18px 16px;
	border: 1px solid var(--tip-color);
	border-radius: 12px;
	background: var(--mcld-white);
	color: var(--mcld-black);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
	/* pointer-events: none;        툴팁 위에서 마우스아웃 되지 않도록 */
}
.mcld-tip[hidden] { display: none; }

.mcld-tip__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
	color: var(--mcld-black);
}
.mcld-tip__img {
	display: block;
	width: 100%;
	margin-top: 14px;
	border-radius: 6px;
}

/* 꼬리 : 흰 사각형을 45도 회전 → 위 두 변에만 태그색 테두리 (기본: 위쪽 방향) */
.mcld-tip__caret {
	position: absolute;
	top: -8px;
	width: 14px;
	height: 14px;
	background: var(--mcld-white);
	border-left: 1px solid var(--tip-color);
	border-top: 1px solid var(--tip-color);
	transform: rotate(45deg);
}
/* 툴팁이 태그 위쪽에 뜰 때는 꼬리를 아래로 */
.mcld-tip.is-above .mcld-tip__caret {
	top: auto;
	bottom: -8px;
	border-left: 0;
	border-top: 0;
	border-right: 1px solid var(--tip-color);
	border-bottom: 1px solid var(--tip-color);
}

/* =========================================================================
   11. 정보입력 팝업 (템플릿목록섬네일 클릭 시)
        - eprd/design.asp 의 모달 형식을 그대로 사용합니다.
        - 아래 클래스는 전부 layout.css / common.css 에 이미 정의되어 있으므로
          여기서는 "이 팝업에만 필요한 차이"만 .view-eprd--tpl 로 한정해 추가합니다.

          layout.css : .view-eprd  .close  .left  .right  .eprd-preview
                       .eprd-sel-opt  .eprd-title2  .eprd-title3  .optes
                       .opt-item  .info  .eprd-price-block  .eprd-foot-btn
                       .over-dim-layer
          common.css : .clearfix  .fl  .fr  .row5  .row10  .row20  .row30
                       .text-right  .w50per  input[type="text"]
   ========================================================================= */

/* 열림 상태 (.view-eprd 는 layout.css 에서 display:none) */
.view-eprd--tpl.is-open { display: block; }

/* -------------------------------------------------------------------------
   11-1. 좌측 : 이미지 미리보기 + 페이지 썸네일
   ------------------------------------------------------------------------- */
.view-eprd--tpl .eprd-preview {
	display: flex;
	flex-direction: column;
}

/* 캘린더 명 / 변경예시보기 태그 */
.view-eprd--tpl .tpl-pv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: none;
	margin-bottom: 12px;
	text-align: left;
}
.view-eprd--tpl .tpl-pv-head p { font-size: 14px; }
.view-eprd--tpl .tpl-pv-legend {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #767676;
}
.view-eprd--tpl .tpl-pv-head .mcld-tpl-tags { margin: 0; gap: 6px; }
.view-eprd--tpl .tpl-pv-head .mcld-tpl-tag {
	min-width: 0;
	min-height: 0;
	padding: 5px 12px;
}

/* 선택한 페이지가 놓이는 무대 (비율 유지, 잘림 없음) */
.view-eprd--tpl .tpl-pv-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 0;
	padding: 10px 50px;
	overflow: hidden;
}
.view-eprd--tpl .tpl-pv-stage img {
	max-width: 100%;
	max-height: 90%;
	width: auto;
	height: auto;
	border: 1px solid #d2d2d2;
}

/* 확대 이미지 좌우 이동 버튼 */
.view-eprd--tpl .tpl-pv-nav {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	border: 0px solid #d2d2d2;
	background: #f8f8f8;
	font-size: 100px;
	color: #5d5d5d;
	cursor: pointer;
	transition: background-color .2s, color .2s;
	font-family: 'swiper-icons';
	font-weight: 100;
	letter-spacing: 0;
	text-transform: none;
	font-variant: initial;
	line-height: 100px;
	padding: 0px 0px 30px 0px;
}
.view-eprd--tpl .tpl-pv-nav:hover {
	color: #474747;
}
.view-eprd--tpl .tpl-pv-nav:disabled {
	opacity: .3;
	cursor: default;
}
.view-eprd--tpl .tpl-pv-nav:disabled:hover {
	background: #ffffffe6;
	color: #5d5d5d;
}
.view-eprd--tpl .tpl-pv-nav--prev { left: 6px; }
.view-eprd--tpl .tpl-pv-nav--next { right: 6px; }

/* 페이지 썸네일 (표지 / 내지 / 1월(앞) ...) */
.view-eprd--tpl .tpl-film {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	margin-top: 12px;
}
.view-eprd--tpl .tpl-film__nav {
	flex: none;
	border: 0px solid #d2d2d2;
	background: #f8f8f8;
	color: #5d5d5d;
	cursor: pointer;
	
	font-family: 'swiper-icons';
	font-size: 50px;
	font-weight: 100;
	letter-spacing: 0;
	text-transform: none;
	font-variant: initial;
	line-height: 50px;
	width: 40px;
	padding-bottom: 18px;
}
.view-eprd--tpl .tpl-film__track {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	cursor: grab;
	scrollbar-width: thin;
}
/* 마우스로 끌어 이동하는 동안 */
.view-eprd--tpl .tpl-film__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;      /* 드래그 중엔 즉시 반응 */
	scroll-snap-type: none;
}
/* 드래그로 판정된 직후의 클릭(썸네일 선택)은 무시 */
.view-eprd--tpl .tpl-film__track.is-dragging .tpl-film__btn {
	pointer-events: none;
}
.view-eprd--tpl .tpl-film__btn {
	display: block;
	width: 60px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.view-eprd--tpl .tpl-film__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 2px;
	border: 1px solid #d2d2d2;
	background: var(--mcld-white);
	overflow: hidden;
}
.view-eprd--tpl .tpl-film__img img { max-width: 100%; max-height: 100%; }
.view-eprd--tpl .tpl-film__btn[aria-current="true"] .tpl-film__img {
	border-color: #294d71;
	box-shadow: 0 0 0 1px #294d71;
}
.view-eprd--tpl .tpl-film__cap {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: #767676;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   11-2. 우측 : 정보 입력 (.optes 안에서만 스크롤)
   ------------------------------------------------------------------------- */
.view-eprd--tpl .optes {
	height: 480px;
	padding-right: 15px;
	overflow-y: auto;
}
.view-eprd--tpl .opt-item { padding-right: 0; }
.view-eprd--tpl .opt-item input[type="text"] { height: 30px; }

/* 사이즈 / 본문용지 선택 버튼
   - 모양은 layout.css 의 .smart-sel 을 그대로 사용합니다.
   - 여기서는 이 팝업에만 필요한 두 가지만 보완합니다.
     (1) 숨긴 라디오가 인라인 자리를 차지해 글자가 밀리는 것 방지
     (2) 키보드 포커스 표시 (라디오 자체가 opacity:0 이라 보이지 않음) */
.view-eprd--tpl .smart-sel { position: relative; }
.view-eprd--tpl .smart-sel input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.view-eprd--tpl .smart-sel:focus-within {
	outline: 2px solid #294d71;
	outline-offset: -2px;
}

/* 기념일 반복 입력 */
.view-eprd--tpl .tpl-anniv__row {
	display: flex;
	gap: 5px;
	margin-bottom: 5px;
}
.view-eprd--tpl .tpl-anniv__row .date { flex: none; }
.view-eprd--tpl .tpl-anniv__row .text { flex: 1 1 auto; min-width: 0; }
.view-eprd--tpl .tpl-anniv__add {
	width: 100%;
	height: 26px;
	border: 1px solid #d2d2d2;
	background: var(--mcld-white);
	line-height: 1;
	color: #767676;
	cursor: pointer;
}
/* 기념일이 하나도 없을 때 안내문 */
.view-eprd--tpl .tpl-anniv__empty {
	margin-bottom: 5px;
	font-size: 12px;
	color: #333;
	text-align: center;
}
.view-eprd--tpl .tpl-anniv__empty[hidden] { display: none; }

/* 기념일 행의 삭제(×) 버튼 */
.view-eprd--tpl .tpl-anniv__del {
	flex: none;
	width: 30px;
	border: 1px solid #d2d2d2;
	background: var(--mcld-white);
	font-size: 15px;
	line-height: 1;
	color: #999;
	cursor: pointer;
}
.view-eprd--tpl .tpl-anniv__del:hover {
	background: var(--mcld-gray-l);
}

/* 테마 컬러 */
.view-eprd--tpl .tpl-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
	padding: 0px 4px;
}
.view-eprd--tpl .tpl-swatch {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	cursor: pointer;
}
.view-eprd--tpl .tpl-swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #294d71;
}
.view-eprd--tpl .tpl-swatch--custom {
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	border: 1px solid #333;
}
.view-eprd--tpl .tpl-cmyk {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}
/* '직접 지정' 외 색상 선택 시 숨김 (display:flex 보다 우선) */
.view-eprd--tpl .tpl-cmyk[hidden] { display: none; }
.view-eprd--tpl .tpl-cmyk input[type="text"] {
	width: 40px;
	height: 26px;
	padding: 0 4px;
	text-align: center;
}

/* 템플릿 기본정보 (.info 목록 형식을 그대로 사용) */
.view-eprd--tpl .info li strong { width: 110px; }

/* 파일 업로드 */
.view-eprd--tpl .tpl-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 90px;
	margin-bottom: 8px;
	padding: 14px;
	border: 1px solid #d2d2d2;
	background: var(--mcld-white);
	font-size: 12px;
	color: #767676;
	text-align: center;
	cursor: pointer;
}
.view-eprd--tpl .tpl-upload.is-dragover {
	border-color: #294d71;
	background: #f0f5fa;
}
.view-eprd--tpl .tpl-upload__btn {
	display: block;
	width: 100%;
	height: 34px;
	border: 0;
	background: #294d71;
	font-size: 13px;
	color: var(--mcld-white);
	cursor: pointer;
}
.view-eprd--tpl .tpl-filelist { font-size: 12px; }
.view-eprd--tpl .tpl-filelist li {
	padding: 4px 0;
	border-bottom: 1px dashed #e5e5e5;
}

/* 안내 문구 */
.view-eprd--tpl .tpl-notes {
	margin-top: 10px;
	font-size: 11px;
	line-height: 1.7;
	color: var(--mcld-red);
}
.view-eprd--tpl .tpl-notes--gray { color: #767676; }
.view-eprd--tpl .tpl-notes li { padding-left: 10px; text-indent: -10px; }

/* 하단 버튼 2개 (기본 .eprd-foot-btn 은 1개 기준) */
.view-eprd--tpl .eprd-foot-btn { display: flex; }
.view-eprd--tpl .eprd-foot-btn > a { flex: 2 1 0; }
.view-eprd--tpl .eprd-foot-btn > a.prev {
	flex: 1 1 0;
	background: #999;
}

/* =========================================================================
   11. 제작사양 / 배송정보 (템플릿목록 하단 안내 영역)
       - 풀폭 밴드(#f8f8f8) + 1200px 중앙 정렬 이너
       - 피그마: 2_depth2_템플릿목록 (node 1:567) 하단부
   ========================================================================= */

/* 섹션 대표 제목 (가운데, 짧은 밑줄) : 제작사양 / 배송정보 공통 */
.mcld-sec-heading {
	margin: 0 0 44px;
	padding-bottom: 22px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--mcld-black);
	text-align: center;
	position: relative;
}
.mcld-sec-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 110px;
	height: 4px;
	margin-left: -55px;
	background: var(--mcld-black);
}

/* -------------------------------------------------------------------------
   11-1. 제작사양
   ------------------------------------------------------------------------- */
.mcld-spec { padding: 90px 0 20px; background: var(--mcld-bg); }
.mcld-spec__item { margin-bottom: 80px; text-align: center; }
.mcld-spec__item:last-child { margin-bottom: 0; }

/* 슬래시 장식 소제목 ( //// 텍스트 //// ) */
.mcld-spec__deco {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 30px;
}
.mcld-spec__deco span {
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mcld-black);
}
.mcld-spec__deco::before,
.mcld-spec__deco::after {
	content: "";
	flex: 1 1 auto;
	max-width: 360px;
	height: 14px;
	margin-top:4px;
	/* 리플로우 없는 정적 배경 패턴(슬래시) */
	background: repeating-linear-gradient(-60deg,
  var(--mcld-gray-l) 0 1px, transparent 1px 6px)
}

/* 이미지 (풀폭 1200, 라운드) */
.mcld-spec__img { margin: 0; }
.mcld-spec__img img { width: 100%; border-radius: 20px; }
.mcld-spec__img--band img { border-radius: 0; } /* G7 안내 밴드 */
.mcld-spec__img--process img { border-radius: 0; }

/* 이미지 하단 설명 */
.mcld-spec__desc {
	margin-top: 26px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-black);
}
.mcld-spec__desc p { margin: 0; }
.mcld-spec__desc--blue { margin-top: 22px !important; color: var(--mcld-blue); }

/* 제작공정 하단 주의문 (좌측 정렬) */
.mcld-spec__note {
	margin-top: 24px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-black);
	text-align: left;
}
.mcld-spec__note p { margin: 0; }
.mcld-spec__note--red { color: var(--mcld-red); }

/* -------------------------------------------------------------------------
   11-2. 배송정보
   ------------------------------------------------------------------------- */
.mcld-ship { padding: 90px 0 120px; background: var(--mcld-white); }
.mcld-ship .mcld-spec__deco { margin-bottom: 40px; }

/* 배송비용 (좌: 택배 / 우: 퀵서비스) */
.mcld-ship__cost {
	display: flex;
	gap: 20px;
	margin-bottom: 60px;
}
.mcld-ship__cost-col { flex: 1 1 0; min-width: 0; }
.mcld-ship__list {
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	font-size: 14px;
	color: var(--mcld-black);
}
.mcld-ship__list li {	list-style: disc;}

/* 요금 표 */
.mcld-ship__table {
	width: 100%;
	border-collapse: collapse;
	line-height: 22px;
	color: var(--mcld-black);
	table-layout: fixed;
}
.mcld-ship__table th,
.mcld-ship__table td {
	padding: 12px 10px;
	border: 1px solid #d9d9d9;
	text-align: center;
	vertical-align: middle;
	word-break: keep-all;
}
.mcld-ship__table th {
	background: #f4f4f4;
	font-weight: 700;
}
.mcld-ship__table-sub {
	display: block;
	font-weight: 400;
	font-size: 13px;
}
.mcld-ship__table-memo {
	text-align: left !important;
	font-size: 13px;
}
.mcld-ship__foot {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-black);
	letter-spacing: -0.1px;
}

/* 배송안내 / 교환·반품 블록 */
.mcld-ship__block {
	padding-top: 34px;
	border-top: 1px solid #d9d9d9;
	display: flex;
}
.mcld-ship__block + .mcld-ship__block { margin-top: 34px; }
.mcld-ship__block-head {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 160px;
}
.mcld-ship__block-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 67px;
	height: 67px;
	flex: 0 0 auto;
}
.mcld-ship__block-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--mcld-black);
}
.mcld-ship__notes {
	margin: 0;
	padding-left: 14px;
	list-style: none;
	font-size: 14px;
	line-height: 22px;
	color: var(--mcld-black);
}
.mcld-ship__notes li { position: relative; padding-left: 14px; }
.mcld-ship__notes li::before {
	content: "-";
	position: absolute;
	left: 0;
	top: 0;
}
.mcld-ship__notes--red { color: var(--mcld-red); }
.mcld-ship__notes--blue { color: var(--mcld-blue); }

/* 1:1 상담 바로가기 버튼 */
.mcld-ship__consult {
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--mcld-black);
	font-size: 12px;
	line-height: 22px;
	color: var(--mcld-white);
	text-decoration: none;
	transition: opacity .2s;
}
.mcld-ship__consult:hover,
.mcld-ship__consult:focus-visible { opacity: .90; 
	color: var(--mcld-white);}



	/* =========================================================================
	   2. 북토리 Publish 랜딩 - .mcld 재사용 영역 미세 보정 (sub/publish_web/publish_web.asp)
	   - 상담 신청 폼 / 하단 문의는 위 1번 캘린더 랜딩(.mcld) 규칙을 그대로 쓰고,
	     이 페이지에서만 달라지는 부분만 .pub-mcld 로 덧입힙니다.
	   - 본문(히어로 / 기능 / 요금 / 혜택) 스타일은 아래 5번 .pubweb-v2 블록에 있습니다.
	   ========================================================================= */
	/* 이동탭 : 메뉴 4개가 들어가도록 폭/여백만 조정 (pill 디자인은 그대로) */
	.pub-mcld .pubmenu { padding: 40px 0; }
	.pub-mcld .mcld-menubar__inner { width: auto; flex-wrap: wrap; gap: 16px; }

	/* 상담 폼 : 개인정보 동의 블록이 없으므로 첫 필드 위에 강조선 배치 */
	.pub-mcld .mcld-form .mcld-field { border-top: 0; }
	.pub-mcld .mcld-form .mcld-field:first-child { border-top: 3px solid #333; }
	.pub-mcld .pub-select { width: 500px; max-width: 100%; background: #fff;    padding: 6px 6px; }
	.pub-mcld .pub-form-note { margin-top: 20px; font-size: 13px; color: var(--mcld-gray); }

	/* 완료 메시지 (기존 성공 안내를 .mcld 영역에서도 동일하게 표시) */
	.pub-mcld .success-msg { display: none; text-align: center; padding: 32px; background: #eff1f9; border-radius: 4px; margin: 32px auto 0; max-width: 680px; }
	.pub-mcld .success-msg.show { display: block; }
	.pub-mcld .success-msg .check-icon { width: 48px; height: 48px; background: #0075c2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; color: #fff; }
	.pub-mcld .success-msg h3 { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px; }
	.pub-mcld .success-msg p { font-size: 14px; color: #666; line-height: 1.7; }

	/* =========================================================================
	   3. 북토리 EPUBRO 랜딩 (sub/make_epub/index.asp) 전용
	   - 원본 디자인 : sub/make_epub/index.html
	   - 모든 선택자를 .epub 래퍼 아래로 스코프하여 common.css / layout.css 와 충돌 방지
	   - 페이지 자체 상단바(.topbar) / GNB(.gnb) / 푸터(footer) 는 공통 include 로 대체되어 제외
	   ========================================================================= */

	/* 디자인 토큰 : .epub 스코프에 선언하여 전역 변수와 섞이지 않게 함 */
	.epub {
		--ink: #0b0b0d;
		--ink-soft: #15151a;
		--paper: #f7f3ea;
		--paper-deep: #efe9db;
		--line: #e2d9c4;
		--line-dark: #2a2a30;
		--gold: #c9a24b;
		--gold-soft: #e3c98a;
		--gold-deep: #8f6f2c;
		--navy: #161f38;
		--navy-soft: #232f52;
		--text: #211d17;
		--text-soft: #5c5548;
		--cream-text: #f3ece0;
		--muted-on-dark: #a9a190;
		--font-kr-serif: 'Noto Serif KR', serif;
		--font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;

		/* 원본 index.html 의 body 선언을 래퍼로 옮긴 것 */
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: normal;
		color: var(--text);
		background: var(--paper);
		-webkit-font-smoothing: antialiased;
	}

	.epub *, .epub *::before, .epub *::after { box-sizing: border-box; }
	.epub img { max-width: 100%; display: block; }
	.epub a { text-decoration: none; color: inherit; }
	.epub ul { margin: 0; padding: 0; list-style: none; }
	.epub button { font-family: inherit; cursor: pointer; }
	.epub section[id] { scroll-margin-top: 90px; }

	.epub .eyebrow {
		letter-spacing: .14em;
		color: var(--gold);
		font-size: 15px;
		font-weight: 500;
	}
	.epub .section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
	.epub .section-head .eyebrow { display: block; margin-bottom: 10px; }
	.epub .section-head h2 {
		font-family: var(--font-kr-serif);
		font-size: clamp(26px, 3.4vw, 38px);
		font-weight: 700;
		line-height: 1.4;
		margin: 0 0 12px;
	}
	.epub .section-head p {
		font-size: 15.5px;
		color: var(--text-soft);
		line-height: 1.7;
		margin: 0;
	}
	.epub .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

	/* ===================== HERO ===================== */
	.epub .hero {
		position: relative;
		background: var(--ink);
		padding: 96px 0 0;
		overflow: hidden;
		overflow: clip; /* hero-copy의 position:sticky가 동작하도록 스크롤 컨테이너 생성 방지 */
	}
	.epub .hero .wrap {
		display: grid; grid-template-columns: 1fr .92fr; gap: 48px; align-items: start;
		padding-bottom: 70px;
	}
	/* 우측 hero-visual-col 높이만큼의 세로 구간 안에서 따라 움직임 */
	.epub .hero-copy { position: sticky; top: 110px; align-self: start; z-index: 3; padding-top: 22px; }
	.epub .hero-copy .eyebrow { margin-bottom: 18px; }
	.epub .hero-copy h1 {
		font-family: var(--font-kr-serif);
		color: var(--cream-text);
		font-size: clamp(30px, 3.8vw, 46px);
		line-height: 1.35;
		font-weight: 700;
		margin: 0 0 22px;
	}
	.epub .hero-copy h1 em {
		font-style: normal;
		background: linear-gradient(92deg, var(--gold-soft), var(--gold));
		-webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.epub .hero-copy p {
		font-size: 16px; line-height: 1.85; color: var(--muted-on-dark);
		max-width: 480px; margin: 0 0 34px;
	}
	.epub .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
	.epub .btn-primary {
		background: linear-gradient(92deg, var(--gold-deep), var(--gold));
		border: none;
		color: #1a1508; font-weight: 700; font-size: 15px;
		padding: 16px 30px; border-radius: 2px;
		box-shadow: 0 12px 30px -12px rgba(201,162,75,.55);
		transition: transform .2s, box-shadow .2s;
	}
	.epub .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(201,162,75,.65); }
	.epub .btn-outline {
		border: 1px solid rgba(243,236,224,.35);
		color: var(--cream-text);
		padding: 16px 26px; border-radius: 2px; font-weight: 600; font-size: 15px;
		transition: border-color .2s, background .2s;
	}
	.epub .btn-outline:hover { border-color: var(--gold-soft); background: rgba(255,255,255,.04); }

	/* --- 종이 → 픽셀 이음새를 얇은 띠로 압축한 시그니처 액센트 --- */
	.epub .hero-visual-col { position: relative; z-index: 2; }
	.epub .seam-strip {
		position: relative; overflow: hidden;
		height: 10px; border-radius: 3px; margin-bottom: 20px;
	}
	/* 배경 그라데이션이 좌 → 우로 끊김 없이 흐르는 레이어 (transform만 사용)
	   위 background를 [정방향-역방향-정방향] 3구간으로 이어 붙여 이음매 없이 반복 */
	.epub .seam-strip::before {
		content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
		background: linear-gradient(45deg,
			#f6f0df 0%, #efe4c8 14.667%,
			var(--gold-soft) 16.333%, var(--gold) 17%,
			var(--navy-soft) 18.667%, var(--navy) 33.333%,
			var(--navy-soft) 48%, var(--gold) 49.667%,
			var(--gold-soft) 50.333%, #efe4c8 52%,
			#f6f0df 66.667%, #efe4c8 81.333%,
			var(--gold-soft) 83%, var(--gold) 83.667%,
			var(--navy-soft) 85.333%, var(--navy) 100%);
		transform: translateX(-66.667%);
		animation: epSeamShift 16s linear infinite;
		will-change: transform;
	}
	@keyframes epSeamShift {
		0% { transform: translateX(-66.667%); }
		100% { transform: translateX(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.epub .seam-strip::before { animation: none; }
	}

	.epub .hero-bottom-fade {
		position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
		background: linear-gradient(180deg, transparent, var(--paper));
	}

	/* ===================== PROBLEM & SOLUTION ===================== */
	.epub .compare-sec { padding: 110px 0 100px; background: var(--paper); }
	.epub .compare-grid {
		display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 940px; margin: 0 auto;
	}
	.epub .compare-card { border-radius: 4px; padding: 34px 30px 30px; }
	.epub .compare-card.no { background: #efece5; border: 1px solid var(--line); }
	.epub .compare-card.yes {
		background: var(--ink);
		border: 1px solid rgba(201,162,75,.35);
		box-shadow: 0 24px 50px -24px rgba(0,0,0,.35);
	}
	.epub .compare-card .tag {
		display: inline-flex; align-items: center; gap: 8px;
		font-weight: 700; font-size: 14px; letter-spacing: .02em;
		margin-bottom: 22px;
	}
	.epub .compare-card.no .tag { color: #9b8f79; }
	.epub .compare-card.yes .tag { color: var(--gold-soft); }
	.epub .compare-card .tag .mark {
		width: 20px; height: 20px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		font-size: 12px;
	}
	.epub .compare-card.no .mark { background: #d8d0bd; color: #6f6650; }
	.epub .compare-card.yes .mark { background: rgba(201,162,75,.18); color: var(--gold-soft); }
	.epub .compare-card li {
		display: flex; gap: 10px; font-size: 14.5px; line-height: 1.6;
		padding: 10px 0; border-top: 1px solid rgba(0,0,0,.06);
	}
	.epub .compare-card.yes li { border-top: 1px solid rgba(255,255,255,.08); color: var(--cream-text); }
	.epub .compare-card.no li { color: #6b6350; }
	.epub .compare-card li:first-of-type { border-top: none; }
	.epub .compare-card li .b { opacity: .6; flex-shrink: 0; }

	/* ===================== FEATURES ===================== */
	.epub .features-sec { padding: 110px 0; background: var(--ink); }
	.epub .features-sec .section-head h2 { color: var(--cream-text); }
	.epub .features-sec .section-head p { color: var(--muted-on-dark); }
	.epub .feature-grid {
		display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
		background: rgba(201,162,75,.16);
		border: 1px solid rgba(201,162,75,.16);
	}
	.epub .feature-card {
		background: var(--ink);
		padding: 38px 28px 34px;
		transition: background .25s;
	}
	.epub .feature-card:hover { background: var(--ink-soft); }
	.epub .feature-card .icon {
		width: 44px; height: 44px; border-radius: 50%;
		border: 1px solid rgba(201,162,75,.4);
		display: flex; align-items: center; justify-content: center;
		margin-bottom: 22px;
	}
	.epub .feature-card .icon svg { width: 20px; height: 20px; stroke: var(--gold-soft); }
	.epub .feature-card .en {
	 color: var(--gold);
		font-size: 14px; margin-bottom: 6px; display: block;
	}
	.epub .feature-card h3 {
		font-family: var(--font-kr-serif); color: var(--cream-text);
		font-size: 19px; margin: 0 0 12px; font-weight: 600;
	}
	.epub .feature-card p {
		font-size: 13.8px; line-height: 1.75; color: var(--muted-on-dark); margin: 0;
	}

	/* ===================== PROOF / DEVICE COMPARE ===================== */
	.epub .proof-sec { padding: 110px 0; background: var(--paper); }
	.epub .proof-stage {
		max-width: 960px; margin: 0 auto;
		display: grid; grid-template-columns: 1fr auto 1fr;
		align-items: center; gap: 18px;
	}
	.epub .device {
		background: #fff; border: 10px solid #1c1a15; border-radius: 22px;
		aspect-ratio: 3/4;
		position: relative; overflow: hidden;
		box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
	}
	.epub .device .cam {
		position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
		width: 6px; height: 6px; border-radius: 50%; background: #1c1a15;
	}
	.epub .device .screen { position: absolute; inset: 0; padding: 24px 18px 18px; display: flex; flex-direction: column; }

	/* BEFORE : 종이 지면을 그대로 찍어 넣은 화면 — 리플로우 없이 확대해야 읽힘 */
	.epub .bf-chrome { display: flex; gap: 6px; margin-bottom: 16px; }
	.epub .bf-chrome-icon {
		font-size: 9px; font-weight: 700; color: #b8b8b8;
		border: 1px solid #ddd; border-radius: 4px;
		padding: 3px 7px; background: #f4f4f4;
		text-decoration: line-through;
	}
	.epub .bf-page-photo {
		position: relative; margin: 6px auto 0; width: 80%;
		background: #fdfdfb; border: 1px solid #ddd;
		box-shadow: 0 10px 20px rgba(0,0,0,.16);
		transform: rotate(-2deg);
		padding: 12px 10px;
	}
	.epub .bf-page-line { height: 2.6px; background: #a3a3a3; margin-bottom: 5px; border-radius: 1px; }
	.epub .bf-zoom-badge {
		position: absolute; bottom: -11px; right: -11px;
		width: 26px; height: 26px; border-radius: 50%;
		background: #fff; border: 1px solid #ccc;
		display: flex; align-items: center; justify-content: center;
		box-shadow: 0 4px 10px rgba(0,0,0,.15);
	}
	.epub .bf-zoom-badge svg { width: 13px; height: 13px; stroke: #999; }
	.epub .bf-caption {
		display: block; margin-top: auto; padding-top: 14px; text-align: center;
		font-size: 8px; color: #999; line-height: 1.5;
	}

	/* AFTER : 화면에 맞춰 흐르는 실제 전자책 UI */
	.epub .device.after .screen { background: linear-gradient(180deg, #fbf8f1, #f3ecdd); }
	.epub .af-chrome { display: flex; gap: 6px; margin-bottom: 16px; }
	.epub .af-chrome-icon {
		font-size: 9px; font-weight: 700; color: var(--gold-deep);
		border: 1px solid rgba(201,162,75,.45); border-radius: 4px;
		padding: 3px 8px; background: rgba(201,162,75,.1);
	}
	.epub .device.after .screen .title {
		font-family: var(--font-kr-serif); font-size: 13px; font-weight: 700; color: #211d17;
		margin-bottom: 4px;
	}
	.epub .device.after .screen .sub {
		color: var(--gold-deep);
		font-size: 9px; margin-bottom: 10px; display: block;
	}
	.epub .device.after .screen p {
		font-size: 9.5px; line-height: 1.95; color: #4a4436; margin: 0 0 10px;
		font-family: var(--font-kr-serif);
		padding-left: 8px; border-left: 2px solid var(--gold);
	}
	.epub .af-note { color: var(--gold-deep); font-size: 7px; font-weight: 700; margin-left: 1px; }
	.epub .af-caption {
		display: block; margin-top: auto; padding-top: 14px; text-align: center;
		font-size: 8px; color: var(--gold-deep); line-height: 1.5;
	}
	.epub .proof-arrow {
		display: flex; flex-direction: column; align-items: center; gap: 8px;
		color: var(--gold-deep);
	}
	.epub .proof-arrow span {
		font-size: 13px; color: var(--text-soft);
		writing-mode: vertical-rl;
	}
	.epub .proof-labels {
		max-width: 960px; margin: 26px auto 0;
		display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
		text-align: center;
	}
	.epub .proof-labels .l1, .epub .proof-labels .l3 { font-size: 14px; color: var(--text-soft); }
	.epub .proof-labels .l3 { color: var(--gold-deep); font-weight: 700; }

	/* ===================== PRICING ===================== */
	.epub .pricing-sec { padding: 110px 0 120px; background: var(--ink); }
	.epub .pricing-sec .section-head h2 { color: var(--cream-text); }
	.epub .pricing-sec .section-head p { color: var(--muted-on-dark); }
	.epub .price-grid {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
		align-items: stretch;
	}
	.epub .price-card {
		background: var(--ink-soft);
		border: 1px solid rgba(201,162,75,.18);
		border-radius: 6px;
		padding: 34px 28px;
		display: flex; flex-direction: column;
		position: relative;
	}
	.epub .price-card.featured {
		border-color: rgba(201,162,75,.7);
		background: linear-gradient(180deg, rgba(201,162,75,.08), var(--ink-soft) 30%);
		transform: translateY(-10px);
		box-shadow: 0 30px 60px -28px rgba(201,162,75,.25);
	}
	.epub .price-card .badge {
		position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
		background: linear-gradient(92deg, var(--gold-deep), var(--gold));
		color: #1a1508; font-size: 12px; font-weight: 800;
		padding: 5px 16px; border-radius: 20px; letter-spacing: .02em;
	}
	.epub .price-card .tier-en {
		color: var(--gold);
		font-size: 15px;
	}
	.epub .price-card h3 {
		font-family: var(--font-kr-serif); color: var(--cream-text);
		font-size: 22px; margin: 4px 0 6px; font-weight: 700;
	}
	.epub .price-card .desc { font-size: 13px; color: var(--muted-on-dark); margin-bottom: 22px; }
	.epub .price-card .cost {
		font-family: var(--font-kr-serif); color: var(--cream-text);
		font-size: 28px; font-weight: 700; margin-bottom: 2px;
	}
	.epub .price-card .cost small { font-size: 14px; font-weight: 400; color: var(--muted-on-dark); }
	.epub .price-card .basis { font-size: 12.5px; color: var(--gold-soft); margin-bottom: 26px; }

	.epub .price-card .block-label {
		font-size: 12px; letter-spacing: .06em; color: var(--gold);
		text-transform: uppercase; margin: 20px 0 10px; font-weight: 700;
	}
	.epub .price-card .block-label:first-of-type { margin-top: 0; }
	.epub .price-card ul.plain li {
		font-size: 13.5px; color: var(--cream-text); line-height: 1.7;
		padding-left: 14px; position: relative; margin-bottom: 4px;
	}
	.epub .price-card ul.plain li::before {
		content: '·'; position: absolute; left: 0; color: var(--gold-soft);
	}
	.epub .spec-row {
		display: flex; justify-content: space-between; font-size: 13px;
		color: var(--muted-on-dark); padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06);
	}
	.epub .spec-row span:last-child { color: var(--cream-text); font-weight: 600; }
	.epub .price-card .fit {
		margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(201,162,75,.18);
	}
	.epub .fit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
	.epub .fit-chips span {
		font-size: 11.5px; color: var(--gold-soft);
		border: 1px solid rgba(201,162,75,.35);
		padding: 4px 10px; border-radius: 20px;
	}
	.epub .urgent {
		margin-top: 16px; font-size: 12.5px; color: var(--muted-on-dark);
		display: flex; justify-content: space-between;
	}
	.epub .urgent b { color: var(--gold-soft); }

	.epub .btn-order {
		display: block; width: 100%; margin-top: 22px;
		padding: 13px 0; text-align: center;
		border-radius: 2px; font-size: 14.5px; font-weight: 700;
		border: 1px solid rgba(201,162,75,.5);
		color: var(--gold-soft); background: transparent;
		transition: all .2s;
	}
	.epub .btn-order:hover { background: rgba(201,162,75,.12); }
	.epub .price-card.featured .btn-order {
		background: linear-gradient(92deg, var(--gold-deep), var(--gold));
		color: #1a1508; border: none;
	}
	.epub .price-card.featured .btn-order:hover { filter: brightness(1.08); }

	/* ===================== FLOATING CART BUTTON ===================== */
	.epub .cart-fab {
		position: fixed; right: 26px; bottom: 26px; z-index: 400;
		width: 58px; height: 58px; border-radius: 50%;
		background: var(--ink); border: 1px solid rgba(201,162,75,.5);
		display: flex; align-items: center; justify-content: center;
		box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);
		transition: transform .2s;
	}
	.epub .cart-fab:hover { transform: translateY(-3px); }
	.epub .cart-fab svg { width: 24px; height: 24px; stroke: var(--gold-soft); }
	.epub .cart-fab .badge {
		position: absolute; top: -4px; right: -4px;
		min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
		background: var(--gold); color: #1a1508; font-size: 11px; font-weight: 800;
		display: flex; align-items: center; justify-content: center;
		display: none;
	}
	.epub .cart-fab .badge.show { display: flex; }

	/* ===================== STICKY ORDER BAR ===================== */
	.epub .sticky-order-bar {
		position: fixed; left: 0; right: 0; bottom: 0;
		background: var(--ink); border-top: 1px solid rgba(201,162,75,.4);
		box-shadow: 0 -14px 30px -14px rgba(0,0,0,.4);
		transform: translateY(100%);
		transition: transform .3s ease;
	}
	.epub .sticky-order-bar.show { transform: translateY(0); }
	.epub .sob-inner {
		display: flex; align-items: center; justify-content: flex-end; gap: 16px;
		padding: 14px 28px;
	}
	.epub .sob-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
	.epub .sob-tier {
		color: var(--gold); font-size: 14px;
	}
	.epub .sob-price {
		font-family: var(--font-kr-serif); color: var(--cream-text); font-weight: 700; font-size: 18px;
	}
	.epub .sob-inner .btn-primary { padding: 12px 26px; font-size: 14px; }
	body.bar-visible .epub .cart-fab { bottom: 88px; }

	.epub .quick-order-shell {
		position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
	}
	.epub .quick-order-shell .order-form-card { margin: 0; }
	.epub .quick-order-close {
		position: fixed; top: 22px; left: 22px; z-index: 620;
		width: 42px; height: 42px; border-radius: 50%;
		background: var(--ink); border: 1px solid rgba(201,162,75,.5);
		color: var(--gold-soft); font-size: 18px;
		display: flex; align-items: center; justify-content: center;
		cursor: pointer;
		box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
	}
	.epub .quick-order-close:hover { background: var(--ink-soft); }

	/* ===================== SAMPLE FLIPBOOK ===================== */
	.epub .sample-link {
		display: inline-flex; align-items: center; gap: 6px;
		font-size: 12.5px; font-weight: 600; color: var(--gold-soft);
		border: 1px solid rgba(201,162,75,.4); border-radius: 20px;
		padding: 6px 14px; margin-bottom: 20px; background: transparent;
		transition: all .15s;
	}
	.epub .sample-link:hover { background: rgba(201,162,75,.12); }
	.epub .sample-link svg { width: 14px; height: 14px; stroke: var(--gold-soft); flex-shrink: 0; }

	.epub .flipbook-shell {
		background: var(--paper); border-radius: 6px;
		padding: 26px 26px 22px; width: 100%; max-width: 440px;
		box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
	}
	.epub .flipbook-head { text-align: center; margin-bottom: 18px; }
	.epub .fb-tier {color: var(--gold-deep); font-size: 14px; display: block; }
	.epub .fb-title { font-family: var(--font-kr-serif); font-size: 18px; font-weight: 700; color: var(--text); }

	.epub .flipbook-stage { display: flex; align-items: center; gap: 10px; }
	.epub .fb-nav {
		flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
		border: 1px solid var(--line); background: #fff; color: var(--text-soft);
		font-size: 20px; display: flex; align-items: center; justify-content: center;
		cursor: pointer; transition: all .15s;
	}
	.epub .fb-nav:hover { border-color: var(--gold); color: var(--gold-deep); }
	.epub .fb-nav:disabled { opacity: .3; cursor: default; }
	.epub .fb-nav:disabled:hover { border-color: var(--line); color: var(--text-soft); }

	.epub .flipbook-page {
		flex: 1; aspect-ratio: 3/4;
		background: #fff; border: 1px solid var(--line); border-radius: 4px;
		box-shadow: 0 18px 40px -20px rgba(0,0,0,.25);
		overflow: hidden; position: relative;
	}
	.epub .flipbook-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.epub .fb-placeholder {
		position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
		padding: 24px; text-align: center;
		background: linear-gradient(160deg, #faf7ef, #efe9db);
	}
	.epub .fb-ph-label { font-family: var(--font-kr-serif); font-size: 17px; font-weight: 700; color: var(--text); }
	.epub .fb-ph-note { font-size: 13px; color: var(--text-soft); line-height: 1.6; max-width: 220px; }
	.epub .fb-ph-tag {
		font-size: 11px; color: var(--gold-deep); border: 1px dashed rgba(201,162,75,.5);
		padding: 4px 10px; border-radius: 20px; margin-top: 6px;
	}

	.epub .fb-indicator { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--text-soft); }

	@keyframes epFbFade {
		0% { opacity: 0; transform: translateX(var(--fb-dir, 10px)); }
		100% { opacity: 1; transform: translateX(0); }
	}
	.epub .flipbook-page.fb-anim { animation: epFbFade .28s ease; }

	/* ===================== MODAL / DRAWER OVERLAY ===================== */
	.epub .overlay {
		position: fixed; inset: 0; background: rgba(11,11,13,.62);
		z-index: 500; display: none; align-items: center; justify-content: center;
		padding: 24px; 
	}
	.epub .overlay.open { display: flex; }
	.epub .order-form-card {
		max-width: none; margin: 0;
		background: #fff; border: 1px solid rgba(201,162,75,.25); border-radius: 6px;
		padding: 32px 30px 30px;
		box-shadow: 0 30px 70px -30px rgba(0,0,0,.5);
	}
	.epub .order-form-card h3 { font-family: var(--font-kr-serif); font-size: 21px; margin: 0 0 4px; }
	.epub .order-form-card .tier-price-line { font-size: 14px; color: var(--text-soft); margin-bottom: 22px; }
	.epub .order-form-card .btn-primary.full { width: 100%; text-align: center; display: block; }

	.epub #epubCards { display: flex; flex-direction: column; gap: 18px; }
	.epub .epub-card {
		border: 1px solid var(--line); border-radius: 6px;
		background: var(--paper-deep);
		padding: 20px 18px 6px;
	}
	.epub .epub-card-head {
		display: flex; align-items: center; justify-content: space-between;
		margin-bottom: 2px;
	}
	.epub .epub-card-num {
	 color: var(--gold-deep);
		font-size: 14px; font-weight: 600;
	}
	.epub .epub-remove {
		background: none; border: none; padding: 0;
		font-size: 12px; font-weight: 600; color: #a8442e;
	}
	.epub .epub-remove:hover { color: #c0392b; text-decoration: underline; }
	.epub .epub-card:only-child .epub-remove { visibility: hidden; }
	.epub .add-epub-btn {
		width: 100%; margin: 2px 0 20px; padding: 13px 0; text-align: center;
		border: 1px dashed rgba(201,162,75,.5); border-radius: 4px;
		background: transparent; color: var(--gold-deep);
		font-size: 14px; font-weight: 700; transition: all .15s;
	}
	.epub .add-epub-btn:hover { background: rgba(201,162,75,.08); border-style: solid; }

	.epub .advanced-toggle {
		width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
		background: none; border: none;
		border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
		padding: 14px 2px; margin: 4px 0 20px;
		font-size: 13px; font-weight: 600; color: var(--gold-deep); text-align: left;
	}
	.epub .advanced-toggle:hover { color: var(--gold); }
	.epub .advanced-toggle .chev { transition: transform .2s; font-size: 14px; flex-shrink: 0; }
	.epub .advanced-toggle.open .chev { transform: rotate(180deg); }
	.epub .advanced-fields { display: none; }
	.epub .advanced-fields.open { display: block; }
	.epub .platform-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
	.epub .platform-actions { display: flex; gap: 12px; }
	.epub .platform-actions button {
		background: none; border: none; padding: 0; font-size: 12px; font-weight: 600;
		color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px;
	}
	.epub .platform-actions button:hover { color: var(--gold); }
	.epub .format-tags { display: flex; gap: 12px; flex-wrap: wrap; }
	.epub .format-chk {
		display: flex; align-items: center; gap: 4px;
		font-size: 12.5px; color: var(--text-soft); cursor: pointer;
	}
	.epub .format-chk input { width: 14px; height: 14px; accent-color: var(--gold-deep); flex-shrink: 0; }
	.epub .format-chk:has(input:checked) { color: var(--gold-deep); font-weight: 600; }
	.epub .tier-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.epub .tier-opt {
		padding: 10px 4px; font-size: 13.5px; font-weight: 600;
		border: 1px solid var(--line); border-radius: 3px;
		background: #fff; color: var(--text-soft); transition: all .15s;
	}
	.epub .tier-opt:hover { border-color: var(--gold); }
	.epub .tier-opt.active {
		background: var(--ink); color: var(--gold-soft); border-color: var(--ink);
	}
	.epub .field { margin-bottom: 18px; }
	.epub .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
	.epub .field-hint { font-weight: 400; color: var(--text-soft); font-size: 12px; }
	.epub .platform-grid {
		display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
	}
	.epub .platform-chk {
		display: flex; align-items: center; gap: 8px;
		border: 1px solid var(--line); border-radius: 3px;
		padding: 9px 12px; font-size: 13.5px; color: var(--text);
		background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
	}
	.epub .platform-chk:hover { border-color: var(--gold); }
	.epub .platform-chk input { accent-color: var(--gold-deep); width: 15px; height: 15px; flex-shrink: 0; }
	.epub .platform-chk:has(input:checked) {
		border-color: var(--gold-deep); background: rgba(201,162,75,.08);
	}
	.epub .platform-etc-input {
		width: 100%; margin-top: 10px; border: 1px solid var(--line); background: #fff;
		border-radius: 3px; padding: 10px 13px; font-size: 13.5px; font-family: inherit; color: var(--text);
	}
	.epub .platform-etc-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
	.epub .field input[type=text],
	.epub .field input[type=number],
	.epub .field input[type=tel],
	.epub .field input[type=email],
	.epub .field select,
	.epub .field textarea {
		width: 100%; border: 1px solid var(--line); background: #fff;
		border-radius: 3px; padding: 11px 13px; font-size: 14px; font-family: inherit;
		color: var(--text);
	}
	.epub .field select { appearance: auto; cursor: pointer; }
	.epub .field input:focus, .epub .field select:focus, .epub .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
	.epub .field textarea { resize: vertical; min-height: 64px; }
	.epub .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.epub .file-drop {
		border: 1.5px dashed var(--line); border-radius: 4px;
		padding: 18px; text-align: center; font-size: 13px; color: var(--text-soft);
		cursor: pointer; background: var(--paper-deep);
	}
	.epub .file-drop:hover { border-color: var(--gold); }
	.epub .file-chip-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
	.epub .file-chip {
		font-size: 12px; background: var(--paper-deep); border: 1px solid var(--line);
		padding: 4px 10px; border-radius: 20px; display: flex; align-items: center; gap: 6px;
	}
	.epub .file-chip button { background: none; border: none; color: var(--text-soft); font-size: 13px; line-height: 1; }
	.epub .file-check-row {
		display: flex; align-items: center; gap: 8px;
		font-size: 13px; color: var(--text);
		border: 1px solid var(--line); border-radius: 4px;
		padding: 8px 10px; background: #fff; cursor: pointer;
	}
	.epub .file-check-row input { accent-color: var(--gold-deep); width: 15px; height: 15px; flex-shrink: 0; }
	.epub .file-check-row span { flex: 1; word-break: break-all; }
	.epub .file-check-row:has(input:checked) { border-color: rgba(201,162,75,.5); background: rgba(201,162,75,.06); }
	.epub .est-box {
		background: var(--paper-deep); border: 1px solid var(--line); border-radius: 4px;
		padding: 16px 18px; margin: 20px 0;
	}
	.epub .est-row { display: flex; justify-content: space-between; align-items: baseline; }
	.epub .est-box .label { font-size: 13px; color: var(--text-soft); }
	.epub .est-box .amount { font-family: var(--font-kr-serif); font-size: 22px; font-weight: 700; color: var(--gold-deep); }
	.epub .est-divider { height: 1px; background: var(--line); margin: 12px 0; }
	.epub .est-lead-row { align-items: center; }
	.epub .lead-label { display: flex; align-items: center; gap: 6px; }
	.epub .lead-label svg { width: 15px; height: 15px; stroke: var(--gold-deep); flex-shrink: 0; }
	.epub .lead-value { font-size: 14px; color: var(--text); }
	.epub .lead-value b { color: var(--gold-deep); font-size: 17px; font-weight: 800; }
	.epub .lead-caveat { font-size: 11.5px; color: var(--text-soft); margin-top: 8px; text-align: right; }

	/* ===================== FINAL CTA ===================== */
	.epub .final-cta {
		background: var(--paper);
		padding: 110px 0 130px;
		text-align: center;
		position: relative;
	}
	.epub .final-cta .eyebrow { display: block; margin-bottom: 14px; }
	.epub .final-cta h2 {
		font-family: var(--font-kr-serif); font-size: clamp(28px, 4vw, 42px);
		font-weight: 700; line-height: 1.4; margin: 0 0 18px;
	}
	.epub .final-cta p {
		font-size: 16px; color: var(--text-soft); margin: 0 0 36px;
		max-width: 520px; margin-left: auto; margin-right: auto;
		line-height: 1.75;
	}
	.epub .btn-primary.big {
		padding: 20px 44px; font-size: 16px;
		background: linear-gradient(92deg, var(--gold-deep), var(--gold));
	}
	.epub .final-cta .foot-note {
		margin-top: 22px; font-size: 13.5px; color: var(--text-soft);
	}

	/* ===================== RESPONSIVE ===================== */
	@media (max-width: 980px) {
		.epub .hero .wrap { grid-template-columns: 1fr; }
		.epub .hero-copy { position: relative; top: auto; } /* 1단 레이아웃에서는 고정 해제 */
		.epub .feature-grid { grid-template-columns: repeat(2, 1fr); }
		.epub .price-grid { grid-template-columns: 1fr; }
		.epub .price-card.featured { transform: none; }
		.epub .compare-grid { grid-template-columns: 1fr; }
	}
	@media (max-width: 640px) {
		.epub .wrap { padding: 0 20px; }
		.epub .proof-stage { grid-template-columns: 1fr; }
		.epub .proof-arrow { flex-direction: row; }
		.epub .proof-arrow span { writing-mode: horizontal-tb; }
		.epub .proof-labels { grid-template-columns: 1fr; }
		.epub .order-form-card { padding: 28px 20px; }
		.epub .field-row { grid-template-columns: 1fr; }
		.epub .platform-grid { grid-template-columns: 1fr; }
	}

	/* =========================================================================
	   4. 북토리 EPUB 랜딩 V2 (sub/make_epub/index_v2.asp) 전용
	   - 원본 : sub/make_epub/index.asp (다크 프리미엄 톤) 의 리스타일 버전
	   - 디자인 기준 1 : 메인페이지(index.asp)
	     · 서체 Noto Sans KR(.main19-wrap 상속) / 폭 .main19-contents 1200px 고정
	     · 인터랙션 컬러 #0091dc (GNB·버튼), hover #2f72b6
	   - 디자인 기준 2 : 캘린더 랜딩(calendar/index2.asp, 위 1번 .mcld 블록)
	     · 전체 폭 밴드 + 1200px 이너, min-width 1200px, line-height 1.4
	     · 섹션 타이틀 36px/700/가운데/#0075c2, 소제목 30px/700/letter-spacing -1.5px
	     · 버튼 : height 64px, min-width 200px, radius 3px, 18px/500
	              hover 시 opacity .88 + translateY(-2px)  (transform·opacity만 사용)
	     · 입력 : radius 3px, border #d5d5d5, focus 시 파랑 테두리
	     · 선택 카드 : radius 4px, 선택 시 파랑 테두리 + inset 1px 링
	     · 본문 회색 #666, 배경 회색 #f8f8f8 / 하늘색 #eff1f9
	   - 모든 선택자를 .epub-v2 래퍼 아래로 스코프하여 1~3번 블록과 완전 분리
	   - JS(index_v2.asp) 가 참조하는 클래스/ID 명은 원본과 동일하게 유지 (기능 보존)
	   ========================================================================= */

	/* 디자인 토큰 : .epub-v2 스코프에 선언 */
	.epub-v2 {
		--ep2-key: #0091dc;        /* 인터랙션(버튼·링크·활성) — index.asp GNB 컬러 */
		--ep2-key-dark: #2f72b6;   /* 인터랙션 hover */
		--ep2-key-tint: #f2f9fd;   /* 선택 상태 배경 */
		--ep2-title: #0075c2;      /* 섹션 타이틀 — index2.asp --mcld-blue */
		--ep2-text: #333;          /* 기본 검정 — --mcld-black */
		--ep2-text-soft: #666;     /* 보조 텍스트 — --mcld-gray */
		--ep2-text-mute: #999;
		--ep2-line: #d5d5d5;       /* 입력 테두리 — index2.asp .mcld-input */
		--ep2-line-card: #e0e0e0;  /* 카드 테두리 — index2.asp .mcld-caltype__card */
		--ep2-line-soft: #f0f0f0;  /* 필드 구분선 — index2.asp .mcld-field */
		--ep2-bg: #f8f8f8;         /* 배경 회색 — --mcld-bg */
		--ep2-bg2: #eff1f9;        /* 배경 하늘색 — --mcld-bg2 */
		--ep2-red: #ff3838;        /* 강조 빨강 — --mcld-red */
		--ep2-orange: #ff6e41;     /* 포인트 주황 — --mcld-orange */

		min-width: 1200px;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: 0;
		color: var(--ep2-text);
	}

	.epub-v2 *, .epub-v2 *::before, .epub-v2 *::after { box-sizing: border-box; }
	.epub-v2 img { max-width: 100%; vertical-align: top; }
	.epub-v2 a { text-decoration: none; color: inherit; }
	.epub-v2 ul { margin: 0; padding: 0; list-style: none; }
	.epub-v2 button { font-family: inherit; cursor: pointer; }
	.epub-v2 section[id] { scroll-margin-top: 100px; }

	/* ===================== V2 : 섹션 밴드 / 타이틀 ===================== */
	.epub-v2 .ep-sec { padding: 100px 0 110px; background: #fff; }
	.epub-v2 .ep-sec-gray { background: var(--ep2-bg); }

	.epub-v2 .eyebrow {
		display: inline-block;
		font-size: 14px; font-weight: 500; letter-spacing: .06em;
		color: var(--ep2-key);
	}
	/* .mcld-sec-title 규격 : 36px / 700 / 가운데 / 파랑 */
	.epub-v2 .section-head { margin-bottom: 50px; text-align: center; }
	.epub-v2 .section-head .eyebrow { margin-bottom: 14px; }
	.epub-v2 .section-head h2 {
		font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--ep2-title); margin: 0;
	}
	.epub-v2 .section-head h2 em { font-style: normal; color: var(--ep2-key); }
	.epub-v2 .section-head p {
		margin: 24px auto 0;
		font-size: 16px; line-height: 26px; color: var(--ep2-text-soft);
	}

	/* ===================== V2 : 버튼 (.mcld-btn 규격) ===================== */
	.epub-v2 .btn-primary,
	.epub-v2 .btn-outline,
	.epub-v2 .btn-order {
		display: inline-flex; align-items: center; justify-content: center; gap: 4px;
		height: 64px; min-width: 200px; padding: 0 24px;
		border-radius: 3px; border: none;
		font-family: inherit; font-size: 18px; font-weight: 500; text-align: center;
		transition: opacity .2s, transform .2s;
	}
	.epub-v2 .btn-primary:hover,
	.epub-v2 .btn-outline:hover,
	.epub-v2 .btn-order:hover { opacity: .88; transform: translateY(-2px); }

	.epub-v2 .btn-primary { background: var(--ep2-key); color: #fff; }
	.epub-v2 .btn-primary.full { display: flex; width: 100%; }
	.epub-v2 .btn-primary.big { height: 72px; min-width: 300px; font-size: 20px; }
	.epub-v2 .btn-outline { background: #fff; color: var(--ep2-key); border: 1px solid var(--ep2-key); }
	.epub-v2 .btn-row { display: flex; gap: 20px; align-items: center; }

	/* ===================== V2 : HERO ===================== */
	.epub-v2 .hero { background: linear-gradient(180deg, var(--ep2-bg2), #fff); padding: 70px 0 100px; }
	.epub-v2 .hero-inner { display: flex; align-items: flex-start; gap: 60px; }

	/* 좌측 카피는 우측 주문폼(.hero-visual-col) 높이 구간 안에서 따라 움직임 */
	.epub-v2 .hero-copy { position: sticky; top: 110px; align-self: start; flex: 1; padding-top: 26px; }
	.epub-v2 .hero-copy .eyebrow { margin-bottom: 16px; }
	/* .mcld-hero__title 규격 : 44px / 700 / 1.2 / letter-spacing -1.5px */
	.epub-v2 .hero-copy h1 {
		font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--ep2-text); margin: 0 0 18px;
	}
	.epub-v2 .hero-copy h1 em { font-style: normal; color: var(--ep2-key); }
	.epub-v2 .hero-copy p {
		font-size: 16px; font-weight: 400; line-height: 26px; color: var(--ep2-text-soft);
		max-width: 470px; margin: 0 0 36px;
	}
	.epub-v2 .hero-visual-col { width: 660px; flex: none; }

	/* 종이 → 픽셀 이음새 : 브랜드 블루로 은은하게 흐름 (transform만 사용) */
	.epub-v2 .seam-strip {
		position: relative; overflow: hidden;
		height: 8px; border-radius: 3px; margin-bottom: 18px;
		background: linear-gradient(90deg, #e8e8e8, var(--ep2-key));
	}
	.epub-v2 .seam-strip::before {
		content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
		background: linear-gradient(90deg,
			#ececec 0%, #cfe9f7 16.667%, #0091dc 33.333%,
			#cfe9f7 50%, #ececec 66.667%,
			#cfe9f7 83.333%, #0091dc 100%);
		transform: translateX(-66.667%);
		animation: ep2SeamShift 16s linear infinite;
		will-change: transform;
	}
	@keyframes ep2SeamShift {
		0% { transform: translateX(-66.667%); }
		100% { transform: translateX(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.epub-v2 .seam-strip::before { animation: none; }
	}

	/* ===================== V2 : 주문 폼 카드 ===================== */
	.epub-v2 .order-form-card {
		background: #fff; border: 1px solid var(--ep2-line-card); border-radius: 4px;
		padding: 30px 28px 28px;
		box-shadow: 0 18px 40px -26px rgba(0,0,0,.35);
	}
	.epub-v2 #epubCards { display: flex; flex-direction: column; gap: 18px; }
	.epub-v2 .epub-card {
		border: 1px solid var(--ep2-line-card); border-radius: 4px;
		background: #fff; padding: 20px 18px 6px;
	}
	/* 상단 3px 검정 라인 : .mcld-field:nth-child(2) 의 표(table) 느낌을 카드에 적용 */
	.epub-v2 .epub-card-head {
		display: flex; align-items: center; justify-content: space-between;
		padding-bottom: 12px; margin-bottom: 16px;
		border-bottom: 1px solid var(--ep2-line);
	}
	.epub-v2 .epub-card-num { font-size: 16px; font-weight: 700; color: var(--ep2-text); }
	.epub-v2 .epub-remove {
		    background: none;
    padding: 2px 8px;
    font-size: 13px;
    color: var(--ep2-text-soft);
    margin-left: 8px;
    border: 1px solid var(--mcld-gray-l);
    border-radius: 3px;
	}
	.epub-v2 .epub-card:only-child .epub-remove { visibility: hidden; }

	/* 등급 탭 : .mcld-menubar 알약 버튼 톤 */
	.epub-v2 .tier-select { display: flex; flex-wrap: wrap; gap: 8px; }
	/* 등급이 4개 이상이면 3개씩 잘라 줄바꿈 (3개 이하는 위 flex:1 로 꽉 채움) */
	.epub-v2 .tier-opt:first-child:nth-last-child(n+4),
	.epub-v2 .tier-opt:first-child:nth-last-child(n+4) ~ .tier-opt { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; }
	.epub-v2 .tier-opt {
		flex: 1; border: 1px solid var(--ep2-text); border-radius: 100px;
		background: #fff; font-size: 15px; color: var(--ep2-text);
		transition: background-color .2s, color .2s;padding: 5px 20px; min-width: 120px;
	}
	.epub-v2 .tier-opt.active { background: var(--ep2-text); color: #fff; }

	.epub-v2 .card-tier-name { font-size: 20px; font-weight: 700; color: var(--ep2-text); margin-bottom: 6px; display: inline;
}
	.epub-v2 .tier-price-line { font-size: 14px; line-height: 22px; color: var(--ep2-text-soft); margin: 0 0 12px;    display: inline;
    margin-left: 12px; }

	/* ===================== V2 : 입력 필드 (.mcld-input 규격) ===================== */
	.epub-v2 .field { padding: 8px 0; border-bottom: 1px solid var(--ep2-line-soft); display: flex; gap: 0px; align-items: center;}
	.epub-v2 .field label {
		display: block; font-size: 13px; font-weight: 400;
		color: var(--ep2-text); min-width: 80px;
	}
	.epub-v2 .field-hint { font-size: 13px; font-weight: 400; color: var(--ep2-text-soft); }
	.epub-v2 .field input[type="text"],
	.epub-v2 .field input[type="number"],
	.epub-v2 .field select,
	.epub-v2 .platform-etc-input {
		width: 100%; height: 38px; padding: 0 14px;
		border: 1px solid var(--ep2-line); border-radius: 3px;
		font-size: 14px; font-family: inherit; color: var(--ep2-text); background: #fff;
		vertical-align: middle;
	}
	.epub-v2 .field textarea {
		width: 100%; height: 110px; padding: 14px;
		border: 1px solid var(--ep2-line); border-radius: 3px;
		font-size: 14px; line-height: 22px; font-family: inherit; color: var(--ep2-text);
		resize: vertical;
	}
	.epub-v2 .field input:focus,
	.epub-v2 .field select:focus,
	.epub-v2 .field textarea:focus,
	.epub-v2 .platform-etc-input:focus { outline: none; border-color: var(--ep2-key); }

	/*  요청사항 : EPUB 카드마다 하나씩 들어갑니다 (2026-09-07)
	    .field 는 라벨을 왼쪽에 두는 가로 배치(flex · align-items:center)라
	    높이가 있는 textarea 와 함께 쓰면 라벨이 칸 한가운데 떠 보입니다.
	    이 칸만 라벨을 위로 올립니다. */
	.epub-v2 .field.card-note-field { display: block; }
	.epub-v2 .field.card-note-field label { min-width: 0; margin-bottom: 6px; }
	.epub-v2 .field.card-note-field textarea { height: 84px; }
	.epub-v2 .field-row {
		display: flex; gap: 40px;
		padding: 8px 0; border-bottom: 1px solid var(--ep2-line-soft);
	}
	.epub-v2 .field-row .field { flex: 1; padding: 0; border-bottom: none; }

	/*  좁은 칸용 배치 (2026-09-03)
	    접수 폼이 한 화면에 들어오도록 줄 수를 줄인 것입니다.
	      .col3 · .col4  한 줄에 3칸 · 4칸 (칸 사이 간격만 좁힙니다)
	      .lbl-top       라벨을 입력칸 위로 올립니다
	    칸이 좁아지면 라벨을 왼쪽에 둘 자리가 없어 둘을 함께 씁니다.
	    라벨을 왼쪽에 두는 기존 .field-row 는 그대로입니다. */
	.epub-v2 .field-row.col3 { gap: 20px; }
	.epub-v2 .field-row.col4 { gap: 14px; }
	.epub-v2 .field-row.lbl-top .field { display: block; }
	.epub-v2 .field-row.lbl-top .field label { min-width: 0; margin-bottom: 5px; }

	/* ===================== V2 : 상세입력 토글 ===================== */
	.epub-v2 .advanced-toggle {
		width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
		background: var(--ep2-bg); border: none;
		border-top: 1px solid var(--ep2-line-soft); border-bottom: 1px solid var(--ep2-line-soft);
		padding: 11px 14px; margin: 0 0 4px;
		font-size: 14px; font-weight: 500; color: var(--ep2-text); text-align: left;
		transition: color .2s;
	}
	.epub-v2 .advanced-toggle:hover { color: var(--ep2-key); }
	.epub-v2 .advanced-toggle .chev { font-size: 15px; flex-shrink: 0; transition: transform .2s; }
	.epub-v2 .advanced-toggle.open .chev { transform: rotate(180deg); }
	.epub-v2 .advanced-fields { display: none; }
	.epub-v2 .advanced-fields.open { display: block; }

	/* ===================== V2 : 유통 플랫폼 / 파일 형식 ===================== */
	.epub-v2 .platform-head {
		display: flex; justify-content: space-between; align-items: center;
		margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
	}
	.epub-v2 .platform-actions { display: flex; gap: 8px; }
	/* .mcld-file__btn 규격 : height 24px / radius 2px / 배경 회색 */
	.epub-v2 .platform-actions button {
		display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
		border: 1px solid #bbb; border-radius: 2px; background: var(--ep2-bg);
		font-size: 12px; color: var(--ep2-text); transition: border-color .2s, color .2s;
	}
	.epub-v2 .platform-actions button:hover { border-color: var(--ep2-key); color: var(--ep2-key); }

	/* 선택 카드 : .mcld-caltype__card 규격 (radius 4px, 선택 시 파랑 테두리 + inset 링) */
	.epub-v2 .platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.epub-v2 .platform-chk {
		display: flex; align-items: center; gap: 8px; cursor: pointer;
		border: 1px solid var(--ep2-line-card); border-radius: 4px;
		padding: 9px 10px; font-size: 13px; background: #fff;
		transition: border-color .2s, box-shadow .2s, color .2s;
	}
	.epub-v2 .platform-chk input { width: 17px; height: 17px; accent-color: var(--ep2-key); flex-shrink: 0; }
	.epub-v2 .platform-chk.checked,
	.epub-v2 .platform-chk:has(input:checked) {
		border-color: var(--ep2-key); color: var(--ep2-key);
		box-shadow: 0 0 0 1px var(--ep2-key) inset;
	}
	.epub-v2 .platform-etc-input { margin-top: 10px; }

	.epub-v2 .format-tags { display: flex; gap: 14px; flex-wrap: wrap; }
	.epub-v2 .format-chk {
		display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
		font-size: 14px; color: var(--ep2-text); transition: color .2s;
	}
	.epub-v2 .format-chk input { width: 17px; height: 17px; accent-color: var(--ep2-key); }
	.epub-v2 .format-chk:has(input:checked) { color: var(--ep2-key); font-weight: 500; }

	/* ===================== V2 : 파일 업로드 ===================== */
	.epub-v2 .file-drop {
		border: 1px dashed #bbb; border-radius: 3px; background: var(--ep2-bg);
		padding: 24px 14px; text-align: center;
		font-size: 14px; color: var(--ep2-text-soft); cursor: pointer;
		transition: border-color .2s, color .2s;
	}
	.epub-v2 .file-drop:hover { border-color: var(--ep2-key); color: var(--ep2-key); }
	.epub-v2 .file-chip-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
	.epub-v2 .file-check-row {
		display: flex; align-items: center; gap: 8px; cursor: pointer;
		border: 1px solid var(--ep2-line-card); border-radius: 4px;
		padding: 9px 10px; font-size: 13px; background: #fff;
		transition: border-color .2s, box-shadow .2s;
	}
	.epub-v2 .file-check-row input { width: 17px; height: 17px; accent-color: var(--ep2-key); flex-shrink: 0; }
	.epub-v2 .file-check-row span { flex: 1; word-break: break-all; }
	.epub-v2 .file-check-row:has(input:checked) {
		border-color: var(--ep2-key); box-shadow: 0 0 0 1px var(--ep2-key) inset;
	}

	/* 업로드 버튼 줄 (Innorix 그리드 + 버튼) */
	.epub-v2 .epub-upload div.upload { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }

	/*  주의사항 번호 목록 (2026-09-04)
	    번호를 손으로 적던 <p> 목록을 <ol class="notice-list"> 로 바꾸면서 넣었습니다.
	    common.css 82행의 li { list-style: none } 이 마커를 지우므로 여기서 되살립니다.
	    outside + padding-left 로 번호를 글자 바깥에 두어, 줄바꿈된 둘째 줄과
	    1번 하위 문구가 첫 줄 글자 위치에 맞춰 들어갑니다.
	    줄 간격은 기존 <p> 목록과 같도록 여백을 주지 않습니다. */
	.epub-v2 .notice-list { padding-left: 16px; }
	.epub-v2 .notice-list > li { list-style: decimal outside; }
	.epub-v2 .notice-list > li > p { margin: 0; }

	/* ===================== V2 : EPUB 추가 / 예상 견적 ===================== */
	.epub-v2 .add-epub-btn {
		width: 100%; height: 42px; margin: 12px 0 0;
		border: 1px dashed #bbb; border-radius: 3px; background: #fff;
		font-size: 15px; font-weight: 500; color: var(--ep2-text-soft);
		transition: border-color .2s, color .2s;
	}
	.epub-v2 .add-epub-btn:hover { border-color: var(--ep2-key); color: var(--ep2-key); }

	.epub-v2 .est-box {
		background: var(--ep2-bg); border-top: 3px solid var(--ep2-text);
		padding: 16px 20px; margin: 14px 0;
	}
	.epub-v2 .est-row { display: flex; justify-content: space-between; align-items: baseline; }
	.epub-v2 .est-box .label { font-size: 15px; font-weight: 500; color: var(--ep2-text); }
	.epub-v2 .est-box .amount { font-size: 24px; font-weight: 700; color: var(--ep2-title); }
	/* 예상 견적 쿠폰 할인 안내 (2026-10-19) : common.css 의 [hidden] 보다 우선하므로 숨김을 따로 지정합니다 */
	.epub-v2 .est-disc { display: block; margin-top: 2px; font-size: 13px; color: var(--ep2-title); }
	.epub-v2 .est-disc[hidden] { display: none; }
	.epub-v2 .est-divider { height: 1px; background: #e5e5e5; margin: 14px 0; }
	.epub-v2 .est-lead-row { align-items: center; }
	.epub-v2 .lead-label { display: flex; align-items: center; gap: 6px; }
	.epub-v2 .lead-label svg { width: 16px; height: 16px; stroke: var(--ep2-title); flex-shrink: 0; }
	.epub-v2 .lead-value { font-size: 14px; color: var(--ep2-text-soft); }
	.epub-v2 .lead-value b { color: var(--ep2-title); font-size: 18px; font-weight: 700; }
	.epub-v2 .lead-caveat { font-size: 13px; color: var(--ep2-text-soft); margin-top: 10px; text-align: right; }

	/* ===================== V2 : PROBLEM & SOLUTION ===================== */
	.epub-v2 .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.epub-v2 .compare-card {
		background: #fff; border: 1px solid var(--ep2-line-card); border-radius: 4px;
		padding: 36px 34px;
	}
	.epub-v2 .compare-card.no { background: var(--ep2-bg); }
	.epub-v2 .compare-card.yes {
		border-color: var(--ep2-key); box-shadow: 0 0 0 1px var(--ep2-key) inset;
	}
	.epub-v2 .compare-card .tag {
		display: inline-flex; align-items: center; gap: 8px;
		font-size: 20px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 22px;
	}
	.epub-v2 .compare-card.no .tag { color: var(--ep2-text-soft); }
	.epub-v2 .compare-card.yes .tag { color: var(--ep2-key); }
	.epub-v2 .compare-card .mark {
		width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.epub-v2 .compare-card.no .mark { background: #bbb; }
	.epub-v2 .compare-card.yes .mark { background: var(--ep2-key); }
	.epub-v2 .compare-card li {
		display: flex; gap: 8px; align-items: flex-start;
		font-size: 15px; line-height: 24px; color: var(--ep2-text-soft); 
	}
	.epub-v2 .compare-card li .b { flex-shrink: 0; font-size: 12px; padding-top: 4px; }
	.epub-v2 .compare-card.no li .b { color: #bbb; }
	.epub-v2 .compare-card.yes li .b { color: var(--ep2-key); }

	/* ===================== V2 : CORE FEATURES ===================== */
	.epub-v2 .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.epub-v2 .feature-card {
		background: #fff; border: 1px solid var(--ep2-line-card); border-radius: 4px;
		padding: 36px 28px; transition: border-color .2s, transform .2s;
	}
	.epub-v2 .feature-card:hover { border-color: var(--ep2-key); transform: translateY(-2px); }
	.epub-v2 .feature-card .icon {
		width: 52px; height: 52px; border-radius: 50%; background: var(--ep2-bg2);
		display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
	}
	.epub-v2 .feature-card .icon svg { width: 26px; height: 26px; stroke: var(--ep2-key); }
	.epub-v2 .feature-card .en {
		display: block; font-size: 13px; letter-spacing: .04em;
		color: var(--ep2-key); margin-bottom: 8px;
	}
	.epub-v2 .feature-card h3 {
		font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
		color: var(--ep2-text); margin: 0 0 12px;
	}
	.epub-v2 .feature-card p { font-size: 14px; line-height: 22px; color: var(--ep2-text-soft); margin: 0; }

	/* ===================== V2 : PRICING ===================== */
	.epub-v2 .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
	.epub-v2 .price-card {
		position: relative; background: #fff;
		border: 1px solid var(--ep2-line-card); border-radius: 4px; padding: 36px 32px 32px;
		transition: border-color .2s, box-shadow .2s;
	}
	.epub-v2 .price-card.featured {
		border-color: var(--ep2-key); box-shadow: 0 0 0 1px var(--ep2-key) inset;
	}
	.epub-v2 .price-card .badge {
		position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
		display: inline-flex; align-items: center; height: 30px; padding: 0 18px;
		border-radius: 3px; background: var(--ep2-orange); color: #fff;
		font-size: 14px; white-space: nowrap;
	}
	.epub-v2 .price-card .tier-en {
		display: block; font-size: 14px; font-weight: 500; letter-spacing: .06em;
		color: var(--ep2-key); margin-bottom: 8px;
	}
	/* .mcld-sub-title 규격 : 30px / 700 / letter-spacing -1.5px */
	.epub-v2 .price-card h3 {
		font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--ep2-text); margin: 0 0 10px;
	}
	.epub-v2 .price-card .desc { font-size: 14px; line-height: 22px; color: var(--ep2-text-soft); margin: 0 0 18px; }
	/* .mcld-contact__write 규격 : height 37px / radius 3px */
	.epub-v2 .sample-link {
		display: inline-flex; align-items: center; justify-content: center; gap: 6px;
		height: 37px; padding: 0 16px; border-radius: 3px;
		border: 1px solid var(--ep2-key); background: #fff; color: var(--ep2-key);
		font-size: 14px; margin-bottom: 22px; transition: opacity .2s, transform .2s;
	}
	.epub-v2 .sample-link svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }
	.epub-v2 .sample-link:hover { opacity: .88; transform: translateY(-2px); }
	.epub-v2 .price-card .cost { font-size: 30px; font-weight: 700; color: var(--ep2-title); }
	.epub-v2 .price-card .cost small { font-size: 14px; font-weight: 400; color: var(--ep2-text-soft); }
	.epub-v2 .price-card .basis {
		font-size: 14px; color: var(--ep2-text-soft);
		padding-bottom: 22px; border-bottom: 1px solid var(--ep2-line-soft);
	}
	.epub-v2 .block-label { font-size: 14px; font-weight: 500; color: var(--ep2-text); margin: 22px 0 10px; }
	.epub-v2 .block-label.first { margin: 0 0 8px; }
	.epub-v2 .price-card ul.plain li {
		position: relative; font-size: 14px; line-height: 22px; color: var(--ep2-text-soft); padding: 5px 0 5px 14px;
	}
	.epub-v2 .price-card ul.plain li::before {
		content: ''; position: absolute; left: 0; top: 14px;
		width: 4px; height: 4px; border-radius: 50%; background: var(--ep2-key);
	}
	.epub-v2 .spec-row {
		display: flex; justify-content: space-between; gap: 10px;
		font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--ep2-line-soft);
	}
	.epub-v2 .spec-row span:first-child { color: var(--ep2-text-soft); flex-shrink: 0; }
	.epub-v2 .spec-row span:last-child { color: var(--ep2-text); text-align: right; }
	.epub-v2 .fit { background: var(--ep2-bg); border-top: 3px solid var(--ep2-text); padding: 18px 20px; margin: 24px 0; }
	.epub-v2 .fit .spec-row { border-bottom-color: #e5e5e5; }
	.epub-v2 .urgent {
		display: flex; justify-content: space-between; font-size: 14px;
		margin-top: 12px;
	}
	.epub-v2 .urgent b { color: var(--ep2-red); }
	.epub-v2 .btn-order { width: 100%; min-width: 0; height: 56px; font-size: 16px; background: #fff; color: var(--ep2-key); border: 1px solid var(--ep2-key); }
	.epub-v2 .price-card.featured .btn-order { background: var(--ep2-key); color: #fff; border-color: var(--ep2-key); }

	/* ===================== V2 : FINAL CTA (.mcld-inquiry 규격) ===================== */
	.epub-v2 .final-cta { background: var(--ep2-bg); padding: 100px 0 120px; text-align: center; }
	.epub-v2 .final-cta .eyebrow { margin-bottom: 16px; }
	.epub-v2 .final-cta h2 {
		font-size: 40px; font-weight: 700; letter-spacing: -1.5px;
		color: var(--ep2-text); margin: 0;
	}
	.epub-v2 .final-cta p {
		max-width: 680px; margin: 24px auto 40px;
		font-size: 15px; line-height: 24px; color: var(--ep2-text-soft);
	}
	.epub-v2 .final-cta .foot-note { margin-top: 24px; font-size: 14px; color: var(--ep2-text-soft); }

	/* ===================== V2 : 공용 유틸 ===================== */
	/* 화면에서는 감추고 스크린리더에만 읽히는 텍스트 (새 창 안내용) */
	.epub-v2 .sr-only {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	/* ===================== V2 : 부가 서비스 카드 캐러셀 (FAQ 아래) =====================
	   가로 스크롤(scroll-snap) + 화살표 구조입니다. (2026-09-02 신설 / 기존 .flip-cta 대체)
	     · 카드 폭을 calc((100% - 40px) / 3) 로 잡아 한 화면에 3장이 딱 맞습니다.
	       (100% = 트랙 폭, 40px = 카드 사이 gap 20px × 2)
	     · 서비스가 늘어나면 트랙이 옆으로 길어질 뿐이라 이 CSS 는 손대지 않습니다.
	     · 화살표는 트랙 위에 겹칩니다. 이 페이지는 고정폭(뷰포트 1300px)이라
	       1200px 컨테이너 바깥에 버튼을 온전히 놓을 자리가 없습니다. */
	.epub-v2 .svc-carousel { position: relative; }

	.epub-v2 .svc-track {
		display: flex; align-items: stretch; gap: 20px;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-behavior: smooth;
		padding: 6px 0 12px;                 /* 카드 그림자 · 초점 테두리가 잘리지 않게 */
		scrollbar-width: none;               /* 스크롤바 대신 화살표 · 인디케이터로 안내합니다 */
	}
	.epub-v2 .svc-track::-webkit-scrollbar { display: none; }
	.epub-v2 .svc-track:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 4px; }

	.epub-v2 .svc-card {
		flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start;
		display: flex; flex-direction: column;
		padding: 34px 30px 30px;
		background: #fff; border: 1px solid var(--ep2-line-card); border-radius: 4px;
		transition: opacity .2s, transform .2s, border-color .2s, box-shadow .2s;
	}
	.epub-v2 .svc-card:hover {
		transform: translateY(-4px); border-color: var(--ep2-key);
		box-shadow: 0 18px 40px -26px rgba(0,0,0,.45);
	}
	.epub-v2 .svc-tag {
		display: block; margin-bottom: 8px;
		font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--ep2-key);
	}
	.epub-v2 .svc-card h3 {
		margin: 0 0 14px; font-size: 24px; font-weight: 700;
		letter-spacing: -1px; color: var(--ep2-text);
	}
	.epub-v2 .svc-badge {
		display: inline-block; margin-left: 6px; padding: 3px 8px; vertical-align: 4px;
		border-radius: 2px; background: var(--ep2-bg2);
		font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ep2-title);
	}
	.epub-v2 .svc-card p { margin: 0; font-size: 15px; line-height: 26px; color: var(--ep2-text-soft); }
	.epub-v2 .svc-card p strong { font-weight: 500; color: var(--ep2-text); }

	/* 카드별 특징 : 가격표 ul.plain 과 같은 점 목록 규격 */
	.epub-v2 .svc-point {
		margin: 18px 0 26px; padding-top: 18px;
		border-top: 1px solid var(--ep2-line-soft);
	}
	.epub-v2 .svc-point li {
		position: relative; padding: 5px 0 5px 14px;
		font-size: 14px; line-height: 22px; color: var(--ep2-text-soft);
	}
	.epub-v2 .svc-point li::before {
		content: ''; position: absolute; left: 0; top: 14px;
		width: 4px; height: 4px; border-radius: 50%; background: var(--ep2-key);
	}
	/* margin-top:auto — 설명 길이가 달라도 버튼은 카드 맨 아래에서 줄을 맞춥니다 */
	.epub-v2 .svc-card .btn-outline {
		display: flex; width: 100%; min-width: 0; height: 50px; margin-top: auto; font-size: 15px;
	}

	/* 화살표 : 트랙 좌우 끝에 겹쳐 놓습니다 */
	.epub-v2 .svc-nav {
		position: absolute; top: 50%; z-index: 2;
		width: 48px; height: 48px; margin-top: -42px;   /* 인디케이터 · 트랙 여백만큼 위로 보정 */
		border-radius: 50%; border: 1px solid var(--ep2-line); background: #fff;
		font-size: 24px; line-height: 1; color: var(--ep2-text);
		box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
		transition: opacity .2s, transform .2s;
	}
	.epub-v2 .svc-nav.prev { left: -20px; }
	.epub-v2 .svc-nav.next { right: -20px; }
	.epub-v2 .svc-nav:hover { opacity: .88; transform: translateY(-2px); }
	.epub-v2 .svc-nav:disabled { opacity: .3; box-shadow: none; cursor: default; }
	.epub-v2 .svc-nav:disabled:hover { transform: none; }
	.epub-v2 .svc-nav:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 2px; }

	/* 인디케이터 : 멈출 수 있는 위치 수만큼 svcSync() 가 만들어 넣습니다 */
	.epub-v2 .svc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
	.epub-v2 .svc-dot {
		width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
		background: var(--ep2-line); transition: opacity .2s, transform .2s;
	}
	.epub-v2 .svc-dot.on { background: var(--ep2-key); transform: scale(1.5); }
	.epub-v2 .svc-dot:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 3px; }

	/* 카드가 한 화면에 다 들어오면 넘길 것이 없으므로 화살표 · 인디케이터를 감춥니다 */
	.epub-v2 .svc-carousel.one-page .svc-nav,
	.epub-v2 .svc-carousel.one-page .svc-dots { display: none; }

	@media (prefers-reduced-motion: reduce) {
		.epub-v2 .svc-track { scroll-behavior: auto; }
		.epub-v2 .svc-card:hover,
		.epub-v2 .svc-nav:hover,
		.epub-v2 .fb-nav:hover { transform: none; }
	}

	/* ===================== V2 : 모달 / 오버레이 ===================== */
	.epub-v2 .overlay {
		position: fixed; inset: 0; background: rgba(0,0,0,.55);
		z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px;
	}
	.epub-v2 .overlay.open { display: flex; }
	.epub-v2 .quick-order-shell { position: relative; width: 100%; max-width: 1100px; max-height: 88vh; overflow-y: auto; }
	.epub-v2 .quick-order-shell .order-form-card { margin: 0; }
	.epub-v2 .quick-order-close {
		position: fixed; top: 22px; left: 22px; z-index: 620;
		width: 44px; height: 44px; border-radius: 3px;
		background: #fff; border: 1px solid var(--ep2-line); color: var(--ep2-text);
		font-size: 18px; display: flex; align-items: center; justify-content: center;
		box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); transition: opacity .2s, transform .2s;
	}
	.epub-v2 .quick-order-close:hover { opacity: .88; transform: translateY(-2px); }

	/* ===================== V2 : 샘플 플립북 ===================== */
	.epub-v2 .flipbook-shell {
		background: #fff; border-radius: 4px; padding: 30px 30px 24px;
		width: 100%; max-width: 1000px;
		box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
	}
	.epub-v2 .flipbook-head { text-align: center; margin-bottom: 20px; }
	.epub-v2 .fb-tier { display: block; font-size: 14px; color: var(--ep2-key); margin-bottom: 4px; }
	.epub-v2 .fb-title { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--ep2-text); }
	.epub-v2 .flipbook-stage { position: relative; display: flex; align-items: center; gap: 10px; }
	/* 넘김 버튼 : 서비스 캐러셀 화살표(.svc-nav)와 같은 원형 버튼 — 샘플 팝업 · 포트폴리오 슬라이더 공통 */
	.epub-v2 .fb-nav {
		flex-shrink: 0; display: flex; align-items: center; justify-content: center;
		width: 48px; height: 48px;
		border-radius: 50%; border: 1px solid var(--ep2-line); background: #fff;
		font-size: 24px; line-height: 1; color: var(--ep2-text);
		box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
		transition: opacity .2s, transform .2s;
	}
	.epub-v2 .fb-nav:hover { opacity: .88; transform: translateY(-2px); }
	.epub-v2 .fb-nav:disabled { opacity: .3; box-shadow: none; cursor: default; }
	.epub-v2 .fb-nav:disabled:hover { transform: none; }
	.epub-v2 .fb-nav:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 2px; }
	/* 샘플 팝업 : 넘김 버튼을 이미지 좌우 끝에 겹쳐 놓습니다 (.svc-nav 와 같은 배치) */
	.epub-v2 .flipbook-stage .fb-nav { position: absolute; top: 50%; z-index: 2; margin-top: -24px; }
	.epub-v2 .flipbook-stage .fb-nav:first-child { left: -24px; }
	.epub-v2 .flipbook-stage .fb-nav:last-child { right: -24px; }
	.epub-v2 .flipbook-page {
		flex: 1; aspect-ratio: 31/24; max-height: calc(100vh - 280px); position: relative; overflow: hidden;
		background: #fff; border: 1px solid var(--ep2-line-card); border-radius: 4px;
		box-shadow: 0 18px 40px -20px rgba(0,0,0,.25);
	}
	.epub-v2 .flipbook-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
	.epub-v2 .fb-placeholder {
		position: absolute; inset: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
		padding: 24px; text-align: center;
		background: linear-gradient(180deg, #fff, var(--ep2-bg2));
	}
	.epub-v2 .fb-ph-label { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: var(--ep2-text); }
	.epub-v2 .fb-ph-note { font-size: 13px; line-height: 22px; color: var(--ep2-text-soft); max-width: 220px; }
	.epub-v2 .fb-ph-tag {
		font-size: 12px; color: var(--ep2-key); border: 1px dashed rgba(0,145,220,.5);
		padding: 4px 10px; border-radius: 3px; margin-top: 6px;
	}
	.epub-v2 .fb-caption { margin-top: 18px; text-align: center; font-size: 14px; line-height: 22px; color: var(--ep2-text-soft); }
	.epub-v2 .fb-caption strong { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 700; color: var(--ep2-text); }
	.epub-v2 .fb-nav[hidden] { display: none; }
	.epub-v2 .fb-indicator { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ep2-text-soft); }

	@keyframes ep2FbFade {
		0% { opacity: 0; transform: translateX(var(--fb-dir, 10px)); }
		100% { opacity: 1; transform: translateX(0); }
	}
	.epub-v2 .flipbook-page.fb-anim { animation: ep2FbFade .28s ease; }

	/* ===================== V2 : 하단 고정 주문 바 ===================== */
	.epub-v2 .sticky-order-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		min-width: 1200px;
		background: #fff; border-top: 1px solid var(--ep2-line);
		box-shadow: 0 -2px 8px rgba(0,0,0,.06);
		transform: translateY(calc(100% + 12px)); transition: transform .3s ease;   /* 그림자까지 화면 밖으로 */
	}
	.epub-v2 .sticky-order-bar.show { transform: translateY(0); }
	.epub-v2 .sob-inner {
		display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 14px 0;
	}
	.epub-v2 .sob-info { display: flex; align-items: baseline; gap: 12px; }
	.epub-v2 .sob-tier { font-size: 15px; color: var(--ep2-text-soft); }
	.epub-v2 .sob-price { font-size: 24px; font-weight: 700; color: var(--ep2-title); }
	.epub-v2 .sob-inner .btn-primary { height: 48px; min-width: 160px; font-size: 16px; }

	/* ===================== V2 : 주문 위저드 (2단계) ===================== */
	/* 스텝 인디케이터 */
	.epub-v2 .wiz-steps { display: flex; gap: 8px; margin-bottom: 14px; counter-reset: wiz; }
	.epub-v2 .wiz-steps li {
		flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
		height: 44px; padding: 0 10px;
		border: 1px solid var(--ep2-line-card); border-radius: 3px; background: #fff;
		font-size: 14px; color: var(--ep2-text-soft);
	}
	.epub-v2 .wiz-steps li::before {
		counter-increment: wiz; content: counter(wiz);
		display: inline-flex; align-items: center; justify-content: center;
		width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
		background: #ccc; color: #fff; font-size: 13px; font-weight: 700;
	}
	.epub-v2 .wiz-steps li.is-on {
		border-color: var(--ep2-key); color: var(--ep2-key); font-weight: 500;
		box-shadow: 0 0 0 1px var(--ep2-key) inset;
	}
	.epub-v2 .wiz-steps li.is-on::before { background: var(--ep2-key); }
	.epub-v2 .wiz-steps li.is-done::before { background: var(--ep2-text); }

	/* 단계 패널 : is-on 인 것만 보입니다 */
	.epub-v2 .wiz-panel { display: none; }
	.epub-v2 .wiz-panel.is-on { display: block; }

	/* 2단계 버튼 줄 : 이전 / 장바구니에 담기 / 결제하기 */
	.epub-v2 .wiz-actions { display: flex; gap: 8px; margin-top: 18px; }
	.epub-v2 .wiz-actions .btn-primary,
	.epub-v2 .wiz-actions .btn-outline { flex: 1; min-width: 0; padding: 0 12px; font-size: 15px; }
	.epub-v2 .wiz-actions .wiz-prev { flex: 0 0 76px; }

	/* ===================== V2 : 1단계 필수 입력 표시 =====================
	   .req 는 사이트 공용 표기(.mcld-field__label .req)와 같은 방식입니다. */
	.epub-v2 .field label .req { color: var(--ep2-red); margin-left: 2px; }
	.epub-v2 .field input.is-error { border-color: var(--ep2-red); }
	.epub-v2 .step1-error {
		display: none; margin: 0 0 10px; font-size: 13px; color: var(--ep2-red);
	}
	.epub-v2 .step1-error.is-on { display: block; }

	/* ===================== V2 : 예상 견적 추가 비용 안내 툴팁 =====================
	   prd/pr_ip_conf.asp 의 '출고 예상일' 툴팁과 같은 방식입니다. */
	.epub-v2 .est-box .dlvr-date {
		left: 0; width: 300px; height: auto;
		padding: 10px 12px; background: #fff; border: 1px solid #ddd;
		font-size: 13px; font-weight: 400; line-height: 1.7;
	}
	.epub-v2 .est-box .dlvr-info:hover + .dlvr-date,
	.epub-v2 .est-box .dlvr-info:focus + .dlvr-date { display: block; }

	/* ===================== V2 : 포트폴리오 이미지 슬라이더 =====================
	   한 화면에 2장씩 보여줍니다 (2026-09-02 변경).
	   폭 계산 : .main19-contents 1200 − 화살표 40×2 − gap 14×2 = 1092 → 1080 사용
	   li 사이 간격은 gap 대신 안쪽 여백(padding)으로 줍니다.
	   gap 을 쓰면 트랙 폭에 간격이 더해져 translateX(-100%) 가 정확히 2장씩 넘어가지 않습니다.
	   ※ 넘기는 단위(2장)는 index_v2.asp 의 PF_PER_VIEW 와 함께 맞춰야 합니다. */
	.epub-v2 .proof-slider { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; }
	/* 넘김 버튼 : 이미지 영역(.proof-viewport, 최대 1080px 가운데 정렬) 좌우 끝에 겹쳐 놓습니다 */
	.epub-v2 .proof-slider .fb-nav { position: absolute; top: 50%; z-index: 2; margin-top: -24px; }
	.epub-v2 .proof-slider .fb-nav:first-child { left: calc(50% - min(540px, 50%) - 14px); }
	.epub-v2 .proof-slider .fb-nav:last-child { right: calc(50% - min(540px, 50%) - 14px); }
	.epub-v2 .proof-viewport { width: 1080px; max-width: 100%; overflow: hidden; }
	.epub-v2 .proof-track {
		display: flex; margin: 0; padding: 0; list-style: none;
		transition: transform .35s ease;   /* transform 만 사용 (리플로우 없음) */
	}
	.epub-v2 .proof-track > li { flex: 0 0 50%; padding: 0 10px; }
	.epub-v2 .proof-track img { width: 100%; height: auto; display: block; }

	/* 인디케이터(점) + 자동재생 일시정지 버튼 */
	.epub-v2 .proof-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
	.epub-v2 .proof-dots { display: flex; gap: 8px; }
	.epub-v2 .proof-dot {
		width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
		background: #d3d3d3; cursor: pointer;
		transition: background-color .2s, transform .2s;
	}
	.epub-v2 .proof-dot.is-on { background: var(--ep2-key); transform: scale(1.25); }
	.epub-v2 .proof-dot:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 3px; }
	.epub-v2 .proof-play {
		margin-left: 6px; width: 26px; height: 26px; padding: 0;
		border: 1px solid var(--ep2-line); border-radius: 50%; background: #fff;
		color: var(--ep2-text-soft); font-size: 11px; line-height: 1; cursor: pointer;
	}
	.epub-v2 .proof-play:hover { border-color: var(--ep2-key); color: var(--ep2-key); }

	/* ===================== V2 : 히어로 좌측 캐릭터 ===================== */
	.epub-v2 .hero-char { margin: 60px -60px 0px; text-align: right; line-height: 0; }
	.epub-v2 .hero-char img { width: 230px; height: auto; }

	/* ===================== V2 : 채널톡 커스텀 버튼 =====================
	   버튼은 공용 푸터(inc/footArea_Channel.asp)에서 출력되어 .epub-v2 래퍼 바깥에 있습니다.
	   sub_landing.css 를 함께 쓰는 다른 페이지에 영향이 가지 않도록 :has() 로 이 페이지에만 한정합니다. */
	body:has(.epub-v2) .custom-button-channel { z-index: 999; }

	/* ===================== V2 : 접수 완료 (sub/make_epub/ep_apply_fini.asp) =====================
	   [접수만 신청하기](EPO_ROUTE='03') 후 안내 화면입니다.
	   본문 표는 common.css 의 .tb-default 를 그대로 쓰고, 감싸는 영역만 여기서 정의합니다. */
	.epub-v2 .ep-fini { padding: 90px 0 110px; background: #fff; }

	.epub-v2 .ep-fini-title {
		margin: 0; text-align: center;
		font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--ep2-title);
	}
	.epub-v2 .ep-fini-desc {
		max-width: 680px; margin: 24px auto 0; text-align: center;
		font-size: 16px; line-height: 26px; color: var(--ep2-text-soft);
	}

	/* 접수번호 */
	.epub-v2 .ep-fini-code {
		display: flex; align-items: center; justify-content: center; gap: 16px;
		margin: 40px 0 60px; padding: 28px 20px;
		border: 1px solid var(--ep2-key); border-radius: 4px; background: var(--ep2-key-tint);
	}
	.epub-v2 .ep-fini-code-label { font-size: 16px; color: var(--ep2-text-soft); }
	.epub-v2 .ep-fini-code-num { font-size: 30px; font-weight: 700; color: var(--ep2-title); }

	/* 다음 절차 안내 */
	.epub-v2 .ep-fini-notice {
		margin-top: 60px; padding: 34px 40px;
		border-radius: 4px; background: var(--ep2-bg);
	}
	.epub-v2 .ep-fini-steps { margin: 20px 0 16px; padding: 0; counter-reset: epfini; }
	.epub-v2 .ep-fini-steps li {
		position: relative; margin-bottom: 12px; padding-left: 34px;
		font-size: 16px; line-height: 26px; color: var(--ep2-text);
		list-style: none; counter-increment: epfini;
	}
	.epub-v2 .ep-fini-steps li::before {
		content: counter(epfini);
		position: absolute; left: 0; top: 2px;
		display: inline-flex; align-items: center; justify-content: center;
		width: 22px; height: 22px; border-radius: 50%;
		background: var(--ep2-title); color: #fff;
		font-size: 13px; font-weight: 700; line-height: 1;
	}
	.epub-v2 .ep-fini-notice a { color: var(--ep2-title); text-decoration: underline; }

	/* 버튼 */
	.epub-v2 .ep-fini-btns { display: flex; gap: 20px; justify-content: center; margin-top: 50px; }

	/* ===================== V2 : 작가 시점 보강 섹션 (2026-09-02 추가) =====================
	   히어로 서브카피 · 비교 섹션 강조문 · 인용 밴드 · 제작 과정 · 품질 검증 ·
	   견적 기준 · FAQ 용 스타일입니다. 기존 토큰만 사용하고 새 색상은 만들지 않았습니다. */

	/* 히어로 서브카피 : 앞 문단(.hero-copy p) 의 아래 여백 36px 를 일부 당겨 한 덩어리로 보이게 함 */
	.epub-v2 .hero-copy .hero-sub {
		max-width: 470px; margin: -16px 0 34px; padding: 14px 0 0 16px;
		border-left: 3px solid var(--ep2-key);
		font-size: 15px; line-height: 25px; color: var(--ep2-text);
	}

	/* 비교표 하단 : 작업의 성격을 못박는 강조문 */
	.epub-v2 .difference-note {
		margin-top: 40px; padding: 30px 40px; border-radius: 3px;
		background: var(--ep2-key-tint); text-align: center;
	}
	.epub-v2 .difference-note strong {
		display: block; margin-bottom: 10px;
		font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--ep2-title);
	}
	.epub-v2 .difference-note p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ep2-text-soft); }

	/* 인용 밴드 : 앞뒤가 흰 섹션이라 배경색으로 구분하고 상하 여백을 줄임 */
	.epub-v2 .author-message { padding: 70px 0; background: var(--ep2-bg2); text-align: center; }
	.epub-v2 .author-message .am-lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ep2-text-soft); }
	.epub-v2 .author-message .am-point {
		display: block; margin: 10px 0 14px;
		font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; color: var(--ep2-title);
	}
	.epub-v2 .author-message .am-desc { display: block; font-size: 16px; line-height: 26px; color: var(--ep2-text-soft); }

	/* 제작 과정 : 3열 × 2행 */
	.epub-v2 .process-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
	.epub-v2 .process-line li {
		display: flex; gap: 16px; align-items: flex-start;
		padding: 28px 26px; border: 1px solid var(--ep2-line-card); border-radius: 3px; background: #fff;
	}
	.epub-v2 .process-line li > span {
		flex: none;
		display: inline-flex; align-items: center; justify-content: center;
		width: 38px; height: 38px; border-radius: 50%;
		background: var(--ep2-key); color: #fff;
		font-size: 15px; font-weight: 700; line-height: 1;
	}
	.epub-v2 .process-line h3 { margin: 6px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: var(--ep2-text); }
	.epub-v2 .process-line p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ep2-text-soft); }

	/* 품질 검증 : 4열 */
	.epub-v2 .quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.epub-v2 .quality-grid article {
		padding: 32px 26px; border: 1px solid var(--ep2-line-card); border-radius: 3px; background: #fff;
		transition: transform .2s;
	}
	.epub-v2 .quality-grid article:hover { transform: translateY(-4px); }
	.epub-v2 .quality-grid span { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--ep2-key); }
	.epub-v2 .quality-grid h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: var(--ep2-text); }
	.epub-v2 .quality-grid p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ep2-text-soft); }

	/* 가격표 하단 주석 */
	.epub-v2 .pricing-caption {
		margin: 30px 9px 0;
		font-size: 12px;
		line-height: 1.5;
		color: var(--ep2-text-mute);
	}

	/* 견적 기준 : 2열 × 2행 */
	.epub-v2 .criteria-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
	.epub-v2 .criteria-list > div {
		display: flex; gap: 18px; align-items: flex-start;
		padding: 26px 0; border-top: 1px solid var(--ep2-line-soft);
	}
	.epub-v2 .criteria-list strong {
		flex: none; width: 34px;
		font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ep2-key);
	}
	.epub-v2 .criteria-list b { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: var(--ep2-text); }
	.epub-v2 .criteria-list small { display: block; font-size: 15px; line-height: 24px; color: var(--ep2-text-soft); }

	/* FAQ : details 기본 동작 사용 (JS 없이 열고 닫힘) */
	.epub-v2 .faq-list { max-width: 900px; margin: 0 auto; }
	.epub-v2 .faq-list details { border-bottom: 1px solid var(--ep2-line); background: transparent; }
	.epub-v2 .faq-list summary {
		position: relative; list-style: none; cursor: pointer;
		padding: 24px 44px 24px 0;
		font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: var(--ep2-text);
	}
	.epub-v2 .faq-list summary::-webkit-details-marker { display: none; }
	.epub-v2 .faq-list summary::after {
		content: '+'; position: absolute; right: 8px; top: 50%;
		transform: translateY(-50%);
		font-size: 24px; font-weight: 400; color: var(--ep2-key);
	}
	.epub-v2 .faq-list details[open] summary::after { content: '−'; }
	.epub-v2 .faq-list summary:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 2px; }
	.epub-v2 .faq-list p { margin: 0; padding: 0 44px 26px 0; font-size: 16px; line-height: 27px; color: var(--ep2-text-soft); }

	/* FAQ 주제 탭 : calendar/index2.asp 이동 버튼(.mcld-menubar a) 알약 톤 (2026-10-15) */
	.epub-v2 .faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto 30px; }
	.epub-v2 .faq-tab {
		flex: 1 1 0; min-width: 120px; height: 48px; padding: 0 16px;
		border: 1px solid var(--ep2-text); border-radius: 100px;
		background: #fff; font-size: 16px; color: var(--ep2-text); cursor: pointer;
		transition: background-color .2s, color .2s;
	}
	.epub-v2 .faq-tab:hover { background: var(--ep2-bg2); }
	.epub-v2 .faq-tab.on { background: var(--ep2-text); color: #fff; }
	.epub-v2 .faq-tab:focus-visible { outline: 2px solid var(--ep2-key); outline-offset: 2px; }

	/* =========================================================================
	   5. 북토리 Publish 랜딩 V2 (sub/publish_web/publish_web.asp) 전용
	   - 원본 : 구 .pubweb 블록 (Pretendard 톤) 의 리스타일 버전 (구 블록은 미사용이 되어 삭제됨)
	   - 디자인 기준 : 위 4번 .epub-v2 블록과 동일 규격
	     · 서체 Noto Sans KR(.main19-wrap 상속) / 폭 .main19-contents 1200px 고정
	     · 섹션 타이틀 36px / 700 / 가운데 / #0075c2, 히어로 타이틀 44px / 700 / -1.5px
	     · 버튼 : height 64px, min-width 200px, radius 3px, 18px/500
	              hover 시 opacity .88 + translateY(-2px)  (transform·opacity만 사용)
	     · 입력 : radius 3px, border #d5d5d5, focus 시 파랑 테두리
	     · 카드 : radius 4px, 선택/강조 시 파랑 테두리 + inset 1px 링
	     · 본문 회색 #666, 배경 회색 #f8f8f8 / 하늘색 #eff1f9
	   - 모든 선택자를 .pubweb-v2 래퍼 아래로 스코프하여 다른 랜딩 블록과 충돌 방지
	   - 상담 신청 폼 / 하단 문의는 .mcld · .pub-mcld 규칙을 그대로 재사용 (중복 선언 없음)
	   - 흰 글자가 올라가는 채움 영역(번호 배지·프로모션 밴드)은 명도 대비 확보를 위해
	     밝은 파랑(#0091dc) 대신 진한 파랑(#0075c2)을 사용 (WCAG 2.1 AA)
	   ========================================================================= */

	/* 디자인 토큰 : .pubweb-v2 스코프에 선언 */
	.pubweb-v2 {
		--pw2-key: #0091dc;        /* 인터랙션(버튼·링크·활성) — index.asp GNB 컬러 */
		--pw2-key-dark: #2f72b6;   /* 인터랙션 hover */
		--pw2-key-tint: #f2f9fd;   /* 선택 상태 배경 */
		--pw2-title: #0075c2;      /* 섹션 타이틀 / 흰 글자 배경 — index2.asp --mcld-blue */
		--pw2-text: #333;          /* 기본 검정 — --mcld-black */
		--pw2-text-soft: #666;     /* 보조 텍스트 — --mcld-gray */
		--pw2-text-mute: #999;
		--pw2-line: #d5d5d5;       /* 입력 테두리 */
		--pw2-line-card: #e0e0e0;  /* 카드 테두리 */
		--pw2-line-soft: #f0f0f0;  /* 구분선 */
		--pw2-bg: #f8f8f8;         /* 배경 회색 */
		--pw2-bg2: #eff1f9;        /* 배경 하늘색 */
		--pw2-orange: #ff6e41;     /* 포인트 주황 */

		min-width: 1200px;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: 0;
		color: var(--pw2-text);
	}

	.pubweb-v2 *, .pubweb-v2 *::before, .pubweb-v2 *::after { box-sizing: border-box; }
	.pubweb-v2 img { max-width: 100%; vertical-align: top; }
	.pubweb-v2 a { text-decoration: none; color: inherit; }
	.pubweb-v2 ul { margin: 0; padding: 0; list-style: none; }
	.pubweb-v2 button { font-family: inherit; cursor: pointer; }
	.pubweb-v2 section[id] { scroll-margin-top: 100px; }

	/* ===================== PW2 : 섹션 밴드 / 타이틀 ===================== */
	.pubweb-v2 .pw-sec { padding: 100px 0 110px; background: #fff; }
	.pubweb-v2 .pw-sec-gray { background: var(--pw2-bg); }

	.pubweb-v2 .eyebrow {
		display: inline-block;
		font-size: 14px; font-weight: 500; letter-spacing: .06em;
		color: var(--pw2-key);
	}
	/* .mcld-sec-title 규격 : 36px / 700 / 가운데 / 파랑 */
	.pubweb-v2 .section-head { margin-bottom: 50px; text-align: center; }
	.pubweb-v2 .section-head .eyebrow { margin-bottom: 14px; }
	.pubweb-v2 .section-head h2 {
		font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--pw2-title); margin: 0;
	}
	.pubweb-v2 .section-head h2 em { font-style: normal; color: var(--pw2-key); }
	.pubweb-v2 .section-head p {
		max-width: 680px; margin: 24px auto 0;
		font-size: 16px; line-height: 26px; color: var(--pw2-text-soft);
	}

	/* ===================== PW2 : 버튼 (.mcld-btn 규격) ===================== */
	.pubweb-v2 .btn-primary,
	.pubweb-v2 .btn-outline,
	.pubweb-v2 .btn-order,
	.pubweb-v2 .promo-cta-main {
		display: inline-flex; align-items: center; justify-content: center; gap: 4px;
		height: 64px; min-width: 200px; padding: 0 24px;
		border-radius: 3px; border: none;
		font-family: inherit; font-size: 18px; font-weight: 500; text-align: center;
		transition: opacity .2s, transform .2s;
	}
	.pubweb-v2 .btn-primary:hover,
	.pubweb-v2 .btn-outline:hover,
	.pubweb-v2 .btn-order:hover,
	.pubweb-v2 .promo-cta-main:hover { opacity: .88; transform: translateY(-2px); }

	.pubweb-v2 .btn-primary { background: var(--pw2-key); color: #fff; }
	.pubweb-v2 .btn-outline { background: #fff; color: var(--pw2-text); border: 1px solid var(--pw2-text); }
	.pubweb-v2 .btn-row { display: flex; gap: 20px; align-items: center; }

	/* ===================== PW2 : HERO ===================== */
	.pubweb-v2 .hero { background: linear-gradient(180deg, var(--pw2-bg2), #fff); padding: 70px 0 100px; }
	.pubweb-v2 .hero-inner { display: flex; align-items: center; gap: 60px; }
	.pubweb-v2 .hero-copy { flex: 1; }
	.pubweb-v2 .hero-copy .eyebrow { margin-bottom: 16px; }
	/* .mcld-hero__title 규격 : 44px / 700 / 1.2 / letter-spacing -1.5px */
	.pubweb-v2 .hero-copy h1 {
		font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--pw2-text); margin: 0 0 18px;
	}
	.pubweb-v2 .hero-copy h1 em { font-style: normal; color: var(--pw2-key); }
	.pubweb-v2 .hero-copy p {
		font-size: 16px; font-weight: 400; line-height: 26px; color: var(--pw2-text-soft);
		max-width: 500px; margin: 0 0 36px;
	}
	/* 인쇄 연계 할인 강조 문구 */
	.pubweb-v2 .hero-copy p b { font-weight: 500; color: var(--pw2-title); }
	.pubweb-v2 .hero-visual-col { position: relative; width: 560px; flex: none; }

	/* 종이 → 웹 이음새 : 브랜드 블루로 은은하게 흐름 (transform만 사용) */
	.pubweb-v2 .seam-strip {
		position: relative; overflow: hidden;
		height: 8px; border-radius: 3px; margin-bottom: 18px;
		background: linear-gradient(90deg, #e8e8e8, var(--pw2-key));
	}
	.pubweb-v2 .seam-strip::before {
		content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
		background: linear-gradient(90deg,
			#ececec 0%, #cfe9f7 16.667%, #0091dc 33.333%,
			#cfe9f7 50%, #ececec 66.667%,
			#cfe9f7 83.333%, #0091dc 100%);
		transform: translateX(-66.667%);
		animation: pw2SeamShift 16s linear infinite;
		will-change: transform;
	}
	@keyframes pw2SeamShift {
		0% { transform: translateX(-66.667%); }
		100% { transform: translateX(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.pubweb-v2 .seam-strip::before { animation: none; }
	}

	/* 브라우저 목업 (샘플 사이트 링크) */
	.pubweb-v2 .browser-mockup {
		display: block; overflow: hidden;
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		box-shadow: 0 18px 40px -26px rgba(0,0,0,.35);
		transition: opacity .2s, transform .2s;
	}
	.pubweb-v2 .browser-mockup:hover { opacity: .92; transform: translateY(-2px); }
	.pubweb-v2 .browser-bar {
		display: flex; align-items: center; gap: 10px;
		padding: 10px 14px; background: var(--pw2-bg);
		border-bottom: 1px solid var(--pw2-line-soft);
	}
	.pubweb-v2 .browser-dots { display: flex; gap: 6px; }
	.pubweb-v2 .browser-dots span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
	.pubweb-v2 .browser-url {
		flex: 1; display: flex; align-items: center; gap: 6px;
		height: 26px; padding: 0 10px; background: #fff;
		border: 1px solid var(--pw2-line); border-radius: 3px;
		font-size: 12px; color: var(--pw2-text-soft);
	}
	.pubweb-v2 .url-lock {
		width: 8px; height: 10px; flex-shrink: 0;
		border: 1px solid var(--pw2-text-mute); border-radius: 2px;
	}
	.pubweb-v2 .browser-mockup img { display: block; width: 100%; height: auto; }

	/* 원스톱 배지 : 목업 우측 하단에 겹침 */
	.pubweb-v2 .hero-badge-group {
		position: absolute; right: -10px; bottom: -24px;
		display: flex; align-items: center; gap: 12px;
		padding: 14px 18px; background: #fff;
		border: 1px solid var(--pw2-line-card); border-radius: 4px;
		box-shadow: 0 14px 30px -18px rgba(0,0,0,.45);
		pointer-events: none;
	}
	.pubweb-v2 .badge-icon {
		width: 44px; height: 44px; border-radius: 50%; background: var(--pw2-bg2);
		display: flex; align-items: center; justify-content: center; font-size: 22px;
	}
	.pubweb-v2 .badge-text { display: block; }
	.pubweb-v2 .badge-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--pw2-text); }
	.pubweb-v2 .badge-text span { display: block; margin-top: 2px; font-size: 13px; color: var(--pw2-text-soft); }

	/* ===================== PW2 : 신뢰 지표 밴드 ===================== */
	.pubweb-v2 .trust-bar {
		background: var(--pw2-bg);
		border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
	}
	.pubweb-v2 .trust-inner { display: flex; justify-content: space-between; gap: 40px; padding: 30px 0; }
	.pubweb-v2 .trust-stat strong {
		display: block; font-size: 26px; font-weight: 700;
		letter-spacing: -1px; color: var(--pw2-title);
	}
	.pubweb-v2 .trust-stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--pw2-text-soft); }

	/* ===================== PW2 : 고민 & 해결 ===================== */
	.pubweb-v2 .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.pubweb-v2 .pain-card {
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		padding: 34px 32px; transition: border-color .2s, transform .2s;
	}
	.pubweb-v2 .pain-card:hover { border-color: var(--pw2-key); transform: translateY(-2px); }
	.pubweb-v2 .pain-icon {
		width: 52px; height: 52px; border-radius: 50%; background: var(--pw2-bg2);
		display: flex; align-items: center; justify-content: center;
		font-size: 24px; margin-bottom: 20px;
	}
	.pubweb-v2 .pain-card h3 {
		font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
		color: var(--pw2-text); margin: 0 0 12px;
	}
	.pubweb-v2 .pain-card p { font-size: 15px; line-height: 24px; color: var(--pw2-text-soft); margin: 0; }

	/* ===================== PW2 : 주요 기능 (좌 목록 + 우 UI 예시) ===================== */
	.pubweb-v2 .features-split { display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: start; }
	.pubweb-v2 .feature-list { display: flex; flex-direction: column; gap: 12px; }
	.pubweb-v2 .feature-item {
		display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left;
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		padding: 20px 22px;
		transition: border-color .2s, box-shadow .2s, background-color .2s;
	}
	.pubweb-v2 .feature-item:hover { border-color: var(--pw2-key); }
	.pubweb-v2 .feature-item.active {
		border-color: var(--pw2-key); background: var(--pw2-key-tint);
		box-shadow: 0 0 0 1px var(--pw2-key) inset;
	}
	.pubweb-v2 .feature-num {
		flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
		background: var(--pw2-title); color: #fff;
		display: flex; align-items: center; justify-content: center;
		font-size: 14px; font-weight: 700;
	}
	.pubweb-v2 .feature-text strong {
		display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.5px;
		color: var(--pw2-text); margin-bottom: 0;
	}
	.pubweb-v2 .feature-item.active .feature-text strong { margin-bottom: 6px; }
	/* 보조설명은 활성 항목에서만 노출 */
	.pubweb-v2 .feature-text span { display: none; font-size: 14px; line-height: 22px; color: var(--pw2-text-soft); }
	.pubweb-v2 .feature-item.active .feature-text span { display: block; }

	.pubweb-v2 .features-visual {
		display: flex; align-items: center; justify-content: center; 
	}
	.pubweb-v2 .features-visual-inner { width: 100%;position: relative;}
	.pubweb-v2 .feature-screen {
		display: none; overflow: hidden;
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		box-shadow: 0 18px 40px -26px rgba(0,0,0,.35);height: 380px;
	}
	.pubweb-v2 .feature-screen.active { display: block; animation: pw2ScreenFade .28s ease; }
		.pubweb-v2 .features-visual .explain{text-align:center; position: absolute;bottom: -30px;}
	@keyframes pw2ScreenFade {
		0% { opacity: 0; transform: translateY(8px); }
		100% { opacity: 1; transform: translateY(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.pubweb-v2 .feature-screen.active { animation: none; }
	}
	.pubweb-v2 .fscreen-header {
		display: flex; align-items: center; gap: 8px;
		padding: 12px 16px; background: var(--pw2-bg2);
		border-bottom: 1px solid var(--pw2-line-soft);
		font-size: 14px; font-weight: 500; color: var(--pw2-title);
	}
	.pubweb-v2 .fscreen-body { padding: 20px; }
	.pubweb-v2 .fscreen-badge {
		display: inline-block; margin-bottom: 10px; padding: 4px 10px;
		border: 1px solid rgba(0,145,220,.35); border-radius: 3px; background: var(--pw2-key-tint);
		font-size: 12px; color: var(--pw2-title);
	}
	.pubweb-v2 .fscreen-badge.sm { margin-bottom: 6px; padding: 2px 6px; font-size: 9px; }

	/* 1번 UI : 도서 쇼룸 */
	.pubweb-v2 .fscreen-row { display: flex; gap: 12px; margin-bottom: 12px; }
	.pubweb-v2 .fscreen-book { position: relative; flex: 1; aspect-ratio: 2.3/3; border-radius: 3px; overflow: hidden; }
	.pubweb-v2 .fscreen-book::after {
		content: 'BOOK'; position: absolute; left: 8px; bottom: 8px;
		font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75);
	}
	.pubweb-v2 .fscreen-book-1 { background: #a8c4e8; }
	.pubweb-v2 .fscreen-book-2 { background: #b5d4f4; }
	.pubweb-v2 .fscreen-book-3 { background: #85b7eb; }
	.pubweb-v2 .fscreen-book-4 { background: #c8ddf5; }
	.pubweb-v2 .fscreen-book-title { font-size: 13px; font-weight: 700; color: var(--pw2-text); }
	.pubweb-v2 .fscreen-book-desc { margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--pw2-text-soft); }

	/* 2번 UI : 원고 투고 창구 */
	.pubweb-v2 .fscreen-form { display: flex; flex-direction: column; gap: 10px; }
	.pubweb-v2 .fscreen-input {
		width: 100%; height: 36px; padding: 0 10px;
		border: 1px solid var(--pw2-line); border-radius: 3px;
		font-family: inherit; font-size: 13px; color: var(--pw2-text); background: #fff;
	}
	.pubweb-v2 .fscreen-input:focus { outline: none; border-color: var(--pw2-key); }
	.pubweb-v2 .fscreen-file-btn {
		border: 1px dashed #bbb; border-radius: 3px; background: var(--pw2-bg);
		padding: 14px; text-align: center; font-size: 13px; color: var(--pw2-text-soft);
	}
	.pubweb-v2 .fscreen-submit-btn {
		height: 40px; border: none; border-radius: 3px;
		background: var(--pw2-key); color: #fff; font-size: 14px; font-weight: 500;
		transition: opacity .2s, transform .2s;
	}
	.pubweb-v2 .fscreen-submit-btn:hover { opacity: .88; transform: translateY(-2px); }

	/* 3번 UI : 모바일 반응형 */
	.pubweb-v2 .fscreen-mobile-wrapper {
		position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 0;
	}
	.pubweb-v2 .mobile-deco-info,
	.pubweb-v2 .mobile-deco-stats {
		position: absolute; padding: 9px 12px; font-size: 12px; line-height: 18px;
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		color: var(--pw2-text-soft);
		box-shadow: 0 12px 24px -18px rgba(0,0,0,.5);
	}
	.pubweb-v2 .mobile-deco-info { left: 0; top: 16px; }
	.pubweb-v2 .mobile-deco-info strong { display: block; margin-bottom: 2px; font-weight: 500; color: var(--pw2-title); }
	.pubweb-v2 .mobile-deco-stats { right: 0; bottom: 16px; }
	.pubweb-v2 .mobile-deco-stats span { display: block; }
	.pubweb-v2 .mobile-deco-stats em { font-style: normal; font-weight: 700; color: var(--pw2-title); }
	.pubweb-v2 .fscreen-phone {
		position: relative; z-index: 2; width: 150px; height: 260px; overflow: hidden;
		background: #fff; border: 4px solid var(--pw2-text); border-radius: 18px;
		box-shadow: 0 22px 38px -24px rgba(0,0,0,.55);
	}
	.pubweb-v2 .fscreen-phone-notch { width: 60px; height: 12px; margin: 0 auto; background: var(--pw2-text); border-radius: 0 0 6px 6px; }
	.pubweb-v2 .fscreen-phone-content { padding: 10px; }
	.pubweb-v2 .fscreen-phone-card { height: 70px; margin-bottom: 8px; border-radius: 3px; background: var(--pw2-bg2); }
	.pubweb-v2 .fscreen-phone-line { height: 8px; margin-bottom: 6px; border-radius: 4px; background: var(--pw2-bg); }

	/* 4번 UI : 검색 노출(SEO) */
	.pubweb-v2 .fscreen-seo-box {
		padding: 12px; margin-bottom: 10px;
		border: 1px solid var(--pw2-line-card); border-radius: 4px;
	}
	.pubweb-v2 .fscreen-seo-box.last { margin-bottom: 0; }
	.pubweb-v2 .fscreen-seo-url { margin-bottom: 2px; font-size: 12px; color: #0b7a3b; }
	.pubweb-v2 .fscreen-seo-title {
		margin-bottom: 4px; font-size: 14px; font-weight: 700;
		color: var(--pw2-title); text-decoration: underline;
	}
	.pubweb-v2 .fscreen-seo-desc { font-size: 12px; line-height: 20px; color: var(--pw2-text-soft); }

	/* ===================== PW2 : 요금 안내 ===================== */
	.pubweb-v2 .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
	.pubweb-v2 .price-card {
		position: relative; display: flex; flex-direction: column;
		background: #fff; border: 1px solid var(--pw2-line-card); border-radius: 4px;
		padding: 36px 32px 32px;
	}
	.pubweb-v2 .price-card.featured { border-color: var(--pw2-key); box-shadow: 0 0 0 1px var(--pw2-key) inset; }
	.pubweb-v2 .price-card .badge {
		position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
		display: inline-flex; align-items: center; height: 30px; padding: 0 18px;
		border-radius: 3px; background: var(--pw2-orange); color: var(--pw2-key-tint);
		font-size: 14px; font-weight: 500; white-space: nowrap;
	}
	.pubweb-v2 .price-card .tier-en {
		display: block; font-size: 14px; font-weight: 500; letter-spacing: .06em;
		color: var(--pw2-key); margin-bottom: 8px;
	}
	.pubweb-v2 .price-card h3 {
		font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px;
		color: var(--pw2-text); margin: 0 0 14px;
	}
	.pubweb-v2 .price-card .cost { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--pw2-title); }
	.pubweb-v2 .price-card .basis {
		margin-top: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--pw2-line-soft);
		font-size: 14px; line-height: 22px; color: var(--pw2-text-soft);
	}
	.pubweb-v2 .price-card .basis b { font-weight: 500; color: var(--pw2-title); }
	.pubweb-v2 .block-label { font-size: 14px; font-weight: 500; color: var(--pw2-text); margin: 22px 0 10px; }
	.pubweb-v2 .price-card ul.plain { margin-bottom: 24px; }
	.pubweb-v2 .price-card ul.plain li {
		position: relative; padding: 5px 0 5px 14px;
		font-size: 14px; line-height: 22px; color: var(--pw2-text-soft);
	}
	.pubweb-v2 .price-card ul.plain li::before {
		content: ''; position: absolute; left: 0; top: 14px;
		width: 4px; height: 4px; border-radius: 50%; background: var(--pw2-key);
	}
	.pubweb-v2 .price-card ul.plain li.plus { font-weight: 500; color: var(--pw2-title); }
	.pubweb-v2 .btn-order {
		display: flex; width: 100%; min-width: 0; height: 56px; margin-top: auto;
		font-size: 16px; background: #fff; color: var(--pw2-key); border: 1px solid var(--pw2-key);
	}
	.pubweb-v2 .price-card.featured .btn-order { background: var(--pw2-key); color: #fff; }

	/* ===================== PW2 : 론칭 혜택 밴드 ===================== */
	.pubweb-v2 .promo-banner {
		display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
		padding: 56px 52px; border-radius: 4px; background: var(--pw2-title); color: #fff;
	}
	.pubweb-v2 .promo-tag {
		display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
		border-radius: 3px; background: rgba(255,255,255,.18); font-size: 14px; color: #fff;
	}
	.pubweb-v2 .promo-banner h2 {
		margin: 20px 0 12px; font-size: 36px; font-weight: 700;
		line-height: 1.2; letter-spacing: -1.5px; color: #fff;
	}
	.pubweb-v2 .promo-banner p { margin: 0 0 26px; font-size: 16px; line-height: 26px; color: #fff; }
	.pubweb-v2 .promo-items { display: flex; gap: 12px; }
	.pubweb-v2 .promo-item {
		display: flex; align-items: center; gap: 8px;
		padding: 10px 14px; border-radius: 3px; background: rgba(255,255,255,.14);
	}
	.pubweb-v2 .promo-item b {
		padding: 2px 8px; border-radius: 2px; white-space: nowrap;
		background: var(--pw2-orange); color: var(--pw2-key-tint); font-size: 13px; font-weight: 700;
	}
	.pubweb-v2 .promo-item span { font-size: 14px; color: #fff; }
	.pubweb-v2 .promo-cta-group { flex-shrink: 0; text-align: right; }
	.pubweb-v2 .promo-cta-main { background: #fff; color: var(--pw2-title); }
	.pubweb-v2 .promo-cta-sub { margin: 12px 0 0; font-size: 14px; color: #fff; }