/* ==========================================================================
   VERITAS 공통 디자인·조판 레이어
   각 페이지의 인라인 <style> 뒤에 로드되어 토큰과 조판 규칙을 덮어쓴다.

   ─────────────────────────────────────────────────────────────────────
   왜 별도 레이어인가
   ─────────────────────────────────────────────────────────────────────
   8개 페이지가 각자 인라인 스타일을 들고 있어 토큰이 조금씩 어긋나 있었다.
   전부 재작성하는 건 위험이 크므로, 뒤에 실려서 조판·반응형·접근성만
   일괄 교정하는 얇은 레이어를 얹었다. 색·레이아웃 정체성은 건드리지 않는다.

   ─────────────────────────────────────────────────────────────────────
   한국어 조판이 이 파일의 핵심이다
   ─────────────────────────────────────────────────────────────────────
   브라우저의 기본 줄바꿈 규칙은 라틴 문자 기준이다. 한글에 그대로 적용하면
   CJK는 글자 단위로 아무 데서나 끊을 수 있다고 보기 때문에

       "사업자등록번호를 확인하는 중입니다"
        → "사업자등록번호를 확인하는 중입니
           다"

   처럼 어절 한가운데가 잘린다. 한국어 독자에게 이건 오탈자만큼 눈에 띈다.
   교정 규칙 네 가지:

   1) word-break: keep-all
      어절(띄어쓰기 단위)을 통째로 유지한다. 한국어 웹조판의 제1 규칙.

   2) overflow-wrap: anywhere  ← keep-all과 반드시 짝으로
      keep-all만 넣으면 URL·사업자등록번호처럼 공백 없는 긴 문자열이
      컨테이너를 뚫고 나간다. 좁은 화면에서 가로 스크롤이 생기는 원인이
      대부분 이것. anywhere가 그 경우에만 예외적으로 끊어준다.

   3) text-wrap: pretty / balance
      pretty — 마지막 줄에 한 글자만 남는 고아(orphan)를 방지.
      balance — 제목의 줄 길이를 고르게. 제목은 4줄 이하일 때만 적용된다.

   4) font-variant-numeric: tabular-nums
      표의 숫자 폭을 고정한다. 이걸 안 하면 반송확률 8.1% / 11.4%가
      세로로 어긋나 보여서 표를 눈으로 훑을 수 없다.

   언어별로 규칙이 다르다는 점이 중요하다. 영어는 keep-all을 걸면
   하이픈 없는 긴 단어에서 오히려 줄이 엉키므로 :lang() 으로 분기한다.
   ========================================================================== */

/* ---------- 1. 토큰 ---------- */
:root{
  --v-ink:#10243A; --v-ink-2:#1B3A5C; --v-mute:#5C6672;
  --v-line:#D5DBE2; --v-line-soft:#EDF0F3;
  --v-red:#C8102E; --v-green:#0F6E4A; --v-amber:#8F5400;
  --v-bg:#EFE9DC; --v-surface:#FFFFFF;

  /* 타이포 스케일 — 1.2배 (한국어는 굵은 대비보다 촘촘한 위계가 읽기 쉽다) */
  --v-fs-xs:12px; --v-fs-sm:13px; --v-fs-base:15px;
  --v-fs-md:17px; --v-fs-lg:21px; --v-fs-xl:26px; --v-fs-2xl:32px;

  /* 한글은 라틴보다 자간이 촘촘하고 글자면이 커서 행간을 더 준다 */
  --v-lh-tight:1.35; --v-lh-body:1.72; --v-lh-loose:1.85;

  /* 한 줄에 한글 33~40자가 가장 읽기 편하다 (라틴 65~75자에 해당) */
  --v-measure:36rem;

  --v-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
    "Noto Sans KR","Malgun Gothic",sans-serif;
  --v-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"D2Coding",monospace;

  --v-tap:44px;   /* 최소 터치 타깃 */
}

/* 페이지별 인라인 토큰 덮어쓰기
   각 페이지가 자기 :root에 --mute/--amber를 따로 들고 있었고, 그 값들이
   크래프트 배경(#EFE9DC) 위에서 명도 대비 3.82:1로 WCAG AA(4.5:1) 미달이었다.
   배경색을 밝게 잡은 디자인에서 회색 보조텍스트를 그대로 쓰면 늘 생기는 문제다. */
:root{
  --mute:#5C6672;
  --amber:#8F5400;
}

/* ---------- 2. 조판 기반 ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  font-family:var(--v-sans);
  line-height:var(--v-lh-body);
  word-break:keep-all;          /* 어절 유지 */
  overflow-wrap:anywhere;       /* 단, 끊을 데가 없으면 끊는다 */
  hanging-punctuation:allow-end;/* 지원 브라우저에서 문장부호를 여백으로 */
  text-spacing-trim:trim-start; /* 한중일 괄호 앞뒤 여백 정리 (신규 속성) */
}

/* 언어별 분기 — 영어에 keep-all을 걸면 오히려 줄이 엉킨다 */
:lang(en){ word-break:normal; overflow-wrap:break-word; line-height:1.6; }
:lang(ja),:lang(zh),:lang(ko){ word-break:keep-all; overflow-wrap:anywhere; }
:lang(ja){ line-height:1.8; }

p, li, dd, blockquote, .note, .desc, .lead{
  text-wrap:pretty;             /* 고아 글자 방지 */
  letter-spacing:-0.003em;      /* 한글 본문 미세 조정 */
}

h1,h2,h3,h4,.hero h1,.hero h2{
  text-wrap:balance;            /* 제목 줄 길이 균등 */
  line-height:var(--v-lh-tight);
  letter-spacing:-0.018em;      /* 큰 글자일수록 자간을 좁혀야 덩어리로 읽힌다 */
}

/* 본문 최적 행장 — 넓은 화면에서 한 줄이 100자씩 늘어나면 못 읽는다 */
.prose p, .prose li, article p, article li,
.card > p.note, .lead{ max-width:var(--v-measure); }

/* 숫자는 폭 고정 — 표에서 자릿수가 어긋나면 훑어읽기가 불가능하다 */
table, .num, .stat .v, .mono, code, kbd, pre,
td:has(+ td), .metric, .pct{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 숫자+단위가 갈라지는 것 방지용 유틸 (마크업에서 <span class="nb">3,000원</span>) */
.nb{ white-space:nowrap; }

/* 사업자등록번호·주소 같은 긴 식별자 */
.mono,.code,.bizno{ font-family:var(--v-mono); word-break:break-all; }

/* ---------- 3. 반응형 ---------- */
/* admin/console에는 미디어쿼리가 아예 없었다. 여기서 일괄 보강한다. */
@media (max-width:900px){
  :root{ --v-fs-base:14.5px; --v-measure:100%; }
  main{ padding-left:14px !important; padding-right:14px !important; }
  .stats{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important; }
}

@media (max-width:640px){
  header{ padding:8px 12px !important; row-gap:6px !important; }
  header .right{ margin-left:0 !important; width:100%; }
  header input{ width:100% !important; }
  .card{ padding:14px !important; }
  .stat .v{ font-size:19px !important; }

  /* 넓은 표는 가로 스크롤 컨테이너로 — 셀을 뭉개는 것보다 낫다 */
  .card table, main table{ display:block; overflow-x:auto; white-space:nowrap; }
  .card table td, main table td, .card table th, main table th{ white-space:normal; }

  /* 탭이 넘칠 때 가로 스크롤 */
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabs .tab{ flex:0 0 auto; }
}

@media (max-width:380px){
  :root{ --v-fs-base:14px; }
  body{ font-size:14px; }
  .stat .v{ font-size:17px !important; }
  button{ padding:8px 10px !important; font-size:12.5px !important; }
}

/* ---------- 4. 접근성 ---------- */
/* 키보드 사용자에게만 포커스 링을 보인다 (마우스 클릭 시 링 잔상 제거) */
:focus-visible{
  outline:2px solid var(--v-ink-2);
  outline-offset:2px;
  border-radius:1px;
}
:focus:not(:focus-visible){ outline:none; }

/* 터치 타깃 최소 44px — 모바일에서 버튼을 놓치는 주된 원인 */
button, .tab, a.btn, input[type=submit]{ min-height:var(--v-tap); }
@media (pointer:fine){ button,.tab,a.btn{ min-height:32px; } }

/* 스크린리더 전용 텍스트 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 본문 바로가기 링크 */
.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--v-ink); color:#fff; padding:10px 16px;
}
.skip:focus{ left:0; }

/* 색만으로 상태를 구분하지 않도록, 아이콘 문자를 보조로 붙인다 */
.on::before{ content:"● "; }
.no::before{ content:"▲ "; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* 고대비 모드 */
@media (prefers-contrast:more){
  :root{ --v-mute:#4A5560; --v-line:#9AA5B1; }
}

/* ---------- 5. 언어 전환기 ---------- */
.v-lang{
  display:inline-flex; gap:0; border:1px solid rgba(255,255,255,.35);
  background:transparent; align-items:stretch;
}
.v-lang button{
  background:transparent; border:0; color:inherit; opacity:.6;
  padding:4px 8px; font-size:11.5px; letter-spacing:.06em; cursor:pointer;
  min-height:28px; font-family:var(--v-mono);
}
.v-lang button[aria-pressed="true"]{ opacity:1; background:rgba(255,255,255,.16); font-weight:700; }
.v-lang button + button{ border-left:1px solid rgba(255,255,255,.22); }
main .v-lang{ border-color:var(--v-line); }
main .v-lang button[aria-pressed="true"]{ background:var(--v-line-soft); }

/* ---------- 6. 인쇄 ---------- */
@media print{
  header, .v-lang, button, .tabs{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .card{ border:1px solid #999; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* ==========================================================================
   7. 언어 팽창 대응
   측정 결과 영어 번역은 한국어 대비 평균 222%, 최대 750%까지 길어진다
   ("권고" → "Recommendations"). 한국어 폭에 맞춰 짠 탭·버튼·통계 라벨이
   영어에서 그대로 터진다. 폭을 고정하지 않고, 넘칠 때 자연스럽게 처리한다.
   ========================================================================== */
.tabs{ flex-wrap:wrap; }
.tab, button, a.btn{ width:auto; white-space:nowrap; }

/* 통계 카드 라벨은 줄바꿈을 허용해야 한다 (영어에서 두 단어가 흔함) */
.stat .k{ white-space:normal; line-height:1.3; }
.stat .v{ white-space:nowrap; }

/* 헤더 내비게이션이 넘치면 줄바꿈 */
header{ flex-wrap:wrap; }
header nav, header .links{ display:flex; flex-wrap:wrap; gap:10px; }

/* 표 머리글은 언어에 따라 두세 줄이 될 수 있다 */
th{ white-space:normal; vertical-align:bottom; }

/* 영어는 어절 유지가 필요 없고, 긴 단어는 하이픈으로 끊는 편이 낫다 */
:lang(en) p, :lang(en) li, :lang(en) td{ hyphens:auto; }

/* 중국어·일본어는 문장부호가 이미 전각 여백을 갖고 있어 자간을 주지 않는다 */
:lang(zh) p, :lang(ja) p, :lang(zh) li, :lang(ja) li{ letter-spacing:0; }