/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * Hallmark · CONTENT LAYER · design-system: design.md · designed-as-app
 * genre: modern-minimal · macrostructure: Long Document (index: Index-First)
 * theme: Cobalt (YIYOL brand-anchored) · nav: N1b · footer: Ft1
 * pages: blog/index.html + article pages
 *
 * Replaces the per-page inline <style> post layout and the retired style.css.
 * The two calculator pages keep their own `calc-*` widget CSS — that is working
 * functionality, not a visual layer, and is out of scope for a redesign.
 */

/* ============================================================
   Blog index — a hairline index, not an icon-card grid (gate 3)
   ============================================================ */
.blog-hero {
  margin-top: var(--nav-h);
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  text-align: left;
  background: none;
  color: var(--color-ink-2);
}
.blog-hero h1 { font-size: var(--text-display-s); font-weight: 600; color: var(--color-ink); }
.blog-hero p { margin-top: var(--space-sm); font-size: var(--text-md); max-width: var(--measure); }

.blog-container { max-width: var(--shell); margin-inline: auto; padding: 0 var(--space-md) var(--space-3xl); }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-rule-strong); }

/* DOM order is: .blog-card-icon, .blog-card-body > (tag, title, desc, meta).
   The meta is a child of BODY, not of CARD — so the date rail is placed on
   .blog-card-body, which is where those four elements actually live. */
.blog-card {
  display: block;
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-ink-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.blog-card:hover { background: var(--color-paper-2); }
.blog-card-icon { display: none; }      /* no icon library site-wide */

.blog-card-body {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  column-gap: var(--space-lg);
  align-items: baseline;
}
.blog-card-tag {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent);
}
.blog-card-title {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-3xs);
}
.blog-card-desc {
  grid-column: 2;
  margin-top: var(--space-2xs);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.blog-card-meta {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.blog-card-link { color: var(--color-accent); white-space: nowrap; }
.blog-card-link::after { content: " →"; }
.blog-card i { display: none; }

/* ============================================================
   Article — Long Document. One measure column, inline heads.
   ============================================================ */
.post-hero {
  margin-top: var(--nav-h);
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-md) var(--space-lg);
  background: none;
  color: var(--color-ink-2);
  text-align: left;
  overflow: visible;
}
.post-hero::before { content: none; }
.post-hero-content { max-width: none; margin: 0; padding: 0; }
.post-breadcrumb {
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-muted);
}
.post-breadcrumb a { color: var(--color-accent); }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb span:not([class]) { color: var(--color-muted); margin-inline: var(--space-2xs); }
.post-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.28;
  margin-bottom: var(--space-md);
}
.post-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-muted);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.post-meta-date { display: inline-flex; align-items: baseline; gap: var(--space-3xs); font-variant-numeric: tabular-nums; }
.post-meta i, .post-meta-date i { display: none; }
.post-tags { display: flex; gap: var(--space-2xs); flex-wrap: wrap; justify-content: flex-start; }
.post-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  border: var(--rule-hair) solid var(--color-accent-hair);
  border-radius: var(--radius-ctl);
  padding: var(--space-4xs) var(--space-2xs);
}

.post-container { max-width: 52rem; margin-inline: auto; padding: var(--space-xl) var(--space-md) var(--space-3xl); }
.post-article { font-size: var(--text-md); line-height: 1.85; color: var(--color-ink-2); }
.post-article > * + * { margin-top: var(--space-sm); }
.post-article h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}
.post-article h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); margin-top: var(--space-xl); }
.post-article h4 { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); margin-top: var(--space-lg); }
.post-article p { max-width: var(--measure); }
.post-article strong { color: var(--color-ink); font-weight: 600; }
.post-article a { color: var(--color-accent); border-bottom: var(--rule-hair) solid var(--color-accent-hair); }
.post-article a:hover { border-bottom-color: var(--color-accent); }
.post-article ul, .post-article ol { margin-left: 0; max-width: var(--measure); }
.post-article li { position: relative; padding-left: var(--space-md); margin-top: var(--space-2xs); }
.post-article ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.82em;
  width: 8px; height: var(--rule-hair); background: var(--color-rule-strong);
}
.post-article ol { counter-reset: yl-ol; }
.post-article ol > li { counter-increment: yl-ol; }
.post-article ol > li::before {
  content: counter(yl-ol) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.post-article blockquote {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.post-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-paper-3);
  border-radius: var(--radius-ctl);
  padding: var(--space-4xs) var(--space-3xs);
}
.post-article pre {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-graphite);
  color: var(--color-on-dark);
  border-radius: var(--radius-card);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.post-article pre code { background: none; padding: 0; color: inherit; }
.post-article img { margin-block: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.post-article figure { margin-block: var(--space-lg); }
.post-article figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--color-muted);
}
.post-article table {
  width: 100%;
  margin-block: var(--space-lg);
  font-size: var(--text-base);
  text-align: left;
}
.post-article th, .post-article td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.post-article thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 500;
}
.post-article hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin-block: var(--space-xl); }

/* ============================================================
   Responsive
   ============================================================ */
/* Data tables need their columns, so below the breakpoint each table becomes
   its own horizontal scroller rather than pushing the page past the viewport
   (gate 34). No markup wrapper needed. */
@media (max-width: 860px) {
  /* body.yl prefix is required: the calculator's inline <style> loads after this
     file and sets `overflow: hidden` at equal specificity, which clips the wide
     table instead of letting it scroll. */
  body.yl .post-article table,
  body.yl .calc-ref-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.yl .post-article table thead th,
  body.yl .calc-ref-table thead th { white-space: nowrap; }

  .blog-hero { padding-block: var(--space-xl) var(--space-md); }
  .blog-card-body { grid-template-columns: minmax(0, 1fr); }
  .blog-card-tag, .blog-card-title, .blog-card-desc { grid-column: 1; }
  .blog-card-meta {
    grid-column: 1; grid-row: auto;
    flex-direction: row; gap: var(--space-md);
    margin-top: var(--space-2xs);
  }
  .post-hero { padding-block: var(--space-xl) var(--space-md); }
  .post-container { padding-block: var(--space-lg) var(--space-2xl); }
  .post-article h2 { margin-top: var(--space-xl); }
}

/* ============================================================
   Legacy variable bridge — the two calculator pages keep their own working
   `calc-*` widget CSS, which referenced variables defined in the retired
   the retired assets/css/style.css. Aliasing those names onto the tokens repairs
   every widget rule at once without touching the widget CSS itself.
   ============================================================ */
:root {
  --primary-color:   var(--color-ink);
  --primary-light:   var(--color-ink-2);
  --primary-dark:    var(--color-graphite);
  --accent-color:    var(--color-accent);
  --accent-hover:    var(--color-accent-hover);
  --text-primary:    var(--color-ink);
  --text-secondary:  var(--color-ink-2);
  --text-light:      var(--color-muted);
  --text-white:      var(--color-accent-ink);
  --bg-primary:      var(--color-paper);
  --bg-secondary:    var(--color-paper-2);
  --bg-accent:       var(--color-paper-3);
  --bg-dark:         var(--color-graphite);
  --border-color:    var(--color-rule);
  --shadow-sm:       var(--shadow-lift);
  --shadow:          var(--shadow-lift);
  --shadow-md:       var(--shadow-pop);
  --shadow-lg:       var(--shadow-pop);
  --transition-base: color var(--dur-fast) var(--ease-out),
                     background var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out);
}

/* ============================================================
   Calculator pages — brought into the system.
   The hard-coded dark hero and result cards predate the tokens; base heading
   colour (body.yl h1) out-specifies them, so these rules restate the surfaces
   using on-dark tokens at matching specificity.
   ============================================================ */
/* The dark banner is replaced by the system's light page head (design.md). */
body.yl .calc-hero {
  margin-top: var(--nav-h);
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  background: none;
  color: var(--color-ink-2);
  text-align: left;
  overflow: visible;
}
body.yl .calc-hero::before { content: none; }
body.yl .calc-hero-content { max-width: none; margin: 0; padding: 0; }
body.yl .calc-hero h1 {
  font-size: var(--text-display-s);
  font-weight: 600;
  color: var(--color-ink);
}
body.yl .calc-hero p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: var(--measure); }
body.yl .calc-breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}
body.yl .calc-breadcrumb a { color: var(--color-accent); }
body.yl .calc-breadcrumb span:not([class]) { color: var(--color-muted); margin-inline: var(--space-2xs); }

/* The result cards stay dark — they are this page's one graphite band. */
body.yl .calc-result-card {
  background: var(--color-graphite);
  border-radius: var(--radius-card);
  color: var(--color-on-dark);
}
body.yl .calc-result-card::before { content: none; }
body.yl .calc-result-label { color: var(--color-on-dark-2); }
body.yl .calc-result-value { color: var(--color-accent-bright); }
body.yl .calc-result-unit  { color: var(--color-on-dark-2); }
body.yl .calc-result-sub   { color: var(--color-on-dark-2); }

body.yl .calc-ref-table th {
  background: var(--color-graphite);
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
}
body.yl .calc-tab.active { background: var(--color-paper); color: var(--color-accent); }
body.yl .calc-input:focus-visible, body.yl .calc-select:focus-visible { border-color: var(--color-accent); }

/* The calculator's category pills measured 4.38:1 at 0.68rem bold — under AA.
   Retinted from tokens; the hairline carries the shape instead of a wash. */
body.yl .pill {
  background: none;
  border: var(--rule-hair) solid var(--color-rule-strong);
  color: var(--color-muted);
  border-radius: var(--radius-ctl);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}
body.yl .pill.data { border-color: var(--color-accent-hair); color: var(--color-accent); }

/* The calculator encoded its two disk categories with a second hue (green),
   which measured 3.21:1 / 3.43:1 — under AA, and design.md locks the site to a
   single accent. The distinction survives as hairline + weight instead of hue. */
body.yl .pill.sys {
  background: none;
  border-color: var(--color-rule-strong);
  color: var(--color-ink-2);
}
body.yl .calc-hdd-item.recommended,
body.yl .calc-hdd-item.recommended.sys {
  background: var(--color-paper-3);
  border-color: var(--color-ink-2);
  color: var(--color-ink);
  font-weight: 600;
}
body.yl .calc-hdd-item.recommended.data {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   Legal documents (privacy.ko.html / privacy.en.html)
   The markup keeps its `privacy-l1..l4` level classes; they carry the
   document's outline, so they map onto the type scale rather than the
   original ad-hoc pixel sizes (one of which, `font-size: 20`, had no unit).
   ============================================================ */
.privacy-contents .privacy-para { margin-top: var(--space-xl); }
.privacy-contents .privacy-l1 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: var(--tracking-display);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  margin-bottom: var(--space-sm);
}
.privacy-contents .privacy-l2 {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.privacy-contents .privacy-l2 + .privacy-l2 { margin-top: var(--space-2xs); }
.privacy-contents ul.privacy-l3,
.privacy-contents ol.privacy-l3 { margin-top: var(--space-sm); }
.privacy-contents .privacy-l3 { font-size: var(--text-base); color: var(--color-ink-2); }
.privacy-contents li.privacy-l3 { margin-top: var(--space-2xs); }
.privacy-contents .privacy-l4 {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.privacy-contents li.privacy-l4 { margin-top: var(--space-2xs); }
.privacy-contents li .privacy-l4 { margin-top: var(--space-3xs); padding-left: 0; }
.privacy-contents li::before { top: 0.9em; }