/* Layout: 12칸 점 그리드 위에 번호 붙은 지점을 놓고, 한 줄의 경로선이 관처럼 그 사이를 지나간다. */
:root {
  color-scheme: light;
  --paper: #ecece8;        /* 종이 바탕 — 약간 푸른 기가 도는 회색 */
  --paper-2: #e3e3de;      /* 패널·상자 바탕 */
  --ink: #141414;
  --ink-2: #5d5e5a;        /* 보조 글자 */
  --ink-3: #9a9b96;        /* 점선, 비활성 */
  --water: #1f3cff;        /* 물 */
  --bird: #d2331e;         /* 새 · 혈액 */
  --dc: #141414;           /* 데이터센터 */
  --common: #8d8e89;       /* 공통 */

  --f-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --cols: 12;
  --row: 64px;
  --gutter: clamp(16px, 2.5vw, 32px);
  --top-h: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1.5px solid var(--water); outline-offset: 3px; }

.label, .eyebrow, .top, .legend, .node-num, .index-list, .panel-num, .panel-foot, .support, .tl {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- 상단 바 ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--top-h);
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.top-name { text-decoration: none; font-weight: 500; }
.top-nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.filter, .top-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
}
.filter:hover, .top-link:hover { border-color: var(--ink); }
.filter.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sw { width: 8px; height: 8px; display: inline-block; }

/* ---------- 손 드로잉 ---------- */
/* 색이 입혀진 PNG를 그대로 씀 (assets/draw/이름-색.png). 로컬에서 파일을 바로 열어도 보이도록 mask 대신 이미지 사용 */
.ic { flex: none; height: auto; }
.ic-bucket { width: 8px; }
.ic-bird { width: 26px; }

.hero-bird {
  position: absolute;
  right: calc(var(--gutter) + 2vw);
  top: 52px;
  width: clamp(130px, 15vw, 220px);
  height: auto;
  animation: glide 9s ease-in-out infinite alternate;
}
@keyframes glide {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-28px, -10px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-bird { animation: none; } }

.drawing {
  position: absolute;
  z-index: 1;
  left: calc(var(--c) * 100% / var(--cols));
  top: calc(var(--r) * var(--row));
  width: calc(var(--w) * 100% / var(--cols));
  height: auto;
  pointer-events: none;
  transition: opacity .25s;
}

.dots-rule { width: 200px; height: auto; margin-bottom: 18px; }
.ic-well { display: inline-block; width: 16px; height: auto; margin-right: 10px; vertical-align: -6px; }
.sw-water { background: var(--water); }
.sw-bird { background: var(--bird); }
.sw-dc { background: var(--dc); outline: 1px solid var(--paper); }
.top-meta { margin: 0; display: flex; gap: 18px; justify-content: flex-end; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------- 인트로 ---------- */
.intro { position: relative; padding: 40px var(--gutter) 32px; }
.eyebrow { margin: 0 0 8px; color: var(--ink-2); }
.title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.subtitle { margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 19px); max-width: 40em; text-wrap: balance; }
.intro-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  margin-top: 32px;
  column-gap: 0;
  row-gap: 24px;
}
.intro-text { grid-column: 1 / span 5; margin: 0; font-size: 17px; line-height: 1.7; max-width: 32em; }
.howto { grid-column: 8 / span 4; color: var(--ink-2); }
.howto p { margin: 0; }
.howto .label { color: var(--ink); margin-bottom: 6px; }

/* ---------- 지도 ---------- */
.map-wrap { padding: 0 var(--gutter); border-top: 1px solid var(--ink); }
.map { position: relative; width: 100%; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.map-svg .dot { fill: var(--ink); }
.seg { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .2s, opacity .25s; }
.seg[data-axis="water"] { stroke: var(--water); }
.seg[data-axis="bird"] { stroke: var(--bird); }
.seg[data-axis="dc"] { stroke: var(--dc); }
.seg[data-axis="common"] { stroke: var(--common); }
.seg.is-void { stroke-dasharray: 3 5; }
.seg.is-hot { stroke-width: 2.6; }

.node {
  position: absolute;
  z-index: 2;
  left: calc(var(--c) * 100% / var(--cols));
  top: calc(var(--r) * var(--row));
  width: calc(var(--w) * 100% / var(--cols) - 12px);
  text-align: left;
  transition: opacity .25s;
}
.node-hit { display: block; width: 100%; text-align: left; cursor: url("../assets/draw/cursor-hand.png") 42 9, pointer; }
.node-num .n { background: var(--paper); padding: 0 3px; }
.node-num {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px;
  transform: translate(-4px, -5px);
  font-variant-numeric: tabular-nums;
}
.pin {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--axis);
  flex: none;
}
.node-hit:hover .pin, .node.is-hot .pin { background: var(--axis); }
.node[data-axis="water"] { --axis: var(--water); }
.node[data-axis="bird"] { --axis: var(--bird); }
.node[data-axis="dc"] { --axis: var(--dc); }
.node[data-axis="common"] { --axis: var(--common); }

.node figure { margin: 0; background: var(--paper-2); overflow: hidden; }
.node img { width: 100%; height: auto; transition: transform .5s ease, filter .3s; filter: grayscale(.15); }
.node-hit:hover img, .node-hit:focus-visible img { transform: scale(1.03); filter: none; }
.node-title { margin: 6px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; }
.node-short { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.node-date { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); margin-left: 6px; font-weight: 400; }

.node[data-type="text"] .node-body,
.node[data-type="timeline"] .node-body { background: var(--paper); padding: 2px 0 4px; }
.node[data-type="text"] .node-short { font-size: 15px; color: var(--ink); line-height: 1.6; margin-top: 4px; }
.node[data-type="text"] .node-title,
.node[data-type="timeline"] .node-title { margin-top: 0; }
.node-hit:hover .node-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.node[data-type="void"] .node-body {
  border: 1px dashed var(--axis);
  background: var(--paper);
  padding: 12px 14px 14px;
  min-height: 92px;
}
.node[data-type="void"] .node-title { margin: 0; color: var(--ink-2); font-weight: 400; font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.node[data-type="void"] .node-short { color: var(--ink); font-size: 14px; margin-top: 4px; }

.tl { margin: 6px 0 0; padding: 0; list-style: none; text-transform: none; letter-spacing: 0; font-size: 12px; }
.tl li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 3px 0; border-top: 1px solid var(--ink-3); font-variant-numeric: tabular-nums; }
.tl li:last-child { border-bottom: 1px solid var(--ink-3); }
.tl b { font-weight: 500; }
.tl span { font-family: var(--f-sans); color: var(--ink-2); }

/* 필터 */
body[data-filter]:not([data-filter="all"]) .node:not(.is-match) { opacity: .16; }
body[data-filter]:not([data-filter="all"]) .seg:not(.is-match),
body[data-filter]:not([data-filter="all"]) .drawing:not(.is-match) { opacity: .12; }

/* ---------- 범례 ---------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 16px;
  color: var(--ink);
}
.legend p { margin: 0; display: flex; align-items: center; gap: 8px; }
.ln { width: 26px; height: 0; border-top: 1.5px solid; display: inline-block; }
.ln-water { border-color: var(--water); }
.ln-bird { border-color: var(--bird); }
.ln-dc { border-color: var(--dc); }
.ln-common { border-color: var(--common); }
.bx { width: 26px; height: 11px; border: 1px dashed var(--ink-2); display: inline-block; }

/* ---------- 인덱스 ---------- */
.index { padding: 40px var(--gutter) 56px; border-top: 1px solid var(--ink); margin-top: 48px; }
.index > .label { margin: 0 0 14px; }
.index-list {
  margin: 0; padding: 0; list-style: none;
  columns: 3 16em; column-gap: 32px;
  text-transform: none; letter-spacing: 0.01em;
}
.index-list li { break-inside: avoid; }
.index-list button {
  display: grid; grid-template-columns: 3.4em 1fr auto; gap: 6px; width: 100%;
  padding: 4px 0; border-bottom: 1px solid var(--ink-3); text-align: left;
  font-variant-numeric: tabular-nums;
}
.index-list button:hover { color: var(--axis); }
.index-list .ax { color: var(--ink-2); text-transform: uppercase; }

/* ---------- 팀 ---------- */
.team { padding: 40px var(--gutter) 120px; border-top: 1px solid var(--ink); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.team p { margin: 0; }
.team-name { font-size: 28px; font-weight: 300; letter-spacing: -0.03em; margin-top: 6px !important; }
.team-note { color: var(--ink-2); margin-top: 6px !important; font-size: 13.5px; }
.member p:not(.member-name) { color: var(--ink-2); font-size: 13.5px; }
.member-name { font-weight: 500; margin-bottom: 6px !important; }
.credits { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; padding-top: 16px; border-top: 1px solid var(--ink-3); }
.credits div { min-width: 0; }
.credits dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 4px; }
.credits dd { margin: 0; font-size: 13.5px; }
@media (max-width: 860px) { .credits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .credits { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- 패널 ---------- */
.panel-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 20, .18); }
.panel {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--ink);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  visibility: hidden;
}
.panel.is-open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
.panel-head, .panel-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--ink);
}
.panel-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.panel-foot { border-bottom: 0; border-top: 1px solid var(--ink); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.panel-num { margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-close, .panel-foot button { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; padding: 3px 6px; border: 1px solid transparent; }
.panel-close:hover, .panel-foot button:hover { border-color: var(--ink); }
.panel-foot button:disabled { opacity: .3; cursor: default; border-color: transparent; }
.panel-body { flex: 1; overflow-y: auto; padding: 20px 20px 32px; }
.panel-body h2 { margin: 0; font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; }
.panel-body .meta { margin: 8px 0 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: .03em; }
.panel-body figure { margin: 20px 0 0; }
.panel-body figure img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; object-position: left top; }
.panel-body .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.panel-body .gallery figure { margin: 0; }
.panel-body .gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.panel-body .lead { font-size: 17px; margin: 18px 0 0; }
.panel-body p.txt { margin: 14px 0 0; max-width: 34em; }
.panel-body .void-note { margin-top: 18px; padding: 10px 12px; border: 1px dashed var(--axis); font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.panel-body .tl { margin-top: 18px; font-size: 13px; }

/* ---------- 좁은 화면: 지도 → 세로 경로 ---------- */
@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto; }
  .top-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 8px; margin-left: -8px; }
  #coord { display: none; }
  .intro-text, .howto { grid-column: 1 / -1; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .map-svg, .drawing { display: none; }
  .intro { padding-top: 104px; }
  .hero-bird { top: 28px; width: 132px; right: var(--gutter); }
  .map { display: flex; flex-direction: column; gap: 28px; padding: 28px 0 8px 22px; height: auto !important; }
  .node { position: relative; left: auto; top: auto; width: auto; max-width: 30em; }
  .node::before {
    content: ""; position: absolute; left: -18px; top: 6px; bottom: -34px;
    border-left: 1.5px solid var(--axis);
  }
  .node[data-type="void"]::before { border-left-style: dashed; }
  .node:last-child::before { bottom: 0; }
  .node-num { transform: translateX(-23px); }
  .node[data-type="image"] figure { max-width: 72%; }
  .team { padding-bottom: 56px; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; gap: 20px; }
  .top-meta #clock { font-size: 10.5px; }
}