/* ==========================================================================
   LINEAR 디자인 시스템 — 모든 화면이 공유하는 토큰과 컴포넌트
   계층: 토큰 → 기본 → 아톰(ds-btn, ds-chip, ds-kbd, ds-icon) → 분자(ds-tile, ds-row, ds-topbar, ds-head)
         → 유기체(ds-grid, ds-hero, ds-list)
   규칙: 색·글꼴·간격은 토큰으로만 쓴다. 페이지 CSS는 레이아웃만 덧붙인다.
   ========================================================================== */

/* ---------- 토큰 ---------- */
:root {
  /* 바탕과 글자 */
  --ds-bg: #0C0C0E;
  --ds-surface: #141417;
  --ds-raise: #1C1C21;
  --ds-line: rgba(255, 255, 255, .07);
  --ds-line-strong: rgba(255, 255, 255, .14);
  --ds-ink: #F4F4F2;
  --ds-soft: #C9C9CE;
  --ds-muted: #8E8E95;
  /* 의미 색 (모션 캔버스 팔레트와 같다) */
  --ds-gold: #FFD23F;
  --ds-image: #4FA8FF;
  --ds-sage: #3DDC97;
  --ds-kernel: #FF6B4A;
  --ds-lilac: #A88BFF;
  --ds-accent: var(--ds-gold);
  /* 글꼴 */
  --ds-font: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --ds-mono: "JetBrains Mono", "Nanum Gothic Coding", ui-monospace, monospace;
  /* 크기 단계 */
  --ds-fs-xs: 12px; --ds-fs-sm: 14px; --ds-fs-md: 16px; --ds-fs-lg: 19px; --ds-fs-xl: 24px;
  --ds-fs-display: clamp(40px, 7vw, 88px);
  /* 간격 단계 (4px 격자) */
  --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 24px; --ds-6: 32px; --ds-7: 48px; --ds-8: 72px;
  /* 모서리·그림자·움직임 */
  --ds-r-sm: 8px; --ds-r-md: 14px; --ds-r-lg: 20px; --ds-r-pill: 999px;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
  --ds-page: 1240px;
  color-scheme: dark;
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ds-bg); -webkit-text-size-adjust: 100%; }
body.ds { margin: 0; background: var(--ds-bg); color: var(--ds-ink); font-family: var(--ds-font); font-size: var(--ds-fs-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-x: hidden; }
:where(.ds) a { color: inherit; }
.ds :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; border-radius: var(--ds-r-sm); }
.ds-page { width: min(var(--ds-page), 100% - 2 * var(--ds-5)); margin-inline: auto; padding-block: var(--ds-6) var(--ds-8); }
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 아톰 ---------- */
.ds-btn { display: inline-flex; align-items: center; gap: var(--ds-2); min-height: 44px; padding: 0 var(--ds-5); border: 0; border-radius: var(--ds-r-pill);
  background: var(--ds-ink); color: var(--ds-bg); font: 650 var(--ds-fs-sm)/1 var(--ds-font); text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ds-ease), background .2s; }
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn--ghost { background: var(--ds-raise); color: var(--ds-ink); }
.ds-btn--ghost:hover { background: #26262C; }
.ds-btn--sm { min-height: 34px; padding: 0 var(--ds-4); font-size: var(--ds-fs-xs); }

.ds-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ds-r-pill); background: rgba(12, 12, 14, .62);
  color: var(--ds-ink); font: 650 var(--ds-fs-xs)/1.2 var(--ds-font); font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ds-chip--solid { background: var(--ds-raise); backdrop-filter: none; }
.ds-chip--accent { background: var(--ds-accent); color: var(--ds-bg); }

.ds-kbd { display: inline-block; min-width: 22px; padding: 4px 6px; border-radius: 6px; background: var(--ds-raise); color: var(--ds-ink);
  font: 600 11px/1 var(--ds-mono); text-align: center; }

.ds-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ds-soft); text-decoration: none; transition: background .15s, color .15s; }
.ds-icon-btn:hover { background: var(--ds-raise); color: var(--ds-ink); }

.ds-eyebrow { margin: 0; color: var(--ds-accent); font: 650 var(--ds-fs-xs)/1.4 var(--ds-font); letter-spacing: .04em; }

/* ---------- 분자 ---------- */
/* 상단 막대: 브랜드 + 두 갈래 내비게이션 */
.ds-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--ds-4); height: 60px; padding: 0 max(var(--ds-5), (100% - var(--ds-page)) / 2);
  background: rgba(12, 12, 14, .78); border-bottom: 1px solid var(--ds-line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.ds-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ds-ink); font-weight: 750; letter-spacing: -.01em; text-decoration: none; }
.ds-brand img { width: 26px; height: 26px; }
.ds-brand small { color: var(--ds-muted); font-weight: 500; font-size: var(--ds-fs-xs); }
.ds-nav { display: flex; gap: var(--ds-1); margin-left: auto; }
.ds-nav a { padding: 8px 14px; border-radius: var(--ds-r-pill); color: var(--ds-muted); font-size: var(--ds-fs-sm); font-weight: 600; text-decoration: none; transition: color .15s, background .15s; }
.ds-nav a:hover { color: var(--ds-ink); }
.ds-nav a[aria-current="page"] { background: var(--ds-raise); color: var(--ds-ink); }

/* 섹션 머리: 제목 + 범위 */
.ds-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--ds-4); font-size: var(--ds-fs-sm); font-weight: 650; }
.ds-head span { color: var(--ds-muted); font-weight: 450; font-variant-numeric: tabular-nums; }

/* 정사각형 타일: 대표 이미지 + 번호 + 제목 */
.ds-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--ds-r-lg); background: var(--ds-surface); color: var(--ds-ink);
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--ds-line); isolation: isolate; }
.ds-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .5s var(--ds-ease), opacity .3s; }
.ds-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,12,14,0) 42%, rgba(12,12,14,.86) 80%, rgba(12,12,14,.96)); }
.ds-tile .ds-chip { position: absolute; top: 14px; left: 14px; }
.ds-tile__title { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: var(--ds-fs-lg); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.ds-tile:hover img, .ds-tile:focus-visible img { transform: scale(1.05); opacity: 1; }
.ds-tile--feature { aspect-ratio: 4 / 3; }
.ds-tile--feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: -1; background: linear-gradient(180deg, rgba(12,12,14,.88), rgba(12,12,14,0)); }
.ds-tile--feature .ds-tile__title { font-size: clamp(24px, 3vw, 36px); bottom: 22px; left: 24px; right: 24px; }
.ds-tile--feature .ds-tile__sub { position: absolute; left: 24px; right: 24px; top: 22px; color: var(--ds-soft); font-size: var(--ds-fs-sm); }

/* 목록 행: 번호 + 제목 + 동작 */
.ds-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--ds-3); padding: 14px var(--ds-4);
  border-top: 1px solid var(--ds-line); }
.ds-row:first-child { border-top: 0; }
.ds-row__no { color: var(--ds-muted); font: 600 var(--ds-fs-sm)/1 var(--ds-mono); }
.ds-row__title { font-weight: 650; }
.ds-row__actions { display: flex; gap: var(--ds-2); }

/* ---------- 유기체 ---------- */
.ds-hero { padding-block: var(--ds-7) var(--ds-6); }
.ds-hero h1 { margin: var(--ds-3) 0 var(--ds-3); font-size: var(--ds-fs-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.ds-hero p { margin: 0; max-width: 640px; color: var(--ds-muted); font-size: var(--ds-fs-lg); }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ds-4); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-5); }
.ds-list { overflow: hidden; border-radius: var(--ds-r-lg); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-line); }
.ds-section + .ds-section { margin-top: var(--ds-7); }
.ds-foot { display: flex; flex-wrap: wrap; gap: var(--ds-2) var(--ds-5); margin-top: var(--ds-8); padding-top: var(--ds-5); border-top: 1px solid var(--ds-line);
  color: var(--ds-muted); font-size: 13px; }
.ds-foot a { color: var(--ds-muted); }

@media (max-width: 640px) {
  .ds-page { width: calc(100% - 2 * var(--ds-4)); padding-top: var(--ds-4); }
  .ds-topbar { height: 54px; padding-inline: var(--ds-4); gap: var(--ds-2); }
  .ds-brand small { display: none; }
  .ds-nav a { padding: 7px 10px; font-size: 13px; }
  .ds-hero { padding-block: var(--ds-6) var(--ds-5); }
  .ds-hero p { font-size: var(--ds-fs-md); }
  .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ds-grid--2 { grid-template-columns: 1fr; gap: var(--ds-3); }
  .ds-tile { border-radius: var(--ds-r-md); }
  .ds-tile__title { left: 12px; right: 12px; bottom: 12px; font-size: 15px; }
  .ds-tile .ds-chip { top: 10px; left: 10px; }
  .ds-row { grid-template-columns: 38px minmax(0, 1fr); }
  .ds-row__actions { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ds-tile img, .ds-btn { transition: none; } }