/* 키니인사이트 디자인시스템
 * tech-magazine-blog 샘플(app/globals.css)의 토큰과 컴포넌트 문법을 이식한 것.
 *
 * ── 원본에서 바꾼 것과 그 이유 ─────────────────────────────
 *
 * 1) 폰트: Inter → Pretendard.
 *    원본은 Inter 기준인데 Inter 에는 한글이 없다. 시스템 한글 폰트로 떨어지면
 *    Latin(Inter)과 한글(맑은고딕/애플고딕)의 굵기·폭이 어긋나 한 문장 안에서
 *    두 개의 서체로 읽힌다. Pretendard 는 Inter 메트릭에 맞춰 만든 한글 서체라
 *    이 디자인의 조판 의도를 그대로 유지하면서 한 서체로 처리된다.
 *
 * 2) 자간·행간: 표제의 letter-spacing 을 -0.075em → -0.03em,
 *    line-height 를 0.98 → 1.14 로 완화.
 *    원본 값은 어센더/디센더가 분명한 Latin 대문자 기준이다. 한글은 글자마다
 *    네모틀을 꽉 채우므로 같은 값을 주면 획이 서로 붙고 줄이 겹친다.
 *    ⚠️ 이 두 값은 눈대중으로 되돌리지 말 것 — 영문 목업에서는 더 좁은 쪽이
 *    항상 좋아 보이지만 한글 실물에서 깨진다.
 *
 * 3) word-break: keep-all 추가. 한글은 어절 단위로 끊어야 읽힌다.
 *
 * 유지한 것: 색 토큰 전부, 4px radius(사실상 각진 모서리), 모노 eyebrow,
 * 격자 패턴 아트블록, 1180px 그리드, 섹션 괘선 문법.
 */

/* Pretendard — 동적 서브셋. 한글은 글리프가 많아 통짜 로드가 무겁다.
 * dynamic-subset 은 실제 쓰인 글자만 내려받으므로 한글 페이지에 이게 정답이다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 토큰 ─────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --background: #fdfdfc;
  --foreground: #17202b;
  --card: #ffffff;
  --card-foreground: #17202b;
  --primary: #1c5fd4;
  --primary-foreground: #ffffff;
  --muted: #f1f3f5;
  --muted-foreground: #66717e;
  --border: #dfe3e7;
  --ring: #1c5fd4;

  --radius: 0.25rem;

  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* 아트블록 색 — 원본의 art-blue / art-slate / art-ink */
  --art-blue-bg: #d8e7ff;
  --art-slate-bg: #dde3e7;
  --art-slate-fg: #415263;
  --art-ink-bg: #ccd4dd;
}

/* ── 기본 ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* ── 셸 ───────────────────────────────────────────────── */
.header-inner,
.topic-inner,
.page-shell,
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* 고정 헤더가 앵커 목적지를 덮는 것을 막는다.
 * 토픽바의 "#domains / #how / #about" 링크로 이동하면 헤더가 sticky 라
 * 섹션 제목이 그 아래로 들어가 버린다. 모바일은 헤더가 2줄이라 더 크게 잡는다. */
:target,
section[id],
main [id] { scroll-margin-top: 96px; }

/* ── 헤더 ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--foreground);
  font-size: 22px;
  font-weight: 800;
  /* 한글 워드마크라 원본(-1.2px)보다 완화 */
  letter-spacing: -0.03em;
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  background: var(--foreground);
  color: var(--background);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -1px;
}

.wordmark-dot { color: var(--primary); }

.main-nav {
  display: flex;
  gap: 28px;
  margin-right: auto;
  margin-left: 60px;
}

.main-nav a {
  color: var(--muted-foreground);
  font-size: 14px;
  padding: 8px 0;
}

.main-nav a:hover { color: var(--foreground); }
.main-nav a[aria-current='page'] { color: var(--foreground); font-weight: 700; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted-foreground);
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-actions a:hover { color: var(--primary); }

/* ── 토픽 바 ──────────────────────────────────────────── */
.topic-bar { border-bottom: 1px solid var(--border); }

.topic-inner {
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 42px;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-size: 12px;
  scrollbar-width: none;
}

.topic-inner::-webkit-scrollbar { display: none; }
.topic-inner a:hover { color: var(--foreground); }

.topic-label {
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── 공통 활자 ────────────────────────────────────────── */
.eyebrow {
  margin: 0;
  color: var(--primary);
  font: 700 11px/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
}

.primary-link:hover { text-decoration: underline; }

.section-rule { border-top: 1px solid var(--border); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 27px;
}

.section-heading h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.section-heading span,
.section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.section-heading a:hover { color: var(--primary); }

/* ── 히어로 ───────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 100px;
  padding: 92px 0 82px;
}

.hero h1 {
  max-width: 760px;
  margin: 20px 0 28px;
  /* 원본 clamp(52px,7vw,92px)/0.98/-0.075em 에서 한글 대응 완화 */
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.hero-intro {
  max-width: 560px;
  margin: 0 0 30px;
  color: var(--muted-foreground);
  font-size: 20px;
  line-height: 1.55;
}

.hero-aside { padding-top: 5px; }

.hero-aside p {
  margin: 20px 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.65;
}

/* 사이드 스탯 — 원본 ad-slot 자리. 광고 대신 지금 쓸 수 있는 정보를 넣는다. */
.stat-block {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 22px 20px;
}

.stat-block dl { margin: 0; display: grid; gap: 16px; }
/* ⚠️ 한글 라벨에는 모노를 쓰지 않는다.
 * --font-mono 에는 한글 글리프가 없어 시스템 폰트로 폴백되는데, 그때
 * letter-spacing 만 남아 글자가 하나씩 떨어져 보인다 (실기기 확인).
 * 모노는 art-caption / EN / © 같은 라틴 전용 자리에만 쓴다. */
.stat-block dt {
  color: var(--muted-foreground);
  font: 700 11px var(--font-sans);
  letter-spacing: 0.04em;
}
.stat-block dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── 아트블록 ─────────────────────────────────────────── */
.card-art,
.article-hero {
  position: relative;
  display: block;
  min-height: 300px;
  overflow: hidden;
  text-align: left;
}

.art-blue { background: var(--art-blue-bg); color: var(--primary); }
.art-slate { background: var(--art-slate-bg); color: var(--art-slate-fg); }
.art-ink { background: var(--art-ink-bg); color: var(--foreground); }

.art-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(currentColor 1px, transparent 1px);
  background-size: 44px 44px;
}

.art-caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
}

.art-arrow { position: absolute; right: 20px; top: 20px; }

/* 아트블록 안의 큰 글자 — 이미지 없이 카드에 무게를 주는 장치 */
.art-figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(52px, 9vw, 104px);
  font-weight: 800;
  letter-spacing: -0.05em;
  opacity: 0.9;
}

/* ── 카드 ─────────────────────────────────────────────── */
.lead-section,
.latest-section {
  padding: 46px 0 70px;
}

.featured-card {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 54px;
  align-items: center;
}

.card-copy h2 {
  margin: 12px 0 16px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.card-copy h2 a:hover { color: var(--primary); }

.excerpt {
  max-width: 520px;
  margin: 0 0 14px;
  color: var(--muted-foreground);
  line-height: 1.65;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.meta span + span::before {
  content: '·';
  margin-right: 18px;
  color: #aab1b8;
}

.article-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}

.article-grid .card-art,
.related-grid .card-art { min-height: 210px; }

.article-grid .card-copy h2,
.related-grid .card-copy h2 { font-size: 22px; line-height: 1.32; }

.article-grid .excerpt,
.related-grid .excerpt { font-size: 14px; }

/* ── 목록형 행 (여러 항목을 표처럼) ───────────────────── */
.list-rows { border-top: 1px solid var(--border); }

.list-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

/* 한글 라벨 — 모노 금지 (위 stat-block dt 주석 참고) */
.list-row .row-label {
  color: var(--primary);
  font: 700 12px var(--font-sans);
  letter-spacing: 0.02em;
}

.list-row p { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.list-row strong { color: var(--foreground); }
.list-row .row-state { color: var(--muted-foreground); font: 11px var(--font-sans); letter-spacing: 0.02em; }

/* ── 롱폼 (가이드 본문) ───────────────────────────────── */
.article-page { padding-top: 38px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 13px;
}

.back-link:hover { color: var(--primary); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 230px;
  gap: 95px;
  padding: 56px 0 30px;
}

.longform h1 {
  max-width: 760px;
  margin: 16px 0 22px;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.16;
  letter-spacing: -0.032em;
  font-weight: 800;
}

.article-dek {
  max-width: 660px;
  color: var(--muted-foreground);
  font-size: 19px;
  line-height: 1.55;
}

.longform > .meta { margin: 28px 0 44px; }

.article-hero { min-height: 340px; margin-bottom: 55px; }

.article-content {
  max-width: 680px;
  font-size: 17px;
  line-height: 1.85;
}

.article-content p { margin: 0 0 26px; }

.article-content h2 {
  margin: 58px 0 18px;
  font-size: 27px;
  line-height: 1.32;
  letter-spacing: -0.025em;
}

.article-content h3 {
  margin: 38px 0 12px;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.article-content ul,
.article-content ol { margin: 0 0 26px; padding-left: 22px; }
.article-content li { margin-bottom: 10px; }

.article-content strong { font-weight: 700; }

.article-content a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 인용/요약 박스 — 원본 ds-summary */
.summary-box {
  margin: 32px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--primary);
  background: var(--muted);
}

.summary-box span {
  color: var(--primary);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.summary-box p { margin: 8px 0 0; font-size: 16px; line-height: 1.7; }
.summary-box p:last-child { margin-bottom: 0; }

blockquote.pull {
  margin: 34px 0;
  padding: 10px 0 10px 22px;
  border-left: 3px solid var(--primary);
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

/* 체크리스트 표 — 원본 ds-table-wrap */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); margin: 0 0 26px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th,
.table-wrap td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table-wrap th {
  color: var(--muted-foreground);
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.table-wrap tr:last-child td { border-bottom: 0; }

.article-signoff {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  font-weight: 700;
}

.article-signoff span { color: var(--muted-foreground); font-size: 13px; font-weight: 400; }

/* ── 사이드바 ─────────────────────────────────────────── */
.article-sidebar { padding-top: 50px; }

.toc {
  position: sticky;
  top: 100px;
  border-top: 2px solid var(--foreground);
  padding: 16px 0 28px;
}

.toc a {
  display: block;
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.45;
}

.toc a:hover { color: var(--primary); }

.sidebar-note {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 18px;
  margin-top: 28px;
}

.sidebar-note strong { display: block; font-size: 13px; margin-bottom: 6px; }
.sidebar-note p { margin: 0 0 12px; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }

/* ── 버튼 ─────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}

.button-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.button-secondary { background: var(--card); color: var(--foreground); }

/* ── 배지 ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font: 700 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-blue { background: var(--art-blue-bg); color: var(--primary); }
.badge-neutral { background: var(--muted); color: var(--muted-foreground); }

/* ── 푸터 ─────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); margin-top: 35px; }

.footer-inner {
  min-height: 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.footer-inner p,
.footer-note { margin: 0; color: var(--muted-foreground); font-size: 12px; }

.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }

/* 한글 링크가 섞이므로 sans. 모노는 아래 footer-note(© 라틴)만 유지 */
.footer-links a {
  color: var(--foreground);
  font: 700 12px var(--font-sans);
  letter-spacing: 0.02em;
}

.footer-note {
  font: 10px var(--font-mono) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links a:hover { color: var(--primary); }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { gap: 56px; grid-template-columns: minmax(0, 1fr) 260px; }
  .featured-card { gap: 34px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 48px; }
  .article-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .header-inner,
  .topic-inner,
  .page-shell,
  .footer-inner { padding-left: 18px; padding-right: 18px; }

  /* 모바일 헤더는 2줄로 접힌다 (1줄: 워드마크+EN / 2줄: 메뉴).
   * ⚠️ min-height 로는 여백이 안 생긴다 — 내용이 이미 그 높이를 넘기 때문에
   * min-height 가 무시되고 메뉴가 헤더 경계선에 그대로 붙는다 (실측 1px).
   * 세로 패딩으로 잡아야 한다. */
  .header-inner {
    min-height: 0;
    flex-wrap: wrap;
    gap: 18px 14px; /* 행 18 / 열 14 — 접힌 줄 사이가 더 벌어져야 두 줄로 읽힌다 */
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .main-nav { margin-left: 0; gap: 20px; order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .main-nav a { white-space: nowrap; padding: 4px 0; }
  .header-actions { font-size: 10px; gap: 12px; }
  .topic-inner { min-height: 46px; gap: 20px; }

  :target,
  section[id],
  main [id] { scroll-margin-top: 126px; }

  .hero { display: block; padding: 56px 0 48px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero-intro { font-size: 17px; }
  .hero-aside { margin-top: 44px; }

  .featured-card { display: block; }
  .featured-card .card-art { min-height: 240px; margin-bottom: 26px; }

  .article-grid,
  .related-grid { grid-template-columns: 1fr; gap: 40px; }
  /* 데스크톱에서는 카드가 세로로 쌓여도 그리드 gap 이 떨어뜨려 주지만,
   * 1열이 되면 아트블록과 카피가 같은 카드 안에서 맞붙는다 (실측 0px). */
  .article-grid .card-art,
  .related-grid .card-art { min-height: 220px; margin-bottom: 20px; }

  .list-row { grid-template-columns: 1fr; gap: 8px; }
  .list-row .row-state { display: none; }

  .article-layout { display: block; padding-top: 40px; }
  .longform h1 { font-size: clamp(28px, 8vw, 40px); }
  .article-dek { font-size: 17px; }
  .article-hero { min-height: 240px; margin-bottom: 38px; }
  .article-content { font-size: 16px; }
  .article-sidebar { padding-top: 48px; }
  .toc { position: static; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}