/* hubline — 화면 규칙. 값은 tokens.css 의 변수만 쓴다(raw 색 0).
 * 뼈대: 선 격자(.row 전폭 가로선 + .cell 좌우 세로선 + 교차점 링) — DESIGN "이 템플릿만의 한 가지".
 * 폭 단계: ≥1280 · 1024–1279 · 720–1023 · <720 (tokens 가 간격을 덮고, 배치는 여기서). 디렉터리 광고 칸만 1200. */

/* ── 리셋 (:where 로 특이도 0, #49) ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre, table) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(button, input, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(a) { color: inherit; }
:where(img, svg) { display: block; max-width: 100%; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--spacing) * 6); }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--color-primary-wash); color: var(--color-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--spacing-gutter); top: calc(var(--spacing) * -16); z-index: 30; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background: var(--color-primary); color: var(--color-on-dark); border-radius: var(--radius-sm); text-decoration: none; }
.skip:focus { top: calc(var(--spacing) * 2); }

.i { width: 1rem; height: 1rem; flex: none; }

/* ── 제목 척도 (Hahmlet 800 — 쪽 제목·구간 제목·홈 카드 제목에만, 원칙 2) ── */
.h-2xl, .h-xl, .h-lg, .h-md, .h-sm, .num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.h-2xl { font-size: var(--text-display-2xl); line-height: var(--text-display-2xl--line-height); }
.h-xl { font-size: var(--text-display-xl); line-height: var(--text-display-xl--line-height); }
.h-lg { font-size: var(--text-display-lg); line-height: var(--text-display-lg--line-height); }
.h-md { font-size: var(--text-display-md); line-height: var(--text-display-md--line-height); }
.h-sm { font-size: var(--text-display-sm); line-height: var(--text-display-sm--line-height); font-weight: var(--font-weight-display-sm); letter-spacing: -0.005em; }
.lead { font-size: var(--text-lead); line-height: var(--text-lead--line-height); }
.lead strong, .lead b { font-weight: 700; }
.fine { margin-top: calc(var(--spacing) * 4); font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-ink-2); }
.kicker { font-family: var(--font-label); font-weight: 600; font-size: var(--text-kicker); letter-spacing: var(--text-kicker--letter-spacing); text-transform: uppercase; color: var(--color-ink-2); }
.kicker-n { font-family: var(--font-label); font-weight: var(--font-weight-label); font-size: var(--text-label); letter-spacing: var(--text-label--letter-spacing); color: var(--color-primary); }

/* ═══════════════ 선 격자 ═══════════════ */
.row { position: relative; border-top: var(--spacing-hairline) solid var(--color-line); }
.row--first { border-top: 0; }
.cell {
  position: relative;
  width: min(100% - var(--spacing-gutter) * 2, var(--spacing-frame));
  margin-inline: auto;
  border-inline: var(--spacing-hairline) solid var(--color-line);
  padding-inline: var(--spacing-frame-pad);
}
/* 교차점 링 — 가로선(행 위 1px) × 세로선(칸 좌우 1px)의 중심에 지름 9 */
.cell::before, .cell::after, .foot-in::before, .foot-in::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-ring) / -2 - 0.5px);
  z-index: 2;
  width: var(--spacing-ring);
  height: var(--spacing-ring);
  border: var(--spacing-hairline) solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  pointer-events: none;
}
.cell::before, .foot-in::before { left: calc(var(--spacing-ring) / -2 - 0.5px); }
.cell::after, .foot-in::after { right: calc(var(--spacing-ring) / -2 - 0.5px); }
.cell.sec { padding-block: var(--spacing-section); }
.cell.sec--tight { padding-block: calc(var(--spacing-section) * 0.6); }

/* ═══════════════ GNB (격자 밖) ═══════════════ */
.gnb { position: relative; z-index: 20; background: var(--color-bg); border-bottom: var(--spacing-hairline) solid var(--color-line); }   /* 머리줄 아래 선 — 사용자 요청 2026-09-26 (공지 띠가 없는 쪽에서 머리와 본문이 붙어 보였다) */
.gnb-in, .notice-in, .foot-in {
  width: min(100% - var(--spacing-gutter) * 2, var(--spacing-frame));
  margin-inline: auto;
  border-inline: var(--spacing-hairline) solid transparent;
}
.gnb-in { display: flex; align-items: center; gap: calc(var(--spacing) * 3); min-height: var(--spacing-gnb); padding-inline: var(--spacing-frame-pad); }
.brand { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; min-height: var(--spacing-touch); text-decoration: none; color: var(--color-primary); }
.brand-mark { width: 2.5rem; height: 1rem; }
.bm-line { fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-end { fill: var(--color-honey); }
.bm-hub { fill: var(--color-bg); stroke: var(--color-primary); stroke-width: 1.6; }
.brand-word { font-weight: 700; font-size: 1.125rem; line-height: 1.1; letter-spacing: -0.01em; }
.tag-virtual {
  display: inline-flex; align-items: center; height: 1.375rem; padding-inline: calc(var(--spacing) * 2);
  border: var(--spacing-hairline) solid var(--color-primary-soft); border-radius: var(--radius-sm);
  background: var(--color-primary-wash); color: var(--color-primary); font-size: var(--text-meta-label); font-weight: 700;
}
.gnb-nav { margin-left: auto; display: flex; align-items: center; gap: calc(var(--spacing) * 10); }
.gnb-list { display: flex; gap: calc(var(--spacing) * 10); }
.gnb-list a, .gnb-panel-list a { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2.5); min-height: var(--spacing-touch); text-decoration: none; color: var(--color-ink); }
.gnb-list a[aria-current="page"] span { text-decoration: underline 2px var(--color-primary); text-underline-offset: 0.45em; }
.btn-letter {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2.5); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4);
  border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-2);
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.menu-btn { display: none; margin-left: auto; width: var(--spacing-touch); height: var(--spacing-touch); place-items: center; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.menu-btn .i { width: 1.25rem; height: 1.25rem; }
.menu-close, [data-menu="open"] .menu-open { display: none; }
[data-menu="open"] .menu-close { display: block; }
.gnb-panel { display: none; }

/* ═══════════════ 공지 띠 (홈·서버·클라이언트) ═══════════════ */
.notice { background: var(--color-notice); border-block: var(--spacing-hairline) solid var(--color-notice-line); transition: opacity var(--default-transition-duration) var(--ease-out); }
.notice-in { display: flex; align-items: center; gap: calc(var(--spacing) * 4); min-height: var(--spacing-notice); padding-left: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 1); }
.notice p { flex: 1; font-size: var(--text-small); line-height: 1.45; }
.notice a { color: var(--color-primary); font-weight: 600; text-underline-offset: 0.2em; }
.notice-x { display: grid; place-items: center; width: var(--spacing-touch); height: var(--spacing-touch); flex: none; border-radius: var(--radius-sm); color: var(--color-ink); }
[data-notice="closing"] .notice { opacity: 0; }
[data-notice="closed"] .notice { display: none; }

/* ═══════════════ 버튼 · 입력 ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 5);
  border: var(--spacing-hairline) solid transparent; border-radius: var(--radius-sm);
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--default-transition-duration) var(--ease-out), border-color var(--default-transition-duration) var(--ease-out);
}
.btn-primary { background: var(--color-primary); color: var(--color-on-dark); }
.btn-ghost { background: var(--color-bg); border-color: var(--color-field); color: var(--color-ink); }
.btn-block { width: 100%; }
.field {
  min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3.5);
  border: var(--spacing-hairline) solid var(--color-field); border-radius: var(--radius-sm);
  background: var(--color-bg); font-size: 1rem; min-width: 0;
}
.field::placeholder { color: var(--color-ink-2); opacity: 1; }
textarea.field { padding-block: calc(var(--spacing) * 3); resize: vertical; min-height: 8.75rem; }
.text-link { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); color: var(--color-primary); font-weight: 500; text-underline-offset: 0.2em; }
.link-pair { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6); margin-top: calc(var(--spacing) * 4); }

@media (hover: hover) {
  .btn-primary:hover { background: var(--color-primary-hover); }
  .btn-ghost:hover, .btn-letter:hover, .tbtn:hover, .search-btn:hover { border-color: var(--color-primary-muted); }
  .chip:hover, .pg:not([aria-current]):hover, .seg-btn:hover, .ctab:hover, .fchip:hover { background: var(--color-primary-wash); }
  .srv-card:hover, .cat:hover, .case-card:hover, .app-card:hover, .num-tile:hover, .pn:hover, .post-row:hover { border-color: var(--color-ink-2); }
  .gnb-list a:hover span, .foot-list a:hover, .crumbs a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}

/* 구독 줄 — 표현용. #subscribed 이면 줄 안 확인 문구 */
.sub { margin-top: calc(var(--spacing) * 8); }
.sub-row { display: flex; gap: calc(var(--spacing) * 4); }
.sub-field { width: var(--spacing-subscribe); flex: 0 1 auto; }
.sub-done { display: none; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); color: var(--color-primary); font-weight: 600; }
.sub-done small { font-weight: 400; color: var(--color-ink-2); font-size: var(--text-small); }
.sub-check { width: 1.25rem; height: 1.25rem; }
[data-subscribed] .sub-row { display: none; }
[data-subscribed] .sub-done { display: flex; }
.sub-cap { margin-top: calc(var(--spacing) * 3); font-size: var(--text-caption); line-height: var(--text-caption--line-height); }
.sub-cap a { color: var(--color-ink); text-underline-offset: 0.2em; }

/* ═══════════════ 1 홈 ═══════════════ */
.hero {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: var(--spacing-hero-gap);
  min-height: 32.5rem; padding-block: var(--spacing-hero-top) var(--spacing-hero-bottom);
}
.hero-title span { display: block; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.hero-lead { margin-top: calc(var(--spacing) * 6); max-width: 34rem; }
.hero .sub-field { border-color: var(--color-ink); }
.hero-art { position: relative; display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); }
.il-hero { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.social { display: flex; gap: calc(var(--spacing) * 2); align-self: flex-end; margin-top: auto; }
/* 1024↑ 소셜 셋은 그림의 빈 오른아래 모서리에 얹는다 — 히어로 높이를 레퍼런스(≈522)에 맞춰 카드 윗테두리가 900 첫 화면에 들어오게 */
@media (min-width: 1024px) { .social { position: absolute; right: 0; bottom: 0; } }
.sq { display: grid; place-items: center; width: var(--spacing-touch); height: var(--spacing-touch); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-bg); }
.sq .i { width: 1.125rem; height: 1.125rem; }

.sec-title { text-align: center; margin-bottom: var(--spacing-heading-gap); }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-home-card-gap); }
.cat {
  position: relative; display: block; height: var(--spacing-home-card); overflow: hidden;
  padding: var(--spacing-tile-pad); background: var(--color-surface);
  border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm);
  color: var(--color-ink); text-decoration: none;
  transition: border-color var(--default-transition-duration) var(--ease-out);
}
.cat-title { position: relative; z-index: 1; display: block; max-width: 55%; }
.cat-desc { position: absolute; z-index: 1; left: var(--spacing-tile-pad); bottom: var(--spacing-tile-pad); max-width: 50%; font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); }
.cat .il { position: absolute; right: -1.25rem; top: -14%; height: 128%; width: auto; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--spacing) * 4); flex-wrap: wrap; margin-bottom: calc(var(--spacing-heading-gap) * 0.75); }
.sec-lead { margin: calc(var(--spacing) * -4) 0 calc(var(--spacing) * 6); max-width: var(--spacing-measure); color: var(--color-ink-2); }
.sec-lead b { color: var(--color-ink); }
.more { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); color: var(--color-primary); font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.list-box { border: var(--spacing-hairline) solid var(--color-line-soft); border-radius: var(--radius-lg); }
.post-list > li + li .post-row { border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.post-list > li { padding-inline: calc(var(--spacing) * 4); }
.post-row { display: grid; gap: calc(var(--spacing) * 1.5); padding: calc(var(--spacing) * 5) calc(var(--spacing) * 2); text-decoration: none; border-inline: 0; }
.post-label, .issue-head { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); font-weight: 800; font-size: var(--text-small); letter-spacing: 0.02em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.dot { width: 0.4rem; height: 0.4rem; fill: currentColor; }
.post-title { font-size: 1.125rem; line-height: 1.45; font-weight: 600; }
.post-sum { font-size: var(--text-small); line-height: 1.55; color: var(--color-ink-2); }

.num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-grid-gap); }
.num-tile { display: grid; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 6); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--default-transition-duration) var(--ease-out); }
.num { font-size: var(--text-display-lg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.num-label { color: var(--color-ink-2); font-size: var(--text-small); }

/* ═══════════════ 카드 문법 — 서버 카드 · 메타 3열 ═══════════════ */
.card-grid { display: grid; gap: var(--spacing-grid-gap); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srv-card {
  position: relative; display: flex; flex-direction: column; min-height: var(--spacing-server-card);
  padding: var(--spacing-card-pad); background: var(--color-bg);
  border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm);
  transition: border-color var(--default-transition-duration) var(--ease-out);
}
.srv-top { height: calc(var(--spacing-card-rule) - var(--spacing-card-pad)); overflow: hidden; }
.srv-name { font-size: var(--text-card-title); line-height: var(--text-card-title--line-height); font-weight: 500; letter-spacing: -0.005em; }
.srv-name a { text-decoration: none; color: var(--color-ink); }
.srv-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.srv-name a:focus-visible { outline: none; }
.srv-name a:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.srv-by { margin-top: calc(var(--spacing) * 1); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-2); }
.srv-desc {
  margin-top: calc(var(--spacing) * 3); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.meta3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); margin-top: auto; padding-top: calc(var(--spacing) * 5); border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.meta3 dt { font-size: var(--text-meta-label); letter-spacing: var(--text-meta-label--letter-spacing); font-weight: 700; line-height: 1.35; }
.meta3 dd { display: flex; align-items: center; gap: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5); font-size: var(--text-small); line-height: var(--text-small--line-height); font-variant-numeric: tabular-nums; }
.seal { width: 1rem; height: 1rem; color: var(--color-primary); }
.seal-abbr { text-decoration: none; border: 0; cursor: help; }

/* ═══════════════ 디렉터리 (서버·클라이언트·앱·사례 머리) ═══════════════ */
.cell.dir { padding-block: calc(var(--spacing) * 6) var(--spacing-section); }
.dir-head { text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-badge); padding-inline: calc(var(--spacing) * 3);
  background: var(--color-primary-wash); border: var(--spacing-hairline) solid var(--color-primary-soft); border-radius: var(--radius-sm);
  color: var(--color-primary); font-size: var(--text-small); font-weight: 500; font-variant-numeric: tabular-nums;
}
.badge b { font-weight: 800; }
.badge--plain { margin-top: calc(var(--spacing) * 5); }
.live { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-honey); animation: var(--animate-live); }
.dir-title { margin-top: calc(var(--spacing) * 8); }
.dir-sub { margin-top: calc(var(--spacing) * 4); }
.dir-sub a { color: var(--color-primary); text-decoration: none; }
.dir-sub a:hover { text-decoration: underline; }
.btn-submit {
  position: absolute; top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); z-index: 3;
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4);
  border: 2px solid var(--color-primary-muted); border-radius: var(--radius-sm); background: var(--color-surface-3);
  color: var(--color-primary); font-weight: 500; text-decoration: none;
}
.search { display: flex; gap: calc(var(--spacing) * 6); max-width: var(--spacing-search); margin: calc(var(--spacing) * 3) auto 0; }
.search-field { flex: 1; }
.search-btn { width: var(--spacing-search-btn); flex: none; }

.trend { max-width: var(--spacing-search); margin: calc(var(--spacing) * 12) auto 0; text-align: left; }
.trend-label { display: flex; align-items: center; gap: calc(var(--spacing) * 2); color: var(--color-primary); }
.trend-label .i { width: 1.125rem; height: 1.125rem; }
.label-en { font-family: var(--font-label); font-weight: var(--font-weight-label); font-size: var(--text-label); letter-spacing: var(--text-label--letter-spacing); }
.trend-ko { font-size: var(--text-small); color: var(--color-ink-2); }
.chips-wrap { margin-top: calc(var(--spacing) * 6); --fade-l: 0px; --fade-r: 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) var(--fade-l), var(--color-ink) calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--color-ink) var(--fade-l), var(--color-ink) calc(100% - var(--fade-r)), transparent); }
.chips-wrap[data-scrolled] { --fade-l: 3rem; }
.chips-wrap[data-end] { --fade-r: 0px; }
.chips { display: flex; gap: calc(var(--spacing) * 3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips > li { scroll-snap-align: start; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3.5);
  border: var(--spacing-hairline) solid var(--color-primary-muted); border-radius: var(--radius-sm);
  color: var(--color-primary); text-decoration: none; white-space: nowrap; background: var(--color-bg);
  transition: background-color var(--default-transition-duration) var(--ease-out);
}
.chip[aria-current="true"] { background: var(--color-primary-wash); border-color: var(--color-primary); font-weight: 600; }
.area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 8); }

/* 목록 몸통 — ≥1200: 광고 칸 224 + 카드 2열 (툴바·쪽 번호는 카드 열 위아래) */
.dir-body {
  display: grid; grid-template-columns: var(--spacing-ad) minmax(0, 1fr);
  grid-template-areas: ". tools" "ad list" ". pager" ". empty";
  column-gap: var(--spacing-ad-gap); row-gap: var(--spacing-grid-gap); margin-top: calc(var(--spacing) * 22);
}
.dir-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); position: relative; z-index: 4; }
.dir-count { font-variant-numeric: tabular-nums; }
.tool-btns { display: flex; gap: calc(var(--spacing) * 2); }
.tbtn {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4);
  border: var(--spacing-hairline) solid var(--color-toolbar); border-radius: var(--radius-sm); background: var(--color-bg); white-space: nowrap;
  transition: border-color var(--default-transition-duration) var(--ease-out);
}
.tchev { transition: transform 200ms var(--ease-out); }
.tbtn[aria-expanded="true"] .tchev { transform: rotate(180deg); }
.sort { position: relative; }
.sort-menu {
  position: absolute; right: 0; top: calc(100% + var(--spacing) * 2); min-width: 13rem; padding: calc(var(--spacing) * 1.5);
  background: var(--color-bg); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s 120ms;
}
[data-sort="open"] .sort-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.sort-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3); border-radius: var(--radius-sm); text-align: left; }
.sort-menu button:hover { background: var(--color-primary-wash); }
.sort-check { color: var(--color-primary); visibility: hidden; }
.sort-menu [aria-current="true"] { color: var(--color-primary); font-weight: 600; }
.sort-menu [aria-current="true"] .sort-check { visibility: visible; }
.filters {
  display: none; flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 5); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg);
}
[data-filters="open"] .filters { display: grid; animation: disclose 200ms var(--ease-out); }
@keyframes disclose { from { opacity: 0; transform: translateY(-8px); } }
.f-label, .fld-label { font-size: var(--text-meta-label); font-weight: 700; letter-spacing: var(--text-meta-label--letter-spacing); }
.f-chips { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2.5); }
.fchip { min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3.5); border: var(--spacing-hairline) solid var(--color-toolbar); border-radius: var(--radius-sm); background: var(--color-bg); }
.fchip[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-wash); color: var(--color-primary); font-weight: 600; }
.f-note { grid-column: 1 / -1; font-size: var(--text-caption); color: var(--color-ink-2); }

.dir-list { grid-area: list; }
.dir-empty { grid-area: empty; padding: calc(var(--spacing) * 10); border: var(--spacing-hairline) dashed var(--color-line); border-radius: var(--radius-sm); text-align: center; color: var(--color-ink-2); }
.dir-empty a { color: var(--color-primary); }
.dir-body > .pager { grid-area: pager; }

/* 광고 칸 "함께 일하기" */
.ad { border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); padding: var(--spacing-card-pad); background: var(--color-bg); }
.ad--side { grid-area: ad; align-self: start; }
.ad--inline { display: none; }
.ad-title { margin-top: calc(var(--spacing) * 1); font-family: var(--font-display); font-weight: var(--font-weight-display-sm); font-size: var(--text-display-sm); line-height: var(--text-display-sm--line-height); }
.ad-title a { text-decoration: none; color: var(--color-ink); }
.ad-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ad-panel { position: relative; margin-top: calc(var(--spacing) * 4); height: 15.625rem; overflow: hidden; background: var(--color-ink); border-radius: 2px; }
.ad-il { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 판 비율이 바뀌어도(가로 카드·모바일) 선 두께와 점이 찌그러지지 않게 — 점은 길이 0 선 + 크기 고정 선 */
.ad-il path { fill: none; stroke: var(--color-honey); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ad-il .ad-dot { stroke-width: 7; }
.ad-items { position: relative; display: grid; align-content: space-between; height: 100%; padding: calc(var(--spacing) * 4); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.45; color: var(--color-on-dark); }
.ad-items li:nth-child(2) { justify-self: end; text-align: right; max-width: 62%; }
.ad-items li { max-width: 80%; }

/* 쪽 번호 — 현재 쪽만 채운 사각(상태 ≤1, 원칙 3) */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 4); }
.pg-list { display: flex; gap: calc(var(--spacing) * 1); }
.pg {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); min-width: var(--spacing-touch); height: var(--spacing-touch);
  border-radius: var(--radius-sm); text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background-color var(--default-transition-duration) var(--ease-out);
}
.pg[aria-current="page"] { background: var(--color-primary); color: var(--color-on-dark); font-weight: 600; }
.pg-step { padding-inline: calc(var(--spacing) * 3); color: var(--color-primary); font-weight: 500; }
.pg-step[aria-disabled="true"] { color: var(--color-ink-2); pointer-events: none; }
.pg-gap { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--spacing) * 6); color: var(--color-ink-2); }

/* ═══════════════ 상세 (서버·클라이언트) ═══════════════ */
.crumbs { padding-top: calc(var(--spacing) * 6); font-size: var(--text-small); color: var(--color-ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 1); }
.crumbs li { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--spacing-touch); color: var(--color-ink-2); text-decoration: none; }
.crumbs [aria-current] { color: var(--color-ink); }
.crumb-sep { width: 0.75rem; height: 0.75rem; }
.detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: calc(var(--spacing) * 12); align-items: start; padding-block: calc(var(--spacing) * 6) var(--spacing-section); }
.logo-tile { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-label); font-weight: 800; font-size: 1.375rem; color: var(--color-primary); letter-spacing: 0.02em; }
.detail-title { margin-top: calc(var(--spacing) * 5); }
.detail-by { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 2); color: var(--color-ink-2); }
.detail-by .sep { margin-inline: calc(var(--spacing) * 1); }
.detail-lead { margin-top: calc(var(--spacing) * 5); max-width: 40rem; }
.meta-box { padding: calc(var(--spacing) * 6); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg); }
.meta-rows > div { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); border-bottom: var(--spacing-hairline) solid var(--color-line-soft); }
.meta-rows > div:first-child { padding-top: 0; }
.meta-rows dt { font-size: var(--text-meta-label); font-weight: 700; letter-spacing: var(--text-meta-label--letter-spacing); }
.meta-rows dd { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.meta-box .btn { margin-top: calc(var(--spacing) * 5); }
.meta-box .text-link { margin-top: calc(var(--spacing) * 2); }

.tabs { display: flex; gap: calc(var(--spacing) * 2); border-bottom: var(--spacing-hairline) solid var(--color-line); margin-bottom: calc(var(--spacing) * 8); overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4); color: var(--color-ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-primary); }
.tab-n { font-size: var(--text-meta-label); padding: 0 calc(var(--spacing) * 1.5); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.tab-panel:not([hidden]) { animation: fade 150ms var(--ease-out); }
@keyframes fade { from { opacity: 0; } }

.client-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--spacing) * 6); align-items: start; padding-block: calc(var(--spacing) * 6) var(--spacing-section); }
.client-head .detail-title { margin-top: 0; }
.meta-wide { padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.meta-wide .meta3 { border-top: 0; padding-top: 0; margin-top: 0; }
.feat-row { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 6); }
.feat-row li { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3.5); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.feat-row .on .i { color: var(--color-primary); }
.feat-row .off { color: var(--color-ink-2); }

/* 긴 글 */
.prose { max-width: var(--spacing-measure); }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > figure, .prose > div { margin-top: calc(var(--spacing) * 4); }
.prose > :first-child { margin-top: 0; }
.prose p { font-size: var(--text-article); line-height: var(--text-article--line-height); }
.prose .h-sm { margin-top: calc(var(--spacing) * 10); }
.prose a { color: var(--color-primary); text-underline-offset: 0.2em; }
.article { margin-inline: auto; }
.checks { display: grid; gap: calc(var(--spacing) * 2.5); }
.checks li { display: flex; gap: calc(var(--spacing) * 2.5); font-size: var(--text-article); line-height: 1.6; }
.checks .i { width: 1.125rem; height: 1.125rem; margin-top: 0.3em; color: var(--color-primary); }
.steps { counter-reset: step; display: grid; gap: calc(var(--spacing) * 4); }
.steps li { counter-increment: step; position: relative; padding-left: calc(var(--spacing) * 11); font-size: var(--text-article); line-height: 1.6; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -0.1em; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-full); font-family: var(--font-label); font-weight: 700; font-size: var(--text-small); color: var(--color-primary); }
blockquote { padding-block: calc(var(--spacing) * 2); }
blockquote::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: calc(var(--spacing) * 3); background: var(--color-primary-soft); }
.article-issue { margin-top: calc(var(--spacing) * 3); }
blockquote p { font-size: 1.1875rem !important; line-height: 1.65 !important; font-weight: 500; }
blockquote footer { margin-top: calc(var(--spacing) * 2); font-size: var(--text-small); color: var(--color-ink-2); }
:not(pre) > code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.1em 0.35em; border: var(--spacing-hairline) solid var(--color-line-soft); border-radius: 3px; background: var(--color-surface-2); word-break: break-all; }
.article-head { max-width: var(--spacing-measure); margin-inline: auto; padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 10); }
.article-head .lead { margin-top: calc(var(--spacing) * 5); }
.article-title { margin-top: calc(var(--spacing) * 3); }
.article-meta { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); margin-top: calc(var(--spacing) * 4); color: var(--color-ink-2); font-size: var(--text-small); }
.article-cover { max-width: 60rem; margin: 0 auto var(--spacing-section); aspect-ratio: 16 / 9; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
.article-cover .il { width: 100%; height: 100%; }
.inline-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); }

/* 코드 블록 */
.code { border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-2); overflow: hidden; }
.code + .code { margin-top: calc(var(--spacing) * 3); }
.code-cap { display: flex; align-items: center; justify-content: space-between; padding-left: calc(var(--spacing) * 4); border-bottom: var(--spacing-hairline) solid var(--color-line); font-size: var(--text-small); color: var(--color-ink-2); background: var(--color-bg); }
.copy { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 3.5); border-left: var(--spacing-hairline) solid var(--color-line); color: var(--color-primary); font-weight: 500; }
.copy[data-done] { color: var(--color-ink); }
.code pre { overflow-x: auto; padding: calc(var(--spacing) * 4); font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); tab-size: 2; }
.code code { font-family: inherit; }

/* 표 */
.table-wrap { overflow-x: auto; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.tbl { width: 100%; min-width: 32rem; font-size: var(--text-small); }
.tbl th, .tbl td { padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4); text-align: left; vertical-align: top; border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.tbl thead th { border-top: 0; background: var(--color-surface); font-size: var(--text-meta-label); font-weight: 700; letter-spacing: var(--text-meta-label--letter-spacing); white-space: nowrap; }
.tbl tbody th { font-weight: 600; }
.tbl a { color: var(--color-primary); text-decoration: none; }
.tbl a:hover { text-decoration: underline; }
.num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw { display: inline-flex; padding: 0.1em calc(var(--spacing) * 2); border-radius: var(--radius-sm); font-size: var(--text-meta-label); font-weight: 700; }
.rw--r { background: var(--color-primary-wash); color: var(--color-primary); }
.rw--w { border: var(--spacing-hairline) solid var(--color-honey); color: var(--color-honey-ink); }
.tbl--matrix td { text-align: center; vertical-align: middle; }
.tbl--matrix thead th:not(:first-child) { text-align: center; }
.f-on .i { margin-inline: auto; color: var(--color-primary); width: 1.125rem; height: 1.125rem; }
.f-off .i { margin-inline: auto; color: var(--color-ink-2); }
.table-wrap--sticky tbody th, .table-wrap--sticky thead th:first-child { position: sticky; left: 0; background: var(--color-bg); z-index: 1; }
.table-wrap--sticky thead th:first-child { background: var(--color-surface); }
.chg { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); }
.chg--up { color: var(--color-primary); }
.chg--down { color: var(--color-honey-ink); }
.chg--same { color: var(--color-ink-2); }

/* ═══════════════ 사례 ═══════════════ */
.case-card { position: relative; display: flex; flex-direction: column; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg); overflow: hidden; transition: border-color var(--default-transition-duration) var(--ease-out); }
.case-cover { aspect-ratio: 16 / 9; background: var(--color-surface); border-bottom: var(--spacing-hairline) solid var(--color-line); }
.case-cover .il { width: 100%; height: 100%; }
.case-body { padding: var(--spacing-card-pad) var(--spacing-card-pad) 0; }
.case-area { font-size: var(--text-meta-label); font-weight: 700; letter-spacing: var(--text-meta-label--letter-spacing); color: var(--color-primary); }
.case-title { margin-top: calc(var(--spacing) * 2); }
.case-title a { color: var(--color-ink); text-decoration: none; }
.case-title a::after { content: ""; position: absolute; inset: 0; }
.case-sum { margin-top: calc(var(--spacing) * 2); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-ink-2); }
.case-card .meta3 { margin: calc(var(--spacing) * 5) var(--spacing-card-pad) var(--spacing-card-pad); }
.case-card[hidden] { display: none; }

/* ═══════════════ 9 posts(편지) — 짙은 흙 밴드 · 뉴스레터 2단 · 더 알아보기 ═══════════════ */
.row--band .cell { padding: 0; }
.band-in { position: relative; display: flex; align-items: center; height: var(--spacing-band); overflow: hidden; background: var(--color-band); }
.band-word { position: relative; padding: calc(var(--spacing) * 12) 0 0 var(--spacing-band-inset); font-family: var(--font-label); font-weight: var(--font-weight-band); font-size: var(--text-band); line-height: var(--text-band--line-height); letter-spacing: -0.01em; color: var(--color-on-dark); }
.band-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-net path { fill: none; stroke: var(--color-band-line); stroke-width: 1; stroke-linejoin: round; }
.band-net circle { fill: var(--color-band); stroke: var(--color-band-line); stroke-width: 1; }

.letter { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: var(--spacing-hero-gap); align-items: center; }
.letter-art .il { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.letter-desc { margin-top: calc(var(--spacing) * 6); max-width: 36rem; }
.letter .sub { margin-top: calc(var(--spacing) * 6); }
.issues { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: calc(var(--spacing) * 10); height: var(--spacing-issue-box); border: var(--spacing-hairline) solid var(--color-line-soft); border-radius: var(--radius-lg); background: var(--color-bg); }
.issues-list { overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; padding-inline: calc(var(--spacing) * 4) 0; border-radius: var(--radius-lg); }
.issues-list::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .issues-list { scroll-behavior: smooth; } }
.issue { scroll-snap-align: start; }
.issue + .issue a { border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.issue a { display: grid; gap: calc(var(--spacing) * 1.5); padding: calc(var(--spacing) * 5) calc(var(--spacing) * 2) calc(var(--spacing) * 5); text-decoration: none; color: var(--color-primary); }
.issue a:hover .issue-sum { text-decoration: underline; text-underline-offset: 0.2em; }
.issue-head { font-size: 1.0625rem; }
.issue-sum { font-size: var(--text-small); line-height: 1.45; }
.issues-nav { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--spacing) * 1.5); }
.arrow { position: relative; display: grid; place-items: center; width: var(--spacing-touch); height: var(--spacing-touch); color: var(--color-on-dark); border-radius: var(--radius-sm); }
.arrow::before { content: ""; position: absolute; inset: 6px; border-radius: var(--radius-sm); background: var(--color-primary); transition: background-color var(--default-transition-duration) var(--ease-out); }
.arrow .i { position: relative; }
.arrow[aria-disabled="true"] { pointer-events: none; }
.arrow[aria-disabled="true"]::before { background: var(--color-primary-soft); }

.learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 12); margin-top: calc(var(--spacing) * 12); }
.learn-fig { display: grid; place-items: center; height: 11.25rem; }
.learn-cell p { margin-top: calc(var(--spacing) * 2); color: var(--color-ink-2); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); }
.learn-h { margin-top: calc(var(--spacing) * 6); font-family: var(--font-display); font-weight: var(--font-weight-display-sm); font-size: var(--text-display-sm); line-height: var(--text-display-sm--line-height); }
.node-dia { width: 100%; max-width: 16.25rem; height: auto; }
.node-dia rect, .node-dia path { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; }
.node-dia .nd-dot { fill: var(--color-ink); }
.node-dia text { fill: var(--color-ink); font-family: var(--font-sans); font-size: 13px; text-anchor: middle; }
.learn-fig--nums { display: flex; gap: calc(var(--spacing) * 2); align-items: center; justify-content: center; }
.ntile { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5); border: var(--spacing-hairline) solid var(--color-ink); border-radius: var(--radius-md); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ntile--hot { border-color: var(--color-honey); color: var(--color-honey-ink); }
.learn-fig--menu { display: grid; align-content: center; justify-items: stretch; }
.learn-fig--menu > * { width: min(16.75rem, 100%); margin-inline: auto; }
.dd-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); border: 2px solid var(--color-ink); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 500; }
.dd-head .i { width: 1.25rem; height: 1.25rem; }
.dd-item { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4); border-inline: 2px solid var(--color-ink); font-size: var(--text-small); color: var(--color-ink-2); }
.dd-item:last-child { border-bottom: 2px solid var(--color-ink); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.sub-box { max-width: var(--spacing-measure); margin-inline: auto; padding: calc(var(--spacing) * 8); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.sub-box > p { margin-top: calc(var(--spacing) * 2); color: var(--color-ink-2); }
.sub-box .sub { margin-top: calc(var(--spacing) * 5); }
.prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-grid-gap); max-width: var(--spacing-measure); margin: calc(var(--spacing) * 10) auto 0; }
.pn { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1.5); padding: calc(var(--spacing) * 5); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--default-transition-duration) var(--ease-out); }
.pn--next { align-items: flex-end; text-align: right; }
.pn-dir { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); font-size: var(--text-small); color: var(--color-ink-2); }
.pn-title { font-weight: 600; }

/* ═══════════════ 앱 ═══════════════ */
.dir-count + .card-grid { margin-top: calc(var(--spacing) * 6); }
.app-card { position: relative; display: flex; flex-direction: column; padding: var(--spacing-card-pad); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg); transition: border-color var(--default-transition-duration) var(--ease-out); }
.app-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-illus); background: var(--color-surface); }
.app-icon .i { width: 1.375rem; height: 1.375rem; }
.app-name { margin-top: calc(var(--spacing) * 4); }
.app-desc { -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(var(--text-body-sm) * 1.65 * 2); }
.app-card .meta3 { margin-top: calc(var(--spacing) * 5); }
.srv-card[hidden], .app-card[hidden] { display: none; }

/* ═══════════════ 통계 ═══════════════ */
.page-head { padding-block: calc(var(--spacing) * 0) calc(var(--spacing-section) * 0.9); }
.page-title { margin-top: calc(var(--spacing) * 5); }
.page-lead { margin-top: calc(var(--spacing) * 5); max-width: 46rem; }
.page-date { margin-top: calc(var(--spacing) * 3); font-size: var(--text-small); color: var(--color-ink-2); }
.seg { display: inline-flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 6); }
.seg-btn, .ctab { display: inline-flex; align-items: center; min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-small); font-weight: 500; transition: background-color var(--default-transition-duration) var(--ease-out); }
.seg-btn[aria-current="true"], .ctab[aria-selected="true"] { background: var(--color-primary-wash); border-color: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-grid-gap); }
.stat { display: grid; gap: calc(var(--spacing) * 1.5); padding: calc(var(--spacing) * 6); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.stat-label { font-size: var(--text-small); color: var(--color-ink-2); }
.stat-delta { font-size: var(--text-small); color: var(--color-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-delta small { font-weight: 400; color: var(--color-ink-2); }
.swap { animation: fade 150ms var(--ease-out); }
.chart { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 6) calc(var(--spacing) * 3); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.chart-plot { position: relative; }
.chart-svg { width: 100%; height: 17.5rem; overflow: visible; }
.chart-grid path { stroke: var(--color-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-dot { position: absolute; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: var(--radius-full); background: var(--color-honey); box-shadow: 0 0 0 3px var(--color-bg); }
.chart-cap { display: flex; justify-content: space-between; margin-top: calc(var(--spacing) * 2); font-size: var(--text-caption); color: var(--color-ink-2); }
.bars { display: grid; gap: calc(var(--spacing) * 3); max-width: 56rem; }
.bar-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 4.5rem; align-items: center; gap: calc(var(--spacing) * 4); }
.bar-name { font-size: var(--text-small); }
.bar-track { height: 0.875rem; background: var(--color-surface-2); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--color-primary-soft); }
.bar-v { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-small); }
.bar-row--sum { padding-top: calc(var(--spacing) * 3); border-top: var(--spacing-hairline) solid var(--color-line); font-weight: 700; }

/* ═══════════════ API · 약관 — 목차 2단 ═══════════════ */
.doc-2col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--spacing) * 12); align-items: start; }
.doc-2col--legal { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.toc { position: sticky; top: calc(var(--spacing) * 6); }
.toc-h { font-size: var(--text-meta-label); font-weight: 700; letter-spacing: var(--text-meta-label--letter-spacing); color: var(--color-ink-2); }
.toc ol { margin-top: calc(var(--spacing) * 2); border-left: var(--spacing-hairline) solid var(--color-line); }
.toc a { display: flex; align-items: center; min-height: 2.5rem; padding-left: calc(var(--spacing) * 4); color: var(--color-ink-2); text-decoration: none; font-size: var(--text-small); }
.toc a:hover { color: var(--color-primary); }
.api-sec + .api-sec { margin-top: calc(var(--spacing) * 14); padding-top: calc(var(--spacing) * 10); border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.api-sec > p { margin-block: calc(var(--spacing) * 3) calc(var(--spacing) * 5); max-width: var(--spacing-measure); }
.code-tabs { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
.api-sec .table-wrap { margin-top: calc(var(--spacing) * 4); }
.clause + .clause { margin-top: calc(var(--spacing) * 8); padding-top: calc(var(--spacing) * 8); border-top: var(--spacing-hairline) solid var(--color-line-soft); }
.clause p { margin-top: calc(var(--spacing) * 3); font-size: var(--text-article); line-height: var(--text-article--line-height); max-width: var(--spacing-measure); }

/* ═══════════════ 소개 ═══════════════ */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--spacing) * 12); align-items: center; }
.split-art .il { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.principles { margin-top: calc(var(--spacing) * 10); }
.plain-card { padding: calc(var(--spacing) * 6); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.plain-card .h-sm { margin-top: calc(var(--spacing) * 3); }
.plain-card p { margin-top: calc(var(--spacing) * 2); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-ink-2); }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 6); }
.page-head + * { margin-top: 0; }
.h-lg + .card-grid, .h-lg + .learn { margin-top: calc(var(--spacing) * 10); }

/* ═══════════════ 함께 일하기 ═══════════════ */
.svc { padding: var(--spacing-card-pad); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.svc-title { margin-top: calc(var(--spacing) * 1); }
.svc-panel { height: 12.5rem; }
.svc-desc { margin-top: calc(var(--spacing) * 4); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-ink-2); }
.ask { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--spacing) * 12); align-items: start; }
.ask-intro p { margin-top: calc(var(--spacing) * 3); color: var(--color-ink-2); }
.ask-box { padding: calc(var(--spacing) * 8); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); }
.ask-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 5); }
.fld label { display: block; margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-small); font-weight: 600; }
.fld .field { width: 100%; }
.fld--full { grid-column: 1 / -1; }
.fld .f-chips { margin-top: calc(var(--spacing) * 2); }
.ask-send { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 6); }
.ask-send .fine { margin-top: 0; }
.ask-done { display: none; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); color: var(--color-primary); font-weight: 600; }
.ask-done small { font-weight: 400; color: var(--color-ink-2); font-size: var(--text-small); }
[data-sent] .ask-fields, [data-sent] .ask-send { display: none; }
[data-sent] .ask-done { display: flex; }

/* ═══════════════ 404 ═══════════════ */
.nf { display: grid; justify-items: center; text-align: center; padding-block: calc(var(--spacing) * 6); }
.il-404 { width: min(25rem, 100%); height: auto; aspect-ratio: 16 / 10; }
.nf h1 { margin-top: calc(var(--spacing) * 4); }
.nf p { margin-top: calc(var(--spacing) * 3); color: var(--color-ink-2); }
.nf .link-pair { justify-content: center; margin-top: calc(var(--spacing) * 6); }

/* ═══════════════ 일러스트 두 색 ═══════════════ */
.il { overflow: visible; }
.il path, .il circle { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.il .il-a { stroke: var(--color-illus); }
.il .il-b { stroke: var(--color-honey); }
.il .il-2 { stroke-width: 1.4; opacity: 0.5; }
.il .il-ring { fill: var(--color-bg); }
.cat .il .il-ring, .case-cover .il .il-ring, .article-cover .il .il-ring { fill: var(--color-surface); }
.il .il-af { fill: var(--color-illus); stroke: none; }
.il .il-bf { fill: var(--color-honey); stroke: none; }

/* ═══════════════ 꼬리 — 전폭 짙은 흙 띠 (G1 ①) ═══════════════ */
.foot { background: var(--color-band); color: var(--color-on-dark); }
.foot-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--spacing) * 12); padding: calc(var(--spacing) * 14) var(--spacing-frame-pad) calc(var(--spacing) * 12); }
.foot-mark { display: inline-block; }
.foot-logo { width: 4rem; height: 1.625rem; }
.foot-logo .bm-line { stroke: var(--color-on-dark); stroke-width: 1.4; }
.foot-logo .bm-hub { fill: var(--color-band); stroke: var(--color-on-dark); stroke-width: 1.4; }
.foot-line { margin-top: calc(var(--spacing) * 4); font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-display-md); line-height: var(--text-display-md--line-height); max-width: 22rem; }
.foot-legal { margin-top: calc(var(--spacing) * 8); font-size: var(--text-small); line-height: 1.6; color: var(--color-primary-soft); }
.foot-virtual { display: block; margin-top: calc(var(--spacing) * 1); }
.foot-nav { display: grid; grid-template-columns: repeat(2, auto); column-gap: calc(var(--spacing) * 16); align-content: start; }
.foot-list a { display: flex; align-items: center; min-height: var(--spacing-touch); color: var(--color-on-dark); text-decoration: none; font-size: 0.9375rem; }
.foot-list a:focus-visible, .foot a:focus-visible { outline-color: var(--color-on-dark); }

/* ═══════════════ 폭 단계 ═══════════════ */
@media (max-width: 1279px) {
  .gnb-nav, .gnb-list { gap: calc(var(--spacing) * 7); }
  .learn { gap: calc(var(--spacing) * 8); }
}

@media (max-width: 1199px) {
  .dir-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "list" "empty" "pager"; }
  .ad--side { display: none; }
  .ad--inline { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--spacing-card-pad); align-items: start; }
  .ad--inline .kicker, .ad--inline .ad-title { grid-column: 1; }
  .ad--inline .ad-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; height: 9.5rem; }
  .ad--inline .ad-items { grid-template-columns: repeat(3, auto); justify-content: space-between; align-content: end; }
  .ad--inline .ad-items li, .ad--inline .ad-items li:nth-child(2) { justify-self: start; text-align: left; max-width: 8rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .gnb-nav { display: none; }
  .menu-btn { display: inline-grid; }
  [data-menu="open"] .gnb-panel { display: block; width: min(100% - var(--spacing-gutter) * 2, var(--spacing-frame)); margin-inline: auto; padding: calc(var(--spacing) * 2) var(--spacing-frame-pad) calc(var(--spacing) * 6); border-top: var(--spacing-hairline) solid var(--color-line); animation: disclose 200ms var(--ease-out); }
  .gnb-panel-list a { display: flex; min-height: 3.25rem; border-bottom: var(--spacing-hairline) solid var(--color-line-soft); font-size: 1.0625rem; }
  .gnb-panel-list a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
  .btn-letter--wide { margin-top: calc(var(--spacing) * 5); width: 100%; justify-content: center; }

  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-art { max-width: 32rem; width: 100%; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat .il { top: -10%; height: 120%; right: 0; }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-submit { position: static; margin: calc(var(--spacing) * 6) auto 0; order: 9; }
  .cell.dir { display: flex; flex-direction: column; }
  .cell.dir > .dir-head { order: 1; }
  .cell.dir > .btn-submit { order: 2; align-self: center; }
  .cell.dir > .dir-body, .cell.dir > .card-grid { order: 3; }
  .detail { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 8); }
  .meta-box .meta-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); }
  .meta-rows > div { display: grid; align-content: start; gap: calc(var(--spacing) * 1.5); padding: 0; border: 0; }
  .meta-box .btn-block { width: auto; }
  .letter { grid-template-columns: minmax(0, 1fr); }
  .letter-art { display: none; }
  .learn { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 12); }
  .learn-fig { justify-items: start; place-items: center start; height: auto; min-height: 6rem; }
  .learn-fig--nums { justify-content: flex-start; }
  .learn-fig--menu > * { margin-inline: 0; }
  .doc-2col, .doc-2col--legal { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 8); }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 2); border-left: 0; }
  .toc a { padding-inline: calc(var(--spacing) * 3); border: var(--spacing-hairline) solid var(--color-line); border-radius: var(--radius-sm); margin-top: calc(var(--spacing) * 2); min-height: var(--spacing-touch); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-art { max-width: 30rem; }
  .ask { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 6); }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 10); }
}

@media (max-width: 719px) {
  .gnb-in { gap: calc(var(--spacing) * 2); }
  .brand-word { font-size: 1.0625rem; }
  .notice-in { padding-left: calc(var(--spacing) * 3); gap: calc(var(--spacing) * 1); }
  .sub-row { flex-direction: column; gap: calc(var(--spacing) * 3); }
  .sub-field { width: 100%; }
  .sub-row .btn { width: 100%; }
  .hero-lead { margin-top: calc(var(--spacing) * 4); }
  .hero .sub { margin-top: calc(var(--spacing) * 6); }
  .hero-art { gap: calc(var(--spacing) * 2); }
  .cat { height: var(--spacing-home-card); }
  .cat-title { max-width: none; }
  .cat-desc { max-width: 55%; }
  .cat .il { top: auto; bottom: -10%; right: -6%; height: 78%; }
  .card-grid--2, .card-grid--3, .inline-cards, .prev-next { grid-template-columns: minmax(0, 1fr); }
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-tile { padding: calc(var(--spacing) * 4); }
  .search { gap: calc(var(--spacing) * 3); }
  .trend { margin-top: calc(var(--spacing) * 8); }
  .chips-wrap { margin-top: calc(var(--spacing) * 4); margin-inline: calc(var(--spacing-frame-pad) * -1); }
  .chips { padding-inline: var(--spacing-frame-pad); scroll-padding-inline: var(--spacing-frame-pad); }
  .dir-body { margin-top: calc(var(--spacing) * 10); }
  .dir-tools { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tool-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-btns .tbtn { width: 100%; justify-content: center; }
  .sort-menu { left: auto; right: 0; min-width: 12rem; }
  .filters { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 4); }
  .ad--inline { grid-template-columns: minmax(0, 1fr); }
  .ad--inline .ad-panel { grid-column: 1; grid-row: auto; margin-top: calc(var(--spacing) * 4); height: 11rem; }
  .ad--inline .ad-items { grid-template-columns: minmax(0, 1fr); align-content: space-between; }
  .ad--inline .ad-items li:nth-child(2) { justify-self: end; text-align: right; }
  .pg-step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-list li:nth-child(n+4):nth-child(-n+7) { display: none; }
  .client-head { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 4); }
  .meta-box .meta-rows { gap: calc(var(--spacing) * 3); }
  .band-word { padding-top: calc(var(--spacing) * 4); }
  .issues { margin-top: calc(var(--spacing) * 8); }
  .ask-box { padding: calc(var(--spacing) * 5); }
  .ask-fields { grid-template-columns: minmax(0, 1fr); }
  .sub-box { padding: calc(var(--spacing) * 5); }
  .bar-row { grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem; gap: calc(var(--spacing) * 3); }
  .stat { padding: calc(var(--spacing) * 4); }
  .chart { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3) calc(var(--spacing) * 2); }
  .chart-svg { height: 12.5rem; }
  .foot-in { padding-block: calc(var(--spacing) * 12) calc(var(--spacing) * 10); }
  .foot-nav { column-gap: calc(var(--spacing) * 6); }
  .foot-line { font-size: var(--text-display-sm); }
}