/* ═══════════════════════════════════════════════════════════════════════════
   ASIV 제품 페이지 시스템 — erp.html · approval.html 만 읽는다.

   허브(index.html)는 이 파일을 읽지 않는다. 허브의 Hero 는 건드리지 않기로
   한 자리이고, 여기 있는 것은 제품 페이지에서만 필요한 리듬이다.

   ── 이 페이지가 무엇을 하려는가 ──────────────────────────────────────────

   구매 논리는 아홉 장으로 고정돼 있다: 선언 → 내비 → 위험 → 대비 → 결과 →
   장면 → 경계 → 비교 → 행동. 각 장은 서로 다른 화면 리듬을 가진다. 같은
   카드 세 개를 여덟 번 반복하는 페이지는 여덟 개의 섹션이 아니라 한 개의
   섹션을 여덟 번 보여 주는 것이다.

     hero        검은 전면. 선언 하나와 제품 화면. 85svh.
     nav         낮은 고정 띠. 헤더 아래에 붙어 장을 옮겨 다닌다.
     risks       밝은 지면. 번호가 붙은 네 개의 위험을 2열 비대칭으로.
     polarity    검은 지면. 큰 글자 두 덩어리. 카드도 아이콘도 없다.
     outcomes    밝은 지면. 좌측 글, 우측 제품 화면의 editorial 그리드.
     usecases    검은 지면. 세로 탭 — 상황 / 결과 / 화면.
     trust       검은 지면. 대형 단어 세 개와 그 아래 한 문장씩.
     comparison  밝은 지면. 가로 비교 하나. 카드 세 장이 아니다.
     cta         검은 패널. 이 페이지에서 둥근 모서리를 크게 쓰는 유일한 곳.

   ── 왜 명암을 번갈아 두는가 ─────────────────────────────────────────────

   전부 검은 페이지는 길어지면 한 장처럼 읽힌다. 주장(narrative)은 어둡게,
   제품이 실제로 무엇을 하는지 보여 주는 자리(product)는 밝게 둔다. 밝은
   지면에서는 제품 캡처가 자기 배경을 갖고 떠 있지 않는다 — 캡처가 흰
   바탕이기 때문이다.

   ── 애니메이션 ──────────────────────────────────────────────────────────

   opacity 와 translate 만, 한 번만. reduced-motion 에서는 아예 켜지 않는다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* 밝은 지면. 차가운 검정 옆에 두면 종이가 파랗게 죽어 보여서, 아주 옅게
     따뜻한 쪽으로 민다. */
  --paper:#F4F6F8;
  --paper-2:#E9EDF1;
  --ink:#0A1420;
  --ink-muted:#4A5A6B;
  --ink-line:rgba(10,20,32,.14);
  --pmax:1240px;
  --gutter:32px;
}

/* ── 지면 ───────────────────────────────────────────────────────────────── */

.pwrap{max-width:var(--pmax);margin:0 auto;padding:0 var(--gutter)}

/* 12칸 격자. 실제로 12칸을 다 쓰는 곳은 없다 — 비대칭으로 앉히기 위한
   좌표계이지 칸을 채우는 판이 아니다. */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}

section.pband{padding:132px 0;position:relative}
/* 어두운 장이 연달아 오면 경계가 사라져 한 장처럼 읽힌다. 밝은 지면은
   배경이 스스로 끊어 주므로 어두운 쪽에만 선을 둔다. */
section.pband + section.pband:not(.light){border-top:1px solid var(--line)}
section.pband.light{background:var(--paper);color:var(--ink)}
section.pband.light .peyebrow{color:#2E6B86}
section.pband.light .plede,
section.pband.light .pbody{color:var(--ink-muted)}
section.pband.light .psec{color:var(--ink)}

.peyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cyan)}
.psec{margin-top:20px;font-size:clamp(27px,3.4vw,46px);line-height:1.16;
  letter-spacing:-.02em;font-weight:600;max-width:20ch;text-wrap:balance}
html[lang="en"] .psec{max-width:22ch}
.plede{margin-top:22px;font-size:17px;line-height:1.7;color:var(--muted);max-width:64ch}

/* 본문은 화면 폭까지 늘리지 않는다. 한 줄이 길면 눈이 다음 줄 첫 글자를
   못 찾는다 — 넓은 화면일수록 더 그렇다. */
.pbody{font-size:15px;line-height:1.75;color:var(--muted);max-width:62ch}

/* 한 번만 켜지는 진입. transform 은 translateY 하나뿐이다. */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
.rise.on{opacity:1;transform:none}
.no-js .rise{opacity:1;transform:none}


.phero{min-height:85svh;display:flex;align-items:center;
  padding:72px 0 96px;position:relative;overflow:hidden}
/* 얇은 격자 한 겹. 배경 이미지도, 떠다니는 입자도 아니다. */
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(to right,rgba(110,219,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(110,219,255,.05) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 22% 40%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 80% 70% at 22% 40%,#000,transparent 76%)}
.phero > .pwrap{width:100%;position:relative}
.phero-grid{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);
  gap:56px;align-items:center}

.pback{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.19em;color:var(--muted);text-decoration:none}
.pback:hover{color:var(--text)}
.ptag{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cyan)}

/* 선언문. 화면 폭을 따라 크게 움직이되 모바일에서 잘리지 않도록 아래를
   충분히 낮게 잡는다. */
.phero h1{margin-top:20px;font-size:clamp(34px,4.9vw,64px);line-height:1.08;
  letter-spacing:-.03em;font-weight:600;max-width:15ch;text-wrap:balance}
html[lang="en"] .phero h1{max-width:14ch}
/* 한국어는 em 으로 잡는다. ch 로 두면 세 줄로 갈라져 선언이 흐려진다. */
html[lang="ko"] .phero h1{max-width:13em}
html[lang="ko"] .psec{max-width:17em}
.phero-sub{margin-top:26px;font-size:17.5px;line-height:1.68;color:var(--muted);max-width:46ch}
.phero-sub+.phero-sub{margin-top:12px}

.pactions{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pbtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:6px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  border:1px solid var(--line);color:var(--text);background:none;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.pbtn:hover{border-color:var(--cyan);background:rgba(110,219,255,.08)}
.pbtn.is-primary{background:var(--cyan);border-color:var(--cyan);color:#02050B;font-weight:600}
.pbtn.is-primary:hover{background:#8FE6FF;border-color:#8FE6FF}
section.pband.light .pbtn{border-color:var(--ink-line);color:var(--ink)}
section.pband.light .pbtn:hover{border-color:#2E6B86;background:rgba(46,107,134,.08)}

/* ── 제품 화면 ──────────────────────────────────────────────────────────
   캡처는 흰 바탕이므로 어두운 지면 위에서 스스로 떠오른다. 유리 효과나
   3D 기울임은 쓰지 않는다 — 화면을 읽기 어렵게만 만든다.                */

figure.pshot{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;box-shadow:0 24px 60px rgba(2,5,11,.55)}
figure.pshot img{display:block;width:100%;height:auto}
figure.pshot figcaption{padding:10px 14px;font-size:11px;line-height:1.5;
  color:var(--muted);background:var(--bg);border-top:1px solid var(--line)}
section.pband.light figure.pshot{box-shadow:0 18px 44px rgba(10,20,32,.14);
  border-color:var(--ink-line)}
section.pband.light figure.pshot figcaption{background:var(--paper-2);
  color:var(--ink-muted);border-top-color:var(--ink-line)}

/* Hero 의 두 화면 — 넓은 요약 위에 좁은 근거 패널이 겹친다. 겹침은 장식이
   아니라 "요약에서 근거로 들어간다"는 순서를 그린 것이다. */
/* 요약(넓고 낮음) 위에 근거 패널(좁고 높음)이 겹치면 요약이 통째로 가려진다.
   겹치는 대신 아래로 흘려 오른쪽으로 민다 — 요약에서 근거로 들어가는 순서는
   그대로 남고, 둘 다 읽힌다. */
.pshot-stack{position:relative;display:grid;gap:16px}
.pshot-stack .pshot-inset{width:68%;margin-left:auto}
.pshot-stack .pshot-inset img{max-height:340px;object-fit:cover;object-position:top}

/* ── 02 고정 제품 내비게이션 ────────────────────────────────────────────
   헤더(64px) 바로 아래에 붙는다. 두 겹이 겹치면 앵커로 이동했을 때 제목이
   가려지므로 scroll-padding 을 둘의 합보다 크게 잡는다.                  */

.pnav{position:sticky;top:64px;z-index:50;
  background:rgba(2,5,11,.86);backdrop-filter:saturate(150%) blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pnav .pwrap{display:flex;align-items:center;gap:4px;height:54px;overflow-x:auto;
  scrollbar-width:none}
.pnav .pwrap::-webkit-scrollbar{display:none}
.pnav a{flex:none;text-decoration:none;color:var(--muted);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  padding:9px 14px;border-radius:5px;white-space:nowrap;
  transition:color .16s ease,background .16s ease}
.pnav a:hover{color:var(--text);background:rgba(143,167,194,.09)}
.pnav a.is-here{color:var(--text)}
/* 마지막 한 칸만 신호색을 쓴다. 전부 강조하면 아무것도 강조되지 않는다. */
.pnav a.is-cta{margin-left:auto;color:var(--cyan);border:1px solid rgba(110,219,255,.35)}
.pnav a.is-cta:hover{background:rgba(110,219,255,.12);color:#DFF6FF}

/* ── 03 위험 ────────────────────────────────────────────────────────────
   번호와 제목이 왼쪽 칸을, 설명이 오른쪽 칸을 쓴다. 카드 상자를 두르지
   않고 가로선으로만 나눈다.                                              */

.prisks{margin-top:64px;border-top:1px solid var(--ink-line)}
.prisk{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px;
  padding:34px 0;border-bottom:1px solid var(--ink-line);align-items:start}
.prisk-no{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:#2E6B86}
.prisk h3{margin-top:10px;font-size:19px;font-weight:600;line-height:1.35;
  letter-spacing:-.01em;max-width:22ch}
.prisk p{font-size:15px;line-height:1.75;color:var(--ink-muted);max-width:58ch}

/* ── 04 대비 선언 ───────────────────────────────────────────────────────
   한 화면에 주장 하나. 큰 글자와 여백만 쓴다 — 아이콘 카드는 이 자리에서
   문장을 장식으로 만든다.                                                */

.ppolar{margin-top:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.ppole-title{font-family:var(--mono);font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.13em;color:var(--cyan);font-weight:500}
.ppole ul{margin-top:26px;list-style:none;border-top:1px solid var(--line)}
.ppole li{padding:20px 0;border-bottom:1px solid var(--line);
  font-size:clamp(21px,2.4vw,32px);line-height:1.25;letter-spacing:-.018em;font-weight:600}
/* 드러나야 하는 쪽은 한 단계 낮춘다 — 지켜야 하는 것이 먼저다. */
.ppole.is-surface .ppole-title{color:var(--muted)}
.ppole.is-surface li{color:var(--muted)}

/* ── 05 결과 ────────────────────────────────────────────────────────────
   좌측 글, 우측 화면. 같은 크기 카드 넷을 늘어놓지 않는다.               */

.poutcomes{margin-top:60px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:56px;align-items:start}
.poutcome-list{list-style:none;border-top:1px solid var(--ink-line)}
.poutcome-list li{padding:26px 0;border-bottom:1px solid var(--ink-line)}
.poutcome-no{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:#2E6B86}
.poutcome-list h3{margin-top:9px;font-size:17.5px;font-weight:600;line-height:1.4}
.poutcome-list p{margin-top:9px;font-size:14.5px;line-height:1.72;color:var(--ink-muted);max-width:52ch}

/* ── 06 적용 장면 ───────────────────────────────────────────────────────
   자바스크립트 없이 동작한다. 라디오 + :checked 로 패널을 바꾸므로 키보드
   화살표로 탭이 넘어가고, 스크립트가 죽어도 첫 장면이 그대로 보인다.     */

.ptabs{margin-top:64px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:48px;align-items:start}
.ptabs input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.ptablist{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.ptablist label{display:block;padding:16px 20px;cursor:pointer;
  font-size:16px;font-weight:500;color:var(--muted);line-height:1.4;
  border-left:2px solid transparent;margin-left:-1px;
  transition:color .18s ease,border-color .18s ease}
.ptablist label:hover{color:var(--text)}
.ptabpanels{position:relative}
.ptabpanel{display:none}
.ptabpanel-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ptab-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.ptab-term{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan)}
.ptab-lines p{margin-top:11px;font-size:16px;line-height:1.65;color:var(--text);max-width:44ch}
.ptab-lines .is-quiet p{color:var(--muted)}

/* 라디오 하나당 탭 하나. 순서가 곧 규칙이라 nth-of-type 으로 짝을 맺는다. */
.ptabs input:nth-of-type(1):checked ~ .ptablist label:nth-of-type(1),
.ptabs input:nth-of-type(2):checked ~ .ptablist label:nth-of-type(2),
.ptabs input:nth-of-type(3):checked ~ .ptablist label:nth-of-type(3),
.ptabs input:nth-of-type(4):checked ~ .ptablist label:nth-of-type(4){
  color:var(--text);border-left-color:var(--cyan)}
.ptabs input:nth-of-type(1):checked ~ .ptabpanels .ptabpanel:nth-of-type(1),
.ptabs input:nth-of-type(2):checked ~ .ptabpanels .ptabpanel:nth-of-type(2),
.ptabs input:nth-of-type(3):checked ~ .ptabpanels .ptabpanel:nth-of-type(3),
.ptabs input:nth-of-type(4):checked ~ .ptabpanels .ptabpanel:nth-of-type(4){display:block}
/* 키보드로 탭을 옮길 때 어디 있는지 보이게 한다 — 라디오 자체는 화면 밖이다. */
.ptabs input:nth-of-type(1):focus-visible ~ .ptablist label:nth-of-type(1),
.ptabs input:nth-of-type(2):focus-visible ~ .ptablist label:nth-of-type(2),
.ptabs input:nth-of-type(3):focus-visible ~ .ptablist label:nth-of-type(3),
.ptabs input:nth-of-type(4):focus-visible ~ .ptablist label:nth-of-type(4){
  outline:2px solid var(--cyan);outline-offset:-2px;border-radius:3px}


.ppillars{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line)}
.ppillar{padding:40px 36px 40px 0;border-bottom:1px solid var(--line)}
.ppillar+.ppillar{border-left:1px solid var(--line);padding-left:36px}
.ppillar-word{font-family:var(--mono);font-size:clamp(19px,2.2vw,30px);
  letter-spacing:.02em;font-weight:500;color:var(--cyan);line-height:1.1}
.ppillar p{margin-top:18px;font-size:14.5px;line-height:1.72;color:var(--muted);max-width:34ch}

.pproof{margin-top:52px;padding:26px 28px;border:1px solid var(--line);border-radius:8px;
  background:rgba(6,21,46,.42);max-width:78ch}
.pproof p{font-size:13.5px;line-height:1.75;color:var(--muted)}
.pproof p+p{margin-top:11px}
.pproof strong{color:var(--text);font-weight:600}
.pproof .pcond{margin-top:16px;padding-left:13px;border-left:2px solid var(--line);
  font-size:12.5px;color:var(--muted)}

/* ── 08 비교 ────────────────────────────────────────────────────────────
   카드 셋이 아니라 표 하나. 축이 왼쪽에 서 있어야 눈이 가로로 읽는다.    */

.pcompare{margin-top:60px;overflow-x:auto;border:1px solid var(--ink-line);border-radius:10px}
.pcompare table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
.pcompare th,.pcompare td{text-align:left;padding:18px 20px;vertical-align:top;
  border-bottom:1px solid var(--ink-line)}
.pcompare thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:500;
  background:var(--paper-2);border-bottom:1px solid var(--ink-line)}
/* asiv.css 의 맨 th 규칙(허브의 표용: mono 11px, 자간 .15em, 시안색)이 여기까지
   흘러든다. 축 이름이 본문보다 작고 벌어져 보이던 원인이다. 이 표의 축은
   본문과 같은 글꼴·크기로 서야 눈이 가로로 읽는다. */
.pcompare tbody th{font-family:var(--sans);font-size:14.5px;letter-spacing:normal;
  font-weight:600;color:var(--ink);width:20%;background:rgba(10,20,32,.03)}
.pcompare td{color:var(--ink-muted);line-height:1.6}
/* 우리 열만 잉크색으로 올린다. 다른 열을 깎아 내리지 않고 이쪽을 세운다. */
.pcompare thead th.is-ours{color:var(--ink);background:#DDE9EF}
.pcompare td.is-ours{color:var(--ink);font-weight:500;background:rgba(46,107,134,.06)}
.pcompare tr:last-child th,.pcompare tr:last-child td{border-bottom:none}

/* ── 09 최종 CTA ────────────────────────────────────────────────────────
   페이지에서 큰 라운드 패널을 쓰는 유일한 자리. 배경 그림을 가져오지 않고
   격자와 선을 CSS 로 그린다.                                             */

.pcta{padding:120px 0 140px}
.pcta-panel{position:relative;overflow:hidden;border-radius:22px;
  border:1px solid rgba(110,219,255,.28);
  background:radial-gradient(120% 140% at 12% 0%,rgba(10,44,94,.75),rgba(2,5,11,.9) 62%);
  padding:clamp(44px,6vw,88px)}
.pcta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(to right,rgba(110,219,255,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(110,219,255,.08) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(115deg,#000 8%,transparent 62%);
  mask-image:linear-gradient(115deg,#000 8%,transparent 62%)}
/* 오른쪽 아래로 한 번 지나가는 얇은 선. 움직이지 않는다. */
.pcta-panel::after{content:"";position:absolute;right:-14%;top:-40%;width:60%;height:180%;
  pointer-events:none;transform:rotate(18deg);opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(110,219,255,.16) 0 1px,transparent 1px 26px);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);
  mask-image:radial-gradient(closest-side,#000,transparent)}
/* 폭은 감싸개가 아니라 글자에 건다. .pcta-inner 는 16px 이라 여기 걸린
   34ch 는 270px 남짓이고, 그 안에서 54px 제목이 한 단어씩 끊겼다. */
.pcta-inner{position:relative}
.pcta h2{font-size:clamp(30px,3.9vw,54px);line-height:1.1;letter-spacing:-.026em;
  font-weight:600;text-wrap:balance;max-width:16ch}
html[lang="ko"] .pcta h2{max-width:13em}
.pcta .plede{max-width:52ch}
.pcta-note{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:44ch}

/* ── Approval 계열 ──────────────────────────────────────────────────────
   구조는 같고 신호색만 다르다. 두 제품이 한 회사의 것으로 읽히면서도 서로
   다른 자리에 있다는 뜻이다.                                             */

.apr .peyebrow,.apr .ptag,.apr .ppole-title,.apr .ppillar-word,
.apr .ptab-term,.apr .prisk-no,.apr .poutcome-no{color:var(--emerald)}
.apr section.pband.light .peyebrow,
.apr section.pband.light .prisk-no,
.apr section.pband.light .poutcome-no{color:#1F7A5A}
.apr .pbtn:hover{border-color:var(--emerald);background:rgba(84,230,166,.08)}
.apr .pbtn.is-primary{background:var(--emerald);border-color:var(--emerald)}
.apr .pbtn.is-primary:hover{background:#83F0BE;border-color:#83F0BE}
.apr section.pband.light .pbtn:hover{border-color:#1F7A5A;background:rgba(31,122,90,.08)}
.apr .pnav a.is-cta{color:var(--emerald);border-color:rgba(84,230,166,.35)}
.apr .pnav a.is-cta:hover{background:rgba(84,230,166,.12);color:#D8FFEE}
.apr .ptabs input:nth-of-type(1):checked ~ .ptablist label:nth-of-type(1),
.apr .ptabs input:nth-of-type(2):checked ~ .ptablist label:nth-of-type(2),
.apr .ptabs input:nth-of-type(3):checked ~ .ptablist label:nth-of-type(3),
.apr .ptabs input:nth-of-type(4):checked ~ .ptablist label:nth-of-type(4){
  border-left-color:var(--emerald)}
.apr .phero::before{
  background-image:
    linear-gradient(to right,rgba(84,230,166,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(84,230,166,.05) 1px,transparent 1px)}
.apr .pcta-panel{border-color:rgba(84,230,166,.28);
  background:radial-gradient(120% 140% at 12% 0%,rgba(8,58,44,.72),rgba(2,5,11,.9) 62%)}
.apr .pcta-panel::before{
  background-image:
    linear-gradient(to right,rgba(84,230,166,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(84,230,166,.08) 1px,transparent 1px)}
.apr .pcta-panel::after{
  background:repeating-linear-gradient(90deg,rgba(84,230,166,.16) 0 1px,transparent 1px 26px)}
.apr .pcompare thead th.is-ours{background:#D7EFE4}
.apr .pcompare td.is-ours{background:rgba(31,122,90,.06)}
.apr section.pband.light .psurface-badge{background:#1F7A5A}
/* 실측 장은 이 지도가 쓰인 뒤에 붙었다. 빠뜨리면 승인 페이지 한가운데에
   ERP 의 시안색 숫자 넉 장이 남는다. */
.apr .pmetric-figure{color:var(--emerald)}
.apr .pbudget-bar{background:var(--emerald)}


.psurface{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(10,44,94,.3),rgba(6,21,46,.14))}
section.pband.light .psurface{border-color:var(--ink-line);
  background:#fff;box-shadow:0 18px 44px rgba(10,20,32,.12)}
.psurface-head{padding:16px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
section.pband.light .psurface-head{border-bottom-color:var(--ink-line);color:var(--ink-muted)}
.psurface-row{display:grid;grid-template-columns:minmax(84px,max-content) minmax(0,1fr);gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);align-items:start}
section.pband.light .psurface-row{border-bottom-color:var(--ink-line)}
.psurface-row:last-of-type{border-bottom:none}
.psurface-badge{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#02050B;background:var(--emerald);padding:5px 8px;border-radius:4px;white-space:nowrap}
.psurface-badge.is-quiet{background:transparent;color:var(--muted);
  border:1px solid var(--line)}
section.pband.light .psurface-badge.is-quiet{color:var(--ink-muted);border-color:var(--ink-line)}
.psurface-line{font-size:15px;font-weight:600;line-height:1.45}
.psurface-note{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--muted)}
section.pband.light .psurface-note{color:var(--ink-muted)}
.psurface-term{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emerald);padding-top:3px}
.psurface-desc{font-size:14.5px;line-height:1.7;color:var(--muted)}
section.pband.light .psurface-desc{color:var(--ink-muted)}
.psurface-title{padding:20px;font-size:16.5px;font-weight:600;line-height:1.45;
  border-bottom:1px solid var(--line)}
section.pband.light .psurface-title{border-bottom-color:var(--ink-line)}
.psurface-foot{display:flex;align-items:center;gap:9px;padding:14px 20px;
  border-top:1px solid var(--line);background:rgba(2,5,11,.34);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
section.pband.light .psurface-foot{background:var(--paper-2);
  border-top-color:var(--ink-line);color:var(--ink-muted)}
.psurface-foot::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--emerald)}
.psurface figcaption{padding:10px 20px;font-size:11px;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--line)}

/* 제품 화면의 잔글씨는 한국어에서 다른 글꼴을 쓴다.
   mono + uppercase + .16em 자간은 라틴 문자를 위한 장치다. 한글은 IBM Plex
   Mono 에 글자가 없어 대체 글꼴로 떨어지고, 10px 에 자간까지 벌어지면 배지
   안에서 뭉개져 읽히지 않는다("충돌", "확인됨"이 그랬다). 한국어 쪽만 본문
   글꼴로 되돌리고, 자간을 좁히고, 한 급 키운다. 영어는 그대로 둔다. */
.psurface-head[data-ko],
.psurface-badge[data-ko],
.psurface-term[data-ko],
.psurface-foot [data-ko]{font-family:var(--sans);letter-spacing:.01em;text-transform:none;font-size:12.5px}
.psurface-badge[data-ko]{font-size:11.5px;padding:4px 9px}
.psurface-term[data-ko]{font-size:12px;padding-top:2px}
.psurface-head[data-ko]{font-size:12.5px}

/* 같은 이유로 12px 아래의 mono 잔글씨는 한국어에서 본문 글꼴로 되돌린다.
   경계를 12px 에 둔 것은 그 아래에서 대체 한글 글꼴의 속공간이 무너지기
   때문이다 — 버튼(12px)과 제출 버튼(12.5px)은 그대로 mono 로 둔다. 라틴
   문자로 찍히는 장 표제(THE ACCOUNTABILITY RISK 같은)는 하나도 안 바뀐다. */
.peyebrow[data-ko],
.ptab-term[data-ko],
.pcompare thead th [data-ko]{font-family:var(--sans);text-transform:none}
.peyebrow[data-ko]{font-size:12.5px;letter-spacing:.08em}
.ptab-term[data-ko]{font-size:12.5px;letter-spacing:.04em}
.pcompare thead th [data-ko]{font-size:12.5px;letter-spacing:.02em;font-weight:600}
section.pband.light .psurface figcaption{border-top-color:var(--ink-line);color:var(--ink-muted)}

/* ── 좁은 화면 ──────────────────────────────────────────────────────────
   대형 타이포가 잘리지 않는 것이 첫째, CTA 가 가려지지 않는 것이 둘째.   */

@media (max-width:1080px){
  .phero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .poutcomes{grid-template-columns:minmax(0,1fr);gap:40px}
  .ptabs{grid-template-columns:minmax(0,1fr);gap:28px}
  .ptablist{flex-direction:row;overflow-x:auto;border-left:none;
    border-bottom:1px solid var(--line);scrollbar-width:none}
  .ptablist::-webkit-scrollbar{display:none}
  .ptablist label{border-left:none;border-bottom:2px solid transparent;
    margin-left:0;margin-bottom:-1px;white-space:nowrap;padding:14px 16px;font-size:15px}
  .ptabs input:nth-of-type(1):checked ~ .ptablist label:nth-of-type(1),
  .ptabs input:nth-of-type(2):checked ~ .ptablist label:nth-of-type(2),
  .ptabs input:nth-of-type(3):checked ~ .ptablist label:nth-of-type(3),
  .ptabs input:nth-of-type(4):checked ~ .ptablist label:nth-of-type(4){
    border-left-color:transparent;border-bottom-color:var(--cyan)}
  .apr .ptabs input:nth-of-type(1):checked ~ .ptablist label:nth-of-type(1),
  .apr .ptabs input:nth-of-type(2):checked ~ .ptablist label:nth-of-type(2),
  .apr .ptabs input:nth-of-type(3):checked ~ .ptablist label:nth-of-type(3),
  .apr .ptabs input:nth-of-type(4):checked ~ .ptablist label:nth-of-type(4){
    border-bottom-color:var(--emerald)}
  .ppolar{gap:44px}
  .ppillars{grid-template-columns:minmax(0,1fr)}
  .ppillar{padding:32px 0}
  .ppillar+.ppillar{border-left:none;padding-left:0}
}

@media (max-width:820px){
  section.pband{padding:96px 0}
  .pcta{padding:88px 0 104px}
  .ppolar{grid-template-columns:minmax(0,1fr)}
  .prisk{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0}
  .ptab-lines{grid-template-columns:minmax(0,1fr);gap:24px}
  /* 겹쳐 둔 두 화면은 좁은 폭에서 서로를 가린다. 세로로 푼다. */
  .pshot-stack{padding-bottom:0;display:grid;gap:18px}
  .pshot-stack .pshot-inset{position:static;width:100%}
  .pshot-stack .pshot-inset img{max-height:none;object-fit:contain}
  .pnav .pwrap{height:50px}
  /* 좁은 화면에서 내비는 옆으로 굴러간다. 그대로 두면 마지막 칸인 파일럿
     신청이 화면 밖에 있고, 그걸 보려면 먼저 띠를 밀어야 한다는 걸 알아야
     한다 — 아무도 모른다. 오른쪽 끝에 붙여 두고 나머지가 그 밑으로 지나가게
     한다. 배경을 깔지 않으면 지나가는 글자가 CTA 위로 비친다. */
  .pnav a.is-cta{margin-left:auto;position:sticky;right:0;
    background:rgba(2,5,11,.94);box-shadow:-14px 0 14px rgba(2,5,11,.94)}
}

@media (max-width:480px){
  :root{--gutter:20px}
  .phero{min-height:0;padding:48px 0 64px}
  .phero h1{letter-spacing:-.022em}
  .psurface-row{grid-template-columns:minmax(0,1fr);gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

/* ── 앵커 착지 ──────────────────────────────────────────────────────────
   sticky 가 두 겹이다(헤더 64px + 제품 내비 54px). 공통 파일의
   scroll-padding-top:76px 은 헤더 하나만 계산한 값이라, 그대로 두면 앵커로
   이동했을 때 섹션 제목이 제품 내비 밑에 깔린다.                          */
html{scroll-padding-top:136px}
@media (max-width:820px){ html{scroll-padding-top:128px} }
@media (max-width:560px){ html{scroll-padding-top:184px} }

/* ── 07-b 실측 ──────────────────────────────────────────────────────────
   숫자 넷을 한 줄로 세운다. 카드 상자를 두르지 않고 세로선으로만 나눈다 —
   상자를 두르면 앞의 여덟 장에서 쓰지 않기로 한 카드 격자가 여기서 되살아난다.

   응답 예산은 지표가 아니라 성질이라 숫자로 세우지 않고 계단(막대)으로 그린다.
   길이가 곧 뜻이다: 바깥 구간이 안쪽보다 길어야 한다.                     */
.pmetrics{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pmetric{padding:34px 28px 34px 0}
.pmetric+.pmetric{border-left:1px solid var(--line);padding-left:28px}
.pmetric-figure{font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.03em;
  font-weight:400;color:var(--cyan);font-variant-numeric:tabular-nums}
.pmetric-term{margin-top:14px;font-size:14.5px;font-weight:600;line-height:1.4}
.pmetric-desc{margin-top:9px;font-size:13.5px;line-height:1.68;color:var(--muted)}

.pbudget{margin-top:56px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:48px;align-items:start}
.pbudget h3{font-size:17px;font-weight:600;line-height:1.4}
.pbudget-note{margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:44ch}
.pbudget-bars{list-style:none;display:grid;gap:18px}
.pbudget-bars li{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr) auto;
  gap:18px;align-items:center;font-size:13.5px;color:var(--muted)}
/* 막대 길이는 계단의 자리(--step)로 정한다. 값 자체를 픽셀로 옮기면 60초가
   60px 이 되는 식의 우연한 대응이 생기고, 값이 바뀔 때 그림이 거짓말을 한다. */
.pbudget-bar{height:2px;background:var(--cyan);opacity:.55;border-radius:2px;
  width:calc(62% + var(--step) * 19%)}
.pbudget-value{font-family:var(--mono);font-size:12.5px;color:var(--text);
  font-variant-numeric:tabular-nums}

/* ── 10 파일럿 신청 ─────────────────────────────────────────────────────
   왼쪽에 왜 신청하는지, 오른쪽에 폼. 밝은 지면이라 입력칸이 종이 위에 놓인
   것처럼 보인다 — 검은 배경에 흰 입력칸을 얹는 것보다 덜 튄다.            */
.ppilot{margin-top:56px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:64px;align-items:start}
.ppilot-checks{margin-top:34px;list-style:none;display:grid;gap:14px}
.ppilot-checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;
  font-size:14.5px;line-height:1.7;color:var(--ink-muted)}
.ppilot-checks li::before{content:"";width:9px;height:9px;margin-top:8px;border-radius:2px;
  background:#2E6B86}
.apr .ppilot-checks li::before{background:#1F7A5A}

.pform{background:#fff;border:1px solid var(--ink-line);border-radius:14px;
  padding:32px;box-shadow:0 18px 44px rgba(10,20,32,.1)}
.pform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.pfield{display:flex;flex-direction:column;gap:7px;min-width:0}
.pfield.is-wide{grid-column:1 / -1}
.pfield label{font-size:12.5px;font-weight:600;color:var(--ink)}
.pfield .req{color:#B4304A;margin-left:2px}
.pfield input,.pfield select,.pfield textarea{
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid var(--ink-line);border-radius:8px;padding:11px 13px;min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease}
.pfield textarea{min-height:88px;resize:vertical;line-height:1.6}
.pfield input::placeholder,.pfield textarea::placeholder{color:#9AA8B6}
.pfield input:focus,.pfield select:focus,.pfield textarea:focus{
  outline:none;border-color:#2E6B86;box-shadow:0 0 0 3px rgba(46,107,134,.14)}
.apr .pfield input:focus,.apr .pfield select:focus,.apr .pfield textarea:focus{
  border-color:#1F7A5A;box-shadow:0 0 0 3px rgba(31,122,90,.14)}

.pform-submit{margin-top:22px;width:100%;min-height:52px;border:none;border-radius:9px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;font-weight:600;
  color:#02050B;background:var(--cyan);cursor:pointer;
  transition:background .18s ease,opacity .18s ease}
.pform-submit:hover{background:#8FE6FF}
.apr .pform-submit{background:var(--emerald)}
.apr .pform-submit:hover{background:#83F0BE}
.pform-submit[disabled]{opacity:.5;cursor:not-allowed}
.pform-note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--ink-muted)}
/* 전송 결과. 성공도 실패도 화면에 쓴다 — 조용히 끝나면 신청자는 보냈는지
   모른 채 떠나고, 받는 쪽은 온 적이 없다는 것도 모른다. */
.pform-status{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink);min-height:1.2em}

@media (max-width:1080px){
  .pmetrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pmetric+.pmetric{border-left:none;padding-left:0}
  .pmetric:nth-child(even){border-left:1px solid var(--line);padding-left:28px}
  .pbudget{grid-template-columns:minmax(0,1fr);gap:28px}
  .ppilot{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:560px){
  .pmetrics{grid-template-columns:minmax(0,1fr)}
  .pmetric,.pmetric:nth-child(even){border-left:none;padding:26px 0}
  .pmetric+.pmetric{border-top:1px solid var(--line)}
  .pform{padding:22px}
  .pform-grid{grid-template-columns:minmax(0,1fr)}
  .pbudget-bars li{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .pbudget-bar{display:none}
}