/* cert.kaitrust.ai — 진위확인 포털 전용 (지시서 #5 §4)
   토큰·헤더·푸터는 cert-base.css(gav.css 계승)를 그대로 쓴다.
   여기에는 "상태 뱃지"와 "조회 폼"처럼 포털에만 있는 것만 둔다. */

/* ── 워드마크 투톤 (추가지시-A5, 2026-08-17) ────────────
   "KAITRUST" 는 **한 단어**다. span 경계만 있고 문자 사이 공백은 없다 —
   띄어쓰기(KAI TRUST)는 절대 금지(KAI=한국항공우주산업 혼동, TRUST 단독=금융신탁 오독).

   금색 집안 명도 단계:
     1단 #38260f  서예 서명의 금색 획 (확인서 이미지 안, 유지)
     2단 #8a6a2f  인쇄물 워드마크 (확인서 PDF)
     3단 #d0a34a  ← 이 포털. **다크 배경 전용 단계**
   ⚠ 3단을 왜 따로 두는가: 인쇄용 2단(#8a6a2f)을 이 배경(#0b1220)에 그대로 쓰면 명암비가
     3.73:1 로 WCAG AA(4.5:1) 미달이고 육안으로도 배경에 묻는다. 3단은 실측 **8.04:1(AAA)**.
     **인쇄물에는 2단을 쓴다 — 섞지 말 것.**
   ⚠ 색조 실측: 2단 38.9° / 3단 39.9° 로 이 둘은 사실상 같고, 서명(1단)은 33.7° 로
     5~6° 떨어져 있다. "세 단 모두 같은 색조"는 정확한 표현이 아니다 — 같은 웜골드 대역이다.
   ⚠ 더 밝게 올리지 말 것: 확인서 인쇄 쪽에서 실측한 것과 같은 이유로(흑백 복사 시 KAI
     탈락 → "TRUST" 단독 오독) 금색은 위로도 한계가 있다. 화면용이라 직접적 위험은
     없지만 두 매체의 인상이 갈리지 않게 이 값을 유지한다. */
:root { --gold-screen: #d0a34a; }
.brand-mark .wm-kai { color: var(--gold-screen); }
/* 자간은 워드마크에만 (A5: 본문엔 적용 금지). gav.css 의 -0.01em 을 덮는다 */
.brand-mark { letter-spacing: .06em; }

/* ── 상태 뱃지 ──────────────────────────────────────────
   색만으로 상태를 전하지 않는다 — 아이콘 글리프와 텍스트를 함께 둔다.
   색각 이상이나 흑백 인쇄에서도 VALID/REVOKED 가 구분돼야 하기 때문이다. */
.vstate {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--navy-800);
  margin: 0 0 26px;
}
.vstate-glyph {
  font-size: 1.9rem; line-height: 1; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vstate-label { font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; margin: 0; }
.vstate-note { font-size: .92rem; color: var(--ink-mute); margin: 3px 0 0; }

.vstate.valid    { border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.08); }
.vstate.valid    .vstate-glyph { background: rgba(52,211,153,.16); color: var(--ok); }
.vstate.valid    .vstate-label { color: var(--ok); }

.vstate.expired  { border-color: var(--navy-600); background: var(--navy-800); }
.vstate.expired  .vstate-glyph { background: var(--navy-700); color: var(--ink-mute); }
.vstate.expired  .vstate-label { color: var(--ink-mute); }

.vstate.revoked  { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.09); }
.vstate.revoked  .vstate-glyph { background: rgba(248,113,113,.18); color: #f87171; }
.vstate.revoked  .vstate-label { color: #f87171; }

.vstate.not_found { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.07); }
.vstate.not_found .vstate-glyph { background: rgba(251,191,36,.16); color: var(--warn); }
.vstate.not_found .vstate-label { color: var(--warn); }

/* Founding 1~100호 — 금색 (§4) */
.founding-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(234,179,8,.5); background: rgba(234,179,8,.1);
  color: #eab308; font-weight: 700; font-size: .88rem;
}

/* ── 확인서 상세 표 ───────────────────────────────────── */
.vfields { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.vfields th, .vfields td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-size: .95rem; vertical-align: top;
}
.vfields th { width: 38%; color: var(--ink-mute); font-weight: 600; }
.vfields td { color: var(--ink); }
.vfields tr:last-child th, .vfields tr:last-child td { border-bottom: 0; }
/* ⚠ 값에 긴 토큰이 온다(APPT-2026-0001 · 26-CBM-30001-KOR · 종신회원 (Lifetime Member)).
   자간까지 준 상태라 좁은 화면에서 표를 밀어내 **가로 스크롤**이 생겼다(실기기 확인 2026-08-19).
   한글은 단어 단위로 끊고(keep-all), 그래도 넘치는 영숫자 토큰만 강제로 접는다. */
.vfields th, .vfields td { word-break: keep-all; overflow-wrap: anywhere; }
.vno { font-weight: 800; letter-spacing: .06em; color: var(--accent); }

/* ── 조회 폼 ──────────────────────────────────────────── */
.lookup { max-width: 560px; }
.lookup label { display: block; font-size: .9rem; color: var(--ink-mute); margin: 0 0 6px; }
.lookup .field { margin: 0 0 16px; }
.lookup .hint { font-size: .82rem; color: var(--ink-dim); margin: 6px 0 0; }
.lookup button { width: 100%; }
.lookup-error {
  border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.07);
  color: var(--warn); padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: .92rem; margin: 0 0 18px;
}

/* ── 스캔 안내 ────────────────────────────────────────── */
.scan-cta {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--navy-800); padding: 20px 24px; margin: 26px 0 0;
}
.scan-star { font-size: 2.1rem; line-height: 1; color: var(--accent); flex: none; }
.scan-cta p { margin: 0; color: var(--ink-mute); font-size: .93rem; }
.scan-cta strong { color: var(--ink); }

/* ── 언어 토글 ────────────────────────────────────────── */
.lang-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-mute);
  padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: .86rem;
}
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 언어별 표시 — JS 없이도 최소한 한쪽은 보이게 기본은 영문 노출 */
[data-ko] { display: none; }
html[lang="ko"] [data-ko] { display: revert; }
html[lang="ko"] [data-en] { display: none; }

/* ── 스캐너 ───────────────────────────────────────────── */
.scanbox {
  position: relative; max-width: 520px; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #000; aspect-ratio: 4 / 3;
}
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanbox canvas { display: none; }
.scan-status {
  font-size: .92rem; color: var(--ink-mute); margin: 0 0 16px; min-height: 1.6em;
}
.scan-status.err { color: var(--warn); }

@media (max-width: 640px) {
  .vstate { padding: 17px 18px; gap: 12px; }
  .vstate-label { font-size: 1.28rem; }
  .scan-cta { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* 폭이 좁으면 2열을 포기하고 **라벨 위 / 값 아래**로 쌓는다.
     38% 를 라벨에 떼주고 나면 값에 남는 폭이 모자라 어차피 읽기 어렵다. */
  .vfields, .vfields tbody, .vfields tr, .vfields th, .vfields td { display: block; width: auto; }
  .vfields tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .vfields tr:last-child { border-bottom: 0; }
  .vfields th, .vfields td { border-bottom: 0; padding: 0 2px; }
  .vfields th { font-size: .82rem; letter-spacing: .02em; margin-bottom: 3px; }
  .vfields td { font-size: 1rem; }
  .vno { letter-spacing: .04em; }
  /* 세로로 쌓으면 넘칠 일이 없다 — 스크롤 컨테이너만 남으면 **빈 가로 스크롤바**가 생긴다
     (실기기 확인 2026-08-19). 모바일에서는 방어를 끈다. */
  .vfields-wrap { overflow-x: visible; }
}

/* 표가 어떤 이유로든 넘칠 때를 대비한 마지막 방어 — 페이지가 아니라 표만 스크롤된다 */
.vfields-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }