/* 점(jeom.boltandnutt.com) v5 (2026-10-27, 황동 이름판 걷어냄·TILT 칸을 별자리 유리구슬로). 배포 후 수정 금지 — 바꿀 일은 v6 폴더로.
   콘셉트: 벽에 걸린 호두나무 진열장. 칸마다 테스트 하나, 선반 위에 그 테스트에서 나올 수 있는 결과들이 서 있다.
   그림만 도트, 글씨는 일반 고딕. */

:root {
  --wall: #e3e6e9; --wall-ink: #1b1d21; --wall-ink-2: #555c66; --wall-rule: #c3c8ce;
  --frame: #4a2f22; --frame-edge: #6b4532;
  --inside: #24272d; --inside-2: #2c3037;
  --plank: #9b6a48; --plank-dark: #6e4630;
  --brass: #d3b065; --brass-dark: #a9873d; --brass-ink: #2a2014;
  --tag: #f2efe6; --tag-ink: #23201a;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--wall-ink); font: 400 16px/1.65 var(--sans); letter-spacing: -0.01em; 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: 3px solid #2b6cb0; 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: #fff; }

/* 머리 줄 */
.bar-in { display: flex; align-items: center; height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.logo svg { width: 28px; height: 28px; }
.logo-frame { fill: var(--inside); stroke: var(--frame); stroke-width: 3; }
.logo-shelf { stroke: var(--plank); stroke-width: 2.4; }
.logo-dot { fill: var(--brass); }
.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; font-weight: 600; color: var(--wall-ink-2); text-decoration: none; }
.bar-nav a:hover { color: var(--wall-ink); }

/* 소개 */
.intro { padding-top: 28px; padding-bottom: 24px; }
.intro h1 { font-size: 34px; line-height: 1.2; font-weight: 800; letter-spacing: -0.05em; }
.intro p { margin-top: 10px; max-width: 34em; color: var(--wall-ink-2); }
@media (min-width: 860px) {
  .intro { padding-top: 48px; padding-bottom: 32px; display: grid; grid-template-columns: auto minmax(0, 30em); gap: 40px; align-items: end; }
  .intro h1 { font-size: 52px; }
  .intro p { margin-top: 0; }
}

/* 진열장 */
.case { position: relative; background: var(--frame); border-radius: 6px; padding: 10px;
  box-shadow: 0 1px 0 var(--frame-edge) inset, 0 18px 30px -18px rgb(30 20 10 / .55); }
.case::after { /* 유리 반사 한 줄 */
  content: ""; position: absolute; inset: 10px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(115deg, transparent 0 58%, rgb(255 255 255 / .05) 58% 64%, transparent 64%); }

.shelf { position: relative; background: radial-gradient(ellipse 70% 90% at 50% 0, var(--inside-2), var(--inside) 70%); padding: 18px 14px 0; }
.shelf + .shelf { margin-top: 10px; }
.shelf::after { /* 선반 판 */
  content: ""; display: block; height: 14px; margin: 0 -14px; background: linear-gradient(var(--plank), var(--plank-dark));
  box-shadow: 0 3px 0 rgb(0 0 0 / .35); }

.plate { position: relative; z-index: 1; padding: 14px 16px 16px; color: var(--brass-ink); border-radius: 3px;
  background: linear-gradient(160deg, #e2c47d, var(--brass) 45%, var(--brass-dark));
  box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 2px 4px rgb(0 0 0 / .4); }
.plate h2 { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.plate p { font-size: 15px; font-weight: 600; }
.plate .meta { margin-top: 6px; font-weight: 400; line-height: 1.55; }
.play { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 16px; background: var(--brass-ink); color: #f6ecd2; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: 4px; }
.play:hover { background: #000; }

.row { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; padding: 18px 2px 0; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: thin; }
.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: 104px; height: 112px; }
.fig img { width: 104px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .35)); }
.row-small .fig img { width: auto; height: 96px; }
.tag { margin: 6px 0 8px; padding: 1px 8px; background: var(--tag); color: var(--tag-ink); font-size: 14px; font-weight: 700; border-radius: 2px; white-space: nowrap; box-shadow: 0 1px 0 rgb(0 0 0 / .4); }
.row a:hover .fig img { transform: translateY(-4px); }
.row a .fig img { transition: transform .15s; }
.sil .fig img { filter: brightness(0) opacity(.55); }
.sil .tag { background: #3a3f47; color: #9aa1ab; box-shadow: none; }
.count { position: absolute; right: 18px; top: 10px; font-size: 14px; color: #9aa1ab; display: none; }

/* TILT 칸: 유리 돔과 별자리 이름 카드 */
.dome { position: relative; width: 104px; }
.dome::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 96px; border-radius: 44px 44px 6px 6px;
  border: 2px solid rgb(255 255 255 / .28); background: linear-gradient(120deg, rgb(255 255 255 / .12), transparent 45%); }
.dome::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 10px; background: #1a1c21; border-radius: 2px; }
.dome i { position: absolute; border-radius: 50%; }
.dome i:nth-child(1) { width: 34px; height: 34px; left: 22px; bottom: 14px; background: radial-gradient(circle at 35% 30%, #ffe2a0, #f4a63c 60%, #c26f14); box-shadow: 0 0 18px rgb(244 166 60 / .55); }
.dome i:nth-child(2) { width: 24px; height: 24px; left: 52px; bottom: 44px; background: radial-gradient(circle at 35% 30%, #ffd6e6, #ec6fa1 65%, #b23f71); box-shadow: 0 0 14px rgb(236 111 161 / .5); }
.dome i:nth-child(3) { width: 18px; height: 18px; left: 66px; bottom: 74px; background: radial-gradient(circle at 35% 30%, #fff, #dcdfe6 70%, #a7adba); box-shadow: 0 0 12px rgb(255 255 255 / .45); }
.card { width: 148px; height: 112px; align-items: center; padding: 0 10px; margin: 0 4px; }
.card img { width: 128px; height: auto; image-rendering: auto; filter: invert(1) brightness(1.4) drop-shadow(0 2px 0 rgb(0 0 0 / .5)); }
.shelf-sky .row a, .shelf-sky .row .sil { padding-bottom: 12px; }
.shelf-sky .card { border: 1.5px solid rgb(255 255 255 / .22); border-radius: 4px; height: 96px; background: rgb(255 255 255 / .03); }
.shelf-sky .sil .card { width: 96px; color: #6d737d; font-size: 28px; font-weight: 800; justify-content: center; }

@media (min-width: 860px) {
  .case { padding: 14px; }
  .case::after { inset: 14px; }
  .shelf { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 20px; padding: 22px 22px 0; }
  .shelf + .shelf { margin-top: 14px; }
  .shelf::after { grid-column: 1 / -1; margin: 0 -22px; }
  .plate { align-self: end; margin-bottom: 14px; }
  .row { margin: 0; padding: 0 0 0 4px; gap: 6px; }
  .count { display: block; }
}

/* 아래: 읽을거리 · 다른 도구 */
.lower { display: grid; gap: 36px; padding-top: 48px; padding-bottom: 48px; }
.lower h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.links { margin-top: 12px; border-top: 2px solid var(--wall-ink); }
.links a { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--wall-rule); text-decoration: none; }
.links b { font-size: 17px; }
.links span { font-size: 15px; color: var(--wall-ink-2); }
.links a:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 860px) { .lower { grid-template-columns: 3fr 2fr; gap: 48px; padding-top: 72px; } }

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

/* 글 페이지(개인정보·404) */
.doc { padding: 24px 0 72px; }
.doc .wrap > * { max-width: 44rem; }
.doc h1 { font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -0.04em; }
.doc .lead { margin-top: 10px; color: var(--wall-ink-2); }
.doc h2 { margin-top: 36px; font-size: 19px; font-weight: 800; }
.doc p, .doc ul { margin-top: 10px; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc a { color: #8a5a1c; text-underline-offset: 3px; }
.doc .play { color: #f6ecd2; }

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

/* v4 보정 */
.row { scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
@media (max-width: 859px) {
  .plate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .plate h2 { font-size: 20px; }
  .plate p { font-size: 14px; }
  .plate .meta { display: none; }
  .plate .play { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding: 0 12px; font-size: 14px; }
  .shelf { padding-top: 14px; }
  .row { padding-top: 12px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .fig { width: 92px; height: 100px; }
  .fig img { width: 92px; }
  .row-small .fig img { height: 84px; }
}
@media (min-width: 860px) {
  .shelf { grid-template-columns: 220px minmax(0, 1fr); }
  .fig { width: 88px; height: 100px; }
  .fig img { width: 88px; }
  .row-small .fig img { height: 88px; }
  .card { width: 128px; }
  .card img { width: 108px; }
}

/* v5: 황동 이름판 대신 진열장 안쪽에 바로 적은 이름 */
.plate { background: none; box-shadow: none; border-radius: 0; color: #eef0f3; padding: 2px 0 0; }
.plate h2 { color: #fff; font-size: 22px; }
.plate p { color: #aab1bb; font-weight: 500; }
.plate .meta { color: #8c939d; font-weight: 400; }
.play { background: #f2efe6; color: #1b1d21; border-radius: 4px; }
.play:hover { background: #fff; }
@media (max-width: 859px) { .plate { padding: 0; } }
@media (min-width: 860px) { .plate { align-self: center; margin-bottom: 14px; } }

/* TILT 칸: 별자리를 담은 유리구슬 */
.orb { display: block; width: 80px; height: auto; overflow: visible; }
.orb-glass { fill: #111a30; stroke: rgb(255 255 255 / .28); stroke-width: 1.2; }
.orb-lines line { stroke: rgb(200 215 255 / .55); 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 / .35); stroke-width: 2; stroke-linecap: round; }
.orb-stand { fill: #6e4630; }
.orb-q { fill: #6d737d; font: 800 22px/1 var(--sans); text-anchor: middle; }
.row a .fig .orb { transition: transform .15s; }
.row a:hover .fig .orb { transform: translateY(-4px); }
.sil .orb-glass { fill: #1a1d23; }
@media (prefers-reduced-motion: reduce) { .row a .fig .orb { transition: none; } }