/* 점(boltandnutt.com) v6 (2026-10-27) — "밤의 박물관". 배포 후 수정 금지, 바꿀 일은 v7 폴더로.
   불 꺼진 전시실에 진열장만 조명을 받는다. 도트 캐릭터가 전시품, 이름은 유물 설명처럼 작은 캡션.
   색은 먹색과 미색 두 가지, 칸마다 그 서비스의 색을 점 하나만큼.
   글꼴: 제목·캡션 고운바탕(어명이오와 같은 집안, 쓰는 글자만 잘라 /assets/fonts 에 둠), 본문은 시스템 고딕 보통 굵기. */

@font-face { font-family: "Gowun Batang Jeom"; font-weight: 400; font-display: swap; src: url("/assets/fonts/gowun-batang-400-jeom1.woff2") format("woff2"); }
@font-face { font-family: "Gowun Batang Jeom"; font-weight: 700; font-display: swap; src: url("/assets/fonts/gowun-batang-700-jeom1.woff2") format("woff2"); }

:root {
  --room: #16171b; --room-2: #1d1f24; --rule: #2e3036;
  --ivory: #ece6da; --ivory-2: #b3ada2; --ivory-3: #7d786f;
  --case: #111216; --frame: #5c3d29; --frame-hi: #8f6444; --plank: #6e4a31; --plank-hi: #a07450;
  --lamp: 244 226 190;
  --ac: #e9dcc0;
  --serif: "Gowun Batang Jeom", "Gowun Batang", "Noto Serif KR", "AppleMyungjo", serif;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--room); color: var(--ivory-2); font: 400 16px/1.7 var(--sans); letter-spacing: -0.005em; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; padding: 8px 14px; background: var(--ivory); color: var(--room); }

/* 머리 줄 */
.bar { border-bottom: 1px solid var(--rule); }
.bar-in { display: flex; align-items: center; height: 58px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ivory); font: 700 22px/1 var(--serif); }
.logo svg { width: 26px; height: 26px; }
.logo-frame { fill: var(--case); stroke: var(--frame-hi); stroke-width: 2.4; }
.logo-shelf { stroke: var(--plank-hi); stroke-width: 2; }
.logo-dot { fill: var(--ivory); }
.bar-nav { margin-left: auto; display: flex; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 15px; color: var(--ivory-2); text-decoration: none; }
.bar-nav a:hover { color: var(--ivory); }

/* 소개 */
.intro { padding-top: 40px; padding-bottom: 32px; }
.intro h1 { color: var(--ivory); font: 700 36px/1.25 var(--serif); letter-spacing: -0.02em; }
.intro p { margin-top: 12px; max-width: 32em; font-size: 15px; color: var(--ivory-2); }
@media (min-width: 860px) {
  .intro { padding-top: 72px; padding-bottom: 48px; display: grid; grid-template-columns: auto minmax(0, 28em); gap: 48px; align-items: end; }
  .intro h1 { font-size: 54px; }
  .intro p { margin-top: 0; }
}

/* 진열장 */
.case { position: relative; padding: 8px; background: linear-gradient(170deg, var(--frame-hi), var(--frame) 30%, #4a311f); border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(var(--lamp) / .28), inset 0 1px 0 rgb(var(--lamp) / .35), 0 0 60px -10px rgb(var(--lamp) / .12), 0 30px 60px -30px rgb(0 0 0 / .8); }
.shelf { position: relative; overflow: hidden; padding: 22px 16px 0; background: var(--case); }
.shelf + .shelf { margin-top: 8px; }
.shelf::before { /* 위에서 떨어지는 조명 */
  content: ""; position: absolute; left: 50%; top: -40px; width: 120%; height: 260px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0, rgb(var(--lamp) / .24), rgb(var(--lamp) / .07) 55%, transparent 75%); }
.shelf::after { /* 선반 판 */
  content: ""; position: relative; display: block; height: 10px; margin: 0 -16px;
  background: linear-gradient(var(--plank-hi), var(--plank) 40%, #3a2617); box-shadow: 0 -1px 0 rgb(var(--lamp) / .35); }
.shelf-eom { --ac: #eadfc6; }
.shelf-jang { --ac: #e2a34c; }
.shelf-sky { --ac: #f09cbb; }

.plate { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.plate h2 { display: flex; align-items: center; gap: 9px; color: var(--ivory); font: 700 22px/1.3 var(--serif); letter-spacing: -0.01em; }
.plate h2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px var(--ac); flex: none; }
.plate p { grid-column: 1; font-size: 14px; color: var(--ivory-2); margin-top: 2px; }
.plate .meta { display: none; }
.play { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid rgb(236 230 218 / .8); border-radius: 2px; background: rgb(236 230 218 / .06); color: var(--ivory); font-size: 14px; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.play:hover { border-color: var(--ac); background: rgb(236 230 218 / .14); }

.row { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 -16px; padding: 18px 16px 0; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.row::-webkit-scrollbar { display: none; }
.row li { flex: none; scroll-snap-align: start; }
.row a, .row .sil { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.fig { display: flex; align-items: flex-end; justify-content: center; width: 92px; height: 100px; }
.fig img { width: 92px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgb(0 0 0 / .55)); }
.row-small .fig img { width: auto; height: 84px; }
.row a .fig img, .row a .fig .orb { transition: transform .18s ease; }
.row a:hover .fig img, .row a:hover .fig .orb { transform: translateY(-4px); }
.tag { margin: 8px 0 12px; font: 400 14px/1.3 var(--serif); color: var(--ivory); white-space: nowrap; }
.row a:hover .tag { text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 4px; }
.sil .fig img { filter: brightness(0) opacity(.5); }
.sil .tag { color: var(--ivory-3); }
.count { display: none; }

/* TILT 칸: 별자리를 담은 유리구슬 */
.orb { display: block; width: 78px; height: auto; overflow: visible; }
.orb-glass { fill: #0f1526; stroke: rgb(255 255 255 / .22); stroke-width: 1.1; }
.orb-lines line { stroke: rgb(205 218 255 / .5); stroke-width: .9; stroke-linecap: round; }
.orb-stars circle { fill: #eef2ff; }
.orb-stars .hi { fill: var(--hi); filter: drop-shadow(0 0 2.5px var(--hi)); }
.orb-shine { fill: none; stroke: rgb(255 255 255 / .3); stroke-width: 2; stroke-linecap: round; }
.orb-stand { fill: var(--plank-hi); }
.orb-q { fill: var(--ivory-3); font: 700 20px/1 var(--serif); text-anchor: middle; }
.sil .orb-glass { fill: #15171c; }

@media (min-width: 860px) {
  .case { padding: 12px; }
  .shelf { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 24px; padding: 28px 24px 0; }
  .shelf + .shelf { margin-top: 12px; }
  .shelf::after { grid-column: 1 / -1; margin: 0 -24px; }
  .plate { display: block; align-self: center; padding-bottom: 14px; }
  .plate h2 { font-size: 24px; }
  .plate p { font-size: 15px; }
  .plate .meta { display: block; margin-top: 8px; font-size: 14px; color: var(--ivory-3); line-height: 1.6; }
  .play { margin-top: 16px; }
  .row { margin: 0; padding: 0; gap: 4px; -webkit-mask-image: none; mask-image: none; }
  .fig { width: 86px; }
  .fig img { width: 86px; }
}

/* 아래: 읽을거리 · 다른 도구 */
.lower { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.lower h2 { color: var(--ivory); font: 700 20px/1.4 var(--serif); }
.links { margin-top: 14px; border-top: 1px solid var(--ivory-3); }
.links a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.links b { color: var(--ivory); font: 700 17px/1.45 var(--serif); }
.links span { font-size: 14px; color: var(--ivory-3); line-height: 1.6; }
.links a:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (min-width: 860px) { .lower { grid-template-columns: 3fr 2fr; gap: 56px; padding-top: 88px; } }

/* 바닥 */
.foot { padding: 28px 0 44px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ivory-3); }
.foot-in { display: grid; gap: 4px; }
.foot a { display: inline-flex; align-items: center; min-height: 32px; margin-right: 14px; color: var(--ivory-2); text-underline-offset: 3px; }

/* 글 페이지(개인정보·404) */
.doc { padding: 28px 0 80px; }
.doc .wrap > * { max-width: 44rem; }
.doc h1 { color: var(--ivory); font: 700 30px/1.3 var(--serif); }
.doc .lead { margin-top: 10px; color: var(--ivory-3); }
.doc h2 { margin-top: 36px; color: var(--ivory); font: 700 19px/1.4 var(--serif); }
.doc p, .doc ul { margin-top: 10px; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc a { color: var(--ivory); text-underline-offset: 3px; }
.doc .play { display: inline-flex; }

@media (prefers-reduced-motion: reduce) { .row a .fig img, .row a .fig .orb, .play { transition: none; } }