/* ── 밑그림(mitgeurim) v5 — 다크 잉크+연필 편집 문법 (2026-07-07 다크 확정) ──
   obys 뼈대(오프셋 리스트·hover 프리뷰) + nofail 콘텐츠 설계(문제:해결 쌍·서사)
   금지: 알약 뱃지 · 그라데이션 강조 · 알약 버튼 2개 · 부유 카드 · 영문 라벨 남발 · 대형 Pretendard */

:root{
  --paper:#0D0D0C;
  --paper2:#151514;
  --ink:#F2F1EC;
  --mut:rgba(242,241,236,.62);
  --faint:rgba(242,241,236,.42);
  --line:rgba(242,241,236,.16);
  --red:#FF4D33;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 페이지 간 전환 — View Transitions API (SPA 없이 부드러운 이동. 미지원 브라우저는 기존 하드 로드) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease-out both}
::view-transition-new(root){animation:vt-in .34s ease-out both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
/* 네비는 두 페이지 공통 요소라 전환 중 고정 (끊김 없이 이어지는 핵심) */
.nav{view-transition-name:site-nav}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(site-nav),::view-transition-new(site-nav){animation:none}
}
body{
  font-family:'Pretendard Variable',sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--ink);color:var(--paper)}

.lat{font-family:'Zodiak',serif;font-style:normal;font-weight:400}

.wrap{max-width:1240px;margin:0 auto;padding:0 4vw;width:100%}

/* 그레인 */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:60;opacity:.09;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>')}

/* 커서 — 이동은 JS transform, 크기 변화는 ::before scale (레이아웃 속성 애니메이션 금지) */
#cur{position:fixed;z-index:70;left:0;top:0;width:0;height:0;pointer-events:none;transform:translate3d(-100px,-100px,0)}
#cur::before{content:'';position:absolute;left:-23px;top:-23px;width:46px;height:46px;border-radius:50%;background:var(--ink);transform:scale(.2174);transition:transform .2s;mix-blend-mode:difference}
#cur.big::before{transform:scale(1)}
@media(hover:none){#cur{display:none}}
@media(hover:hover){body.hascur,body.hascur a{cursor:none}}

/* 손그림 SVG 공통 (스크롤 시 그려짐) */
.draw path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.draw.on path{stroke-dashoffset:0}
.noanim .draw path{stroke-dashoffset:0;transition:none}
@media(prefers-reduced-motion:reduce){.draw path{stroke-dashoffset:0!important;transition:none}}

/* ── 네비 ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 4vw;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(13,13,12,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.wordmark{position:relative;display:inline-block;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.wordmark svg{position:absolute;left:-2%;bottom:-7px;width:104%;height:10px}
.wordmark small{font-family:'Zodiak',serif;font-style:normal;font-weight:400;font-size:.7rem;color:var(--faint);margin-left:9px}
.nav .links{display:flex;gap:26px;font-size:.88rem;font-weight:500;color:var(--mut)}
.nav .links a:hover{color:var(--ink)}
.cta{position:relative;display:inline-block;font-weight:700;font-size:.9rem;padding:9px 16px}
.cta svg{position:absolute;inset:-6px -10px;width:calc(100% + 20px);height:calc(100% + 12px);pointer-events:none}

/* ── 히어로 ── */
.hero-intro{padding:17vh 4vw 5vh;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hero-intro h1{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.65;font-weight:600;max-width:560px;letter-spacing:-.005em}
.hero-intro h1 .big{display:block;font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px}
.hero-intro .u{position:relative;white-space:nowrap}
.hero-intro .u svg{position:absolute;left:-1%;bottom:-4px;width:102%;height:12px}
.hero-intro .cnt{font-size:.72rem;letter-spacing:.14em;color:var(--faint);font-weight:600;white-space:nowrap;text-align:right;line-height:1.9}

.worklist{border-top:1px solid var(--line)}
.wl{display:block;border-bottom:1px solid var(--line);padding:3vh 4vw;position:relative}
.wl .row{display:flex;align-items:center;gap:2.2vw}
.wl .ix{font-size:.72rem;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.wl .ti{font-family:'Zodiak',serif;font-weight:400;line-height:1.05;font-size:clamp(2.4rem,6.2vw,5.8rem);letter-spacing:-.01em;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.wl .kr{font-size:.88rem;font-weight:400;color:var(--faint)}
@media(hover:hover){.wl:hover .ti{transform:translateX(1.6vw)}}
.thumb{width:clamp(80px,9vw,128px);aspect-ratio:16/11;object-fit:cover;border:3px solid #1E1E1C;box-shadow:0 2px 10px rgba(20,20,18,.18);flex-shrink:0}
.t1{transform:rotate(-3.2deg)}.t2{transform:rotate(2.1deg)}.t3{transform:rotate(-1.6deg)}
.wl .me{margin-left:auto;text-align:right;font-size:.75rem;color:var(--faint);line-height:1.65;white-space:nowrap}
.wl.off1 .row{padding-left:8vw}
.wl.off3 .row{padding-left:15vw}
.wl.last .ti{font-size:clamp(1.8rem,4.4vw,4rem)}
.hero-foot{display:flex;justify-content:space-between;gap:20px;padding:3.5vh 4vw 6vh;font-size:.78rem;color:var(--faint)}
.hero-foot b{color:var(--ink);font-weight:700}
/* 히어로 배경 — 수렴 구도선 필드 (콘텐츠 뒤) */
#top{position:relative}
#hero-field{position:absolute;inset:0;z-index:0;pointer-events:none}
#top>.hero-intro,#top>.worklist,#top>.hero-foot{position:relative;z-index:1}

/* hover 프리뷰 — 바깥(#pv)은 JS transform 이동 전용, 안쪽(.pv-in)이 등장 트랜지션 담당 (transform 충돌 분리) */
#pv{position:fixed;z-index:40;left:0;top:0;width:0;height:0;pointer-events:none;transform:translate3d(-100px,-100px,0)}
#pv .pv-in{position:absolute;left:0;top:0;width:min(30vw,430px);aspect-ratio:16/10;overflow:hidden;opacity:0;transform:translate(-50%,-56%) rotate(-1.2deg) scale(.94);transition:opacity .25s,transform .25s;border:4px solid #1E1E1C;box-shadow:0 10px 40px rgba(20,20,18,.25)}
#pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
#pv img.on{opacity:1}
#pv.show .pv-in{opacity:1;transform:translate(-50%,-56%) rotate(-1.2deg) scale(1)}

/* ── 섹션 공통 ── */
.section{padding:14vh 0}
.shead{margin-bottom:8vh;display:flex;align-items:baseline;gap:18px}
.shead .no{font-size:.78rem;color:var(--red);font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.shead h2{font-weight:700;font-size:clamp(1.02rem,1.5vw,1.28rem);letter-spacing:-.005em;line-height:1.55;max-width:560px}
.shead h2 .big{display:block;font-weight:400;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:12px}
.shead .sub{margin-left:auto;font-size:.9rem;color:var(--mut);max-width:340px;text-align:right;align-self:flex-end}

/* ── 문제:해결 (교정 부호) ── */
.fix-row{display:grid;grid-template-columns:1.25fr 1fr;gap:5vw;padding:6.5vh 0;border-top:1px solid var(--line);align-items:center}
.fix-row:last-child{border-bottom:1px solid var(--line)}
.fix-row .pair{font-weight:800;font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.45;letter-spacing:-.02em}
.fix-row .pair .no{display:block;font-family:'Pretendard Variable';font-size:.72rem;font-weight:600;color:var(--faint);letter-spacing:.1em;margin-bottom:14px}
.strike{position:relative;white-space:nowrap;color:var(--faint)}
.strike svg{position:absolute;left:-2%;top:54%;width:104%;height:10px}
.fixu{position:relative;white-space:nowrap}
.fixu svg{position:absolute;left:-1%;bottom:-3px;width:102%;height:10px}
.fix-row .body p{color:var(--mut);font-size:1rem;max-width:460px}
.fix-row .body p b{color:var(--ink);font-weight:700}
.fix-row .body .how{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(20,20,18,.22);font-size:.95rem;color:var(--ink)}
.fix-row:nth-child(even) .pair{padding-left:6vw}

/* ── 방식 ── */
.way{background:var(--paper2)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}
.pcard{border-top:2px solid var(--ink);padding-top:22px}
.pcard .pn{font-size:.72rem;color:var(--faint);font-weight:600;letter-spacing:.1em;margin-bottom:14px}
.pcard h3{font-weight:800;font-size:1.18rem;margin-bottom:12px;letter-spacing:-.015em}
.pcard p{color:var(--mut);font-size:.95rem}
.story{margin-top:9vh;padding:34px 38px;border:1.5px solid var(--ink);position:relative;max-width:760px}
.story .tape{position:absolute;top:-12px;left:34px;width:74px;height:22px;background:rgba(255,77,51,.22);transform:rotate(-2deg)}
.story p{font-size:1.02rem;line-height:1.75}
.story p b{font-weight:800}
.story .who{margin-top:16px;font-size:.82rem;color:var(--faint)}

/* ── 과정 ── */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:110px 1fr 1.4fr;gap:3vw;padding:3.2vh 0;border-bottom:1px solid var(--line);align-items:baseline}
.step .n{font-size:.78rem;color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.step h3{font-weight:800;font-size:1.12rem;letter-spacing:-.015em}
.step p{color:var(--mut);font-size:.93rem}

/* ── 작업 ── */
.reel{margin:0 auto 12vh;width:min(46vw,600px);position:relative}
.reel .cap{position:absolute;top:-26px;left:0;font-size:.72rem;letter-spacing:.14em;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:8px}
.reel .cap i{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}
.reel .frame{overflow:hidden;aspect-ratio:16/10;background:#000;border:4px solid #fff;box-shadow:0 12px 44px rgba(20,20,18,.22)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.pf{display:grid;grid-template-columns:1.35fr 1fr;gap:5vw;align-items:center;padding:7vh 0;border-top:1px solid var(--line)}
.pf:last-of-type{border-bottom:1px solid var(--line)}
.pf .shot{border:4px solid #1E1E1C;box-shadow:0 8px 30px rgba(20,20,18,.16)}
.pf:nth-of-type(odd) .shot{transform:rotate(-1.1deg)}
.pf:nth-of-type(even) .shot{transform:rotate(.9deg)}
.pf .ix{font-size:.72rem;color:var(--faint);font-weight:600;margin-bottom:16px;letter-spacing:.1em}
.pf h3{font-family:'Zodiak',serif;font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.01em;margin-bottom:6px}
.pf .cat{font-size:.85rem;color:var(--faint);margin-bottom:16px;display:block}
.pf .desc{color:var(--mut);max-width:400px;font-size:.98rem}
.pf .meta{margin-top:20px;padding-top:14px;border-top:1px dashed rgba(20,20,18,.22);font-size:.85rem;color:var(--faint)}
.pf:nth-of-type(even) .shot{order:2}

/* ── 가격 ── */
.plans{border-bottom:1px solid var(--line)}
.plan{display:grid;grid-template-columns:1.1fr 1.5fr .9fr;gap:4vw;padding:5.5vh 0;border-top:1px solid var(--line);align-items:start}
.plan h3{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;position:relative;display:inline-block}
.plan h3 svg{position:absolute;inset:-10px -16px;width:calc(100% + 32px);height:calc(100% + 20px);pointer-events:none}
.plan .term{margin-top:10px;color:var(--faint);font-size:.88rem}
.plan .rec{font-size:.72rem;color:var(--red);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:8px}
.plan ul li{list-style:none;color:var(--mut);font-size:.95rem;padding:6px 0;border-bottom:1px dashed rgba(20,20,18,.14)}
.plan ul li:last-child{border-bottom:none}
.plan .side{text-align:right}
.plan .price{font-weight:800;font-size:1.5rem;margin-bottom:18px;letter-spacing:-.01em}
.plan .price .ph{color:var(--faint)}
.ul{display:inline-block;font-weight:700;font-size:.98rem;border-bottom:2px solid var(--ink);padding-bottom:4px;transition:opacity .2s}
.ul:hover{opacity:.6}
.price-note{margin-top:26px;font-size:.84rem;color:var(--faint)}

/* ── FAQ ── */
.faq{max-width:780px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:700;font-size:1rem}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{font-weight:400;font-size:1.25rem;color:var(--faint);transition:transform .25s;flex-shrink:0}
.qa[open] .ic{transform:rotate(45deg)}
.qa .a{padding:0 4px 24px;color:var(--mut);font-size:.95rem;max-width:640px}

/* ── CTA ── */
.final{padding:18vh 0;background:var(--paper2);text-align:left}
.final h2{font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.005em;line-height:1.6}
.final h2 .big{display:block;font-weight:400;font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:16px}
.final h2 .lat{letter-spacing:0}
.final p{margin-top:22px;color:var(--mut);max-width:440px}
.final .cta{margin-top:38px;font-size:1.05rem;padding:12px 24px}
.final .price-note{margin-top:30px}

/* ── 문의 폼 (2026-07-23) ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;margin-top:7vh;align-items:start}
.ch{font-weight:800;font-size:1.05rem;margin-bottom:14px;letter-spacing:-.01em}
.contact-grid p{color:var(--mut)}
.cform{display:flex;flex-direction:column;gap:20px}
.cform label{display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--mut);font-weight:600;letter-spacing:.02em}
.cform input[type=text],.cform textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-size:.98rem;padding:10px 2px;border-radius:0;transition:border-color .2s}
.cform input[type=text]:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--ink)}
.cform textarea{resize:vertical;line-height:1.6}
.cform ::placeholder{color:var(--faint)}
.cform label.agree{flex-direction:row;align-items:center;gap:10px;font-weight:400;letter-spacing:0}
.agree input{accent-color:var(--red);width:15px;height:15px;flex-shrink:0}
.pv-link{border-bottom:1px solid var(--faint);color:var(--mut)}
.pv-link:hover{color:var(--ink)}
.submit-ul{align-self:flex-start;background:none;border:0;border-bottom:2px solid var(--ink);padding:0 0 4px;color:var(--ink);font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;transition:opacity .2s;margin-top:4px}
@media(hover:hover){.submit-ul:hover{opacity:.6}}
.submit-ul:disabled{opacity:.4;cursor:default}
.hp{position:absolute;left:-9999px;opacity:0}
.form-msg{font-size:.88rem;color:var(--mut);min-height:1.2em;margin:0}
.form-msg.ok{color:var(--ink)}
.form-msg.err{color:var(--red)}

/* ── 푸터 ── */
footer{padding:8vh 0 4vh;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:4vw;margin-bottom:7vh}
.foot-brand{font-weight:800;font-size:1.05rem;margin-bottom:12px}
.foot-grid p{color:var(--faint);font-size:.9rem}
.foot-col h3{font-size:.72rem;letter-spacing:.14em;font-weight:600;color:var(--faint);margin-bottom:14px}
.foot-col a{display:block;color:var(--mut);font-size:.92rem;padding:4px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-size:.8rem;color:var(--faint)}
.ph-note{color:var(--faint);font-size:.85em}

/* ── reveal ── */
.lm{overflow:hidden}.lm>*{display:inline-block;transform:translateY(115%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.in .lm>*,.noanim .lm>*{transform:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.19,1,.22,1)}
.rv.on{opacity:1;transform:none}
.noanim .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.lm>*{transform:none;transition:none}}

/* ── 모바일 ── */
@media(max-width:820px){
  .nav .links{display:none}
  .hero-intro{flex-direction:column;align-items:flex-start;padding-top:14vh}
  .hero-intro .cnt{text-align:left}
  .wl.off1 .row,.wl.off3 .row{padding-left:0}
  .wl .row{flex-wrap:wrap;gap:14px}
  .wl .me{margin-left:0;text-align:left;white-space:normal;width:100%}
  #pv{display:none}
  .hero-foot span:last-child{display:none}
  .shead{flex-wrap:wrap}
  .shead .sub{margin-left:0;text-align:left;max-width:none}
  .fix-row{grid-template-columns:1fr;gap:22px;padding:5vh 0}
  .fix-row:nth-child(even) .pair{padding-left:0}
  .strike,.fixu{white-space:normal}
  .promise-grid{grid-template-columns:1fr;gap:30px}
  .story{padding:26px}
  .step{grid-template-columns:64px 1fr;gap:14px}
  .step p{grid-column:2}
  .reel{width:88vw}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .pf{grid-template-columns:1fr;gap:24px;padding:5vh 0}
  .pf:nth-of-type(even) .shot{order:0}
  .plan{grid-template-columns:1fr;gap:20px;padding:4.5vh 0}
  .plan .side{text-align:left}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .section{padding:10vh 0}
}

/* ── 마퀴 (FAQ→CTA 브릿지) ── */
.mq{overflow:hidden;border-top:1px solid var(--line);background:var(--paper2)}
.mq-track{display:flex;width:max-content;animation:mqx 32s linear infinite}
.mq-set{display:flex;align-items:center;flex-shrink:0}
.mi{display:inline-flex;align-items:center;gap:2.2vw;padding:3.4vh 1.1vw 3.4vh 2.2vw;font-family:'Zodiak',serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1;letter-spacing:-.01em;color:var(--mut);white-space:nowrap}
.mi svg{width:clamp(28px,3vw,44px);height:auto;flex-shrink:0}
@keyframes mqx{to{transform:translateX(-50%)}}
html.noanim .mq-track{animation:none}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}