/* ============================================================
   AI PIA — KRDS Design Token (Portrait Kiosk 1080x1920)
   ============================================================ */
:root{
  /* Color — KRDS Semantic */
  --pia-primary:#246BEB; --pia-primary-dark:#1D56BC; --pia-primary-light:#EAF1FE; --pia-primary-border:#B6CDF8;
  --pia-text:#1E2124; --pia-text-2:#464C53; --pia-text-3:#636D76; --pia-text-dis:#9AA5B4;
  --pia-border:#CDD1D5; --pia-border-2:#E0E4EA;
  /* 조작 가능한 요소의 경계선은 배경과 3:1 이상이어야 보인다 (WCAG 1.4.11) */
  --pia-border-strong:#7E848B; --pia-border-strong-2:#919599; --pia-surface:#F4F5F6; --pia-bg:#FFFFFF;
  --pia-success:#128700; --pia-success-bg:#EAFBE6; --pia-warning:#B36F00; --pia-danger:#DE1F26; --pia-danger-bg:#FDF0F0;
  /* Spacing — 8px grid */
  --pia-s1:8px; --pia-s2:16px; --pia-s3:24px; --pia-s4:32px; --pia-s5:40px; --pia-s6:48px; --pia-s8:64px;
  /* Radius */
  --pia-r-sec:16px; --pia-r-card:12px; --pia-r-input:12px; --pia-r-btn:12px; --pia-r-pill:999px;
  /* Typography scale (kiosk base) */
  --pia-f-display:56px; --pia-f-h1:52px; --pia-f-h2:36px; --pia-f-h3:30px; --pia-f-q:38px;
  --pia-f-bodyL:28px; --pia-f-body:26px; --pia-f-btn:30px; --pia-f-input:26px; --pia-f-cap:22px; --pia-f-badge:22px;
  /* Touch target */
  --pia-touch:80px; --pia-touch-cta:96px; --pia-touch-choice:88px;
  /* Layout */
  --pia-canvas:1080px; --pia-safe:56px;
  --pia-font:"Noto Sans KR","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Segoe UI","맑은 고딕",sans-serif;
}
/* 데스크톱/일반 브라우저 — 캔버스 중앙정렬 + 스케일 축소 */
@media (max-width:1079px){
  :root{
    --pia-f-display:34px; --pia-f-h1:32px; --pia-f-h2:26px; --pia-f-h3:22px; --pia-f-q:24px;
    --pia-f-bodyL:19px; --pia-f-body:17px; --pia-f-btn:19px; --pia-f-input:17px; --pia-f-cap:15px; --pia-f-badge:15px;
    --pia-touch:56px; --pia-touch-cta:60px; --pia-touch-choice:60px; --pia-safe:20px;
  }
}
/* ============================================================
   태블릿·노트북 토큰
   ------------------------------------------------------------
   기본 :root 는 키오스크 세로 1080x1920 을 전제로 한 값이다
   (본문 26px · 표적 80px). 축소는 max-width:1079px 에서만 걸린다.
   그래서 **1080px 보다 넓고 세로가 짧은 기기**가 사각지대였다.
   실측: 1366x768 노트북에서 AI PIA 가 세로로 1,186px 넘쳤다.

   보는 거리에 맞춰 정한다.
     키오스크 1m 이상 서서   본문 29px
     태블릿   40cm 손에 들고 본문 20px
     노트북   50cm 책상      본문 18px
   ============================================================ */
html.dev-tablet:not(.kiosk-on){
  --pia-f-display:40px; --pia-f-h1:36px; --pia-f-h2:28px; --pia-f-h3:24px; --pia-f-q:28px;
  --pia-f-bodyL:22px; --pia-f-body:20px; --pia-f-btn:22px; --pia-f-input:20px;
  --pia-f-cap:16px; --pia-f-badge:16px;
  --pia-touch:56px; --pia-touch-cta:60px; --pia-touch-choice:60px;
  --pia-safe:28px;
}
html.dev-laptop:not(.kiosk-on){
  --pia-f-display:36px; --pia-f-h1:32px; --pia-f-h2:26px; --pia-f-h3:22px; --pia-f-q:26px;
  --pia-f-bodyL:20px; --pia-f-body:18px; --pia-f-btn:20px; --pia-f-input:18px;
  --pia-f-cap:15px; --pia-f-badge:15px;
  --pia-touch:48px; --pia-touch-cta:52px; --pia-touch-choice:52px;
  --pia-safe:24px;
}

/* 세로가 짧으면 여백부터 줄인다. 글자는 맞춤 엔진이 따로 줄인다.
   여백을 먼저 줄이는 이유 — 글자를 줄이면 읽기가 나빠지지만
   여백은 줄여도 읽기에 지장이 없다. 값싼 것부터 쓴다. */
html.screen-short:not(.kiosk-on){
  --pia-s3:18px; --pia-s4:24px; --pia-s5:30px; --pia-s6:36px; --pia-s8:44px;
}

/* 태블릿·노트북 검사 화면 — 여백과 보조 문구만 줄인다.

   글자 크기는 건드리지 않는다. 줄이면 읽기가 나빠지고, 접근성 기준
   (KWCAG 6.1.3 물리 6mm · WCAG 2.5.8 24px)과 부딪힌다.
   여백은 줄여도 읽기에 지장이 없으므로 값싼 것부터 쓴다.

   그래도 넘치면 **스크롤한다.** 노트북은 휠이, 태블릿은 스와이프가 있다.
   "한 화면"은 키오스크 고유의 제약이지 모든 기기에 강요할 규칙이 아니다.
   문항·선택지·진행 표시는 건드리지 않는다. */
html.screen-short:not(.kiosk-on) body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]):not([data-view="chat"]) .pia > .pia-cap,
html.screen-short:not(.kiosk-on) body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-autosave{
  display:none !important;
}
html.screen-short:not(.kiosk-on) body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-sec{
  padding:var(--pia-s3) var(--pia-s3) !important;
}
html.screen-short:not(.kiosk-on) body.pia-v2 .pia-choices{ gap:var(--pia-s1) !important; }

/* 검사 화면의 위아래 여백을 줄인다 */
html.screen-short:not(.kiosk-on) body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia{
  padding-top:var(--pia-s2) !important; padding-bottom:var(--pia-s2) !important;
}
/* 제목을 한 단계 낮춘다 — 문항 글자는 그대로 둔다 */
html.screen-short:not(.kiosk-on) body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]):not([data-view="chat"]) .pia-h1{
  font-size:var(--pia-f-h2) !important; margin-bottom:var(--pia-s1) !important;
}
/* 뒤로가기·안내 줄의 여백 */
html.screen-short:not(.kiosk-on) body.pia-v2 .pia-back{ margin-bottom:var(--pia-s1) !important; }
html.screen-short:not(.kiosk-on) body.pia-v2 .pia-prog{ margin-bottom:var(--pia-s1) !important; }

/* pia-fitted 는 키오스크에서만 붙는다. 다른 기기에서 overflow:hidden 이
   걸리면 스크롤이 막혀 아래쪽 버튼을 못 누른다. 명시적으로 막아 둔다. */
html:not(.kiosk-on) body.pia-v2{ overflow:visible !important; }

/* 영문 모드 결과지 표 헤더 — 인쇄 폭 보호 (2026-09-15)
 *
 * 표 헤더 110곳에 data-i18n 을 붙이면서 확인한 것: 한글 2자(등급·점수·
 * 기질)가 영문으로는 5~6자가 된다(Grade·Score·Trait). 글자 수만 보면
 * 2~3배지만 한글 한 자의 렌더 폭이 라틴 문자의 두 배쯤이라 실제 폭은
 * 비슷하다. 그래도 '다중지능 자가평가 지수' -> 'MI self-rating' 같은
 * 긴 항목이 있어 A4 고정폭 인쇄에서 줄이 넘칠 여지가 남는다.
 *
 * 헤더가 넘칠 때 표를 밀어내지 않고 스스로 줄어들게 한다. 줄바꿈을
 * 허용하고, 하한을 두어 읽을 수 없을 만큼 작아지지는 않게 한다. */
html[lang="en"] .pia-report th,
html[lang="en"] .print-sheet th{
  word-break:keep-all;
  overflow-wrap:break-word;
  hyphens:auto;
  font-size:clamp(9px, 0.92em, 1em);
}
@media print{
  html[lang="en"] .pia-report th,
  html[lang="en"] .print-sheet th{ font-size:clamp(8px, 0.88em, 1em); }
}

/* 글자 크게 (접근성)
 *
 * [2026-09-15] 버튼을 눌러도 아무 변화가 없던 문제를 고쳤다.
 *
 * 원인은 특이도였다. 이 규칙은 html[data-pia-fs="l"] 로 0-1-1 인데,
 * 기기별 기본값이 html.dev-laptop:not(.kiosk-on) 처럼 0-2-1 이라 항상
 * 기본값이 이겼다. 노트북·태블릿에서는 토큰이 단 한 번도 바뀌지 않았다.
 * (라이브 HTML 도 class="dev-laptop" 로 뜬다)
 *
 * 그래서 기기 클래스를 함께 적어 특이도를 맞추고, 어느 기기에서든 같은
 * 배율로 커지게 했다. 값을 고정 px 로 또 나열하지 않고 calc 배율로 쓴다 —
 * 기기별 기본값이 바뀌어도 따라가고, 두 곳을 같이 고쳐야 하는 일이 없다.
 *
 * 루트 font-size 는 건드리지 않는다. --pia-fit(키오스크 화면맞춤 배율)과
 * 곱해져 이중 배율이 되면 레이아웃이 깨진다. 토큰만 키운다. */
/* 값은 기기별로 고정 px 로 적는다.
 * 한때 calc(var(--pia-f-body) * 1.3) 처럼 토큰끼리 참조하게 썼다가
 * 같은 블록에서 재정의된 값을 다시 읽어 배율이 1.3 -> 1.69 로 겹쳤다.
 * 서로를 참조하지 않게 풀어 둔다. */
/* 실제 확대는 파일 뒤쪽 KRDS 레이어에서 처리한다.
 * 여기에 값을 적어도 KRDS 블록이 뒤에 있어 그쪽이 이긴다.
 * (2026-09-15 실측: 특이도가 같으면 소스 순서가 뒤인 쪽이 적용된다) */

/* ===== Base ===== */
.pia{ font-family:var(--pia-font); color:var(--pia-text); font-size:var(--pia-f-body); line-height:1.5;
  max-width:var(--pia-canvas); margin:0 auto; padding:0 var(--pia-safe); box-sizing:border-box; }
.pia *,.pia *::before,.pia *::after{ box-sizing:border-box; }
.pia button{ font-family:inherit; }

/* ===== Typography ===== */
.pia-display{ font-size:var(--pia-f-display); font-weight:700; line-height:1.25; margin:0; }
.pia-h1{ font-size:var(--pia-f-h1); font-weight:700; line-height:1.3; margin:0; }
.pia-h2{ font-size:var(--pia-f-h2); font-weight:700; line-height:1.35; margin:0; }
.pia-h3{ font-size:var(--pia-f-h3); font-weight:600; line-height:1.4; margin:0; }
.pia-q{ font-size:var(--pia-f-q); font-weight:700; line-height:1.4; margin:0; word-break:keep-all; }
.pia-bodyL{ font-size:var(--pia-f-bodyL); font-weight:500; line-height:1.5; margin:0; }
.pia-body{ font-size:var(--pia-f-body); font-weight:400; line-height:1.5; margin:0; }
.pia-cap{ font-size:var(--pia-f-cap); font-weight:400; line-height:1.5; margin:0; color:var(--pia-text-3); }
.pia-muted{ color:var(--pia-text-2); }

/* ===== Section / Card ===== */
.pia-sec{ background:var(--pia-bg); border:1px solid var(--pia-border-strong-2); border-radius:var(--pia-r-sec);
  padding:var(--pia-s5) var(--pia-s4); margin-bottom:var(--pia-s3); }
.pia-card{ background:var(--pia-bg); border:1px solid var(--pia-border-strong-2); border-radius:var(--pia-r-card); padding:var(--pia-s3); }

/* ===== Button ===== */
.pia-btn{ display:flex; align-items:center; justify-content:center; gap:var(--pia-s1); position:relative; width:100%;
  min-height:var(--pia-touch); padding:var(--pia-s2) var(--pia-s6); border-radius:var(--pia-r-btn);
  font-size:var(--pia-f-btn); font-weight:600; line-height:1.4; cursor:pointer; border:1px solid transparent;
  transition:background-color .15s,border-color .15s; text-align:center; }
.pia-btn--cta{ min-height:var(--pia-touch-cta); }
.pia-btn--primary{ background:var(--pia-primary); color:#fff; border-color:var(--pia-primary); }
.pia-btn--primary:hover{ background:var(--pia-primary-dark); border-color:var(--pia-primary-dark); }
.pia-btn--secondary{ background:var(--pia-bg); color:var(--pia-primary); border-color:var(--pia-primary-border); }
.pia-btn--secondary:hover{ background:var(--pia-primary-light); }
.pia-btn--ghost{ background:transparent; color:var(--pia-text-2); border-color:transparent; }
.pia-btn--ghost:hover{ background:var(--pia-surface); }
.pia-btn[disabled],.pia-btn[aria-disabled="true"]{ background:var(--pia-surface); color:var(--pia-text-dis);
  border-color:var(--pia-border-2); cursor:not-allowed; }
.pia-btn .pia-btn__ar{ position:absolute; right:var(--pia-s3); font-weight:400; }
.pia-btn:focus-visible,.pia-choice:focus-visible,.pia-in:focus-visible,.pia-sel:focus-visible,
.pia-cat:focus-visible,.pia-hdr-btn:focus-visible,.pia-back:focus-visible,.pia-rrow:focus-visible{
  outline:3px solid var(--pia-primary); outline-offset:3px; }

/* ===== Back navigation ===== */
.pia-back{ display:inline-flex; align-items:center; gap:var(--pia-s1); background:none; border:0; cursor:pointer;
  color:var(--pia-primary); font-size:var(--pia-f-bodyL); font-weight:600; padding:var(--pia-s1) var(--pia-s1) var(--pia-s1) 0;
  min-height:56px; margin-bottom:var(--pia-s2); }
.pia-back:hover{ text-decoration:underline; }

/* ===== Badge ===== */
.pia-badge{ display:inline-flex; align-items:center; gap:6px; font-size:var(--pia-f-badge); font-weight:600;
  padding:6px var(--pia-s2); border-radius:var(--pia-r-pill); background:var(--pia-primary-light); color:var(--pia-primary-dark); }
.pia-badge--done{ background:var(--pia-success-bg); color:var(--pia-success); }
.pia-badge--neutral{ background:var(--pia-surface); color:var(--pia-text-2); }

/* ===== Progress ===== */
.pia-prog{ margin-bottom:var(--pia-s4); }
.pia-prog__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--pia-s2); margin-bottom:var(--pia-s1); }
.pia-prog__label{ font-size:var(--pia-f-bodyL); font-weight:600; color:var(--pia-text-2); }
.pia-prog__label b{ color:var(--pia-primary); font-weight:700; }
.pia-prog__pct{ font-size:var(--pia-f-cap); font-weight:600; color:var(--pia-primary); }
.pia-prog__bar{ height:10px; background:var(--pia-border-2); border-radius:var(--pia-r-pill); overflow:hidden; }
.pia-prog__fill{ height:100%; background:var(--pia-primary); border-radius:var(--pia-r-pill); transition:width .25s; }

/* ===== Choice (Radio card) — 색상만으로 상태 표현하지 않음 ===== */
.pia-choices{ display:flex; flex-direction:column; gap:var(--pia-s2); }
.pia-choice{ display:flex; align-items:center; gap:var(--pia-s2); width:100%; min-height:var(--pia-touch-choice);
  padding:var(--pia-s2) var(--pia-s3); background:var(--pia-bg); border:1px solid var(--pia-border-strong);
  border-radius:var(--pia-r-card); cursor:pointer; text-align:left; font-size:var(--pia-f-bodyL);
  font-weight:500; color:var(--pia-text); line-height:1.5; transition:border-color .15s,background-color .15s; }
.pia-choice:hover{ border-color:var(--pia-primary-border); background:var(--pia-primary-light); }
.pia-choice__radio{ flex-shrink:0; width:28px; height:28px; border-radius:50%; border:2px solid var(--pia-border);
  display:flex; align-items:center; justify-content:center; }
.pia-choice__radio::after{ content:""; width:14px; height:14px; border-radius:50%; background:transparent; }
.pia-choice__txt{ flex:1; min-width:0; word-break:keep-all; }
.pia-choice__ck{ flex-shrink:0; opacity:0; color:var(--pia-primary); font-size:1.4em; font-weight:700; }
.pia-choice[aria-checked="true"]{ border-color:var(--pia-primary); border-width:2px; background:var(--pia-primary-light);
  padding:calc(var(--pia-s2) - 1px) calc(var(--pia-s3) - 1px); }
.pia-choice[aria-checked="true"] .pia-choice__radio{ border-color:var(--pia-primary); border-width:2px; }
.pia-choice[aria-checked="true"] .pia-choice__radio::after{ background:var(--pia-primary); }
.pia-choice[aria-checked="true"] .pia-choice__txt{ font-weight:700; color:var(--pia-primary-dark); }
.pia-choice[aria-checked="true"] .pia-choice__ck{ opacity:1; }

/* ===== Input / Select ===== */
.pia-field{ margin-bottom:var(--pia-s3); }
.pia-label{ display:block; font-size:var(--pia-f-bodyL); font-weight:600; color:var(--pia-text); margin-bottom:6px; }
.pia-label .req{ color:var(--pia-danger); margin-left:4px; }
.pia-hint{ display:block; font-size:var(--pia-f-cap); color:var(--pia-text-3); margin-bottom:var(--pia-s1); line-height:1.5; }
.pia-in,.pia-sel{ width:100%; min-height:var(--pia-touch); padding:var(--pia-s2); border:1px solid var(--pia-border-strong);
  border-radius:var(--pia-r-input); font-size:var(--pia-f-input); font-family:inherit; color:var(--pia-text);
  background:var(--pia-bg); line-height:1.5; }
.pia-in::placeholder{ color:var(--pia-text-3); }   /* 대비 2.5:1 → 4.5:1 */
.pia-in:focus,.pia-sel:focus{ border-color:var(--pia-primary); border-width:2px; padding:calc(var(--pia-s2) - 1px); outline:none; }
.pia-in[aria-invalid="true"],.pia-sel[aria-invalid="true"]{ border-color:var(--pia-danger); border-width:2px; }
.pia-err{ display:none; align-items:center; gap:6px; margin-top:6px; font-size:var(--pia-f-cap); color:var(--pia-danger); }
.pia-err.on{ display:flex; }
.pia-note{ display:flex; align-items:center; gap:var(--pia-s1); background:var(--pia-primary-light);
  border:1px solid var(--pia-primary-border); border-radius:var(--pia-r-card); padding:var(--pia-s2);
  font-size:var(--pia-f-cap); color:var(--pia-text-2); line-height:1.5; }
.pia-note svg{ width:24px; height:24px; color:var(--pia-primary); flex-shrink:0; }

/* ===== Footer action bar ===== */
.pia-fab{ display:flex; gap:var(--pia-s2); margin-top:var(--pia-s4); }
.pia-fab .pia-btn{ flex:1; }
.pia-autosave{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:var(--pia-s2);
  font-size:var(--pia-f-cap); color:var(--pia-text-3); }

/* ===== Result summary row ===== */
.pia-rrow{ display:flex; align-items:center; gap:var(--pia-s2); width:100%; min-height:var(--pia-touch);
  padding:var(--pia-s3); background:var(--pia-bg); border:1px solid var(--pia-border-strong-2);
  border-radius:var(--pia-r-card); margin-bottom:var(--pia-s2); text-align:left; cursor:pointer; }
.pia-rrow[data-static="1"]{ cursor:default; }
.pia-rrow:not([data-static="1"]):hover{ border-color:var(--pia-primary-border); }
.pia-rrow__ic{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pia-rrow__tx{ flex:1; min-width:0; }
.pia-rrow__t{ font-size:var(--pia-f-bodyL); font-weight:700; margin-bottom:2px; }
.pia-rrow__d{ font-size:var(--pia-f-body); color:var(--pia-text-2); word-break:keep-all; }
.pia-rrow__more{ display:flex; align-items:center; gap:4px; font-size:var(--pia-f-cap); color:var(--pia-text-3); flex-shrink:0; }

/* ===== AppHeader (모든 화면 공통 · 높이/위치 불변) ===== */
.pia-hdr{ position:sticky; top:0; z-index:50; background:var(--pia-bg); border-bottom:1px solid var(--pia-border-2); }
.pia-hdr__in{ max-width:var(--pia-canvas); margin:0 auto; padding:var(--pia-s2) var(--pia-safe);
  display:flex; align-items:center; gap:var(--pia-s2); min-height:96px; }
.pia-hdr__brand{ display:flex; align-items:baseline; gap:var(--pia-s2); flex:1; min-width:0; }
.pia-hdr__logo{ font-size:var(--pia-f-h3); font-weight:700; color:var(--pia-primary); letter-spacing:-.5px; white-space:nowrap; }
.pia-hdr__sub{ font-size:var(--pia-f-cap); color:var(--pia-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pia-hdr__acts{ display:flex; gap:var(--pia-s1); flex-shrink:0; }
/* 키오스크에서 상단 버튼 3개(글자 크게·음성 안내·도움)가 높이 40px 이라
   손가락 터치 목표 권장치(NIA 배리어프리 키오스크 UI 가이드·머티리얼 48dp)에
   미달했다. 글자 크기는 그대로 두고 눌리는 높이만 48px 로 올린다. */
/* 파일 뒤쪽 프리셋 규칙들이 이 값을 덮으므로 !important 가 필요하다 */
html.kiosk-on body.pia-v2[class] .pia-hdr-btn{ min-height:48px !important; height:auto !important; }
.pia-hdr-btn{ display:inline-flex; align-items:center; gap:6px; min-height:56px; padding:0 var(--pia-s2);
  border:1px solid var(--pia-border-strong); border-radius:var(--pia-r-btn); background:var(--pia-bg);
  font-size:var(--pia-f-cap); font-weight:500; color:var(--pia-text-2); cursor:pointer; white-space:nowrap; font-family:inherit; }
.pia-hdr-btn:hover{ background:var(--pia-surface); }
.pia-hdr-btn[aria-pressed="true"]{ background:var(--pia-primary-light); border-color:var(--pia-primary-border); color:var(--pia-primary-dark); }
.pia-hdr-btn svg{ width:22px; height:22px; flex-shrink:0; }
.pia-hdr-btn b{ color:var(--pia-primary); font-weight:700; }
@media (max-width:1079px){
  html:not(.kiosk-on) .pia-hdr__in{ min-height:64px; }
  html:not(.kiosk-on) .pia-hdr__sub{ display:none; }
  html:not(.kiosk-on) .pia-hdr-btn{ min-height:44px; padding:0 var(--pia-s1); }
  html:not(.kiosk-on) .pia-hdr-btn span{ display:none; }
}
/* 기존 헤더 숨김 (v2 헤더로 대체) */
body.pia-v2 > header:not(.pia-hdr),
body.pia-v2 #topNav{ display:none !important; }
/* 2026-09-04 Phase5: 768px 부근에서 kiosk-on 모드일 때 헤더 버튼(언어/글자크기/음성안내/도움)이
   라벨을 유지한 채 줄바꿈 없이 배치되며 AI PIA 로고를 가려 'A'만 남고 잘리는 문제를 고친다.
   폭이 부족하면 액션 버튼 그룹을 다음 줄로 감싸(wrap) 로고와 겹치지 않게 한다. */
@media (max-width:768px){
  .pia-hdr__in{ flex-wrap:wrap; }
  .pia-hdr__brand{ min-width:auto; flex-shrink:0; }
  .pia-hdr__logo{ flex-shrink:0; }
  .pia-hdr__acts{ flex-wrap:wrap; }
}

/* ===== HOME ===== */
.pia-hero{ display:flex; align-items:center; gap:var(--pia-s3); }
.pia-hero__tx{ flex:1; min-width:0; }
.pia-hero__bot{ width:300px; flex-shrink:0; }
.pia-hero__time{ display:inline-flex; align-items:center; gap:var(--pia-s1); font-size:var(--pia-f-bodyL);
  font-weight:600; color:var(--pia-text-2); margin:0; }
.pia-hero__time svg{ width:28px; height:28px; color:var(--pia-primary); }
.pia-steps{ display:flex; align-items:flex-start; justify-content:center; gap:var(--pia-s1); }
.pia-step{ display:flex; flex-direction:column; align-items:center; gap:var(--pia-s2); flex:1; min-width:0; }
.pia-step__n{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--pia-f-bodyL); flex-shrink:0; }
.pia-step__ic{ width:120px; height:120px; border-radius:50%; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:box-shadow .15s; }
.pia-step__ic:hover{ box-shadow:0 4px 16px rgba(36,107,235,.22); }
.pia-step__ic svg{ width:52px; height:52px; }
.pia-step__t{ font-size:var(--pia-f-bodyL); font-weight:700; text-align:center; word-break:keep-all; }
.pia-step__d{ font-size:var(--pia-f-cap); color:var(--pia-text-2); background:var(--pia-surface);
  border-radius:var(--pia-r-pill); padding:6px var(--pia-s2); }
.pia-step__ar{ color:var(--pia-border); font-size:32px; margin-top:76px; flex-shrink:0; }
.pia-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--pia-s2); }
.pia-cat{ display:flex; align-items:center; gap:var(--pia-s2); min-height:var(--pia-touch);
  padding:var(--pia-s3); background:var(--pia-bg); border:1px solid var(--pia-border-strong-2);
  border-radius:var(--pia-r-card); cursor:pointer; text-align:left; width:100%;
  transition:border-color .15s,background-color .15s; }
.pia-cat:hover{ border-color:var(--pia-primary-border); background:var(--pia-primary-light); }
.pia-cat__ic{ flex-shrink:0; display:flex; }
.pia-cat__ic svg{ width:52px; height:52px; }
.pia-cat__tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pia-cat__t{ font-size:var(--pia-f-bodyL); font-weight:700; display:flex; align-items:center; gap:var(--pia-s1); flex-wrap:wrap; }
.pia-cat__d{ font-size:var(--pia-f-cap); color:var(--pia-text-2); word-break:keep-all; }
.pia-cat__ar{ color:var(--pia-text-3); font-size:30px; flex-shrink:0; }
.pia-foot{ display:flex; align-items:center; justify-content:center; gap:var(--pia-s2); padding:var(--pia-s3) 0 var(--pia-s5); }
.pia-foot button{ background:none; border:0; color:var(--pia-text-2); font-size:var(--pia-f-cap);
  cursor:pointer; padding:var(--pia-s1); min-height:56px; font-family:inherit; }
.pia-foot button:hover{ color:var(--pia-primary); text-decoration:underline; }
.pia-foot span{ color:var(--pia-border); }
@media (max-width:1079px){
  html:not(.kiosk-on) .pia-hero{ flex-direction:column-reverse; text-align:center; }
  html:not(.kiosk-on) .pia-hero__bot{ width:180px; }
  html:not(.kiosk-on) .pia-hero__time{ justify-content:center; }
  html:not(.kiosk-on) .pia-step__ic{ width:72px; height:72px; }
  html:not(.kiosk-on) .pia-step__ic svg{ width:32px; height:32px; }
  html:not(.kiosk-on) .pia-step__n{ width:34px; height:34px; }
  html:not(.kiosk-on) .pia-step__ar{ margin-top:48px; font-size:22px; }
  html:not(.kiosk-on) .pia-cats{ grid-template-columns:1fr; }
  html:not(.kiosk-on) .pia-cat__ic svg{ width:38px; height:38px; }
}


/* ===== 검사 목록 모달 (선택 검사 하위 메뉴) — KRDS ===== */
.pia-modal{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:var(--pia-s4); background:rgba(15,23,42,.55); animation:piaModalIn .16s ease-out; }
@keyframes piaModalIn{ from{opacity:0} to{opacity:1} }
.pia-modal__box{ background:var(--pia-bg); border-radius:var(--pia-r-card); width:100%; max-width:860px;
  max-height:calc(100vh - var(--pia-s6)); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 64px rgba(15,23,42,.28); }
.pia-modal__hd{ padding:var(--pia-s5) var(--pia-s5) var(--pia-s3); border-bottom:1px solid var(--pia-border-2); }
.pia-modal__t{ font-size:var(--pia-f-h2); font-weight:700; margin:0 0 var(--pia-s1); display:flex; align-items:center; gap:var(--pia-s2); }
.pia-modal__t svg{ width:1.1em; height:1.1em; flex-shrink:0; }
.pia-modal__lead{ font-size:var(--pia-f-body); color:var(--pia-text-2); margin:0; word-break:keep-all; }
.pia-modal__bd{ padding:var(--pia-s4) var(--pia-s5); overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.pia-modal__ft{ padding:var(--pia-s3) var(--pia-s5) var(--pia-s5); border-top:1px solid var(--pia-border-2); }

.pia-tlist{ display:flex; flex-direction:column; gap:var(--pia-s2); }
.pia-titem{ display:flex; align-items:center; gap:var(--pia-s3); width:100%; text-align:left;
  min-height:var(--pia-touch); padding:var(--pia-s3); background:var(--pia-bg);
  border:1px solid var(--pia-border-strong-2); border-radius:var(--pia-r-card); cursor:pointer;
  font-family:inherit; color:inherit; transition:border-color .15s, background-color .15s; }
.pia-titem:hover{ border-color:var(--pia-primary-border); background:var(--pia-primary-light); }
.pia-titem:focus-visible{ outline:3px solid var(--pia-primary); outline-offset:2px; }
.pia-titem.done{ background:var(--pia-surface); }
.pia-titem__ic{ width:2.6em; height:2.6em; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:var(--pia-f-body);
  background:var(--pia-primary-light); color:var(--pia-primary); }
.pia-titem.done .pia-titem__ic{ background:#E6F4EA; color:#128700; }
.pia-titem__tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pia-titem__t{ font-size:var(--pia-f-bodyL); font-weight:700; word-break:keep-all; }
.pia-titem__d{ font-size:var(--pia-f-cap); color:var(--pia-text-2); word-break:keep-all; }
.pia-titem__m{ font-size:var(--pia-f-cap); color:var(--pia-text-3); }
.pia-titem__st{ flex-shrink:0; font-size:var(--pia-f-cap); font-weight:700;
  padding:6px var(--pia-s2); border-radius:var(--pia-r-pill); }
.pia-titem__st.n{ background:var(--pia-primary); color:#fff; }
.pia-titem__st.d{ background:#E6F4EA; color:#0F6B00; }

/* 가로 소형·대형에서는 2열로 늘려 세로 스크롤을 줄인다 */
html.pia-sc-compact .pia-tlist, html.pia-sc-wide .pia-tlist{ display:grid; grid-template-columns:repeat(2,1fr); }
html.pia-sc-compact .pia-modal__box{ max-width:min(96vw,1100px); }
html.pia-sc-compact .pia-modal__hd{ padding:var(--pia-s3) var(--pia-s4) var(--pia-s2); }
html.pia-sc-compact .pia-modal__bd{ padding:var(--pia-s3) var(--pia-s4); }
html.pia-sc-compact .pia-modal__ft{ padding:var(--pia-s2) var(--pia-s4) var(--pia-s3); }
html.pia-sc-wide .pia-modal__box{ max-width:min(94vw,1200px); }
@media (max-width:1079px){
  html:not(.kiosk-on) .pia-tlist{ grid-template-columns:1fr; } }

/* ===== SETUP (기본정보 입력) ===== */
.pia-setup__hd{ margin-bottom:var(--pia-s5); }
.pia-setup__steps{ display:flex; align-items:center; justify-content:center; margin-bottom:var(--pia-s5); }
.pia-ss{ display:flex; flex-direction:column; align-items:center; gap:var(--pia-s1); flex-shrink:0; }
.pia-ss__n{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--pia-f-bodyL); }
.pia-ss__l{ font-size:var(--pia-f-cap); font-weight:600; }
.pia-ss__line{ flex:1; height:2px; background:var(--pia-border-2); margin:0 var(--pia-s2) var(--pia-s5); min-width:40px; }
.pia-codebox{ background:var(--pia-primary-light); border:1px solid var(--pia-primary-border);
  border-radius:var(--pia-r-card); padding:var(--pia-s3); margin-bottom:var(--pia-s3); }
.pia-inrow{ display:flex; gap:var(--pia-s1); }
.pia-inrow .pia-in{ flex:1; min-width:0; }
.pia-inrow .pia-btn{ width:auto; flex-shrink:0; padding:0 var(--pia-s3); }
/* flex 기본 stretch 때문에 아이콘+입력창 래퍼가 옆 버튼 높이만큼 늘어나
   아이콘이 input 기준보다 아래로 처져 보이던 문제 수정 (2026-09-03) */
.pia-inrow .pia-inwrap{ align-self:center; }
.pia-ok{ display:none; align-items:center; gap:6px; margin-top:var(--pia-s1);
  font-size:var(--pia-f-cap); color:var(--pia-success); font-weight:600; }
.pia-ok.on{ display:flex; }
.pia-help{ display:flex; align-items:center; gap:var(--pia-s3); background:var(--pia-primary-light);
  border:1px solid var(--pia-primary-border); border-radius:var(--pia-r-sec);
  padding:var(--pia-s3); margin-top:var(--pia-s3); }
.pia-help__bot{ width:120px; flex-shrink:0; }
.pia-help__tx{ flex:1; min-width:0; }
@media (max-width:1079px){
  html:not(.kiosk-on) .pia-help__bot{ width:72px; }
  html:not(.kiosk-on) .pia-ss__n{ width:36px; height:36px; } }

/* ===== 체크박스 (KRDS) ===== */
.pia-check{ display:flex; align-items:flex-start; gap:var(--pia-s2); cursor:pointer; min-height:var(--pia-touch);
  padding:var(--pia-s2) 0; }
.pia-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.pia-check__box{ flex-shrink:0; width:36px; height:36px; border:2px solid var(--pia-border); border-radius:8px;
  background:var(--pia-bg); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.pia-check__box::after{ content:"✓"; color:transparent; font-size:24px; font-weight:700; line-height:1; }
.pia-check input:checked + .pia-check__box{ background:var(--pia-primary); border-color:var(--pia-primary); }
.pia-check input:checked + .pia-check__box::after{ color:#fff; }
.pia-check input:focus-visible + .pia-check__box{ outline:3px solid var(--pia-primary); outline-offset:3px; }
.pia-check__tx{ flex:1; min-width:0; font-size:var(--pia-f-bodyL); line-height:1.5; word-break:keep-all; }
.pia-check--all{ border-bottom:1px solid var(--pia-border-2); margin-bottom:var(--pia-s2); padding-bottom:var(--pia-s3); }
.pia-check--all .pia-check__tx{ font-size:var(--pia-f-h3); }
.pia-consent__row{ border-bottom:1px solid var(--pia-border-2); padding-bottom:var(--pia-s1); }
.pia-consent__row:last-child{ border-bottom:0; }
.pia-consent__more{ margin:0 0 var(--pia-s2) 52px; }
.pia-consent__more summary{ font-size:var(--pia-f-cap); color:var(--pia-primary); cursor:pointer;
  min-height:44px; display:flex; align-items:center; }
.pia-consent__more > div{ font-size:var(--pia-f-cap); color:var(--pia-text-2); line-height:1.6;
  background:var(--pia-surface); border-radius:8px; padding:var(--pia-s2); margin-bottom:var(--pia-s1); }
@media(max-width:1079px){ .pia-check__box{ width:26px; height:26px; } .pia-check__box::after{ font-size:17px; }
  .pia-consent__more{ margin-left:42px; } .pia-check{ min-height:52px; } }

/* ===== 완료 화면 ===== */
.pia-done__ic{ width:5em; height:5em; margin:0 auto var(--pia-s4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#EAFBE6; color:#128700; font-size:var(--pia-f-h2); font-weight:700; line-height:1; }
.pia-done__list{ list-style:none; padding:0; margin:0 auto; max-width:480px; text-align:left; }
.pia-done__i{ display:flex; align-items:center; gap:var(--pia-s2); padding:var(--pia-s2) var(--pia-s3);
  background:var(--pia-bg); border:1px solid var(--pia-border-strong-2); border-radius:var(--pia-r-card);
  margin-bottom:var(--pia-s2); font-size:var(--pia-f-bodyL); font-weight:600; }
.pia-done__ck{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:var(--pia-f-bodyL); flex-shrink:0; }
.pia-ul{ margin:0; padding-left:1.3em; }
.pia-ul li{ font-size:var(--pia-f-body); line-height:1.7; color:var(--pia-text-2); margin-bottom:var(--pia-s1); word-break:keep-all; }
.pia-ul li b{ color:var(--pia-text); }

/* ===== 스크린리더 전용 (기존 로직 유지용 숨김) ===== */
.pia-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== AI 대화 (Interview UI) ===== */
.pia-ask{ display:flex; align-items:center; gap:var(--pia-s3);
  background:var(--pia-bg); border:1px solid var(--pia-primary-border); }
.pia-ask__bot{ width:130px; flex-shrink:0; }
.pia-ask__tx{ flex:1; min-width:0; }
.pia-ask__who{ display:inline-block; font-size:var(--pia-f-cap); font-weight:700; color:var(--pia-primary-dark);
  background:var(--pia-bg); border-radius:var(--pia-r-pill); padding:4px var(--pia-s2); margin-bottom:var(--pia-s2); }
.pia-ask .pia-q{ text-align:left; }
.pia-qk{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--pia-s2); }
.pia-qk__b{ display:flex; align-items:center; gap:var(--pia-s2); min-height:var(--pia-touch-choice);
  padding:var(--pia-s2) var(--pia-s3); background:var(--pia-bg); border:1px solid var(--pia-border-strong);
  border-radius:var(--pia-r-card); font-size:var(--pia-f-bodyL); font-weight:500; color:var(--pia-text);
  cursor:pointer; text-align:left; font-family:inherit; line-height:1.5; word-break:keep-all;
  transition:border-color .15s,background-color .15s; }
.pia-qk__b:hover{ border-color:var(--pia-primary-border); background:var(--pia-primary-light); }
.pia-qk__b:focus-visible{ outline:3px solid var(--pia-primary); outline-offset:3px; }
.pia-say{ display:flex; gap:var(--pia-s2); align-items:stretch; }
.pia-say__in{ flex:1; min-width:0; }
.pia-say__mic{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:110px; min-height:var(--pia-touch); padding:var(--pia-s1) var(--pia-s2);
  background:var(--pia-bg); border:1px solid var(--pia-border-strong); border-radius:var(--pia-r-input);
  color:var(--pia-primary); font-size:var(--pia-f-cap); font-weight:600; cursor:pointer; font-family:inherit; }
.pia-say__mic svg{ width:30px; height:30px; }
.pia-say__mic:hover{ background:var(--pia-primary-light); border-color:var(--pia-primary-border); }
.pia-say__mic[aria-pressed="true"]{ background:var(--pia-primary); border-color:var(--pia-primary); color:#fff; }
.pia-say__mic:focus-visible{ outline:3px solid var(--pia-primary); outline-offset:3px; }
@media(max-width:1079px){
  .pia-ask{ flex-direction:column; text-align:center; }
  .pia-ask__bot{ width:88px; }
  .pia-ask .pia-q{ text-align:center; }
  .pia-qk{ grid-template-columns:1fr; }
  .pia-say__mic{ min-width:80px; }
  .pia-say__mic svg{ width:22px; height:22px; }
}


/* ===== 구(舊) 레이아웃 잔재 완전 숨김 ===== */
body.pia-v2 header:not(.pia-hdr){ display:none !important; }
/* 홈 컨테이너가 grid라 새 레이아웃이 1칸에 갇히는 문제 */
body.pia-v2 #home-content{ display:block !important; }
/* 결과지 인쇄 툴바는 결과 화면에서만 */
body.pia-v2 .toolbar.no-print{ display:none !important; }
body.pia-v2.pia-on-result .toolbar.no-print{ display:flex !important; }
body.pia-v2 section[data-view="home"] > div.bg-violet-50{ display:none !important; }
body.pia-v2 > div.max-w-6xl{ max-width:none !important; padding:0 !important; }
/* 홈 화면은 .pia 캔버스로 이전되지 않아 위 규칙에 폭 제한을 함께 잃는다.
   KRDS 권장 본문 폭(1000~1120px)으로 자체 폭 제한 + 가운데 정렬을 되돌린다. */
body.pia-v2 section[data-view="home"]{
  margin:0 auto !important; max-width:1120px !important;
  padding:0 clamp(16px, 3vw, 40px) !important; width:100%; box-sizing:border-box;
}
/* ===== 홈 넓은 화면 확대 (2026-09-04) — 927/1366/1920px 전용 =====
   --krds-u 가 vw 1080px에서 1.5px로 고정되어(clamp 상한), 그 이상 화면에서는
   컨테이너 좌우 여백만 늘고 카드/캐릭터 실제 크기는 더 커지지 않았다.
   홈 화면(section[data-view="home"])에 한해 폭 구간별로 직접 확대한다.
   기존 720/1079px 이하 규칙은 건드리지 않는다. */
@media(min-width:820px) and (max-width:1279px){
  body.pia-v2 section[data-view="home"] .pia-hero__bot img{
    height:445px !important; width:auto !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat{
    padding:calc(var(--pia-s3) * 1.1) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__t{
    font-size:calc(var(--pia-f-bodyL) * 1.05) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__d{
    font-size:calc(var(--pia-f-cap) * 1.05) !important;
  }
}
@media(min-width:1280px) and (max-width:1599px){
  body.pia-v2 section[data-view="home"]{ max-width:1280px !important; }
  body.pia-v2 section[data-view="home"] .pia-hero__bot img{
    height:540px !important; width:auto !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat{
    padding:calc(var(--pia-s3) * 1.25) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__t{
    font-size:calc(var(--pia-f-bodyL) * 1.1) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__d{
    font-size:calc(var(--pia-f-cap) * 1.1) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__ic svg{
    width:60px !important; height:60px !important;
  }
}
@media(min-width:1600px){
  body.pia-v2 section[data-view="home"]{ max-width:1480px !important; }
  body.pia-v2 section[data-view="home"] .pia-hero__bot img{
    height:610px !important; width:auto !important;
  }
  body.pia-v2 section[data-view="home"] .pia-hero__tx{
    max-width:680px !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat{
    padding:calc(var(--pia-s3) * 1.4) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__t{
    font-size:calc(var(--pia-f-bodyL) * 1.2) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__d{
    font-size:calc(var(--pia-f-cap) * 1.2) !important;
  }
  body.pia-v2 section[data-view="home"] .pia-cat__ic svg{
    width:68px !important; height:68px !important;
  }
}
/* 제목 줄바꿈 보호 */
.pia-display,.pia-h1,.pia-h2,.pia-h3,.pia-q{ word-break:keep-all !important; overflow-wrap:break-word; }
@media(max-width:520px){
  :root{ --pia-f-display:34px; --pia-f-h1:30px; --pia-f-h2:24px; --pia-f-q:24px;
         --pia-f-bodyL:18px; --pia-f-body:17px; --pia-f-btn:19px; }
  .pia-hero{ flex-direction:column; text-align:center; }
  .pia-hero__bot{ width:150px; margin:0 auto; }
}

/* ===== 통합 결과 (시안 6) ===== */
.pia-rhero{ display:flex; align-items:center; gap:var(--pia-s3); margin-bottom:var(--pia-s4); }
.pia-rhero__tx{ flex:1; min-width:0; }
.pia-rhero__bot{ width:200px; flex-shrink:0; }
.pia-ai{ display:flex; align-items:center; gap:var(--pia-s3);
  background:var(--pia-primary-light); border-color:var(--pia-primary-border); }
.pia-ai__ic{ flex-shrink:0; width:104px; height:104px; border-radius:50%; background:var(--pia-bg);
  display:grid; place-items:center; color:var(--pia-primary); }
.pia-ai__ic svg{ width:52px; height:52px; }
.pia-ai__tx{ flex:1; min-width:0; }
.pia-ai__lab{ display:block; font-size:var(--pia-f-bodyL); font-weight:700; color:var(--pia-primary-dark); margin-bottom:var(--pia-s2); }
.pia-ai__d{ font-size:var(--pia-f-h3,28px); font-weight:700; color:var(--pia-text); line-height:1.55; word-break:keep-all; }
.pia-sums{ display:flex; flex-direction:column; gap:var(--pia-s2); margin-bottom:var(--pia-s4); }
.pia-sum{ display:flex; align-items:center; gap:var(--pia-s3); width:100%; min-height:var(--pia-touch);
  padding:var(--pia-s3); background:var(--pia-bg); border:1px solid var(--pia-border-strong);
  border-radius:var(--pia-r-card); cursor:pointer; text-align:left; font-family:inherit;
  transition:border-color .15s, box-shadow .15s; }
.pia-sum:hover{ border-color:var(--pia-primary-border); box-shadow:0 2px 10px rgba(36,107,235,.10); }
.pia-sum:focus-visible{ outline:3px solid var(--pia-primary); outline-offset:3px; }
.pia-sum__ic{ flex-shrink:0; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; }
.pia-sum__ic svg{ width:34px; height:34px; }
.pia-sum--green  .pia-sum__ic{ background:#E6F4EA; color:#1E8E4E; }
.pia-sum--purple .pia-sum__ic{ background:#EEEAFB; color:#6B47C9; }
.pia-sum--orange .pia-sum__ic{ background:#FDEDE3; color:#D9711F; }
.pia-sum__tx{ flex:1; min-width:0; }
.pia-sum__t{ display:block; font-size:var(--pia-f-bodyL); font-weight:700; margin-bottom:4px; }
.pia-sum--green  .pia-sum__t{ color:#187A42; }   /* 흰 바탕 5.38:1 (이전 #1E8E4E 4.17 — WCAG 1.4.3 미달, 2026-09-28 axe) */
.pia-sum--purple .pia-sum__t{ color:#6B47C9; }
.pia-sum--orange .pia-sum__t{ color:#A8540F; }   /* 흰 바탕 5.33:1 (이전 #D9711F 3.32) */
.pia-sum__w{ display:block; font-size:var(--pia-f-body); color:var(--pia-text-2); line-height:1.5; word-break:keep-all; }
.pia-sum__more{ flex-shrink:0; font-size:var(--pia-f-cap); font-weight:600; color:var(--pia-text-2); white-space:nowrap; }
.pia-sum__ar{ flex-shrink:0; font-size:28px; color:var(--pia-text-3,#8A9199); line-height:1; }
.pia-top3{ list-style:none; margin:0; padding:0; }
.pia-top3__i{ display:flex; align-items:center; gap:var(--pia-s3); min-height:var(--pia-touch);
  padding:var(--pia-s2) 0; border-bottom:1px solid var(--pia-border-light,#E4E7EA); }
.pia-top3__i:last-child{ border-bottom:0; }
.pia-top3__r{ flex-shrink:0; width:52px; height:52px; border-radius:50%; background:var(--pia-primary); color:#fff;
  display:grid; place-items:center; font-size:var(--pia-f-body); font-weight:700; }
.pia-top3__t{ flex:1; font-size:var(--pia-f-bodyL); font-weight:700; color:var(--pia-text); word-break:keep-all; }
.pia-top3__v{ font-size:var(--pia-f-body); color:var(--pia-text-2); white-space:nowrap; }
.pia-top3__ar{ flex-shrink:0; font-size:28px; color:var(--pia-text-3,#8A9199); line-height:1; }
.pia-btn__ic{ display:inline-flex; width:1.1em; height:1.1em; margin-right:8px; vertical-align:-.15em; }
.pia-btn__ic svg{ width:100%; height:100%; }
.pia-rfoot{ text-align:center; }
.pia-rfoot button{ display:inline-flex; align-items:center; gap:8px; min-height:56px; padding:0 var(--pia-s3);
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:var(--pia-f-body); font-weight:600; color:var(--pia-text-2); }
.pia-rfoot button svg{ width:1.2em; height:1.2em; }
.pia-rfoot button:hover{ color:var(--pia-primary); }
.pia-tools{ background:var(--pia-surface); border:1px solid var(--pia-border-strong); border-radius:var(--pia-r-card); }
.pia-tools > summary{ cursor:pointer; padding:var(--pia-s2) var(--pia-s3); font-size:var(--pia-f-body);
  font-weight:600; color:var(--pia-text-2); list-style:none; min-height:56px; display:flex; align-items:center; }
.pia-tools > summary::-webkit-details-marker{ display:none; }
.pia-tools > summary::before{ content:'\25B8'; margin-right:8px; color:var(--pia-primary); }
.pia-tools[open] > summary::before{ content:'\25BE'; }
/* 결과지 상세 섹션 아코디언 (2026-08-23 QA: 세로 길이 축소 — 기존 카드 톤 유지, 접기만 추가) */
.pia-acc > summary{ cursor:pointer; list-style:none; }
.pia-acc > summary::-webkit-details-marker{ display:none; }
.pia-acc > summary:hover{ background:#f8fafc; }
.pia-acc-caret{ display:inline-block; transition:transform .15s ease; }
.pia-acc[open] > summary .pia-acc-caret{ transform:rotate(90deg); }
.pia-acc[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pia-acc-body{ background:transparent; }
@media print{
  .pia-acc,.pia-acc>.pia-acc-body{ display:block!important; }
  .pia-acc:not([open])>*:not(summary){ display:block!important; }
  .pia-acc>summary{ cursor:default; }
  .pia-acc-caret{ display:none!important; }
}
@media(max-width:1079px){
  .pia-rhero{ flex-direction:column-reverse; text-align:center; }
  .pia-rhero__bot{ width:130px; }
  .pia-ai{ flex-direction:column; text-align:center; }
  .pia-ai__ic{ width:76px; height:76px; }
  .pia-ai__ic svg{ width:38px; height:38px; }
  .pia-sum__ic{ width:56px; height:56px; }
  .pia-sum__ic svg{ width:26px; height:26px; }
  .pia-sum__more{ display:none; }
}

.pia-bot{ display:block; width:100%; height:auto; }
.pia-hero__bot,.pia-rhero__bot,.pia-ask__bot{ line-height:0; }

.pia-prog__cur{ font-size:1.5em; font-weight:700; color:var(--pia-primary); line-height:1; }
.pia-prog__tot{ color:var(--pia-text-3,#8A9199); font-weight:500; }
.pia-qk__ic{ flex-shrink:0; width:38px; height:38px; color:var(--pia-primary); }
.pia-qk__ic svg{ width:100%; height:100%; }

/* --- 리커트 표정 아이콘 (RIASEC) --- */
.pia-choice__face{ flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:var(--pia-surface); color:var(--pia-text-3,#8A9199);
  display:grid; place-items:center; margin-right:var(--pia-s2); transition:background-color .15s,color .15s; }
.pia-choice__face svg{ width:32px; height:32px; }
.pia-choice[aria-checked="true"] .pia-choice__face{ background:var(--pia-primary-light); color:var(--pia-primary); }
/* RIASEC 선택행: 흰 배경 + 파란 테두리 (Big5의 연파랑과 구분) */
#choices-riasec .pia-choice[aria-checked="true"]{ background:var(--pia-bg) !important; }
#choices-riasec .pia-choice__ck{ display:none; }
/* 안내 배너 카드형 */
.pia-note--card{ display:flex; align-items:center; gap:var(--pia-s2);
  background:var(--pia-primary-light); border-radius:var(--pia-r-card);
  padding:var(--pia-s2) var(--pia-s3); min-height:72px; color:var(--pia-text-2); }
.pia-note--card svg{ flex-shrink:0; width:34px; height:34px; color:var(--pia-primary);
  background:var(--pia-bg); border-radius:50%; padding:5px; box-sizing:content-box; }
@media(max-width:1079px){ .pia-choice__face{ width:40px; height:40px; } .pia-choice__face svg{ width:24px; height:24px; } }

/* --- 정보입력 필드 아이콘 (시안2) --- */
.pia-inwrap{ position:relative; display:block; flex:1; min-width:0; }
.pia-fic{ position:absolute; left:var(--pia-s2); top:50%; transform:translateY(-50%);
  width:calc(23 * var(--krds-u)); height:calc(23 * var(--krds-u)); color:var(--pia-text-3,#8A9199); pointer-events:none; z-index:1; }
.pia-fic svg{ width:100%; height:100%; }
.pia-in--ic, .pia-inwrap .pia-sel{ padding-left:calc(var(--pia-s2) + 23 * var(--krds-u) + var(--pia-s2)) !important; width:100%; }
.pia-inwrap:focus-within .pia-fic{ color:var(--pia-primary); }
.pia-help{ display:flex; align-items:center; gap:var(--pia-s3); flex-wrap:wrap;
  background:var(--pia-primary-light); border-radius:var(--pia-r-card);
  padding:var(--pia-s3); margin-top:var(--pia-s5); }
.pia-help__bot{ flex-shrink:0; width:130px; line-height:0; }
.pia-help__bot img{ display:block; width:100%; height:auto; }
.pia-help__tx{ flex:1; min-width:180px; }
.pia-help__btn{ flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  min-height:var(--pia-touch); padding:0 var(--pia-s3); background:var(--pia-bg);
  border:1px solid var(--pia-primary-border); border-radius:var(--pia-r-input);
  color:var(--pia-primary); font-family:inherit; font-size:var(--pia-f-body); font-weight:700; cursor:pointer; }
.pia-help__btn .pia-fic{ position:static; transform:none; width:28px; height:28px; color:var(--pia-primary); }
.pia-help__btn:hover{ background:var(--pia-primary-light); }
.pia-help__btn:focus-visible{ outline:3px solid var(--pia-primary); outline-offset:3px; }
@media(max-width:1079px){ .pia-help__bot{ width:88px; } }
/* 아이콘 크기를 --krds-u 유동 단위로 바꿔 이 폭에서 더 이상 점프하지 않는다(2026-09-03) */

/* --- 학생 화면에서 운영자용 플로팅 버튼 숨김 --- */
body.pia-v2 .errcs-fab,
body.pia-v2 #bottomBar{ display:none !important; }
/* #sendToTeacherBtn 은 2026-08-31 자동 전달 전환으로 제거됨 */

/* --- 본문 캔버스 정렬 --- */
body.pia-v2 .pia{ max-width:var(--pia-canvas); margin:0 auto; padding:0 var(--pia-safe) var(--pia-s8); box-sizing:border-box; }
@media(max-width:1079px){ body.pia-v2 .pia{ padding:0 var(--pia-s3) var(--pia-s6); } }

body.pia-v2 section[data-view].hidden{ display:none !important; }

/* --- 각 검사 섹션에 남아있던 구 헤더 숨김 --- */
body.pia-v2 section[data-view] > div.flex.justify-between.items-baseline{ display:none !important; }
/* --- 뒤로가기 줄바꿈/찌그러짐 방지 --- */
.pia-back{ white-space:nowrap; flex-shrink:0; align-self:flex-start; width:auto; }
/* --- 선택지 텍스트 크기 (Tailwind text-sm 상속 차단) --- */
.pia-choice__txt{ font-size:var(--pia-f-bodyL) !important; font-weight:500; line-height:1.5; word-break:keep-all; }
.pia-choice[aria-checked="true"] .pia-choice__txt{ font-weight:700; color:var(--pia-primary-dark); }
.pia-q{ font-size:var(--pia-f-q) !important; }
.pia-h1{ font-size:var(--pia-f-h1) !important; }
.pia-h2{ font-size:var(--pia-f-h2) !important; }
.pia-h3{ font-size:var(--pia-f-bodyL) !important; }
.pia-bodyL{ font-size:var(--pia-f-bodyL) !important; }
.pia-cap,.pia-note{ font-size:var(--pia-f-cap) !important; }
.pia-btn{ font-size:var(--pia-f-btn) !important; }
.pia-label{ font-size:var(--pia-f-bodyL) !important; }
.pia-in,.pia-sel{ font-size:var(--pia-f-body) !important; }
.pia-badge{ font-size:var(--pia-f-cap) !important; }
.pia-prog__label{ font-size:var(--pia-f-body) !important; }

.pia-top3__st{ flex-shrink:0; font-size:var(--pia-f-body); color:#A15C00; letter-spacing:1px; white-space:nowrap; }

/* --- Toast --- */
#pia-toast-box{ position:fixed; left:50%; bottom:var(--pia-s5); transform:translateX(-50%);
  z-index:10001; display:flex; flex-direction:column; gap:var(--pia-s1);
  width:min(560px, calc(100vw - 32px)); pointer-events:none; }
.pia-toast{ background:var(--pia-text); color:#fff; border-radius:var(--pia-r-card);
  padding:var(--pia-s2) var(--pia-s3); font-size:var(--pia-f-body); line-height:1.5;
  box-shadow:0 6px 24px rgba(0,0,0,.22); word-break:keep-all;
  animation:piaToastIn .22s ease-out; }
.pia-toast--out{ opacity:0; transition:opacity .22s ease; }
@keyframes piaToastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .pia-toast{ animation:none; } }

/* --- 아이콘 크기 안전장치 (크기 미지정 SVG가 거대해지는 것 방지) --- */
.pia-autosave svg{ width:1.25em; height:1.25em; flex-shrink:0; }
.pia-back svg{ width:1em; height:1em; flex-shrink:0; }
.pia-hero__time svg{ width:1.15em; height:1.15em; flex-shrink:0; }
.pia-note svg{ width:1.4em; height:1.4em; flex-shrink:0; }
.pia-hdr-btn svg{ width:1.3em; height:1.3em; flex-shrink:0; }
.pia-step__ic svg,.pia-cat__ic svg{ width:100%; height:100%; }
/* 마지막 방어선: .pia 안의 모든 SVG는 부모를 넘지 않는다 */
.pia svg{ max-width:100%; max-height:4em; }
.pia .pia-bot,.pia img{ max-height:none; }

/* 필수 검사 미완료 시: 안내 카드 외의 결과 블록은 모두 숨긴다 (동적 추가분 포함) */
section[data-view="result"].pia-locked > *:not(#result-empty){ display:none !important; }

/* ===== 키오스크: 한 화면에 담기 (스크롤 없이) =====
   측정한 배율(--pia-fit)을 글자·여백·터치 크기에 곱해 화면 높이에 맞춘다.
   터치 영역은 손가락으로 누를 수 있는 최소치를 보장한다. */
html.kiosk-on body.pia-v2[class]{
  --pia-fit:1;
  --pia-f-display:64px;
  --pia-f-h1:58px;
  --pia-f-h2:40px;
  --pia-f-q:44px;
  --pia-f-bodyL:32px;
  --pia-f-body:29px;
  --pia-f-btn:34px;
  --pia-f-cap:24px;
  --pia-s1:8px;
  --pia-s2:16px;
  --pia-s3:24px;
  --pia-s4:32px;
  --pia-s5:40px;
  --pia-s6:48px;
  --pia-s8:64px;
  --pia-touch:max(96px, calc(48px / var(--pia-fit)));
  --pia-touch-cta:max(112px, calc(52px / var(--pia-fit)));
  --pia-touch-choice:max(104px, calc(48px / var(--pia-fit)));
  --pia-safe:72px;
}
html.kiosk-on body.pia-v2.pia-fitted{ overflow:hidden; }
html.kiosk-on body.pia-v2.pia-fitted .pia{ padding-bottom:var(--pia-s3); }
html.kiosk-on body.pia-v2[class] .pia-choice__face{
  width:max(34px, calc(52px * var(--pia-fit))); height:max(34px, calc(52px * var(--pia-fit)));
}
html.kiosk-on body.pia-v2[class] .pia-prog__bar{ height:max(10px, calc(20px * var(--pia-fit))); }

/* ===== 키오스크 검사 화면 압축 =====
   한 화면에 담기 위해 보조 문구를 줄인다. 문항·선택지·진행 표시는 그대로 둔다. */
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]):not([data-view="chat"]) .pia > .pia-bodyL.pia-muted,
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]):not([data-view="chat"]) .pia > .pia-cap,
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-note,
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-autosave{
  display:none !important;
}
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-h1{
  font-size:calc(var(--pia-f-h2)) !important; margin-bottom:0 !important;
}
html.kiosk-on body.pia-v2 section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-sec{
  padding:var(--pia-s3) var(--pia-s3) !important;
}
html.kiosk-on body.pia-v2 .pia-choices{ gap:var(--pia-s1) !important; }
html.kiosk-on body.pia-v2 .pia-back{ margin-bottom:var(--pia-s1) !important; }

/* 키오스크: 한 화면에 확실히 담기 위한 여백 최적화 */
html.kiosk-on body.pia-v2[class] section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia{
  padding-top:var(--pia-s2) !important; padding-bottom:var(--pia-s2) !important;
}
html.kiosk-on body.pia-v2[class] section[data-view]:not([data-view="home"]):not([data-view="result"]) .pia-sec{
  padding:var(--pia-s2) var(--pia-s3) !important;
}
html.kiosk-on body.pia-v2[class] .pia-q{ margin-bottom:var(--pia-s3) !important; }
html.kiosk-on body.pia-v2[class] .pia-fab{ margin-top:var(--pia-s2) !important; }
html.kiosk-on body.pia-v2[class] .pia-prog{ margin-bottom:var(--pia-s2) !important; }

/* 키오스크: body 최소높이(100vh) + 헤더 때문에 항상 스크롤이 생기던 문제 */
html.kiosk-on body.pia-v2[class]{ min-height:0 !important; }
html.kiosk-on body.pia-v2[class] > div{ padding:0 !important; margin:0 !important; }
html.kiosk-on body.pia-v2.pia-fitted{ overflow:hidden !important; height:100vh; }






/* ===== 안전망 =====
   kiosk.css 는 :not(.pia-v2) 로 이 화면을 비껴가도록 정리했다.
   그래도 옛 버전이 캐시에 남아 있을 수 있으니 같은 값을 여기서 한 번 더 못박는다. */
html.kiosk-on body.pia-v2[class] section[data-view]{
  min-height:0 !important; padding:0 !important; margin:0 !important;
}
/* 섹션에 남은 옛 카드 장식(배경·테두리·그림자)을 지운다. 카드는 .pia-sec 이 담당한다. */
body.pia-v2 section[data-view]{
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
/* display 는 숨김(.hidden)을 이기면 안 된다. 보이는 화면에만 건다. */
/* 남는 세로 공간이 아래에만 쏠리지 않도록 화면을 가운데 둔다 */
html.kiosk-on body.pia-v2[class] section[data-view]:not(.hidden){
  display:flex !important; flex-direction:column;
  min-height:var(--pia-avail, auto) !important;
}
/* justify-content:center 는 내용이 넘칠 때 위쪽으로도 밀어내 스크롤로 닿을 수 없게 만든다.
   margin 으로 가운데를 맞추면 넘칠 때 위가 잘리지 않는다. */
html.kiosk-on body.pia-v2[class] section[data-view]:not(.hidden) > .pia{
  margin-block:auto; min-height:0;
}
html.kiosk-on body.pia-v2[class] section[data-view]:not(.hidden) > .pia{ width:100%; }
html.kiosk-on body.pia-v2[class] .pia-choice{
  min-height:var(--pia-touch-choice) !important; font-size:var(--pia-f-btn) !important;
}
html.kiosk-on body.pia-v2[class] .pia-q,
html.kiosk-on body.pia-v2[class] .js-qtext{ font-size:var(--pia-f-q) !important; }
html.kiosk-on body.pia-v2[class] .pia-h2{ font-size:var(--pia-f-h2) !important; }
html.kiosk-on body.pia-v2[class] .pia-h1{ font-size:var(--pia-f-h1) !important; }
html.kiosk-on body.pia-v2[class] .pia-btn{
  min-height:var(--pia-touch) !important; font-size:var(--pia-f-btn) !important;
}
html.kiosk-on body.pia-v2[class] .pia-btn--cta{ min-height:var(--pia-touch-cta) !important; }

/* ================= 화면 프리셋 =================
   JS가 화면 크기를 재서 <html> 에 프리셋 클래스를 붙인다.
     pia-sc-portrait : 세로형 키오스크 (예 1080x1920)
     pia-sc-wide     : 가로 대형      (예 1920x1080)
     pia-sc-compact  : 가로 소형      (예 1024x768, 1366x768)
   프리셋마다 기준 크기를 다르게 주고, 남는 차이는 --pia-fit 이 미세 조정한다. */

/* --- 공통: 가로형은 문항과 선택지를 좌우로 나눈다 --- */
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa{
  display:grid; grid-template-columns:1fr 1.1fr; gap:var(--pia-s4);
  align-items:center; padding:var(--pia-s3) !important;
}
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-q,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-q{
  grid-column:1; grid-row:1; margin:0 !important;
  text-align:left !important; align-self:center; word-break:keep-all;
}
/* 질문에 딸린 안내문은 질문 칼럼에 함께 둔다 (선택지 아래로 밀리지 않게) */
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-q-sub,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-q-sub{
  grid-column:1; grid-row:2; align-self:start; text-align:left !important;
  margin:var(--pia-s2) 0 0 !important;
}
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-choices,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-choices{ grid-column:2; grid-row:1; }
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa ~ .pia-fab,
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-fab,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa ~ .pia-fab,
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec--qa .pia-fab{
  grid-column:2; grid-row:2; margin-top:var(--pia-s2) !important;
}

/* --- 가로 소형(1024x768 등) 홈 화면 압축 ---------------------------------
   측정 결과 1024x768 에서 홈이 596px 넘쳐 "필수 검사 1/2/3" 단계 안내가
   화면 밖으로 밀려 있었다. 원인은 히어로 카드 한 덩어리가 화면 높이의
   45%(약 350px)를 쓰기 때문이다. 세로가 768px 뿐인 화면에서는 과하다.

   문항 화면·점수·로직은 건드리지 않는다. 홈 화면의 여백과 이미지 크기만
   줄여 같은 정보를 더 적은 높이에 담는다. 글자는 읽기 크기를 유지한다. */
@media (max-height: 900px) {
  /* 실측(1024x768): 히어로 338px + 시작/이전결과 144px + 필수검사 296px
     = 778px 로 화면(768) 을 넘겨, 검사 진행 단계 1·2·3 이 잘려 있었다.
     히어로를 220px 대로 줄이면 여기까지가 첫 화면에 들어온다.
     그 아래 선택 검사·푸터는 스크롤로 남긴다(부가 정보라 첫 화면 필수 아님). */
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-sec.pia-hero{
    padding:12px 16px !important;
  }
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-hero{ gap:var(--pia-s2); }
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-hero__bot{ width:150px; }
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-hero .pia-h1{
    font-size:calc(var(--pia-f-h1) * 0.68) !important; line-height:1.1;
  }
  /* 홈의 세로 간격을 줄인다 */
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .space-y-5 > * + *{ margin-top:8px !important; }
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .space-y-4 > * + *{ margin-top:8px !important; }
  html.pia-sc-compact.kiosk-on body.pia-v2[class] .py-6{ padding-top:8px !important; padding-bottom:8px !important; }
}

/* --- 세로형 키오스크 --- */
html.pia-sc-portrait.kiosk-on body.pia-v2[class]{
  --pia-f-h1:58px;  --pia-f-h2:40px;
  --pia-f-q:44px;   --pia-f-bodyL:32px;
  --pia-f-body:29px;--pia-f-btn:34px;
  --pia-f-cap:24px;
  --pia-touch-choice:max(104px, calc(48px / var(--pia-fit)));
  --pia-safe:72px;
}

/* --- 가로 대형 (1920x1080 등) --- */
html.pia-sc-wide.kiosk-on body.pia-v2[class]{
  --pia-f-h1:44px;  --pia-f-h2:34px;
  --pia-f-q:46px;   --pia-f-bodyL:28px;
  --pia-f-body:26px;--pia-f-btn:30px;
  --pia-f-cap:21px;
  --pia-touch-choice:max(104px, calc(48px / var(--pia-fit)));
  --pia-safe:48px;
}
html.pia-sc-wide.kiosk-on body.pia-v2[class] .pia{ max-width:min(1680px, 94vw); }

/* --- 가로 소형 (1024x768, 1366x768 등) : 세로가 매우 좁다 --- */
html.pia-sc-compact.kiosk-on body.pia-v2[class]{
  --pia-f-h1:26px;  --pia-f-h2:24px;
  --pia-f-q:34px;   --pia-f-bodyL:22px;
  --pia-f-body:19px;--pia-f-btn:23px;
  --pia-f-cap:15px;
  --pia-s1:5px;  --pia-s2:10px;
  --pia-s3:14px; --pia-s4:18px;
  --pia-s5:22px; --pia-s6:26px;
  --pia-touch:max(64px, calc(48px / var(--pia-fit)));
  --pia-touch-cta:max(70px, calc(52px / var(--pia-fit)));
  --pia-touch-choice:max(66px, calc(48px / var(--pia-fit)));
  --pia-safe:24px;
}
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia{ max-width:96vw; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-hdr__in{ min-height:52px; padding-top:4px; padding-bottom:4px; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-hdr-btn{ min-height:40px; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-back{ min-height:0 !important; padding:2px 0 !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-h1{ margin:0 !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-badge{ padding:2px 10px !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-prog{ margin-bottom:var(--pia-s1) !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-prog__bar{ height:7px !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choices{ gap:5px !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choice{ padding:4px var(--pia-s2) !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choice__radio{ transform:scale(.8); }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choice__face{ width:32px; height:32px; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choice__face svg{ width:20px; height:20px; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-choice{ min-height:var(--pia-touch-choice) !important; }
html.pia-sc-compact.kiosk-on body.pia-v2[class] .pia-qk{ grid-template-columns:repeat(4,1fr); }
html.pia-sc-compact.kiosk-on body.pia-v2[class] section[data-view="consent"] .pia-consent__list,
html.pia-sc-compact.kiosk-on body.pia-v2[class] section[data-view="setup"] .pia-sec{
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--pia-s4); align-items:start;
}
html.pia-sc-compact.kiosk-on body.pia-v2[class] section[data-view="setup"] .pia-codebox,
html.pia-sc-compact.kiosk-on body.pia-v2[class] section[data-view="setup"] .pia-note,
html.pia-sc-compact.kiosk-on body.pia-v2[class] section[data-view="setup"] .pia-sec > div:last-child{ grid-column:1 / -1; }

/* ── zoom 통짜 축소 (Baseline 2024). 레이아웃을 재계산하므로 텍스트가 선명하고,
      높이가 배율에 비례해 줄어들어 "한 화면 맞춤"이 수학적으로 보장된다. ── */
html.kiosk-on body.pia-v2[class] section[data-view] > .pia{
  zoom: var(--pia-fit, 1);
  max-width:none !important; width:100% !important;
}
@supports not (zoom: 1){
  html.kiosk-on body.pia-v2[class] section[data-view] > .pia{
    zoom:normal; transform:scale(var(--pia-fit,1)); transform-origin:top center;
  }
}