/* [Define404] */
/* Define404 게임 뼈대: 문제함(#inbox)과 제품 트리(#tree). 토큰은 site.css :root 만 쓴다. */

/* Lenis: 부드러운 스크롤이 켜졌을 때만. site.css 의 scroll-behavior: smooth 와 겹치지 않게 끈다 */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 문제함: 들어온 티켓 보드 ---------- */
.inbox-stage { position: relative; }
.inbox-meta {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-bottom: 14px; font-size: 13px; font-weight: 650; font-feature-settings: "tnum" 1; color: var(--ink-3);
}
.inbox-count { color: var(--ink-1); white-space: nowrap; }
.inbox-count b { font-weight: 800; }
.inbox-count-label { color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.inbox-hint { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.inbox-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-1); }
.inbox-rail > i { position: absolute; inset: 0; background: var(--ink-1); transform-origin: 0 50%; transform: scaleX(var(--ip, 0)); }

.inbox {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--bw) solid var(--ink-1); border-left: var(--bw) solid var(--line-1);
}
.inbox-stage .inbox { border-top-color: transparent; }

.card {
  position: relative; display: flex; flex-direction: column; min-height: 288px; padding: 18px 20px 22px;
  border-right: var(--bw) solid var(--line-1); border-bottom: var(--bw) solid var(--line-1);
  background: var(--paper); color: var(--ink-1);
  transition: background var(--t-std) var(--ease);
}
.has-inbox .card { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.card:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: -2px; z-index: 2; }

/* 티켓 번호: 스크립트가 --n 을 넣는다 */
.card::before {
  content: var(--n, ""); position: absolute; top: 18px; right: 20px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); font-feature-settings: "tnum" 1; color: var(--line-2);
  transition: color var(--t-std) var(--ease);
}
/* 보내온 곳과 시각: 아래 점선이 티켓의 절취선 */
.card-from {
  display: block; padding: 0 36px 14px 0; margin-bottom: 18px; border-bottom: var(--bw) dashed var(--line-2);
  font-size: var(--fs-label); font-weight: 650; letter-spacing: 0.04em; font-feature-settings: "tnum" 1; color: var(--ink-3);
}
.card-q { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.55; font-weight: 680; letter-spacing: -0.02em; }

/* 물결 밑줄: 정의되지 않은 문장 아래. 정의되면 물결이 납작해지고 먹선이 왼쪽부터 그어진다 */
.card-q-text {
  padding-bottom: 5px;
  background-image:
    linear-gradient(var(--ink-1), var(--ink-1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7' preserveAspectRatio='none'%3E%3Cpath d='M0 6 L3.5 1 L7 6 L10.5 1 L14 6' fill='none' stroke='%236CC4F2' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat-x;
  background-position: left bottom, 0 bottom;
  background-size: 0% 2px, 14px 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 520ms var(--ease);
}
.card.is-defined .card-q-text { background-size: 100% 2px, 14px 2px; }

.card-state {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: var(--bw) solid var(--line-2); border-radius: var(--r-sm);
  font-size: var(--fs-label); font-weight: 650; letter-spacing: 0.04em; font-style: italic; color: var(--ink-3);
  transition: background var(--t-std) var(--ease), color var(--t-std) var(--ease), border-color var(--t-std) var(--ease);
}
.card-q { margin-bottom: var(--s5); }
.card.is-defined .card-state { font-style: normal; background: var(--ink-1); border-color: var(--ink-1); color: var(--paper); }
.card-fix {
  display: block; margin-top: 12px; padding-top: 10px; border-top: var(--bw) solid var(--line-1);
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2);
}
.card.is-defined { background: var(--paper-raised); }
.card.is-defined::before { color: var(--ink-1); }
.card.is-defined .card-fix { border-top-color: var(--ink-1); color: var(--ink-1); }

/* 준비 중 카드: 점선 안쪽 테두리 */
.card-locked { background: var(--paper-sunk); }
.card-locked::after { content: ""; position: absolute; inset: 7px; border: var(--bw) dashed var(--line-2); border-radius: var(--r-sm); pointer-events: none; }
.card-locked.is-defined { background: var(--paper-sunk); }
.card-locked.is-defined::after { border-color: var(--ink-3); }

/* 연출: 스크립트가 html.motion 을 붙였을 때만 숨긴다 */
.motion .card:not(.is-defined) .card-fix { clip-path: inset(0 100% 0 0); opacity: 0; }
.motion .card .card-fix { transition: clip-path var(--t-std) var(--ease) 140ms, opacity var(--t-quick) var(--ease) 140ms, border-color var(--t-std) var(--ease); }

@media (hover: hover) {
  .has-inbox .card:not(.is-defined):hover { background: var(--paper-raised); }
  .has-inbox .card:not(.is-defined):hover .card-q-text { animation: lint-crawl 900ms linear infinite; }
  .has-inbox .card:not(.is-defined):hover .card-state { color: var(--sky-ink); border-color: var(--sky-ink); }
}
@keyframes lint-crawl { to { background-position: left bottom, 14px bottom; } }

/* 정의하는 순간: 살짝 눌렸다가(예비) 위로 튀고 자리 잡는다 */
.card.is-defining { animation: card-define 480ms var(--ease); z-index: 1; }
.card.is-defining .card-state { animation: state-pop 480ms var(--ease); }
@keyframes card-define {
  0% { transform: none; }
  28% { transform: translateY(3px) scale(0.982); }
  64% { transform: translateY(-4px) scale(1.006); }
  100% { transform: none; }
}
@keyframes state-pop {
  0%, 30% { transform: none; }
  55% { transform: scale(1.12); }
  100% { transform: none; }
}
.card.is-shake { animation: card-shake 460ms var(--ease); z-index: 1; }
@keyframes card-shake {
  0%, 100% { transform: none; }
  18% { transform: translateX(-4px); }
  36% { transform: translateX(4px); }
  54% { transform: translateX(-3px); }
  72% { transform: translateX(2px); }
}
.card.is-nudge { animation: card-nudge 320ms var(--ease); }
@keyframes card-nudge { 40% { transform: translateY(-3px); } }

@media (max-width: 1100px) {
  .card { padding: 16px 16px 20px; }
  .card::before { right: 16px; top: 16px; }
}
@media (max-width: 900px) {
  .inbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { min-height: 248px; }
}
@media (max-width: 560px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .card-q { margin-bottom: var(--s4); }
  .inbox-hint { display: none; }
}

/* ---------- 제품 트리 ---------- */
.tree { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.node-core[data-node="booking"] { grid-column: 1 / span 3; }
.node-core[data-node="check"] { grid-column: 4 / span 3; }

.tree-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.tree-line { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.tree-lit {
  fill: none; stroke: var(--ink-1); stroke-width: 1.5;
  stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 800ms var(--ease) var(--d, 0ms);
}
.tree.is-drawn .tree-lit.is-on { stroke-dashoffset: 0; }

.tree-root {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm);
  background: var(--ink-1); color: var(--paper);
  font-size: 13px; font-weight: 650; font-feature-settings: "tnum" 1; white-space: nowrap;
}
.tree-root::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: var(--bw) solid var(--line-2); transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease); }
.tree-root.is-lit::before { background: var(--sky); border-color: var(--sky); }
.tree-root-count { color: var(--line-2); }
.tree-root-count b { color: var(--paper); font-weight: 800; }

.node {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  min-height: 150px; padding: 18px 18px 20px;
  border: var(--bw) solid var(--line-2); border-radius: var(--r-sm); background: var(--paper);
  color: var(--ink-1);
  transition: border-color var(--t-std) var(--ease), background var(--t-std) var(--ease);
}
/* 점등 표시: 비어 있는 점이 정의되면 하늘색으로 찬다 */
.node::before {
  content: ""; position: absolute; top: 18px; right: 18px; width: 9px; height: 9px; border-radius: 50%;
  border: var(--bw) solid var(--ink-3); background: var(--paper);
  transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease);
}
.node-state {
  padding-right: 24px; font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
}
.node b { margin-top: auto; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; font-weight: 760; letter-spacing: -0.02em; transition: transform var(--t-std) var(--ease); }
.node > span:last-child { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.node[rel~="noopener"] b::after { content: "\2197"; font-variant-emoji: text; margin-left: 6px; font-weight: 400; font-size: 0.8em; color: var(--ink-3); }

.node-core { min-height: 208px; padding: 24px 24px 26px; }
.node-core::before { top: 24px; right: 24px; width: 11px; height: 11px; }
.node-core b { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
.node-core > span:last-child { font-size: var(--fs-body); }

.node.is-lit { border-color: var(--ink-1); }
.node.is-lit::before { background: var(--sky); border-color: var(--ink-1); }
.node.is-new::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 9px; height: 9px; border-radius: 50%;
  border: var(--bw) solid var(--sky); pointer-events: none; animation: node-ping 900ms var(--ease) forwards;
}
.node-core.is-new::after { top: 24px; right: 24px; width: 11px; height: 11px; }
@keyframes node-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }

.node-locked { border-style: dashed; background: transparent; color: var(--ink-2); }
.node-locked b { color: var(--ink-2); }
.node-locked.is-lit { border-color: var(--ink-1); }

@media (hover: hover) {
  a.node:hover { background: var(--paper-raised); border-color: var(--ink-1); }
  a.node:hover b { transform: translateX(4px); }
}

/* 넓은 화면: 뿌리 1개, 핵심 2개, 도구 6칸의 가지 트리 */
@media (min-width: 960px) {
  .tree.has-tree { row-gap: clamp(56px, 6vw, 96px); }
  .tree.has-tree .tree-root { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  .tree.has-tree .node-core { grid-row: 2; }
  .tree.has-tree .node[data-node="gyeonjeok"] { grid-row: 3; grid-column: 1; }
  .tree.has-tree .node[data-node="jiwon"] { grid-row: 3; grid-column: 2; }
  .tree.has-tree .node[data-node="ops"] { grid-row: 3; grid-column: 3; }
  .tree.has-tree .node[data-node="gage"] { grid-row: 3; grid-column: 4; }
  .tree.has-tree .node[data-node="munche"] { grid-row: 3; grid-column: 5; }
  .tree.has-tree .node[data-node="hangul"] { grid-row: 3; grid-column: 6; }
}

/* 좁은 화면: 세로 목록, 왼쪽 줄기에서 가지가 뻗는다 */
@media (max-width: 959px) {
  .tree { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .tree .node-core[data-node] { grid-column: auto; }
  .tree-root { justify-self: start; order: 0; }
  .node { min-height: 0; padding: 14px 16px 16px; }
  .node::before { top: 16px; right: 16px; }
  .node-core { margin-left: 28px; margin-top: 10px; padding: 18px 18px 20px; }
  .node-core::before { top: 20px; right: 18px; }
  .node-core.is-new::after { top: 20px; right: 18px; }
  .node-core b { font-size: clamp(26px, 7vw, 34px); }
  .node:not(.node-core) { margin-left: 56px; }
  .node:not(.node-core) b { margin-top: 2px; }
  .node[data-node="booking"] { order: 1; }
  .node[data-node="gyeonjeok"] { order: 2; }
  .node[data-node="jiwon"] { order: 3; }
  .node[data-node="ops"] { order: 4; }
  .node[data-node="check"] { order: 5; }
  .node[data-node="gage"] { order: 6; }
  .node[data-node="munche"] { order: 7; }
  .node[data-node="hangul"] { order: 8; }
}
@media (max-width: 400px) {
  .node-core { margin-left: 20px; }
  .node:not(.node-core) { margin-left: 40px; }
}

/* 2장 스크롤 연출: 선 끝을 달리는 하늘색 신호, 신호가 닿으면 노드가 하늘색으로 켜졌다 자리 잡는다 */
.tree-pulse { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: square; opacity: 0; transition: opacity var(--t-quick) var(--ease); }
.tree-pulse.is-run { opacity: 1; }
#tree .node { transition: border-color var(--t-std) var(--ease), background-color var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
#tree .node.is-reached { border-color: var(--sky-ink); }
#tree .node.is-arrive { animation: node-arrive 700ms var(--ease); }
@keyframes node-arrive {
  0% { background-color: var(--sky); transform: translateY(-4px); }
  45% { background-color: var(--sky-soft); }
  100% { transform: none; }
}
#tree .tree-root.is-sending { outline: 2px solid var(--sky); outline-offset: 2px; }
/* 장 제목 아래 진행 막대: 그려진 만큼 하늘색으로 찬다 */
#tree .chapter-head { position: relative; }
#tree .chapter-head::after { content: ""; display: block; margin-top: var(--s5); height: 3px; width: 100%; max-width: 640px; background: linear-gradient(var(--sky), var(--sky)) left / calc(var(--tree-p, 0) * 100%) 100% no-repeat, var(--paper-sunk); }
@media (prefers-reduced-motion: reduce) {
  #tree .node.is-arrive { animation: none; }
  .tree-pulse { display: none; }
}

/* 노드 외곽선이 한 점에서 출발해 완성된다 (sections.js가 .node-outline을 넣는다) */
#tree .tree.has-outline .node { border-color: transparent; }
#tree .tree.has-outline .node > :not(.node-outline) { opacity: 0; transform: translateY(10px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
#tree .tree.has-outline .node.is-outlined > :not(.node-outline) { opacity: 1; transform: none; }
#tree .tree.has-outline .node.is-outlined { border-color: var(--line-2); }
#tree .tree.has-outline .node.is-outlined.is-lit,
#tree .tree.has-outline .node.is-outlined.is-reached { border-color: var(--sky-ink); }
#tree .tree.has-outline .node-locked.is-outlined { border-color: var(--line-2); border-style: dashed; }
.node-outline { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.node-outline rect { width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: var(--sky-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.node.is-drawing .node-outline rect { animation: node-outline-draw 800ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.node.is-outlined .node-outline { opacity: 0; transition: opacity var(--t-std) var(--ease); }
/* 그리는 동안 출발점에 하늘색 점이 앞장선다 */
.node.is-drawing:not(.is-outlined) .node-outline rect { stroke: var(--sky); }
@keyframes node-outline-draw { to { stroke-dashoffset: 0; } }