/* ITzIN — WIRED 톤앤매너: 순흑 잉크 · 순백 캔버스, 각진 사각(라운드 0), 그림자 없이 헤어라인,
   가독성 위해 제목/본문 폰트를 분리: 제목=산세리프(Inter+시스템 한글 고딕, 굵게), 본문=세리프(Lora/Noto Serif KR), 로고=세리프 마스트헤드(Playfair). 유일한 색은 인라인 링크 블루. 라이트 전용. */
/* 성능: 한글 제목 고딕은 시스템 폰트(로드 0). Latin 3종 + 한글 본문 세리프(Noto Serif KR)만 로드. preconnect는 페이지 head에서. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;700;800&family=Noto+Serif+KR:wght@400;700&display=swap');

:root {
  --itzin-bg: #ffffff;          /* canvas */
  --itzin-surface: #f5f5f5;     /* canvas-soft */
  --itzin-surface-2: #ededed;
  --itzin-text: #000000;        /* ink */
  --itzin-ink-soft: #1a1a1a;
  --itzin-text-muted: #757575;  /* body grey */
  --itzin-border: #e0e0e0;      /* hairline */
  --itzin-primary: #000000;     /* ink = CTA/footer */
  --itzin-primary-ink: #ffffff;
  --itzin-link: #057dbc;        /* 인라인 링크 전용 */
  --itzin-accent: #3b3ff0;      /* 워드마크 'z' 마크 전용 시그니처 컬러(로고 외엔 사용 안 함) */
  --itzin-radius: 0px;          /* 각진 사각 — 브랜드 시그니처 */
  --itzin-maxw: 720px;          /* 아티클 컬럼 */
  --itzin-maxw-wide: 1200px;    /* 홈 그리드 */
  --font-display: "Inter", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; /* 제목: 산세리프(굵게) */
  --font-serif: "Lora", "Noto Serif KR", Georgia, serif;                                                /* 본문: 세리프 롱폼 */
  --font-sans: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;    /* 메타·UI */
  --font-logo: "Playfair Display", Georgia, "Times New Roman", serif;                                    /* 로고 마스트헤드: 세리프 */
}

/* ── 블랙(다크) 버전 — WIRED 폴라리티 플립(순흑↔순백 반전). 시스템 다크 자동 + data-theme 수동 토글. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --itzin-bg: #000000; --itzin-surface: #141414; --itzin-surface-2: #1e1e1e;
    --itzin-text: #ffffff; --itzin-ink-soft: #e6e6e6; --itzin-text-muted: #9a9a9a;
    --itzin-border: #2a2a2a; --itzin-primary: #ffffff; --itzin-primary-ink: #000000; --itzin-link: #5ab0e6; --itzin-accent: #6d70ff;
  }
}
:root[data-theme="dark"] {
  --itzin-bg: #000000; --itzin-surface: #141414; --itzin-surface-2: #1e1e1e;
  --itzin-text: #ffffff; --itzin-ink-soft: #e6e6e6; --itzin-text-muted: #9a9a9a;
  --itzin-border: #2a2a2a; --itzin-primary: #ffffff; --itzin-primary-ink: #000000; --itzin-link: #5ab0e6; --itzin-accent: #6d70ff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--itzin-bg);
  color: var(--itzin-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ── 접근성: 포커스 가시성 · 본문 바로가기 · 모션 축소 ── */
:focus-visible { outline: 2px solid var(--itzin-link); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--itzin-text); color: var(--itzin-bg); padding: 10px 16px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ── 모바일 내비(details 디스클로저) — 데스크톱 숨김, 모바일에서 노출 ── */
.mobile-nav { display: none; border-top: 1px solid var(--itzin-border); padding: 2px 20px 8px; }
.mobile-nav summary { list-style: none; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 0; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav .m-links { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 8px; border-top: 1px solid var(--itzin-border); }
.mobile-nav .m-links a { font-family: var(--font-sans); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--itzin-text); }

/* ── 마스트헤드 / 헤더 ── */
.itzin-header {
  border-bottom: 1px solid var(--itzin-border);
  background: var(--itzin-bg);
  position: sticky; top: 0; z-index: 10;
}
.itzin-header .inner {
  max-width: var(--itzin-maxw-wide); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}
.itzin-logo {
  font-family: var(--font-logo); font-weight: 700; font-size: 26px;
  letter-spacing: -0.5px; color: var(--itzin-text); line-height: 1;
}
/* 'z' 마크 — 글자 자체에 시그니처 컬러(배경 없음). */
.itzin-logo span { color: var(--itzin-accent); }
.itzin-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.itzin-nav a {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--itzin-text);
}
.itzin-nav a:hover { color: var(--itzin-text-muted); }
.itzin-header .cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── 버튼: 각진 사각 ── */
.btn {
  display: inline-block; font-family: var(--font-sans); font-weight: 700;
  font-size: 15px; letter-spacing: 0.3px; padding: 11px 20px;
  border-radius: 0; border: 1px solid transparent; cursor: pointer; line-height: 1.25;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn-pro { background: var(--itzin-primary); color: var(--itzin-primary-ink); border-color: var(--itzin-primary); }
.btn-primary:hover, .btn-pro:hover { opacity: 0.85; }
.btn-ghost, .btn-outline { background: var(--itzin-bg); color: var(--itzin-text); border-color: var(--itzin-text); }
.btn-ghost:hover, .btn-outline:hover { background: var(--itzin-text); color: var(--itzin-bg); }
.theme-toggle { padding: 8px 12px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; min-width: 62px; }

/* ── 카테고리 아이브로우 / 배지 (색 채움 없음, 대문자 라벨) ── */
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.badge {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--itzin-text); background: none; padding: 0;
}
.badge.category { color: var(--itzin-text); }
.badge + .badge { border-left: 1px solid var(--itzin-border); padding-left: 12px; }
.badge.premium { color: var(--itzin-ink-soft); }

/* ── 아티클 레이아웃 ── */
.article-wrap { max-width: var(--itzin-maxw); margin: 0 auto; padding: 40px 20px 64px; }
h1.article-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5.6vw, 52px);
  line-height: 1.12; letter-spacing: -0.8px; margin: 4px 0 12px; color: var(--itzin-text);
}
.article-subtitle {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400; line-height: 1.45;
  color: var(--itzin-ink-soft); margin: 0 0 20px;
}
.article-meta {
  font-family: var(--font-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.1px;
  color: var(--itzin-text-muted); display: flex; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--itzin-border); margin-bottom: 28px;
}
/* 커버 SVG */
.cover-svg { width: 100%; height: auto; display: block; }
.article-cover { margin-bottom: 32px; line-height: 0; }

/* 아티클 레이아웃: 좌측 고정 목차 사이드바 + 본문 */
.article-shell { max-width: 1040px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 210px minmax(0, 720px); gap: 44px; align-items: start; justify-content: center; }
.article-shell.no-toc { grid-template-columns: minmax(0, 720px); }
.toc-aside { position: sticky; top: 68px; align-self: start; padding-top: 44px; }
.toc-aside .toc-title { font-family: var(--font-sans); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--itzin-text-muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--itzin-border); }
.toc-aside .toc-list { list-style: none; margin: 0; padding: 0; }
.toc-aside .toc-list a { font-family: var(--font-sans); font-size: 13px; line-height: 1.35; color: var(--itzin-text-muted); border-left: 2px solid var(--itzin-border); padding: 5px 0 5px 12px; display: block; }
.toc-aside .toc-list a:hover { color: var(--itzin-text); border-left-color: var(--itzin-text); }
.toc-aside .toc-h3 a { padding-left: 24px; font-size: 12px; }
@media (max-width: 900px) {
  .article-shell, .article-shell.no-toc { grid-template-columns: 1fr; gap: 0; max-width: 720px; padding: 0; }
  .toc-aside { position: static; padding: 12px 18px; border: 1px solid var(--itzin-border); margin: 20px 20px 0; }
  .toc-aside .toc-title { border-bottom: none; }
}

/* Mermaid 다이어그램 */
.article-body .mermaid, .premium-box .mermaid { margin: 24px 0; text-align: center; background: var(--itzin-surface); border: 1px solid var(--itzin-border); padding: 20px; overflow-x: auto; }
.article-body .mermaid svg, .premium-box .mermaid svg { max-width: 100%; height: auto; }

/* ── 목차(TOC) ── */
.toc { border: 1px solid var(--itzin-border); padding: 12px 18px 14px; margin: 0 0 32px; }
.toc summary { list-style: none; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--itzin-text); }
.toc summary::-webkit-details-marker { display: none; }
.toc-list { list-style: none; margin: 12px 0 0; padding: 0; }
.toc-list li { margin: 8px 0; }
.toc-list a { font-family: var(--font-serif); font-size: 16px; color: var(--itzin-ink-soft); border-bottom: 1px solid transparent; }
.toc-list a:hover { border-bottom-color: var(--itzin-text); }
.toc-list .toc-h3 { padding-left: 16px; }
.toc-list .toc-h3 a { font-size: 15px; color: var(--itzin-text-muted); }

/* 본문: 세리프 롱폼 */
.article-body { font-family: var(--font-serif); font-size: 19px; line-height: 1.58; color: var(--itzin-text); }
/* 앵커 이동 시 스티키 헤더 겹침 방지 */
.article-body h2, .article-body h3, .premium-box h2, .premium-box h3 { scroll-margin-top: 72px; }
.article-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.25; letter-spacing: -0.4px; margin: 44px 0 12px; }
.article-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -0.2px; margin: 30px 0 10px; }
.article-body p { margin: 16px 0; }
.article-body a { color: var(--itzin-link); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin: 6px 0; }
.article-body strong { font-weight: 700; }
.article-body blockquote {
  border-left: 2px solid var(--itzin-text); margin: 20px 0; padding: 2px 18px;
  font-style: italic; color: var(--itzin-ink-soft);
}
.article-body pre {
  background: var(--itzin-surface); border: 1px solid var(--itzin-border); border-radius: 0;
  padding: 16px; overflow-x: auto; font-size: 14px;
}
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.article-body :not(pre) > code { background: var(--itzin-surface); padding: 2px 5px; font-size: 0.88em; }
.article-body table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-sans); font-size: 15px;
  display: block; overflow-x: auto;
}
.article-body th, .article-body td { border: 1px solid var(--itzin-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body thead th {
  background: var(--itzin-surface); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* 광고 슬롯 */
.ad-slot {
  border: 1px solid var(--itzin-border); border-radius: 0; text-align: center;
  padding: 22px; margin: 32px 0; color: var(--itzin-text-muted);
  font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  background: var(--itzin-surface);
}

/* ── 요약 / 프리미엄 게이팅 박스 ── */
.summary-box, .premium-box {
  border-radius: 0; padding: 24px; margin: 36px 0; border: 1px solid var(--itzin-border); background: var(--itzin-bg);
}
.premium-box { background: var(--itzin-surface); }
.gate-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--itzin-text); margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--itzin-border);
}
.gate-cta {
  margin-top: 16px; padding: 0; background: none; color: var(--itzin-ink-soft);
  font-family: var(--font-sans); font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gate-cta.pro { color: var(--itzin-ink-soft); }
.summary-list { margin: 0; padding-left: 20px; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; }
.summary-list li { margin: 8px 0; }
.summary-box p, .premium-box p { font-family: var(--font-serif); font-size: 16px; line-height: 1.55; }
.keyword-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.keyword-chips .chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  background: none; border: 1px solid var(--itzin-border); padding: 5px 10px; border-radius: 0; color: var(--itzin-text);
}
.premium-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.2px; margin: 18px 0 8px; }
.premium-box ul { font-family: var(--font-serif); }

/* ── 섹션 / 관련글 / 뉴스레터 / 댓글 ── */
.section-block { margin: 48px 0; }
.section-block > h2 {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; text-transform: uppercase;
  letter-spacing: 1px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--itzin-text);
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.newsletter-box {
  background: var(--itzin-primary); color: var(--itzin-primary-ink); border-radius: 0; padding: 32px; text-align: center;
}
.newsletter-box b { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.4px; display: block; }
.newsletter-box p { font-family: var(--font-serif); margin: 8px 0 0; color: inherit; opacity: 0.82; }
.newsletter-box .btn { background: var(--itzin-bg); color: var(--itzin-text); border-color: var(--itzin-bg); margin-top: 16px; }
.newsletter-box .btn:hover { opacity: 0.85; }
.comments-placeholder {
  border: 1px solid var(--itzin-border); border-radius: 0; padding: 20px;
  color: var(--itzin-text-muted); font-family: var(--font-sans); font-size: 14px; background: var(--itzin-surface);
}

/* ── 홈 / 인덱스 ── */
.home-wrap { max-width: var(--itzin-maxw-wide); margin: 0 auto; padding: 48px 20px 64px; }
.home-hero { margin-bottom: 48px; max-width: 900px; }
.home-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 7vw, 60px); line-height: 1.08; letter-spacing: -1px; margin: 0 0 12px; }
.home-hero p { font-family: var(--font-serif); color: var(--itzin-ink-soft); font-size: 20px; line-height: 1.45; margin: 0; }
/* 커버스토리(대형 피처) — WIRED 매거진 그리드 */
.cover-story { margin: 8px 0 44px; padding-bottom: 44px; border-bottom: 1px solid var(--itzin-border); }
.cover-link { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
.cover-media { line-height: 0; }
.cover-media .cover-svg { width: 100%; height: auto; display: block; }
.cover-text .badge { margin-bottom: 10px; display: inline-block; }
.cover-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.14; letter-spacing: -0.7px; margin: 6px 0 14px; }
.cover-dek { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; color: var(--itzin-ink-soft); margin: 0 0 16px; }
.cover-link:hover .cover-headline { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .cover-link { grid-template-columns: 1fr; gap: 16px; } }
.cat-section { margin: 44px 0; }
.cat-section > h2 {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
  padding: 0 0 10px; margin: 0 0 20px; border-bottom: 2px solid var(--itzin-text);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.card { border: none; border-radius: 0; background: var(--itzin-bg); display: flex; flex-direction: column; }
.card .thumb { aspect-ratio: 16/9; overflow: hidden; line-height: 0; }
.card .thumb .cover-svg { width: 100%; height: 100%; display: block; }
.card .body { padding: 14px 0 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-family: var(--font-sans); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.28px; margin: 0; }
.card .excerpt { font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--itzin-ink-soft); margin: 0; }
.card .card-meta { margin-top: auto; font-family: var(--font-sans); font-size: 12px; color: var(--itzin-text-muted); display: flex; gap: 10px; letter-spacing: 0.3px; }
.card:hover h3 { text-decoration: underline; text-underline-offset: 2px; }

/* ── 푸터: 흑색 밴드 ── */
.itzin-footer {
  background: var(--itzin-primary); color: var(--itzin-primary-ink);
  padding: 48px 20px; text-align: center;
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.3px;
}

@media (max-width: 640px) {
  .itzin-header .inner { gap: 12px; }
  .itzin-nav { display: none; }
  .mobile-nav { display: block; }
  .article-wrap { padding: 28px 18px 48px; }
}

/* ── 멤버십 가치 사다리(홈 전환 유도) ── */
.value-ladder { border: 1px solid var(--itzin-border); padding: 28px; margin: 48px 0; }
.value-ladder .ladder { display: grid; grid-template-columns: repeat(3, 1fr); }
.value-ladder .tier { padding: 4px 22px; border-left: 1px solid var(--itzin-border); }
.value-ladder .tier:first-child { border-left: none; padding-left: 0; }
.value-ladder .t-name { font-family: var(--font-sans); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; }
.value-ladder .tier.pro .t-name { color: var(--itzin-accent); }
.value-ladder .tier p { font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--itzin-ink-soft); margin: 0; }
.value-ladder .ladder-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--itzin-border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {
  .value-ladder .ladder { grid-template-columns: 1fr; }
  .value-ladder .tier { border-left: none; padding: 14px 0 0; border-top: 1px solid var(--itzin-border); margin-top: 14px; }
  .value-ladder .tier:first-child { border-top: none; margin-top: 0; padding-top: 0; }
}