:root{
  color-scheme:light;
  --black:#000;--ink:#111;--body:#2B2B2B;--sub:#595959;--line:#E4E4E4;--line2:#CFCFCF;
  --bg:#FFFFFF;--soft:#F6F6F6;--red:#FF3D00;--red-tint:#FFF3EE;--white:#fff;
  --dk-sub:#B5B5B5;--dk-line:#2A2A2A;--dk-card:#111111;
  --kr:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --en:"Inter","Pretendard Variable","Pretendard","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--kr);font-weight:500;font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;letter-spacing:-0.01em}
a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-0.03em;color:var(--black)}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.en{font-family:var(--en)}
.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--kr);font-weight:700;font-size:17px;letter-spacing:-0.01em;text-decoration:none;padding:17px 28px;background:var(--red);color:var(--white);border:1px solid var(--red);cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{background:var(--black);border-color:var(--black)}
.btn.line{background:transparent;color:var(--black);border-color:var(--line2)}
.btn.line:hover{border-color:var(--black)}
.btn.dark{background:var(--black);border-color:var(--black)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.sm{font-size:15px;padding:10px 18px}
.btn .ar{width:18px;height:18px;stroke-width:2;transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:40px;height:72px}
.nav img{height:22px;width:auto;display:block}
.nav ul{display:flex;gap:34px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{text-decoration:none;font-size:16px;font-weight:600;color:var(--body)}
.nav ul a:hover{color:var(--red)}
@media (max-width:900px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* section shell */
.sec{padding-block:clamp(80px,9vw,120px)}
.sec.soft{background:var(--soft)}
.sec.dk{background:var(--black);color:var(--white)}
.sec.dk h2,.sec.dk h3{color:var(--white)}
.head{max-width:760px}
.head.center{margin-inline:auto;text-align:center}
.lab{display:inline-flex;align-items:center;gap:10px;font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--sub);margin-bottom:20px}
.lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.dk .lab{color:var(--dk-sub)}
.h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.35}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--body);margin-top:20px;line-height:1.8}
.dk .lead{color:var(--dk-sub)}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(56px,7vw,100px)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center}
.hero .kick{border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--red);padding:7px 14px;background:var(--red-tint);margin-bottom:26px}
.hero h1{font-size:clamp(36px,4.4vw,54px);font-weight:700;line-height:1.3;letter-spacing:-0.04em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .sub{font-size:clamp(17px,1.5vw,19px);color:var(--body);margin-top:26px;line-height:1.85;max-width:32em}
.hero .act{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
@media (max-width:560px){.hero .act .btn{flex:1 1 100%}}
.hnote{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--sub)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.trust div{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:600;color:var(--sub);padding-right:16px}
.trust div+div{padding-left:20px;border-left:1px solid var(--line)}
.trust b{font-family:var(--en);font-size:26px;font-weight:700;color:var(--black);letter-spacing:-0.03em;line-height:1.2}
.trust b.kr{font-family:var(--kr);font-size:22px;line-height:1.35}
@media (max-width:420px){.trust div{padding-right:8px}.trust div+div{padding-left:12px}.trust b{font-size:22px}.trust b.kr{font-size:18px;line-height:1.5}.trust div{font-size:13px}}
.trust .ico{width:22px;height:22px;color:var(--red)}

/* hero visual: patient screen */
.pv{position:relative;padding:32px 28px 28px 28px}
.pv::before{content:"";position:absolute;inset:0 0 0 56px;background:var(--soft);border-radius:32px}
.phone{position:relative;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.04)}
.phone .cap{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--sub);margin-bottom:14px}
.phone .cap span:last-child{padding:3px 10px;border-radius:999px;background:var(--soft)}
.sbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:999px;border:1.5px solid var(--black);font-size:16px;font-weight:700}
.sbar .ico{width:20px;height:20px;stroke-width:2}
.aians{margin-top:14px;padding:16px 18px;border-radius:18px;background:var(--soft);font-size:15px;line-height:1.7;color:var(--body)}
.aians .who{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--black);margin-bottom:6px}
.aians .who .ico{width:16px;height:16px;color:var(--red);stroke-width:2}
.aians b{color:var(--black);background:linear-gradient(transparent 60%,rgba(255,61,0,.22) 60%)}
.rs{margin-top:10px;display:grid;gap:10px}
.rs div{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line)}
.rs div.me{border-color:var(--red);background:var(--red-tint)}
.rs .th{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--black)}
.rs .me .th{background:var(--white);color:var(--red)}
.rs .th .ico{width:22px;height:22px}
.rs p{font-size:15px;font-weight:700;line-height:1.45;color:var(--black)}
.rs p span{display:block;font-size:13px;font-weight:500;color:var(--sub)}
.rs .bk{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:var(--white);background:var(--black);padding:6px 12px;border-radius:999px}
.chips3{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;position:relative}
.flt{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(0,0,0,.25);font-size:14px;font-weight:700;white-space:nowrap}
.flt i{width:22px;height:22px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:var(--white)}
.flt i .ico{width:13px;height:13px;stroke-width:3}
@media (max-width:560px){.pv{padding:18px 0 18px}.pv::before{inset:0 0 0 24px}.flt{font-size:13px}}
@media (max-width:920px){.hero .grid{grid-template-columns:1fr}}

/* ---------- COVER (photo hero) ---------- */
.cover{position:relative;overflow:hidden;background:var(--black);color:var(--white);min-height:calc(100svh - 72px);display:flex;align-items:center;padding-block:96px}
.cover .cbg{position:absolute;inset:0}
.cover .cbg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:55% 45%;display:block;transform:scale(1.02)}
.cover .cbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.45) 100%),rgba(0,0,0,.2)}
.cover .wrap{position:relative;z-index:1;width:100%}
.cover h1{color:var(--white);font-size:clamp(40px,6.2vw,84px);font-weight:700;line-height:1.24;letter-spacing:-0.045em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cover h1 em{font-style:normal;color:var(--red)}
.cover .cue{position:absolute;z-index:1;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none}
.cover .cue .ico{width:22px;height:22px;stroke-width:2;animation:cue 1.8s ease-in-out infinite}
.cover .cue:hover{color:var(--white)}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:900px){.cover{min-height:calc(100svh - 72px - 78px)}}
@media (max-width:640px){.cover{align-items:flex-end;padding-block:72px 96px}.cover .cbg img{object-position:58% 50%}.cover .cbg::after{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.45) 100%)}}
/* cover → hero dissolve (--p: 0→1 set by js/main.js): the pinned photo fades out to the page
   background while the hero, which has no sheet of its own, fades in over it */
.stage{--p:0;position:relative}
.stage .cover{position:sticky;top:72px;z-index:0;opacity:calc(1 - var(--p) * 1.25)}
.stage .cover .cbg img{transform:scale(calc(1.02 + var(--p) * .06));filter:blur(calc(var(--p) * 6px))}
.stage .cover .wrap{opacity:calc(1 - var(--p) * 2);transform:translateY(calc(var(--p) * -24px))}
.stage .cover .cue{opacity:calc(1 - var(--p) * 3)}
.stage .hero{position:relative;z-index:1}
.stage:not(.on) .hero{pointer-events:none}
.stage .hero .grid{opacity:calc(var(--p) * 1.6 - .45);transform:translateY(calc((1 - var(--p)) * 28px))}
@media (prefers-reduced-motion:reduce){.stage .cover{position:relative;top:0;opacity:1}.stage .cover .cbg img{filter:none}.stage .cover .wrap,.stage .cover .cue,.stage .hero .grid{opacity:1;transform:none}}

.hero .ht{font-size:clamp(36px,4.4vw,54px);font-weight:700;line-height:1.3;letter-spacing:-0.04em}
.hero .ht em{font-style:normal;color:var(--red)}
#intro{scroll-margin-top:72px}

/* ---------- CHECK (quiz) ---------- */
.dx{margin-top:52px;display:grid;grid-template-columns:1fr 300px;border-radius:28px;background:var(--white);border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.18)}
.dx.done .dx-q,.dx.done .dx-side{display:none}
.dx-q{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;min-height:440px}
.dx-top{display:flex;align-items:center;gap:18px}
.dx-step{font-family:var(--en);font-size:14px;font-weight:600;color:var(--sub);white-space:nowrap}
.dx-step b{color:var(--black);font-size:18px}
.dx-bar{flex:1;height:4px;border-radius:4px;background:var(--soft);overflow:hidden}
.dx-bar i{display:block;height:100%;width:0;background:var(--red);border-radius:4px;transition:width .45s cubic-bezier(.3,.7,.2,1)}
.dx-stage{margin-top:44px;transition:opacity .2s ease,transform .2s ease}
.dx-stage.out{opacity:0;transform:translateX(-14px)}
.dx-area{display:inline-block;font-size:13.5px;font-weight:700;color:var(--red);padding:4px 12px;border-radius:999px;background:var(--red-tint)}
.dx-stage h3{font-size:clamp(23px,2.5vw,30px);font-weight:700;line-height:1.45;margin-top:16px;max-width:22em}
.dx-hint{margin-top:12px;font-size:15.5px;color:var(--sub);line-height:1.7}
.dx-ans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:36px}
.dx-ans button{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 14px;border-radius:16px;border:1px solid var(--line2);background:var(--white);font-family:var(--kr);font-size:17px;font-weight:700;color:var(--black);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .1s}
.dx-ans button:hover{border-color:var(--black)}
.dx-ans button:active{transform:scale(.98)}
.dx-ans button.on{background:var(--black);border-color:var(--black);color:var(--white)}
.dx-ans .ico{width:20px;height:20px;stroke-width:2.4}
.dx-ans button[data-v="y"] .ico{color:var(--red)}
.dx-ans button.on .ico{color:var(--white)}
.dx-ans .qm{width:20px;text-align:center;font-family:var(--en);font-weight:700;color:var(--sub)}
.dx-ans button.on .qm{color:var(--white)}
.dx-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 0;border:0;background:none;font-family:var(--kr);font-size:14.5px;font-weight:600;color:var(--sub);cursor:pointer}
.dx-back:hover{color:var(--black)}
.dx-back .ico{width:16px;height:16px;stroke-width:2}
.dx-side{background:var(--soft);border-left:1px solid var(--line);padding:clamp(28px,3vw,40px) 28px;display:flex;flex-direction:column}
.dx-side .k,.dx-pri .k{font-size:14px;font-weight:700;color:var(--sub)}
.dx-side ol{list-style:none;margin:16px 0 0;padding:0}
.dx-side li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;color:#9A9A9A;transition:color .2s}
.dx-side li em{font-style:normal;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--white);color:#9A9A9A;white-space:nowrap}
.dx-side li.cur{color:var(--black)}
.dx-side li.cur em{background:var(--black);color:var(--white)}
.dx-side li.y,.dx-side li.n,.dx-side li.u{color:var(--ink)}
.dx-side li.y em{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 1px var(--line2)}
.dx-side li.n em{background:var(--red-tint);color:var(--red)}
.dx-side li.u em{background:#EDEDED;color:var(--body)}
.dx-side p{margin-top:auto;padding-top:24px;font-size:13px;color:var(--sub);line-height:1.6}
/* result */
.dx-r{grid-column:1 / -1;display:grid;grid-template-columns:.9fr 1.1fr;outline:0;animation:dxIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes dxIn{from{opacity:0;transform:translateY(12px)}}
.dx-score{padding:clamp(32px,4vw,52px);background:var(--black);color:var(--white);display:flex;flex-direction:column;align-items:flex-start}
.dx-gauge{position:relative;width:240px;max-width:100%}
.dx-gauge svg{display:block;width:100%;height:auto}
.dx-gauge svg path{transition:stroke-dasharray 1.1s cubic-bezier(.3,.7,.2,1)}
.dx-gauge svg path:first-child{stroke:#2A2A2A}
.dx-gauge .v{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--en)}
.dx-gauge .v b{font-size:56px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.dx-gauge .v span{font-size:18px;font-weight:600;color:var(--dk-sub);margin-left:4px}
.dx-grade{margin-top:28px;font-size:14px;font-weight:700;color:var(--dk-sub)}
.dx-score h3{color:var(--white);font-size:clamp(24px,2.6vw,30px);font-weight:700;margin-top:6px}
.dx-score p{margin-top:14px;font-size:16px;line-height:1.8;color:#CFCFCF}
.dx-pri{padding:clamp(32px,4vw,52px);display:flex;flex-direction:column}
.dx-pri ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:p}
.dx-pri li{counter-increment:p;display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.dx-pri li::before{content:counter(p);grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;background:var(--red);color:var(--white);display:grid;place-items:center;font-family:var(--en);font-size:15px;font-weight:700}
.dx-pri li b{font-size:19px;font-weight:700;color:var(--black);line-height:1.5}
.dx-pri li p{font-size:15.5px;color:var(--body);line-height:1.75;margin-top:4px}
.dx-unk{margin-top:16px;font-size:14.5px;color:var(--sub)}
.dx-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:32px}
.dx-act .btn{flex:1 1 auto}
@media (max-width:920px){.dx{grid-template-columns:1fr}.dx-side{border-left:0;border-top:1px solid var(--line)}.dx-side p{margin-top:12px;padding-top:12px}.dx-r{grid-template-columns:1fr}}
@media (max-width:560px){.dx{border-radius:22px}.dx-q{min-height:0}.dx-stage{margin-top:28px}.dx-ans{grid-template-columns:1fr;padding-top:28px}.dx-ans button{justify-content:flex-start;padding:16px 18px}.dx-side{display:none}.dx-act .btn{width:100%}}

/* ---------- JOURNEY ---------- */
.jr{margin-top:60px}
.jr ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.jr ol::before{content:"";position:absolute;top:32px;left:calc(100%/12);right:calc(100%/12);height:1px;background:var(--line2)}
.jr li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative;padding-inline:6px}
.jr .c{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid var(--line2);color:var(--sub);position:relative;z-index:1}
.jr li.on .c{background:var(--black);border-color:var(--black);color:var(--white)}
.jr .s{font-family:var(--en);font-size:13px;font-weight:600;color:var(--sub)}
.jr .t{font-size:18px;font-weight:700;margin-top:-10px}
.jr .ch{font-size:14px;color:var(--sub);line-height:1.6;min-height:3.2em}
.jr li.on .ch{color:var(--body)}
.brk{display:grid;grid-template-columns:repeat(6,1fr);margin-top:18px}
.brk div{grid-column:2 / 6;border:1.5px solid var(--red);border-top:0;height:16px;border-radius:0 0 14px 14px;margin-inline:calc(50% / 4)}
.brk p{grid-column:2 / 6;text-align:center;font-size:15px;font-weight:700;color:var(--red);margin-top:10px}
@media (max-width:900px){
  .jr ol{grid-template-columns:1fr;gap:0}
  .jr ol::before{top:32px;bottom:32px;left:31px;right:auto;width:1px;height:auto}
  .jr li{display:grid;grid-template-columns:64px 1fr;text-align:left;align-items:center;gap:2px 18px;padding:10px 0}
  .jr .c{grid-row:1 / span 3}
  .jr .t{margin-top:0}
  .jr .ch{min-height:0}
  .brk{display:none}
  .jr li.on .s::after{content:" · 뉴비짓 설계 영역";color:var(--red);font-family:var(--kr);font-weight:700}
}

/* ---------- SERVICE ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.svc article{padding:32px 30px 34px;background:var(--white);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;gap:14px}
.svc .ic{border-radius:16px;width:52px;height:52px;display:grid;place-items:center;background:var(--red-tint);color:var(--red)}
.svc h3{font-size:21px;font-weight:700;margin-top:6px}
.svc p{font-size:16.5px;color:var(--body);line-height:1.8}
.chn{border-radius:20px;margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:24px 30px;background:var(--white);border:1px solid var(--line)}
.chn b{font-size:16px;font-weight:700;white-space:nowrap}
.chn ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px}
.chn li{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;color:var(--body);white-space:nowrap}
.chn .ico{width:20px;height:20px;color:var(--black)}
@media (max-width:980px){.svc{grid-template-columns:1fr 1fr}.chn{grid-template-columns:1fr;gap:14px}}
@media (max-width:640px){.svc{grid-template-columns:1fr}.chn ul{grid-template-columns:1fr 1fr}.svc article{padding:28px 24px 30px}}

/* ---------- COMPARE ---------- */
.cmp-w{margin-top:52px;overflow-x:auto;border-radius:24px;border:1px solid var(--line)}
table.cmp{width:100%;min-width:680px;border-collapse:collapse;background:var(--white)}
.cmp th,.cmp td{text-align:left;padding:22px 26px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:17px}
.cmp thead th{font-size:15px;font-weight:700;color:var(--sub);background:var(--white);padding-block:20px;border-bottom:1px solid var(--black)}
.cmp thead th.nv{background:var(--black);color:var(--white);border-bottom-color:var(--black)}
.cmp thead th.nv img{height:18px;display:block}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th{font-size:16px;font-weight:700;color:var(--black);width:20%;white-space:nowrap}
.cmp td .cell{display:flex;gap:12px;align-items:center}
.cmp td.old{color:var(--sub);width:36%}
.cmp td.old .ico{width:20px;height:20px;color:var(--line2);stroke-width:2}
.cmp td.nv{font-weight:700;color:var(--black);background:#FAFAFA}
.cmp td.nv .ico{width:20px;height:20px;color:var(--red);stroke-width:2.2}

@media (max-width:680px){
  .cmp-w{overflow:visible;border:0;border-radius:0}
  table.cmp{min-width:0;background:none}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto!important}
  .cmp tr{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-bottom:12px}
  .cmp th,.cmp td{border:0;padding:0;white-space:normal}
  .cmp tbody th{font-size:15px;color:var(--sub);margin-bottom:12px}
  .cmp td{font-size:16px;padding:10px 0}
  .cmp td.nv{background:none;border-top:1px solid var(--line)}
  .cmp td::before{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px}
  .cmp td.old::before{content:"일반 마케팅 대행사";color:var(--sub)}
  .cmp td.nv::before{content:"뉴비짓";color:var(--red)}
}

/* ---------- CYCLE ---------- */
.cy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.cy svg{width:100%;max-width:520px;height:auto;display:block;margin-inline:auto}
.cy svg text{font-family:var(--kr)}
.cy dl{margin:36px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.cy dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cy dt{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.cy dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--black)}
.cy dt.r::before{background:var(--red)}
.cy dd{margin:0;font-size:16px;color:var(--body);line-height:1.75}
@media (max-width:920px){.cy{grid-template-columns:1fr}.cy dl div{grid-template-columns:1fr;gap:4px}}

/* ---------- PAIN ---------- */
.pain{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:52px}
.pn{border-radius:24px;border:1px solid var(--line);background:var(--white);padding:30px 32px;display:flex;flex-direction:column;gap:16px}
.pn .q{font-size:21px;font-weight:700;line-height:1.5;color:var(--black);letter-spacing:-0.02em}
.pn .q::before{content:"“";font-family:var(--en);color:var(--red);margin-right:2px}
.pn .q::after{content:"”";font-family:var(--en);color:var(--red);margin-left:2px}
.pn .why{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--sub);line-height:1.7;padding-top:16px;border-top:1px solid var(--line)}
.pn .why b{flex:none;font-size:13px;font-weight:700;color:var(--white);background:#8C8C8C;border-radius:999px;padding:2px 10px;margin-top:2px}
.bridge{margin-top:48px;text-align:center;font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-0.03em;line-height:1.5}
.bridge em{font-style:normal;color:var(--red)}
.bridge .ar2{display:block;margin:0 auto 18px;width:2px;height:40px;background:linear-gradient(var(--line2),var(--red))}
@media (max-width:820px){.pain{grid-template-columns:1fr}.pn{padding:26px 24px}.pn .q{font-size:19px}}

/* ---------- WHY band ---------- */
.plus{margin-top:16px;border-radius:28px;background:var(--black);color:var(--white);padding:30px 34px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.plus .ic{width:56px;height:56px;border-radius:18px;background:var(--red);display:grid;place-items:center}
.plus .ic .ico{width:28px;height:28px;stroke-width:1.8}
.plus h3{color:var(--white);font-size:21px;font-weight:700;line-height:1.45}
.plus p{font-size:15.5px;color:#C9C9C9;margin-top:6px;line-height:1.75}
.plus .st{text-align:right}
.plus .st b{display:block;font-family:var(--en);font-size:40px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.plus .st span{font-size:13.5px;color:#B5B5B5;font-weight:600}
@media (max-width:900px){.plus{grid-template-columns:auto 1fr}.plus .st{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:10px;padding-top:16px;border-top:1px solid #2A2A2A}}
@media (max-width:520px){.plus{padding:26px 22px;grid-template-columns:1fr}}

/* ---------- MID CTA ---------- */
.mid{margin-top:16px;border-radius:24px;background:var(--red);color:var(--white);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mid p{font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-0.02em}
.mid p small{display:block;font-size:15px;font-weight:500;color:#FFE1D6;margin-top:2px}
.mid .btn{background:var(--white);color:var(--black);border-color:var(--white)}
.mid .btn:hover{background:var(--black);color:var(--white);border-color:var(--black)}

/* ---------- COVER copy ---------- */
.cover .ck{display:inline-flex;align-items:center;gap:10px;font-size:clamp(14px,1.3vw,16px);font-weight:600;color:rgba(255,255,255,.88);padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);margin-bottom:28px}
.cover .ck::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.cover .cs{margin-top:28px;font-size:clamp(17px,1.6vw,21px);line-height:1.8;font-weight:500;color:rgba(255,255,255,.86);max-width:34em;text-shadow:0 1px 18px rgba(0,0,0,.4)}
@media (max-width:640px){.cover .cs br{display:none}}

/* ---------- MARQUEE ---------- */
.mq{position:relative;z-index:1;background:var(--red);color:var(--white);overflow:hidden;white-space:nowrap;padding-block:18px}
.mq .track{display:inline-flex;animation:mq 38s linear infinite}
.mq span{font-size:19px;font-weight:700;padding-inline:22px;display:inline-flex;align-items:center;gap:44px}
.mq span::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- SPLIT (sticky title left) ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.split .side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 112px)}
@media (max-width:980px){.split{grid-template-columns:1fr}.split .side{position:static}}

/* ---------- CHANGE rows ---------- */
.rows{border-top:1px solid var(--black)}
.row{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:34px 0;border-bottom:1px solid var(--line)}
.row .ic{width:56px;height:56px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--black)}
.row h3{font-size:22px;font-weight:700;line-height:1.45}
.row p{font-size:16.5px;color:var(--body);line-height:1.85;margin-top:10px}
.bf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;font-size:14.5px;font-weight:700}
.bf .o{color:#9A9A9A;text-decoration:line-through;text-decoration-color:#C8C8C8}
.bf .ico{width:18px;height:18px;color:var(--red);stroke-width:2}
.bf .n{padding:5px 12px;border-radius:999px;background:var(--black);color:var(--white)}
@media (max-width:560px){.row{grid-template-columns:1fr;gap:14px}.row .ic{width:48px;height:48px}}

/* ---------- WHY (index table) ---------- */
.why-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.why-top .head{max-width:540px}
.why-top .lead{margin-top:0;max-width:27em}
.idx{margin-top:56px;border-top:1px solid var(--black)}
.it{display:grid;grid-template-columns:1.1fr 1.4fr .9fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--line);align-items:start;transition:background .25s}
.it:hover{background:linear-gradient(90deg,#EDEDED,transparent)}
.it .t{display:flex;gap:16px;align-items:flex-start}
.it .t .ico{width:28px;height:28px;color:var(--red);margin-top:3px}
.it h3{font-size:23px;font-weight:700;line-height:1.42}
.it p{font-size:16.5px;color:var(--body);line-height:1.85}
.it dl{margin:0;display:grid;gap:8px}
.it dl div{display:grid;grid-template-columns:78px 1fr;gap:10px;font-size:14.5px;font-weight:700;line-height:1.5}
.it dt{font-size:12.5px;color:var(--sub);padding-top:2px}
.it dd{margin:0}
.it .old dd{color:#9A9A9A;text-decoration:line-through;text-decoration-color:#C8C8C8}
.it .new dt{color:var(--red)}
.plus{margin-top:40px}
@media (max-width:980px){.it{grid-template-columns:1fr;gap:16px}.it dl div{grid-template-columns:90px 1fr}}

/* ---------- RESULT (dark) ---------- */
.big{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--dk-line);border-bottom:1px solid var(--dk-line)}
.big>div{padding:36px 28px 38px 0;display:flex;flex-direction:column;gap:6px}
.big>div+div{padding-left:28px;border-left:1px solid var(--dk-line)}
.big .k{font-size:15.5px;font-weight:700;color:var(--white)}
.big .c{font-size:13.5px;color:var(--dk-sub);line-height:1.5}
.big b{font-family:var(--en);font-size:clamp(48px,5.4vw,76px);font-weight:600;letter-spacing:-0.05em;line-height:1;margin-top:auto;padding-top:28px}
.big b small{font-family:var(--kr);font-size:.36em;font-weight:700;margin-left:4px;letter-spacing:0}
.big b .pre{font-family:var(--kr);font-size:.26em;font-weight:700;margin-right:8px;color:var(--dk-sub);letter-spacing:0;vertical-align:.7em}
.big b.or{color:var(--red)}
.bar{height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin-top:18px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);background:var(--red);border-radius:3px}
@media (max-width:980px){.big{grid-template-columns:1fr 1fr}.big>div:nth-child(3){padding-left:0;border-left:0}.big>div:nth-child(-n+2){border-bottom:1px solid var(--dk-line)}}
@media (max-width:520px){.big>div{padding:26px 14px 28px 0}.big>div+div{padding-left:14px}.big>div:nth-child(3){padding-left:0}}
.vhead{display:flex;justify-content:space-between;align-items:center;margin-top:72px;gap:20px}
.vhead h3{font-size:22px;font-weight:700}
.vnav{display:flex;gap:8px}
.vnav button{width:48px;height:48px;border-radius:50%;border:1px solid #3A3A3A;background:transparent;color:var(--white);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.vnav button:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.vnav .ico{width:20px;height:20px;stroke-width:2}
.voices{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;margin-top:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.voices::-webkit-scrollbar{display:none}
.voices figure{scroll-snap-align:start;margin:0;padding:30px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--dk-line);display:flex;flex-direction:column;gap:18px;min-height:280px}
.vt{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--white)}
.vi{width:34px;height:34px;border-radius:50%;background:rgba(255,61,0,.16);color:var(--red);display:grid;place-items:center;flex:none}
.vi .ico{width:18px;height:18px;stroke-width:1.8}
.voices blockquote{margin:0;font-size:17.5px;line-height:1.8;color:#EDEDED;flex:1}
.voices figcaption{font-size:14px;color:var(--dk-sub);padding-top:16px;border-top:1px solid var(--dk-line)}
.mid{margin-top:40px}
.rnote{margin-top:22px;font-size:14px;color:var(--dk-sub)}
@media (max-width:980px){.voices{grid-auto-columns:calc((100% - 16px)/2)}}
@media (max-width:620px){.voices{grid-auto-columns:86%}}

/* ---------- HOW cards ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--black)}
.cards4 article{padding:30px 26px 32px 0;display:flex;flex-direction:column;gap:12px}
.cards4 article+article{padding-left:26px;border-left:1px solid var(--line)}
.cards4 .s2{font-family:var(--en);font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--red)}
.cards4 h3{font-size:19.5px;font-weight:700;line-height:1.45}
.cards4 p{font-size:15.5px;color:var(--body);line-height:1.8}
.cards4 ul{list-style:none;margin:auto 0 0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.cards4 li{font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;border:1px solid var(--line2)}
.chn{margin-top:32px}
@media (max-width:1000px){.cards4{grid-template-columns:1fr 1fr}.cards4 article:nth-child(3){padding-left:0;border-left:0}.cards4 article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:600px){.cards4{grid-template-columns:1fr}.cards4 article,.cards4 article+article{padding:26px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* ---------- PROCESS (photo + timeline) ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,72px);align-items:center}
.ph{margin:0;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{position:absolute;left:16px;right:16px;bottom:16px;padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:var(--white);font-size:14.5px;font-weight:600;line-height:1.5}
@media (max-width:980px){.pgrid{grid-template-columns:1fr}.ph{aspect-ratio:16/10}}
@media (max-width:520px){.ph figcaption{position:static;border-radius:0;background:var(--black)}.ph{aspect-ratio:auto}.ph img{aspect-ratio:4/3}}
.tl{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.tl::before{content:"";position:absolute;top:23px;left:0;right:0;height:1px;background:var(--line2)}
.tl li{position:relative;display:flex;flex-direction:column;gap:12px}
.tl .dot{width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid var(--black);display:grid;place-items:center;font-family:var(--en);font-size:14px;font-weight:600;position:relative;z-index:1}
.tl li:first-child .dot{background:var(--black);color:var(--white)}
.tl h3{font-size:20px;font-weight:700;margin-top:10px}
.tl p{font-size:15.5px;color:var(--body);line-height:1.8}
.gets{border-radius:20px;margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:22px 28px;border:1px solid var(--line);background:var(--soft)}
.gets b{font-size:16px;font-weight:700;margin-right:6px}
.gets span{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--body)}
.gets .ico{width:20px;height:20px;color:var(--red);stroke-width:2.2}
@media (max-width:900px){.tl{grid-template-columns:1fr 1fr;row-gap:40px}.tl::before{display:none}}
@media (max-width:520px){.tl{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--black)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:26px 6px 26px 0;font-size:18.5px;font-weight:700;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qn{font-family:var(--en);color:var(--red);font-weight:600;font-size:15px}
.faq summary .ico{margin-left:auto;width:22px;height:22px;stroke-width:2;transition:transform .2s;color:var(--sub)}
.faq details[open] summary .ico{transform:rotate(45deg);color:var(--black)}
.faq .a{padding:0 40px 28px 40px;font-size:16.5px;color:var(--body);line-height:1.85}
@media (max-width:560px){.faq summary{font-size:16.5px;padding:22px 6px 22px 0}.faq .a{padding:0 0 22px 0;font-size:16px}}

/* ---------- CTA (photo background) ---------- */
.cta{position:relative;overflow:hidden;background:var(--black);color:var(--white);padding-block:clamp(96px,10vw,140px)}
/* photo fills the section; its desk scene stays clear on the left, copy and card sit on the dark right half */
.cta .cbg{position:absolute;inset:0}
.cta .cbg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:18% 50%;display:block}
.cta .cbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.7) 52%,rgba(0,0,0,.82) 100%)}
.cta .grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,88px);row-gap:36px}
.cta .grid>*{grid-column:2}
.cta .lab{color:var(--dk-sub)}
.cta h2{font-size:clamp(32px,4.2vw,54px);font-weight:700;line-height:1.28;color:var(--white)}
.cta .lead{color:#DADADA}
.cta .card{border-radius:24px;background:var(--white);color:var(--ink);padding:34px}
.cta .card h3{font-size:18px;font-weight:700}
.cta .card ol{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.cta .card li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:600;line-height:1.6}
.cta .card li .ico{color:var(--red);margin-top:1px}
.cta .cond{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:20px}
.cta .cond span{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.cta .cond .ico{width:18px;height:18px;color:var(--red);stroke-width:2.4}
.cta .card .btn{width:100%;margin-top:26px}
.cta .alt{margin-top:14px;text-align:center;font-size:15px;color:var(--sub)}
.cta .alt a{text-decoration:none}
.cta .alt a:hover b{color:var(--red)}
.cta .alt b{color:var(--black)}
@media (max-width:920px){
  .cta{padding-top:0}
  .cta .cbg{position:relative;height:62vw;margin-bottom:8px}
  .cta .cbg img{object-position:22% 50%}
  .cta .cbg::after{background:linear-gradient(0deg,var(--black) 0%,rgba(0,0,0,0) 40%)}
  .cta .grid{grid-template-columns:1fr}
  .cta .grid>*{grid-column:auto}
}
@media (max-width:520px){.cta .card{padding:26px 22px}.cta .cond{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{background:var(--black);color:var(--dk-sub);padding-block:52px;font-size:14px;line-height:1.9}
footer .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-end}
footer img{height:21px;width:auto;display:block;margin-bottom:16px}
footer a{text-decoration:none}
footer a:hover{color:var(--white)}

/* mobile bar */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line);gap:12px;align-items:center}
  .mbar span{font-size:14px;font-weight:700;line-height:1.4;flex:1}
  .mbar .btn{border-radius:999px;padding:13px 18px;font-size:15px}
  body{padding-bottom:78px}
}

/* ---------- MOTION (enabled by js/main.js adding .rv on <html>) ---------- */
.rv .r{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv .r.in{opacity:1;transform:none}

/* result: bars fill after the numbers land */
.rv .big>.r .bar i{transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.3,.7,.2,1) calc(var(--d,0s) + .3s)}
.rv .big>.r.in .bar i{transform:none}

/* journey: line draws, designed steps light up in order, bracket follows */
.rv .jr.r ol::before{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.3,.7,.2,1) .2s}
.rv .jr.r.in ol::before{transform:none}
.rv .jr.r li.on .c{background:var(--white);border-color:var(--line2);color:var(--sub);transition:background .35s,border-color .35s,color .35s}
.rv .jr.r.in li.on .c{background:var(--black);border-color:var(--black);color:var(--white)}
.rv .jr.r.in li:nth-child(2) .c{transition-delay:.5s}
.rv .jr.r.in li:nth-child(3) .c{transition-delay:.7s}
.rv .jr.r.in li:nth-child(4) .c{transition-delay:.9s}
.rv .jr.r.in li:nth-child(5) .c{transition-delay:1.1s}
.rv .jr.r .brk{opacity:0;transform:translateY(-6px);transition:opacity .5s ease 1.4s,transform .5s ease 1.4s}
.rv .jr.r.in .brk{opacity:1;transform:none}
@media (max-width:900px){.rv .jr.r ol::before{transform:scaleY(0);transform-origin:center top}.rv .jr.r.in ol::before{transform:none}}

/* hero phone: query types in, then answer and results appear */
.rv .phone.pre .aians,.rv .phone.pre .rs>div,.rv .pv.pre .flt{opacity:0;transform:translateY(8px)}
.rv .phone .aians,.rv .phone .rs>div,.rv .pv .flt{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.rv .phone .rs>div:nth-child(1){transition-delay:.25s}
.rv .phone .rs>div:nth-child(2){transition-delay:.45s}
.rv .pv .flt:nth-child(1){transition-delay:.7s}
.rv .pv .flt:nth-child(2){transition-delay:.8s}
.rv .pv .flt:nth-child(3){transition-delay:.9s}
.sbar .caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:var(--black);vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}