/* ============================================================
   ARKHIVE — Brand Kit
   6 tokens only. Signal Red = accent only. Whitespace = trust.
   ============================================================ */

:root {
  /* ---- 6 brand tokens (immutable) ---- */
  --ink:   #1C1C1E;  /* Deep Ink   — masthead / header / anchor */
  --dark:  #2C2C2E;  /* Primary Dark — dark bg / surface */
  --red:   #B03020;  /* Signal Red — ACCENT ONLY (cta/line/badge) */
  --white: #FFFFFF;  /* Info space / card bg */
  --off:   #F5F4F2;  /* Off-White — surface / sub bg */
  --stone: #7A7A72;  /* Stone Gray — sub-text / caption (light bg only) */

  /* ---- Trust Light (grade system ONLY) ---- */
  --tg-fill: #E8F5EA; --tg-line: #2D7A3A; --tg-head: #1E5C28;
  --ty-fill: #FFF6D6; --ty-line: #A07818; --ty-head: #7A5A10;
  --tr-fill: #FDECEA; --tr-line: #B03020; --tr-head: #8A2218;

  /* ---- tweakable (overridden inline by App) ---- */
  --radius: 2px;
  --gap: 1;            /* spacing multiplier */
  --col-min: 240px;    /* grid density */
  --font-display: 'Barlow Condensed', 'Noto Sans KR', sans-serif;
  --font-body: 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ============================================================
   Wordmark
   ============================================================ */
.ark-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.82;
  text-transform: uppercase;
  font-feature-settings: "kern" 1;
}
.ark-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ark-kr { font-family: var(--font-body); word-break: keep-all; text-wrap: pretty; }

/* tiny eyebrow label, mono, tracked out */
.ark-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone);
}

/* red horizontal accent rule — max 2 per surface */
.ark-redline { height: 2px; background: var(--red); border: 0; }


/* ============================================================
   Brand Mark — 벌집(HIVE) + 중앙 렌즈. 색은 background로 제어.
   교체: 기존 9px 빨강 사각형 → .ark-mark
   ============================================================ */
.ark-mark{
  display:inline-block;
  width:1.05em; height:1.05em;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20fill='%23000'%20d='M178.06%20123.71%20Q182.56%20131.50%20178.06%20139.29%20L173.06%20147.95%20Q168.56%20155.75%20159.56%20155.75%20L149.56%20155.75%20Q140.56%20155.75%20136.06%20147.95%20L131.06%20139.29%20Q126.56%20131.50%20131.06%20123.71%20L136.06%20115.05%20Q140.56%20107.25%20149.56%20107.25%20L159.56%20107.25%20Q168.56%20107.25%20173.06%20115.05%20Z%20M123.50%20155.21%20Q128.00%20163.00%20123.50%20170.79%20L118.50%20179.45%20Q114.00%20187.25%20105.00%20187.25%20L95.00%20187.25%20Q86.00%20187.25%2081.50%20179.45%20L76.50%20170.79%20Q72.00%20163.00%2076.50%20155.21%20L81.50%20146.55%20Q86.00%20138.75%2095.00%20138.75%20L105.00%20138.75%20Q114.00%20138.75%20118.50%20146.55%20Z%20M68.94%20123.71%20Q73.44%20131.50%2068.94%20139.29%20L63.94%20147.95%20Q59.44%20155.75%2050.44%20155.75%20L40.44%20155.75%20Q31.44%20155.75%2026.94%20147.95%20L21.94%20139.29%20Q17.44%20131.50%2021.94%20123.71%20L26.94%20115.05%20Q31.44%20107.25%2040.44%20107.25%20L50.44%20107.25%20Q59.44%20107.25%2063.94%20115.05%20Z%20M68.94%2060.71%20Q73.44%2068.50%2068.94%2076.29%20L63.94%2084.95%20Q59.44%2092.75%2050.44%2092.75%20L40.44%2092.75%20Q31.44%2092.75%2026.94%2084.95%20L21.94%2076.29%20Q17.44%2068.50%2021.94%2060.71%20L26.94%2052.05%20Q31.44%2044.25%2040.44%2044.25%20L50.44%2044.25%20Q59.44%2044.25%2063.94%2052.05%20Z%20M123.50%2029.21%20Q128.00%2037.00%20123.50%2044.79%20L118.50%2053.45%20Q114.00%2061.25%20105.00%2061.25%20L95.00%2061.25%20Q86.00%2061.25%2081.50%2053.45%20L76.50%2044.79%20Q72.00%2037.00%2076.50%2029.21%20L81.50%2020.55%20Q86.00%2012.75%2095.00%2012.75%20L105.00%2012.75%20Q114.00%2012.75%20118.50%2020.55%20Z%20M178.06%2060.71%20Q182.56%2068.50%20178.06%2076.29%20L173.06%2084.95%20Q168.56%2092.75%20159.56%2092.75%20L149.56%2092.75%20Q140.56%2092.75%20136.06%2084.95%20L131.06%2076.29%20Q126.56%2068.50%20131.06%2060.71%20L136.06%2052.05%20Q140.56%2044.25%20149.56%2044.25%20L159.56%2044.25%20Q168.56%2044.25%20173.06%2052.05%20Z'/%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M131.50%2090.47%20Q137.00%20100.00%20131.50%20109.53%20L124.00%20122.52%20Q118.50%20132.04%20107.50%20132.04%20L92.50%20132.04%20Q81.50%20132.04%2076.00%20122.52%20L68.50%20109.53%20Q63.00%20100.00%2068.50%2090.47%20L76.00%2077.48%20Q81.50%2067.96%2092.50%2067.96%20L107.50%2067.96%20Q118.50%2067.96%20124.00%2077.48%20Z%20M115.50%20100.00%20A15.5%2015.5%200%201%200%2084.50%20100.00%20A15.5%2015.5%200%201%200%20115.50%20100.00%20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20fill='%23000'%20d='M178.06%20123.71%20Q182.56%20131.50%20178.06%20139.29%20L173.06%20147.95%20Q168.56%20155.75%20159.56%20155.75%20L149.56%20155.75%20Q140.56%20155.75%20136.06%20147.95%20L131.06%20139.29%20Q126.56%20131.50%20131.06%20123.71%20L136.06%20115.05%20Q140.56%20107.25%20149.56%20107.25%20L159.56%20107.25%20Q168.56%20107.25%20173.06%20115.05%20Z%20M123.50%20155.21%20Q128.00%20163.00%20123.50%20170.79%20L118.50%20179.45%20Q114.00%20187.25%20105.00%20187.25%20L95.00%20187.25%20Q86.00%20187.25%2081.50%20179.45%20L76.50%20170.79%20Q72.00%20163.00%2076.50%20155.21%20L81.50%20146.55%20Q86.00%20138.75%2095.00%20138.75%20L105.00%20138.75%20Q114.00%20138.75%20118.50%20146.55%20Z%20M68.94%20123.71%20Q73.44%20131.50%2068.94%20139.29%20L63.94%20147.95%20Q59.44%20155.75%2050.44%20155.75%20L40.44%20155.75%20Q31.44%20155.75%2026.94%20147.95%20L21.94%20139.29%20Q17.44%20131.50%2021.94%20123.71%20L26.94%20115.05%20Q31.44%20107.25%2040.44%20107.25%20L50.44%20107.25%20Q59.44%20107.25%2063.94%20115.05%20Z%20M68.94%2060.71%20Q73.44%2068.50%2068.94%2076.29%20L63.94%2084.95%20Q59.44%2092.75%2050.44%2092.75%20L40.44%2092.75%20Q31.44%2092.75%2026.94%2084.95%20L21.94%2076.29%20Q17.44%2068.50%2021.94%2060.71%20L26.94%2052.05%20Q31.44%2044.25%2040.44%2044.25%20L50.44%2044.25%20Q59.44%2044.25%2063.94%2052.05%20Z%20M123.50%2029.21%20Q128.00%2037.00%20123.50%2044.79%20L118.50%2053.45%20Q114.00%2061.25%20105.00%2061.25%20L95.00%2061.25%20Q86.00%2061.25%2081.50%2053.45%20L76.50%2044.79%20Q72.00%2037.00%2076.50%2029.21%20L81.50%2020.55%20Q86.00%2012.75%2095.00%2012.75%20L105.00%2012.75%20Q114.00%2012.75%20118.50%2020.55%20Z%20M178.06%2060.71%20Q182.56%2068.50%20178.06%2076.29%20L173.06%2084.95%20Q168.56%2092.75%20159.56%2092.75%20L149.56%2092.75%20Q140.56%2092.75%20136.06%2084.95%20L131.06%2076.29%20Q126.56%2068.50%20131.06%2060.71%20L136.06%2052.05%20Q140.56%2044.25%20149.56%2044.25%20L159.56%2044.25%20Q168.56%2044.25%20173.06%2052.05%20Z'/%3E%3Cpath%20fill='%23000'%20fill-rule='evenodd'%20d='M131.50%2090.47%20Q137.00%20100.00%20131.50%20109.53%20L124.00%20122.52%20Q118.50%20132.04%20107.50%20132.04%20L92.50%20132.04%20Q81.50%20132.04%2076.00%20122.52%20L68.50%20109.53%20Q63.00%20100.00%2068.50%2090.47%20L76.00%2077.48%20Q81.50%2067.96%2092.50%2067.96%20L107.50%2067.96%20Q118.50%2067.96%20124.00%2077.48%20Z%20M115.50%20100.00%20A15.5%2015.5%200%201%200%2084.50%20100.00%20A15.5%2015.5%200%201%200%20115.50%20100.00%20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex:none;
  vertical-align:baseline;
}
.ark-mark.on-dark{ background:var(--red); }
.ark-mark.ink{ background:var(--ink); }
.ark-mark.white{ background:#fff; }

/* ============================================================
   Trust Light badge
   ============================================================ */
.trust {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px 4px 7px;
  border: 1px solid;
  border-radius: calc(var(--radius) * 0.6);
  white-space: nowrap;
  background: #fff;
}
.trust .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.trust.green  { color: var(--tg-head); border-color: var(--tg-line); background: var(--tg-fill); }
.trust.green  .dot { background: var(--tg-line); }
.trust.yellow { color: var(--ty-head); border-color: var(--ty-line); background: var(--ty-fill); }
.trust.yellow .dot { background: var(--ty-line); }
.trust.red    { color: var(--tr-head); border-color: var(--tr-line); background: var(--tr-fill); }
.trust.red    .dot { background: var(--tr-line); }

/* solid pill variant for dark surfaces */
.trust.solid { background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border-color: rgba(255,255,255,0.18); }
.trust.solid.green  { color: #8FE0A0; }
.trust.solid.yellow { color: #F2D479; }
.trust.solid.red    { color: #E89488; }

/* ============================================================
   Photo placeholder — archival frame
   ============================================================ */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius);
  display: block;
  isolation: isolate;
}
.photo .tone { position: absolute; inset: 0; z-index: 0; }
/* subtle archival hairline texture */
.photo .tex {
  position: absolute; inset: 0; z-index: 1; opacity: 0.5;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
}
/* giant index watermark */
.photo .idx {
  position: absolute; right: -4px; bottom: -14px; z-index: 1;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 22vw, 150px); line-height: 0.7;
  color: rgba(255,255,255,0.05); letter-spacing: -0.04em;
  user-select: none; pointer-events: none;
}
/* crop marks */
.photo .crop { position: absolute; z-index: 2; width: 13px; height: 13px; opacity: 0.32; }
.photo .crop::before, .photo .crop::after { content:""; position:absolute; background: rgba(255,255,255,0.7); }
.photo .crop::before { width: 13px; height: 1px; }
.photo .crop::after  { width: 1px; height: 13px; }
.photo .crop.tl { top: 9px; left: 9px; }
.photo .crop.tr { top: 9px; right: 9px; }
.photo .crop.tr::before { right: 0; } .photo .crop.tr::after { right: 0; }
.photo .crop.bl { bottom: 9px; left: 9px; }
.photo .crop.bl::before { bottom: 0; } .photo .crop.bl::after { bottom: 0; }
.photo .crop.br { bottom: 9px; right: 9px; }
.photo .crop.br::before { right:0; bottom:0; } .photo .crop.br::after { right:0; bottom:0; }
/* centered meta */
.photo .meta {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 16px;
}
.photo .meta .frame {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.42); text-transform: uppercase;
}
.photo .meta .spec {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.26);
}
/* badge slot */
.photo .badge-tl { position: absolute; z-index: 4; top: 10px; left: 10px; }
.photo .badge-bl { position: absolute; z-index: 4; left: 12px; bottom: 12px; right: 12px; }

/* hover affordance */
.photo .hov {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(to top, rgba(28,28,30,0.92) 0%, rgba(28,28,30,0) 55%);
  opacity: 0; transition: opacity 0.28s ease;
  display: flex; align-items: flex-end; padding: 14px;
}
.photo:hover .hov { opacity: 1; }
.photo .hov .cap {
  color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 14px;
  transform: translateY(6px); transition: transform 0.28s ease; line-height: 1.2;
}
.photo:hover .hov .cap { transform: translateY(0); }
.photo .hov .cap small {
  display:block; font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-top: 4px;
}

/* tone variants (low-saturation, brand-derived) */
.tone-ink   { background: radial-gradient(120% 120% at 70% 10%, #34343a 0%, #1C1C1E 60%); }
.tone-dark  { background: radial-gradient(120% 130% at 30% 20%, #3a3a40 0%, #26262a 65%); }
.tone-warm  { background: radial-gradient(120% 120% at 60% 30%, #3a322f 0%, #211d1c 70%); }
.tone-steel { background: radial-gradient(120% 120% at 40% 10%, #34383e 0%, #1d2024 70%); }
.tone-stone { background: radial-gradient(120% 120% at 50% 20%, #4a4844 0%, #2b2a27 72%); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-red   { background: var(--red); color: #fff; }
.btn-red:hover { background: #C5392A; }
.btn-ink   { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(28,28,30,0.22); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-d { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost-d:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn .arrow { font-family: var(--font-mono); }

/* search bar */
.ark-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(28,28,30,0.16);
  border-radius: var(--radius); padding: 0 6px 0 16px; height: 54px;
}
.ark-search input {
  border: 0; outline: 0; flex: 1; height: 100%;
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: transparent;
}
.ark-search input::placeholder { color: var(--stone); }

/* category chip */
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 13px; border-radius: calc(var(--radius) + 1px);
  border: 1px solid rgba(28,28,30,0.18); color: var(--ink);
  background: #fff; cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .n { color: var(--stone); margin-left: 6px; }
.chip.on .n { color: rgba(255,255,255,0.5); }

/* divider label */
.sec-label {
  display:flex; align-items: baseline; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--stone);
}

/* ============================================================
   Stat block
   ============================================================ */
.ark-stat-fig { display: flex; align-items: baseline; gap: 4px; }
.ark-stat-fig .num {
  font-family: var(--font-display); font-weight: 900; line-height: 0.9;
  font-size: 52px; letter-spacing: -0.02em;
}
.ark-stat-fig .unit {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.65;
}
.ark-stat-kr { font-family: var(--font-body); font-weight: 700; font-size: 13px; margin-top: 8px; }
.ark-stat-en {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.5; margin-top: 3px;
}

/* ============================================================
   Masthead (shared shell)
   ============================================================ */
.mast {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 32px;
}
.mast .left { display: flex; align-items: center; gap: 28px; }
.mast .logo { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.01em; }
.mast .logo .r { color: var(--red); }
.mast nav { display: flex; gap: 22px; }
.mast nav a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; opacity: 0.7; transition: opacity 0.15s ease;
}
.mast nav a:hover { opacity: 1; }
.mast .right { display: flex; align-items: center; gap: 14px; }

/* grids */
.ark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr)); }
.gap-tight { gap: calc(10px * var(--gap)); }
.gap-reg   { gap: calc(18px * var(--gap)); }
.gap-loose { gap: calc(28px * var(--gap)); }

* { box-sizing: border-box; }