/* responsive fluid font tokens - clamp scale (additive, final override) */
:root{
  --pia-f-display:clamp(26px,3.4vw,34px);
  --pia-f-h1:clamp(24px,3.2vw,32px);
  --pia-f-h2:clamp(20px,2.6vw,26px);
  --pia-f-h3:clamp(18px,2.2vw,22px);
  --pia-f-q:clamp(19px,2.4vw,24px);
  --pia-f-bodyL:clamp(16px,1.9vw,19px);
  --pia-f-body:clamp(15px,1.7vw,17px);
  --pia-f-btn:clamp(16px,1.9vw,19px);
  --pia-f-input:clamp(16px,1.7vw,17px);
  --pia-f-cap:clamp(13px,1.5vw,15px);
  --pia-f-badge:clamp(13px,1.5vw,15px);
}

.pia-ask{background:var(--pia-primary-light)!important;border-color:var(--pia-primary-border)!important;}.pia-ask__who{background:#fff!important;}.pia-ask__bot .pia-bot,.pia-ask__bot img{width:100%;height:auto;}

/* 히어로 여우 — 배경 도형 없이 마스코트만.
   ※ 단위 규약: var(--krds-u) 는 1080폭에서 1.5px. 시안 실측 px 은 /1.5 해서 넣는다.
   시안 345x485 → 토큰 229x323 (원본 876x1237 비율 0.708 유지).
   width 를 auto 로 두면 안 된다: img 에 loading="lazy" 가 있어 계산 폭이 0 이 되고
   로드가 영영 지연된다. */
.pia-hero__bot{ position:relative; background:none !important; }
.pia-hero__bot::before,
.pia-hero__bot::after{ content:none !important; }
.pia-hero__bot img{
  position:relative;
  height:calc(323 * var(--krds-u)) !important;
  width:calc(229 * var(--krds-u)) !important;
  object-fit:contain;
}


/* 단계 이름은 아이콘·번호와 함께 읽히는 라벨이라 700 은 과하다. 600 으로 낮춘다. */
.pia-step__t{ font-weight:600 !important; }

/* 필수 검사 다시하기 — 파괴적 동작이므로 눈에 띄되 1차 버튼을 이기지는 않게.
   중립 회색 외곽선 + 본문 색. 시안의 '이전 검사 결과 보기'와 같은 무게감. */
.pia-restart{
  display:flex; align-items:center; justify-content:center;
  gap:calc(6 * var(--krds-u));
  margin:calc(20 * var(--krds-u)) auto 0;
  padding:calc(9 * var(--krds-u)) calc(18 * var(--krds-u));
  background:#fff; border:1px solid #E0E4EA;
  border-radius:var(--pia-r-pill, 999px);
  font:inherit; font-size:var(--krds-body-small); font-weight:600;
  color:#4A5361; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.pia-restart svg{ width:1.15em; height:1.15em; flex-shrink:0; }
.pia-restart:hover{ border-color:#246BEB; color:#246BEB; }
.pia-restart:focus-visible{ outline:2px solid #246BEB; outline-offset:2px; }


/* 검사 화면 상단 줄: 왼쪽 '← 홈', 오른쪽 학생 칩 */
.pia-topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--pia-s2); }
.pia-topbar .pia-back{ margin-bottom:0; }
.pia-who{
  display:inline-flex; align-items:center; gap:calc(6 * var(--krds-u));
  max-width:60%; padding:calc(5 * var(--krds-u)) calc(11 * var(--krds-u)) calc(5 * var(--krds-u)) calc(5 * var(--krds-u));
  background:#F4F5F6; border-radius:999px;
  font-size:var(--krds-body-small); color:#4A5361; line-height:1.4; overflow:hidden;
}
.pia-who__av{
  width:calc(22 * var(--krds-u)); height:calc(22 * var(--krds-u)); flex-shrink:0;
  border-radius:50%; background:#EAF1FE; color:#246BEB;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--krds-body-small);
}
.pia-who__nm{ font-weight:600; color:#141413; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pia-who__sub{ color:#6D7882; white-space:nowrap; }
/* 홈에서는 어떤 경우에도 뜨지 않는다 */
section[data-view="home"] .pia-who{ display:none !important; }
/* 옛 프로필 바가 캐시로 남아 있어도 보이지 않게 */
#profile-bar{ display:none !important; }


/* '검사 새로 시작하기' — 단체 검사 시작 자리를 그대로 물려받되,
   앞 학생 데이터를 지우는 파괴적 동작이라 파랑 대신 중립 회색으로 둔다.
   '검사 시작하기'(1차)와 헷갈려 잘못 누르는 일을 줄이기 위해서다.
   기존 pia-group-btn 의 절대배치 태그 규칙(.pia-group-btn__tag)은 쓰지 않으므로
   가운데 정렬은 flex 기본값 그대로 맞는다. */
.pia-group-btn--reset{ border-color:#E0E4EA; }
.pia-group-btn--reset:hover{ border-color:#246BEB; background:#F7FAFF; }
.pia-group-btn--reset .pia-group-btn__t{ flex:0 0 auto; }
.pia-group-btn__ic{
  display:inline-flex; align-items:center; color:#6D7882;
  margin-right:calc(6 * var(--krds-u));
}
.pia-group-btn__ic svg{ width:1.15em; height:1.15em; }
.pia-group-btn--reset:hover .pia-group-btn__ic{ color:#246BEB; }


/* 선택 검사 카테고리(.pia-cat) = '나의 강점' 모달의 검사 행(.pia-titem) 과 같은 모양.
   두 화면이 하는 일이 같은데(고르는 목록) 생김새만 달라 어색했다.
   px 을 베끼지 않고 .pia-titem 이 쓰는 토큰을 그대로 쓴다 — 그래야 폭이 달라져도 같이 간다. */
.pia-cat{
  gap:var(--pia-s3) !important;          /* 기존 --pia-s2 보다 넓게, titem 과 동일 */
  align-items:center !important;
}
/* 아이콘: titem 과 같은 2.6em 원형 + 파랑 틴트 */
.pia-cat__ic{
  width:2.6em !important; height:2.6em !important; flex-shrink:0;
  font-size:var(--pia-f-body) !important;
  border-radius:50% !important;
  background:var(--pia-primary-light) !important;
  color:var(--pia-primary) !important;
  display:flex !important; align-items:center; justify-content:center;
}
.pia-cat__ic svg{ width:1.15em; height:1.15em; }
.pia-cat__tx{ flex:1 1 auto; min-width:0; }

/* 우측: 모달의 파란 '시작' 알약(.pia-titem__st)과 같은 규격.
   여기서는 검사를 켜는 게 아니라 목록을 여는 것이라 글자는 '보기'. */
.pia-cat__ar{
  flex-shrink:0;
  font-size:0 !important; line-height:1 !important;
  background:var(--pia-primary) !important; color:#fff !important;
  border-radius:var(--pia-r-pill, 999px);
  padding:6px var(--pia-s2);
  display:inline-flex; align-items:center;
}
.pia-cat__ar::after{
  content:"보기";
  font-size:var(--pia-f-cap);
  font-weight:700;
  line-height:1.5;
}
.pia-cat:hover .pia-cat__ar{ background:var(--pia-primary-dark, #1D56BC) !important; }


/* 안내 배너 — 시안은 왼쪽에 여우가 배너 위아래로 걸쳐 나온다.
   img 를 넣지 않고 배경으로 그린다: 문구 길이가 달라져도 위치가 흔들리지 않고,
   화면 낭독기에는 잡히지 않는다(장식이므로 그게 맞다). */
.pia-note--card{
  position:relative;
  padding-left:calc(96 * var(--krds-u)) !important;
  min-height:calc(58 * var(--krds-u));
  display:flex; align-items:center; gap:calc(8 * var(--krds-u));
  background:#EDF3FE !important;
  border:1px solid #D3E1FB !important;
  border-radius:calc(8 * var(--krds-u));
}
.pia-note--card::before{
  content:"";
  position:absolute; left:calc(6 * var(--krds-u)); bottom:0;
  width:calc(74 * var(--krds-u)); height:calc(74 * var(--krds-u));
  background:var(--pia-note-fox, url("/images/pia-fox-hero.webp?v=5")) no-repeat center bottom;
  background-size:contain;
  pointer-events:none;
}
.pia-note--card svg{ flex-shrink:0; color:#246BEB; }

/* 하단 자동 진행 안내 */
.pia-autonext{
  display:flex; align-items:center; justify-content:center;
  gap:calc(6 * var(--krds-u));
  margin-top:calc(16 * var(--krds-u));
  font-size:var(--krds-body-small);
  color:#6D7882;
}
.pia-autonext svg{ width:1.15em; height:1.15em; flex-shrink:0; color:#6D7882; }


/* 입력 상자 + 마이크/보내기 2열 (시안 AIPIA-02) */
.pia-say--v2{ display:block !important; }
.pia-say--v2 .pia-say__in{
  width:100%; display:block; resize:none;
  min-height:calc(64 * var(--krds-u));
  padding:calc(12 * var(--krds-u)) calc(14 * var(--krds-u));
  line-height:1.5;
}
/* 마이크 버튼을 입력창 밖으로 꺼내 '답변 보내기'와 나란히 둔다.
   실제 2열 묶음은 아래 .pia-chat-actions 가 만든다(JS 없이 CSS grid 로). */
.pia-say--v2 .pia-say__mic{
  position:static !important;
  width:100%; margin-top:calc(10 * var(--krds-u));
  min-height:var(--pia-touch-cta, 3.2em);
  border-radius:calc(9.3 * var(--krds-u));
  justify-content:center;
}
/* 하단 안내 배너 */
.pia-chat-note{
  display:flex; align-items:center; justify-content:center;
  gap:calc(6 * var(--krds-u));
  margin-top:calc(16 * var(--krds-u));
  padding:calc(10 * var(--krds-u)) calc(14 * var(--krds-u));
  background:#EDF3FE; border:1px solid #D3E1FB;
  border-radius:calc(8 * var(--krds-u));
  font-size:var(--krds-body-small); color:#1D56BC;
}
.pia-chat-note svg{ width:1.2em; height:1.2em; flex-shrink:0; }

/* 대화 진행 표시가 게이지 아래에 '4 / 12 턴' 으로 한 번 더 나와 중복이었다.
   게이지 위 숫자만 남긴다. */
.pia-prog + .pia-cap[aria-live], .pia-turnmeta{ display:none !important; }


.pia-done{ text-align:center; }
/* 파란 체크 원 + 오른쪽 아래 여우 (시안 AIPIA-03) */
.pia-done__mark{ position:relative; width:calc(120 * var(--krds-u)); height:calc(120 * var(--krds-u)); margin:0 auto calc(16 * var(--krds-u)); }
.pia-done__ck{
  position:absolute; inset:0; border-radius:50%;
  background:#246BEB; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(56 * var(--krds-u)); line-height:1; font-weight:700;
}
.pia-done__fox{
  position:absolute; right:calc(-46 * var(--krds-u)); bottom:calc(-6 * var(--krds-u));
  width:calc(76 * var(--krds-u)); height:auto;
}
.pia-done__t{ font-size:var(--krds-heading-large); font-weight:700; color:#141413; margin:0 0 calc(6 * var(--krds-u)); }
.pia-done__sub{ font-size:var(--krds-heading-medium); font-weight:600; color:#246BEB; margin:0 0 calc(10 * var(--krds-u)); }
.pia-done__d{ font-size:var(--krds-body-medium); color:#464C53; margin:0 0 calc(20 * var(--krds-u)); }

/* '필수 검사 N/3 완료' 구분선 */
.pia-done__hr{ position:relative; margin:calc(20 * var(--krds-u)) 0; }
.pia-done__hr::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#E0E4EA; }
.pia-done__hr span{ position:relative; background:#fff; padding:0 calc(12 * var(--krds-u)); font-size:var(--krds-body-small); color:#6D7882; }

/* 3단계 진행 표시 */
.pia-dsteps{ display:flex; justify-content:center; gap:calc(10 * var(--krds-u)); margin-bottom:calc(20 * var(--krds-u)); }
.pia-dstep{ display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--krds-u)); flex:1; min-width:0; }
.pia-dstep__n{
  width:calc(36 * var(--krds-u)); height:calc(36 * var(--krds-u)); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--krds-body-small);
}
.pia-dstep__t{ font-size:var(--krds-body-small); color:#6D7882; word-break:keep-all; }
.pia-dstep--done .pia-dstep__n{ background:#246BEB; color:#fff; }
.pia-dstep--done .pia-dstep__t{ color:#141413; }
.pia-dstep--now  .pia-dstep__n{ background:#fff; color:#246BEB; border:2px solid #246BEB; }
.pia-dstep--now  .pia-dstep__t{ color:#246BEB; font-weight:600; }
.pia-dstep--lock .pia-dstep__n{ background:#F4F5F6; color:#9AA5B4; }

.pia-done .pia-btn{ margin-bottom:calc(10 * var(--krds-u)); }
.pia-done__auto{ font-size:var(--krds-body-small); color:#6D7882; margin-top:calc(6 * var(--krds-u)); }


/* 대화 완료 화면은 대화 스크롤 영역 안에 들어가므로,
   그 안에서는 카드 여백·배경을 지우고 화면처럼 보이게 한다. */
.pia-chatdone{ width:100%; }
.pia-chatdone .pia{ padding:0 !important; }
.pia-chatdone .pia-sec{ border:0 !important; background:transparent !important; padding:calc(12 * var(--krds-u)) 0 !important; }
.pia-chatdone .pia-done__hr span{ background:var(--pia-bg, #fff); }


/* KRDS display-medium (50u = 1080폭 75px). display-large 90px 는 제목이 길어져 여우와 겹쳤다. */
:root{ --krds-display-medium: calc(50 * var(--krds-u)); }
body.pia-v2 .pia-hero .pia-display{ font-size:var(--krds-display-medium) !important; }


/* ===== 결과지 표지 (시안) — 기준색 #d97757, 틴트 #f6e9e2 ===== */
#pia-report .cover-title-main{ color:#d97757 !important; letter-spacing:-.02em; }
#pia-report .cover-title-sub{ color:#5B6472 !important; }
#pia-report .cover-badge{
  background:#f6e9e2 !important; color:#b04928 !important; /* 글자 #d97757 2.63 → #b04928 4.61 (2026-09-27 1.4.3) */
  box-shadow:none !important; font-weight:700;
}
#pia-report .cover-info-box{ border:1px solid #EEDFD2 !important; box-shadow:none !important; }

/* 체크 원 + 여우.
   여우가 .cover-mark(76px) 밖으로 나가 잘렸으므로 높이를 넉넉히 준다. */
#pia-report .cover-mark{ position:relative; width:100%; height:132px; margin:0 auto 8px; }
#pia-report .cover-mark__ck{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%;
  background:#d97757; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 10px #f6e9e2;
}
#pia-report .cover-mark__ck svg{ width:28px; height:28px; }
#pia-report .cover-mark__fox{
  position:absolute; right:4px; top:0; width:150px; height:auto; display:block;
}

/* 정보표 — 아이콘 원을 배경으로 깐다.
   ::after 로 그리면 글자보다 나중에 칠해져 라벨을 덮는다(실제로 덮였다). */
#pia-report .cover-info-box td.lbl{
  position:relative; text-align:left !important;
  padding-left:56px !important; width:38%;
  border-right:1px solid #EEDFD2;
  background-repeat:no-repeat, no-repeat;
  background-position:15px center, left center;
  background-size:18px 18px, auto;
}
#pia-report .cover-info-box td.val{ text-align:left !important; padding-left:22px !important; }
#pia-report .cover-info-box tr:nth-child(1) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.6'/><path d='M4.5 20.5c0-3.9 3.3-6.3 7.5-6.3s7.5 2.4 7.5 6.3'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }
#pia-report .cover-info-box tr:nth-child(2) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V9l8-5 8 5v12'/><path d='M9 21v-6h6v6'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }
#pia-report .cover-info-box tr:nth-child(3) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m2 8 10-4 10 4-10 4z'/><path d='M6 10.5V15c0 1.7 2.7 3 6 3s6-1.3 6-3v-4.5'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }
#pia-report .cover-info-box tr:nth-child(4) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='16' rx='2'/><path d='M8 3v4M16 3v4M3.5 10h17'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }
#pia-report .cover-info-box tr:nth-child(5) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='16' rx='2'/><path d='M8 3v4M16 3v4M3.5 10h17'/><path d='m9 15 2 2 4-4'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }
#pia-report .cover-info-box tr:nth-child(6) td.lbl{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3.5' width='16' height='17' rx='2'/><path d='M9 8h2M13 8h2M9 12h2M13 12h2M9 16h6'/></svg>"), radial-gradient(circle at 24px center, %23f6e9e2 0 18px, rgba(0,0,0,0) 18px); }

/* 하단 주의 카드 */
#pia-report .cover-guard{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; padding:12px 16px;
  background:#F5F7FB; border-radius:10px;
  font-size:11.5px; color:#5B6472; line-height:1.7;
}
#pia-report .cover-guard__ic{ display:inline-flex; color:#d97757; }
#pia-report .cover-guard__ic svg{ width:16px; height:16px; }

@media print{
  #pia-report .cover-mark__ck{ box-shadow:none; border:6px solid #f6e9e2; }
  #pia-report .cover-info-box td.lbl{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* 표지를 한 페이지에 꽉 채운다.
   앞선 패치의 .cover-wrap{min-height:0!important;height:auto!important} 를
   되돌려야 하므로 #pia-report 를 앞에 붙여 특이도를 올린다. */
#pia-report .page#p-cover{
  display:flex; align-items:stretch;
  min-height:257mm;                    /* A4 297mm - 상하 여백 */
  padding:14mm 12mm !important;
  box-sizing:border-box;
}
#pia-report .page#p-cover .cover-wrap{
  flex:1 1 auto; width:100%;
  min-height:0 !important; height:auto !important;
  display:flex !important; flex-direction:column; justify-content:space-between;
  gap:0;
}
/* 위 묶음(마크·제목·배지) / 가운데(안내·정보표) / 아래(주의문) 세 덩이로 편다 */
#pia-report .page#p-cover .cover-mark{ margin-bottom:10px; }
#pia-report .page#p-cover .cover-title-main{ font-size:40px; margin-bottom:10px; }
#pia-report .page#p-cover .cover-title-sub{ font-size:19px; margin-bottom:18px; }
#pia-report .page#p-cover .cover-badge{ margin-bottom:0; }

/* 정보표를 페이지 폭에 맞춰 넓히고 행 높이를 키워 빈 공간을 메운다 */
#pia-report .page#p-cover .cover-info-box{ width:100%; margin:0 auto; }
#pia-report .page#p-cover .cover-info-box table{ width:100%; }
#pia-report .page#p-cover .cover-info-box td{ padding:16px 18px !important; font-size:18px; }
#pia-report .page#p-cover .cover-info-box tr + tr td{ border-top:1px solid #EEF2F8; }
#pia-report .page#p-cover #rep-grade-banner{ max-width:none !important; margin:0 0 18px !important; }
#pia-report .page#p-cover .cover-guard{ margin-top:0; }

/* 여우는 페이지가 넓어졌으니 조금 키운다 */
#pia-report .page#p-cover .cover-mark__fox{ width:150px; right:0; top:-14px; }

/* 인쇄 여백은 다른 모든 .page 와 같은 공통 규칙(14mm 13mm)을 그대로 쓴다.
   표지만 따로 12mm 10mm 를 얹었더니 다른 쪽보다 여백이 좁아 정렬이 어긋났다. */
@media print{
  #pia-report .page#p-cover{ min-height:0; height:auto; }
}


/* 상단 줄 가운데 화면 이름 (시안). 뒤로가기·학생칩과 같은 줄. */
.pia-topbar{ position:relative; }
.pia-topbar__t{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:var(--krds-heading-medium); font-weight:700; color:#141413;
  white-space:nowrap; pointer-events:none;
}
@media (max-width:719px){ .pia-topbar__t{ display:none; } }

/* 제목 줄 + 우측 음성 토글 */
.pia-titlerow{ display:flex; align-items:flex-start; gap:var(--pia-s3); }
.pia-titlerow__tx{ flex:1 1 auto; min-width:0; }
.pia-ttsbtn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:calc(6 * var(--krds-u));
  padding:calc(10 * var(--krds-u)) calc(14 * var(--krds-u));
  background:#fff; border:1px solid #DCE6F7; border-radius:calc(9 * var(--krds-u));
  font:inherit; font-size:var(--krds-body-small); font-weight:600; color:#246BEB;
  cursor:pointer; white-space:nowrap;
}
.pia-ttsbtn svg{ width:1.25em; height:1.25em; }
.pia-ttsbtn[aria-pressed="false"]{ color:#6D7882; border-color:#E0E4EA; }
.pia-ttsbtn:hover{ border-color:#246BEB; }

/* 여우 + 말풍선 카드 */
.pia-ask{ border:1px solid #E5EAF2 !important; border-radius:calc(12 * var(--krds-u)); }
.pia-ask__tx .pia-q{
  position:relative; background:#EEF2F8; border-radius:calc(12 * var(--krds-u));
  padding:calc(16 * var(--krds-u)) calc(18 * var(--krds-u));
}
.pia-ask__tx .pia-q::before{
  content:""; position:absolute; left:calc(-7 * var(--krds-u)); top:calc(22 * var(--krds-u));
  width:0; height:0;
  border-top:calc(7 * var(--krds-u)) solid transparent;
  border-bottom:calc(7 * var(--krds-u)) solid transparent;
  border-right:calc(8 * var(--krds-u)) solid #EEF2F8;
}

/* 빠른답변 칩 — 왼쪽에 아이콘 자리 */
.pia-qk__b{ display:inline-flex; align-items:center; gap:calc(7 * var(--krds-u)); }
.pia-qk__b::before{
  content:""; width:1.5em; height:1.5em; flex-shrink:0;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23246BEB' stroke-width='1.7'><circle cx='12' cy='12' r='9'/><path d='M9.2 15.2a4 4 0 0 1 5.6 0' stroke-linecap='round'/><circle cx='9' cy='10' r='.8' fill='%23246BEB'/><circle cx='15' cy='10' r='.8' fill='%23246BEB'/></svg>");
}
.pia-qk__help{
  margin-top:calc(10 * var(--krds-u));
  font-size:var(--krds-body-small); color:#6D7882;
}

/* 마이크 / 답변 보내기 2열 */
.pia-say--v2{ display:block !important; }
.pia-say--v2 .pia-say__in{
  width:100%; display:block; resize:none;
  min-height:calc(72 * var(--krds-u));
  padding:calc(12 * var(--krds-u)) calc(14 * var(--krds-u));
  line-height:1.5;
}
.pia-say--v2 .pia-say__mic{
  position:static !important;
  width:calc(50% - 5 * var(--krds-u));
  float:left; margin-top:calc(10 * var(--krds-u));
  min-height:var(--pia-touch-cta, 3.2em);
  border-radius:calc(9.3 * var(--krds-u));
  justify-content:center;
}
.pia-sendrow{ margin-top:calc(10 * var(--krds-u)); overflow:hidden; }
.pia-sendrow .pia-btn{ width:calc(50% - 5 * var(--krds-u)); float:right; }

/* 하단 안내 배너 */
.pia-chat-note{
  clear:both;
  display:flex; align-items:center; justify-content:center;
  gap:calc(6 * var(--krds-u));
  margin-top:calc(16 * var(--krds-u));
  padding:calc(11 * var(--krds-u)) calc(14 * var(--krds-u));
  background:#EDF3FE; border:1px solid #D3E1FB;
  border-radius:calc(8 * var(--krds-u));
  font-size:var(--krds-body-small); color:#1D56BC;
}
.pia-chat-note svg{ width:1.2em; height:1.2em; flex-shrink:0; }

/* 하단 — 이용 도움은 한 줄 행, 검사 종료하기는 외곽선 버튼 */
section[data-view="chat"] .pia-fab{
  display:block !important; border-top:1px solid #E5EAF2;
  padding-top:calc(14 * var(--krds-u));
}
section[data-view="chat"] .pia-fab .pia-btn{ width:100%; }
section[data-view="chat"] .pia-fab .pia-btn:first-child{
  justify-content:flex-start; color:#246BEB; font-weight:600;
  padding-left:0; margin-bottom:calc(10 * var(--krds-u)); position:relative;
}
section[data-view="chat"] .pia-fab .pia-btn:first-child::after{
  content:"›"; position:absolute; right:calc(4 * var(--krds-u)); color:#9AA5B4;
}
section[data-view="chat"] .pia-fab .pia-btn:last-child{
  border:1px solid #E0E4EA !important; color:#4A5361 !important;
  border-radius:calc(9.3 * var(--krds-u));
  min-height:var(--pia-touch-cta, 3.2em);
}


/* 말풍선 — 문항용 큰 글씨(.pia-q)를 쓰고 있어 과했다. 본문 크기로. */
section[data-view="chat"] .pia-ask__tx .pia-q{
  font-size:var(--krds-body-large) !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  text-align:left !important;
}
/* 'AI PIA' 알약은 시안에 없다 */
section[data-view="chat"] .pia-ask__who{ display:none !important; }
/* 여우는 시안처럼 크게 */
section[data-view="chat"] .pia-ask__bot{
  width:calc(96 * var(--krds-u)) !important; flex:0 0 auto; align-self:center;
}
section[data-view="chat"] .pia-ask__bot img{ width:100%; height:auto; }
section[data-view="chat"] .pia-ask{ align-items:center; }

/* 칩 아이콘은 원래 것(.pia-qk__ic)이 있으므로 내가 넣은 것은 뺀다 */
.pia-qk__b::before{ content:none !important; }

/* 마이크 / 답변 보내기 — 한 줄 2열 */
.pia-sendrow{
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:calc(10 * var(--krds-u)); margin-top:calc(12 * var(--krds-u));
  overflow:visible;
}
.pia-sendrow > *{ width:auto !important; float:none !important; margin:0 !important; }
.pia-sendrow .pia-say__mic,
.pia-sendrow .pia-btn{
  min-height:var(--pia-touch-cta, 3.2em);
  border-radius:calc(9.3 * var(--krds-u));
  display:inline-flex; align-items:center; justify-content:center;
  gap:calc(7 * var(--krds-u));
}
.pia-sendrow .pia-say__mic{
  background:#fff; border:1px solid #DCE6F7; color:#246BEB; font-weight:600;
}
.pia-sendrow .pia-say__mic svg{ width:1.3em; height:1.3em; }
.pia-say--v2 .pia-say__mic{ position:static !important; }


/* 대화 화면은 폭과 무관하게 항상 여우(좌) · 말풍선(우). 공용 .pia-ask 의
   모바일 분기(flex-direction:column)를 이 화면에서만 무력화한다. */
section[data-view="chat"] .pia-ask{
  flex-direction:row !important;
  align-items:flex-start !important;
  text-align:left !important;
}
section[data-view="chat"] .pia-ask .pia-q{ text-align:left !important; }


/* ============================================================
   AI와 대화 화면 정밀 조정 (2026-09-04) — PC/모바일 전용, 키오스크 제외
   콘텐츠 폭 확대·헤더 정렬·텍스트 확대·버튼/입력창 확대·AI카드 확대·간격 조정.
   구조/JS/기능은 변경하지 않는다. html.kiosk-on 은 전부 제외(:not 스코프).
   ============================================================ */

/* 1) 콘텐츠 폭 확대 — 채팅 화면의 .pia 캔버스만 넓힌다 */
html:not(.kiosk-on) body.pia-v2 section[data-view="chat"] .pia{
  max-width:1120px !important;
  padding-left:clamp(16px, 5vw, 56px) !important;
  padding-right:clamp(16px, 5vw, 56px) !important;
}

/* 2) Header 폭을 콘텐츠와 맞춘다 (공통 헤더) */
html:not(.kiosk-on) body.pia-v2 .pia-hdr__in{
  max-width:1120px !important;
  padding-left:clamp(16px, 5vw, 56px) !important;
  padding-right:clamp(16px, 5vw, 56px) !important;
}

/* 3) 텍스트 확대 (약 15~25%) */
html:not(.kiosk-on) section[data-view="chat"] .pia-h1{
  font-size:clamp(38px, 3.2vw, 52px) !important; font-weight:800 !important;
}
html:not(.kiosk-on) section[data-view="chat"] #chat-subtitle{
  font-size:clamp(18px, 1.5vw, 22px) !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-prog__label{
  font-size:clamp(18px, 1.5vw, 22px) !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-ask__tx .pia-q{
  font-size:clamp(18px, 1.45vw, 22px) !important;
  line-height:1.65 !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-qk__b{
  font-size:clamp(17px, 1.35vw, 21px) !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-say__in{
  font-size:clamp(17px, 1.3vw, 20px) !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-sendrow .pia-btn,
html:not(.kiosk-on) section[data-view="chat"] .pia-sendrow .pia-say__mic,
html:not(.kiosk-on) section[data-view="chat"] .pia-fab .pia-btn{
  font-size:clamp(18px, 1.4vw, 22px) !important;
}

/* 4) 버튼 높이 확대 */
html:not(.kiosk-on) section[data-view="chat"] .pia-qk__b{
  min-height:58px !important; padding:14px 20px !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-sendrow .pia-say__mic,
html:not(.kiosk-on) section[data-view="chat"] .pia-sendrow .pia-btn{
  min-height:72px !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-fab .pia-btn:last-child{
  min-height:68px !important;
}

/* 5) 입력창 확대 */
html:not(.kiosk-on) section[data-view="chat"] .pia-say__in{
  min-height:120px !important; padding:18px 20px !important; line-height:1.6 !important;
}

/* 6) AI 대화 카드 확대 */
html:not(.kiosk-on) section[data-view="chat"] .pia-sec.pia-ask{
  padding:clamp(24px, 2.4vw, 36px) !important; border-radius:16px !important;
  gap:24px !important; margin-bottom:24px !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-ask__bot{
  width:clamp(90px, 9vw, 125px) !important; height:auto !important;
}
html:not(.kiosk-on) section[data-view="chat"] .pia-ask__tx .pia-q{
  padding:22px 28px !important;
}

/* 7) Quick Answer — Desktop/Tablet 2열 유지, Mobile(<=600px)만 1열.
   기존 규칙은 max-width:1079px 이하 전부 1열로 떨어뜨려 태블릿/노트북에서도
   1열이 되던 문제가 있어, 601px 이상은 2열로 되돌린다. */
html:not(.kiosk-on) section[data-view="chat"] .pia-qk{
  gap:14px 16px !important;
}
@media (min-width:601px){
  html:not(.kiosk-on) section[data-view="chat"] .pia-qk{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:600px){
  html:not(.kiosk-on) section[data-view="chat"] .pia-qk{
    grid-template-columns:1fr !important;
  }
}

/* 8) 세로 간격 */
html:not(.kiosk-on) section[data-view="chat"] .pia-prog{ margin-bottom:24px !important; }
html:not(.kiosk-on) section[data-view="chat"] #chat-quick-wrap{ margin-top:0 !important; }
html:not(.kiosk-on) section[data-view="chat"] .pia-qk__help{ margin-bottom:28px !important; }
html:not(.kiosk-on) section[data-view="chat"] .pia-sendrow{ margin-top:20px !important; }
html:not(.kiosk-on) section[data-view="chat"] .pia-chat-note{ margin-top:16px !important; }
html:not(.kiosk-on) section[data-view="chat"] .pia-fab{ margin-top:32px !important; }
html:not(.kiosk-on) #pia-lang-btn{
  min-width:44px !important;
  font-size:18px !important;
  justify-content:center !important;
  align-items:center !important;
  gap:2px !important;
}
html:not(.kiosk-on) #pia-lang-label{ font-size:11px !important; font-weight:700 !important; }
@media (max-width:600px){
  html:not(.kiosk-on) #pia-lang-btn{ min-width:40px !important; padding:0 8px !important; }
  html:not(.kiosk-on) #pia-lang-btn #pia-lang-label{ display:inline !important; }
}

/* ── 1.4.3 회색 글자 대비 보정 (2026-09-27) ─────────────────────
   결과지 일부는 js/pia-main.js 가 style="…color:#94a3b8" 처럼 인라인으로
   흐린 회색을 넣는다. 그 파일은 결과지 담당이 따로 있어 건드리지 않고,
   색만 여기서 덮는다(인라인을 이기려면 !important 가 필요하다).
   color: 로 시작하거나 ; 뒤에 오는 경우만 잡아 border-color·background-color
   는 건드리지 않는다. 바꾼 값은 결과지 바탕(#fffdf8·#fbfaf7·#f7f8fa) 위 4.5:1 이상.
     #94a3b8 2.52 · #64748b 4.48  →  #636d76 (4.97~5.2)
     #999 2.80 · #888 3.40 · #9a8f7a 3.06 · #7a7565 4.41  →  #6e6b60 (5.07~5.25)
   브랜드 주황 글자 #c4623f(흰 바탕 4.07)도 같은 방식으로 글자용 #b04928(5.48) 로. */
[style^="color:#94a3b8" i], [style*=";color:#94a3b8" i], [style*="; color:#94a3b8" i],
[style^="color:#64748b" i], [style*=";color:#64748b" i], [style*="; color:#64748b" i] {
  color: #636d76 !important;
}
[style^="color:#999" i], [style*=";color:#999" i], [style*="; color:#999" i],
[style^="color:#888" i], [style*=";color:#888" i], [style*="; color:#888" i],
[style^="color:#9a8f7a" i], [style*=";color:#9a8f7a" i], [style*="; color:#9a8f7a" i],
[style^="color:#7a7565" i], [style*=";color:#7a7565" i], [style*="; color:#7a7565" i] {
  color: #6e6b60 !important;
}
[style^="color:#c4623f" i], [style*=";color:#c4623f" i], [style*="; color:#c4623f" i] {
  color: #b04928 !important;
}