/* THAD — 공용 스타일 (2026-09-21)
   흑백만 쓴다. 단 하나의 예외는 「틀린 숫자」에 쓰는 빨강이다. */

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --paper:#F2F2F2;
  --line:#DCDCDC;
  --line-dark:#33363B;
  --muted:#A8AEB5;
  --muted-dark:#8B9199;
  --ink:#141519;
  --ink-soft:#5B6068;
  --wrong:#C8362A;
  --nav-h:66px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:var(--nav-h)}
body{
  background:var(--black); color:var(--white);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.7; font-weight:400; word-break:keep-all; overflow-x:hidden;
  opacity:0; transition:opacity .38s var(--ease);
}
body.ready{opacity:1}
/* .en 은 대부분 라벨에 붙는다. 큰 표제들은 저마다 제 규칙으로 디스플레이 글꼴을 쓴다. */
.en{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}
img{max-width:100%; display:block}
strong{font-weight:600}

/* ─── 내비 ─── */
nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,44px); mix-blend-mode:difference}
nav .logo{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-weight:800; font-size:19px; letter-spacing:-.05em; color:#fff; padding:11px 0}
nav .links{display:flex; gap:clamp(10px,2.2vw,28px); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:600; letter-spacing:.1em; color:#fff}
/* 손가락으로 누르는 자리를 넉넉히 준다 — 글자만 20px 높이면 휴대폰에서 못 누른다 */
nav .links a{position:relative; padding:14px 0 11px; white-space:nowrap}
nav .links a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
nav .links a:hover::after{transform:scaleX(1)}
nav .links a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:520px){ nav .links{gap:8px; font-size:11px; letter-spacing:.03em} }

/* ─── 구역 ─── */
.sec{padding:clamp(88px,12vw,180px) clamp(18px,4vw,44px)}
.sec.dark{background:var(--black); color:var(--white)}
.sec.light{background:var(--paper); color:var(--ink)}
.sec.tight{padding-top:0}
.inner{max-width:1280px; margin:0 auto}
.tag{display:flex; gap:15px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.16em; margin-bottom:clamp(26px,3.4vw,42px)}
.dark .tag{color:var(--muted-dark)} .light .tag{color:#767C84}
h2{font-size:clamp(25px,4.2vw,50px); line-height:1.2; font-weight:700; letter-spacing:-.035em; margin-bottom:clamp(20px,2.8vw,34px); max-width:21ch}
.say{font-size:clamp(15.5px,1.6vw,18.5px); max-width:52ch; line-height:1.78}
.dark .say{color:var(--muted)} .light .say{color:var(--ink-soft)}
.note{font-size:14.5px; margin-top:24px; line-height:1.7}
.dark .note{color:var(--muted-dark)} .light .note{color:#6B7178}

.rise{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rise.in{opacity:1; transform:none}

/* ─── 단추 ─── */
.btn{display:inline-block; padding:13px 26px; font-size:14px; font-weight:600; letter-spacing:-.01em; transition:background .25s,color .25s,border-color .25s}
.btn.solid{background:var(--white); color:var(--black)}
.btn.solid:hover{background:var(--muted)}
.btn.ghost{border:1px solid var(--line-dark); color:var(--white)}
.btn.ghost:hover{border-color:var(--white)}
.light .btn.solid{background:var(--black); color:var(--white)}
.light .btn.solid:hover{background:var(--ink-soft)}
.light .btn.ghost{border-color:var(--line); color:var(--ink)}
.light .btn.ghost:hover{border-color:var(--ink)}
.acts{display:flex; gap:9px; flex-wrap:wrap}

/* ─── 홈 히어로 ─── */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  padding:calc(var(--nav-h) + 22px) clamp(18px,4vw,44px) clamp(22px,3vw,34px)}
#bg{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.15) 38%,rgba(10,10,10,.86) 100%)}
.hero > .inner{position:relative; z-index:2; width:100%}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--muted); margin-bottom:clamp(14px,2.2vw,24px)}
h1{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(44px,10.4vw,142px); line-height:.86; letter-spacing:-.05em; margin-bottom:clamp(16px,2.2vw,26px)}
h1 .l{display:block; overflow:hidden}
h1 .l > span{display:block; transform:translateY(105%); transition:transform 1.05s var(--ease)}
h1 .dim{color:var(--muted)}
.ready h1 .l > span{transform:translateY(0)}
h1 .l:nth-child(2) > span{transition-delay:.09s}
h1 .l:nth-child(3) > span{transition-delay:.18s}
.lede{display:grid; grid-template-columns:1fr; gap:14px 48px; align-items:end; margin-bottom:clamp(20px,2.6vw,30px)}
@media (min-width:900px){ .lede{grid-template-columns:minmax(0,36ch) minmax(0,30ch)} }
.lede p{opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .34s, transform .8s var(--ease) .34s}
.ready .lede p{opacity:1; transform:none}
.lede .a{font-size:clamp(17px,1.75vw,22px); font-weight:600; line-height:1.55; letter-spacing:-.015em}
.lede .b{font-size:15.5px; color:var(--muted); line-height:1.75; transition-delay:.42s}
.hero .acts{margin-bottom:clamp(22px,2.8vw,34px); opacity:0; transition:opacity .8s var(--ease) .5s}
.ready .hero .acts{opacity:1}
.gauge{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line-dark); opacity:0; transition:opacity .9s var(--ease) .62s}
@media (min-width:760px){ .gauge{grid-template-columns:repeat(4,1fr)} }
.ready .gauge{opacity:1}
.gauge div{padding:14px 16px 0 0}
.gauge b{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:clamp(22px,2.6vw,31px); font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.1}
.gauge span{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}
.scrollcue{position:absolute; right:clamp(18px,4vw,44px); bottom:clamp(100px,13vh,150px); z-index:3;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; color:var(--muted); display:flex; align-items:center; gap:9px}
.scrollcue i{display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--muted),transparent); animation:drop 2.1s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}46%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width:760px){ .scrollcue{display:none} }
@media (max-height:960px) and (min-width:900px){
  h1{font-size:clamp(44px,8.6vw,118px); margin-bottom:18px}
  .eyebrow{margin-bottom:13px} .lede{margin-bottom:20px}
  .lede .a{font-size:17px} .lede .b{font-size:13.5px; line-height:1.65}
  .hero .acts{margin-bottom:22px} .gauge div{padding-top:11px}
}

/* ─── 속장 머리 ─── */
.phead{background:var(--black); padding:calc(var(--nav-h) + clamp(72px,10vw,140px)) clamp(18px,4vw,44px) clamp(60px,8vw,108px);
  border-bottom:1px solid var(--line-dark)}
.phead .crumb{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--muted-dark); margin-bottom:clamp(16px,2.4vw,26px)}
.phead h1{font-size:clamp(38px,8.4vw,108px); margin-bottom:clamp(14px,2vw,22px)}
.phead h1 .l > span{transform:none}
.phead .sub{font-size:clamp(15px,1.6vw,19px); font-weight:500; color:var(--white); max-width:34ch; line-height:1.6; letter-spacing:-.015em}
.phead .sub + .say{margin-top:12px}

/* ─── 줄 목록 ─── */
.rows{margin-top:clamp(46px,6vw,80px); border-top:1px solid}
.dark .rows{border-color:var(--line-dark)} .light .rows{border-color:var(--line)}
.row{display:grid; grid-template-columns:1fr; gap:6px 40px; align-items:baseline; border-bottom:1px solid; padding:clamp(20px,2.8vw,30px) 0}
.dark .row{border-color:var(--line-dark)} .light .row{border-color:var(--line)}
@media (min-width:880px){
  .row{grid-template-columns:54px minmax(0,24ch) minmax(0,1fr)}
  .row.wide{grid-template-columns:54px minmax(0,24ch) minmax(0,1fr) auto}
}
.row .no{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:600; letter-spacing:.1em}
.dark .row .no{color:var(--muted-dark)} .light .row .no{color:#9AA0A6}
.row h3{font-size:clamp(17px,1.85vw,21px); font-weight:600; letter-spacing:-.02em; line-height:1.4}
.row h3 small{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.09em; margin-top:5px}
.dark .row h3 small{color:var(--muted-dark)} .light .row h3 small{color:#9AA0A6}
.row p{font-size:15.5px; line-height:1.78}
.dark .row p{color:var(--muted)} .light .row p{color:var(--ink-soft)}
.row .amt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap}
/* 좁은 화면에서는 금액이 본문 아래로 내려가 혼자 남는다 — 무슨 숫자인지 붙여 준다 */
@media (max-width:879px){
  .row .amt{display:block; margin-top:7px}
  .row .amt::before{content:"최근 한 달 집행  "; font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
    font-size:12.5px; font-weight:400; letter-spacing:0}
  .dark .row .amt::before{color:var(--muted-dark)} .light .row .amt::before{color:#9AA0A6}
}

/* ─── 틀린 숫자 → 실제 숫자 ─── */
.fix{font-family:"IBM Plex Mono",ui-monospace,monospace; display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums; padding-top:2px; flex-wrap:wrap}
.fix .was{position:relative; color:var(--wrong); white-space:nowrap}
.fix .was::after{content:""; position:absolute; left:-2px; right:-2px; top:52%; height:2px; background:var(--wrong); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease) .3s}
.in .fix .was::after{transform:scaleX(1)}
.fix .arw{font-size:12px; color:var(--muted-dark)}
.light .fix .arw{color:#9AA0A6}
.fix .is{border-bottom:2px solid currentColor; padding-bottom:1px; white-space:nowrap}

/* ─── 숫자를 그림으로 ───────────────────────────────
   우리가 파는 것이 「틀린 숫자 찾기」라, 사진 대신 숫자 자체가 그림이 된다.
   믿고 있던 값은 빨강, 실제 값은 바탕색의 반대. 막대 길이는 둘 중 큰 쪽이 100%. */
.cmp{display:grid; gap:9px; margin-top:16px}
.c-row{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px; align-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.c-lab{font-size:9.5px; font-weight:600; letter-spacing:.1em; opacity:.62}
.c-row i{display:block; height:7px; width:var(--w,100%); min-width:3px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .25s}
.in .c-row i{transform:scaleX(1)}
.c-row.wrong{color:var(--wrong)}
.c-row.wrong b{text-decoration:line-through; text-decoration-thickness:1.5px}
.dark .c-row.real{color:var(--white)} .light .c-row.real{color:var(--ink)}

/* 매체 비중 */
.share{margin-top:clamp(30px,4vw,48px); display:grid; gap:2px}
.sh{display:grid; grid-template-columns:86px minmax(0,1fr) 84px; gap:14px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line-dark)}
.sh:first-child{border-top:1px solid var(--line-dark)}
.sh .nm{font-size:15px; font-weight:600; letter-spacing:-.02em}
.sh i{display:block; height:11px; width:var(--w); min-width:4px; background:var(--white);
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease)}
.sh.in i{transform:scaleX(1)}
.sh .vv{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.sh .vv small{display:block; font-size:10.5px; font-weight:500; color:var(--muted-dark); letter-spacing:.04em}
@media (max-width:620px){ .sh{grid-template-columns:72px minmax(0,1fr) 72px; gap:10px} .sh .nm{font-size:14px} }

/* 키워드 칩 */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.chips span{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:5px 10px; border:1px solid}
.dark .chips span{border-color:var(--line-dark); color:var(--muted)}
.light .chips span{border-color:var(--line); color:var(--ink-soft)}

/* ─── 산출물 목록 ─── */
.deliv{margin-top:clamp(34px,4.6vw,60px); display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:640px){ .deliv{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .deliv{grid-template-columns:repeat(4,1fr)} }
.dark .deliv{background:var(--line-dark); border-color:var(--line-dark)}
.dv{background:var(--paper); padding:clamp(22px,2.4vw,28px)}
.dark .dv{background:var(--black)}
.dv .k{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; margin-bottom:9px}
.light .dv .k{color:#9AA0A6} .dark .dv .k{color:var(--muted-dark)}
.dv h4{font-size:17px; font-weight:700; letter-spacing:-.025em; margin-bottom:14px}
.dv ul{list-style:none}
.dv li{font-size:14.5px; line-height:1.6; padding:7px 0 7px 15px; position:relative; border-bottom:1px solid}
.light .dv li{color:var(--ink-soft); border-color:#E6E6E6}
.dark .dv li{color:var(--muted); border-color:#1E2126}
.dv li:last-child{border-bottom:none}
.dv li::before{content:""; position:absolute; left:0; top:15px; width:7px; height:1px}
.light .dv li::before{background:#B9BDC3} .dark .dv li::before{background:var(--muted-dark)}
.dv li em{font-style:normal; font-size:11px; letter-spacing:.02em; display:block; margin-top:1px}
.light .dv li em{color:#A6ABB2} .dark .dv li em{color:var(--muted-dark)}

/* ─── 회사 한 줄 ─── */
.about{display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,48px); margin-top:clamp(30px,3.6vw,46px)}
@media (min-width:920px){ .about{grid-template-columns:minmax(0,1fr) minmax(0,22rem)} }
.about .facts{border-top:1px solid var(--line-dark)}
.about .facts div{display:grid; grid-template-columns:82px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line-dark); font-size:14px}
.about .facts dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--muted-dark); padding-top:3px}
.about .facts dd{color:var(--white)}

/* ─── 성과 화면 (코드로 그린 실물) ─────────────────────
   사진을 깔지 않는다. 우리가 파는 것이 이 화면이라 직접 그리는 쪽이 정확하다. */
.mock{margin-top:clamp(30px,4vw,52px); background:var(--black); border:1px solid var(--line-dark); overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.mock .bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--line-dark); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--muted-dark)}
.mock .bar .live{display:inline-flex; align-items:center; gap:6px; color:var(--muted)}
.mock .bar .live i{width:6px; height:6px; border-radius:50%; background:#5BD07A; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.mock .body{padding:clamp(16px,2vw,24px); display:grid; gap:clamp(14px,1.8vw,22px)}
.mock .kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
@media (min-width:700px){ .mock .kpis{grid-template-columns:repeat(4,1fr)} }
.mock .kpi{background:var(--black); padding:14px 16px}
.mock .kpi span{display:block; font-size:10.5px; color:var(--muted-dark); margin-bottom:6px; letter-spacing:.02em}
.mock .kpi b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:clamp(18px,2.2vw,26px); font-weight:700; letter-spacing:-.035em;
  color:var(--white); font-variant-numeric:tabular-nums; display:block; line-height:1.1}
.mock .kpi em{font-style:normal; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; color:#5BD07A}
.mock .kpi em.dn{color:var(--wrong)}

.mock .chart{display:grid; grid-template-columns:repeat(14,1fr); align-items:end; gap:clamp(4px,.8vw,9px); height:clamp(96px,13vw,150px);
  padding-top:6px; border-bottom:1px solid var(--line-dark)}
.mock .chart i{display:block; background:linear-gradient(180deg,#8E959D,#3A3F46); height:var(--h,40%);
  transform:scaleY(.04); transform-origin:bottom; transition:transform .9s var(--ease), height .9s var(--ease)}
.mock.in .chart i{transform:scaleY(1)}
.mock .chart i:nth-child(n+12){background:linear-gradient(180deg,#FFFFFF,#9AA0A6)}

.mock .tbl{font-size:12.5px}
.mock .tbl .r{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-dark); align-items:center}
.mock .tbl .r:last-child{border-bottom:none}
.mock .tbl .h{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em; color:var(--muted-dark); font-weight:600}
.mock .tbl .r span{color:var(--muted)}
.mock .tbl .r b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; text-align:right}
.mock .tbl .r .nm{color:var(--white); font-weight:500}
@media (max-width:560px){ .mock .tbl .r{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))} .mock .tbl .r > :nth-child(4){display:none} }

/* 업체 리스트 화면 — 거래처마다 자기 줄을 본다 */
.mock .tbl.c5 .r{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) repeat(3,minmax(0,1fr)) 52px}
@media (max-width:760px){
  .mock .tbl.c5 .r{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
  .mock .tbl.c5 .r > :nth-child(2), .mock .tbl.c5 .r > :nth-child(5), .mock .tbl.c5 .r > :nth-child(6){display:none}
}
.mock .tbl .med{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em; color:var(--muted-dark)}
.pill{justify-self:end; font-family:"IBM Plex Mono",monospace; font-size:8.5px; font-weight:600; letter-spacing:.08em;
  padding:3px 7px; border:1px solid; white-space:nowrap}
.pill.ok{color:#5BD07A; border-color:#2C5C3A}
.pill.wt{color:#E0A277; border-color:#5C4633}

.mock-cap{margin-top:12px; font-size:13.5px; line-height:1.7}
.light .mock-cap{color:#6B7178} .dark .mock-cap{color:var(--muted-dark)}

/* ─── 랜딩 축소판 — 진짜 랜딩을 작게 그린다 ───────────────
   회색 막대를 늘어놓으면 「자리만 잡아둔 것」으로 보인다. 실제 문구와 폼을 넣어야
   업종마다 무엇이 다른지가 그림 하나로 전해진다. */
.shots{margin-top:clamp(30px,4vw,52px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px)}
@media (min-width:820px){ .shots{grid-template-columns:repeat(4,1fr)} }
.shot{display:flex; flex-direction:column; gap:9px}
.lp{border:1px solid var(--line); background:#fff; aspect-ratio:9/13; display:flex; flex-direction:column; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.shot:hover .lp{transform:translateY(-6px); box-shadow:0 22px 44px -26px rgba(0,0,0,.45)}

.lp .top{padding:13px 12px 14px; color:#fff; position:relative; overflow:hidden}
.lp .top::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(112deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 9px)}
.lp .top > *{position:relative; z-index:1}
.lp .bdg{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:6.5px; font-weight:600; letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.4); padding:2px 5px; margin-bottom:8px}
.lp .tt{font-size:14px; font-weight:800; line-height:1.24; letter-spacing:-.035em}
.lp .sub{font-size:8px; line-height:1.5; color:rgba(255,255,255,.62); margin-top:6px}

.lp .mid{padding:11px 12px; display:grid; gap:7px}
.lp .pt{display:grid; grid-template-columns:11px minmax(0,1fr); gap:6px; align-items:baseline}
.lp .pt b{font-family:"IBM Plex Mono",monospace; font-size:6.5px; font-weight:600; color:#B0B5BB}
.lp .pt span{font-size:8px; line-height:1.45; color:#5B6068}

/* 사진이 들어갈 띠 — 랜딩에는 대개 시술 전후나 매장 사진이 온다 */
.lp .band{margin:0 12px; flex:1; min-height:52px; background:linear-gradient(135deg,#E9EAEC,#D6D9DC);
  display:flex; align-items:center; justify-content:center}
.lp .band span{font-family:"IBM Plex Mono",monospace; font-size:6.5px; font-weight:600; letter-spacing:.14em; color:#9096A0}
.lp .rev{display:flex; align-items:center; gap:5px; padding:8px 12px 9px; font-size:7.5px; color:#8A9099}
.lp .rev u{text-decoration:none; letter-spacing:-1px; color:#111}

.lp .form{padding:10px 12px 12px; background:#F4F4F4; border-top:1px solid #E2E2E2; display:grid; gap:5px}
.lp .fl{font-family:"IBM Plex Mono",monospace; font-size:6.5px; font-weight:600; letter-spacing:.09em; color:#A6ABB2; margin-bottom:1px}
.lp .fi{height:16px; background:#fff; border:1px solid #DDD; display:flex; align-items:center; padding:0 6px; font-size:7px; color:#B0B5BB}
.lp .go{height:21px; background:#0A0A0A; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:700; letter-spacing:-.02em; margin-top:2px}
.shot .tagn{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:600; letter-spacing:.1em; color:#9AA0A6}
@media (max-width:520px){ .lp .tt{font-size:12.5px} .lp .sub,.lp .pt span{font-size:7.5px} }

/* 큰 번호를 쓰는 4칸 */
.grid4{margin-top:clamp(44px,5.8vw,78px); display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
@media (min-width:640px){ .grid4{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .grid4{grid-template-columns:repeat(4,1fr)} }
.light .grid4{background:var(--line); border-color:var(--line)}
.g4{background:var(--black); padding:clamp(24px,2.6vw,32px)}
.light .g4{background:var(--paper)}
.g4 .num{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-.05em; line-height:1; margin-bottom:16px}
.dark .g4 .num{color:var(--line-dark)} .light .g4 .num{color:#CFCFCF}
.g4 h3{font-size:18px; font-weight:700; letter-spacing:-.025em; margin-bottom:8px}
.g4 p{font-size:14px; line-height:1.72}
.dark .g4 p{color:var(--muted)} .light .g4 p{color:var(--ink-soft)}


/* ─── 칸 안의 도식 ───
   사진은 아직 없다. 다만 「무슨 일이 벌어지는지」를 보여주는 그림은 촬영 없이 그릴 수 있다.
   색을 currentColor 로 두어 밝은 칸에서는 먹색, 어두운 칸에서는 흰색으로 따라오게 했다. */
.g4 .art{margin-top:clamp(16px,1.8vw,22px); padding-top:clamp(14px,1.6vw,18px); border-top:1px solid}
.dark .g4 .art{border-top-color:var(--line-dark)}
.light .g4 .art{border-top-color:var(--line)}
.g4 .art svg{width:100%; height:auto; display:block}
.g4 .art .dim{opacity:.46}
.g4 .art text{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; font-weight:500; letter-spacing:.05em}


/* ─── 상담 신청 ───
   전화·카카오톡·폼 세 갈래를 한 자리에 둔다. 폼은 실제로 메일로 들어간다.
   필수는 세 칸(회사명·담당자·연락처)뿐이다 — 칸이 많으면 아무도 안 쓴다. */
.ways{margin-top:clamp(28px,3.6vw,44px); display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line)}
@media (min-width:760px){ .ways{grid-template-columns:repeat(3,1fr)} }
.way{background:var(--paper); padding:clamp(20px,2.4vw,26px); display:block;
  transition:background .25s var(--ease)}
.way:hover{background:#EAEAEA}
.way .k{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.14em; color:#9AA0A6; margin-bottom:10px}
.way .t{display:block; font-size:17px; font-weight:700; letter-spacing:-.025em; color:var(--ink)}
.way .d{display:block; font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.6}
.way.pend{cursor:default}
.way.pend:hover{background:var(--paper)}
.way.pend .t{color:#9AA0A6}

.ask{margin-top:clamp(30px,3.8vw,48px); background:var(--card,#fff); background:#fff;
  border:1px solid var(--line); padding:clamp(22px,3vw,38px)}
.ask .fh{font-size:clamp(19px,2.2vw,24px); font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.ask .fs{font-size:13.5px; color:var(--ink-soft); margin-top:6px; margin-bottom:clamp(20px,2.4vw,28px)}
.req{color:var(--wrong); font-style:normal; font-weight:700}

.row2{display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:660px){ .row2{grid-template-columns:1fr 1fr; gap:0 clamp(14px,1.8vw,24px)} }

.fld{display:block; margin-bottom:clamp(16px,1.9vw,22px); border:0; padding:0}
.fld > span, .fld > legend{display:block; font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:7px}
.fld > legend em{font-style:normal; font-weight:400; color:var(--ink-soft); margin-left:6px; font-size:12.5px}
.ask input[type=text],.ask input[type=tel],.ask input[type=email],.ask input[type=url],
.ask select,.ask textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2,#CFCFCF); border-radius:2px; padding:12px 13px; line-height:1.5;
  transition:border-color .2s var(--ease)}
.ask textarea{resize:vertical; min-height:96px}
.ask select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px}
.ask input:focus,.ask select:focus,.ask textarea{outline:none}
.ask input:focus,.ask select:focus,.ask textarea:focus{border-color:var(--ink)}
.ask input::placeholder,.ask textarea::placeholder{color:#AEB2B8}
.ask input[aria-invalid="true"],.ask textarea[aria-invalid="true"]{border-color:var(--wrong)}

.opts{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:660px){ .opts{grid-template-columns:1fr 1fr}
  /* 홀수로 끝나면 마지막 칸 옆이 빈 회색으로 남는다 — 두 칸을 차지하게 둔다 */
  .opts .opt:last-child:nth-child(odd){grid-column:1 / -1} }
.opt{display:flex; gap:11px; align-items:flex-start; background:#fff; padding:13px 14px; cursor:pointer}
.opt:hover{background:#FAFAFA}
.opt input{margin-top:3px; width:16px; height:16px; accent-color:var(--ink); flex:none}
.opt span{font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.5}
.opt span em{display:block; font-style:normal; font-size:12.5px; font-weight:400; color:var(--ink-soft); margin-top:2px}

.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.agree{display:flex; gap:11px; align-items:flex-start; margin:clamp(16px,2vw,22px) 0 0; cursor:pointer}
.agree input{margin-top:3px; width:16px; height:16px; accent-color:var(--ink); flex:none}
.agree span{font-size:13.5px; color:var(--ink-soft); line-height:1.65}
.agree a{text-decoration:underline; text-underline-offset:3px; color:var(--ink)}

.fbtn{margin-top:clamp(20px,2.4vw,28px); display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.fbtn .btn[disabled]{opacity:.5; pointer-events:none}
.fbtn .msg{font-size:13.5px; line-height:1.6; margin:0}
.fbtn .msg.ok{color:#1F6F4A; font-weight:600}
.fbtn .msg.no{color:var(--wrong); font-weight:600}
@media (prefers-reduced-motion:reduce){ .way,.ask input,.ask select,.ask textarea{transition:none} }

/* ─── 사례 ─── */
.cases{margin-top:clamp(46px,6vw,80px); display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:760px){ .cases{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .cases{grid-template-columns:repeat(3,1fr)} }
.cs{background:var(--paper); padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column}
.cs .n{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.14em; color:#9AA0A6; margin-bottom:12px}
.cs h4{font-size:16.5px; font-weight:600; line-height:1.48; letter-spacing:-.02em; margin-bottom:10px}
.cs p{font-size:15px; color:var(--ink-soft); line-height:1.76; margin-bottom:16px; flex:1}
.cs .fix{font-size:13.5px; border-top:1px solid var(--line); padding-top:13px; width:100%}

/* ─── 누가 맡나 ───
   사진이 아직 없다. 빈 네모를 두면 미완성으로 보이므로 이름 글자를 크게 써서
   그 자체가 한 덩어리가 되게 했다. 사진이 생기면 .mono 를 img 로 바꾸면 된다. */
.who{margin-top:clamp(34px,4.6vw,60px); display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-dark); border:1px solid var(--line-dark)}
@media (min-width:900px){ .who{grid-template-columns:minmax(0,22rem) minmax(0,1fr)} }
.wp{background:var(--black); padding:clamp(24px,2.6vw,32px)}
.wp .mono{aspect-ratio:1/1; max-width:168px; border:1px solid var(--line-dark); display:grid; place-items:center;
  font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-size:clamp(46px,6vw,62px); font-weight:800;
  letter-spacing:-.06em; line-height:1; color:var(--white); margin-bottom:20px}
.wp .mono img{width:100%; height:100%; object-fit:cover}
.wp .nm{font-size:19px; font-weight:700; letter-spacing:-.03em}
.wp .nm span{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; color:var(--muted-dark); margin-left:9px}
.wp .ds{font-size:14px; color:var(--muted); line-height:1.75; margin-top:10px}

.wf{background:var(--black); display:grid; grid-template-columns:1fr; gap:1px}
.wf-r{background:var(--black); display:grid; grid-template-columns:minmax(0,5.6rem) minmax(0,1fr); gap:6px 20px;
  align-items:baseline; padding:clamp(17px,2vw,23px) clamp(24px,2.6vw,32px); border-bottom:1px solid var(--line-dark)}
.wf-r:last-child{border-bottom:none}
.wf-r b{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-size:clamp(28px,3.4vw,40px);
  font-weight:800; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.wf-r span{font-size:14px; color:var(--muted); line-height:1.7}
.wf-r span em{font-style:normal; color:var(--white); font-weight:600}

/* ─── 법적 고지 문서 ───
   읽히라고 두는 글이다. 한 줄 길이를 짧게 잡고 제목 사이를 넉넉히 띄운다. */
.doc{margin-top:clamp(30px,4vw,52px); max-width:68ch}
.doc h3{font-size:clamp(16.5px,1.75vw,19px); font-weight:700; letter-spacing:-.025em;
  margin:clamp(30px,3.4vw,44px) 0 12px; padding-top:14px; border-top:1px solid var(--line)}
.doc h3:first-child{margin-top:0; padding-top:0; border-top:none}
.doc p{font-size:14.5px; color:var(--ink-soft); line-height:1.85; margin-bottom:12px}
.doc ul{list-style:none; margin:0 0 12px}
.doc li{font-size:14.5px; color:var(--ink-soft); line-height:1.8; padding:7px 0 7px 17px;
  position:relative; border-bottom:1px solid var(--line)}
.doc li:last-child{border-bottom:none}
.doc li::before{content:""; position:absolute; left:0; top:17px; width:8px; height:1px; background:var(--ink-soft)}
.doc strong{color:var(--ink); font-weight:600}
.doc a{text-decoration:underline; text-underline-offset:3px}
.doc .note{font-size:13px; color:var(--muted); padding:11px 14px; border-left:2px solid var(--line); background:rgba(0,0,0,.02)}
.doc .eff{margin-top:clamp(28px,3.2vw,40px); padding-top:16px; border-top:1px solid var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.04em; color:var(--ink)}
.tbl2{margin:0 0 14px; border:1px solid var(--line)}
.tbl2 .r{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:4px 16px;
  padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-soft)}
.tbl2 .r:last-child{border-bottom:none}
.tbl2 .r.h{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:rgba(0,0,0,.03)}
@media (max-width:560px){ .tbl2 .r{grid-template-columns:1fr; gap:2px} }

/* ─── 뜬 단추 — 전화 · 카카오톡 ───
   국내에서 가장 많이 눌리는 두 경로다. 어느 위치에서든 한 번에 눌리게 둔다.
   한 묶음으로 쌓는다 — 따로 띄우면 폰에서 동그라미로 줄 때 어긋난다. */
.float{position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:70;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fb{display:flex; align-items:center; gap:9px; padding:12px 17px; border-radius:999px;
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 6px 22px rgba(0,0,0,.28); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.fb:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.34)}
.fb svg{width:19px; height:19px; flex:none}
.fb.kt{background:#FAE100; color:#181600}
/* 전화는 밝은 마당 위에도 어두운 마당 위에도 떠 있어야 해서 제 바탕을 갖는다 */
.fb.tel{background:#0A0A0A; color:#fff; border:1px solid rgba(255,255,255,.26)}
.fb.tel .lbl{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em}
/* 폰에서는 동그라미로 줄인다. 손가락이 닿으려면 최소 48px 은 돼야 한다. */
@media (max-width:560px){ .float{gap:9px} .fb{padding:14px} .fb .lbl{display:none} .fb svg{width:22px; height:22px} }
@media (prefers-reduced-motion:reduce){ .fb{transition:none} .fb:hover{transform:none} }

/* ─── 진행 방식 ─── */
.steps{margin-top:clamp(36px,5vw,62px); display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
@media (min-width:720px){ .steps{grid-template-columns:repeat(5,1fr)} }
.st{background:var(--black); padding:clamp(20px,2.2vw,26px)}
.st b{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--muted-dark); margin-bottom:11px}
.st h4{font-size:16px; font-weight:600; margin-bottom:8px; letter-spacing:-.015em}
.st p{font-size:13.5px; color:var(--muted); line-height:1.7}

/* ─── FAQ ─── */
.faq{margin-top:clamp(32px,4.4vw,56px); border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:clamp(17px,2.2vw,23px) 44px clamp(17px,2.2vw,23px) 0;
  font-size:clamp(15.5px,1.6vw,18px); font-weight:600; letter-spacing:-.02em; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:13px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease)}
.faq summary::before{content:""; position:absolute; right:8px; top:50%; width:13px; height:1.5px; background:var(--ink); transform:rotate(90deg); transition:transform .3s var(--ease)}
.faq details[open] summary::before{transform:rotate(0)}
.faq .a{padding:0 0 clamp(19px,2.4vw,25px); font-size:14.5px; color:var(--ink-soft); line-height:1.8; max-width:66ch}

/* ─── 문의 ─── */
.contact{display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px)}
@media (min-width:940px){ .contact{grid-template-columns:minmax(0,1fr) minmax(0,26rem)} }
.checks{list-style:none; margin-top:24px}
.checks li{font-size:15px; color:var(--muted); padding:11px 0 11px 26px; border-bottom:1px solid var(--line-dark); position:relative}
.checks li::before{content:""; position:absolute; left:0; top:21px; width:11px; height:1.5px; background:var(--white)}
.card{border:1px solid var(--line-dark); padding:clamp(22px,2.6vw,30px)}
.card .lab{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--muted-dark); margin-bottom:8px}
.card .val{font-size:17px; font-weight:600; letter-spacing:-.02em; margin-bottom:20px; word-break:break-all}
.card .val.tbd{color:var(--muted-dark); font-weight:400; font-size:15px}
.card .btn{margin-top:4px}

/* ─── 다음 장으로 ─── */
.next{border-top:1px solid var(--line-dark); background:var(--black)}
.next a{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:clamp(34px,5vw,64px) clamp(18px,4vw,44px); max-width:1280px; margin:0 auto; transition:opacity .25s}
.next a:hover{opacity:.62}
.next .k{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--muted-dark); display:block; margin-bottom:10px}
.next .t{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:clamp(28px,6vw,72px); font-weight:800; letter-spacing:-.045em; text-transform:uppercase; line-height:.95}
.next .go{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--muted)}

/* ─── 마퀴 · 푸터 ─── */
.marquee{overflow:hidden; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); background:var(--black); padding:30px 0}
.marquee .track{display:flex; gap:44px; width:max-content; animation:slide 52s linear infinite}
.marquee span{font-family:"Bricolage Grotesque","Arial Black",sans-serif; font-size:clamp(32px,5.6vw,72px); font-weight:800; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px var(--line-dark); text-transform:uppercase; white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
footer{background:var(--black); padding:clamp(40px,6vw,70px) clamp(18px,4vw,44px)}
footer .inner{display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:flex-end}
footer .co{font-size:13px; color:var(--muted-dark); line-height:1.85}
footer .co b{color:var(--muted); font-weight:500}
footer .fnav{display:flex; gap:16px; flex-wrap:wrap; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--muted)}
footer .fnav a{padding:11px 0}
footer .fnav a:hover{color:var(--white)}

/* ─── 효과 ──────────────────────────────────────────
   주제를 거드는 것만 넣는다. 우리 주제는 「숫자가 드러나는 순간」이다. */

/* 제목이 줄 단위로 올라온다 — 히어로와 같은 기법을 본문 제목까지.
   한글은 받침이 기준선 아래로 내려가서, 잘라내는 상자에 여유를 주지 않으면 꼬리가 깎인다. */
h2 .ml{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em}
h2 .ml > span{display:block; transform:translateY(105%); transition:transform .95s var(--ease)}
h2.in .ml > span{transform:translateY(0)}
h2 .ml:nth-child(2) > span{transition-delay:.08s}
h2 .ml:nth-child(3) > span{transition-delay:.16s}

/* 사례 카드에 마우스를 올리면 바탕이 뒤집힌다 — 틀린 숫자가 더 도드라진다 */
.cs{transition:background .45s var(--ease), color .45s var(--ease)}
.cs:hover{background:var(--black); color:var(--white)}
.cs:hover h4{color:var(--white)}
.cs:hover p{color:var(--muted)}
.cs:hover .n{color:var(--muted-dark)}
.cs:hover .fix{border-top-color:var(--line-dark)}
.cs:hover .c-row.real{color:var(--white)}
.cs:hover .c-row.wrong{color:#F0766A}

/* 네 칸 — 올리면 큰 번호가 살아난다 */
.g4{transition:background .4s var(--ease)}
.g4 .num{transition:color .45s var(--ease), transform .55s var(--ease)}
.g4:hover .num{transform:translateX(6px)}
.light .g4:hover{background:#EAEAEA} .light .g4:hover .num{color:var(--ink)}
.dark .g4:hover{background:#101216} .dark .g4:hover .num{color:var(--white)}

/* 다음 장으로 — 글자가 앞으로 밀린다 */
.next .t{font-family:"Bricolage Grotesque","Arial Black",sans-serif; display:inline-block; transition:transform .55s var(--ease)}
.next a:hover .t{transform:translateX(14px)}
.next .go{transition:transform .55s var(--ease)}
.next a:hover .go{transform:translateX(10px)}

/* 매체 줄 — 올리면 막대가 밝아진다 */
.sh{transition:background .35s var(--ease)}
.sh:hover{background:#101216}
.sh i{transition:transform .9s var(--ease), background .35s var(--ease)}

/* 마퀴 두 줄이 서로 반대로 흐른다 */
.marquee.rev .track{animation-direction:reverse; animation-duration:64s}
.marquee.rev span{-webkit-text-stroke-color:#22262B}
.marquee + .marquee{border-top:none}

/* 맨 위에 스크롤 진행 줄 */
#prog{position:fixed; top:0; left:0; height:2px; width:100%; background:#fff; transform:scaleX(0); transform-origin:left;
  z-index:70; mix-blend-mode:difference; pointer-events:none}

/* 단추 — 좌에서 우로 채워진다 */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn.solid::before{background:#0A0A0A}
.btn.solid:hover{background:var(--white); color:#fff}
.light .btn.solid::before{background:#fff}
.light .btn.solid:hover{background:var(--black); color:var(--black)}
.btn.ghost::before{background:#fff}
.btn.ghost:hover{color:#0A0A0A; border-color:#fff}
.light .btn.ghost::before{background:#0A0A0A}
.light .btn.ghost:hover{color:#fff; border-color:#0A0A0A}

/* 구역 번호 옆으로 선이 그어진다 */
.tag{align-items:center}
.tag::after{content:""; flex:1; height:1px; background:currentColor; opacity:.3;
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .15s}
.tag.in::after{transform:scaleX(1)}

/* 네 칸 — 왼쪽 선이 자란다 */
.g4{position:relative}
.g4::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:currentColor;
  transform:scaleY(0); transform-origin:top; transition:transform .55s var(--ease)}
.g4:hover::before{transform:scaleY(1)}

/* 산출물 항목이 한 줄씩 들어온다 */
.dv li{opacity:0; transform:translateX(-9px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.dv.in li{opacity:1; transform:none}
.dv.in li:nth-child(1){transition-delay:.05s} .dv.in li:nth-child(2){transition-delay:.11s}
.dv.in li:nth-child(3){transition-delay:.17s} .dv.in li:nth-child(4){transition-delay:.23s}
.dv.in li:nth-child(5){transition-delay:.29s} .dv.in li:nth-child(6){transition-delay:.35s}
.dv.in li:nth-child(7){transition-delay:.41s} .dv.in li:nth-child(8){transition-delay:.47s}

/* 사례 카드 — 커서를 따라 빛이 돈다 */
.cs{position:relative; overflow:hidden}
.cs::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 68%)}
.cs:hover::after{opacity:1}

/* 랜딩 축소판 — 사진 자리가 살짝 커진다 */
.lp .band{transition:transform .7s var(--ease)}
.shot:hover .lp .band{transform:scale(1.05)}

/* 숫자 띠에 칸을 나누는 선 */
@media (min-width:760px){ .gauge div + div{border-left:1px solid var(--line-dark); padding-left:18px} }

/* 매체 줄 — 올리면 숫자가 커진다 */
.sh .vv{transition:transform .35s var(--ease)}
.sh:hover .vv{transform:scale(1.06)}

/* 히어로 */
.hero .inner{will-change:opacity}

/* ─── 손가락으로 넘기는 기기에서는 덜어낸다 ─────────────────
   폰에서 스크롤이 걸리는 까닭은 대개 «매 프레임 다시 칠하게 만드는 것들» 이다.
   고정 요소의 혼합 모드, 화면 밖에서도 도는 애니메이션, 터치 중에도 도는 커서 효과. */

/* 관성 스크롤과 싸우지 않도록 부드러운 스크롤은 마우스 기기에서만 */
@media (pointer:coarse){ html{scroll-behavior:auto} }

/* 커서를 따라 도는 빛은 «올릴 수 있는» 기기에서만 */
@media (hover:none){ .cs::after{display:none} }

/* 마퀴는 화면에 들어왔을 때만 돈다 */
.marquee .track{animation-play-state:paused}
.marquee.on .track{animation-play-state:running}

/* 고정 내비의 혼합 모드는 스크롤할 때마다 화면 전체를 다시 칠하게 만든다.
   좁은 화면에서는 끄고, 대신 스크롤을 시작하면 바탕을 깔아 글자가 읽히게 한다. */
@media (max-width:820px){
  nav{mix-blend-mode:normal; border-bottom:1px solid transparent;
    transition:background-color .3s var(--ease), border-color .3s var(--ease)}
  nav .logo, nav .links{color:#fff}
  nav.solid{background:rgba(10,10,10,.94); border-bottom-color:var(--line-dark)}
}

@media (prefers-reduced-motion:reduce){
  h2 .ml > span{transform:none}
  .g4:hover .num,.next a:hover .t,.next a:hover .go{transform:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  body{opacity:1}
  h1 .l > span{transform:none} .lede p,.hero .acts,.gauge{opacity:1; transform:none}
  .rise{opacity:1; transform:none} .fix .was::after{transform:scaleX(1)}
}

/* ── 첫 화면을 한국어로 세울 때 ─────────────────────────────
   영어 표제는 142px 까지 키워도 되지만 한글은 그 크기면 한 줄에 서너 자만 남는다.
   그래서 한글 표제는 따로 단다. */
.hero h1.ko{font-size:clamp(28px,4.9vw,62px); line-height:1.2; letter-spacing:-.04em; max-width:19ch}
@media (max-width:820px){ .hero h1.ko{font-size:clamp(27px,6.4vw,42px); line-height:1.24} }

/* ── 「예시」 표시 ───────────────────────────────────────────
   지어낸 숫자와 실제 숫자를 한 화면에 두면 읽는 쪽이 섞어 읽는다.
   각주로 미루지 않고 숫자 옆에 붙인다. */
.eg{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.08em; font-style:normal; padding:2px 5px; border:1px solid currentColor;
  opacity:.72; white-space:nowrap; vertical-align:middle}
.mock .bar .eg{margin-left:auto; opacity:.62}
@media (max-width:620px){ .mock .bar .eg{display:none} }

/* ── 사례: 문제 → 조치 → 확인된 결과 → 확인 시점 ───────────── */
.flow{margin-top:16px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:10px}
.flow > div{display:grid; grid-template-columns:minmax(0,4.6rem) minmax(0,1fr); gap:4px 12px}
.flow dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.1em; color:#767C84; padding-top:2px}
.flow dd{font-size:14px; line-height:1.7; color:var(--ink)}
.flow dd.wn{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; color:#6B7178;
  font-variant-numeric:tabular-nums}
@media (max-width:520px){ .flow > div{grid-template-columns:1fr} }

/* ── 우리가 만든 것 ─────────────────────────────────────────
   화면 문구는 실제로 운영 중인 랜딩에서 그대로 옮겼다. 지어낸 숫자는 없다. */
.made{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px)}
@media (max-width:860px){ .made{grid-template-columns:1fr} }
.mk{background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden}
.mk-h{background:var(--black); color:var(--white); padding:clamp(20px,2.4vw,28px)}
.mk-n{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--muted); margin-bottom:12px}
.mk-t{font-size:clamp(18px,1.9vw,23px); font-weight:700; line-height:1.4; letter-spacing:-.03em}
.mk-c{display:inline-block; margin-top:16px; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  background:var(--white); color:var(--black); padding:9px 14px}
.mk-d{padding:clamp(18px,2.2vw,24px); display:grid; gap:13px; flex:1; align-content:start}
.mk-d > div{display:grid; grid-template-columns:minmax(0,4.6rem) minmax(0,1fr); gap:4px 12px}
.mk-d dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.06em; color:#767C84; padding-top:2px}
.mk-d dd{font-size:14px; line-height:1.72; color:var(--ink-soft)}
@media (max-width:520px){ .mk-d > div{grid-template-columns:1fr} }

/* 대표 캐릭터는 글자 대신 선 그림이라 안쪽 여백을 준다 */
.wp .mono svg{width:78%; height:78%}

/* ── 맡기면 달라지는 것 ──────────────────────────────────────
   왼쪽에 지금 상태, 오른쪽에 맡긴 뒤. 두 줄을 세로로 쌓되
   「맡긴 뒤」 쪽만 검은 바탕을 깔아 눈이 먼저 가게 한다. */
.gains{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px)}
@media (max-width:860px){ .gains{grid-template-columns:1fr} }
.gn{border:1px solid var(--line); background:var(--white); display:flex; flex-direction:column}
.gn-n{display:flex; align-items:baseline; gap:11px; padding:clamp(16px,1.9vw,21px) clamp(18px,2.1vw,24px) 0;
  font-size:16px; font-weight:700; letter-spacing:-.02em}
.gn-n .en{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.12em; color:#9AA0A6}
.gn-b,.gn-a{padding:clamp(13px,1.6vw,17px) clamp(18px,2.1vw,24px)}
.gn-b{padding-bottom:clamp(15px,1.8vw,19px)}
.gn-b p{font-size:14.5px; line-height:1.72; color:#7C828A}
.gn-a{background:var(--black); margin-top:auto}
.gn-a p{font-size:15px; line-height:1.74; color:var(--muted)}
.gn-a p em{font-style:normal; color:var(--white); font-weight:600}
.gn-l{display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.14em; margin-bottom:7px}
.gn-b .gn-l{color:#A8AEB5}
.gn-a .gn-l{color:var(--muted-dark)}
.gn-a .gn-l::before{content:"→ "}

/* 제작 칸에 붙는 «제작비 없음» 표 — 이게 우리 제일 큰 차별점이라 눈에 걸리게 한다 */
.free{display:inline-block; vertical-align:middle; margin-left:9px; padding:3px 7px 4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.06em; background:var(--white); color:var(--black); border-radius:1px}
.light .free{background:var(--black); color:var(--white)}
.dv .free{position:relative; top:-1px}
.say strong{font-weight:700}
.light .say strong{color:var(--ink)} .dark .say strong{color:var(--white)}
.faq .a strong{font-weight:600; color:var(--ink)}
.tbl2 small{display:block; margin-top:5px; font-size:12.5px; color:#6B7178; line-height:1.6}

/* ── 위아래 숨통 (2026-09-25 대표 지시) ───────────────────────
   구역 여백만 키우면 제목과 내용이 한 덩어리로 붙어 보인다.
   새로 넣은 칸들도 같은 만큼 떼어 준다. */
.gains,.made{margin-top:clamp(40px,5.2vw,70px)}
.shots{margin-top:clamp(40px,5.2vw,70px)}
.say + .gains,.say + .made,.say + .shots{margin-top:clamp(34px,4.4vw,60px)}
.mock{margin-top:clamp(40px,5.2vw,72px)}
.mock-cap{margin-top:16px}
.note{margin-top:clamp(30px,3.6vw,46px)}
.who{margin-top:clamp(40px,5.2vw,70px)}
.doc{margin-top:clamp(34px,4.4vw,58px)}
.faq{margin-top:clamp(36px,4.6vw,62px)}
.acts{margin-top:clamp(30px,3.8vw,48px)}
.hero .acts{margin-top:0}

/* 사례 칸 안도 조금 더 */
.cs{padding:clamp(26px,3vw,36px)}
.flow{margin-top:20px; padding-top:18px}

/* ── 폰 (2026-09-25 실측) ────────────────────────────────────
   375×812 에서 직접 재서 나온 것만 고친다. 가로 넘침은 없었으므로
   폭은 그대로 두고, 손가락이 닿는 크기와 읽히는 크기만 올린다. */
@media (max-width:560px){
  /* 연락 링크가 25px 였다. 손가락은 최소 44px 은 있어야 닿는다. */
  .card .val a{display:inline-flex; align-items:center; min-height:44px; padding:2px 0}
  .card .val{margin-bottom:2px}

  /* 13px 짜리 설명들을 한 단계 키운다 */
  .way .d{font-size:14px}
  footer .co{font-size:13.5px; line-height:1.9}
  .next .go{font-size:13.5px}
  .flow dd,.mk-d dd{font-size:14.5px}
  .gn-b p{font-size:14.5px}
  .gn-a p{font-size:15px}

  /* 칸 안쪽 여백도 조금 — 글이 테두리에 붙어 보였다 */
  .gn-n{padding-top:18px}
  .gn-b,.gn-a{padding-left:18px; padding-right:18px}
  .cs{padding:24px 20px}

  /* 뜬 단추가 본문 끝줄을 가리지 않게 아래를 비운다 */
  footer{padding-bottom:calc(clamp(44px,7vw,74px) + 64px)}
}
@media (max-width:400px){
  /* 좁은 폰에서 내비가 로고에 붙는다 */
  nav .links{gap:7px; font-size:10.5px}
  nav .logo{font-size:17px}
}