/* ===== 랜딩에만 쓰는 색 — 공용 토큰(shared/tokens-c.css)에 없는 것만 여기 =====
   ⛔ 아래 말고 본문에 #색 을 새로 적지 마라. 두 벌이 되면 한쪽만 고쳐져 갈린다.
   (2026-09-15 · 최예린 · 세션 a0453ee2 · 작업표 M-6) */
:root{
  --lp-skel:#DCE3EA;        /* 그림이 오기 전 빈 자리 */
  --lp-bar:#DCE9FB;         /* 막대그래프 바탕 */
  --lp-bar-2:#EEF1F3;       /* 옅은 그러데이션 끝 */
  --lp-bar-3:#EEF1F4;
  --lp-dash:#D1D6DB;        /* 잠긴 카드 점선 */
  --lp-screen:#F4F6F8;      /* 폰 화면 바탕 */
  --lp-night:#0B0F14;       /* 밤 구간 바탕 */
  --lp-violet:#5B5BD6;      /* 소싱 매니저 색 */
  --lp-blue-3:#7BA8E8;
  --lp-amber:#F59E0B;       /* 눈금 주의 — 글자가 아니라 «막대»라 대비 기준 밖 */
  /* «영화 띠» 바탕 — 소재를 안 잘리게(contain) 두면 남는 자리를 이 색이 받는다.
     (2026-09-16 · 최예린 · 세션 a0453ee2) */
  --lp-cine-1:#16283F;      /* 첫 화면 바탕(짙은 남색) */
  --lp-cine-2:#33404D;      /* 본부 색을 못 받았을 때의 기본 바탕 */
  --lp-frame:#15181C;       /* 좁은 화면 제품 카드 테두리(폰 테두리 대신) */
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:auto}
body{background:#fff;color:var(--fg);font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;font-size:17px;line-height:1.5;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent-2)}button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}img,video{display:block}
.mono{font-variant-numeric:tabular-nums}
/* ===== 본문 바로가기 — 키보드로만 다니는 사람이 메뉴를 건너뛰는 길 ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--fg);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:700;font-size:15px;transition:top .2s var(--ease)}
.skip:focus{top:12px;color:#fff;outline:3px solid var(--accent);outline-offset:2px}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;border-radius:6px}

/* ===== 머리 = 안내 막대 + 메뉴 한 덩이 ===== */
.hdr{position:fixed;inset:0 0 auto;z-index:90;padding-top:env(safe-area-inset-top,0px)}
/* 안내 막대 — 결제 열리는 날 이 블록과 .btn-soon 만 되돌리면 된다 */
.lp-notice{background:var(--accent-w);border-bottom:1px solid var(--line-2)}
.lp-notice .in{max-width:1240px;margin:0 auto;padding:10px 40px;display:flex;align-items:center;justify-content:center;gap:9px;text-align:center}
.lp-notice .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--accent);box-shadow:0 0 0 3px rgba(49,130,246,.18)}
.lp-notice .tx{font-size:14px;font-weight:700;line-height:1.5;color:var(--accent-2);letter-spacing:-.01em;word-break:keep-all;text-wrap:pretty}
/* nav */
.nav{position:relative;height:60px;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);display:flex;align-items:center;padding:0 40px;gap:40px;border-bottom:1px solid var(--line)}
.nav .logo{display:flex;align-items:center;min-height:44px}
.nav .logo img{height:22px;width:auto}
.nav .menu{display:flex;gap:30px;font-size:16px;font-weight:600;color:var(--fg-1)}
.nav .menu a{display:flex;align-items:center;min-height:44px}
.nav .cta{margin-left:auto;height:44px;padding:0 18px;border-radius:12px;background:var(--accent-2);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center}
/* «오픈 준비 중» — 누를 수 없는 단추. 색만 죽이지 않고 커서·상태까지 잠근다 */
.btn-soon,.btn-soon:hover{background:var(--bg-2);color:var(--fg-3);box-shadow:none;cursor:not-allowed}
.btn-soon:active{transform:none}
.lp-soon{font-size:14px;font-weight:700;line-height:1.5;color:var(--accent-2);background:var(--accent-w);border-radius:var(--r-sm);padding:13px 18px;margin:20px auto 0;max-width:520px;word-break:keep-all;text-wrap:pretty;text-align:center;text-shadow:none}
/* stage */
.stage{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
/* 위 여백 = «머리 실제 높이 + 24px». 머리 높이는 landing-toss5.js 가 재서 넣는다
   (안내 막대 글이 두 줄이 되는 좁은 화면에서도 안 가려진다). */
.wrap{position:absolute;inset:0;padding:calc(var(--hdr-h,100px) + 24px) max(40px,calc((100vw - 1240px)/2)) 40px;display:flex;align-items:safe center}
/* hero */
#hero .pin{background:#fff}
/* ⛔⛔ 그림칸을 **소재 비율(16:9)로 잠근다** — 그래야 위아래 띠가 0 이 된다
   (2026-09-16 보스 지적 «검은 배경들이 왜생겼어? 글씨는 그림위에 있었는데 왜 나왔어?»).
   [실측 2026-09-16 · 고치기 전] 1280×1083 창에서 그림칸이 1256×1059 인데 소재는 16:9 라
   `contain` 이 위아래 **176px씩 띠**를 만들었고, 제목(`.h-title`)이 그 띠에 앉았다.
   ⚠️ 창이 16:9 일 때만 띠가 거의 0 이라 **그 비율로 찍은 영상에서는 안 보였다** —
   내가 1920×1080 으로만 찍어서 못 본 자리다. «한 비율에서 멀쩡함»은 증거가 아니다.
   ⇒ 칸을 비율로 잠그면 «어느 창 크기에서도 띠 0 · 제목은 언제나 그림 위»가
     조건이 아니라 **구조**로 보장된다(`contain` 은 그대로 둔다 — 좌우 잘림도 여전히 0).
   ★ `margin:auto` + `inset` 으로 가운데 둔다 — `transform` 은 쓰지 않는다.
     `landing-toss5.js:440` 이 `hv.style.transform` 에 줄어드는 효과를 쓰므로
     여기서 transform 을 쓰면 **그 효과가 덮어써서 가운데 두기가 풀린다.** */
.hv{position:absolute;inset:12px;border-radius:24px;overflow:hidden;background:var(--lp-skel);transform-origin:50% 50%;will-change:transform}
/* ⛔⛔ **잠금은 «넓은 창»에서만 건다.** 폰처럼 세로로 긴 화면에서 16:9 로 잠그면
   그림이 가운데 가느다란 띠가 되고 **글이 그림 밖으로 넘친다**
   ([실측 2026-09-16] 390×844 에서 그림 높이 206px · 제목 3줄이 안 들어감 — 찍어서 봤다).
   그 화면은 옛 동작(칸을 꽉 채우고 `contain`)이 그대로 맞다.
   ⚠️ 그러니 이 수리는 **보스가 지적한 넓은 창을 고치고 폰은 안 건드린다** —
     폰에 남는 띠는 여전히 있다(소재가 16:9 뿐이라 자르지 않는 한 못 없앤다). */
@media (min-aspect-ratio: 1/1),(min-width: 700px){
  .hv{inset:12px;margin:auto;aspect-ratio:16/9;
    width:auto;height:auto;max-width:calc(100% - 24px);max-height:calc(100% - 24px)}
}
/* ⛔⛔ `object-fit:cover` 를 쓰지 마라 — 세로로 긴 화면에서 **좌우가 날아간다**
   (2026-09-16 · 보스 지적 «오브젝트들이 좌우가 다짤려나와» · 최예린 · 세션 a0453ee2).
   [실측 2026-09-16 · 고치기 전 좌우 잘림률] 390×844 **75%** · 834×1112 58% ·
   1112×834 24% · 1440×900 9% · 1920×1080 0.9%.
   소재는 16:9 가 아니라 **가로세로비 1.792**(첫화면 1600×893 · 본부 1928×1076)라
   «16:9 면 안 잘린다» 같은 조건으로 가르면 1920 에서도 1% 가 남는다.
   ⇒ 조건 없이 **언제나 `contain`** 으로 둔다 — 그래야 «어느 폭에서도 좌우 0%» 가
     조건이 아니라 **구조**로 보장된다(소재를 다시 구워 비율이 바뀌어도 안 샌다).
   남는 띠는 아래 `::before` 의 브랜드색 바탕이 받는다(빈 흰 띠가 아니다). */
.hv video,.hv img,.hv canvas.fx{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.hv::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(130% 90% at 50% 45%,var(--lp-cine-1) 0%,var(--lp-night) 72%)}
/* 1번 · 자동재생 루프 — 스크롤 시작 전까지 여기가 «살아 있는 화면»이다.
   그림 연속(canvas)이 준비되면 그쪽으로 넘기고 이건 사라진다. */
.hv video.loop{opacity:1;transition:opacity .6s var(--ease-soft);z-index:1}
.hv.seq-on video.loop{opacity:0}
.hv canvas.fx{opacity:0;transition:opacity .45s var(--ease);z-index:2}
/* ⛔⛔ 본부 소개는 **진짜 동영상**이 돈다 — 스크롤로 그림을 되감지 않는다
   (2026-09-15 · 보스 지시: «본부 화면전에 나오는 것들 토스처럼 동영상을 적절하게 활용해»).
   되감기는 «지나가는 빠르기»에 묶여서 빨리 지나가면 뚝뚝 끊긴다. 자동재생 영상은
   스크롤과 무관하게 **제 속도로 부드럽게** 돈다 — 토스가 큰 화면에 쓰는 방식이다.
   ⚠️ 소재는 필요할 때만 받는다(`preload="none"` + 가까워지면 그때 주소를 넣는다). */
.dhero .im video.loop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;opacity:0;transition:opacity .5s var(--ease-soft)}
.dhero .im video.loop.on{opacity:1}
/* ⛔ 이 줄은 **일부러** 있다 — 본부 다섯 구간은 «스크롤로 되감는 그림»이 아니라
   **진짜 자동재생 영상**(`video.loop`)이 돈다(2026-09-15 보스 지시:
   «본부 화면전에 나오는 것들 토스처럼 동영상을 적절하게 활용해»).
   그림 연속은 **첫 화면에만** 쓴다. 여기 캔버스는 지우지 않고 숨겨 둔다 —
   `tests/.../test_frame_sequences_actually_draw` 가 «배선이 살아 있나»를 그 캔버스의
   픽셀로 재기 때문이다(숨겨도 그리기는 돈다). 지우면 그 감시가 죽는다.
   (2026-09-16 · 최예린 · 세션 a0453ee2 — 다른 담당이 «안 그려진다»고 알려 와서 뜻을 적어 둔다) */
.dhero .im canvas.fx{display:none}
.hv.ready canvas.fx{opacity:1}
.hv img{transition:opacity .45s var(--ease)}.hv.ready img{opacity:0}
/* hero screen compositing */
/* ⛔ .h-ui / .hu-* 는 «굽기 원본»의 모양표다 — 화면에서는 이제 안 쓰지만 지우지 마라.
   tools/hero_card.html 이 이 규칙으로 카드를 그리고, 그 그림이 hero-baked.mp4 안에 들어간다.
   여기를 고치고 tools/render_card.py → tools/bake_hero.py 를 돌리면 영상 속 화면이 바뀐다.
   (2026-09-15 · 최예린 · 세션 ad9c9eed) */
.h-ui{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;opacity:0;pointer-events:none;z-index:1;padding:76px 18px 0;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;font-family:"Pretendard Variable",Pretendard,sans-serif;color:var(--fg);letter-spacing:-.02em;backface-visibility:hidden;background:var(--lp-screen)}
.hv.ui-on .h-cap{opacity:0;transition:opacity .3s}
.h-mul,.h-top{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}.h-mul{z-index:2;mix-blend-mode:multiply}.h-top{z-index:3;image-rendering:auto}
.hu-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px}.hu-top b{font-size:30px;font-weight:800;letter-spacing:-.03em}.hu-go{padding:10px 18px;border-radius:999px;background:var(--go-w);color:var(--go);font-size:22px;font-weight:800;letter-spacing:0}
.hu-cd{background:#fff;border-radius:24px;padding:16px 20px;box-shadow:0 2px 10px rgba(25,31,40,.06)}
.hu-who{display:flex;align-items:center;gap:14px}.hu-who i{width:52px;height:52px;border-radius:50%;background:var(--lp-violet);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800;font-style:normal;flex:none}.hu-who h4{margin:0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.035em}
.hu-amt{margin-top:12px;font-size:54px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.hu-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.hu-kv div{background:var(--bg-2);border-radius:16px;padding:14px 16px;font-size:20px;color:var(--fg-3);font-weight:800;display:flex;justify-content:space-between;align-items:baseline}.hu-kv b{font-size:30px;color:var(--fg);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.hu-kv b.g{color:var(--go)}
.hu-ch{display:flex;justify-content:space-between;align-items:baseline}.hu-ch span{font-size:22px;font-weight:800;color:var(--fg-1)}.hu-ch em{font-style:normal;color:var(--go);font-size:32px;font-weight:800;letter-spacing:-.03em}
.hu-bars{display:flex;align-items:flex-end;gap:8px;height:48px;margin-top:8px}.hu-bars i{flex:1;border-radius:6px 6px 0 0;background:var(--lp-bar)}.hu-bars i.hi{background:var(--accent)}
.hu-warn{background:var(--cau-w);color:var(--caution);border-radius:18px;padding:10px 20px;font-size:26px;font-weight:800;display:flex;justify-content:space-between;align-items:center}.hu-warn b{font-size:32px;letter-spacing:-.02em}
.h-title{position:absolute;left:0;right:0;bottom:8vh;display:flex;justify-content:center;gap:0 44px;padding:0 60px;font-size:clamp(40px,4.6vw,68px);font-weight:700;letter-spacing:-0.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.18);white-space:nowrap;z-index:2}
.h-title span{display:inline-block;will-change:transform,opacity}
.h-cap{position:absolute;left:max(60px,calc((100vw - 1240px)/2 + 40px));top:50%;transform:translateY(-50%);z-index:2;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.h-cap b{display:block;font-size:clamp(34px,3.6vw,54px);font-weight:700;letter-spacing:-0.03em;line-height:1.22;opacity:0;transform:translateY(20px)}
.h-cap p{margin-top:22px;font-size:18px;font-weight:600;line-height:1.55;max-width:380px;opacity:0;transform:translateY(16px)}
.h-cap .on{opacity:1;transform:none}.h-cap b,.h-cap p{transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* white panel that rises over the hero at its end */
.h-wipe{position:absolute;inset:0;background:#fff;transform:translateY(100%);will-change:transform}
/* persistent phone */
#phone{position:fixed;top:50%;left:50%;width:min(470px,46vh);aspect-ratio:966/1790;z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;perspective:1600px;container-type:inline-size}
#phone .body{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 50px 70px rgba(25,31,40,.28))}
#phone .body img{position:absolute;inset:0;width:100%;height:100%}
#phone .float{position:absolute;left:2%;top:20%;width:76%;font-size:3.1cqw;line-height:1.35;opacity:0;transform:translate(-8%,4%) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--spring);pointer-events:none;z-index:3}
#phone .float.on{opacity:1;transform:translate(-12%,0) scale(1.08)}
/* 손가락 기기에서 폰이 왼쪽일 때 — 카드를 거울처럼 오른쪽으로(`.rt` 는 landing-toss5.js 가 붙인다).
   왼쪽으로 튀어나가면 화면 밖으로 잘렸다(2026-09-17 · 최예린 · 세션 601106be · 보스 폰 사진). */
#phone .float.rt{left:auto;right:2%;transform:translate(8%,4%) scale(.96)}
#phone .float.rt.on{transform:translate(12%,0) scale(1.08)}
#phone .body:has(.dn.on) .float.rt{transform:translate(8%,4%) scale(.96)!important}
#phone .float .cd{box-shadow:0 2.4em 4em rgba(25,31,40,.22),0 .2em .6em rgba(0,0,0,.08);border-radius:1.6em}
#phone .float .cd .act,#phone .float .cd .nt{display:none}
/* ⛔ 떠 있는 카드는 폰과 함께 **12도 기울어** 있다 — 그래서 한 줄의 «이름»과 «값»이
   화면에서는 세로로 벌어지고, 값이 자기 이름보다 **아랫줄 이름에 더 가까워진다.**
   [실측 2026-09-15] «정산 반영» 과 그 값은 50px 떨어졌는데, 바로 아래 «고객 안내 발송» 과는 18px
   (줄 간격은 31px) ⇒ 눈은 «고객 안내 발송 12/12» 로 **잘못 읽는다**.
   ✅ 기울기는 그대로 두고(폰에 붙어 보여야 한다) **줄마다 옅은 띠**를 깔아 한 줄을 묶는다.
   ⛔ 카드만 기울기를 되돌리는 방법은 써 보고 버렸다 — 숫자는 50→11px 로 좋아지는데
      카드가 폰과 **반대로 기운 것처럼** 보여 더 나빴다(2026-09-15 · 최예린 · 세션 a0453ee2). */
#phone .float .cd .rows>div{background:rgba(25,31,40,.045);border-radius:.55em;padding:.42em .7em;margin-bottom:.34em;border-top:0}
#phone .float .cd .rows>div:last-child{margin-bottom:0}
.scrn.lift .sc.on .feed{filter:blur(1.5px)}.scrn.lift .sc.on .cd.focus{opacity:.35;transform:none;box-shadow:none}
#phone .scrn{position:absolute;left:13.87%;top:5.03%;width:69.15%;height:82.01%;border-radius:12% / 5.6%;overflow:hidden;background:#fff}

/* ===== in-app phone screens (toss5) ===== */
.sc{position:absolute;inset:0;background:var(--bg-2);display:flex;flex-direction:column;opacity:0;transform:translateY(6%);transition:opacity .5s var(--ease),transform .5s var(--ease);font-size:3.1cqw;line-height:1.35;overflow:hidden;--ip:.5}
.sc.on{opacity:1;transform:none}
.sc .st{display:flex;justify-content:space-between;align-items:center;padding:3.4em 2.2em 0;font-size:.82em;font-weight:700;color:var(--fg)}
.sc .st .sig{display:flex;gap:.2em;align-items:flex-end}.sc .st .sig i{width:.35em;background:var(--fg);border-radius:.1em;height:.6em}.sc .st .sig i:nth-child(2){height:.85em}.sc .st .sig i:nth-child(3){height:1.1em}
.sc .hd{display:flex;align-items:center;gap:.7em;padding:1.5em 1.6em .8em}
/* ⛔ 문서번호(«APV-0914-002») 색을 `--accent`(#3182F6)로 두지 마라 — 회색 바탕에서 대비 3.37 이다.
   `--accent-2`(#1B64DA) 면 4.96 으로 기준(4.5)을 넘는다. (2026-09-16 · 최예린 · 세션 a0453ee2) */
.sc .hd b{font-size:1.4em;font-weight:800;letter-spacing:-.025em;color:var(--fg)}.sc .hd small{margin-left:auto;color:var(--accent-2);font-weight:700;font-size:.9em}
.sc .feed{flex:1;padding:.3em 1.3em 5.6em;display:flex;flex-direction:column;gap:.65em;position:relative;min-height:0;overflow:hidden}
.av{flex:none;width:2.2em;height:2.2em;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:.85em;font-weight:800;font-style:normal;letter-spacing:0}
/* ⛔ 동그란 이름표의 **흰 글자 대비** — 직원 색 그대로면 밝은 색에서 기준 미달이다.
   [실측 · WCAG] 흰 글자 대비: `#F57C00` **2.70** · `#B8860B` 3.25 · `#D97757` 3.12 · `#0097A7` 3.51.
   ⇒ 글자는 그대로 두고 **동그라미만** 살짝 어둡게 깔아 대비를 올린다(#F57C00 2.70 → **4.74**).
   ⚠️ 직원 색 자료(`landing-higgs-data.js`)는 조직도·데스크톱 화면도 같이 쓰므로 **안 건드렸다** —
      폰 속 화면(`.sc`)에서만 깐다. 그 화면이 이제 크게 읽히기 때문이다.
   (2026-09-16 · 최예린 · 세션 a0453ee2) */
.sc .av{position:relative;isolation:isolate}
.sc .av::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(25,31,40,.32);z-index:-1}
.cd{background:#fff;border-radius:1.4em;padding:1.15em 1.3em;box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative}
.sc .cd{transition:opacity .5s,filter .5s,box-shadow .5s,transform .25s linear;transform:scale(.97);opacity:.5;filter:blur(.7px)}
.sc .cd.clear{transform:none;opacity:1;filter:none}
.sc .cd.focus{transform:translateX(-3%) translateY(calc((.5 - var(--ip))*12%)) scale(1.05);opacity:1;filter:none;box-shadow:0 1.6em 3em rgba(25,31,40,.18),0 .15em .4em rgba(0,0,0,.06);z-index:2}
.cd .row{display:flex;align-items:center;gap:.55em;font-size:.88em;font-weight:700;color:var(--fg-2)}.cd .row small{margin-left:auto;color:var(--fg-3);font-weight:600}.cd .row .ch{margin-left:auto}
.cd h4{margin-top:.7em;font-size:1.25em;font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.3}
.cd .amt{margin-top:.45em;font-size:1.85em;font-weight:800;letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.1}.cd .amt span{font-size:.55em;margin-left:.1em}.cd .amt small{display:block;font-size:.42em;color:var(--fg-3);font-weight:600;letter-spacing:0;margin-top:.35em}
.cd .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .7em;margin-top:.8em;font-size:.85em;font-weight:600;color:var(--fg-3)}.cd .meta span b{color:var(--fg)}
.ch{font-style:normal;padding:.25em .7em;border-radius:1em;font-weight:800;font-size:.9em;white-space:nowrap}.ch.go{background:var(--go-w);color:var(--go)}.ch.cau{background:var(--cau-w);color:var(--caution)}.ch.acc{background:var(--accent-w);color:var(--accent-2)}.ch.no{background:var(--no-w);color:var(--nogo)}
.cd .nt{margin-top:.8em;font-weight:600;padding:.8em 1em;border-radius:1em;background:var(--accent-w);color:var(--accent-2);line-height:1.4;font-size:.9em}.cd .nt.go{background:var(--go-w);color:var(--go)}.cd .nt.cau{background:var(--cau-w);color:var(--caution)}
.cd .act{display:flex;gap:.5em;margin-top:1em}.cd .act span{flex:1;height:3em;border-radius:1em;display:grid;place-items:center;font-weight:800;background:var(--bg-2);color:var(--fg-2);font-size:.95em}.cd .act .p{flex:1.6;background:var(--accent-2);color:#fff}
.cd.bub{border-radius:1.4em 1.4em 1.4em .4em;background:var(--accent-w);box-shadow:none}.cd.bub .row{color:var(--accent-2)}.cd.bub .row small{color:var(--fg-2)}   /* 옛 `--lp-blue-3` 는 연파랑 바탕에서 대비 1.9 였다 */.cd.bub p{margin-top:.6em;font-weight:700;color:var(--accent-2);line-height:1.45;font-size:.98em}
.cd .hint{margin-top:.7em;font-size:.82em;color:var(--fg-3);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:.35em;height:3.8em;margin-top:.8em}.bars i{flex:1;border-radius:.3em .3em 0 0;background:var(--lp-bar)}.bars i.hi{background:var(--accent)}
.gauge{height:.7em;border-radius:1em;background:var(--bg-2);overflow:hidden;margin-top:.9em}.gauge i{display:block;height:100%;background:var(--accent);border-radius:1em}.gauge.go i{background:var(--go)}.gauge.cau i{background:var(--lp-amber)}
.kv2{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.8em}.kv2 div{background:var(--bg-1);border-radius:1em;padding:.75em .9em;font-size:.82em;color:var(--fg-3);font-weight:600}.kv2 b{display:block;font-size:1.5em;color:var(--fg);letter-spacing:-.02em;margin-top:.15em;font-variant-numeric:tabular-nums}
.rows{margin-top:.4em}.rows div{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;border-top:1px solid var(--bg-2);font-size:.88em;font-weight:600;color:var(--fg-2)}.rows div:first-child{border-top:0}.rows b{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.pills{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.8em}.pills span{padding:.35em .8em;border-radius:1em;background:var(--bg-2);color:var(--fg-3);font-size:.82em;font-weight:700}.pills span.on{background:var(--accent-w);color:var(--accent-2)}.pills span.w{background:var(--cau-w);color:var(--caution)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-top:.8em}.tiles i{aspect-ratio:1;border-radius:.8em;background:linear-gradient(160deg,color-mix(in oklch,var(--t) 22%,#fff),color-mix(in oklch,var(--t) 55%,#fff));display:flex;flex-direction:column;justify-content:flex-end;padding:.5em .6em;font-style:normal;color:#fff;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.2)}.tiles i small{font-size:.65em;font-weight:700}.tiles i.pick{outline:.22em solid var(--accent);outline-offset:.1em}.tiles.six{grid-template-columns:repeat(6,1fr)}.tiles.six i{aspect-ratio:3/4;border-radius:.5em}
/* ⛔ 흰 글씨를 얹는 파랑은 `--accent`(#3182F6)가 아니라 `--accent-2`(#1B64DA) 다 —
   [실측 · WCAG] 흰 글씨 대비 3.71 → **5.41**(기준 4.5). 폰에서 이 띠가 커져 글이 실제로 읽히므로
   장식이 아니라 «읽는 글»이 됐다. (2026-09-16 · 최예린 · 세션 a0453ee2) */
.sc .sl{position:absolute;left:1.3em;right:1.3em;bottom:1.1em;z-index:4;height:4.4em;border-radius:2.2em;background:var(--accent-2);display:grid;place-items:center;font-weight:800;color:#fff;overflow:hidden;font-size:1.05em;box-shadow:0 .6em 1.8em rgba(49,130,246,.35);padding-left:1.8em}
.sc .sl::after{content:"››";margin-left:.4em;opacity:.6;font-size:1.15em;position:absolute;left:calc(50% + 3.2em);top:50%;transform:translateY(-56%)}
.sc .feed:has(.sl)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6.5em;background:linear-gradient(180deg,rgba(242,244,246,0),var(--bg-2) 55%);z-index:3;pointer-events:none}
.sc .sl i{position:absolute;left:.35em;top:.35em;width:3.7em;height:3.7em;border-radius:50%;background:#fff;transition:left 1.1s var(--ease-soft);display:grid;place-items:center}
.sc .sl i::after{content:"";width:.8em;height:.8em;border-right:.24em solid var(--accent);border-top:.24em solid var(--accent);transform:rotate(45deg);margin-left:-.25em}
.sc .sl.go{background:var(--accent-2)}.sc .sl.go i{left:calc(100% - 4.05em)}
.sc .dn{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12%;opacity:0;transition:opacity .4s;z-index:5}
.sc .dn.on{opacity:1}#phone .body:has(.dn.on) .float{opacity:0!important;transform:translate(-8%,4%) scale(.96)!important}.sc .dn .ck{width:7em;height:7em;border-radius:50%;background:var(--accent);display:grid;place-items:center;transform:scale(.5);transition:transform .5s var(--spring)}.sc .dn.on .ck{transform:none}
.sc .dn .ck::after{content:"";width:2.4em;height:1.3em;border-left:.5em solid #fff;border-bottom:.5em solid #fff;transform:rotate(-45deg) translate(.15em,-.25em)}
.sc .dn h5{font-size:1.9em;font-weight:800;margin-top:1.4em;letter-spacing:-0.02em;color:var(--fg)}.sc .dn p{margin-top:.6em;font-weight:600;color:var(--fg-2);font-size:1.05em}
/* ⛔ 탭 이름 색을 `--fg-5`(#B0B8C1 · 흰 바탕 대비 2.0)로 두지 마라 — 폰에서 이 글자가 커졌다 */
.sc .tab{flex:none;position:relative;z-index:3;display:flex;justify-content:space-around;padding:.8em 0 2.6em;background:#fff;border-top:1px solid var(--bg-3);font-size:.78em;font-weight:700;color:var(--fg-3)}
.sc .tab span{display:flex;flex-direction:column;align-items:center;gap:.3em}.sc .tab span.on{color:var(--fg)}.sc .tab svg{width:2em;height:2em}
/* ===== desktop app (pricing) ===== */
#desk{position:fixed;top:50%;left:50%;width:min(900px,58vw);aspect-ratio:1280/840;z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;perspective:2200px;container-type:inline-size}
#desk .win{position:absolute;inset:0;border-radius:1.5cqw;background:#fff;box-shadow:0 50px 100px rgba(25,31,40,.22),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;font-size:1.32cqw;line-height:1.35;will-change:transform;transform-style:preserve-3d}
#desk .pane{position:absolute;inset:0;transition:opacity .5s;will-change:transform}#desk .pane.ros{display:grid;grid-template-columns:24% 1fr}#desk .pane.inb{opacity:0;pointer-events:none}#desk.inb .pane.inb{opacity:1}#desk.inb .pane.ros{opacity:0}
#desk iframe{position:absolute;left:0;top:0;width:1280px;height:840px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
/* 뼈대 = 결재함이 아직 안 왔을 때 보이는 회색 자리표시. 흰 판이 보이는 것을 막는다.
   (2026-09-15 · 최예린 · 세션 ad9c9eed) */
.sc .emb .skel{position:absolute;inset:0;background:var(--bg-2);padding:9% 6% 0;display:flex;flex-direction:column;gap:4%}
.sc .emb .skel i{display:block;border-radius:3cqw;background:linear-gradient(90deg,var(--bg-3),var(--lp-bar-2),var(--bg-3));background-size:200% 100%;animation:skelw 1.4s linear infinite}
.sc .emb .skel i:nth-child(1){height:7%;width:58%}.sc .emb .skel i:nth-child(2){height:22%}.sc .emb .skel i:nth-child(3){height:18%}.sc .emb .skel i:nth-child(4){height:14%}
@keyframes skelw{to{background-position:-200% 0}}
.sc .emb{position:absolute;inset:0;background:var(--bg-2)}.sc .emb iframe{position:absolute;left:0;top:0;width:402px;height:874px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.d-side{background:var(--bg-1);border-right:1px solid var(--bg-3);padding:1.1em 1em .9em;display:flex;flex-direction:column;overflow:hidden;font-size:.84em}
.d-tl{display:flex;gap:.45em;margin-bottom:1.2em}.d-tl i{width:.8em;height:.8em;border-radius:50%;background:var(--bg-3)}
.d-brand img{height:1.3em;width:auto;margin:0 .2em .4em}
.d-lbl{font-size:.72em;font-weight:800;color:var(--fg-4);letter-spacing:.06em;margin:.7em .6em .25em}
.d-lnk{display:flex;align-items:center;gap:.55em;padding:.5em .7em;border-radius:.7em;font-weight:800;color:var(--fg-2);font-size:.95em}.d-lnk.on{background:var(--accent-w);color:var(--accent-2)}.d-lnk svg{width:1.2em;height:1.2em}.d-lnk em{margin-left:auto;font-style:normal;background:var(--accent);color:#fff;border-radius:1em;padding:.05em .55em;font-size:.75em}
.d-sub{padding:.18em .7em .18em 2.4em;font-size:.86em;font-weight:600;color:var(--fg-3);display:flex;justify-content:space-between;gap:.5em}.d-sub small{color:var(--fg-5);font-weight:600;white-space:nowrap}.d-sub.on{color:var(--fg);font-weight:800}
.d-dept{display:flex;align-items:center;gap:.5em;padding:.3em .7em .12em;font-weight:800;font-size:.88em;color:var(--fg)}.d-dept i{width:.55em;height:.55em;border-radius:50%}
.d-emp{display:flex;align-items:center;gap:.5em;padding:.14em .7em .14em 1.7em;font-size:.84em;font-weight:600;color:var(--fg-1);transition:opacity .5s,filter .5s}.d-emp i{width:1.45em;height:1.45em;border-radius:50%;color:#fff;font-size:.72em;display:grid;place-items:center;font-weight:800;font-style:normal}
.d-emp .lk{margin-left:auto;font-size:.72em;color:var(--fg-5);font-weight:800;opacity:0;transition:opacity .4s}
#desk.p-solo .d-emp[data-tier=team],#desk.p-solo .d-emp[data-tier=office],#desk.p-team .d-emp[data-tier=office]{opacity:.42;filter:grayscale(1)}
#desk.p-solo .d-emp[data-tier=team] .lk,#desk.p-solo .d-emp[data-tier=office] .lk,#desk.p-team .d-emp[data-tier=office] .lk{opacity:1}
.d-plan{margin-top:auto;background:#fff;border:1px solid var(--bg-3);border-radius:.8em;padding:.6em .8em;font-size:.84em;font-weight:700;display:flex;gap:.5em;align-items:baseline;color:var(--fg-3)}.d-plan b{color:var(--fg);font-weight:800}.d-plan small{margin-left:auto;font-variant-numeric:tabular-nums}
.d-main{padding:1.3em 1.8em 1.2em;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.d-top{display:flex;align-items:center;gap:.9em}.d-top b{font-size:1.5em;font-weight:800;letter-spacing:-.025em;color:var(--fg)}.d-top small{color:var(--fg-3);font-weight:600}.d-top .on{margin-left:auto;background:var(--go-w);color:var(--go);padding:.3em .8em;border-radius:1em;font-weight:800;font-size:.85em}
.d-tag{margin-top:.3em;font-size:1em;font-weight:600;color:var(--fg-2)}
.d-ros{margin-top:1.1em;display:flex;flex-direction:column;gap:.8em}
.d-ros h6{display:flex;align-items:center;gap:.5em;font-size:.9em;font-weight:800;color:var(--fg);margin:0 0 .4em}.d-ros h6 i{width:.55em;height:.55em;border-radius:50%}.d-ros h6 small{color:var(--fg-4);font-weight:600;font-size:.85em}
.d-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.d-tile{display:flex;align-items:center;gap:.55em;border:1px solid var(--bg-3);border-radius:.9em;padding:.55em .7em;font-size:.9em;transition:opacity .5s,filter .5s;position:relative}
.d-tile .av{width:2em;height:2em;font-size:.8em}.d-tile b{display:block;font-weight:800;color:var(--fg)}.d-tile span{font-size:.78em;color:var(--fg-4);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em;display:block}
.d-tile em{margin-left:auto;font-style:normal;font-size:.72em;font-weight:800;padding:.2em .55em;border-radius:1em;white-space:nowrap}.d-tile .st{background:var(--go-w);color:var(--go)}.d-tile .lk{display:none;background:var(--bg-2);color:var(--fg-4)}
#desk.p-solo .d-tile[data-tier=team],#desk.p-solo .d-tile[data-tier=office],#desk.p-team .d-tile[data-tier=office]{opacity:.45;filter:grayscale(1)}
#desk.p-solo .d-tile[data-tier=team] .st,#desk.p-solo .d-tile[data-tier=office] .st,#desk.p-team .d-tile[data-tier=office] .st{display:none}
#desk.p-solo .d-tile[data-tier=team] .lk,#desk.p-solo .d-tile[data-tier=office] .lk,#desk.p-team .d-tile[data-tier=office] .lk{display:inline}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8em;margin-top:1.2em}
.d-grid .cd{border:1px solid var(--bg-3);box-shadow:none;border-radius:1.1em;padding:.9em 1em;font-size:.92em;transition:opacity .5s,filter .5s}.d-grid .cd .amt{font-size:1.5em}.d-grid .cd .nt{display:none}.d-grid .cd .act{margin-top:.7em}.d-grid .cd .act span{height:2.5em;font-size:.88em}
.d-grid .cd .lk{position:absolute;inset:0;border-radius:inherit;background:rgba(249,250,251,.86);display:flex;align-items:center;justify-content:center;gap:.25em;font-weight:700;color:var(--fg-3);font-size:.95em;opacity:0;transition:opacity .5s;backdrop-filter:blur(2px)}.d-grid .cd .lk b{color:var(--accent);margin-right:.25em}
#desk.p-solo .d-grid .cd[data-tier=team] .lk,#desk.p-solo .d-grid .cd[data-tier=office] .lk,#desk.p-team .d-grid .cd[data-tier=office] .lk{opacity:1}
/* ===== plan visual: org chart ===== */
#plan{position:fixed;top:50%;left:50%;width:min(680px,48vw);z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;container-type:inline-size}
.pf-hd{display:flex;align-items:baseline;justify-content:center;gap:.3em;font-size:clamp(20px,3.6cqw,30px);font-weight:800;letter-spacing:-.03em;color:var(--fg);margin-bottom:1.1em}
.pf-hd .pf-n{font-size:1.6em;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.pf-hd em{font-style:normal;margin-left:.6em;font-size:.6em;font-weight:800;color:var(--accent-2);background:var(--accent-w);padding:.3em .8em;border-radius:1em;align-self:center}
.pf-org{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:2cqw}
.pf-col{display:flex;flex-direction:column;gap:1.6cqw}
.pf-col h6{margin:0 0 .3cqw;display:flex;align-items:center;gap:.5em;font-size:clamp(10px,1.9cqw,14px);font-weight:800;color:var(--fg-2);white-space:nowrap;justify-content:center}.pf-col h6 i{width:.55em;height:.55em;border-radius:50%;flex:none}
.idc{background:#fff;border-radius:2.2cqw;box-shadow:0 1.2cqw 3cqw rgba(25,31,40,.10),0 0 0 1px rgba(0,0,0,.04);padding:2cqw 1cqw 1.6cqw;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:clamp(9px,1.8cqw,13px);color:var(--fg);transition:transform .6s var(--spring),opacity .45s,filter .45s,box-shadow .45s;will-change:transform,opacity}
.idc .av{width:3.4em;height:3.4em;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:1.2em;font-weight:800;box-shadow:0 .4em 1em color-mix(in oklch,var(--c) 40%,transparent);transition:background .4s}
.idc b{margin-top:.9em;font-size:1.05em;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.idc em{margin-top:.7em;font-style:normal;font-size:.8em;font-weight:800;color:var(--go);background:var(--go-w);padding:.3em .7em;border-radius:1em;display:flex;align-items:center;gap:.35em}.idc em::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--go)}
.idc u{display:none;text-decoration:none;margin-top:.7em;font-size:.8em;font-weight:800;color:var(--fg-3);background:var(--bg-2);padding:.3em .7em;border-radius:1em;white-space:nowrap}
.idc.lock{box-shadow:none;background:var(--bg-1);outline:1px dashed var(--lp-dash);transform:scale(.94)}
.idc.lock .av{background:var(--fg-4)!important;box-shadow:none}.idc.lock b{color:var(--fg-3)}.idc.lock em{display:none}.idc.lock u{display:block}
.idc.on{transform:none}
/* ===== department intro heroes ===== */
.dhero .pin{background:#fff}
/* ⛔⛔ 첫 화면(`.hv`)과 **같은 이유**로 소재 비율(16:9)에 잠근다 — 위 `.hv` 주석 참조.
   칸이 소재와 같은 모양이 되므로 `contain` 이 만들던 어두운 띠가 0 이 되고,
   칸 안에 넣은 글이 **언제나 그림 위**에 선다. 남는 자리는 `.dhero .pin{background:#fff}` 이다. */
.dhero .im{position:absolute;inset:0;overflow:hidden;background:var(--dc,var(--lp-skel));will-change:transform,opacity;transform-origin:50% 50%;box-shadow:0 40px 90px rgba(25,31,40,.18)}
/* 위 `.hv` 와 **같은 조건**으로 잠근다 — 왜 넓은 창에서만인지는 거기 주석에 있다. */
@media (min-aspect-ratio: 1/1),(min-width: 700px){
  .dhero .im{margin:auto;aspect-ratio:16/9;width:auto;height:auto;max-width:100%;max-height:100%}
}
/* ⛔ 좌우 잘림 0% 는 «조건»이 아니라 «구조»로 — 위 `.hv` 절의 설명이 정본이다.
   [실측 2026-09-16 · 고치기 전 본부 소개 좌우 잘림률] 390×844 **74%** · 744×1133 63% ·
   834×1112 58% · 1112×834 26% · 1280×800 11% · 1440×900 11% · 1920×1080 1%. */
.dhero .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.dhero .im canvas.fx{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s;z-index:1}.dhero .im.ready canvas.fx{opacity:1}
/* 남는 띠를 받는 바탕 — 그 본부의 색을 아주 어둡게 깐다(흰 띠가 아니라 «영화 띠»가 된다).
   ⛔ 여기에 흐림(blur)을 쓰지 마라 — 소개가 폰으로 줄어드는 18% 구간에서 상자가 매 장
      크기가 바뀌어 흐림을 매번 다시 그려야 한다. 이 화면의 규칙은 «한 장도 안 끊기게» 다. */
.dhero .im::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(130% 90% at 50% 45%,color-mix(in oklch,var(--dc,var(--lp-cine-2)) 42%,var(--lp-night)) 0%,var(--lp-night) 72%)}
.dhero .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 40%);pointer-events:none;z-index:2}
/* 위 자리 = «화면의 12%» 와 «머리 막대 아래 16px» 중 **더 아래** — 좁은 화면에서는 머리가
   화면의 12% 보다 두꺼워서 첫 글이 막대에 붙어 버린다([실측 390×844] 머리 96px vs 12vh=101px).
   (2026-09-16 · 최예린 · 세션 a0453ee2) */
.dhero .cap{position:absolute;left:0;right:0;top:max(12vh,calc(var(--hdr-h,100px) + 16px));text-align:center;color:#fff;z-index:3;text-shadow:0 2px 24px rgba(0,0,0,.3);pointer-events:none;padding:0 40px}
.dhero .cap b{display:block;font-size:clamp(38px,4.6vw,66px);font-weight:800;letter-spacing:-.035em;line-height:1.15;opacity:0;transform:translateY(24px);transition:all .7s var(--ease)}.dhero .cap.c1 b{font-size:clamp(44px,5.4vw,80px)}.dhero .cap.c2{top:auto;bottom:14vh;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.dhero .cap span{display:block;margin-top:16px;font-size:clamp(18px,1.6vw,22px);font-weight:600;opacity:0;transform:translateY(16px);transition:all .7s var(--ease) .1s}
.dhero .cap.on b,.dhero .cap.on span{opacity:1;transform:none}
/* list stages */
.ls .pin{background:#fff}.ls.g .pin{background:linear-gradient(180deg,var(--bg-1),var(--lp-bar-3))}.ls.b .pin{background:radial-gradient(120% 90% at 70% 20%,var(--accent-w) 0%,var(--bg-1) 55%,#fff 100%)}
/* ⛔ 위쪽«만» 연다 — 아래·양옆은 그대로 자른다 (2026-09-17 · 최예린 · 세션 6d7480ae).
   다가오는 동안 글을 끌어올려 미리 들이는데(`landing-toss5.js` 의 `lsEnter`), 기본
   `.pin{overflow:hidden}` 이 pin 위끝에서 바로 잘라 버려 **끌어올린 글이 안 보인다.**
   ⛔ 그렇다고 `overflow:visible` 로 통째로 열면 안 된다 — 창이 낮을 때 항목이 아래로
     넘치면(`align-items:safe center` 가 위로 붙는다) **다음 구간까지 흘러내린다.**
     `overflow` 는 «위만 열기»를 못 하므로 자르는 모양을 따로 준다.
   ⛔ 여는 폭 30vh 는 **기본값일 뿐**이다 — 끌어올리는 최대치(`off + 0.13화면` ≈ 0.32화면)보다
   작아서 윗줄이 잘렸다(2026-09-17 정정). 그 이상 올릴 때는 `lsEnter` 가 올린 만큼 직접 연다. */
.ls .pin{overflow:visible;clip-path:inset(-30vh 0 0 0)}
.ls.r .wrap{justify-content:flex-end}.ls.r .prog{left:auto;right:max(14px,calc((100vw - 1240px)/2 - 30px))}
.ls .txt{width:min(520px,44%);position:relative;z-index:2}
.ls .ey{font-size:18px;font-weight:700;color:var(--accent-2);margin-bottom:18px;opacity:0;transform:translateY(16px);transition:all .6s var(--ease)}
.ls h2{font-size:clamp(40px,4.2vw,58px);font-weight:700;line-height:1.2;letter-spacing:-0.035em;color:var(--fg);opacity:0;transform:translateY(20px);transition:all .7s var(--ease)}
.ls .pin.in .ey,.ls .pin.in h2{opacity:1;transform:none}
.ls ul{list-style:none;margin-top:44px;border-top:1px solid var(--bg-3)}
.ls li{border-bottom:1px solid var(--bg-3);padding:22px 0;transition:padding .4s}
.ls li .nm{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--fg-3);transition:color .4s,font-size .4s;display:flex;align-items:baseline;gap:12px}
.ls li .nm s{text-decoration:none;font-size:15px;font-weight:700;color:var(--accent-2)}
.ls li.on .nm{color:var(--fg)}
.ls li .dt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}.ls li .dt>div{overflow:hidden}
.ls li.on .dt{grid-template-rows:1fr}
.ls li .dt p{margin-top:14px;font-size:18px;font-weight:600;color:var(--fg-1);line-height:1.55;text-wrap:pretty}
.ls li .dt .pts{margin-top:14px;display:flex;flex-direction:column;gap:6px}.ls li .dt .pts span{font-size:16px;font-weight:600;color:var(--fg-2);padding-left:16px;position:relative}.ls li .dt .pts span::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ls li .dt .pill{display:inline-flex;align-items:center;gap:8px;margin-top:20px;height:44px;padding:0 18px;border-radius:22px;background:var(--fg);color:#fff;font-size:15px;font-weight:700}
.ls li .dt .pill::after{content:"→"}
.ls li .dt .pr{margin-top:12px;font-size:34px;font-weight:700;letter-spacing:-0.03em;color:var(--fg)}.ls li .dt .pr small{font-size:16px;color:var(--fg-3);font-weight:600;letter-spacing:0}
.ls li .dt .yr{display:inline-block;margin-top:10px;font-size:15px;font-weight:700;color:var(--go);background:var(--go-w);padding:6px 10px;border-radius:8px}
/* 요금 비교 근거 — 「사람 N명 채용 시 월 T만원 / N명 × 월 P만원(시급×시간)」
   (2026-09-17 · 최예린 · 세션 6d7480ae) 손님이 읽는 자리에 두되 요금 카드보다 조용하게. */
.ls .lcmp{margin-top:20px;padding-top:16px;border-top:1px solid var(--bg-3)}
.ls .lcmp b{display:block;font-size:17px;font-weight:700;color:var(--fg-1);letter-spacing:-.01em}
.ls .lcmp span{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--fg-3);line-height:1.5;text-wrap:pretty}
.prog{position:absolute;left:max(14px,calc((100vw - 1240px)/2 - 30px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.prog i{width:14px;height:2px;background:var(--lp-dash);transition:all .3s}.prog i.on{background:var(--fg);width:22px}
/* night */
#night .pin{background:var(--lp-night)}
#night video,#night img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#night img{transition:opacity .4s;transform-origin:50% 60%;will-change:transform}#night .pin.ready img{opacity:0}
.n-cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;z-index:2}
.n-cap b{display:block;font-size:clamp(38px,4.4vw,64px);font-weight:700;letter-spacing:-0.03em;line-height:1.22;opacity:0;transform:translateY(20px);transition:all .7s var(--ease)}
.n-cap p{margin-top:20px;font-size:20px;font-weight:600;opacity:0;transform:translateY(16px);transition:all .7s var(--ease)}
/* 두 번째·세 번째 글은 같은 자리에 겹쳐 뜬다(앞 판은 style="" 로 박혀 있었다) */
/* ⛔ `.n-2` 와 `.n-3` 은 **같은 자리에 겹쳐** 둔다 — 하나가 사라지고 그 자리에 다음
   글이 선다(2026-09-16 보스 지시: «그 글씨 자리에 그 글씨와 동일한 디자인과 사이즈로»).
   ⚠️ 겹쳐 두었으므로 **둘이 동시에 켜지면 글자가 포개져 읽을 수 없다.**
   그래서 켜는 구간을 `landing-toss5.js` 에서 **서로 겹치지 않게** 잘라 두었다 —
   거기 숫자를 바꿀 때 이 주석을 같이 보라. */
.n-cap .n-2,.n-cap .n-3{position:absolute;left:0;right:0;top:0}
.n-cap .on{opacity:1;transform:none}
/* ===== 마지막 화면 — 밝은 판 · «문장 1~2 + 시각물 1» (작업표 11번) =====
   ⛔ 옛 판은 사진 위 흰 글씨였다(꼬릿말 대비 1.17). 이제 밝은 판에 진한 글씨라
   대비 문제가 **원리적으로** 안 생긴다. 시각물은 우리가 만든 루프 하나뿐이다. */
/* ⛔⛔ 위 여백에 **머리 막대 높이**를 더한다 — 이 구간은 화면보다 짧아서
   맨 아래로 굴리면 제목이 머리 막대 밑으로 들어가 잘렸다
   (2026-09-15 · 보스 지적 «마지막 부분 왜 짤려?»).
   [실측] 1920×1080 에서 30px · 1600×900 에서 41px · 1033×711 에서 70px 가려졌다. */
#final{position:relative;background:linear-gradient(180deg,var(--bg-1),#fff 60%);
  padding:calc(var(--hdr-h,100px) + clamp(48px,7vh,96px)) 0 clamp(72px,10vh,120px);
  /* ⛔⛔ 여기에 `min-height:100svh; display:flex; align-items:center` 를 넣지 마라.
     해 봤고 **더 나빠졌다** — 가운데 정렬이 위 여백과 싸워 제목이 오히려 더 밀려
     [실측] 1920 에서 0 → 22px, 1258 에서 0 → 106px 로 가려짐이 늘었다.
     좁은 화면에서 «마지막 구간 + 꼬릿말»이 한 화면보다 큰 것은 긴 페이지의 정상 동작이고
     (조금 위로 굴리면 보인다), 영상은 아예 **마지막 구간이 머리 막대 바로 아래 오는 자리**에
     세우므로 그 축은 닫혀 있다(tools/scroll_video.py 의 마지막 멈춤). */}
/* ⛔ 안쪽 여백을 «화면폭 − 1240 ÷ 2» 로 주면 안 된다 — 이 상자는 이미 1240px 로
   묶여 있어서 **두 번 깎인다.** [실측] 1920 폭에서 글상자가 244px 까지 쪼그라들어
   제목이 4줄이 됐고(디자인은 2줄), 그만큼 높아져 머리 막대에 잘렸다. */
#final .fin{max-width:1240px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
#final .fin-txt{min-width:0}
#final h2{font-size:clamp(34px,4.2vw,62px);font-weight:700;letter-spacing:-0.035em;line-height:1.15;color:var(--fg)}
#final p{margin-top:20px;font-size:19px;font-weight:600;color:var(--fg-2)}
#final .b{margin-top:32px;height:60px;padding:0 32px;border-radius:30px;font-size:18px;font-weight:700;display:inline-flex;align-items:center}
#final .lp-soon{margin:18px 0 0;text-align:left}
#final .fin-vis{position:relative;aspect-ratio:16/10;border-radius:clamp(16px,2vw,28px);overflow:hidden;
  background:var(--lp-skel);box-shadow:0 30px 70px rgba(25,31,40,.16),0 0 0 1px var(--line)}
#final .fin-vis video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== 법정 표기 꼬릿말 (전자상거래법 제10조) =====
   ⛔ 옛 판은 사진 위 흰 글씨(대비 1.17)라 «있어도 안 읽히는» 상태였다.
   법이 요구하는 것은 «표시»가 아니라 «읽을 수 있게 표시»다 → 제 배경을 가진 블록으로 뺐다.
   ⛔ 글자색에 `--fg-3` 를 쓰지 마라 — 이 배경(--bg-1)에서 대비 4.42 로 기준(4.5) 아래다.
   (2026-09-15 · 최예린 · 세션 a0453ee2 — 이 블록을 내가 한 번 통째로 날렸고 시험이 잡았다) */
.site-foot{background:var(--bg-1);border-top:1px solid var(--line-2);color:var(--fg-2)}
/* ⛔⛔ 안쪽 여백을 «화면폭 − 1240 ÷ 2» 로 주면 안 된다 — 이 상자는 이미 `max-width:1240px`
   로 묶여 있어서 **두 번 깎인다.** 넓은 화면일수록 글이 들어갈 자리가 사라진다.
   [실측 2026-09-16 · 고치기 전 꼬릿말 글상자 폭] 1920 → 560px · 2304 → 176px ·
   2560/3008/3440 → **0px**(「이용약관」이 12×84px 세로 막대가 된다 — 보스 사진).
   ★ 같은 병을 `#final .fin` 에서 이미 한 번 고쳤는데(`padding:0 24px`) 여기를 안 봤다.
     이 관용구를 쓰는 다른 자리(`.wrap`·`.h-cap`·`.prog`)는 **좌표이거나 꽉 찬 상자**라 정상이다
     — 「1240 으로 묶고 또 깎는」 자리는 전수로 훑어 이 한 곳뿐이었다.
   (2026-09-16 · 최예린 · 세션 a0453ee2) */
.site-foot .fw{max-width:1240px;margin:0 auto;padding:40px 24px 56px;display:flex;flex-direction:column;gap:18px}
.site-foot .ftop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:600}
.site-foot .fbrand{display:flex;align-items:center;gap:10px;color:var(--fg-2)}
.site-foot .fbrand img{height:16px;width:auto;opacity:.5}
.site-foot .flinks{display:flex;gap:20px;flex-wrap:wrap}
.site-foot .flinks a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg-2)}
.site-foot .flinks a:hover{color:var(--accent-2)}
.site-foot .flegal{font-size:12.5px;line-height:1.8;color:var(--fg-2)}
@media (max-height:820px){.ls li{padding:12px 0}.ls li .nm{font-size:20px}.ls h2{font-size:clamp(30px,3.4vw,40px)}.ls ul{margin-top:20px}.ls li .dt .pts{display:none}.ls li .dt p{font-size:16px;margin-top:10px}.ls li .dt .pill{margin-top:12px;height:38px}.ls .ey{margin-bottom:10px;font-size:16px}}
@media (max-height:640px){.ls li .nm{font-size:18px}.ls li{padding:9px 0}.ls li .dt .pr{font-size:26px}.ls li .dt .yr{display:none}}
/* ===== 12번 · 상단 메뉴 — 반투명 흐림 + 0.4초 전환 =====
   ⚠️ 흐림(backdrop-filter)은 사파리에서 느려질 수 있다(토스가 직접 겪고 배경 불투명도로 대체).
   [실측 판단] 여기서 흐리는 넓이는 «가로 전체 × 60px» 한 줄뿐이라 화면의 5% 안쪽이다
   — 토스가 문제를 겪은 «큰 면적 흐림»과 다른 경우라 그대로 두되, **흐림을 못 쓰는 브라우저에는
   불투명 배경**을 준다(그러면 글자가 사진 위에서 안 읽히는 일이 원리적으로 안 생긴다).
   전환은 흐림이 아니라 **배경색·그림자**에만 건다(흐림 반지름을 움직이면 매 프레임 다시 흐린다). */
.nav{transition:background-color .4s var(--ease-soft),box-shadow .4s var(--ease-soft),border-color .4s var(--ease-soft)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:#fff}
}
.hdr.stuck .nav{background:rgba(255,255,255,.96);box-shadow:0 2px 14px rgba(25,31,40,.06)}

/* ═══════════════════════════════════════════════════════════════════════════
   ===== 좁은 화면(폰·태블릿 세로) — **토스 모바일에서 재 온 규칙**으로 다시 짰다 =====
   (2026-09-16 · 최예린 · 세션 a0453ee2 · 보스 지시 «폰도 가독성 좋게 바꿔줘»)

   [실측 2026-09-16 · 살아 있는 toss.im 모바일 390 vs 데스크톱 1440]
     큰 제목 40px(데스크톱 80) · **본문 19px(데스크톱 16 — 폰에서 «키운다»)** ·
     좌우 여백 20px · 전체 길이 24.9화면(데스크톱 56.6).

   ⛔⛔ **글자를 줄여서 자리를 만들지 마라.** 내 첫 판이 정확히 그 짓을 했다 —
      좁은 화면에서 본문을 13px 로 줄였다. 토스는 반대로 16 → 19px 로 키운다.
      자리가 모자라면 «덜 보여주고 더 굴리게» 한다(한 화면에 한 가지).
   ⇒ 그래서 이 판은 ①글자를 키우고 ②한 번에 **항목 하나만** 보여주고
     ③남는 자리를 **제품 화면 카드**가 가져간다.

   ⛔⛔ **기기 그림을 줄이지 마라** — 보스 지적 «폰화면이 엄청 작게나오고».
      [실측 고치기 전 390×844] 폰 그림 170×315px · 안쪽 앱 화면 글씨가 통째로 뭉개짐.
      뿌리 = 폰 테두리째 넣고 «세로비»에 묶어 놔서, 화면이 짧으면 **가로도 같이 좁아졌다**
      (글자 크기는 가로에 붙어 있으므로 그대로 읽을 수 없게 됐다).
      ⇒ 좁은 화면에서는 **테두리를 버리고 앱 화면만 가로 꽉 채운다.** 높이는 남는 만큼만
        쓰고 아래를 잘라낸다(토스가 폰 사진을 가로에 맞추고 위아래를 잘라내는 그 방법).
        그러면 글자 크기가 **화면 높이와 무관**해져 어떤 폰에서도 같은 크기로 읽힌다.
   ⛔ 토스의 글귀·사진·로고는 한 장도 안 가져왔다 — 가져온 것은 **방법**뿐이다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .ls .txt{width:100%}
  /* `#desk`(큰 창)·`#plan`(조직도)은 가로가 넓어야 읽히는 그림이라 숨긴다.
     그 구간은 글이 그대로 남아 빈 화면이 되지 않는다(회귀 = «빈 화면 0곳» 시험). */
  #desk,#plan{display:none}
  /* ── 제품 화면 카드 ── 크기는 landing-toss5.js 의 `layout()` 이 넣는다(가로 = 화면폭 − 40px) */
  #phone{width:calc(100vw - 40px);aspect-ratio:auto;height:var(--ph-h,40vh)}
  #phone .body img{display:none}                       /* 폰 테두리 그림을 버린다 */
  #phone .body{transform:none!important}               /* 3차원 기울기 제거 — 좁은 화면에선 글자만 일그러진다 */
  #phone .scrn{left:0;top:0;width:100%;height:100%;border-radius:20px;
    box-shadow:0 0 0 5px var(--lp-frame),0 18px 40px rgba(25,31,40,.22)}
  /* ⛔⛔ 앱 화면 글자를 `cqw`(카드 가로의 몇 %)로 두지 마라 — 카드가 작아지면 같이 작아진다.
     [실측 2026-09-16 · 고치기 전 390×844] 앱 화면 118px · 글자 3.1cqw = **5.3px**(데스크톱 12.8~14.6).
     ⇒ **px 로 못 박는다.** 카드가 짧아져도 글자 크기는 안 변하고, 대신 아래가 잘린다. */
  .sc{font-size:16px}
  /* 폰 테두리를 버렸으니 «홈 버튼 자리»·«노치 자리»로 비워 두던 여백도 뺀다 — 그만큼 내용이 보인다 */
  /* «9:41 · 안테나» 줄은 뺀다 — 테두리를 버려서 폰 흉내의 값이 줄었고, 그 31px 을
     «밀어서 사인» 띠가 쓰는 편이 훨씬 낫다([실측] 그 줄이 있으면 띠가 카드 밖으로 잘렸다). */
  .sc .st{display:none}
  .sc .hd{padding:.7em 1.4em .45em}
  .sc .cd{padding:.9em 1.1em}
  .sc .cd .meta{margin-top:.5em}
  .sc .cd h4{margin-top:.5em}
  .sc .tab{padding:.7em 0 .9em}
  .sc .feed{padding:.5em 1.1em .55em;gap:.5em}
  /* ── 초점 카드 한 장만 크게 ── 카드판이 낮아도 «무엇을 사인하는지»가 다 보여야 한다.
     ⛔ 옛 판은 카드 여럿을 그대로 넣고 «밀어서 사인» 띠를 그 **위에 겹쳐** 놓아서,
        카드판이 낮아지면 띠가 금액을 덮었다([실측] 390×844 에서 ₩318,000 이 가려졌다).
     ⇒ 초점 카드만 남기고 띠를 그 **아래에** 세운다(겹치지 않는다).
     ⚠️ 초점 카드가 없는 화면(사인할 게 없는 직원)은 **건드리지 않는다** —
        그때 다 숨기면 카드판이 텅 빈다. 그래서 `:has(.cd.focus)` 로 좁혔다. */
  .sc .feed:has(.cd.focus)>*:not(.cd.focus):not(.sl){display:none}
  .sc .feed:has(.sl)::after{display:none}
  .sc .cd.focus{transform:none;box-shadow:0 .5em 1.2em rgba(25,31,40,.12)}
  /* ⛔ `position:static` 으로 두지 마라 — 동그란 손잡이(`i`)가 «가장 가까운 자리 잡힌 조상»인
     `.feed` 를 기준으로 튀어 카드 왼쪽 위에 떠 버린다(찍어 보고 잡았다). `relative` 여야 한다. */
  .sc .sl{position:relative;left:auto;right:auto;bottom:auto;flex:none;height:3em;border-radius:1.5em;margin-top:.1em;padding-left:1.3em}
  .sc .sl i{top:.25em;left:.25em;width:2.5em;height:2.5em}
  .sc .sl.go i{left:calc(100% - 2.75em)}
  .sc .sl::after{left:calc(50% + 2.8em)}
  /* 떠 있는 카드는 뺀다 — 배경 카드와 **같은 내용**이라 작은 화면에서는 겹쳐 읽기만 나빠진다 */
  #phone .float{display:none}
  /* ── 쌓는 차례 ── «머리 · 제품 화면 카드 · 진행 점 · 글».
     ★ 토스 모바일이 쓰는 차례 그대로다 — **그림 → 제목 → 본문 → 단추.**
       [실측 2026-09-16 · 고치기 전] 글을 다 읽고 한참 내려야 폰이 나와 둘의 연결이 끊겼다.
     카드의 «위 자리»와 «높이»는 landing-toss5.js 가 재서 `--ph-top`·`--ph-h` 로 넘긴다
     — 여기에 숫자를 박으면 한쪽만 바뀌어 글과 카드가 겹친다. */
  .ls .wrap{align-items:flex-start;
    padding-top:calc(var(--ph-top,120px) + var(--ph-h,40vh) + 34px);
    padding-bottom:14px;
    padding-left:20px;padding-right:20px}
  /* ── 한 번에 항목 하나만 ── «덜 보여주고 더 굴리게»(토스 방식). 내용은 안 지운다 —
     굴리면 다음 항목이 그 자리에 온다. 어디쯤인지는 아래 진행 점이 말해 준다. */
  .ls li:not(.on){display:none}
  .ls ul{margin-top:18px;border-top:0}
  .ls li{padding:0;border-bottom:0}
  /* ── 글자 크기(토스 모바일 기준) ── **본문 19px**(토스 모바일 19 · 데스크톱 16)
     ⛔ 여기 숫자를 줄여서 자리를 만들지 마라. 자리가 모자랄 때만 `--lp-tscale` 이
        **전체를 같은 비율로** 줄이고, 그 바닥은 0.85 다(= 본문 16.15px · 16px 밑으로 안 간다).
        그 값은 landing-toss5.js 의 `layout()` 이 «정말 안 들어갈 때만» 넣는다. */
  .ls h2{font-size:calc(clamp(26px,8.2vw,36px) * var(--lp-tscale,1));line-height:1.22}
  .ls .ey{font-size:calc(17px * var(--lp-tscale,1));margin-bottom:12px}
  .ls li .nm{font-size:calc(21px * var(--lp-tscale,1));gap:8px}
  .ls li .nm s{font-size:calc(14px * var(--lp-tscale,1))}
  .ls li .dt p{font-size:calc(19px * var(--lp-tscale,1));margin-top:12px;line-height:1.55}
  .ls li .dt .pts{display:none}
  /* ⛔ 누르는 자리는 **어떤 배율에서도 44px 이상** — 배율에 곱하면 0.85 에서 40.8px 로 내려간다 */
  .ls li .dt .pill{margin-top:16px;height:max(44px,calc(48px * var(--lp-tscale,1)));padding:0 18px;font-size:max(14px,calc(16px * var(--lp-tscale,1)))}
  .ls li .nm{color:var(--fg)}
  .ls li .dt .pr{font-size:calc(30px * var(--lp-tscale,1));margin-top:10px}
  .ls li .dt .pr small{font-size:calc(16px * var(--lp-tscale,1))}
  .ls li .dt .yr{font-size:calc(15px * var(--lp-tscale,1));margin-top:10px;padding:6px 10px}
  /* 진행 점 — 세로 막대를 가로로 눕혀 카드와 글 «사이»에 둔다(지금 몇 번째인지) */
  .prog{flex-direction:row;justify-content:center;left:20px;right:20px;
    top:calc(var(--ph-top,120px) + var(--ph-h,40vh) + 12px);bottom:auto;transform:none;gap:8px}
  .prog i{width:18px;height:3px;border-radius:2px}
  .prog i.on{width:28px}
  .ls.r .prog{left:20px;right:20px}
  /* 본부 소개·밤 구간 제목도 같이 키운다 */
  .dhero .cap b{font-size:clamp(30px,8.6vw,44px)}
  .dhero .cap.c1 b{font-size:clamp(32px,9.4vw,50px)}
  .dhero .cap span{font-size:17px;margin-top:12px}
  .n-cap b{font-size:clamp(30px,8.6vw,44px)}
  .n-cap p{font-size:17px;margin-top:14px}
  .h-title{gap:0 20px;font-size:clamp(30px,8.6vw,46px);flex-wrap:wrap;white-space:normal;text-align:center}
  .h-cap b{font-size:clamp(28px,8vw,42px)}
  .h-cap p{font-size:17px;max-width:none}
  /* ⛔ `display:none` 은 탭 순서에서도 빠진다 — 숨긴 링크가 잡히는 일이 원리적으로 없다.
     (M-8 의 «안 보이는 링크 3개가 탭으로 잡힌다» 는 이 규칙으로 이미 막혀 있었다.
      실제로 재 보고 확인했다 — tests/test_landing_a11y.py 의 «숨긴 메뉴» 항목) */
  .nav .menu{display:none}
  .nav{padding:0 20px}
  .lp-notice .in{padding:9px 20px;gap:7px}.lp-notice .tx{font-size:14px}
  .site-foot .fw{padding:32px 20px 48px}
  .h-cap{left:20px;right:20px}
  /* ★ 사이 간격 28 → 18 — 위 수리(머리 여백 줄이기)와 **같은 이유·같은 손질**이다.
     [실측 2026-09-17 · 390×844] 그 수리로 60px 이 4px 까지 줄었는데 **4px 이 남아 있었다**
     (`#final` 위끝이 486→480 사이일 때 밤 구간 마지막 글은 이미 막대 뒤로 갔고 이 구간
     제목은 아직 화면 아래 4px 에 있었다). 그 4px 이 이번에 검사에 잡혔다.
     그림과 글 사이의 «아무것도 없는 자리»를 10px 줄여 제목이 그만큼 먼저 올라온다 —
     ⛔ 글 크기·차례·여백 규칙은 그대로다(줄이는 것은 빈 자리뿐).
     (2026-09-17 · 최예린 · 세션 6d7480ae) */
  #final .fin{grid-template-columns:1fr;gap:18px;padding:0 20px}
  #final .fin-txt{order:2}#final .fin-vis{order:1}
  /* ⛔ 좁은 화면에서 **밤 구간 마지막 글이 머리 막대 뒤로 사라진 뒤** 이 구간 첫 글이
     올라올 때까지 [실측 390×844] 60px 동안 읽을 글이 한 자도 없었다.
     넓은 화면은 이 구간 맨 위가 «글»이라 머리 막대를 피할 여백이 넓게 필요하지만,
     좁은 화면은 바로 윗줄이 순서를 바꿔 **맨 위가 그림**(`.fin-vis{order:1}`)이다 —
     그림은 머리 막대에 닿아도 읽을 것을 가리지 않으므로 그 빈 자리를 줄인다.
     ⛔ 글을 위로 끌어올리는 게 아니라 «아무것도 없는 자리»만 줄인다 — 글 크기·차례 그대로다.
     (2026-09-16 · 최예린 · 세션 d9445f24) */
  #final{padding-top:calc(var(--hdr-h,100px) + 12px)}
  #final h2{font-size:clamp(28px,8.2vw,38px)}
  #final p{font-size:18px}
  .dhero .cap{padding:0 20px}
}
/* 짧은 화면 — ⛔ 여기서도 **글자는 안 줄인다.** 줄이는 것은 «사이 간격»뿐이고,
   모자란 자리는 제품 화면 카드가 낮아지며 메운다(카드 글자 크기는 가로에 붙어 있어 안 변한다). */
@media (max-width:900px) and (max-height:720px){
  .ls .wrap{padding-top:calc(var(--ph-top,120px) + var(--ph-h,40vh) + 30px);padding-bottom:14px}
  .prog{top:calc(var(--ph-top,120px) + var(--ph-h,40vh) + 10px)}
  .ls .ey{margin-bottom:7px}
  .ls ul{margin-top:10px}
  .ls li .dt p{margin-top:8px}
  .ls li .dt .pill{margin-top:10px}
  /* 큰 제목만 한 칸 낮춘다 — 본문(19px)은 그대로다. 제목은 원래 화면 크기를 따라가는 자리다. */
  .ls h2{font-size:calc(clamp(22px,6.8vw,30px) * var(--lp-tscale,1))}
}
/* 재는 동안만(한 함수 안에서 붙였다 뗀다) 모든 항목을 펼친다 — `landing-toss5.js` 의
   `txtNeed()` 가 «가장 높은 항목 하나»를 고르려고 쓴다. 화면에는 한 장도 안 나온다.
   ⛔ 이 규칙을 지우면 폰에서 제품 화면 카드가 화면을 통째로 먹는다(글 높이를 0 으로 읽는다). */
.lp-measuring .ls li{display:block!important}
.lp-measuring .ls li .dt{grid-template-rows:1fr!important}
/* 손가락이 닿는 자리는 어느 폭에서나 44px 이상 (M-8) */
.nav .logo,.nav .menu a,.nav .cta,#final .b,.site-foot .flinks a{min-height:44px}

/* ===== 7번 · 움직임 줄이기 — «진짜로» =====
   ⛔ 옛 판은 이 한 줄(`*{transition-duration:.01ms}`)뿐이라 **자바스크립트 움직임은 그대로
   돌았다**(스크롤로 그림 되감기 · 따라가기 · 캔버스). 자바스크립트 쪽은 landing-toss5.js 와
   frame-seq.js 가 같은 기준(matchMedia)으로 스스로 끈다 — 여기는 CSS 몫만 맡는다. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  .sc .emb .skel i{animation:none;background:var(--bg-3)}
}

/* ===== 8번 · 글자 쪼개서 순차 등장 (토스 split-text · 5ms/글자 · 0.2~0.3초) =====
   ⛔ 읽기 장치에는 원문 한 덩이로 들린다 — 조각은 aria-hidden, 바깥에 aria-label. */
/* 어절(띄어쓰기 단위)은 통째로 줄을 넘는다 — 글자마다 inline-block 만 주면
   브라우저가 **글자 단위로** 줄을 바꿔 제목이 양쪽정렬한 듯 벌어진다(실제로 그랬다). */
.ls h2 .sp-w{display:inline-block;white-space:nowrap}
.ls h2 .sp-ch{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.ls .pin.in h2 .sp-ch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ls h2 .sp-ch{opacity:1;transform:none;transition:none}}

/* ===== 0-1 · 요금제 카드의 「14일 무료로 시작」을 잠근 자리 =====
   ⛔ 이 규칙과 함께 `landing-toss5.js` 의 `<span class="pill soon">` 도 같이 되돌려야
   결제 열리는 날 원래 모양으로 돌아간다. */
.ls li .dt .pill.soon{background:var(--accent-w);color:var(--accent-2);cursor:default}
.ls li .dt .pill.soon::after{content:""}

/* 카드만 꺼내 쓰는 숨은 자리 — 화면엔 절대 안 보인다(작업표 밖 · 보스 지적 수리) */
.sc.hidden-src{display:none!important}

/* ===== 아주 짧은 화면(높이 620 미만 · 옛 4인치 폰) =====
   여기서는 «큰 제목 + 항목 + 설명 + 단추 + 제품 화면»이 **물리적으로** 한 화면에 안 들어간다.
   [실측 2026-09-16 · 320×568] 글에 필요한 높이 359px · 머리 121px · 화면 568px.
   ⛔ 본문을 더 줄이는 쪽으로는 안 간다(16px 아래 금지). 대신 **머릿글 한 줄을 접는다** —
      본부 구간에서는 바로 앞 소개 화면이 같은 말을 이미 크게 보여 줬다.
   ⚠️ 이건 «내용 삭제»가 아니라 이 한 크기에서의 자리 양보다 — 360×640 이상에서는 그대로 나온다.
   (2026-09-16 · 최예린 · 세션 a0453ee2) */
@media (max-width:900px) and (max-height:619px){
  .ls .ey{display:none}
  .prog{display:none}          /* 점을 놓을 자리가 없다 — 그 14px 을 카드가 쓴다 */
  .ls h2{font-size:calc(clamp(18px,5.6vw,22px) * var(--lp-tscale,1))}
  .ls .wrap{padding-top:calc(var(--ph-top,120px) + var(--ph-h,40vh) + 14px);padding-bottom:12px}
}