/* ============================================================
   AI PIA — KRDS 디자인 반영 1단계 (2026-09-03)
   시안 10장 픽셀 실측 기준. 문서: AIPIA-디자인시스템/03_화면별_픽셀명세서
   되돌리려면 이 <style> 블록만 삭제하면 원상복구된다.
   ============================================================ */
:root{
  /* ── KRDS 표준 글자 스케일 ─────────────────────────────────
     출처: KRDS HTML Component Kit v1.0.1 / krds_tokens.css
           (서버 사본: /vendor/krds/krds_tokens.css)
     공식 --krds-pc-font-size-* 값(rem, 기준 10px)을 px 로 옮기고
     키오스크 배율 1.5 를 곱한다. 임의 수치를 쓰지 않는다.

       display  large 6rem=60 / medium 4.4rem=44 / small 3.6rem=36
       heading  xlarge 4rem=40 / large 3.2rem=32 / medium 2.4rem=24
                small 1.9rem=19 / xsmall 1.7rem=17 / xxsmall 1.5rem=15
       body     large 1.9rem=19 / medium 1.7rem=17(기본)
                small 1.5rem=15 / xsmall 1.3rem=13

     ※ krds_tokens.css 를 직접 import 하지 않는 이유
       KRDS 는 rem 기준을 10px(62.5%)로 두는데, 이 앱의 html font-size 는
       16px 이다. 그대로 불러오면 모든 값이 1.6배로 부풀어 레이아웃이 깨진다.
       그래서 공식 값을 px 로 환산해 옮겨 적었다.

     굵기는 KRDS 표준형이 정한 400·700 두 가지만 쓴다.
     줄간격은 150%. 단 display 는 1.1 (EX-08) — 시안의 2행 헤드라인이
     150%면 행간이 135px로 벌어져 히어로 카드가 무너진다. */
  /* ── 배율 ──────────────────────────────────────────────────
     폭이 바뀔 때 '토큰 세트를 갈아끼우면' 비율이 튄다(현재 앱의 문제).
     대신 배율 하나만 폭에 비례해 연속으로 바꾼다. 그러면 어떤 폭에서도
     화면 비율이 시안과 동일하게 유지된다.
       1080px(키오스크) → 1.5   768px(태블릿) → 1.07   400px(모바일) → 0.6 */
  /* CSS 에서 calc(100vw/720) 은 '배수'가 아니라 '길이'가 된다.
     그래서 60px * 그 값 = px*px 가 되어 선언 전체가 무효가 됐다.
     (1080폭에서도 글자가 뭉개졌던 원인)
     해결: 배율을 length 단위 --krds-u 로 두고, 숫자에 곱한다.
       1080px → 1.5px  ·  768px → 1.07px  ·  432px 이하 → 0.6px
     따라서 font-size:calc(60 * var(--krds-u)) 가 1080폭에서 90px 이 된다. */
  --krds-u:clamp(0.6px, calc(100vw / 720), 1.5px);
  /* 글자 크게 (접근성) — 2026-09-15
   *
   * 이 파일은 --pia-f-* 토큰을 7군데에서 갈아끼운다. 그래서 확대 규칙을
   * 앞쪽에 적으면 뒤의 KRDS 레이어가 덮어 아무 변화가 없었다. 특이도를
   * 맞춰도 소용없다 — 같으면 뒤가 이긴다.
   *
   * KRDS 가 모든 치수를 --krds-u 하나에서 뽑아 쓰므로, 그 단위 자체를
   * 키운다. 한 곳만 바꾸면 글자·여백·터치 표적이 같은 비율로 따라온다.
   * 루트 font-size 나 --pia-fit 은 건드리지 않는다. */
  /* 휴대폰 글자 하한 (2026-09-28)
   * 432px 이하에서 배율이 0.6px 로 고정돼 본문 토큰이 9~11px 까지 작아졌다
   * (검사 첫 화면 안내·소요시간 칩·도움말 9px). KRDS 는 모바일 본문을 PC 와 같게
   * 두고(body 19/17/15/13, 최소 xsmall 13px) 본문 16px 이상을 권한다.
   * 배율 자체를 올리면 제목·여백까지 커져 첫 화면 시작 버튼이 밀려나므로(0.85 시험),
   * 본문·작은 제목 토큰에만 px 하한을 둔다. 태블릿·PC·키오스크는 계산값이 하한보다
   * 커서 변화 없음. 제목(heading-large 이상)·display 는 그대로. */
  --krds-display-large:  calc(60 * var(--krds-u));  /* 90   */
  --krds-display-medium: calc(44 * var(--krds-u));  /* 66   */
  --krds-display-small:  calc(36 * var(--krds-u));  /* 54   */
  --krds-heading-xlarge: calc(40 * var(--krds-u));  /* 60   */
  --krds-heading-large:  calc(32 * var(--krds-u));  /* 48   */
  --krds-heading-medium: max(18px, calc(24 * var(--krds-u)));  /* 36   */
  --krds-heading-small:  max(16px, calc(19 * var(--krds-u)));  /* 28.5 */
  --krds-body-large:     max(15px, calc(19 * var(--krds-u)));  /* 28.5 */
  --krds-body-medium:    max(14px, calc(17 * var(--krds-u)));  /* 25.5 */
  --krds-body-small:     max(13px, calc(15 * var(--krds-u)));  /* 22.5 */
  --krds-body-xsmall:    max(13px, calc(13 * var(--krds-u)));  /* 19.5 */

  /* KRDS 표준 서체 — Pretendard GOV 우선 */
  --krds-font:"Pretendard GOV","Pretendard",-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Segoe UI","맑은 고딕",sans-serif;

  /* 시안 실측값 */
  --aipia-bg:#F7F8FA;         /* 페이지 배경 (실측 247,248,250) */
  --aipia-surface:#FFFFFF;    /* 카드 면 */
  --aipia-line:#EDF0F5;
  --aipia-line-2:#E5E8EE;
  --aipia-primary-weak:#EFF4FD;
  --aipia-primary-tint:#F0F4FD;

  /* 크림 계열 잔재를 KRDS 중립으로 치환 — 토큰 이름은 그대로 두어
     이 값을 참조하던 기존 규칙들이 자동으로 따라오게 한다. */
  --c-cream:#F7F8FA;
  --c-paper:#FFFFFF;
  --paper:#F7F8FA;
  --paper-2:#F1F3F6;
  --paper-3:#EDF0F5;
  --c-line:#EDF0F5;
  --line:#EDF0F5;
}

/* 페이지 배경 — 크림 제거 */
html, body{ background:var(--aipia-bg); }

/* ── 서체: KRDS 표준 Pretendard GOV ────────────────────────
   이 앱은 .pia{font-family:var(--pia-font)} 로 본문 전체가 한 토큰에
   묶여 있다. 그래서 토큰을 바꾸는 게 정석이고, 그러면 하위가 모두 따라온다.
   토큰을 안 쓰고 리터럴로 박힌 규칙들(body / h1~h6)만 같은 선택자로 한 번 더 덮는다. */
:root{
  --pia-font:var(--krds-font);
  --font-ui:var(--krds-font);
  --font-read:var(--krds-font);
}
body, button, input, select, textarea, label, nav{ font-family:var(--krds-font); }
.pia, .pia *{ font-family:var(--krds-font); }
/* h1 은 기존에 `h1,.text-xl{font-family:'Noto Sans KR' !important}` 가 걸려 있어
   !important 로만 넘길 수 있다. 같은 선언을 뒤에서 한 번 더 둔다. */
h1,h2,h3,h4,h5,h6,.text-xl{ font-family:var(--krds-font) !important; }

/* Tailwind 중립색을 크림으로 덮어쓰던 규칙 되돌리기 */
.bg-slate-50 { background-color:#F7F8FA !important; }
.bg-slate-100{ background-color:#F1F3F6 !important; }
.bg-white    { background-color:#FFFFFF !important; }

/* ── 홈 스텝: 제목과 '이전 단계 완료 후'가 붙어 보이던 문제 ── */
.pia-step__t{ margin-bottom:0; }
.pia-step__d{ margin-top:calc(8 * var(--krds-u)); }

/* ── [hidden] 이 안 먹던 버그 ──────────────────────────────
   .pia-cats{display:grid} 가 [hidden] 의 display:none 을 이겨서
   '선택 검사'가 접히지 않고 4장이 항상 펼쳐져 있었다. */
[hidden]{ display:none !important; }

/* ── 히어로 카드가 버튼까지 감싸도록 (시안: 카드 y162~1094) ── */
.pia-hero--v2{ display:block !important; }
.pia-hero__row{
  display:flex;
  align-items:center;
  gap:var(--pia-s3);
}
.pia-hero--v2 > div[style*="margin-bottom"]{ margin-bottom:0 !important; }

/* ── 선택 검사: 시안에 있는 4칸 그리드 아이콘 ────────────────── */
.pia-optfold::before{
  content:"";
  flex:0 0 auto;
  width:46px; height:46px;
  margin-right:10px;
  background-color:var(--pia-primary, #246BEB);
  -webkit-mask:var(--aipia-grid-icon) center/contain no-repeat;
          mask:var(--aipia-grid-icon) center/contain no-repeat;
}
:root{
  --aipia-grid-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
}

/* ============================================================
   키오스크 프로파일 — 1080폭 이상 세로
   기존 JS 프로파일 판정(dev-laptop)이 키오스크에서도 걸려
   터치 표적이 시안의 절반(62px)으로 렌더되던 문제를 미디어쿼리로 바로잡는다.
   ============================================================ */
/* ============================================================
   컴포넌트 치수 — 폭에 관계없이 같은 비율.
   모든 값은 (시안 실측값 ÷ 1.5) × --krds-scale 로 쓴다.
   1080px 에서는 시안 실측값 그대로가 되고, 좁아지면 통째로 줄어든다.
   ============================================================ */
@media all {
  /* 앱이 html.dev-laptop / html.dev-tablet 으로 변수를 덮어쓴다.
     :root(명시도 0,1,0)로는 못 이기므로 같은 형태로 맞춘다. */
  /* 글자 크게가 켜지면 KRDS 기본 단위를 1.25배로 키운다.
     이 블록보다 뒤에 있어야 이긴다. (2026-09-15) */
  html[data-pia-fs="l"],
  html[data-pia-fs="l"].dev-laptop, html[data-pia-fs="l"].dev-tablet,
  html[data-pia-fs="l"].dev-desktop, html[data-pia-fs="l"].kiosk-on,
  html[data-pia-fs="l"].dev-laptop:not(.kiosk-on),
  html[data-pia-fs="l"].dev-tablet:not(.kiosk-on){
    --krds-u:clamp(0.75px, calc(100vw / 576), 1.9px);
  }

  :root,
  html.dev-laptop, html.dev-tablet, html.dev-desktop,
  html.dev-laptop:not(.kiosk-on),
  html.dev-tablet:not(.kiosk-on){
    --pia-touch-cta:calc(77.3 * var(--krds-u));    /* 1080폭에서 116 */
    --pia-touch-choice:calc(76.7 * var(--krds-u)); /* 1080폭에서 115 */
    --pia-touch:calc(58.7 * var(--krds-u));        /* 1080폭에서 88 */

    /* ── 글자 토큰 전량 재정의 ──────────────────────────────
       앱은 --pia-f-* 세트를 :root / @media(max-width:1079px) /
       @media(max-width:520px) / html.dev-tablet / html.dev-laptop 등
       7군데에서 통째로 갈아끼운다. 그래서 브라우저 배율을 바꾸면
       (= CSS 뷰포트 폭이 바뀌면) 글자 크기와 굵기가 계단식으로 튀었다.
       여기서 전부 연속 배율(--krds-u)로 덮어 한 벌만 남긴다. */
    --pia-f-display:var(--krds-heading-xlarge);  /* 60   */
    --pia-f-h1:var(--krds-heading-xlarge);       /* 60   */
    --pia-f-h2:var(--krds-heading-medium);       /* 36   */
    --pia-f-h3:var(--krds-heading-small);        /* 28.5 */
    --pia-f-q:var(--krds-heading-xlarge);        /* 60   */
    --pia-f-bodyL:var(--krds-body-large);        /* 28.5 */
    --pia-f-body:var(--krds-body-medium);        /* 25.5 */
    --pia-f-btn:var(--krds-body-large);          /* 28.5 */
    --pia-f-input:var(--krds-body-medium);       /* 25.5 */
    --pia-f-cap:var(--krds-body-small);          /* 22.5 */
    --pia-f-badge:var(--krds-body-small);        /* 22.5 */

    /* 간격도 같은 배율로 (앱이 브레이크포인트마다 바꾸던 것) */
    --pia-s1:calc(5.3 * var(--krds-u));   /* 8  */
    --pia-s2:calc(10.7 * var(--krds-u));  /* 16 */
    --pia-s3:calc(16 * var(--krds-u));    /* 24 */
    --pia-s4:calc(21.3 * var(--krds-u));  /* 32 */
    --pia-s5:calc(26.7 * var(--krds-u));  /* 40 */
    --pia-s6:calc(32 * var(--krds-u));    /* 48 */
    --pia-s8:calc(42.7 * var(--krds-u));  /* 64 */
    --pia-safe:calc(37.3 * var(--krds-u));/* 56 */
  }

  /* 변수 경로가 막혀도 확실히 걸리도록 규칙으로도 못박는다.
     앱의 기존 !important 규칙과 명시도가 같으므로 나중에 선언된 이쪽이 이긴다. */
  .pia-btn--cta,
  .pia-btn--primary,
  .pia-btn--secondary{
    min-height:var(--pia-touch-cta) !important;
    border-radius:calc(9.3 * var(--krds-u)) !important;
  }
  .pia-btn--secondary{ border-width:2px !important; }

  /* 선택지 카드 */
  .pia-choice,
  .pia-touch-choice{
    min-height:var(--pia-touch-choice) !important;
    border-radius:calc(10.7 * var(--krds-u)) !important;
  }

  /* ── 홈 히어로: 시안 비례로 ────────────────────────────────
     시안 실측(1080폭): 텍스트 좌측 x94 · H1 라틴 캡높이 67px ·
     설명 잉크 30px · 약20분 잉크 34px · 단체 라벨 잉크 33px(가운데)
     현재는 각각 x58 / 28 / 21 / 20 / 16(좌측)이었다. */
  /* 히어로 카드 안쪽 여백 — 시안 실측: 텍스트 좌측 x99, 카드 좌측 x34
     → 카드 패딩 65px. 현재는 텍스트가 x25 에서 시작해 74px 왼쪽으로 밀려 있었다. */
  .pia-sec.pia-hero{ padding:calc(40 * var(--krds-u)) calc(43.3 * var(--krds-u)) !important; }
  /* 시안: 텍스트 열 607px(x92~699) · 마스코트 345px(x645~990) — 살짝 겹친다.
     마스코트를 400으로 두면 텍스트가 452px로 눌려 H1이 3줄로 접힌다. */
  .pia-hero__row{ align-items:center; gap:0; }
  .pia-hero__tx{
    text-align:left !important;
    flex:1 1 auto;
    min-width:calc(407 * var(--krds-u));
    position:relative; z-index:1;
  }
  .pia-hero__tx > *{ text-align:left !important; }

  /* 시안 H1: 1행 잉크 80px · 행 간격 90px.
     KRDS display-large(60 × 1.5 = 90px) 를 그대로 쓰고 행간을 1.0 으로 둔다.
     (앞서 0.78배로 줄였다가 잉크가 62px 로 작아져 되돌렸다 — 두 줄이 합쳐진
      잉크 116px 을 한 줄로 잘못 읽은 것이 원인이었다) */
  .pia-hero .pia-display{
    font-size:var(--krds-display-large) !important;    /* 90 */
    line-height:1.0 !important;                        /* 행 간격 90px */
    font-weight:700 !important;
    letter-spacing:1px;
    text-align:left !important;
  }
  .pia-hero__tx .pia-bodyL{
    font-size:var(--krds-body-large) !important;       /* 19 × 1.5 = 28.5 */
    line-height:1.5 !important;
    font-weight:400 !important;
  }
  .pia-hero__time{
    font-size:var(--krds-body-medium) !important;      /* 17 × 1.5 = 25.5 */
    line-height:1.5 !important;
    font-weight:700 !important;
    justify-content:flex-start !important;
  }
  .pia-hero__bot{ flex:0 0 auto; width:auto !important; margin-left:calc(-40 * var(--krds-u)); }
  /* 시안 여우 세로 486px. 폭이 아니라 높이 기준으로 잡아야 시안 크기가 된다. */
  .pia-hero__bot img{ height:calc(313 * var(--krds-u)); width:auto; }

  /* 단체 검사 버튼 — 시안은 가운데 정렬, 라벨이 주 버튼과 같은 위계 */
  /* 단체 검사 버튼 — 라벨을 버튼 정중앙에 두고, '선생님용' 배지는
     흐름에서 빼서 라벨 왼쪽에 붙인다. 배지를 흐름에 두면 배지+라벨이
     한 덩어리로 가운데 정렬돼 라벨이 '검사 시작하기'보다 오른쪽으로 밀린다
     (실측: 시안 cx 558 / 수정 전 cx 607, 주 버튼은 536). */
  .pia-group-btn{
    position:relative;
    /* 주 버튼과 같은 높이로 통일 (수정 전 58px, 주 버튼 116px) */
    min-height:var(--pia-touch-cta) !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:0 !important;
    padding:0 calc(21.3 * var(--krds-u)) !important;
    border-radius:calc(9.3 * var(--krds-u)) !important;
    border-width:2px !important;
  }
  .pia-group-btn__t{ flex:0 0 auto !important; }
  .pia-group-btn__tag{
    position:absolute;
    top:50%;
    right:calc(50% + 81.3 * var(--krds-u));            /* 라벨 왼쪽 */
    transform:translateY(-50%);
  }
  .pia-group-btn__tag{
    font-size:var(--krds-body-small) !important;       /* 15 × 1.5 = 22.5 */
    font-weight:700 !important;
    padding:calc(6 * var(--krds-u)) calc(12 * var(--krds-u)) !important;
    border-radius:calc(6.7 * var(--krds-u)) !important;
  }
  .pia-group-btn__ar{
    position:absolute; right:calc(24 * var(--krds-u));
    font-size:var(--krds-heading-medium) !important;
    color:var(--pia-primary,#246BEB) !important;
  }
  .pia-group-btn{ position:relative; }

  /* 주 버튼 라벨도 KRDS heading-large */
  /* 버튼 라벨 — KRDS 는 버튼 텍스트를 label 토큰 / weight 400 으로 규정한다.
     heading 700 은 제목용이라 버튼에 쓰면 무겁다.
     크기는 label 계열로 한 단계 더 내린다(28.5px).
     굵기는 SemiBold(600) — KRDS 표준(400/700) 밖이라 브랜드 레이어 예외로 둔다.
     600 파일이 없으면 브라우저가 700 으로 올려 버려서 Pretendard GOV SemiBold 를
     따로 설치해 두었다. 단체 버튼도 같은 값을 쓴다. */
  .pia-btn--cta, .pia-btn--primary, .pia-btn--secondary,
  .pia-group-btn__t{
    font-size:var(--krds-body-large) !important;   /* 19 × 1.5 = 28.5 */
    font-weight:600 !important;
    line-height:1.5 !important;
  }
  /* 홈 히어로의 두 버튼(검사 시작하기 / 단체 검사 시작)만 +5px.
     다른 화면 버튼은 위 기본값(28.5) 그대로 둔다. */
  .pia-hero .pia-btn--cta,
  .pia-hero .pia-group-btn__t{
    font-size:calc(22.3 * var(--krds-u)) !important;   /* 1080폭에서 33.5 */
  }

  /* 이전 검사 결과 보기 — 보조 링크라 버튼보다 한 단계 작게.
     KRDS body-medium(17 × 1.5 = 25.5), 굵기도 버튼과 같은 600. */
  .pia-prevlink{
    font-size:var(--krds-body-medium) !important;
    font-weight:600 !important;
  }

  /* 선택 검사 행 */
  .pia-optfold{ padding:calc(16 * var(--krds-u)) calc(21.3 * var(--krds-u)) !important; border-radius:calc(12 * var(--krds-u)) !important; }
  .pia-optfold__t{ font-size:var(--krds-body-large) !important; font-weight:700 !important; }
  .pia-optfold__d{ font-size:var(--krds-body-small) !important; }
  .pia-optfold::before{ width:calc(30.7 * var(--krds-u)); height:calc(30.7 * var(--krds-u)); margin-right:calc(17.3 * var(--krds-u)); }

  /* 섹션 제목 */
  .pia-h2{ font-size:var(--krds-heading-medium) !important; font-weight:700 !important; }

  /* 문항 텍스트 · 페이지 제목 */
  .pia-q, .pia-f-q{ font-size:var(--krds-heading-xlarge) !important; font-weight:700 !important; line-height:1.5 !important; }
  .pia-h1{ font-size:var(--krds-heading-xlarge) !important; font-weight:700 !important; }
  .pia-choice__txt{ font-size:var(--krds-body-large) !important; }
}

/* 홈 히어로 좁은 화면 대응 — 여우 잘림 수정 (2026-09-03)
   .pia-hero--v2 는 1080px 키오스크 실측 기준 좌우 배치라, 폰 폭에서는
   텍스트 최소폭 + 여우폭 합이 카드 안쪽 폭을 넘어 여우가 밀려 잘렸다.
   640px 이하에서는 위아래로 쌓고 여우를 뷰포트 기준으로 다시 작게 잡는다. */
@media(max-width:640px){
  .pia-hero--v2 .pia-hero__row{ flex-direction:column !important; gap:var(--pia-s3) !important; }
  .pia-hero--v2 .pia-hero__tx{ min-width:0 !important; width:100% !important; text-align:center !important; }
  .pia-hero--v2 .pia-hero__tx > *{ text-align:center !important; }
  .pia-hero--v2 .pia-hero__time{ justify-content:center !important; }
  .pia-hero--v2 .pia-hero__bot{ width:100% !important; margin-left:0 !important; text-align:center; }
  .pia-hero--v2 .pia-hero__bot img{ height:auto !important; width:min(220px,55vw) !important; margin:0 auto; }
}

/* 여우가 카드 밖으로 나가던 문제 (2026-09-16)
 *
 * 넓은 화면에서 여우를 height:610px 로 키우는데 width:auto 라 가로가
 * 432px 까지 늘어난다. 담는 칸(.pia-hero__bot)은 300px 이고 flex-shrink:0
 * 이라 줄지도 않아, 오른쪽으로 82px 삐져나와 카드 모서리를 넘었다.
 * (실측: 카드 끝 1640px, 여우 끝 1722px)
 *
 * 처음엔 칸을 445px 로 넓혀 봤는데 더 나빠졌다. 칸이 커진 만큼 flex 행
 * 자체가 835px 를 뚫고 161px 넘쳤다. 칸을 키우는 방향이 아니었다.
 *
 * 남는 자리에 맞춰 여우를 줄이는 쪽으로 바꾼다. 텍스트가 먼저 자리를
 * 잡고, 여우는 그러고 남은 폭까지만 쓴다. 높이는 비율이 알아서 따라오게
 * auto 로 두되 상한만 건다. 넓은 화면에서도 카드 안에 머문다. */
body.pia-v2 section[data-view="home"] .pia-hero__row{
  align-items:flex-end;
  min-width:0;
  gap:clamp(12px, 2vw, 32px);   /* 텍스트와 여우가 붙어 보이지 않게 */
}
body.pia-v2 section[data-view="home"] .pia-hero__tx{
  flex:1 1 auto; min-width:0;    /* 텍스트가 먼저 줄어들 수 있게 */
}
body.pia-v2 section[data-view="home"] .pia-hero__bot{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0;
  /* 실측하며 두 번 조정했다. 38%·42% 로는 여우가 252~284px 까지 작아져
     허전했다. 텍스트 칸(.pia-hero__tx)이 max-width 로 고정돼 있어 여우만
     밀린 탓이다. 텍스트도 줄어들 수 있게 열어 주고 여우 몫을 늘린다. */
  max-width:min(400px, 46%);
}
body.pia-v2 section[data-view="home"] .pia-hero__bot img{
  width:100% !important;
  height:auto !important;
  max-height:610px;
  object-fit:contain;
}
/* 좁은 화면에서는 기존 규칙(가운데 정렬, 고정폭)을 그대로 쓴다. */
@media(max-width:819px){
  body.pia-v2 section[data-view="home"] .pia-hero__bot{
    max-width:none; width:150px !important; margin:0 auto;
  }
}

/* 글자 크게 — 키오스크 화면분류 조합까지 덮기 (2026-09-16)
 *
 * 2026-09-15 에 기기 클래스(dev-laptop 등)와의 특이도 싸움은 정리했는데
 * 화면분류 조합이 남아 있었다. 실측하니 이랬다.
 *
 *   html.pia-sc-compact.kiosk-on body.pia-v2[class]   0-4-3  --pia-f-q:34px
 *   :root 계열 글자 크게 규칙                          0-1-0  이 쪽이 진다
 *
 * 그래서 글자 크게를 눌러도 --krds-u 는 1.5 -> 1.9 로 바뀌는데
 * --pia-f-q 는 34px 에 그대로 묶여 화면상 아무 변화가 없었다.
 * pia-sc-compact 는 1366x768 같은 가로 소형 화면에서 붙는다.
 *
 * 화면분류 3종(compact/wide/tall) × kiosk-on 조합을 같은 특이도로 적어
 * 덮는다. 값은 앞 블록과 같은 --krds-* 토큰을 쓴다 — 기기별 기본값이
 * 바뀌어도 따라가고 두 곳을 같이 고칠 일이 없다. */
html[data-pia-fs="l"].pia-sc-compact.kiosk-on body.pia-v2[class],
html[data-pia-fs="l"].pia-sc-wide.kiosk-on body.pia-v2[class],
html[data-pia-fs="l"].pia-sc-tall.kiosk-on body.pia-v2[class],
html[data-pia-fs="l"].kiosk-on body.pia-v2[class]{
  /* 처음엔 heading-large 를 그대로 썼더니 34px -> 60.8px (1.79배)가 돼
     제목이 세 줄로 넘치고 캐릭터와 겹쳤다. 가로 소형 화면(pia-sc-compact)은
     세로가 좁아 그만큼 키우면 한 화면에 안 들어간다.
     접근성 권고선인 1.25~1.3배에 맞춰 medium 계열로 낮춘다. */
  --pia-f-display:var(--krds-heading-large);
  --pia-f-h1:var(--krds-heading-medium);
  --pia-f-h2:var(--krds-heading-small);
  --pia-f-h3:var(--krds-body-large);
  --pia-f-q:var(--krds-heading-medium);
  --pia-f-bodyL:var(--krds-body-large);
  --pia-f-body:var(--krds-body-medium);
  --pia-f-btn:var(--krds-body-large);
  --pia-f-input:var(--krds-body-medium);
  --pia-f-cap:var(--krds-body-small);
  --pia-f-badge:var(--krds-body-small);
}
/* ── 가로 키오스크(2026-10-04 가로 1024x768 실측, 16:9 큰 화면 포함) ─────────────
   가로 4:3 키오스크에서 시작 화면이 1,849px(화면 768px)라 학년 선택(y760)과
   [검사 시작하기](y835)가 화면 밖에 있었다 — 스크롤하지 않으면 검사를 시작할 수 없다.
   첫 화면을 [글·학년 선택·시작 버튼 | 여우] 2단으로 짜서 한 화면에 담고,
   진행 현황·선택 검사는 쪽 넘김 버튼으로 다음 쪽에 둔다(국내 키오스크 UI 가이드: 스크롤보다 쪽 넘김).
   세로 키오스크·PC·휴대폰에는 적용되지 않는다. */
.pia-pager{ display:none; }
@media (orientation:landscape){
  html.kiosk-on .pia-hero--v2{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(200px,32%);
    grid-template-rows:auto auto auto auto;
    column-gap:20px; row-gap:8px;
    align-content:center;
    box-sizing:border-box;
    min-height:calc(100vh - 106px);
    padding:10px 20px !important;
    scroll-margin-top:66px;
  }
  html.kiosk-on .pia-hero--v2 .pia-hero__row{ display:contents !important; }
  html.kiosk-on .pia-hero--v2 .pia-hero__tx{ grid-column:1; grid-row:1; min-width:0 !important; max-width:none !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration{ grid-column:1; grid-row:2; margin:0 !important; }
  html.kiosk-on .pia-hero--v2 > div[style*="margin-bottom"]{ grid-column:1; grid-row:3; }
  html.kiosk-on .pia-hero--v2 > .pia-pager--down{ grid-column:1 / span 2; grid-row:4; }
  html.kiosk-on .pia-hero--v2 .pia-hero__bot{
    grid-column:2; grid-row:1 / span 3; align-self:center; justify-self:center;
    width:100% !important; max-width:none !important; margin:0 !important; flex:none !important;
  }
  html.kiosk-on .pia-hero--v2 .pia-hero__bot img{
    display:block; width:100% !important; height:auto !important;
    max-height:calc(100vh - 230px) !important; object-fit:contain; margin:0 auto;
  }
  html.kiosk-on .pia-hero--v2 .pia-display{ font-size:max(40px,5.21vh) !important; line-height:1.2 !important; margin:0 !important; }
  html.kiosk-on .pia-hero--v2 .pia-display br + span{ white-space:nowrap; }
  html.kiosk-on .pia-hero--v2 .pia-bodyL{ font-size:max(24px,3.12vh) !important; line-height:1.35 !important; margin:6px 0 !important; }
  html.kiosk-on .pia-hero--v2 .pia-hero__time{ font-size:max(24px,3.12vh) !important; margin:0 !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration .nr-t,
  html.kiosk-on .pia-hero--v2 #pia-narration label{ font-size:max(24px,3.12vh) !important; line-height:1.3 !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration select{ font-size:max(24px,3.12vh) !important; min-height:max(56px,7.29vh) !important; }
  html.kiosk-on .pia-hero--v2 .pia-btn--cta,
  html.kiosk-on .pia-hero--v2 .pia-btn--cta *,
  html.kiosk-on .pia-hero--v2 .pia-group-btn,
  html.kiosk-on .pia-hero--v2 .pia-group-btn__t{ font-size:max(24px,3.12vh) !important; }
  html.kiosk-on .pia-hero--v2 .pia-btn--cta,
  html.kiosk-on .pia-hero--v2 .pia-group-btn{ min-height:max(60px,7.81vh) !important; padding-top:8px !important; padding-bottom:8px !important; }

  /* 쪽 넘김 버튼: 이 조건에서만 보인다. */
  html.kiosk-on .pia-pager{
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:max(56px,7.29vh); padding:8px 16px; margin:0;
    font-size:max(24px,3.12vh); font-weight:700; color:var(--pia-primary-dark, #1e4fbf);
    background:#fff; border:2px solid var(--pia-line, #cbd5e1); border-radius:14px; cursor:pointer;
  }
  html.kiosk-on .pia-pager--up{ margin:10px 0 8px; }
  /* 둘째 쪽: 필수 검사 단계 + 선택 검사 + 바닥 버튼이 한 화면(768px)에 들어오게 여백을 줄인다. */
  html.kiosk-on .pia-page2{ scroll-margin-top:8px; }
  html.kiosk-on .pia-page2 ~ .pia-sec{ padding-top:8px !important; padding-bottom:8px !important; margin-top:8px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec .pia-optfold{ min-height:0 !important; padding-top:10px !important; padding-bottom:10px !important; }
  html.kiosk-on .pia-page2 ~ .pia-foot{ margin-top:6px !important; padding-top:6px !important; padding-bottom:6px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec{ margin-bottom:6px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec .pia-step__ic{ width:84px !important; height:84px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec .pia-step__ar{ margin-top:58px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec .pia-restart{ margin-top:10px !important; }
  html.kiosk-on .pia-page2 ~ .pia-sec .pia-h2{ font-size:max(24px,3.12vh) !important; margin-bottom:6px !important; }
  /* ── 시작 화면: 학년을 고르면 안내 5줄과 듣기 버튼이 펼쳐진다. 그때는 소개 문장을 접어 자리를 낸다. */
  html.kiosk-on .pia-hero--v2:has(#pia-narration .nr-btns) .pia-bodyL,
  html.kiosk-on .pia-hero--v2:has(#pia-narration .nr-btns) .pia-hero__time{ display:none !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration{ padding:10px 14px !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration ul{ margin:0 0 6px !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration li{ font-size:max(20px,2.60vh) !important; line-height:1.4 !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration .nr-lv{ font-size:max(16px,2.08vh) !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration button{ font-size:max(20px,2.60vh) !important; min-height:max(52px,6.77vh) !important; padding:8px 14px !important; }
  html.kiosk-on .pia-hero--v2 #pia-narration .nr-msg{ margin-top:2px !important; min-height:0 !important; }

  /* ── 동의·정보 입력 화면: [동의하고 계속하기](y740~810)·[확인하고 검사 시작하기](y791~861)가 화면 밖에 있었다.
     머리말·단계 표시의 여백을 줄여 한 화면에 넣고, 그래도 넘칠 때(오류 문구가 펼쳐질 때)를 대비해
     다음 단계 버튼은 화면 아래 띠에 붙여 둔다. */
  html.kiosk-on .pia > .pia-h1,
  html.kiosk-on .pia-setup__hd .pia-h1{ font-size:max(28px,3.65vh) !important; line-height:1.25 !important; margin:0 0 4px !important; }
  html.kiosk-on .pia > .pia-h1 + .pia-bodyL,
  html.kiosk-on .pia-setup__hd .pia-bodyL{ font-size:max(20px,2.60vh) !important; margin:0 0 6px !important; }
  html.kiosk-on .pia-setup__steps{ margin:4px 0 8px !important; }
  html.kiosk-on .pia-setup__steps .pia-ss{ flex-direction:row !important; align-items:center !important; gap:8px !important; }
  html.kiosk-on .pia-setup__steps .pia-ss__n{ width:36px !important; height:36px !important; font-size:max(18px,2.34vh) !important; }
  html.kiosk-on .pia-setup__steps .pia-ss__l{ font-size:max(20px,2.60vh) !important; margin:0 !important; white-space:nowrap; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa{ padding:10px 14px !important; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-codebox{ padding:8px 12px !important; margin-bottom:8px !important; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-field{ margin-bottom:6px !important; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-note{ margin-top:6px !important; font-size:max(16px,2.08vh) !important; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa > div:has(> .pia-btn--cta),
  html.kiosk-on #pia-consent-cta{
    position:sticky; bottom:6px; z-index:6; margin-top:8px !important;
    background:#fff; border-radius:14px; box-shadow:0 -6px 14px rgba(255,255,255,.95);
  }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-btn--cta,
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-btn--cta *{ font-size:max(24px,3.12vh) !important; }
  html.kiosk-on .pia-setup__steps ~ .pia-sec--qa .pia-btn--cta{ min-height:max(60px,7.81vh) !important; }
  /* ── AI와 대화 화면: 세로로 1,410px(화면 768px)이라 [답변 보내기](y725~795)가 잘리고
     빠른 답변(y987~)은 화면 밖에 있었다. 가로 화면은 2단으로 짠다.
       왼쪽: 진행 표시 · 질문(남는 높이) · 입력칸 · 마이크/보내기
       오른쪽: 음성 재생 버튼 · 빠른 답변 6개(남는 높이) · 말하기 속도
     머리말과 겹치는 제목·보조 설명, 맨 아래 [이용 안내]·[검사 종료하기]는 접는다
     (위쪽 [검사 종료]·[도움] 버튼으로 같은 일을 할 수 있다). */
  html.kiosk-on .pia:has(> .pia-ask){
    display:grid !important;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;
    column-gap:14px; row-gap:6px;
    height:calc(100vh - 57px - 36px); min-height:0; box-sizing:border-box;
  }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-topbar{ grid-column:1 / -1; grid-row:1; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > div:has(> .pia-badge){ grid-column:1; grid-row:2; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > div:not([class]):not([id]):not(:has(*)){ display:none !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-prog{ grid-column:1; grid-row:3; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-titlerow{ grid-column:2; grid-row:2; margin:0 !important; justify-content:flex-end; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-titlerow .pia-titlerow__tx{ display:none !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-titlerow .pia-ttsbtn{ width:100%; min-height:max(52px,6.77vh) !important; font-size:max(20px,2.60vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-ask{
    grid-column:1; grid-row:4; margin:0 !important; min-height:0; padding:10px 14px !important;
    display:flex !important; align-items:center; gap:12px; overflow:hidden;
  }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-ask .pia-ask__bot{ flex:0 0 auto; width:110px !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-ask .pia-ask__bot img{ width:100% !important; height:auto !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-ask .pia-ask__tx{ flex:1 1 auto; min-width:0; max-height:100%; overflow-y:auto; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-ask .pia-q{ font-size:max(28px,3.65vh) !important; line-height:1.35 !important; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-h3:not(#chat-quick-title){ display:none !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-say{ grid-column:1; grid-row:5; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-say textarea{ min-height:0 !important; height:84px !important; font-size:max(24px,3.12vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > #chat-mic-status{ grid-column:1; grid-row:6; margin:0 !important; min-height:24px; font-size:max(18px,2.34vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-sendrow{ grid-column:1; grid-row:7; margin:0 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-sendrow button,
  html.kiosk-on .pia:has(> .pia-ask) > .pia-sendrow button *{ font-size:max(24px,3.12vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-sendrow button{ min-height:max(64px,8.33vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-sendrow #chat-mic{ flex-direction:row !important; gap:10px; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-chat-note{ display:none !important; }
  html.kiosk-on .pia:has(> .pia-ask) > #chat-quick-title{ grid-column:2; grid-row:3; margin:0 !important; align-self:end; font-size:max(20px,2.60vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > #chat-quick-wrap{
    grid-column:2; grid-row:4 / span 2; margin:0 !important; min-height:0;
    display:grid !important; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:8px;
  }
  html.kiosk-on .pia:has(> .pia-ask) > #chat-quick-wrap .pia-qk__b{ width:auto !important; min-height:0 !important; height:100%; padding:6px 10px !important; }
  html.kiosk-on .pia:has(> .pia-ask) > #chat-quick-wrap .pia-qk__b span:not(.pia-qk__ic){ font-size:max(22px,2.86vh) !important; line-height:1.25 !important; word-break:keep-all; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-qk__help{ grid-column:2; grid-row:6; margin:0 !important; font-size:max(16px,2.08vh) !important; line-height:1.3 !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-speedrow{ grid-column:2; grid-row:7; margin:0 !important; align-self:center; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-speedrow label,
  html.kiosk-on .pia:has(> .pia-ask) > .pia-speedrow select{ font-size:max(20px,2.60vh) !important; min-height:max(48px,6.25vh) !important; }
  html.kiosk-on .pia:has(> .pia-ask) > .pia-fab{ display:none !important; }
  /* ── 문항 화면(성격·진로·상황 판단 등): 6~9px 넘쳐 세로 스크롤이 생겼다. 제목 아래 빈 줄을 접는다.
     답을 고르면 자동으로 다음 문항으로 넘어가고 [이전]으로 되돌아가는 동작은 그대로다. */
  html.kiosk-on .pia:has(> .pia-sec--qa > .pia-choices) > div:not([class]):not([id]):not(:has(*)){ display:none !important; }
  /* 큰 가로 화면(1600x900·1920x1080)에서는 내용 폭 1,152px 제한 때문에 좌우가 비었다.
     이 파일이 다루는 화면(시작·동의·정보 입력·대화·문항)만 폭을 넓힌다. 결과지는 그대로 둔다. */
  html.kiosk-on .max-w-6xl:has(.pia-hero--v2),
  html.kiosk-on .max-w-6xl:has(.pia-setup__steps),
  html.kiosk-on .max-w-6xl:has(.pia-ask),
  html.kiosk-on .max-w-6xl:has(.pia-choices){ max-width:min(1680px, 96vw) !important; }
  /* 시작 화면 묶음(#home-content)은 넓은 화면에서 3칸 격자라 내용이 왼쪽 한 칸(약 690px)에만 들어갔다. 가로 키오스크에서는 한 칸으로 편다. */
  html.kiosk-on #home-content:has(.pia-hero--v2){ display:block !important; }
  /* 문항 화면: 1920x1080 에서 1,146px 로 66px 넘쳤다. 제목 위 여백·카드 안쪽 여백·[이전] 위 여백을 줄인다. */
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > .pia-h1{ margin-top:6px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > .pia-sec--qa{ padding-top:10px !important; padding-bottom:10px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-sec--qa .pia-fab{ margin-top:max(10px,1.6vh) !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-sec--qa .pia-choice{ min-height:max(56px,7vh) !important; padding-top:4px !important; padding-bottom:4px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-sec--qa .pia-fab .pia-btn{ min-height:max(56px,7vh) !important; }
  /* 보기가 6개인 문항(WHO-5)은 1600x900 에서 68px 넘쳤다 — 보기 높이를 더 줄인다(터치 기준 44px 이상 유지). */
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-choices:has(.pia-choice:nth-child(6)) .pia-choice{ min-height:max(46px,5.4vh) !important; height:max(46px,5.4vh) !important; padding-top:2px !important; padding-bottom:2px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > .pia-topbar{ margin-bottom:0 !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > .pia-prog{ margin-bottom:6px !important; }
  /* 동의 화면: 가로 프로필에서는 카드가 문항용 2단 격자로 잡혀 [동의하고 계속하기]가 격자 칸에 갇혀 있었다
     (1920x1080 에서 y1199, 화면 밖). 한 덩어리로 풀고 동의 항목만 2단으로 놓는다. */
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta){ display:block !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-consent__list{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:4px; margin-top:8px; }
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-check--all{ margin-bottom:4px !important; }
  /* 다루는 화면의 내용 묶음(.pia)은 넓힌 폭을 다 쓰고 가운데에 둔다. */
  html.kiosk-on .max-w-6xl:has(.pia-hero--v2) .pia,
  html.kiosk-on .max-w-6xl:has(.pia-setup__steps) .pia,
  html.kiosk-on .max-w-6xl:has(.pia-ask) .pia{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; }
  /* 동의·정보 입력: 넓은 가로 화면(폭 1,080px 이상)은 세로형 키오스크 크기 토큰을 그대로 받아
     항목 한 줄이 80~96px 였다(1600x900 에서 동의 1,118px · 정보 입력 1,264px). 높이에 맞춰 줄인다. */
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-check{ min-height:max(44px,5.4vh) !important; padding-top:4px !important; padding-bottom:4px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-consent__more{ margin-top:0 !important; margin-bottom:2px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-consent__more summary{ min-height:0 !important; padding:2px 0 !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-note{ margin-top:6px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-sec--qa .pia-in,
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-sec--qa select{ min-height:max(52px,6.2vh) !important; height:auto !important; padding-top:4px !important; padding-bottom:4px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-sec--qa .pia-btn--secondary{ min-height:max(52px,6.2vh) !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-sec--qa .pia-label{ margin-bottom:2px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-sec--qa .pia-hint{ margin-bottom:4px !important; line-height:1.25 !important; }
  /* 정보 입력 아래의 음성 안내 권유 띠는 위쪽 [음성 안내] 버튼과 같은 기능이라 가로 화면에서는 접는다. */
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps ~ .pia-help{ display:none !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__hd .pia-bodyL{ display:none !important; }
  /* 화면 묶음의 위아래 여백(16+8px) 때문에 6px 넘쳐 세로 스크롤이 생겼다. */
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-setup__steps),
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-ask),
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-choices){ padding-top:6px !important; padding-bottom:0 !important; }
  /* 카드의 최소 높이(화면 - 75px)에 위 여백이 더해져 문서가 6px 길어졌다 — 내용 높이만큼만 차지하게 한다. */
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-setup__steps) > section,
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-ask) > section,
  html.kiosk-on[class] body.pia-v2[class] .max-w-6xl:has(.pia-choices) > section{ min-height:0 !important; margin-top:0 !important; }
}
/* 가로 키오스크 넓은 화면(폭 1,280px 이상): 동의 항목 5개를 3단으로 놓아 두 줄에 담는다. */
@media (orientation:landscape) and (min-width:1280px){
  html.kiosk-on[class] body.pia-v2[class] .pia-sec--qa:has(#pia-consent-cta) .pia-consent__list{ grid-template-columns:repeat(3,1fr); }
}
/* 가로 키오스크 넓은 화면(폭 1,080px 이상)은 머리말이 더 높다 — 대화 화면 틀 높이를 그만큼 더 뺀다. */
@media (orientation:landscape) and (min-width:1080px){
  html.kiosk-on .pia:has(> .pia-ask){ height:calc(100vh - 57px - 50px); }
}
/* 가로 키오스크 중간 높이(1600x900 등: 폭 1,080px 이상 · 높이 960px 이하): 5지선다 문항이 52px 넘쳤다.
   "필수 검사 n/3" 배지 줄을 접고 보기 사이 간격을 줄인다(진행 상황은 바로 아래 문항 번호·막대에 그대로 있다). */
@media (orientation:landscape) and (min-width:1080px) and (max-height:960px){
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > div:has(> .pia-badge){ display:none !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-choices{ gap:6px !important; }
  /* 정보 입력도 이 높이에서 6px 넘쳤다 — 단계 표시 위아래 여백을 줄인다. */
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__steps{ margin:0 0 2px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-setup__hd{ margin-bottom:2px !important; }
}
/* 긴 화면 쪽 넘김 버튼(결과지·도움받기): 가로 키오스크에서 문서가 화면보다 길 때만 오른쪽 가장자리에 뜬다. */
.pia-flip{ display:none; }
@media (orientation:landscape){
  html.kiosk-on .pia-flip.on{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:9990;
  }
  html.kiosk-on .pia-flip__b{
    width:max(64px,8.4vh); height:max(64px,8.4vh); border-radius:50%;
    border:2px solid var(--pia-primary, #246BEB); background:#fff; color:var(--pia-primary-dark, #1D56BC);
    font-size:max(26px,3.4vh); font-weight:700; line-height:1; cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  html.kiosk-on .pia-flip__b:disabled{ opacity:.35; box-shadow:none; }
  /* 버튼이 내용 오른쪽 끝(화살표·별점)을 가리지 않게 그만큼 비운다. */
  html.kiosk-on body:has(.pia-flip.on) .max-w-6xl{ padding-right:max(88px,11vh) !important; }
  html.kiosk-on .pia-flip__n{
    font-size:max(18px,2.4vh); font-weight:700; color:#1d2530; background:rgba(255,255,255,.92);
    border-radius:999px; padding:2px 10px; white-space:nowrap;
  }
}
@media print{ .pia-flip{ display:none !important; } }

/* [2026-10-10] 휴대폰(760px 이하 화면) 결과지 — 넘침·글자 크기 보정. 규칙만 추가했다.
   · 390px 에서 '내 결과 물어보기' 입력칸(flex-1)이 기본 최소 폭(min-width:auto)을 지켜
     '질문' 버튼을 4px 밖으로 밀어 가로 스크롤이 생겼다 → 입력칸 min-width:0, 버튼은 줄지 않게.
   · 16px 미만 글자가 90% 가까이였다. 본문·라벨·버튼 16px, 보조 문구 14px 하한.
     제목(.pia-sum__t·안내 제목)은 본문보다 한 단계 크게 두어 비율을 지킨다.
   · 결과지 대상 버튼(학생·학부모·선생님)이 커지면 한 줄에 안 들어가므로 그 줄만 줄바꿈을 허용한다.
   · screen 한정(인쇄 용지 폭 제외), 키오스크(html.kiosk-on) 제외. */
@media screen and (max-width:760px){
  html:not(.kiosk-on) #qa-input{min-width:0}
  html:not(.kiosk-on) #qa-send{flex:none}
  /* .pia-bodyL·.pia-top3__t 는 var(--pia-f-bodyL)(!important)로 크기를 정하므로 변수만 바꾼다. */
  html:not(.kiosk-on) .pia-rhero .pia-bodyL{--pia-f-bodyL:16px}
  html:not(.kiosk-on) .pia-top3__t{--pia-f-bodyL:17px}
  html:not(.kiosk-on) .pia-ai__lab, html:not(.kiosk-on) .pia-sum__w, html:not(.kiosk-on) .pia-top3__st{font-size:16px}
  html:not(.kiosk-on) .pia-sum__t{font-size:17px}
  html:not(.kiosk-on) #pia-result-head .pia-cap{--pia-f-cap:14px}
  html:not(.kiosk-on) .pia-tools .flex.items-center.gap-2, html:not(.kiosk-on) .pia-tools [role=tablist]{flex-wrap:wrap}
  html:not(.kiosk-on) .pia-tools .text-xs{font-size:14px}
  html:not(.kiosk-on) .pia-tools .aud-btn, html:not(.kiosk-on) .pia-tools button[id^="result-"]{font-size:16px}
  html:not(.kiosk-on) #audience-guide h3{font-size:17px}
  html:not(.kiosk-on) #audience-guide .text-sm, html:not(.kiosk-on) #audience-guide h4{font-size:16px}
  html:not(.kiosk-on) .from-sky-50.to-emerald-50 .text-sm{font-size:16px}
  html:not(.kiosk-on) .from-sky-50.to-emerald-50 .text-xs{font-size:14px}
  html:not(.kiosk-on) #service-hub h3{font-size:16px}
  html:not(.kiosk-on) #service-hub .text-xs{font-size:14px}
  html:not(.kiosk-on) #service-hub .flex-wrap > .flex.items-center.text-xs{font-size:16px}
  html:not(.kiosk-on) #service-hub button.bg-sky-600{font-size:16px}
}

/* ============================================================================
   [2026-10-21 kiosk portrait UI] C5/C6 - ONLY html.kiosk-on in portrait (1080x1920 kiosk).
   Phone / PC / landscape kiosk are untouched (every rule is inside the media query + html.kiosk-on).
   Design tokens are reused as-is (same colors/fonts); only size, spacing and contrast change.
   C5: mic button is neutral (not red) until recording; red only while recording (.bg-red-700).
   C6: text >= 26px, touch targets >= 64px, AA contrast, fill the empty lower area of choice screens.
   ============================================================================ */
@media (orientation:portrait){
  /* C5 - idle mic button: neutral surface, never a permanent red bar */
  html.kiosk-on #chat-mic{ background:#fff !important; color:#1d56bc !important; border:2px solid #246beb !important; box-shadow:none !important; min-height:72px !important; gap:12px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:max(26px,1.4vh) !important; font-weight:700 !important; }
  html.kiosk-on #chat-mic svg{ width:1.5em !important; height:1.5em !important; flex:none !important; }
  /* recording state keeps the red cue, only while the class is present */
  html.kiosk-on #chat-mic.bg-red-700{ background:#b91c1c !important; color:#fff !important; border-color:#b91c1c !important; }
  html.kiosk-on #chat-mic-status:empty{ display:none !important; }
  html.kiosk-on #chat-mic-status{ font-size:max(26px,1.4vh) !important; color:#3f4a56 !important; }
  /* voice-start modal CTA keeps its colour but gets a real icon box and a bigger target */
  html.kiosk-on #mobile-voice-modal button{ min-height:72px !important; font-size:28px !important; }
  html.kiosk-on #mobile-voice-modal p{ font-size:26px !important; color:#3f4a56 !important; }
  html.kiosk-on #mobile-voice-modal h2{ font-size:36px !important; }

  /* C6 - contrast: disabled/secondary buttons and helper text reach WCAG AA (>= 4.5:1) */
  html.kiosk-on[class] body.pia-v2[class] .pia-btn[disabled],
  html.kiosk-on[class] body.pia-v2[class] .pia-btn:disabled,
  html.kiosk-on[class] body.pia-v2[class] .pia-btn[aria-disabled="true"]{ background:#e3e7ec !important; color:#4a5561 !important; border-color:#b8c1cc !important; opacity:1 !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-btn{ min-height:72px !important; font-size:max(30px,1.6vh) !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-autonext,
  html.kiosk-on[class] body.pia-v2[class] .pia-cap,
  html.kiosk-on[class] body.pia-v2[class] .pia-note,
  html.kiosk-on[class] body.pia-v2[class] .pia-hint,
  html.kiosk-on[class] body.pia-v2[class] .pia-chat-note,
  html.kiosk-on[class] body.pia-v2[class] .pia-who__sub{ font-size:max(26px,1.4vh) !important; color:#3f4a56 !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-prog__pct,
  html.kiosk-on[class] body.pia-v2[class] .pia-badge{ font-size:max(28px,1.5vh) !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-who__nm,
  html.kiosk-on[class] body.pia-v2[class] .pia-who__av{ font-size:max(26px,1.4vh) !important; }

  /* C6 - selection chips / choices: big targets, readable text, AA border */
  html.kiosk-on[class] body.pia-v2[class] .pia-choice,
  html.kiosk-on[class] body.pia-v2[class] .pia-chip{ font-size:max(32px,1.7vh) !important; border-color:#7b8794 !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia-choice__txt{ font-size:max(32px,1.7vh) !important; color:#141413 !important; }

  /* C6 - choice screens (Likert / personality / interest): use the empty lower area */
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-choices{ gap:18px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-sec--qa .pia-choice{ min-height:max(150px,8.2vh) !important; padding-top:14px !important; padding-bottom:14px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-choices:has(.pia-choice:nth-child(6)) .pia-choice{ min-height:max(104px,6.2vh) !important; height:auto !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) > .pia-sec--qa{ padding-top:36px !important; padding-bottom:36px !important; }
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-q,
  html.kiosk-on[class] body.pia-v2[class] .pia:has(> .pia-sec--qa > .pia-choices) .pia-h2{ font-size:max(44px,2.5vh) !important; line-height:1.35 !important; margin-bottom:28px !important; }

  /* C6 - '????' home button */
  html.kiosk-on #kiosk-home-btn{ min-height:64px !important; font-size:30px !important; }
}