/* 비트펑크 — D3-B2 주황 안개 · 아카데미 짜임(2026-10-19 사용자 선택, 시안 scripts/mock5/gen.mjs 의 makeD3('d3b2')).
 * 층표: 머리 제목 40/900 · 대표 글 제목 24/800 · 묶음 머리 32/900(폰 26) + 부제 15/400 ink-3 · 타일 이름 16/800 + 수 14/500 ink-3
 *       · 카드 제목 18/700 · 태그 14/600 칩 · 메타 14/500 ink-3 · 글 제목 46/900 · 본문 17/1.85 */
:root { color-scheme: light;
  --paper: oklch(97.5% 0.018 75); --paper-2: oklch(94% 0.04 70); --ink: oklch(20% 0.03 50); --ink-2: oklch(38% 0.04 50); --ink-3: oklch(52% 0.04 55);
  --prose: oklch(26% 0.03 50); --rule: oklch(88% 0.04 65); --accent: oklch(70% 0.19 48); --focus: oklch(50% 0.17 45); --r: 18px;
  --cream-1: oklch(97% 0.02 80); --cream-2: oklch(92% 0.045 68); --glow: oklch(97% 0.05 80 / 0.8);
  --font-body: 'Pretendard Variable', Pretendard, sans-serif; --font-hud: 'JetBrains Mono', ui-monospace, monospace; }
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-variant-ligatures: no-contextual no-common-ligatures; font-feature-settings: 'calt' 0, 'liga' 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
time, kbd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.ic { width: 28px; height: 28px; color: var(--ink); } .sm { width: 16px; height: 16px; flex: none; }

/* 머리 줄 */
.top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: color-mix(in oklch, var(--paper) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.word { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 900; font-size: 20px; letter-spacing: -0.04em; }
.word i { width: 20px; height: 20px; background: var(--ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.nav { display: flex; gap: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; } .nav a { padding: 8px 12px; border-radius: 999px; } .nav a:hover { background: var(--paper-2); }
.sx { position: relative; min-width: 0; margin-left: auto; flex: 0 1 240px; }
.sx-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx-in { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper-2); border: 0; border-radius: 999px; padding: 9px 36px 9px 14px; }
.sx-in::placeholder { color: var(--ink-3); }
.sx-k { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 13px var(--font-body); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; }
.sx-res { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(440px, 90vw); margin: 0; padding: 6px; list-style: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 60px oklch(20% 0.03 50 / 0.18); max-height: 60vh; overflow-y: auto; }
.sx-res a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; } .sx-res a:hover { background: var(--paper-2); }
.sx-t { font-size: 15px; font-weight: 700; line-height: 1.45; } .sx-m, .sx-none { font-size: 14px; color: var(--ink-3); } .sx-none { padding: 10px 12px; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; } .progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* 그림 칸: 그린 장면, 없으면 크림 바탕 + 선 아이콘 */
.ph { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph.obj { display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 45%, var(--cream-1), var(--cream-2)); color: var(--ink-2); }
.ph.obj .big { width: 30%; height: auto; max-width: 96px; stroke-width: 1; }
.kick { margin: 0; font-family: var(--font-hud); font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em; } .kick::before { content: '>>> '; color: var(--ink-3); }
.kick a:hover { text-decoration: underline; text-underline-offset: 3px; }
.go { display: inline-flex; align-items: center; min-height: 48px; margin-top: 22px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 16px; }

/* 첫 화면 */
.ac-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; padding-top: 56px; }
.ac-hero h1, .cat-head h1 { margin: 12px 0 0; font-weight: 900; font-size: 40px; line-height: 1.2; letter-spacing: -0.05em; text-wrap: balance; }
.ac-hero .sub, .cat-head .sub { margin: 14px 0 0; font-size: 16px; color: var(--ink-3); }
.feat { display: grid; gap: 0; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.feat .ph { aspect-ratio: 16 / 9; } .feat .cb { display: grid; gap: 10px; padding: 20px 24px 24px; }
.feat .cb .t { font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; }
.feat .tag { background: var(--paper); }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.tile { display: grid; gap: 10px; justify-items: start; padding: 18px; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); }
.tile b { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; } .tile span { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.tile:hover { background: var(--paper-2); }
.sec { margin-top: 96px; }
.sh { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.sh h2 { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -0.05em; line-height: 1.2; text-wrap: balance; word-break: keep-all; } .sh p { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); } .sh a { font-size: 15px; font-weight: 700; white-space: nowrap; }
.starts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 4px 12px; align-items: center; min-height: 88px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--rule); }
.start .t { font-size: 15px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.start .ph { grid-row: span 2; grid-column: 2; aspect-ratio: 1; border-radius: 10px; } .start .ph.obj .big { width: 60%; }
/* 그림은 여백이 넓게(물건 30~35%) 그려져 56px 칸 · 목록 칸에서는 물건이 점만 했다 — 작은 자리에서만 가운데를 키운다 */
.start .ph img { transform: scale(1.8); }
.start .m { font-size: 14px; color: var(--ink-3); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }
.card .ph { aspect-ratio: 16 / 9; } .card .cb { display: grid; align-content: start; gap: 10px; padding: 16px 18px 18px; }
.card:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.cb .t { font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { padding: 3px 10px; border-radius: 999px; background: var(--paper-2); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cb .m { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
.list { counter-reset: n; border-top: 2px solid var(--ink); }
.list a { counter-increment: n; display: grid; grid-template-columns: 52px 120px minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.list a::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font-family: var(--font-hud); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.list .ph { grid-row: span 2; aspect-ratio: 3 / 2; border-radius: 10px; } .list .ph img { transform: scale(1.5); }
.list .t { align-self: end; font-size: 17px; font-weight: 700; line-height: 1.45; } .list .m { align-self: start; font-size: 14px; color: var(--ink-3); }
.mkt { padding: 24px; border-radius: var(--r); background: var(--paper-2); } .mkt h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; } .mkt .tv-chart { height: 240px; margin-top: 8px; }
.tv { min-width: 0; } .tv iframe { color-scheme: light; }
.tradingview-widget-copyright { font-size: 13px; line-height: 1.4; padding: 4px 0 0; color: var(--ink-3); text-align: right; } .tradingview-widget-copyright a { color: var(--ink-3); }
.tv-chart .tradingview-widget-container { height: 100%; display: flex; flex-direction: column; } .tv-chart .tradingview-widget-container__widget { flex: 1; min-height: 0; }
.tv-tape { min-height: 76px; }

/* 카테고리 · 404 — 시안에 없던 화면이라 첫 화면 부품(머리 · 칩 · 카드)을 그대로 쓴다 */
.cat-head { padding: 56px 0 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper-2); font-size: 15px; font-weight: 700; } .pill span { font-size: 14px; font-weight: 500; color: var(--ink-3); } .pill:hover { background: var(--rule); }
.cards.grid { margin-top: 40px; }
/* 정렬 전환: 하위 분류 칩(이동하는 링크)과 헷갈리지 않게 한 상자 안의 두 칸으로. 칸 수는 늘 둘, 켜짐만 바뀐다 */
.sort { display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; }
.sort button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sort button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sort button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 첫 화면 '많이 읽은 글': 최근 글과 같은 번호 목록, 넓은 화면은 두 단 */
@media (min-width: 961px) { .list.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }

/* 글 */
.art-hero .ph { aspect-ratio: 21 / 8; max-height: 60vh; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.art-hero .ph img { object-position: 50% 20%; }
/* 시안(D 계열)의 옅은 빛줄기 — 그림 위에만 얹는 장식 */
.art-hero .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 5%, var(--glow) 40%, transparent 75%) 0 22% / 100% 2px no-repeat, linear-gradient(90deg, transparent 30%, var(--glow) 70%, transparent 98%) 0 31% / 100% 1px no-repeat, linear-gradient(90deg, transparent 45%, var(--glow) 85%, transparent) 0 58% / 100% 1px no-repeat,
  repeating-linear-gradient(to bottom, oklch(100% 0 0 / 0.05) 0 1px, transparent 1px 4px); }
.art-hero.plain .ph::after { content: none; }
.art-hero.plain .ph { aspect-ratio: auto; height: 260px; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); } .art-hero.plain .ph .big { width: 96px; }
/* 시안 최종값: 그림과 제목이 56px 만 겹친다(-120px 는 분류 표식이 그림 위로 올라탔다) */
.art { position: relative; max-width: 740px; margin: -56px auto 0; padding-inline: 24px; }
.art h1 { margin: 10px 0 0; font-weight: 900; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.18; letter-spacing: -0.05em; text-wrap: balance; }
.art > .m { margin: 16px 0 0; font-size: 15px; color: var(--ink-3); }
.toc { margin: 36px 0 40px; border-radius: 16px; background: var(--paper-2); }
.toc summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 20px; font-weight: 800; cursor: pointer; list-style: none; } .toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: '열기'; font-size: 14px; font-weight: 500; color: var(--ink-3); } .toc[open] summary::after { content: '닫기'; }
.toc ol { margin: 0; padding: 0 20px 16px 40px; } .toc li { padding: 4px 0; font-size: 15px; color: var(--ink-2); } .toc a:hover { color: var(--ink); text-decoration: underline; }
.prose { margin-top: 36px; font-size: 17px; line-height: 1.85; color: var(--prose); }
.toc + .prose { margin-top: 0; }
.prose p { margin: 0 0 1.15em; } .prose p:has(> br:only-child) { display: none; }
.prose h2 { margin: 2.2em 0 0.6em; scroll-margin-top: 90px; font-size: 26px; font-weight: 900; line-height: 1.35; letter-spacing: -0.045em; color: var(--ink); }
.prose h3 { margin: 1.8em 0 0.5em; font-size: 19px; color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose img { margin: 0 auto; border-radius: 14px; }
.prose figure { margin: 36px 0; } .prose figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); text-align: center; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: 0.3em 0; }
.prose blockquote { margin: 28px 0; padding: 18px 22px; border-radius: 16px; background: var(--paper-2); }
.table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--rule); border-radius: 14px; }
.prose table { border-collapse: collapse; width: 100% !important; min-width: 460px; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 10px 14px; text-align: left; width: auto !important; height: auto !important; }
.prose thead td, .prose th { background: var(--paper-2); font-weight: 700; }
.prose iframe { max-width: 100%; border: 0; }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 48px; }
.pg { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--paper-2); } .pg-next { text-align: right; } .pg:hover { background: var(--rule); }
.pg-k { font-size: 14px; color: var(--ink-3); } .pg-t { font-weight: 700; line-height: 1.45; }
/* 좋아요 · 공유: 본문 끝 한 줄. 누르는 칸은 48px, 눌러도 폭이 안 바뀌게 최소 폭을 둔다 */
/* 본문의 마지막 줄처럼: 구분선 없이 문단 간격(1.15em ≈ 21px)보다 조금 더 띄워 붙인다(2026-10-19 사용자 '콘텐츠 안으로') */
.acts { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.acts + .pager { margin-top: 40px; }
.act { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.act:hover { background: var(--paper-2); } .act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.act .sm { width: 18px; height: 18px; flex: none; }
.act .n { min-width: 2ch; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.like[aria-pressed="true"] { border-color: var(--accent); background: var(--cream-2); }
.like[aria-pressed="true"] .sm { fill: var(--accent); stroke: var(--accent); }
.share { min-width: 108px; } .share.done .sm { stroke: var(--focus); }
/* 늦게 오는 숫자: 자리를 실제 글자 폭으로 잡아 두고 흐르게 */
.sk { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 50%, var(--paper-2) 75%) 0 0 / 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* 바닥 */
.foot { margin-top: 112px; padding: 40px 0 64px; background: var(--paper-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.foot-cols div { display: grid; align-content: start; gap: 2px; } .foot-cols a { padding: 4px 0; font-size: 15px; color: var(--ink-2); } .foot-cols a:hover { color: var(--ink); }
.foot-h { margin: 0 0 6px; font-size: 15px; font-weight: 800; } .foot-h a { color: var(--ink); }
.foot-note { margin: 32px 0 0; max-width: 46em; font-size: 14px; color: var(--ink-3); }

@media (max-width: 960px) {
  .ac-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two { grid-template-columns: minmax(0, 1fr); } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .wrap, .art { padding-inline: 16px; } .nav { display: none; } .top .wrap { gap: 12px; height: 56px; }
  .ac-hero { padding-top: 28px; } .ac-hero h1, .cat-head h1 { font-size: 30px; } .cat-head { padding-top: 32px; } .feat .cb .t { font-size: 20px; } .feat .cb { padding: 16px 18px 20px; }
  .sec { margin-top: 64px; } .sh h2 { font-size: 26px; }
  /* 휴대폰에서 타일 6개가 세로로 쌓여 약 450px 를 먹었다 — 아이콘을 왼쪽에 두고 한 칸을 낮게 */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; } .tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; min-height: 64px; padding: 10px 12px; } .tile .ic { grid-row: span 2; width: 22px; height: 22px; } .tile b { font-size: 15px; }
  .starts, .cards:not(.grid) { grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .starts { grid-auto-columns: 78%; } .cards:not(.grid) { grid-auto-columns: 82%; } .start, .card { scroll-snap-align: start; }
  /* 카테고리 목록(수십 편)은 옆으로 넘기면 끝이 안 보인다 — 폰에서는 그림 왼쪽 · 글 오른쪽 한 줄씩 */
  .cards.grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); }
  .cards.grid .card { grid-template-rows: none; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
  .cards.grid .card .ph { aspect-ratio: 1; border-radius: 10px; } .cards.grid .card .ph img { transform: scale(1.5); } .cards.grid .cb { padding: 0; gap: 6px; } .cards.grid .cb .t { font-size: 16px; }
  .list a { grid-template-columns: 36px 88px minmax(0, 1fr); gap: 2px 12px; } .list a::before { font-size: 20px; } .list .t { font-size: 16px; }
  .art-hero .ph { aspect-ratio: 4 / 3; } .art-hero.plain .ph { height: 180px; } .art { margin-top: -40px; }
  .pager { grid-template-columns: minmax(0, 1fr); } .pg-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }