/* carrot/viewer.css — Carrot Viewer 제품 페이지 · 스크린샷 페이지 전용
   tokens.css 를 전제로 한다. 새 색은 만들지 않고 토큰과 주황 알파만 쓴다.
   설계: docs/design_handoff_carrot_viewer/ */

/* ── 공통 소도구 ─────────────────────────────────────────────────── */
.vf-b{font-weight:600;color:var(--ink)}
.vf-kbd{font-family:var(--f-mono);font-size:.86em;font-weight:500;letter-spacing:.01em;color:var(--ink);background:var(--surface-pearl);border:1px solid var(--hairline);border-radius:4px;padding:1.5px 5px;white-space:nowrap}
.vf-kbd-pro{color:var(--carrot-deep);background:rgba(224,122,47,.08);border-color:rgba(224,122,47,.32)}
.vf-yes{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:500}
.vf-yes::before{content:"";width:13px;height:8px;border-left:1.6px solid var(--carrot);border-bottom:1.6px solid var(--carrot);transform:rotate(-45deg) translate(1px,-2px);flex-shrink:0}
.vf-no{display:inline-flex;align-items:center;gap:7px;color:var(--ink-muted-48)}
.vf-no::before{content:"";width:9px;height:1.5px;background:currentColor;opacity:.6;flex-shrink:0}

/* ── 스크린샷 공통 ────────────────────────────────────────────────
   🔴 상자 비율을 하나로 고정하지 않는다. 원본 19장의 비율이
      0.165(좌측 사이드바 세로 띠) ~ 9.7(Lite 툴바 가로 띠) 까지 벌어져서
      한 비율에 맞추면 대부분이 빈 여백에 둘러싸인 작은 그림이 된다.
      - cover  → 띠 캡처가 잘려 내용을 알아볼 수 없다
      - contain + 고정 비율 → 여백만 크고 그림은 작아진다  ← 처음에 이랬다
   그래서 각 이미지가 **자기 비율 그대로** 나오게 둔다. 폭은 칸에 맞추되
   (max-width) 세로로 긴 것만 max-height 로 눌러 행이 터지지 않게 한다.
   <img> 의 width/height 속성이 비율을 알려 주므로 CLS 도 생기지 않는다.
   (핸드오프 README 「Assets」의 "다르면 CSS 쪽 비율을 실제 값으로" 지시) */
/* 🔴 테두리·바닥은 이미지가 아니라 **슬롯**에 준다.
   이미지에 주면 프레임이 그림 크기를 따라가 칸마다 위치가 달라진다
   (원본 비율이 제각각이라 그림 높이가 다 다르다). 슬롯을 고정 크기로 두면
   어느 칸이든 프레임의 위·아래·좌·우가 정확히 맞고, 그림은 그 안에서
   가운데 정렬되며 자기 비율을 그대로 지킨다. */
.pv-shot-slot,.sh-img-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:10px;
  background:var(--surface-pearl);border:1px solid var(--hairline);
  border-radius:var(--r-sm);overflow:hidden
}
/* 둘 다 <button> 이다 — 눌러서 그 자리에서 확대한다. 브라우저 기본 테두리·
   배경·글꼴을 지우고 확대 커서를 준다. */
.pv-shot-slot,.sh-img-btn{cursor:zoom-in;font:inherit;color:inherit;
                          appearance:none;-webkit-appearance:none;
                          transition:border-color .14s ease}
.pv-shot-slot{height:250px}
.sh-img-btn{height:300px}
/* Pro 딱지 — 제품 페이지 '주요 기능 요약'의 .pv-glance-pro 와 같은 모양이다.
   그림 아래 제목 오른쪽에 붙는다. 제목이 두 줄이면 마지막 줄 끝에 따라붙는다. */
.sh-pro{display:inline-block;margin-left:8px;vertical-align:1px;font-family:var(--f-mono);font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--carrot-deep);border:1px solid rgba(224,122,47,.34);background:rgba(224,122,47,.07);border-radius:var(--r-pill);padding:1px 7px}
/* 확대 창 아래 띠는 어두운 바탕이라 밝은 주황으로 바꾼다. */
.sh-lb-bar .sh-pro{color:#ffb27a;border-color:rgba(255,178,122,.5);background:rgba(255,178,122,.1)}
.sh-edition-note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-muted-48);text-wrap:pretty}
.pv-shot:hover .pv-shot-slot{border-color:var(--hairline-strong)}
.pv-shot-img,.sh-img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;border:0
}
/* 히어로는 한 장뿐이라 맞출 상대가 없다 — 그림에 바로 테두리를 준다. */
.pv-hero-shot{
  display:block;width:100%;height:auto;margin:0 auto;
  background:var(--surface-pearl);border:1px solid var(--hairline);
  border-radius:var(--r-md);transition:border-color .15s
}
/* 그림 자체가 확대 버튼이다. 버튼 기본 조판을 지우고 그림만 남긴다 —
   테두리는 그림 쪽에 있으므로 여기에 또 주면 줄이 두 겹으로 보인다.
   cursor:zoom-in 으로 눌러질 수 있다는 것을 손에 먼저 알린다. */
.pv-hero-shot-btn{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;
  font:inherit;cursor:zoom-in
}
.pv-hero-shot-btn:hover .pv-hero-shot{border-color:var(--hairline-strong)}
.pv-hero-shot-btn:focus-visible{outline:2px solid var(--carrot);outline-offset:3px;border-radius:var(--r-md)}

/* ── 히어로 ──────────────────────────────────────────────────────── */
.pv-hero{padding:104px 0 104px}
.pv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:64px;align-items:start}
.pv-hero h1{font-family:var(--f-display);font-size:52px;font-weight:600;letter-spacing:-.035em;line-height:1.08;margin:16px 0 22px;color:var(--ink);text-wrap:balance}
/* 히어로 소개는 한 줄이 될 수 없는 길이라 balance 로 줄 길이를 고르게 나눠 꼬리를 없앤다(2026-10-16).
   ⚠ 기능 요약 칸 · 차별점 · Stage 고지는 balance 가 오히려 못하다는 사용자 판단으로 pretty 그대로 둔다. */
.pv-hero-lead{font-size:16.5px;line-height:1.75;color:var(--ink-muted-80);margin:0;max-width:560px;text-wrap:balance}
/* .pv-badges 는 히어로 배지 줄과 함께 없앴다. .pv-badge 는 스크린샷
   페이지가 아직 쓴다. 배지 줄이 갖고 있던 아래 여백은 .pv-actions 로 옮긴다. */
.pv-hero .pv-actions{margin-top:34px}
.pv-badge{font-size:12px;font-weight:500;letter-spacing:-.005em;color:var(--ink-muted-80);border:1px solid var(--hairline-strong);border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap}
.pv-badge-v{color:var(--carrot-deep);border-color:rgba(224,122,47,.34);background:rgba(224,122,47,.06)}
.pv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pv-hero-side{border-left:1px solid var(--hairline);padding-left:36px}
.pv-hero-side-h{font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-muted-48);margin-bottom:14px}
.pv-hero-cap{font-size:12.5px;color:var(--ink-muted-48);margin:12px 0 0;line-height:1.6}

/* ── 서브내비 ─────────────────────────────────────────────────────── */
/* 🔴 top 은 .global-nav 높이(64px)를 따라간다. 0 으로 두면 sticky 는 동작하는데
   z-index 50 짜리 글로벌 바 뒤에 깔려 사라진 것처럼 보인다.

   🔴 --pv-stick = 화면 위쪽이 고정 바에 가려지는 높이(64 + 55 = 119px).
      아래로 고정되는 것(.vf-rail)과 앵커 착지 위치(scroll-margin-top)는 전부
      이 변수를 기준으로 잡는다. 값을 따로 적으면 바 높이가 바뀔 때 한쪽만
      남아 목차 윗부분이 잘리거나 제목이 바 뒤로 들어간다 — 실제로 그랬다. */
:root{--gnav-h:64px;--pvnav-h:55px;--pv-stick:calc(var(--gnav-h) + var(--pvnav-h))}
.pv-nav{position:sticky;top:var(--gnav-h);z-index:40;background:color-mix(in oklab,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--hairline)}
.pv-nav-inner{max-width:1320px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:28px;height:calc(var(--pvnav-h) - 1px);overflow-x:auto;scrollbar-width:none}
.pv-nav-inner::-webkit-scrollbar{display:none}
/* ⚠ 뷰어 브랜드는 <a>, Stage 는 <span> 이다. .pv-nav a 가 뷰어 쪽만 덮어써
   글자 크기와 색이 달라졌다 — 요소 종류를 타지 않게 특이도를 올린다. */
.pv-nav .pv-nav-brand{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);white-space:nowrap;flex-shrink:0;border-bottom:0}
.pv-nav a{font-size:13.5px;color:var(--ink-muted-48);text-decoration:none;white-space:nowrap;flex-shrink:0;padding:4px 0;border-bottom:1.5px solid transparent;transition:color .12s ease}
.pv-nav a:hover{color:var(--ink)}
.pv-nav a[aria-current=true]{color:var(--ink);border-bottom-color:var(--carrot)}
.pv-nav .pv-nav-cta{margin-left:auto;color:var(--carrot);font-weight:600}
/* 서브내비 링크가 가리키는 구획들. .pv-nav 를 렌더하는 페이지에서만 걸리도록
   형제 선택자로 좁힌다(뷰어·Stage 제품 페이지). */
.pv-nav ~ section[id]{scroll-margin-top:var(--pv-stick)}

/* ── S2 한눈에 보기 ───────────────────────────────────────────────── */
/* 🔴 grid-auto-rows:1fr — 아홉 칸을 모두 같은 크기로 둔다. 이것이 없으면
 *    줄마다 가장 긴 글에 높이가 맞춰져 줄끼리 높이가 제각각이 된다.
 *    칸마다 글 길이가 다른 묶음이라 눈에 바로 띄었다.
 * 조판은 한 화면에 아홉 칸이 다 들어오는 선에 맞춰 줄였다
 *    (여백 30→24 · 제목 18→16.5 · 본문 13.5→13).
 *    여덟 칸이던 때는 두 줄이라 당연히 들어왔지만 이제 세 줄이다. */
.pv-glance{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:0;border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.pv-glance-item{padding:22px 24px 24px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:flex;flex-direction:column}
.pv-glance-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:19px}
.pv-glance-n{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--carrot)}
/* Carrot Stage 페이지는 같은 칸을 Pro 딱지 없이 쓴다 — 번호가 .pv-glance-head
   없이 바로 놓이므로 그쪽에만 아래 여백을 준다. */
.pv-glance-item > .pv-glance-n{margin-bottom:12px}
.pv-glance-t{font-family:var(--f-display);font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--ink);margin:0 0 8px}
.pv-glance-b{font-size:13px;line-height:1.68;color:var(--ink-muted-80);margin:0;text-wrap:pretty}
.pv-glance-item-pro{background:rgba(224,122,47,.05);box-shadow:inset 2px 0 0 var(--carrot)}
.pv-glance-item-pro .pv-glance-t{color:var(--carrot-deep)}
.pv-glance-pro{flex:none;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--carrot-deep);border:1px solid rgba(224,122,47,.34);background:rgba(224,122,47,.07);border-radius:var(--r-pill);padding:2.5px 8px}

/* ── S3 지원 형식 ─────────────────────────────────────────────────── */
.pv-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.pv-blk-h{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);padding-bottom:11px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.pv-fmt{width:100%;border-collapse:separate;border-spacing:0;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
.pv-fmt td{padding:14px 22px;border-top:1px solid var(--divider-soft);font-size:14px;line-height:1.6;color:var(--ink-muted-80);vertical-align:middle}
.pv-fmt tr:first-child td{border-top:0}
.pv-fmt td:first-child{color:var(--ink);font-weight:500}
.pv-fmt td:last-child{text-align:right;white-space:nowrap}
.pv-fmt td:last-child .vf-yes,.pv-fmt td:last-child .vf-no{justify-content:flex-end}

/* ── 조용한 각주 ─────────────────────────────────────────────────── */
.pv-aside{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--divider-soft);font-size:13px;line-height:1.72;color:var(--ink-muted-48);text-wrap:pretty}

/* ── S4 기능 전체 ─────────────────────────────────────────────────── */
.vf-head{max-width:560px;margin-bottom:48px}
.vf-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px;align-items:start}
.vf-rail{position:sticky;top:calc(var(--pv-stick) + 14px);max-height:calc(100vh - var(--pv-stick) - 44px);overflow-y:auto;scrollbar-width:thin}
.vf-rail-link{display:flex;align-items:baseline;gap:9px;padding:5px 0 5px 9px;margin-left:-10px;border-left:1.5px solid transparent;text-decoration:none;transition:color .12s ease,border-color .12s ease}
.vf-rail-n{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-muted-48);flex-shrink:0}
.vf-rail-t{font-size:13px;line-height:1.45;color:var(--ink-muted-48)}
.vf-rail-link:hover .vf-rail-t{color:var(--ink)}
.vf-rail-link[aria-current=true]{border-left-color:var(--carrot)}
.vf-rail-link[aria-current=true] .vf-rail-t{color:var(--ink);font-weight:600}
.vf-rail-link[aria-current=true] .vf-rail-n{color:var(--carrot-deep)}
.vf-rail-link-pro .vf-rail-t{color:var(--carrot-deep)}
.vf-rail-link-pro:hover .vf-rail-t{color:var(--carrot)}
.vf-rail-pro{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--carrot-deep);flex-shrink:0}

.vf-sec{padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--divider-soft);scroll-margin-top:calc(var(--pv-stick) + 22px)}
.vf-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.vf-sec-pro{background:rgba(224,122,47,.045);box-shadow:inset 2px 0 0 var(--carrot);border-radius:0 var(--r-md) var(--r-md) 0;padding:28px 30px 32px;margin-left:-30px;margin-right:-30px;border-bottom:0}
.vf-sec-pro+.vf-sec:not(.vf-sec-pro){border-top:1px solid var(--divider-soft);padding-top:44px}
.vf-sec-pro .vf-sec-n,.vf-sec-pro .vf-sec-title{color:var(--carrot-deep)}
.vf-sec-pro .vf-pro-tag{background:var(--carrot);border-color:var(--carrot);color:#fff}
.vf-sec-head{display:flex;align-items:baseline;gap:13px;margin-bottom:20px;flex-wrap:wrap}
.vf-sec-n{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--carrot);flex-shrink:0}
.vf-sec-title{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.3;color:var(--ink);margin:0}
/* 항목 한 줄만 Pro 인 경우 — 섹션 머리의 .vf-pro-tag 보다 작게 줄 끝에 붙는다.
   재구성 섹션처럼 한 섹션 안에서 Lite/Pro 가 갈릴 때 쓴다. */
.vf-li-pro{display:inline-block;margin-left:7px;font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--carrot-deep);border:1px solid rgba(224,122,47,.34);background:rgba(224,122,47,.07);border-radius:var(--r-pill);padding:1px 6px;vertical-align:1px;white-space:nowrap}
.vf-pro-tag{font-size:11.5px;font-weight:500;letter-spacing:-.005em;color:var(--carrot-deep);border:1px solid rgba(224,122,47,.34);background:rgba(224,122,47,.07);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}

/* ── 기능 목록 ───────────────────────────────────────────────────── */
/* ⚠ 두 단을 유지한다 — 2026-10-16 한 단으로 바꿔 꼬리를 없애 봤지만 전후 비교에서
   사용자가 두 단이 낫다고 판단해 되돌렸다. 다시 제안하지 말 것. */
.vf-list{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.vf-list>li{position:relative;padding-left:16px;margin-bottom:10px;font-size:14px;line-height:1.68;color:var(--ink-muted-80);break-inside:avoid;text-wrap:pretty}
.vf-list>li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1.5px;background:var(--ink-muted-48);opacity:.65}
.vf-list-1col,.vf-list-in{columns:1}
.vf-li-wide{column-span:all;margin-top:4px}
.vf-list-in{margin:9px 0 2px}
.vf-list-in>li{font-size:13.5px;line-height:1.6;color:var(--ink-muted-48);margin-bottom:7px}
.vf-list-in>li::before{width:3px;height:3px;border-radius:50%;top:.66em;opacity:.5}

/* ── S5 차별점 ────────────────────────────────────────────────────── */
.pv-diff-head{margin-bottom:44px}
.pv-diff-intro{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.pv-diff-intro p{position:relative;padding-left:20px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.62);margin:0 0 10px;max-width:none;text-wrap:pretty}
.pv-diff-intro p::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:currentColor}
.pv-diff-intro p:last-child{margin-bottom:0}
.pv-diff-intro strong{font-weight:600;color:#fff}
.pv-diff{border-top:1px solid rgba(255,255,255,.16)}
.pv-diff-row{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.35fr);gap:32px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.1);align-items:baseline}
.pv-diff-n{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--carrot-on-dark)}
.pv-diff-t{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.4;color:#fff;margin:0;text-wrap:balance}
.pv-diff-b{font-size:14px;line-height:1.75;color:rgba(255,255,255,.68);margin:0;text-wrap:pretty}
.pv-diff-b .vf-b{color:#fff}
.pv-diff-b .vf-kbd{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.pv-diff-row-pro{background:rgba(255,169,104,.055);box-shadow:inset 2px 0 0 var(--carrot-on-dark);padding-left:20px;padding-right:20px;margin-left:-20px;margin-right:-20px}
.pv-diff-pro{margin-left:9px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--carrot-on-dark);border:1px solid rgba(255,169,104,.4);border-radius:var(--r-pill);padding:2px 7px;vertical-align:2px}

/* ── S6 Lite / Pro ────────────────────────────────────────────────── */
.pv-ed{width:100%;border-collapse:separate;border-spacing:0;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.pv-ed th,.pv-ed td{text-align:left;font-weight:400;padding:15px 26px;border-top:1px solid var(--divider-soft)}
.pv-ed thead th{border-top:0;padding:22px 26px 18px;background:var(--surface-pearl);border-bottom:1px solid var(--hairline);vertical-align:top}
.pv-ed .c{text-align:center}
.pv-ed .c .vf-yes,.pv-ed .c .vf-no{justify-content:center}
.pv-ed-name{font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.pv-ed-pro .pv-ed-name{color:var(--carrot-deep)}
.pv-ed-tag{font-size:12px;font-weight:500;letter-spacing:-.005em;color:var(--ink-muted-48);margin-top:5px}
.pv-ed-pro{background:rgba(224,122,47,.035);box-shadow:inset 1px 0 0 rgba(224,122,47,.28)}
.pv-ed tbody tr:hover td{background:var(--surface-pearl)}
.pv-ed tbody tr:hover td.pv-ed-pro{background:rgba(224,122,47,.07)}
.pv-ed .pv-ed-hi td{background:var(--surface-pearl)}
.pv-ed .pv-ed-hi td.pv-ed-pro{background:rgba(224,122,47,.09)}
.pv-ed .pv-ed-hi{font-weight:500}
.pv-ed .pv-ed-only td:first-child{position:relative}
.pv-ed .pv-ed-only td:first-child::after{content:attr(data-only);margin-left:10px;font-size:11px;font-weight:500;letter-spacing:-.005em;color:var(--carrot-deep);border:1px solid rgba(224,122,47,.34);background:rgba(224,122,47,.08);border-radius:var(--r-pill);padding:2px 7px;white-space:nowrap;vertical-align:2px}
.pv-ed-label{font-size:14.5px;letter-spacing:-.008em;color:var(--ink)}
.pv-fine{margin:22px 0 0;padding:20px 24px;background:var(--surface-pearl);border:1px solid var(--hairline);border-radius:var(--r-md);font-size:13px;line-height:1.78;color:var(--ink-muted-80)}
.pv-fine strong{font-weight:600;color:var(--ink)}

/* ── S7 시스템 요구사항 ───────────────────────────────────────────── */
.pv-req{width:100%;border-collapse:separate;border-spacing:0;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px}
.pv-req th,.pv-req td{text-align:left;font-weight:400;padding:14px 24px;border-top:1px solid var(--divider-soft);font-size:13.5px;color:var(--ink-muted-80)}
.pv-req thead th{border-top:0;padding:13px 24px;background:var(--surface-pearl);border-bottom:1px solid var(--hairline);font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-muted-48)}
.pv-req td:first-child{color:var(--ink);font-weight:500;font-size:14px}
.pv-req .rec{color:var(--ink)}

/* ── S8 단축키 — 접히는 섹션 ─────────────────────────────────────── */
.vf-disc{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);overflow:hidden}
.vf-disc-btn{display:flex;align-items:baseline;gap:16px;width:100%;padding:20px 26px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.vf-disc-btn:hover{background:var(--surface-pearl)}
.vf-disc-label{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);flex-shrink:0}
.vf-disc-hint{font-size:13px;color:var(--ink-muted-48);flex:1;min-width:0}
.vf-disc-chev{width:9px;height:9px;border-right:1.5px solid var(--ink-muted-48);border-bottom:1.5px solid var(--ink-muted-48);transform:rotate(45deg) translateY(-2px);flex-shrink:0;transition:transform .16s ease}
.vf-disc[data-open=true] .vf-disc-chev{transform:rotate(-135deg) translateY(-2px)}
.vf-disc-body{padding:0 26px 26px;border-top:1px solid var(--hairline)}
.vf-keytable{width:100%;border-collapse:separate;border-spacing:0}
.vf-keytable td{padding:11px 0;border-top:1px solid var(--divider-soft);vertical-align:baseline}
.vf-keytable tr:first-child td{border-top:0;padding-top:20px}
.vf-keycat{width:64px;font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-muted-48);white-space:nowrap}
.vf-keykeys{width:38%;padding-right:24px}
/* ⚠ <td> 에 직접 flex 를 걸면 열 너비 분배와 행 구분선이 깨진다 — 안쪽 래퍼를 쓴다. */
.vf-keyrow-keys{display:flex;flex-wrap:wrap;gap:5px}
.vf-keydesc{font-size:13.5px;line-height:1.6;color:var(--ink-muted-80)}
.vf-keyrow-fixed .vf-keycat{color:var(--carrot-deep)}
.vf-keys-foot{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--hairline);font-size:13px;line-height:1.72;color:var(--ink-muted-48);max-width:660px}

/* ── S9 스크린샷 미리보기 ─────────────────────────────────────────── */
.pv-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.pv-shot{display:flex;flex-direction:column;gap:11px;min-width:0}
.pv-shot-cap{font-size:13.5px;font-weight:500;color:var(--ink)}

/* ── S10 마무리 ───────────────────────────────────────────────────── */
.pv-notice{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.78;color:rgba(255,255,255,.6);max-width:680px;text-wrap:pretty}
/* 다크 섹션 위 보조 버튼 — tokens.css 에는 없다(밝은 배경용만 있다). */
.btn-ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:10px 21px;font-size:17px;font-weight:400;line-height:1}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}

/* ── 스크린샷 페이지 ──────────────────────────────────────────────── */
.sh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;align-items:start}
.sh-item{display:flex;flex-direction:column;gap:12px;min-width:0}
.sh-item:hover .sh-img-btn{border-color:var(--hairline-strong)}
.sh-cap{font-size:14px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.sh-sub{font-size:12.5px;line-height:1.6;color:var(--ink-muted-48);margin-top:4px;text-wrap:pretty}
.sh-grp{margin-bottom:64px}
.sh-grp:last-child{margin-bottom:0}
.sh-grp-h{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:13px;margin-bottom:26px;border-bottom:1px solid var(--ink)}
.sh-grp-t{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.022em;color:var(--ink);margin:0}
.sh-grp-n{font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-muted-48)}

/* 라이트박스 — 화면을 가득 채운다.
   뷰어 스크린샷과 Carrot Stage 앱 화면이 **같은 창**을 쓴다
   (shared/components.jsx 의 ShotLightbox). 세로로 긴 폰 캡처만
   .sh-lb-phone 계열로 크기 규칙을 달리한다.

   🔴 예전에는 흰 카드 안에 그림을 넣고 폭을 1180px 로 묶었다. 그런데 캡처
   원본이 1920px 이라 확대해도 0.61 배로 눌려 **툴바 글자가 안 읽혔다** —
   확대의 뜻이 없어진다. 카드(배경·테두리·그림자)를 걷고 여백을 0 으로 둬
   화면이 허락하는 만큼 키운다. 1920×911 창에서 0.61 → 0.88 배가 된다.
   캡션은 그림 아래 칸을 차지하는 대신 **그림 위에 겹쳐** 띄운다. 칸을 따로
   두면 그만큼 그림이 작아지기 때문이다(글자를 고를 일은 없으므로
   pointer-events 는 끈다 — 그 자리를 눌러도 그림 클릭으로 닫힌다).
   🔴 z-index 는 홈의 제품 팝업(1000)보다 위여야 한다. 그 팝업 안에서도 캡처를
   눌러 확대하는데, 낮게 두면 확대 창이 팝업 뒤로 깔린다. */
.sh-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:0;overflow:auto}
.sh-lb::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(20,18,15,.86);backdrop-filter:blur(6px)}
.sh-lb-inner{position:relative;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;background:none;border-radius:0;box-shadow:none}
/* 이미지 자체가 닫기 버튼이다 — 틀의 세로 flex 자리를 <img> 대신 이 버튼이
   받으므로 크기 규칙(flex·min-height)도 여기로 옮겨 온다. */
.sh-lb-imgbtn{display:block;flex:0 1 auto;min-height:0;padding:0;margin:0;border:0;background:none;cursor:zoom-out;font:inherit}
.sh-lb-imgbtn:focus-visible{outline:2px solid var(--carrot);outline-offset:-2px}
/* 여기서도 비율을 고정하지 않는다 — 원본 그대로, 화면에 맞게만 줄인다.
   세로 flex + max-height 라 창이 낮아도 하단 바(캡션·닫기)가 밀려나지 않는다. */
.sh-lb-img{display:block;flex:0 1 auto;min-height:0;max-width:100vw;
           max-height:100vh;width:auto;height:auto;margin:0 auto;
           object-fit:contain;background:var(--surface-pearl);border:0}
.sh-lb-bar{position:fixed;left:0;right:0;bottom:0;padding:34px 24px 16px;
           background:linear-gradient(to top,rgba(12,10,8,.9),rgba(12,10,8,0));
           pointer-events:none}
.sh-lb-bar .sh-cap{color:#fff}
.sh-lb-bar .sh-sub{color:rgba(255,255,255,.72)}
/* 닫기 ✕ — 캡처 위에 떠 있으므로 밝든 어둡든 읽히게 반투명 검정 알약으로 둔다.
   🔴 틀이 아니라 **화면**에 고정한다(fixed). 틀 모서리에 붙이면 세로로 긴
   캡처에서 틀이 화면보다 커져 버튼이 스크롤 밖으로 밀려난다 — Stage 쪽이
   닫기를 틀 밖에 두고 있던 이유가 그것이었다. 화면에 고정해 두면 캡처가
   길든 짧든 늘 같은 자리에 있다.
   🔴 글자 없이 ✕ 만 둔다. 말은 aria-label(shot.close)로 전한다 — 사전값에
   ✕ 를 넣지 않는다. 아이콘은 마크업이 그린다. */
.sh-lb-x{position:fixed;top:14px;right:14px;z-index:2;width:34px;height:34px;display:flex;
         align-items:center;justify-content:center;font-size:15px;line-height:1;color:#fff;
         background:rgba(20,18,15,.52);border:1px solid rgba(255,255,255,.28);border-radius:999px;
         cursor:pointer;padding:0;backdrop-filter:blur(4px)}
.sh-lb-x:hover{background:rgba(20,18,15,.78);border-color:#fff}
.sh-lb-x:focus-visible{outline:2px solid var(--carrot);outline-offset:2px}
/* 세로로 긴 앱 캡처(1440x2811) 확대.
 *
 * 창 높이에 맞춰 전체가 한 화면에 들어온다 — 확대해 놓고 잘려 보이면 고장으로
 *   읽힌다. 이제는 기본 규칙(max-height:100vh)이 그 일을 하므로 여기서는
 *   폭 상한·하한을 풀어 주기만 한다.
 * 예전에는 폭을 560px 로 묶고 min-width 로 하한을 둬, 낮은 창에서는 세로로
 *   넘쳐 스크롤이 생겼다. 화면을 가득 쓰는 지금은 넘칠 일이 없다. */
.sh-lb-phone{padding:0;align-items:center}
.sh-lb-inner-phone{width:auto;max-width:100vw;max-height:100vh;margin:auto}
.sh-lb-inner-phone .sh-lb-img{
  width:auto;height:auto;flex:none;background:var(--canvas);
  max-width:100vw;max-height:100vh;min-width:0
}

/* ── /solutions/ 인덱스 — 제품 카드 ───────────────────────────────── */
.sol-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sol-card{display:flex;flex-direction:column;gap:16px;padding:34px 34px 30px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);text-decoration:none;transition:border-color .14s ease,transform .14s ease}
.sol-card:hover{border-color:var(--hairline-strong);transform:translateY(-2px)}
.sol-card-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sol-card-t{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin:0}
.sol-card-tag{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);background:rgba(224,122,47,.10);color:var(--carrot-deep);font-size:12px;font-weight:500}
.sol-card-b{font-size:14.5px;line-height:1.75;color:var(--ink-muted-80);margin:0;flex:1;text-wrap:pretty}
.sol-card-more{font-size:13.5px;font-weight:600;color:var(--carrot)}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .vf-layout{grid-template-columns:1fr;gap:36px}
  .vf-rail{position:static;max-height:none;border-bottom:1px solid var(--hairline);padding-bottom:20px}
  .vf-rail-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 26px}
  .vf-list{columns:1}
  .pv-hero-grid{grid-template-columns:1fr;gap:44px}
  .pv-hero-side{border-left:0;border-top:1px solid var(--hairline);padding-left:0;padding-top:30px}
  .pv-open{grid-template-columns:1fr;gap:44px}
  .pv-diff-head{margin-bottom:36px}
  .pv-diff-intro p{margin-bottom:12px}
  .pv-glance{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .sh-grid,.pv-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sol-cards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pv-hero{padding:64px 0 56px}
  .pv-hero h1{font-size:36px}
  .pv-glance,.sh-grid,.pv-shots{grid-template-columns:minmax(0,1fr)}
  .pv-glance{grid-auto-rows:auto}
  .pv-glance-item{padding:24px 20px 28px}
  .vf-sec-pro{margin-left:0;margin-right:0;padding:24px 20px 26px;border-radius:var(--r-md)}
  .pv-diff-row-pro{padding-left:14px;padding-right:14px;margin-left:-14px;margin-right:-14px}
  .pv-diff-row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .pv-ed th,.pv-ed td,.pv-req th,.pv-req td{padding:12px 14px}
  .vf-disc-btn{flex-wrap:wrap;gap:6px 16px;padding:18px 18px}
  .vf-disc-hint{flex-basis:100%}
  .vf-disc-body{padding:0 18px 22px}
  .vf-keytable td{display:block;border-top:0;padding:2px 0}
  .vf-keytable tr{display:block;padding:12px 0;border-top:1px solid var(--divider-soft)}
  .vf-keytable tr:first-child{border-top:0}
  .vf-keykeys{width:auto;padding-right:0;margin:6px 0}
  .sh-lb{padding:0}
  /* 상단 고정 바(캡션·닫기) 높이만큼은 비워 둬야 가리지 않는다. */
  .sh-lb-phone{padding:0}
  .sol-card{padding:26px 22px 24px}
  .sol-card-t{font-size:22px}
}

/* ── 한국어 줄바꿈: 어절 단위로 끊는다 ─────────────────────────────── */
.carrot-root h1,.carrot-root h2,.carrot-root h3,.carrot-root h4,
.carrot-root p,.carrot-root li,.carrot-root td,.carrot-root th,
.carrot-root dd,.carrot-root figcaption,.carrot-root .sh-cap,
.carrot-root .pv-shot-cap,.carrot-root .pv-blk-h,.carrot-root .vf-disc-hint{
  word-break:keep-all;overflow-wrap:break-word
}

/* 🔴 .eyebrow-rule 은 색만 담당한다. 밑줄은 tokens.css 의 .eyebrow::after 가
   글자 폭만큼 긋는다 — 여기서 width 를 주면 그 밑줄이 짧은 막대로 끊긴다.
   다크 섹션에서는 --carrot-on-dark 로 바뀐다. */
.tile-dark .eyebrow-rule{color:var(--carrot-on-dark)}
.tile-dark .eyebrow-rule::after{background:var(--carrot-on-dark)}

/* ── 제품 페이지 고지 구획 — 뷰어 · Stage 가 함께 쓴다 ──────────────
 * 히어로 아래에 라벨 레일 + 항목으로 놓는다. 위치도 정해진 것이다.
 * 🔴 본문(.pd-notice-b)과 각주(.pd-notice-foot)는 반드시 --ink-muted-80 이다.
 *   --ink-muted-48(4.06:1)이나 opacity(3.13:1)를 얹으면 대비 기준에 못 미친다.
 *   각주를 낮추고 싶으면 색이 아니라 글자 크기로만 구분한다(13.5px → 12px).
 * 🔴 max-width 를 걸지 않는다 — 오른쪽에 빈 자리를 남긴 채 줄이 끊기면
 *   엉뚱한 데서 개행한 것처럼 보인다. 글줄이 폭을 끝까지 쓰게 둔다.
 */
/* 🔴 고지 문장은 한 줄로 흐르게 둔다 — 문의 문단이 13.5px 에서 1506px 다.
   컨테이너 본문(1256px) 안에서는 반드시 꺾이므로, 구획을 컨테이너 밖으로
   빼 1760px 까지 넓혔다(.pd-notice-wrap). 그보다 좁은 화면에서는 꺾인다. */
.pd-notice-wrap{max-width:none;margin:0;padding:0}
.pd-notice{margin-top:44px;padding-top:26px;border-top:1px solid var(--ink)}
.pd-notice-rail{margin-bottom:22px}
.pd-notice-label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pd-notice-body{max-width:none}
.pd-notice-item{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--divider-soft)}
/* 항목이 여럿일 때 — 제목 없이 글머리 기호만 붙여 늘어놓는다. */
.pd-notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pd-notice-list li{position:relative;padding-left:17px;font-size:12.5px;line-height:1.65;color:var(--ink-muted-80)}
.pd-notice-list li::before{content:"-";position:absolute;left:0;top:0;color:var(--ink-muted-48)}
/* 개인정보 처리방침 — 주의 구획 오른쪽 아래 */
.pd-notice-privacy{display:flex;justify-content:flex-end;margin-top:18px}
.pd-notice-privacy a{font-size:12px;color:var(--ink-muted-48);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline-strong,#d8d4cd)}
.pd-notice-privacy a:hover{color:var(--carrot);text-decoration-color:var(--carrot)}
.pd-notice-t{font-size:13px;font-weight:600;letter-spacing:-.008em;color:var(--ink);margin:0 0 6px}
.pd-notice-b{font-size:12.5px;line-height:1.8;color:var(--ink-muted-80);margin:0;max-width:none;text-wrap:initial}
.pd-notice-mail{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--carrot);text-decoration:none;border-bottom:1px solid rgba(224,122,47,.4);white-space:nowrap}
.pd-notice-mail:hover{color:var(--carrot-focus);border-bottom-color:var(--carrot-focus)}
.pd-notice-foot{margin:0;font-size:12px;line-height:1.75;color:var(--ink-muted-80);max-width:none;text-wrap:initial}


/* ── 마무리(다크) 구획 — 가운데 정렬 ──────────────────────────────
 * 넓은 화면에서 640px 덩어리가 왼쪽에 붙어 있으면 오른쪽이 통째로 비어
 * 페이지가 한쪽으로 쏠려 보인다. 뷰어 · Stage 두 제품 페이지가 함께 쓴다. */
.pd-cta{max-width:760px;margin:0 auto;text-align:center}
.pd-cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* 🔴 고지 문단(.pv-notice)은 제 max-width(680px)를 갖고 있어 .pd-cta 의
   가운데 정렬을 따라가지 않아 왼쪽에 홀로 남는다. 같이 가운데로 옮긴다.
   (글은 여러 줄이라 안의 정렬은 왼쪽 그대로 둔다.) */
.pd-cta .pv-notice{margin-left:auto;margin-right:auto;text-align:left}


/* ── 제품 페이지 히어로 — 내용 폭에 맞춰 가운데로 ─────────────────
 * 1fr 로 두면 왼쪽 열이 컨테이너의 남는 폭을 전부 가져간다. 리드는
 * max-width:560px 에서 멈추므로 열 오른쪽이 통째로 비고, 글 덩어리가
 * 왼쪽에 붙어 보인다. 열을 내용만큼만 잡고 격자째 가운데에 세운다.
 * ⚠ 1080px 이하에서는 1열로 바뀌므로 min-width 로 가둔다. */
@media (min-width:1081px){
  /* 🔴 격자를 가운데로 몰지 않는다. 히어로만 가운데에 서면 바로 아래
     주의 구획(컨테이너 폭)과 좌우 끝이 어긋난다 — 그 어긋남이 화면에서
     제일 먼저 눈에 띈다. 컨테이너를 꽉 채우고, 오른쪽 열이 오른쪽 끝을
     잡아 준다. */
  /* 오른쪽 열 520 → 640px. 이 그림은 툴바 · 시리즈 목록 · 사이드바까지 든
     앱 전체 화면이라, 좁게 두면 무엇을 보여 주는 그림인지 읽히지 않는다 —
     제품을 처음 보는 사람이 가장 먼저 만나는 그림이다.
     왼쪽 열은 제목(52px 두 줄)이 들어갈 만큼 남겨야 하므로, 간격을
     64 → 56px 로 좁히고 .pv-hero 의 컨테이너를 기본 폭(1320px)으로
     되돌려 폭을 만든다. 그림이 커진 만큼 글과 그림 사이가 휑하게 뜨던
     문제도 함께 사라진다. */
  .pv-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:56px}
}


/* ── 제품 페이지 히어로 — 내용 폭에 맞춰 가운데로 ─────────────────
 * 컨테이너가 1320px 이라 왼쪽 열이 남는 폭을 다 가져가고, 리드는
 * max-width:560px 에서 멈춘다. 그래서 글과 오른쪽 그림 사이가 휑하게 뜬다.
 * 🔴 격자만 좁히면 바로 아래 주의 구획과 좌우 끝이 어긋난다(한 번 겪음).
 *    둘 다 .container 안에 있으므로 컨테이너를 좁혀 함께 모은다.
 * 폭은 재서 정했다 — 본문 1136px 는 주의 문장 중 가장 긴 문의(1132px)가 한 줄로 들어가는 최소치다. 더 좁히면 그 문장이 꺾인다. (AJCC 문단 1338px 는 어떤 폭에서도 두 줄이다.) */
.pv-hero .container{max-width:1320px}