/* Layout: 아이보리 한 장 위에 여백과 가는 선으로 나눈 단일 칼럼(최대 1080px), 책 표지가 색을 맡는다
   팔레트 C(2026-10-09): 먹·아이보리·쪽. 이름은 예전 변수 그대로 두고 값만 바꿨다
   --ground 바탕 / --paper 카드 / --paper2 종이(띠·보조 바탕) / --line 선 / --ink·--plum 제목·주요 버튼·로고
   --body 본문 / --sub 거드는 말 / --lavink 강조 글자(번호·Q.·추천) / --lav 보조(테두리만, 글자 금지) / --err 오류 */
:root{
  --ground:#FDFBF6; --paper:#FFFFFF; --paper2:#FFFDF9; --line:#E9E4DB;
  --ink:#22252A; --plum:#22252A; --body:#4A4F57; --sub:#686D74; --lav:#9DB0CC; --lavink:#2E4A6E; --lav50:#E6ECF4; --err:#9C3D2E;
  --btn-bg:#22252A; --btn-fg:#F7F4EE; --btn-hover:#3A3E45; --shade:rgba(20,22,26,.07); --glass:rgba(253,251,246,.9);
  --final-bg:#22252A; --final-fg:#FDFBF6; --final-btn:#FDFBF6; --final-btn-fg:#22252A; --final-accent:#9DB0CC;
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --lat:"Instrument Serif",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#17191C; --paper:#1F2226; --paper2:#23262B; --line:#33373D;
  --ink:#ECE8E1; --plum:#ECE8E1; --body:#C5C2BB; --sub:#9C9A94; --lav:#4D6789; --lavink:#9DB0CC; --lav50:#2A3442; --err:#E39A8C;
  --btn-bg:#E9E4DA; --btn-fg:#17191C; --btn-hover:#FFFFFF; --shade:rgba(0,0,0,.35); --glass:rgba(23,25,28,.88); --final-bg:#23262B; --final-fg:#ECE8E1; --final-btn:#E9E4DA; --final-btn-fg:#17191C; --final-accent:#9DB0CC;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#17191C; --paper:#1F2226; --paper2:#23262B; --line:#33373D;
  --ink:#ECE8E1; --plum:#ECE8E1; --body:#C5C2BB; --sub:#9C9A94; --lav:#4D6789; --lavink:#9DB0CC; --lav50:#2A3442; --err:#E39A8C;
  --btn-bg:#E9E4DA; --btn-fg:#17191C; --btn-hover:#FFFFFF; --shade:rgba(0,0,0,.35); --glass:rgba(23,25,28,.88); --final-bg:#23262B; --final-fg:#ECE8E1; --final-btn:#E9E4DA; --final-btn-fg:#17191C; --final-accent:#9DB0CC;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.7;margin:0;padding-inline:16px;word-break:keep-all;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{color:var(--ink);text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.03em}
h1{font-size:clamp(30px,5.6vw,52px);line-height:1.25}
h2{font-size:clamp(23px,3.4vw,32px);line-height:1.35}
h3{font-size:18px;line-height:1.45}
p{margin:0}
a{color:var(--lavink)}
img{max-width:100%;height:auto}
picture{display:block}
::selection{background:var(--lav50);color:var(--ink)}
:focus-visible{outline:2px solid var(--lavink);outline-offset:3px;border-radius:4px}
.it,.num,.lat{font-family:var(--lat);font-style:italic;font-weight:400;letter-spacing:0}
.label{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--lavink)}
.sub{font-size:17px;max-width:38em}
.small{font-size:14px;color:var(--sub)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:99;background:var(--paper);padding:8px 12px;border-radius:8px}

/* ── 헤더: 가운데 떠 있는 크림 유리 바 ── */
header.site{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:1120px;z-index:30}
.hd-pill{display:flex;align-items:center;gap:10px;height:58px;padding:0 9px 0 20px;border-radius:14px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line),0 8px 24px var(--shade)}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--plum)}
.logo svg{width:18px;height:22px;fill:var(--plum)}
.logo b{font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--plum)}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{white-space:nowrap;font-size:14px;font-weight:500;color:var(--ink);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;text-decoration:none;transition:background .3s,color .3s}
nav.main a:hover{background:var(--lav50)}
nav.main a[aria-current="page"]{color:var(--lavink);font-weight:600}
.hdr-r{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:8px;cursor:pointer;color:var(--ink);padding:0}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto}
@media (max-width:959px){nav.main{display:none}.menu-btn{display:block}.hdr-r{margin-left:auto}.hd-pill{height:54px;padding:0 7px 0 16px}.hdr-r .btn{padding:0 12px;font-size:13px}}
@media (max-width:380px){.hdr-r .btn{display:none}}
main{padding-top:84px}
/* 모바일 메뉴: 오른쪽에서 나오는 판 */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(10,12,14,.5);display:flex;justify-content:flex-end}
.sheet .in{background:var(--ground);width:min(320px,86vw);height:100%;padding:calc(16px + env(safe-area-inset-top,0px)) 20px 24px;display:grid;align-content:start;gap:4px;overflow:auto}
.sheet a.it-m{display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink);padding:12px 0;min-height:48px;text-decoration:none}
.sheet .close{justify-self:end;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}

/* ── 버튼: 네모 8px. 주요 = 먹색 + 글자 뒤 작은 화살표(글자색을 따라감) / 보조 = 네모 테두리 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:8px;font:inherit;font-size:14.5px;font-weight:500;letter-spacing:.02em;line-height:1.2;cursor:pointer;text-decoration:none;border:1px solid var(--plum);transition:background .3s,color .3s,border-color .3s}
.btn.pri{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn.pri::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .3s}
.btn.pri:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.pri:hover::after{transform:translateX(3px)}
.btn.sec{background:transparent;color:var(--plum)}
.btn.sec:hover{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn[disabled]{opacity:.45;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:10px 12px}
.link{color:var(--lavink);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lav);display:inline-flex;align-items:center;min-height:44px}

/* ── 섹션 ── */
section.s{padding-block:72px;border-top:1px solid var(--line);display:grid;gap:28px}
.head{display:grid;gap:10px;max-width:44em}
@media (max-width:600px){section.s{padding-block:52px}}

/* 탭 */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;font:inherit;font-size:15.5px;color:var(--sub);padding:12px 14px;min-height:44px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--plum);font-weight:500}
.panel{padding-top:20px;display:grid;gap:10px;max-width:44em}
/* 시작점 탭 3개: 좁은 화면에서는 세 칸으로 나눠 줄바꿈(가로 스크롤 없이 셋 다 보이게) */
@media (max-width:600px){.tabs[data-tabs="paths"] button{flex:1 1 0;min-width:0;white-space:normal;text-align:center;font-size:14px;line-height:1.35;padding:10px 6px}}
.panel h3{font-size:20px}
.price{font-size:20px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* 사진 */
.photo{margin:0;min-width:0}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;height:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:20px}}

/* 전/후 목업 */
.seg{justify-self:start;display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px;background:var(--paper);max-width:100%;flex-wrap:wrap}
.seg button{font:inherit;font-size:14.5px;border:0;background:none;color:var(--sub);padding:8px 14px;min-height:44px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)}

/* 다른 점 */
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.diff > div{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.diff .k{font-family:var(--sans);font-style:normal;color:var(--lavink);font-size:14px;font-weight:600;letter-spacing:.02em}
@media (max-width:900px){.diff{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.diff{grid-template-columns:1fr}}

/* 가격 카드 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pc{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.pc.rec{border:1.5px solid var(--lav)}
.pc .won{font-size:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.pc .won small{font-size:15px;font-weight:500;color:var(--sub)}
.pc .rec-t{font-size:12px;color:var(--lavink);font-weight:500;letter-spacing:.06em}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.cards4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards4{grid-template-columns:1fr}}

/* 진짜 책처럼(v4): 살짝 돌린 표지 + 책등 그늘 + 오른쪽 종이 단면 + 바닥 그림자. 실제 표지 그림을 .b3d로 감싼다 */
.b3d{position:relative;display:block;transform:perspective(900px) rotateY(-16deg);transform-origin:left center;transition:transform .35s ease;border-radius:2px 4px 4px 2px;box-shadow:18px 18px 24px -14px rgba(20,16,12,.55)}
.b3d img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:none}
.b3d::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.14) 2.5%,rgba(0,0,0,.1) 5%,transparent 11%)}
.b3d::after{content:"";position:absolute;top:3px;bottom:3px;right:-7px;width:7px;background:repeating-linear-gradient(90deg,#F4F0E7 0 1px,#DCD5C8 1px 2px);transform:skewY(-28deg);transform-origin:left top;border-radius:0 2px 2px 0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.b3d:hover{transform:perspective(900px) rotateY(-6deg)}}
/* 표지 파일이 아직 없는 책: 한 가지 색 + 제목만 */
.ph-cover{display:grid;place-content:center;width:100%;aspect-ratio:2/3;padding:14px;text-align:center;background:#E9DCC4;color:#3A3226;font-weight:600;font-size:15px;line-height:1.4;letter-spacing:-.02em;border-radius:2px 4px 4px 2px}

/* 새로 나온 책 */
.nb{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.nb > div{display:grid;gap:10px;align-content:start;min-width:0}
.nb .b3d{max-width:160px;width:calc(100% - 10px)}
.nb .g{font-size:11.5px;color:var(--lavink);border:1px solid var(--lav);border-radius:6px;padding:2px 6px;justify-self:start}
.nb p{font-size:13.5px}
.nb b{color:var(--ink)}
@media (max-width:900px){.nb{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.nb{grid-template-columns:repeat(2,1fr)}}

/* 띠 */
.band{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--paper2)}
.band > div{display:grid;gap:6px;min-width:0;flex:1 1 280px}
.band h2{font-size:22px}

/* 약속 */
.prom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prom > div{border-top:2px solid var(--plum);padding-top:14px;display:grid;gap:8px;align-content:start}
.prom > div:first-child{border-top-color:var(--err)}
.prom ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
@media (max-width:700px){.prom{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:14px 36px 14px 0;color:var(--ink);font-weight:500;position:relative;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";font-family:var(--lat);font-style:italic;color:var(--lavink);margin-right:8px;font-weight:400;flex:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:20px;color:var(--sub);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px 26px;max-width:44em}

/* 마지막 신청 칸 */
.final{display:grid;gap:18px;padding:40px 28px;border-radius:8px;background:var(--final-bg);color:var(--final-fg);border:1px solid var(--line)}
.final h2{color:var(--final-fg);font-size:clamp(28px,4.4vw,44px);line-height:1.25}
.final .label{color:var(--final-accent)}
.final .btn.pri{background:var(--final-btn);color:var(--final-btn-fg);border-color:var(--final-btn)}
.final .btn.pri:hover{opacity:.9}
.final .alt{display:grid;gap:2px;font-size:14.5px}
.final .link{color:var(--final-fg);text-decoration-color:currentColor}

/* 하위 페이지 */
.pg-head{padding-block:48px 8px;display:grid;gap:14px;max-width:44em}
.crumb{font-size:13px;color:var(--lavink);font-weight:500;letter-spacing:.06em}
.rows{display:grid;border-top:1px solid var(--line)}
.rows > div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rows > div > b{color:var(--ink);font-weight:500}
@media (max-width:640px){.rows > div{grid-template-columns:1fr;gap:4px}}
.rows.bookrows > div{grid-template-columns:72px 200px 1fr;align-items:center}
@media (max-width:640px){.rows.bookrows > div{grid-template-columns:64px 1fr;gap:4px 14px}.rows.bookrows > div > p{grid-column:2}}
.rows.bookrows .ph-cover{font-size:10.5px;padding:6px;line-height:1.3}
.apage{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;max-width:560px}
.apage .bar{font-size:11.5px;color:var(--sub);padding:8px 12px;border-bottom:1px solid var(--line);font-family:ui-monospace,Menlo,monospace}
.apage .bd{padding:18px;display:grid;gap:12px}
.apage .who{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.apage .av{width:56px;height:56px;border-radius:50%;background:var(--lav50);border:1px solid var(--lav)}
.apage .bks{display:flex;gap:8px}
.apage .bks span{width:40px;aspect-ratio:2/3;border-radius:2px 4px 4px 2px;background:var(--lavink)}
.about-ph{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block;height:auto}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.chain li{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:4px}
.biz{font-size:13px;color:var(--sub)}
/* 이야기 글(/stories/글주소) */
a.crumb{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-self:start}
.post-body{max-width:44em;display:grid;gap:16px}
.post-body h2{font-size:22px;margin-top:20px}
.post-body ul,.post-body ol{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* 폼 */
form{display:grid;gap:18px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:14.5px;color:var(--ink);font-weight:500}
.req{color:var(--err);font-size:12.5px;margin-left:4px;font-weight:400}
input[type=text],input[type=tel],select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-height:44px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lavink);box-shadow:0 0 0 3px var(--lav50)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
.msg{font-size:13px;color:var(--err);min-height:1.4em}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--body);font-weight:400;min-height:44px;cursor:pointer}
.agree input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--plum);flex:none}
.agree a{min-height:0;display:inline}
.ok{border:1.5px solid var(--lav);border-radius:8px;padding:24px;display:grid;gap:10px;max-width:560px;background:var(--paper);margin-top:20px}
.send-err{font-size:14px;color:var(--err)}

/* 푸터: 판권면 */
footer.site{border-top:1px solid var(--line);margin-top:72px;padding-block:32px 48px;display:grid;gap:10px;font-size:13.5px;color:var(--sub)}
footer.site .colophon{display:grid;gap:2px}
footer.site .colophon b{color:var(--ink);font-size:15px}
footer.site .cols{display:flex;flex-wrap:wrap;gap:4px 24px}
footer.site a{color:var(--sub);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
footer.site a:hover{color:var(--lavink)}
footer.site .web b{color:var(--ink);font-weight:500}

/* 법적 문서 */
.legal{max-width:760px;display:grid;gap:14px;padding-block:48px}
.legal h2{font-size:22px;margin-top:20px}
.legal ul{margin:0;padding-left:1.2em}
.legal p,.legal li{color:var(--body)}
.draft-note{border:1px dashed var(--err);color:var(--err);border-radius:8px;padding:12px 14px;font-size:14px}
.tbd{display:inline-block;font-size:11.5px;color:var(--err);border:1px dashed var(--err);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}


/* ===== 홈 v6(2026-10-10): 위쪽 = 이야기(한 화면 한 메시지), 아래쪽 = 자료 ===== */
:root{--hd:84px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mut{color:var(--sub)}
/* 히어로: 화면을 채우고 아래 SCROLL 표시 */
.hero{min-height:calc(100svh - var(--hd));display:grid;align-content:center;gap:20px;max-width:820px;position:relative;padding-block:40px 96px}
.hero h1{font-size:clamp(32px,6vw,58px);line-height:1.2;font-weight:700}
.hero .sub{font-size:18px}
.hero .btns{align-items:center}
.cue{position:absolute;bottom:28px;left:0;font-size:12px;letter-spacing:.2em;color:var(--sub);display:flex;gap:10px;align-items:center}
.cue i{width:1px;height:36px;background:var(--sub);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
/* 이야기 화면: 큰 문장, 줄 단위로 한 번 나타남(0.6초 안) */
.story{min-height:82svh;display:grid;align-content:center;gap:22px;padding-block:72px;max-width:900px}
.story.short{min-height:56svh}
.story h2{font-size:clamp(32px,6.2vw,64px);line-height:1.2;font-weight:700;letter-spacing:-.035em}
.story h2 .line{display:block}
.story p{font-size:clamp(17px,2vw,21px);max-width:34em}
.story .em{color:var(--lavink)}
.story.center{justify-items:center;text-align:center;margin-inline:auto}
.js .story.rv-on .line{opacity:0;transform:translateY(22px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.js .story.rv-on.in .line{opacity:1;transform:none}
.js .story.rv-on.in .line:nth-child(2){transition-delay:.07s}.js .story.rv-on.in .line:nth-child(3),.js .story.rv-on.in > .line{transition-delay:.14s}
.diff4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:10px;width:100%}
.diff4 div{padding:22px 18px 0 0;display:grid;gap:8px;align-content:start;min-width:0}
.diff4 div+div{padding-left:18px;border-left:1px solid var(--line)}
.diff4 b{font-size:clamp(19px,2.2vw,24px);color:var(--ink);line-height:1.3;font-weight:700}
.diff4 span{font-size:14.5px}
@media (max-width:820px){.diff4{grid-template-columns:1fr 1fr}.diff4 div:nth-child(3){padding-left:0;border-left:0}.diff4 div{padding-bottom:18px}}
/* 검색 화면(휴대폰 목업 — 기기 화면이라 고정색 예외) */
.secw{padding-block:72px 32px;display:grid;gap:14px}
.secw h2{font-size:clamp(28px,4.4vw,44px);line-height:1.25;font-weight:700}
.lead{font-size:17px;max-width:40em}
.search-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.search-wrap .txt{display:grid;gap:18px;min-width:0}
.phone{width:min(360px,100%);margin-inline:auto;border-radius:38px;background:#111;padding:12px;box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.screen{border-radius:28px;background:#fff;color:#222;height:600px;overflow:hidden;display:flex;flex-direction:column;font-size:13.5px}
.sbar{display:flex;justify-content:space-between;padding:10px 20px 4px;font-size:12px;font-weight:700;color:#111}
.q{margin:6px 12px;border:2px solid #2E4A6E;border-radius:22px;padding:9px 14px;display:flex;justify-content:space-between;color:#111;font-weight:500}
.tabsm{display:flex;gap:14px;padding:6px 16px;border-bottom:1px solid #eee;font-size:13px;color:#666}
.tabsm b{color:#111;border-bottom:2px solid #111;padding-bottom:5px}
.res{flex:1;overflow:hidden;background:#F4F5F7;padding:10px;display:grid;gap:8px;align-content:start}
.blk{background:#fff;border-radius:12px;padding:12px 14px;display:grid;gap:4px;animation:rin .45s ease both}
.blk:nth-child(2){animation-delay:.1s}.blk:nth-child(3){animation-delay:.2s}.blk:nth-child(4){animation-delay:.3s}
.blk .lab{font-size:11.5px;color:#666}
.blk .t{font-size:14.5px;font-weight:700;color:#1d3f8a}
.blk .d{font-size:12.5px;color:#4a4a4a;line-height:1.5}
.blk.dim .t{color:#4a4a4a;font-weight:500}
.bkr{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.bkr .ph{width:56px;aspect-ratio:2/3;border-radius:3px;background:#2E4A6E;box-shadow:2px 3px 6px rgba(0,0,0,.2)}
.chip{display:inline-block;font-size:11px;color:#2E4A6E;background:#EEF2F7;border-radius:4px;padding:1px 6px;margin-right:4px}
.empty{background:#fff;border-radius:12px;padding:26px 14px;text-align:center;color:#666;animation:rin .45s ease both}
@keyframes rin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:820px){.search-wrap{grid-template-columns:1fr;gap:28px}.screen{height:540px}}
/* 넘겨 보는 슬라이드 묶음(덱). JS가 켜고 움직임 줄이기가 아닐 때만 .deck-on — 아니면 펼친 목록 */
.decksec{position:relative}
.deck-top,.deck-nav{display:none}
.slides{display:grid;gap:40px;padding-block:8px 32px}
.slide{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-width:0}
.slide .txt{display:grid;gap:16px;min-width:0}
.slide .who{font-size:14px;font-weight:500;color:var(--lavink)}
.slide h3{font-size:clamp(26px,3.8vw,40px);line-height:1.25;font-weight:700}
.slide .desc{font-size:17px;max-width:30em}
.slide .price{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;font-size:inherit;font-weight:400}
.slide .price b{font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.slide .price span{font-size:14px;color:var(--sub)}
.vis{position:relative;min-width:0;display:grid;place-items:center}
.vis img{width:100%;max-height:52svh;object-fit:cover;border-radius:12px;box-shadow:0 30px 60px -30px var(--shade)}
.mock-card{width:min(400px,100%);background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px var(--shade);padding:22px;display:grid;gap:12px}
.mock-card .row{display:flex;gap:12px;align-items:center}.mock-card b{color:var(--ink)}
.mock-card .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--line),var(--lav))}
.mock-card .ln{height:9px;border-radius:5px;background:var(--line)}
.mock-card .hl{border:1.5px solid var(--lavink);background:var(--lav50);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:center}
.mock-card .hl i{font-style:normal;font-size:11px;color:var(--btn-fg);background:var(--lavink);border-radius:4px;padding:2px 6px}
.flow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.doc{width:120px;aspect-ratio:3/4;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px;display:grid;gap:7px;align-content:start;box-shadow:0 20px 40px -24px var(--shade)}
.doc i{height:6px;border-radius:3px;background:var(--line)}
.arrow{font-size:28px;color:var(--lavink)}
.mybook{width:140px;aspect-ratio:2/3;border-radius:2px 7px 7px 2px;background:#2E4A6E;color:#FDFBF6;display:flex;align-items:flex-end;padding:14px;font-weight:700;font-size:18px;transform:perspective(900px) rotateY(-18deg);box-shadow:inset 8px 0 12px -6px rgba(0,0,0,.35),20px 22px 30px -16px var(--shade);position:relative}
.mybook::after{content:"";position:absolute;top:4px;bottom:4px;right:-9px;width:9px;background:repeating-linear-gradient(90deg,#F4F0E7 0 1px,#DCD5C8 1px 2px);transform:skewY(-30deg);transform-origin:left top}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%}
.tags span{font-size:12.5px;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:4px 8px;color:var(--ink)}
/* 7단계 카드 */
.proc .slide{grid-template-columns:1fr;max-width:820px}
.proc .deck-on .slide{grid-template-columns:240px 1fr;gap:40px;align-items:stretch;max-width:none}
.rail{list-style:none;margin:0;padding:0;display:grid;align-content:center;gap:2px;border-left:2px solid var(--line)}
.rail li{padding:7px 0 7px 18px;font-size:14.5px;color:var(--sub);position:relative}
.rail li.done{color:var(--body)}.rail li.cur{color:var(--ink);font-weight:700}
.rail li.cur::before,.rail li.done::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--ink)}
.rail li span{font-family:var(--lat);font-style:italic;color:var(--lavink);margin-right:8px}
.stepcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:36px;display:grid;gap:18px;align-content:center;box-shadow:0 30px 60px -36px var(--shade);min-width:0}
.stepcard .big{font-family:var(--lat);font-style:italic;font-size:72px;line-height:.8;color:var(--lavink)}
.stepcard h3{font-size:clamp(24px,3.4vw,34px)}
.who2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.who2 div{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:4px}
.who2 b{font-size:12.5px;color:var(--lavink)}
.when{font-size:14px;color:var(--sub)}.when b{color:var(--ink)}
.stepcard.final{background:var(--final-bg);color:var(--final-fg);border-color:var(--final-bg)}
.stepcard.final h3,.stepcard.final .big{color:var(--final-fg)}
.stepcard.final .btn.pri{background:var(--final-btn);color:var(--final-btn-fg);border-color:var(--final-btn)}
.proc .slide .rail{display:none}
/* 덱 모드 */
.deck-on .deck-track{height:calc(var(--n) * 85svh + 15svh)}
.deck-on .stage{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.deck-on .deck-top{display:flex;align-items:center;gap:14px;padding-top:14px}
.deck-on .deck-nav{display:flex;align-items:center;gap:10px;padding-bottom:14px}
.deck-on .slides{display:block;position:relative;padding:0}
.deck-on .slide{position:absolute;inset:0;opacity:0;transform:translateY(40px);pointer-events:none;visibility:hidden;transition:opacity .25s ease,transform .35s ease,visibility 0s linear .35s}
.deck-on .slide.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .45s ease .1s,transform .55s cubic-bezier(.2,.7,.2,1) .1s}
.deck-on .slide.past{transform:translateY(-40px)}
.proc .deck-on .slide .rail{display:grid}
.count{font-family:var(--lat);font-style:italic;font-size:22px;color:var(--lavink);min-width:64px}
.dbar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.dbar i{display:block;height:100%;width:0;background:var(--ink);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.dots{display:flex;gap:0;flex:1;flex-wrap:wrap}
.dots button{width:28px;height:44px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.dots button::before{content:"";width:10px;height:10px;border-radius:5px;background:var(--line);transition:width .3s}
.dots button[aria-current="true"]::before{background:var(--ink);width:24px}
.navbtn{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:18px;flex:none}
.hint{font-size:12.5px;color:var(--sub)}
@media (max-width:820px){
  .slide,.proc .deck-on .slide{grid-template-columns:1fr;gap:18px}
  .vis{order:-1}.vis img{max-height:28svh}
  .slide h3{font-size:25px}.slide .desc{font-size:15.5px}.slide .txt{gap:10px}.slide .price b{font-size:18px}
  .proc .slide{grid-template-columns:1fr;gap:14px}.stepcard{padding:24px;gap:14px}.who2{grid-template-columns:1fr}.stepcard .big{font-size:52px}
  .hint{display:none}
  .deck-on .deck-track{height:calc(var(--n) * 90svh + 10svh)}
  .proc .deck-on .slide .rail{display:none}
  .deck-on .vis{max-height:24svh;overflow:hidden}.deck-on .vis img{max-height:24svh}
  .deck-on .mock-card{padding:14px;gap:8px}.deck-on .mock-card .ln:nth-of-type(n+3){display:none}
  .deck-on .flow{transform:scale(.72);transform-origin:center}
}
@media (max-width:380px),(max-height:700px){.deck-on .slide .desc{font-size:14.5px;line-height:1.6}.deck-on .slide h3{font-size:22px}.deck-on .who2 div{padding:10px 12px}.deck-on .stepcard{padding:18px}}
/* 구분선 */
.divider{border-top:1px solid var(--ink);margin-top:72px;padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:end}
.divider > div{display:grid;gap:6px}
.divider h2{font-size:clamp(26px,3.6vw,38px);font-weight:700}
.divider nav{display:flex;gap:6px;flex-wrap:wrap}
.divider nav a{font-size:14px;border:1px solid var(--line);border-radius:6px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);background:var(--paper)}
.divider + section.s{border-top:0}
/* 가격 카드(v6) */
.pc .for{font-size:13px;color:var(--lavink);font-weight:500}
.pc.rec{border:1.5px solid var(--lavink)}
.pc ul{margin:0;padding-left:1.1em;font-size:14px;display:grid;gap:3px}
/* 표지 파일이 이미 3D로 처리된 책(투명 PNG) */
.cv3d{display:block;max-width:160px;width:calc(100% - 10px)}
.cv3d img{display:block;width:100%;height:auto;aspect-ratio:152/228;object-fit:contain}
/* 이야기(잡지형) */
.mag{display:grid;grid-template-columns:1.25fr 1fr;gap:28px}
.feat,.card{display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit;min-width:0}
.feat .im,.card .im{display:block;overflow:hidden;border-radius:12px;background:var(--paper2)}
.feat img,.card img{width:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.feat img{aspect-ratio:4/3}.card img{aspect-ratio:16/10}
.feat:hover img{transform:scale(1.04)}
.feat:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.kick{font-size:12.5px;font-weight:500;color:var(--lavink);display:flex;gap:10px;flex-wrap:wrap}
.kick span{color:var(--sub);font-weight:400}
.feat h3{font-size:clamp(22px,2.8vw,30px);line-height:1.35}
.card h3{font-size:17px;line-height:1.45}
.feat p{font-size:15.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.more{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;border-top:1px solid var(--line);padding-top:24px}
.row-card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.row-card img{width:120px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.row-card h4{font-size:16px;line-height:1.45;color:var(--ink);margin:4px 0 0}
.soon .im img,.row-card.soon img{filter:saturate(.85)}
.slist{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
.slist .feat h3{font-size:19px}.slist .feat img{aspect-ratio:16/10}
@media (max-width:900px){.mag{grid-template-columns:1fr}.more{grid-template-columns:1fr}.slist{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.grid2{grid-template-columns:1fr}.slist{grid-template-columns:1fr}}
/* 이야기 글(/stories/글주소) */
.readbar{position:fixed;left:0;top:0;height:3px;width:0;background:var(--lavink);z-index:35}
.art{max-width:720px;margin-inline:auto;padding-top:40px;display:grid;gap:26px}
.art h1{font-size:clamp(28px,5vw,40px);line-height:1.3}
.art .meta{font-size:13.5px;color:var(--sub);display:flex;gap:6px 10px;flex-wrap:wrap}
.art .heroimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.answer{border-left:4px solid var(--lavink);background:var(--lav50);border-radius:0 10px 10px 0;padding:18px 20px;display:grid;gap:6px}
.answer b{font-size:12.5px;color:var(--lavink);letter-spacing:.06em}
.answer p{font-size:17px;color:var(--ink);line-height:1.75}
.toc{border:1px solid var(--line);border-radius:10px;padding:16px 20px;font-size:14.5px}
.toc b{color:var(--ink)}
.toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:0}
.toc a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}.toc a:hover{text-decoration:underline}
.art h2{font-size:24px;line-height:1.4;padding-top:10px;scroll-margin-top:96px}
.art p.b{font-size:17px;line-height:1.9}
.steps7{display:grid;gap:12px;counter-reset:s}
.steps7 > div{display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
.steps7 > div::before{counter-increment:s;content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);display:grid;place-items:center;font-weight:700}
.steps7 h3{font-size:16.5px}.steps7 p{font-size:15px}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:480px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.tbl th{color:var(--ink);background:var(--paper2);font-weight:600}
.tip{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-size:15px;display:grid;gap:4px}
.tip b{color:var(--ink)}
.cta-box{background:var(--final-bg);color:var(--final-fg);border-radius:14px;padding:26px;display:grid;gap:12px}
.cta-box h3{color:var(--final-fg);font-size:20px}
.cta-box .btn.pri{background:var(--final-btn);color:var(--final-btn-fg);border-color:var(--final-btn);justify-self:start}
.author{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:24px}
.author img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 18%;display:block}
.author b{color:var(--ink)}
.src{font-size:13px;color:var(--sub)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cue{display:none}}

/* ===== deulmok.com 실사이트 전용 레이어(2026-10-09 출판사 전용 개편) =====
   레이아웃·부품(토큰, 헤더, 버튼, 섹션, 폼, 푸터)은 wireframe.html 의 <style>에 있다. 여기는 공개본에만 붙는 움직임과 상태. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
/* 헤더: 스크롤하면 그림자를 조금 진하게 */
header.site .hd-pill{transition:box-shadow .4s,background .4s}
header.site.sc .hd-pill{box-shadow:0 0 0 1px var(--line),0 10px 30px var(--shade)}
/* 등장 모션: 흐림 → 선명(현재 디자인과 같은 움직임). JS가 켜져 있을 때만 */
html.js .rv{opacity:0;transform:translateY(32px);filter:blur(14px);transition:opacity .9s ease-out,transform .9s ease-out,filter .9s ease-out}
html.js .rv.in{opacity:1;transform:none;filter:none}
/* 히어로 줄 등장: 한 번, 0.6초 안 */
.hero>*:not(.cue){animation:dm-up .45s cubic-bezier(.22,1,.36,1) both}
.hero>:nth-child(2){animation-delay:.05s}.hero>:nth-child(3){animation-delay:.1s}.hero>:nth-child(4){animation-delay:.15s}
@keyframes dm-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;filter:none;transition:none}
  .hero>*{animation:none}
}