/* CSS Custom Properties */
:root {
  --primary: #1a3a5c;
  --accent: #c9a84c;
  --bg: #fafaf8;
  --card-bg: #ffffff;
  --text: #2c2c2c;
  --border: #e0ddd8;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Global type-scale bump — every rem-based size grows ~13% so body copy,
   nav, cards, code blocks, and metadata all read larger without breaking
   the clamp()-driven hero/headline ratios. */
html { font-size: 18px; }

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Noto Sans KR', sans-serif; font-size: 1rem; line-height: 1.6; }

body[data-lang='en'] [data-lang='ko'] { display: none !important; }
body[data-lang='ko'] [data-lang='en'] { display: none !important; }

/* Header */
header { background: var(--primary); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
#lang-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: white; padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer; }

/* Card Grid — 반응형 */
#card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

/* Artifact Card Base (T13에서 .artifact-card 클래스 사용) */
.artifact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.artifact-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.artifact-card img { width: 100%; height: 200px; object-fit: cover; }
.artifact-card .card-body { padding: 1rem; }
.artifact-card .card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.artifact-card .card-subtitle { font-size: 0.85rem; color: #666; }
.artifact-card .card-designation { font-size: 0.75rem; color: var(--primary); margin-top: 0.5rem; }

/* KDH Special — 금색 테두리 */
.artifact-card.kdh { border: 2px solid var(--accent); }
.kdh-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

/* Artifact Detail Overlay */
#artifact-detail {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
#detail-panel {
  background: var(--card-bg);
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}
#detail-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.detail-name-ko {
  margin-bottom: 0.35rem;
  color: var(--primary);
  font-size: 1.6rem;
  line-height: 1.35;
}

.detail-name-en {
  margin-bottom: 1rem;
  color: #64605c;
  font-size: 1rem;
}

.detail-meta {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
  padding: 0;
}

.detail-meta li {
  border-left: 3px solid var(--accent);
  padding-left: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

pre {
  background: #111826;
  border-radius: 8px;
  margin: 1rem 0;
  overflow-x: auto;
  padding: 1rem;
}

.detail-code {
  color: #2f241d;
  display: block;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre;
}

.detail-description,
.detail-drama {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.85rem;
}

/* Utility */
.hidden { display: none !important; }

/* Mobile Responsive */
@media (max-width: 600px) {
  #card-grid { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
  #detail-panel { width: 95%; padding: 1.5rem; }
  header { flex-direction: column; gap: 0.5rem; text-align: center; }
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 2rem 0;
}

.filter-tab {
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-tab:hover {
  background: rgba(26, 58, 92, 0.08);
}

.filter-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

.filter-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.artifact-card.card-skeleton {
  opacity: 0;
  transform: translateY(14px);
}

.artifact-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.card-period {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #6d6a66;
}

#card-grid .error {
  grid-column: 1 / -1;
  color: #8b1e2d;
  font-weight: 600;
  padding: 1rem 0;
}

@media (max-width: 600px) {
  .filter-tabs {
    padding: 1rem 1rem 0;
  }

  .filter-tab {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}

body[data-lang="ko"] [data-lang="en"] { display: none; }
body[data-lang="en"] [data-lang="ko"] { display: none; }

.detail-name-ko {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.25rem;
}

.detail-name-en {
  font-size: 1rem;
  color: #555;
  margin: 0 0 1.25rem;
  font-style: italic;
}

.detail-meta {
  list-style: none;
  margin: 0 0 1.25rem;
  border-top: 1px solid #e0d8cc;
  border-bottom: 1px solid #e0d8cc;
  padding: 0.75rem 0;
}

.detail-meta li {
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: #333;
}

.detail-meta li strong {
  color: var(--primary);
}

.detail-code {
  background: #f5f3ef;
  border: 1px solid #e0d8cc;
  border-radius: 6px;
  color: #2b2b2b;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 1.25rem;
  display: block;
}

.detail-code .kw,
.detail-code .keyword {
  color: #1a5c9c;
  font-weight: 700;
}

.detail-code .prop {
  color: #7b3f00;
  font-weight: 600;
}

.detail-code .cm {
  color: #4f6b4f;
  font-style: italic;
}

.detail-code .str {
  color: #8c2f39;
}

.detail-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  margin: 0 0 1rem;
}

.detail-drama {
  background: rgba(201, 168, 76, 0.1);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #444;
  border-radius: 0 4px 4px 0;
  margin-top: 0.5rem;
}

#detail-content .error {
  color: #8b1e2d;
  font-weight: 600;
}

.artifact-card.kdh-special {
  border: 2px solid var(--accent);
}

.artifact-card.kdh-special:hover {
  box-shadow: 0 8px 22px rgba(201, 168, 76, 0.28);
}

#kdh-header-text {
  margin: 0.75rem 2rem 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--accent);
  background: rgba(201, 168, 76, 0.1);
  border-radius: 0 8px 8px 0;
  color: #5f4813;
  line-height: 1.6;
  font-size: 0.95rem;
}

#kdh-header-text span {
  display: block;
}

.detail-drama-connection {
  background: rgba(201, 168, 76, 0.12);
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  color: #45413d;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.7;
  margin-top: 0.7rem;
  padding: 0.8rem 1rem;
}

.detail-drama-connection span {
  display: block;
}

@media (max-width: 600px) {
  #kdh-header-text {
    margin: 0.75rem 1rem 0;
  }
}

.tab-bar {
  display: flex;
  gap: 0.5rem;
  padding: 1.25rem 2rem 0;
}

.tab-btn {
  background: white;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tab-btn:hover {
  background: rgba(26, 58, 92, 0.08);
}

.tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#cy {
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 400px;
  position: relative;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* KPDH tab system — replaces the long-scroll layout. Hero section sits above;
   each section below (Featured / Rooms / Archive / Graph) lives in one pane. */
.kpdh-tab-bar {
  display: flex;
  gap: 0;
  padding: 0 32px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(246, 239, 227, 0.12);
  position: sticky;
  top: 0;
  background: var(--ink, #0a0612);
  z-index: 20;
  overflow-x: auto;
  scrollbar-width: none;
}
.kpdh-tab-bar::-webkit-scrollbar { display: none; }
.kpdh-tab-bar .kpdh-tab-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(246, 239, 227, 0.55);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  white-space: nowrap;
}
.kpdh-tab-bar .kpdh-tab-btn:hover {
  color: rgba(246, 239, 227, 0.9);
}
.kpdh-tab-bar .kpdh-tab-btn[aria-selected="true"] {
  color: var(--rose, #ff2e6a);
  border-bottom-color: var(--rose, #ff2e6a);
}
.kpdh-tab-bar .kpdh-tab-btn:focus-visible {
  outline: 2px solid var(--rose, #ff2e6a);
  outline-offset: -4px;
}
.kpdh-tab-pane { display: none; }
.kpdh-tab-pane.active { display: block; }
.kpdh-tab-pane > .kpdh-divider:first-child { margin-top: 0; }

@media (max-width: 768px) {
  .kpdh-tab-bar { padding: 0 16px; margin-bottom: 16px; }
  .kpdh-tab-bar .kpdh-tab-btn { padding: 14px 14px; font-size: 11px; letter-spacing: 0.1em; }
}

#edge-filters {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  z-index: 10;
  backdrop-filter: blur(2px);
}

#edge-filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text);
}

@media (max-width: 768px) {
  #cy {
    min-height: 300px;
  }
  #edge-filters {
    flex-direction: column;
  }
}

.edge-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Phase C Featured Heroes */
main { min-height: calc(100vh - 70px); }
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 2rem 0;
  background: #f3efe7;
}
.tab-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  font-weight: 700;
}
.tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--accent);
}
.tab-content { display: none; }
.tab-content.active { display: block; }
#featured-heroes {
  background: #0a0a0a;
  color: #f5f1e8;
  min-height: calc(100vh - 120px);
  padding-bottom: 3rem;
}
.featured-intro {
  max-width: 980px;
  padding: clamp(2rem, 6vw, 5rem) 2rem 1.5rem;
}
.featured-intro .eyebrow {
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.78rem;
}
.featured-intro h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.95;
  margin: 0.25rem 0 0.8rem;
}
.featured-intro p:not(.eyebrow) {
  color: #cabfae;
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 760px;
  line-height: 1.7;
}
#featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  padding: 0 2rem 2rem;
}
.featured-hero-card {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  background: #15110d;
  color: #f5f1e8;
  text-decoration: none;
  border: 1px solid rgba(245,241,232,0.1);
  animation: heroCardIn 600ms ease both;
  animation-delay: var(--delay);
}
.featured-hero-card img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 700ms ease, opacity 300ms ease;
}
.featured-hero-card:hover img { transform: scale(1.045); opacity: 0.9; }
.featured-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.35));
}
.featured-hero-body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 1.25rem;
}
.featured-number, .featured-room {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  margin-right: 0.45rem;
}
.featured-hero-body h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.8rem;
  line-height: 1.05;
  margin: 0.7rem 0 0.35rem;
}
.featured-subtitle { color: #d3cabf; font-size: 0.9rem; margin-bottom: 0.8rem; }
.featured-hook { color: #f5f1e8; line-height: 1.55; }
.verification-note {
  display: inline-block;
  margin-top: 0.7rem;
  color: #101010;
  background: #e2c66d;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
}
@keyframes heroCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .tab-bar { padding: 0.8rem 1rem 0; }
  #featured-grid { padding: 0 1rem 1rem; }
  .featured-intro { padding-left: 1rem; padding-right: 1rem; }
  .featured-hero-card, .featured-hero-card img { min-height: 430px; }
}

/* Phase A Rooms */
#rooms {
  background: #f5f1e8;
  min-height: calc(100vh - 120px);
  padding-bottom: 3rem;
}
.rooms-intro {
  max-width: 980px;
  padding: clamp(2rem, 5vw, 4rem) 2rem 1rem;
}
.rooms-intro .eyebrow { color: var(--primary); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; }
.rooms-intro h2 {
  color: var(--primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 0.95;
  margin: 0.25rem 0 0.8rem;
}
.rooms-intro p:not(.eyebrow) { max-width: 760px; color: #5e5952; line-height: 1.7; }
#rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  padding: 1rem 2rem 2rem;
}
.room-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.room-card-heading { padding: 1.25rem; }
.room-count { color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.room-card h3 { color: var(--primary); font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; margin: 0.35rem 0 0.55rem; }
.room-card-heading p:last-child { color: #57534e; line-height: 1.65; }
.room-hero-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--border); }
.room-hero-link { position: relative; min-height: 180px; color: #fff; overflow: hidden; text-decoration: none; background: #111; }
.room-hero-link img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; opacity: 0.76; transition: transform 0.45s ease, opacity 0.25s ease; }
.room-hero-link:hover img { transform: scale(1.05); opacity: 0.95; }
.room-hero-link span { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.7rem; z-index: 1; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.room-hero-link span small {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.room-hero-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 62%); }
@media (max-width: 700px) { #rooms-grid { grid-template-columns: 1fr; padding: 1rem; } .rooms-intro { padding-left: 1rem; padding-right: 1rem; } }

.artifact-image-placeholder {
  width: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(217, 180, 94, 0.12), rgba(31, 41, 55, 0.92));
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--font-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Code-first redesign — 2026-04-30
   The public homepage now treats Han-lang source as the primary visual artifact.
   Photos are intentionally hidden from index/room/archive cards until exact source matches are verified. */
:root {
  --ink: #0b0f0d;
  --ink-2: #111812;
  --ink-3: #192219;
  --paper: #f6efe3;
  --paper-muted: #d8cdb9;
  --han-gold: #d9b45e;
  --han-jade: #7fb39a;
  --han-blue: #8fb7dd;
  --han-rust: #b66d4f;
  --hairline: rgba(246, 239, 227, 0.16);
  --deep-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(217, 180, 94, 0.16), transparent 28rem),
    radial-gradient(circle at 82% 22%, rgba(127, 179, 154, 0.12), transparent 24rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 80%);
  z-index: -1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: rgba(9, 13, 10, 0.86);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--paper);
  text-decoration: none;
}
.brand-glyph {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(217, 180, 94, 0.62);
  border-radius: 0.8rem;
  color: var(--han-gold);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  background: rgba(217, 180, 94, 0.08);
}
.brand-mark strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: 0.02em; }
.brand-mark small { display: block; color: var(--paper-muted); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; }
.header-actions { display: inline-flex; align-items: center; gap: 0.65rem; }
.github-link,
.primary-action,
.secondary-action,
#lang-toggle {
  border: 1px solid rgba(217, 180, 94, 0.5);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(246, 239, 227, 0.055);
  padding: 0.62rem 0.95rem;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.github-link:hover,
.secondary-action:hover,
#lang-toggle:hover { background: rgba(217, 180, 94, 0.12); }
.primary-action { background: var(--han-gold); color: #111; border-color: var(--han-gold); }

main { min-height: calc(100vh - 72px); }
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 7.5rem) clamp(1rem, 5vw, 5rem) clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--hairline);
}
.home-copy { max-width: 860px; }
.eyebrow {
  color: var(--han-gold) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.78rem;
}
.home-hero h1 {
  margin: 0.4rem 0 1rem;
  max-width: 860px;
  font-family: var(--font-serif);
  font-size: clamp(3.1rem, 8vw, 7.8rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
}
.lede {
  color: var(--paper-muted);
  max-width: 720px;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.75;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
  gap: 1px;
  margin-top: 2rem;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.home-stats div { background: rgba(17, 24, 18, 0.86); padding: 1rem; }
.home-stats dt { color: var(--han-gold); font-family: var(--font-serif); font-size: 2rem; }
.home-stats dd { color: var(--paper-muted); margin: 0.2rem 0 0; }

.home-source-panel,
.featured-code,
.artifact-code-plate pre,
.room-hero-link pre,
#detail-content pre {
  background: #07100d;
  border: 1px solid rgba(217, 180, 94, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), var(--deep-shadow);
}
.home-source-panel { border-radius: 1.35rem; overflow: hidden; transform: rotate(1.2deg); }
.source-window-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(246, 239, 227, 0.06);
}
.source-window-bar span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--han-rust); }
.source-window-bar span:nth-child(2) { background: var(--han-gold); }
.source-window-bar span:nth-child(3) { background: var(--han-jade); }
.source-window-bar strong { margin-left: 0.5rem; color: var(--paper-muted); font-size: 0.78rem; }
.home-source-panel pre { margin: 0; padding: 1.25rem; overflow: auto; background: transparent; box-shadow: none; border: 0; }
.home-source-panel code,
.featured-code code,
.artifact-code-plate code,
.room-hero-link code,
.detail-code {
  color: #efe6d2;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
}
.kw { color: var(--han-blue); font-weight: 800; }
.prop { color: var(--han-gold); font-weight: 800; }
.str { color: #a7e3b8; }
.cm { color: #879489; font-style: italic; }

.tab-bar {
  position: sticky;
  top: 4.25rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: rgba(9, 13, 10, 0.9);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(16px);
}
.tab-btn,
.filter-tab {
  border-color: rgba(246, 239, 227, 0.16);
  background: rgba(246, 239, 227, 0.05);
  color: var(--paper-muted);
}
.tab-btn.active,
.filter-tab.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--han-gold);
  box-shadow: none;
}

#featured-heroes,
#rooms,
#card-grid,
#cy { background: transparent; color: var(--paper); }
.featured-intro,
.rooms-intro { max-width: 1080px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem) 1.2rem; }
.featured-intro h2,
.rooms-intro h2 {
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5.8vw, 5.8rem);
  letter-spacing: -0.045em;
}
.featured-intro p:not(.eyebrow),
.rooms-intro p:not(.eyebrow) { color: var(--paper-muted); max-width: 760px; }
#featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 0 clamp(1rem, 5vw, 5rem) 4rem;
}
.featured-hero-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(145deg, rgba(246,239,227,0.08), rgba(246,239,227,0.025));
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  color: var(--paper);
  box-shadow: none;
}
.featured-hero-card::after { display: none; }
.featured-hero-card img { display: none !important; }
.code-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0;
  color: var(--han-gold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.featured-code { margin: 1rem; border-radius: 0.9rem; min-height: 210px; max-height: 260px; padding: 1rem; overflow: hidden; }
.featured-hero-body { position: static; padding: 0 1rem 1.1rem; }
.featured-hero-body h3 { font-family: var(--font-serif); font-size: 1.65rem; letter-spacing: -0.02em; }
.featured-subtitle,
.featured-hook { color: var(--paper-muted); }
.source-policy {
  margin-top: 0.85rem;
  color: var(--han-jade);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.needs-source-review .source-policy { color: var(--han-gold); }

#rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  padding: 0 clamp(1rem, 5vw, 5rem) 4rem;
}
.room-card {
  background: rgba(246, 239, 227, 0.065);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  box-shadow: none;
}
.room-card h3 { color: var(--paper); font-family: var(--font-serif); }
.room-card-heading p:last-child { color: var(--paper-muted); }
.room-hero-strip { border-top-color: var(--hairline); grid-template-columns: 1fr; }
.room-hero-link {
  min-height: 0;
  display: block;
  padding: 1rem;
  background: rgba(7, 16, 13, 0.72);
  border-top: 1px solid var(--hairline);
}
.room-hero-link::after { display: none; }
.room-hero-link img { display: none !important; }
.room-code-label { position: static !important; display: block; color: var(--han-gold); margin-bottom: 0.65rem; text-shadow: none !important; }
.room-hero-link pre { margin: 0; max-height: 130px; overflow: hidden; border-radius: 0.75rem; padding: 0.85rem; box-shadow: none; }

#card-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding: 1.25rem clamp(1rem, 4vw, 3rem) 4rem;
}
.artifact-card {
  background: rgba(246, 239, 227, 0.07);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  color: var(--paper);
  box-shadow: none;
}
.artifact-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0,0,0,0.2); }
.artifact-card img { display: none !important; }
.artifact-card .card-title { color: var(--paper); }
.artifact-card .card-subtitle,
.card-period { color: var(--paper-muted); }
.artifact-card .card-designation { color: var(--han-gold); }
.artifact-image-placeholder {
  min-height: 225px;
  display: block;
  background: #07100d;
  color: var(--paper);
}
.artifact-code-plate pre { margin: 0; min-height: 225px; max-height: 225px; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; padding: 1rem; }
.kdh-badge { background: var(--han-gold); color: #111; }
.filter-tabs { background: transparent; padding: 1.25rem clamp(1rem, 4vw, 3rem) 0; }

#cy {
  min-height: 620px;
  border-top: 1px solid var(--hairline);
}
#edge-filters {
  background: rgba(9, 13, 10, 0.86);
  border-color: var(--hairline);
  color: var(--paper);
}
#edge-filters label { color: var(--paper-muted); }

#artifact-detail { background: rgba(0,0,0,0.78); backdrop-filter: blur(12px); }
#detail-panel {
  background: var(--paper);
  color: #1d1b18;
  border-radius: 1.1rem;
  max-width: 860px;
}
#detail-close { background: #fff; }
.detail-name-ko,
.detail-meta li strong { color: #172416; }
.detail-name-en,
.detail-description { color: #433d35; }
.detail-code { background: #07100d; color: var(--paper); border-color: rgba(217, 180, 94, 0.24); }

@media (max-width: 860px) {
  .site-header { position: static; align-items: flex-start; }
  .home-hero { grid-template-columns: 1fr; }
  .home-source-panel { transform: none; }
  .tab-bar { top: 0; }
}
@media (max-width: 620px) {
  .site-header { flex-direction: column; }
  .header-actions { width: 100%; justify-content: space-between; }
  .home-stats { grid-template-columns: 1fr; }
  #featured-grid, #rooms-grid, #card-grid { grid-template-columns: 1fr; }
}
#featured-heroes, #rooms, #card-grid, #cy { scroll-margin-top: 8rem; }

/* ============================================================
   KPDH-A · Homepage redesign (T2 · 2026-04-29)
   Han-only banner, Black Han Sans hero, schema panel, 3-col cards.
   Coexists with Phase C styles above (kpdh-* selectors are scoped).
   ============================================================ */

body.kpdh-home {
  --ink: #0a0612;
  --rose: #ff2e6a;
  --rose-deep: #b3083d;
  --paper: #f6efe3;
  --gold: #ffd60a;
  --violet: #8b3dff;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Noto Sans KR', sans-serif;
}

body.kpdh-home::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,46,106,.18), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(139,61,255,.10), transparent 50%);
  pointer-events: none;
  z-index: 0;
  mask-image: none;
  background-image: none, none;
}

body.kpdh-home::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: .5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Reset the second body::before from Phase C (grid lines) on the home page */
body.kpdh-home::before {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,46,106,.18), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(139,61,255,.10), transparent 50%);
  background-size: auto;
}

/* Top nav */
nav.kpdh-nav {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px clamp(14px, 3vw, 40px);
  border-bottom: 1px solid rgba(246,239,227,.08);
  background: transparent;
  backdrop-filter: none;
}
body.kpdh-home .site-header { display: none; }

nav.kpdh-nav .logo {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 28px;
  color: var(--rose);
  letter-spacing: .04em;
  text-decoration: none;
}
nav.kpdh-nav .logo span {
  color: var(--paper);
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 900;
  font-size: 14px;
  margin-left: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

nav.kpdh-nav .nav-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  flex-wrap: wrap;
}
nav.kpdh-nav .nav-links a {
  color: var(--paper);
  text-decoration: none;
  opacity: .7;
  transition: .15s;
}
nav.kpdh-nav .nav-links a:hover { opacity: 1; color: var(--rose); }

nav.kpdh-nav .gh-pair { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
nav.kpdh-nav .gh-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid rgba(246,239,227,.22);
  background: rgba(246,239,227,.04);
  cursor: pointer;
  transition: .15s;
  border-radius: 0;
}
nav.kpdh-nav .gh-chip:hover { border-color: var(--rose); color: var(--rose); background: rgba(255,46,106,.08); }
nav.kpdh-nav .gh-chip svg.gh-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--paper); }
nav.kpdh-nav .gh-chip:hover svg.gh-icon { color: var(--rose); }
nav.kpdh-nav .gh-chip.gh-han svg.gh-icon { color: var(--rose); }
nav.kpdh-nav .gh-chip .gh-arrow { font-size: 13px; opacity: .7; margin-left: 2px; }
nav.kpdh-nav .gh-chip.gh-han { border-color: rgba(255,46,106,.4); color: var(--rose); }
nav.kpdh-nav .gh-chip.gh-han:hover { background: var(--rose); color: var(--ink); }
nav.kpdh-nav .gh-chip.gh-han:hover .gh-icon,
nav.kpdh-nav .gh-chip.gh-han:hover .gh-arrow { color: var(--ink); }

nav.kpdh-nav .lang {
  padding: 7px 14px;
  border: 1px solid var(--rose);
  color: var(--rose);
  font-size: 11px;
  letter-spacing: .2em;
  cursor: pointer;
  background: rgba(255,46,106,.08);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
nav.kpdh-nav .lang:hover { background: var(--rose); color: var(--ink); }

/* Hero */
.kpdh-hero {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 3vw, 40px) clamp(10px, 1.4vw, 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 20px;
  align-items: center;
}
.kpdh-hero .hero-text { max-width: 100%; min-width: 0; }
.kpdh-hero .eyebrow {
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--rose);
  font-weight: 900;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.kpdh-hero h1 {
  font-family: 'Black Han Sans', sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 12px;
  letter-spacing: -.02em;
  font-weight: 400;
  max-width: 14ch;
}
body[data-lang="en"] .kpdh-hero h1 {
  font-size: clamp(20px, 2vw, 28px);
  max-width: 24ch;
  letter-spacing: -.025em;
  font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
}
.kpdh-hero h1 .accent {
  color: var(--rose);
  text-shadow: 0 0 40px rgba(255,46,106,.5);
}
.kpdh-hero .lede {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.45;
  max-width: 520px;
  color: rgba(246,239,227,.85);
  margin: 0 0 8px;
}
.kpdh-hero .lede strong {
  color: var(--rose);
  font-weight: 900;
  text-shadow: 0 0 18px rgba(255,46,106,.5);
}
.kpdh-hero .lede code {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255,46,106,.14);
  color: var(--rose);
  padding: 2px 8px;
  border: 1px solid rgba(255,46,106,.4);
  font-size: .85em;
  font-weight: 700;
}

.kpdh-hero .lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rose);
  background: rgba(255,46,106,.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--rose);
  font-weight: 700;
  margin-bottom: 10px;
  box-shadow: 0 0 18px rgba(255,46,106,.15);
}
.kpdh-hero .lang-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose);
  animation: kpdh-blink 1.6s ease-in-out infinite;
}
.kpdh-hero .lang-badge b {
  color: var(--paper);
  letter-spacing: .32em;
  font-weight: 900;
}

.kpdh-hero .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.kpdh-hero .btn {
  padding: 8px 16px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--rose);
  background: var(--rose);
  color: var(--ink);
  text-decoration: none;
  border-radius: 0;
  transition: .15s;
  font-family: 'Noto Sans KR', sans-serif;
}
.kpdh-hero .btn:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--paper); }
.kpdh-hero .btn-ghost { background: transparent; color: var(--rose); }
.kpdh-hero .btn-ghost:hover { background: var(--rose); color: var(--ink); }
.kpdh-hero .btn-han { border-color: var(--paper); color: var(--paper); background: transparent; }
.kpdh-hero .btn-han:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.kpdh-hero .hero-stamp {
  position: relative;
  width: clamp(80px, 9vw, 120px);
  aspect-ratio: 1 / 1;
  border: 2px solid var(--rose);
  background: rgba(255,46,106,.05);
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(255,46,106,.3);
  justify-self: end;
}
.kpdh-hero .hero-stamp::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--rose);
  opacity: .6;
}
.kpdh-hero .hero-stamp .seal-han {
  font-family: 'Black Han Sans', sans-serif;
  font-size: clamp(48px, 5.5vw, 72px);
  color: var(--rose);
  text-shadow: 0 0 14px rgba(255,46,106,.5);
  line-height: .8;
  font-weight: 400;
}
.kpdh-hero .hero-stamp .seal-label {
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--rose);
  margin-top: 4px;
  font-weight: 900;
}

/* Collapsible schema chip — keep schema.hgl available without pushing the
   first row of hero cards below the fold. */
.kpdh-schema-details {
  margin: 0 clamp(16px, 4vw, 64px) 16px;
}
.kpdh-schema-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 46, 106, 0.45);
  background: rgba(255, 46, 106, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--paper);
  transition: background 120ms;
}
.kpdh-schema-details > summary:hover {
  background: rgba(255, 46, 106, 0.12);
}
.kpdh-schema-details > summary::-webkit-details-marker { display: none; }
.kpdh-schema-details > summary .file { color: var(--rose); font-weight: 700; letter-spacing: 0.05em; }
.kpdh-schema-details > summary .badge {
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border: 1px solid rgba(255, 46, 106, 0.5);
  background: rgba(255, 46, 106, 0.08);
  color: var(--rose);
  font-weight: 700;
  text-transform: uppercase;
}
.kpdh-schema-details > summary .kpdh-schema-toggle {
  margin-left: auto;
  color: rgba(246, 239, 227, 0.7);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kpdh-schema-details[open] > summary .kpdh-schema-toggle::after { content: ""; }
.kpdh-schema-details[open] > summary .kpdh-schema-toggle {
  /* The data-lang-* swap fills text content; rotate caret via transform instead */
}
.kpdh-schema-details > .kpdh-schema { margin-top: 10px; }

/* Divider */
.kpdh-divider {
  padding: 10px clamp(16px, 4vw, 40px) 8px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.kpdh-divider::before {
  content: "";
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose), transparent);
}
.kpdh-divider h2 {
  font-family: 'Black Han Sans', sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--paper);
  font-weight: 400;
  margin: 0;
}
body[data-lang="en"] .kpdh-divider h2 {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 700;
}
.kpdh-divider .han-label {
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--rose);
  font-weight: 900;
}

/* Schema panel */
.kpdh-schema {
  margin: 0 clamp(16px, 4vw, 64px) 32px;
  background: rgba(20,10,30,.7);
  border: 1px solid var(--rose);
  border-radius: 0;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(255,46,106,.18);
}
.kpdh-schema .schema-head {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,46,106,.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,46,106,.08);
  flex-wrap: wrap;
  gap: 12px;
}
.kpdh-schema .schema-head .file {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--rose);
  font-weight: 700;
  letter-spacing: .1em;
}
.kpdh-schema .schema-head .badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--paper);
  font-weight: 700;
}
.kpdh-schema .schema-head .badge::before {
  content: "●";
  color: var(--rose);
  font-size: 8px;
  animation: kpdh-blink 1.6s ease-in-out infinite;
}
.kpdh-schema pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(246,239,227,.9);
  padding: 20px 24px;
  margin: 0;
  overflow: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  white-space: pre;
}
.kpdh-schema .kw,   body.kpdh-home .kpdh-card .kw   { color: var(--gold); font-weight: 700; }
.kpdh-schema .ty,   body.kpdh-home .kpdh-card .ty   { color: var(--violet); font-weight: 600; }
.kpdh-schema .str,  body.kpdh-home .kpdh-card .str  { color: #9be29b; }
.kpdh-schema .cm,   body.kpdh-home .kpdh-card .cm   { color: rgba(246,239,227,.4); font-style: italic; }
.kpdh-schema .fn,   body.kpdh-home .kpdh-card .fn   { color: var(--rose); font-weight: 700; }
/* Map highlightCode's existing class names too */
body.kpdh-home .kpdh-card .prop { color: var(--violet); font-weight: 600; }
body.kpdh-home .kpdh-schema .prop { color: var(--violet); font-weight: 600; }

/* Cards grid */
body.kpdh-home #featured-heroes {
  position: relative;
  z-index: 2;
  background: transparent;
  color: var(--paper);
  padding: 0;
  min-height: 0;
}
body.kpdh-home #card-grid.kpdh-cards-archive {
  background: transparent;
  color: var(--paper);
  margin: 0;
  border: 0;
}

/* Category filter pills (national-treasures archive) */
.kpdh-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0 clamp(16px, 4vw, 64px) 16px;
  position: relative;
  z-index: 2;
}
.kpdh-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid rgba(255,46,106,0.35);
  color: var(--paper);
  background: rgba(20,10,30,0.4);
  cursor: pointer;
  transition: 0.18s;
  font-weight: 700;
}
.kpdh-pill:hover { border-color: var(--rose); color: var(--rose); }
.kpdh-pill.active {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(255,46,106,0.4);
}
.kpdh-pill .count {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 6px;
}
.kpdh-cards {
  padding: 0 clamp(16px, 4vw, 64px) 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  position: relative;
  z-index: 2;
}
.kpdh-card {
  background: rgba(20,10,30,.6);
  border: 1px solid rgba(255,46,106,.3);
  padding: 24px;
  position: relative;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 0 rgba(255,46,106,0);
  transition: .2s;
  text-decoration: none;
  color: var(--paper);
  display: block;
  border-radius: 0;
  min-height: 0;
  animation: none;
}
.kpdh-card:hover {
  box-shadow: 0 0 30px rgba(255,46,106,.4);
  border-color: var(--rose);
  transform: translateY(-2px);
}
.kpdh-card .seal {
  position: absolute;
  top: -10px;
  right: 18px;
  width: 48px;
  height: 48px;
  background: var(--rose);
  color: var(--ink);
  font-family: 'Black Han Sans', sans-serif;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  box-shadow: 0 4px 12px rgba(255,46,106,.5);
  z-index: 2;
  font-weight: 400;
}
.kpdh-card .num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--rose);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.kpdh-card .file-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255,46,106,.7);
  letter-spacing: .15em;
  margin-bottom: 12px;
}
.kpdh-card-figure,
.kpdh-card-image-pending {
  position: relative;
  height: 260px;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid rgba(255,46,106,.35);
  background: rgba(0,0,0,.5);
}
.kpdh-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.06) contrast(1.03);
}
.kpdh-card-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,6,18,.72), transparent 55%);
  pointer-events: none;
}
.kpdh-card-figure figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10,6,18,.72);
  border: 1px solid rgba(255,46,106,.55);
  padding: 5px 7px;
}
.kpdh-card-image-pending {
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--gold);
  border-style: dashed;
}
.kpdh-card-image-pending span,
.kpdh-card-image-pending small {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.kpdh-card-image-pending span { font-size: 11px; font-weight: 700; }
.kpdh-card-image-pending small { font-size: 9px; color: rgba(246,239,227,.58); }
.kpdh-card pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(246,239,227,.85);
  background: rgba(0,0,0,.45);
  padding: 12px;
  border-left: 2px solid var(--rose);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  overflow: hidden;
  height: 200px;
  margin: 0 0 16px;
  box-shadow: none;
  white-space: pre;
}
.kpdh-card.image-verified pre { height: 148px; }
.kpdh-card pre code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(246,239,227,.85);
  background: transparent;
}
.kpdh-card .title-en {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 20px;
  color: var(--paper);
  line-height: 1.1;
  margin-bottom: 8px;
  font-weight: 400;
}
.kpdh-card .title-kr {
  font-size: 14px;
  color: rgba(246,239,227,.6);
  font-weight: 400;
}
.kpdh-card .meta {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--rose);
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.kpdh-card.needs-source-review .meta { color: var(--gold); }

.verified-artifact-image {
  position: relative;
  width: 100%;
  min-height: 240px;
  margin: 0;
  overflow: hidden;
  background: #111;
}
.verified-artifact-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.verified-artifact-image figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  background: rgba(0,0,0,.64);
  border: 1px solid rgba(255,255,255,.25);
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1024px) {
  .kpdh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kpdh-hero { grid-template-columns: 1fr; }
  .kpdh-hero .hero-stamp { justify-self: start; }
}
@media (max-width: 768px) {
  .han-only-banner { font-size: 10px; letter-spacing: .2em; flex-direction: column; gap: 6px; align-items: flex-start; }
  nav.kpdh-nav { padding: 16px; gap: 12px; flex-wrap: wrap; }
  nav.kpdh-nav .nav-links { gap: 16px; font-size: 12px; flex-wrap: wrap; }
  nav.kpdh-nav .gh-pair { flex-wrap: wrap; }
  nav.kpdh-nav .logo { font-size: 22px; }
  nav.kpdh-nav .logo span { font-size: 11px; letter-spacing: .2em; margin-left: 8px; }
  nav.kpdh-nav { padding: 8px 12px; gap: 8px; }
  nav.kpdh-nav .nav-links { font-size: 11px; gap: 12px; }
  nav.kpdh-nav .gh-chip { font-size: 10px; padding: 4px 8px; }
  .kpdh-hero { padding: 10px 14px 8px; gap: 14px; }
  .kpdh-hero h1 { font-size: clamp(20px, 4.4vw, 30px); margin-bottom: 8px; max-width: 16ch; }
  body[data-lang="en"] .kpdh-hero h1 { font-size: clamp(16px, 3.6vw, 22px); max-width: 24ch; }
  .kpdh-hero .lede { font-size: 12px; margin-bottom: 6px; }
  .kpdh-hero .lang-badge { padding: 3px 8px; font-size: 8px; margin-bottom: 6px; }
  .kpdh-hero .btn { padding: 7px 14px; font-size: 10px; letter-spacing: .14em; }
  /* Hide decorative 韓 stamp on mobile — it stacks below text in single
     column and burns ~200px of viewport with no informational value. */
  .kpdh-hero .hero-stamp { display: none; }
  .kpdh-divider { padding: 8px 16px 6px; flex-wrap: wrap; }
  .kpdh-schema { margin: 0 16px 24px; }
  .kpdh-schema pre { font-size: 11px; padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kpdh-schema .schema-head { flex-wrap: wrap; gap: 8px; }
  .kpdh-cards { grid-template-columns: 1fr; padding: 0 16px 60px; gap: 18px; }
  .kpdh-card pre, .kpdh-card pre.hgl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* design-review 2026-04-30: mobile compression
   Issue: 64 archive cards × 626px = 40k+ scroll height on mobile.
   Fix: hide code preview on archive cards ≤768px, keep title/meta only.
   Featured cards keep code preview but capped via max-height. */
@media (max-width: 768px) {
  /* Archive cards: collapse to title + meta only (huge mobile scroll fix) */
  .kpdh-card.archive-card pre,
  .kpdh-card.archive-card .file-tag,
  .kpdh-card.archive-card .kpdh-card-image-pending,
  .kpdh-card.archive-card .kpdh-card-figure {
    display: none;
  }
  .kpdh-card.archive-card {
    padding: 16px 18px;
  }
  .kpdh-card.archive-card .num {
    margin-bottom: 6px;
  }
  .kpdh-card.archive-card::after {
    content: "tap → view source";
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 46, 106, 0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--rose);
    text-transform: uppercase;
    font-weight: 700;
  }
  /* Featured cards: cap code preview height with scroll */
  body.kpdh-home #featured-grid .kpdh-card pre,
  body.kpdh-home #featured-grid .kpdh-card pre.hgl {
    max-height: 180px;
    overflow-y: auto;
  }
  /* Nav touch targets: bump anchors to ≥44px tap area */
  nav.kpdh-nav .nav-links a {
    padding: 12px 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  nav.kpdh-nav .gh-chip {
    min-height: 44px;
  }
  nav.kpdh-nav .lang {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* Phone-narrow: keep the talisman stamp from overflowing 360-iPhone-SE viewports
   and prevent .seal-han glyph from busting its 1:1 frame. */
@media (max-width: 375px) {
  nav.kpdh-nav { padding: 12px; }
  nav.kpdh-nav .logo { font-size: 19px; }
  nav.kpdh-nav .nav-links { font-size: 11px; gap: 12px; }
  nav.kpdh-nav .gh-chip { font-size: 10px; padding: 6px 10px; }
  .kpdh-hero { padding: 24px 14px; gap: 18px; }
  .kpdh-hero h1 { font-size: clamp(18px, 5vw, 26px); max-width: 16ch; }
  body[data-lang="en"] .kpdh-hero h1 { font-size: clamp(15px, 4.2vw, 21px); max-width: 22ch; }
  .kpdh-hero .lede { font-size: 14px; }
  .kpdh-hero .lang-badge { font-size: 10px; letter-spacing: .14em; padding: 6px 10px; }
  .kpdh-hero .hero-cta { gap: 8px; }
  .kpdh-hero .btn { padding: 10px 14px; font-size: 10px; }
  .kpdh-hero .hero-stamp { width: clamp(140px, 60vw, 200px); }
  .kpdh-hero .hero-stamp .seal-han { font-size: clamp(80px, 30vw, 120px); }
  .kpdh-hero .hero-stamp .seal-label { font-size: 9px; letter-spacing: .25em; }
  .kpdh-divider h2 { font-size: 22px; }
  .kpdh-divider .han-label { font-size: 10px; }
  .kpdh-schema { margin: 0 12px 20px; }
  .kpdh-schema pre { font-size: 10.5px; padding: 12px; }
  .kpdh-cards { padding: 0 12px 48px; }
}

/* Type-bump 2026-05-05 — small px-based labels were too tight to read.
   Bumps nav, card metadata, code blocks, and image captions ~25% so the
   page feels like a museum wall card, not a terminal log. Headlines and
   body copy already scale via the html { font-size: 18px } root bump.
   Hero + divider use clamp() with px floors/ceilings so we override here
   instead of inheriting root rem. */

.kpdh-hero h1 { font-size: clamp(44px, 5.2vw, 72px); }
body[data-lang="en"] .kpdh-hero h1 { font-size: clamp(34px, 4vw, 56px); }
.kpdh-hero .lede { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; max-width: 640px; }
.kpdh-hero .lang-badge { font-size: 12px; padding: 6px 12px; }
.kpdh-hero .btn { font-size: 14px; padding: 10px 20px; }

.kpdh-divider h2 { font-size: clamp(26px, 3vw, 36px); }
body[data-lang="en"] .kpdh-divider h2 { font-size: clamp(22px, 2.4vw, 30px); }
.kpdh-divider .han-label { font-size: 13px; }

.kpdh-tab-bar .kpdh-tab-btn { font-size: 14px !important; padding: 12px 18px; }

/* Big 韓 seal — the user wanted the right-side stamp to land like a wall
   plaque, not a postage stamp. Roughly 2× width and 1.5× glyph. */
.kpdh-hero .hero-stamp { width: clamp(160px, 16vw, 220px); }
.kpdh-hero .hero-stamp .seal-han { font-size: clamp(96px, 10vw, 140px); }
.kpdh-hero .hero-stamp .seal-label { font-size: 11px; margin-top: 6px; }

/* Rooms tab was hiding every <img> with `display: none !important`, so
   verified hero photos never reached the room strip. Show them, give the
   strip a 2-up grid that breathes, and lay the code label on top of the
   photo for the verified case. */
body.kpdh-home .room-hero-link img { display: block !important; }
body.kpdh-home .room-hero-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body.kpdh-home .room-hero-link.image-room-link {
  position: relative;
  padding: 0;
  min-height: 200px;
  overflow: hidden;
}
body.kpdh-home .room-hero-link.image-room-link img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  opacity: .82;
  transition: opacity .2s, transform .35s;
}
body.kpdh-home .room-hero-link.image-room-link:hover img {
  opacity: 1;
  transform: scale(1.03);
}
body.kpdh-home .room-hero-link.image-room-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,16,13,.85), transparent 55%);
  pointer-events: none;
  display: block;
}
body.kpdh-home .room-hero-link.image-room-link .room-code-label {
  position: absolute !important;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  color: var(--paper) !important;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
body.kpdh-home .room-hero-link.image-room-link .room-code-label small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--han-gold);
  text-transform: uppercase;
}

/* "IMAGE WITHHELD" placeholder box was the right pattern at audit time but
   now reads as broken UI to the visitor. Hide the placeholder div entirely
   on cards — the Han code plate underneath IS the artifact in this museum,
   which is the whole point. We keep the verification metadata in the data
   layer for the licensing trail, but we don't surface it as a warning. */
.kpdh-card .kpdh-card-image-pending { display: none !important; }
.kpdh-card.needs-source-review pre,
.kpdh-card.image-official pre { height: 280px; }

.kpdh-card.image-verified pre { height: auto; max-height: 168px; }

/* Representative-image badge — honest about not-the-exact-piece status. */
.kpdh-card-figure.representative figcaption {
  background: rgba(217, 180, 94, .92);
  color: var(--ink);
  border-color: var(--han-gold);
}
body.kpdh-home .room-hero-link.image-room-link.representative .room-code-label small {
  color: var(--han-gold);
}

nav.kpdh-nav .logo { font-size: 32px; }
nav.kpdh-nav .logo span { font-size: 16px; }
nav.kpdh-nav .gh-chip { font-size: 13px; padding: 8px 16px; }
nav.kpdh-nav .gh-chip svg.gh-icon { width: 16px; height: 16px; }
nav.kpdh-nav .gh-chip .gh-arrow { font-size: 15px; }
nav.kpdh-nav .lang { font-size: 13px; padding: 8px 16px; }

.kpdh-tab-bar .kpdh-tab-btn { font-size: 14px !important; }

.kpdh-card .seal { font-size: 28px; width: 54px; height: 54px; }
.kpdh-card .num { font-size: 13px; }
.kpdh-card .file-tag { font-size: 11px; }
.kpdh-card-figure figcaption { font-size: 11px; padding: 6px 9px; }
.kpdh-card-image-pending span { font-size: 13px; }
.kpdh-card-image-pending small { font-size: 11px; }
.kpdh-card pre,
.kpdh-card pre code { font-size: 13px; line-height: 1.6; }
.kpdh-card.image-verified pre { height: 168px; }
.kpdh-card pre { height: 220px; }
.kpdh-card .title-en { font-size: 24px; }
.kpdh-card .title-kr { font-size: 16px; }
.kpdh-card .meta { font-size: 13px; }

.kpdh-schema-details summary .file,
.kpdh-schema-details summary .badge,
.kpdh-schema-details summary .kpdh-schema-toggle { font-size: 13px; }
.kpdh-schema pre { font-size: 14px; line-height: 1.65; }

@media (max-width: 768px) {
  .kpdh-card pre,
  .kpdh-card pre code { font-size: 12px; }
  .kpdh-card .title-en { font-size: 20px; }
}