/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · tone: technical · anchor hue: 255
 * theme: custom · vibe: "graphite instrument panel, one signal-green accent" · paper: oklch(16% 0.012 255) · accent: oklch(79% 0.16 155)
 * display: IBM Plex Sans KR 700 · body: IBM Plex Sans KR 400 · mono: IBM Plex Mono (wordmark, labels, code)
 * axes: dark / geometric-sans / chromatic-green ~155 · enrichment: none (the map is the image) · nav: N13 · footer: Ft1
 * context: user-provided (audience: devs + clients · use: 문의하기 → mail · tone: technical) · studied: no
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · v1.1 reading ramp: text L95/89/74, surfaces +4L, accent text L79 / fill L66
 * Tistory skin "JC-Lab" v1.0 — tokens are inlined here because a Tistory skin ships a single style.css
 */

/* ── tokens ───────────────────────────────────────────────── */
:root {
  /* dark ramp — hierarchy by lightness, not hue (Primer · Radix · Material · Tailwind prose-invert, measured)
   * surfaces +4L per step · borders L29/L37 · text tiers L95 / L89 / L74 (APCA Lc 97 / 84 / 56 on paper) */
  --color-paper:      oklch(16% 0.012 255);
  --color-paper-2:    oklch(20% 0.013 255);
  --color-paper-3:    oklch(24% 0.014 255);
  --color-inset:      oklch(12.5% 0.010 255);
  --color-rule-2:     oklch(29% 0.014 255);
  --color-rule:       oklch(37% 0.016 255);
  --color-muted:      oklch(74% 0.014 255);
  --color-ink-2:      oklch(89% 0.008 255);
  --color-ink:        oklch(95% 0.006 255);
  --color-accent:     oklch(79% 0.16 155);       /* text tier (Radix step-11 pattern) */
  --color-accent-fill: oklch(66% 0.15 155);      /* fill tier (step-9) — reserved for large fills */
  --color-accent-soft: oklch(79% 0.16 155 / 0.12);
  --color-accent-line: oklch(79% 0.16 155 / 0.45);
  --color-accent-ink: oklch(18% 0.03 155);
  --color-focus:      oklch(85% 0.17 155);
  --color-danger:     oklch(70% 0.16 25);
  --color-scrim:      oklch(10% 0.01 255 / 0.72);
  --color-code-bg:    var(--color-inset);

  --font-display: "IBM Plex Sans KR", ui-sans-serif, sans-serif;
  --font-body:    "IBM Plex Sans KR", ui-sans-serif, sans-serif;
  --font-mono:    "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-body: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display: clamp(2.25rem, 4.2vw + 0.75rem, 4.25rem);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --nav-h: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --rule-hair: 1px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --z-sticky-nav: 300;
  --z-modal:      400;
}

/* ── base ─────────────────────────────────────────────────── */
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--page-gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── nav (N13) ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-sm); height: var(--nav-h); }
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-md); line-height: 1;
  color: var(--color-ink); letter-spacing: -0.02em; white-space: nowrap;
}
.wordmark i { width: 8px; height: 8px; background: var(--color-accent); border-radius: 1px; }
.searchpill {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  width: 38px; height: 38px; padding: 0;
  background: var(--color-paper-2); color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out);
}
.searchpill:hover { border-color: var(--color-rule); }
.searchpill svg { width: 15px; height: 15px; flex: none; }
.searchpill__text, .searchpill kbd { display: none; }
.searchpill__text { flex: 1; text-align: left; white-space: nowrap; }
kbd {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; padding: 0 var(--space-2xs);
}
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-lg); }
.nav__menu { display: none; }
.nav__menu ul { list-style: none; display: flex; gap: var(--space-lg); }
.nav__menu a { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__menu a:hover { color: var(--color-ink); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 38px; padding: 0 var(--space-md); border-radius: var(--radius-sm);
  font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-focus); }
.btn--outline { border-color: var(--color-rule); color: var(--color-ink); height: 46px; padding: 0 var(--space-lg); font-size: var(--text-base); }
.btn--outline:hover { border-color: var(--color-accent); }
.btn--ghost { border-color: var(--color-rule-2); color: var(--color-ink-2); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-ink); }
.link {
  background: none; border: 0; padding: 0 0 1px; cursor: pointer;
  font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap;
  border-bottom: 1px solid var(--color-rule); transition: border-color var(--dur-short) var(--ease-out);
}
.link:hover { border-color: var(--color-accent); }

/* ── home only ────────────────────────────────────────────── */
.home-only, .head-home { display: none; }
#tt-body-index .home-only { display: block; }
#tt-body-index .head-home { display: inline; }
#tt-body-index a.head-home { display: inline-block; }
#tt-body-index .head-list, #tt-body-index .count { display: none; }
#tt-body-index.is-paged .home-only, #tt-body-index.is-paged a.head-home { display: none; }
#tt-body-index.is-paged .head-home { display: none; }
#tt-body-index.is-paged .head-list { display: inline; }

.orient { padding-block: var(--space-2xl) var(--space-3xl); }
.orient__grid { display: grid; gap: var(--space-lg); }
.orient h1 {
  font-family: var(--font-display); font-weight: 700; color: var(--color-ink);
  font-size: var(--text-display); line-height: 1.12; letter-spacing: -0.035em;
  overflow-wrap: anywhere; min-width: 0;
}
.orient h1 .hl { color: var(--color-accent); }
.orient p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.65; max-width: 34em; }

.map-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-lg); }
.map-title h2, .posts__head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--color-ink); letter-spacing: -0.03em; line-height: 1.25; }

.map { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper); overflow: hidden; }
.map__head { display: none; }
.map__head span { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-md) var(--space-lg); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.map__head + .row { border-top: 0; }
.proj { display: grid; gap: var(--space-2xs); align-content: start; }
.proj h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.2; }
.proj .repo { font: 400 var(--text-sm)/1.4 var(--font-mono); color: var(--color-muted); white-space: nowrap; justify-self: start; transition: color var(--dur-short) var(--ease-out); }
.proj .repo:hover { color: var(--color-accent); }
.kind { font-size: var(--text-xs); color: var(--color-muted); display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--color-accent); }
.kind--own::before { background: var(--color-accent); }
.node { position: relative; align-self: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); padding: var(--space-sm) var(--space-md); transition: border-color var(--dur-short) var(--ease-out); }
.node b { display: block; color: var(--color-ink); font-weight: 600; line-height: 1.35; }
.node small { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; margin-top: var(--space-3xs); }
.node .role { display: block; font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-xs); }
.node--many { box-shadow: 5px 5px 0 -1px var(--color-paper-2), 5px 5px 0 0 var(--color-rule), 10px 10px 0 -1px var(--color-paper-2), 10px 10px 0 0 var(--color-rule-2); margin-right: 10px; }
.node--sandbox { outline: 1px dashed var(--color-muted); outline-offset: 6px; }
.edge { display: grid; justify-items: center; padding-block: var(--space-xs); }
.edge__line { width: 1px; height: 28px; background: var(--color-rule); position: relative; transition: background-color var(--dur-short) var(--ease-out); }
.edge__line::after { content: ""; position: absolute; bottom: -1px; left: -4px; border: 4.5px solid transparent; border-top-color: var(--color-rule); border-bottom: 0; }
.edge__label { font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-muted); text-align: center; padding: var(--space-2xs) 0; }
@media (hover: hover) {
  .row:hover { background: var(--color-paper-2); }
  .row:hover .node { border-color: var(--color-accent); }
  .row:hover .edge__line { background: var(--color-accent); }
  .row:hover .edge__line::after { border-top-color: var(--color-accent); }
}
.legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); background: var(--color-paper-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.legend .l-line { width: 18px; height: 1px; background: var(--color-ink-2); }
.legend .l-dash { width: 18px; border-top: 1px dashed var(--color-muted); }

.after-map { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-block: var(--space-xl) var(--space-3xl); }
.after-map p { color: var(--color-muted); font-size: var(--text-sm); max-width: 44em; }
.after-map .mail { color: var(--color-ink-2); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.after-map .mail:hover { border-color: var(--color-accent); }

/* ── lists ────────────────────────────────────────────────── */
.posts { padding-block: var(--space-2xl) var(--space-xl); }
#tt-body-index .posts { border-top: var(--rule-hair) solid var(--color-rule-2); }
.posts__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.posts__head .count { font: 500 var(--text-sm)/1 var(--font-mono); color: var(--color-accent); margin-left: var(--space-xs); letter-spacing: 0; }
.list-desc { display: none; color: var(--color-muted); margin: calc(var(--space-md) * -1) 0 var(--space-lg); max-width: 60ch; }
#tt-body-category .list-desc { display: block; }
.post { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.post__meta { font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); font-variant-numeric: tabular-nums; display: flex; gap: var(--space-sm); }
.post__meta b { color: var(--color-accent); font-weight: 500; }
.post__body { min-width: 0; }
.post h3 { font-weight: 600; font-size: var(--text-md); color: var(--color-ink); line-height: 1.4; letter-spacing: -0.015em; }
.post h3 img { display: none; } /* Tistory "new" badge */
.post p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60em; }
.post__thumb { display: none; }
.post:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post--notice { border-top: 0; }
.empty { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); }
.empty__title { color: var(--color-ink); font-weight: 600; margin-bottom: var(--space-2xs); }

.paging { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding-block: var(--space-lg) var(--space-3xl); font: 500 var(--text-sm)/1 var(--font-mono); }
.paging__nums { display: flex; gap: var(--space-2xs); }
.paging__num, .paging__step { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 var(--space-xs); border-radius: var(--radius-sm); color: var(--color-muted); border: var(--rule-hair) solid transparent; white-space: nowrap; }
.paging__num:hover, .paging__step:hover { border-color: var(--color-rule); color: var(--color-ink); }
.paging__num .selected, .paging__num.selected { color: var(--color-accent-ink); }
.paging__num:has(.selected) { background: var(--color-accent); color: var(--color-accent-ink); }
.paging .no-more-prev, .paging .no-more-next { visibility: hidden; }
#tt-body-page .paging { display: none; }

/* ── article ──────────────────────────────────────────────── */
.art-hd { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.crumb { display: flex; gap: var(--space-xs); font: 400 var(--text-sm)/1.4 var(--font-mono); color: var(--color-muted); margin-bottom: var(--space-md); }
.crumb a:last-child { color: var(--color-accent); }
.crumb a:hover { color: var(--color-ink); }
.art-hd h1 { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: clamp(1.875rem, 2.6vw + 1rem, 2.75rem); line-height: 1.25; letter-spacing: -0.03em; max-width: 22em; overflow-wrap: anywhere; min-width: 0; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.art-meta b { color: var(--color-ink); font-weight: 600; }
.av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper); font: 600 11px/1 var(--font-mono); }
.av--lg { width: 52px; height: 52px; font-size: var(--text-base); border-radius: var(--radius-md); flex: none; }
.admin { display: inline-flex; gap: var(--space-sm); font-size: var(--text-xs); }
.admin a { color: var(--color-muted); border-bottom: 1px solid var(--color-rule); }
.admin a:hover { color: var(--color-ink); }

.art-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
.art-main { min-width: 0; max-width: 42.5rem; } /* ≈ 40em at 17px → 35–40 Hangul per line */
.toc { display: none; }

.card { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper-2); }
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xl); font-size: 0; }
.art-tags__label { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-right: var(--space-xs); }
.art-tags a { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; padding: var(--space-3xs) var(--space-xs); transition: border-color var(--dur-short) var(--ease-out); }
.art-tags a:hover { border-color: var(--color-accent); }
.author { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; padding: var(--space-lg); margin-top: var(--space-xl); }
.author > div { flex: 1; min-width: 12rem; }
.author b { color: var(--color-ink); font-size: var(--text-md); }
.author p { color: var(--color-muted); font-size: var(--text-sm); }
.pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.pn .card { display: block; padding: var(--space-md) var(--space-lg); transition: border-color var(--dur-short) var(--ease-out); }
.pn .card:hover { border-color: var(--color-accent); }
.pn small { font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); }
.pn b { display: block; margin-top: var(--space-2xs); color: var(--color-ink); font-weight: 600; line-height: 1.4; }
.related { margin-top: var(--space-xl); }
.related h2 { font-size: var(--text-md); color: var(--color-ink); margin-bottom: var(--space-sm); }
.related ul { list-style: none; }
.related a { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
.related a:hover span { color: var(--color-accent); }
.related small { font: 400 var(--text-xs)/1.6 var(--font-mono); color: var(--color-muted); white-space: nowrap; }
.comments { margin-top: var(--space-2xl); }

/* entry content — Tistory editor output
 * `:is(#tt-body-page, body)` lifts specificity to one id so these beat Tistory's injected
 * content.css (`#tt-body-page h2[data-ke-size]{font-weight:normal}`) and uselessPMargin.css (`p{margin:0 !important}`). */
.entry-content { color: var(--color-ink-2); font-size: 17px; line-height: 1.7; letter-spacing: 0; word-break: keep-all; font-weight: 400; }
.entry-content .contents_style, .entry-content .tt_article_useless_p_margin { color: inherit; font-size: inherit; line-height: inherit; font-family: var(--font-body); }
:is(#tt-body-page, body) .entry-content :is(p, li, h1, h2, h3, h4, blockquote, td, th, figcaption) { word-break: keep-all; overflow-wrap: break-word; } /* content.css sets word-break:break-word → Hangul splits mid-word */
:is(#tt-body-page, body) .entry-content p { margin: 0 0 1em; color: inherit; font-size: inherit; line-height: inherit; }
:is(#tt-body-page, body) .entry-content .tt_article_useless_p_margin p { margin-bottom: 1em !important; }
:is(#tt-body-page, body) .entry-content .tt_article_useless_p_margin p.is-blank { height: 0; overflow: hidden; margin-bottom: 0.25em !important; } /* editor   spacer lines → a short pause */
:is(#tt-body-page, body) .entry-content :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: var(--color-ink) !important; letter-spacing: -0.02em; line-height: 1.4; scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }
:is(#tt-body-page, body) .entry-content :is(h1, h2) { font-size: 1.47rem; margin: 2.4em 0 0.75em; }
:is(#tt-body-page, body) .entry-content h3 { font-size: 1.24rem; margin: 2em 0 0.6em; }
:is(#tt-body-page, body) .entry-content h4 { font-size: 1.06rem; margin: 1.6em 0 0.4em; }
:is(#tt-body-page, body) .entry-content .tt_article_useless_p_margin > :is(h2, h3):first-child { margin-top: 0; }
.entry-content a { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.entry-content a:hover { text-decoration-color: var(--color-accent); }
.entry-content b, .entry-content strong { font-weight: 600; color: var(--color-ink); }
/* editor-default dark inline colours are unreadable on the dark paper — fold them back to body ink */
.entry-content [style*="color: #333333"], .entry-content [style*="color: #000000"], .entry-content [style*="color: #000;"],
.entry-content [style*="color: #222222"], .entry-content [style*="color: #555555"], .entry-content [style*="color: #666666"],
.entry-content [style*="color: rgb(0, 0, 0)"], .entry-content [style*="color: rgb(51, 51, 51)"], .entry-content [style*="color: black"] { color: inherit !important; }
.entry-content [style*="background-color: #ffffff"], .entry-content [style*="background-color: rgb(255, 255, 255)"] { background-color: transparent !important; }
.entry-content ul, .entry-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.entry-content li { margin: 0.3em 0; }
.entry-content li::marker { color: var(--color-muted); }
.entry-content blockquote { margin: 0 0 1.2em; padding: var(--space-md) var(--space-lg); border: 0; border-left: 2px solid var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: inherit; }
.entry-content blockquote[data-ke-style="style2"] { border-left: 0; background: none; text-align: center; font-size: var(--text-md); }
.entry-content blockquote[data-ke-style="style3"] { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm); }
.entry-content hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule-2); margin: var(--space-xl) 0; background: none; height: 0; }
.entry-content hr[data-ke-style] { background: none !important; }
.entry-content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); padding: 0.1em 0.35em; border-radius: 4px; color: var(--color-ink); }
.entry-content pre { margin: 0 0 1.3em; padding: var(--space-md) var(--space-lg); background: var(--color-inset) !important; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); overflow: auto; font-size: var(--text-sm); line-height: 1.7; }
.entry-content pre code { background: none !important; border: 0; padding: 0 !important; font-size: inherit; color: var(--color-ink-2); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; font-size: var(--text-sm); }
.entry-content th, .entry-content td { border: var(--rule-hair) solid var(--color-rule-2) !important; padding: var(--space-xs) var(--space-sm); color: var(--color-ink-2); background: none; }
.entry-content th { color: var(--color-ink); background: var(--color-paper-2); }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.entry-content figure { margin: 0 0 1.3em; }
.entry-content figcaption { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); text-align: center; }
/* og link card */
.entry-content figure[data-ke-type="opengraph"] a { display: flex; text-decoration: none; font-weight: 400; color: inherit; border: var(--rule-hair) solid var(--color-rule-2) !important; border-radius: var(--radius-md); background: var(--color-paper-2) !important; overflow: hidden; transition: border-color var(--dur-short) var(--ease-out); }
.entry-content figure[data-ke-type="opengraph"] a:hover { border-color: var(--color-accent) !important; }
.entry-content figure[data-ke-type="opengraph"] .og-image { border-right: var(--rule-hair) solid var(--color-rule-2) !important; }
.entry-content figure[data-ke-type="opengraph"] .og-text { background: transparent !important; }
.entry-content figure[data-ke-type="opengraph"] .og-title { color: var(--color-ink) !important; }
.entry-content figure[data-ke-type="opengraph"] .og-desc { color: var(--color-muted) !important; }
.entry-content figure[data-ke-type="opengraph"] .og-host { color: var(--color-accent) !important; font-family: var(--font-mono); }

/* Tistory-injected blocks inside the article */
.tt_box_namecard { display: none !important; } /* the skin's own .author card replaces it */
.pn:not(:has(a)) { display: none; }
.container_postbtn { margin-top: var(--space-xl); }
.container_postbtn .postbtn_like, .container_postbtn .wrap_btn, .container_postbtn button, .container_postbtn .btn_post { border-color: var(--color-rule) !important; color: var(--color-ink-2) !important; background-color: transparent !important; }
.container_postbtn .layer_post { background: var(--color-paper-3) !important; border: var(--rule-hair) solid var(--color-rule) !important; box-shadow: none !important; }
.container_postbtn .layer_post a, .container_postbtn .layer_post button { color: var(--color-ink-2) !important; }
.another_category { border: var(--rule-hair) solid var(--color-rule-2) !important; border-radius: var(--radius-md); background: var(--color-paper-2) !important; padding: var(--space-md) var(--space-lg) !important; }
.another_category h4, .another_category h4 a { color: var(--color-ink) !important; font-size: var(--text-base) !important; border: 0 !important; }
.another_category table, .another_category th, .another_category td { border: 0 !important; background: transparent !important; color: var(--color-ink-2) !important; }
.another_category th a { color: var(--color-ink-2) !important; }
.another_category th a.current { color: var(--color-accent) !important; }
.another_category td { color: var(--color-muted) !important; font-family: var(--font-mono); font-size: var(--text-xs) !important; }

/* Tistory comment / guestbook app — dark overrides */
.comments .tt-comment-cont { color: var(--color-ink-2); font-family: var(--font-body); }
.comments .tt_desc, .comments .tt-cmt { word-break: keep-all !important; overflow-wrap: break-word; }
.comments textarea, .comments input[type="text"], .comments input[type="password"] { background: var(--color-paper) !important; color: var(--color-ink) !important; border-color: var(--color-rule) !important; }
.comments textarea::placeholder, .comments input::placeholder { color: var(--color-muted) !important; }
.comments .tt-box-total { border-color: var(--color-rule-2) !important; color: var(--color-ink); }
.comments .tt_txt_g, .comments .tt_num_g { color: var(--color-ink); }
.comments .tt-item-reply, .comments .tt-list-reply, .comments .tt-area-reply { border-color: var(--color-rule-2) !important; }
.comments .tt-link-user, .comments .tt_desc { color: var(--color-ink-2) !important; }
.comments .tt_date, .comments .tt-link-comment { color: var(--color-muted) !important; }
.comments .tt-area-write { border-color: var(--color-rule) !important; background: var(--color-paper-2) !important; border-radius: var(--radius-md); }
.comments .tt-box-textarea, .comments .tt-inner-g, .comments .tt-box-account, .comments .tt-box-account input, .comments .tt-cmt { background: var(--color-paper) !important; color: var(--color-ink) !important; border-color: var(--color-rule) !important; }
.comments .tt-cmt:empty::before { color: var(--color-muted) !important; }
.comments .tt_txt_user, .comments .tt-xe-label-text { color: var(--color-ink-2) !important; }
.comments .tt-btn_register { background: var(--color-accent) !important; color: var(--color-accent-ink) !important; border: 0 !important; border-radius: var(--radius-sm) !important; }
.comments .tt-btn_register:disabled { opacity: 0.45; }
.comments .tt-list-modify { background: var(--color-paper-3) !important; border-color: var(--color-rule) !important; }
.comments .tt-list-modify a { color: var(--color-ink-2) !important; }

/* protected · tags · guestbook */
.protected { padding-block: var(--space-xl) var(--space-3xl); color: var(--color-ink-2); }
.protected__form { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.input { height: 40px; padding: 0 var(--space-sm); background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); font: inherit; }
.input:hover { border-color: var(--color-muted); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input:disabled { opacity: 0.45; cursor: not-allowed; }
.page-h { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: -0.03em; padding-block: var(--space-2xl) var(--space-lg); }
.tagcloud ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-bottom: var(--space-3xl); }
.tagcloud a { display: inline-block; font: 400 var(--text-sm)/1.4 var(--font-mono); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 4px; padding: var(--space-2xs) var(--space-sm); transition: border-color var(--dur-short) var(--ease-out); }
.tagcloud a:hover { border-color: var(--color-accent); }
.tagcloud .cloud1 { color: var(--color-accent); border-color: var(--color-rule); }
.tagcloud .cloud2 { color: var(--color-ink); }
.guestbook { padding-bottom: var(--space-3xl); }

/* ── footer (Ft1) ─────────────────────────────────────────── */
.foot { border-top: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-2xl) var(--space-xl); background: var(--color-paper-2); }
.foot .wordmark { font-size: var(--text-xl); }
.foot__tag { color: var(--color-ink-2); margin-top: var(--space-sm); max-width: 32em; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); }
.foot__links a { color: var(--color-ink-2); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.foot__links a:hover { color: var(--color-accent); }
.foot__legal { margin-top: var(--space-xl); font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--color-muted); }

/* ── ⌘K palette ───────────────────────────────────────────── */
.cmdk { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.cmdk.is-open { visibility: visible; opacity: 1; }
.cmdk__backdrop { position: absolute; inset: 0; background: var(--color-scrim); }
.cmdk__panel { position: absolute; top: 10vh; left: 50%; width: min(560px, calc(100% - 2rem)); max-height: 80vh; display: flex; flex-direction: column; transform: translate(-50%, -6px) scale(0.98); transition: transform var(--dur-short) var(--ease-out); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; }
.cmdk.is-open .cmdk__panel { transform: translate(-50%, 0) scale(1); }
.cmdk__field { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); margin: 0; }
.cmdk__field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--color-ink); font: inherit; font-size: var(--text-md); outline: none; -webkit-appearance: none; }
.cmdk__body { overflow: auto; padding: var(--space-xs); }
.cmdk__label { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-sm) var(--space-sm) var(--space-xs); }
.cmdk__list { list-style: none; }
.cmdk__item a, .cmdk__cats a { display: flex; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: var(--color-ink-2); }
.cmdk__item a small { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-muted); width: 5.5em; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__item a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__cats ul { list-style: none; }
.cmdk__cats ul ul { padding-left: var(--space-md); }
.cmdk__cats .c_cnt { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-muted); }
.cmdk__cats img { display: none; }
.cmdk [data-nav].is-active, .cmdk [data-nav]:hover { background: var(--color-paper-3); color: var(--color-ink); }
.cmdk__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-xs); color: var(--color-muted); }

/* ── article TOC (desktop) ────────────────────────────────── */
.toc h5 { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-sm); }
.toc ol { list-style: none; border-left: var(--rule-hair) solid var(--color-rule-2); }
.toc a { display: block; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); margin-left: -1px; border-left: 2px solid transparent; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; transition: color var(--dur-short) var(--ease-out); }
.toc li.is-sub a { padding-left: var(--space-xl); font-size: var(--text-xs); }
.toc a:hover { color: var(--color-ink); }
.toc a.is-active { color: var(--color-ink); border-left-color: var(--color-accent); }

/* ── reveal: map rows, first load only ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .row { animation: ink-on var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
  @keyframes ink-on { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ── breakpoints (mobile-first) ───────────────────────────── */
/* mobile: hero → recent posts directly (map + contact row hidden; nav keeps 문의하기) */
.map-section, .after-map { display: none; }
@media (min-width: 40rem) {
  .map-section { display: block; }
  .after-map { display: flex; }
  .nav__inner { gap: var(--space-lg); }
  .searchpill { width: min(300px, 100%); padding: 0 var(--space-xs) 0 var(--space-sm); justify-content: flex-start; }
  .searchpill__text, .searchpill kbd { display: inline; }
  .orient__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: var(--space-2xl); }
  .post { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--space-lg); }
  .post__meta { flex-direction: column; gap: var(--space-2xs); padding-top: var(--space-2xs); }
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn__next { grid-column: 2; text-align: right; }
}
@media (min-width: 52rem) {
  .nav__menu { display: block; }
}
@media (min-width: 60rem) {
  .map__head { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem minmax(0, 1fr); border-bottom: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
  .row { grid-template-columns: 15rem minmax(0, 1fr) 13rem minmax(0, 1fr); gap: 0; align-items: center; }
  .proj { padding-right: var(--space-lg); }
  .node .role { display: none; }
  .edge { padding: 0 var(--space-sm); }
  .edge__line { width: 100%; height: 1px; order: 2; }
  .edge__line::after { bottom: auto; top: -4px; left: auto; right: -1px; border: 4.5px solid transparent; border-left-color: var(--color-rule); border-right: 0; }
  .row:hover .edge__line::after { border-left-color: var(--color-accent); border-top-color: transparent; }
  .edge__label { order: 1; padding-bottom: var(--space-xs); }
  .art-body { grid-template-columns: minmax(0, 42.5rem) 14rem; justify-content: space-between; }
  .art-body--single { grid-template-columns: minmax(0, 42.5rem); }
  .toc { display: block; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); align-self: start; }
  .toc:not(.has-items) { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; }
}