/* ============================================================
   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);
}