/* 이돈휘 포트폴리오 — 시안에 없던 것만 여기에 둔다.
   시안이 만든 규칙은 design.css 에 그대로 있고, 이 파일은 그 위에 얹는다.
   재생성: python tools/build_site.py */

/* ── 서체 ───────────────────────────────────────────────
   Galmuri11 (SIL OFL 1.1, quiple/galmuri) — 도트 톤의 뼈대다.
   웹폰트가 늦게 와도 글이 사라지지 않게 swap 을 쓴다. */
@font-face {
  font-family: 'Galmuri11';
  src: url('../assets/font/Galmuri11.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Galmuri11';
  src: url('../assets/font/Galmuri11-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── 건너뛰기 링크 (키보드) ───────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 18px; background: #d4623f; color: #0e0d0b;
  font-family: 'Galmuri11', monospace; font-size: 13px;
}
.skip:focus { left: 0; }

/* ── 영상 ──────────────────────────────────────────────
   전부 무음·자동 반복이다. 화면에 들어올 때만 재생한다 (main.js). */
video[data-src], video[src] {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: #06070a;
  image-rendering: pixelated;   /* 도트 필터를 살린다 — 보간하면 뭉갠다 */
}
.v-box { position: relative; overflow: hidden; background: #06070a; }
.v-badge {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 3px 7px; background: rgba(6,7,10,.72);
  border: 1px solid #26313a;
  font-family: 'Galmuri11', monospace; font-size: 12px; color: #8b8375;
  pointer-events: none;
}

/* ── 좌측 인덱스: 지금 보고 있는 곳 ──────────────────── */
aside[data-side-index] a[aria-current="true"] { color: #f4eee1 !important; }
aside[data-side-index] a[aria-current="true"] [data-navbar] {
  width: 26px !important; background: #d4623f !important;
}

/* ── BT 뷰어: 끌어서 옮기고 휠로 확대 ────────────────── */
#bt-viewer { cursor: grab; touch-action: none; overscroll-behavior: contain; }
#bt-viewer.is-drag { cursor: grabbing; }
#bt-viewer > div:first-child { transform-origin: 0 0; will-change: transform; }
@media (prefers-reduced-motion: reduce) { #bt-viewer > div:first-child { transition: none !important; } }

/* ── 기믹 카드: 노드에 올리면 그 줄만 밝아진다 ───────── */
[data-gimcard] [data-line] { transition: opacity 90ms steps(3, end), background 90ms steps(3, end); }
[data-gimcard].is-peek [data-line] { opacity: .28; }
[data-gimcard].is-peek [data-line].is-lit { opacity: 1; background: #10161c; }
[data-btnode] { cursor: pointer !important; }
[data-btnode]:focus-visible { outline: 2px dashed #d4623f; outline-offset: 2px; }

/* ── 클릭해서 불러오는 iframe (남의 서버라 눌러야 부른다) ── */
.embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0a08; }
.embed-note {
  padding: 10px 2px 0;
  font-family: 'Galmuri11', monospace; font-size: 12px; color: #8b8375; line-height: 1.8;
}

/* ── 게임 덮개 ────────────────────────────────────────
   세로 9:16 게임을 본문 칸에 넣으면 손톱만 하다. 크게 띄운다.
   닫으면 iframe 이 사라지므로 소리도 그때 멎는다 —
   다른 출처의 iframe 안은 손이 닿지 않아 「끄기」는 만들 수 없다. */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6, 7, 10, .94);
}
.modal-box {
  display: flex; flex-direction: column;
  border: 2px solid #2a251c; background: #0b0a08;
  max-width: 96vw; max-height: 96vh;
}
.modal-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 2px solid #2a251c;
  font-family: 'Galmuri11', monospace; font-size: 12px; color: #8b8375;
}
.modal-title { color: #f4eee1; }
.modal-note { margin-left: auto; }
.modal-x {
  transition: all 90ms steps(3, end);
  padding: 7px 12px; border: 2px solid #3a3328; background: #15130f;
  color: #d6cdbc; font-family: 'Galmuri11', monospace; font-size: 12px; cursor: pointer;
}
.modal-x:hover { border-color: #d4623f; color: #f4eee1; background: #1f1c16; }
.modal-x:active { transform: translate(0, 2px); }
.modal-frame { position: relative; background: #0b0a08; }
@media (max-width: 599px) {
  .modal { padding: 0; }
  .modal-box { max-width: 100vw; max-height: 100vh; border-width: 0 0 2px; }
  .modal-note { display: none; }
}

/* ── 이미지 기본 ──────────────────────────────────────── */
img { max-width: 100%; }
.fit-contain { object-fit: contain !important; background: #0b0a08; }

/* ── 좁은 화면 ────────────────────────────────────────
   시안이 리드 문단에 max-width:620px 를 걸어 두었는데 375px 에서
   그 값이 그대로 남아 오른쪽이 잘렸다 (실측 — 오른쪽 끝 640px). */
@media (max-width: 767px) {
  section p, section h2, section h3 { max-width: 100% !important; }
  [data-loop-wrap] { min-width: 0 !important; }
  .embed-note { font-size: 12px; }
}

/* ── 태블릿 폭의 전투 루프 ────────────────────────────
   시안은 768px 아래에서만 카드를 세로로 쌓는다. 그 위(768~940)에서는
   카드 묶음이 990px 이라 가로로 밀린다 — 스크롤은 되지만 「전환」 화살표가
   화면 밖이라 페이즈 2·3 이 있는 줄을 모른다. 쌓는 구간을 940 까지 올린다. */
@media (min-width: 768px) and (max-width: 940px) {
  [data-loop-wrap] { min-width: 0 !important; }
  [data-loop-row] { flex-direction: column !important; }
  [data-loop-arrow] { flex: none !important; width: 100%; padding: 10px 0 !important; }
  [data-loop-arrow] > span:last-child { width: 60% !important; }
  [data-loop-cap] { flex: none !important; flex-direction: row !important; gap: 10px !important; padding: 8px 0 !important; }
  [data-loop-cap] > span:last-child {
    flex: 1 !important; width: auto !important; height: 2px !important;
    background: repeating-linear-gradient(90deg, #2a3843 0 6px, transparent 6px 12px) !important;
  }
}

/* ── 인쇄 (PDF 로 뽑아 보는 사람이 있다) ──────────────── */
@media print {
  aside[data-side-index], .skip { display: none !important; }
  section { break-inside: avoid; }
  video { display: none !important; }
}