/* =========================================================================
   ISSUES 사용자 화면 — "점이 줄을 찾는다"  (user.css rev.1)
   일반 사용자 영역 전용 단독 스타일시트. partials/head.php · login.php 만 로드한다.
   관리자 영역은 assets/admin.css 를 쓴다(이 파일과 무관). 색·서체만 공유한다.

   방향: 문제 하나 = 점 하나. 흩어진 점이 척추선 위에 줄을 서고,
         처리 중인 것만 초록으로 켜진다.
   구성: 좌측 세로 레일 + 척추선을 따라 번호 붙은 노드.
   형태: 전부 직각(관리자의 잎 모양과 구분).
   활자: 제목·숫자 Paperlogy 800 / 본문 Pretendard Variable / ID·시각 JetBrains Mono.
   질감: 가로로 늘인 섬유 노이즈 한 겹. 글로우는 점·선에만.
   동작: assets/app.js(공용) + assets/user.js(모션).
   ========================================================================= */

@font-face {
  font-family: "Paperlogy";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/paperlogy/Paperlogy-6SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/paperlogy/Paperlogy-8ExtraBold.woff2") format("woff2");
}

/* ── 토큰 ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg: #0A0C0B;
  --surface: #121512;
  --surface-2: #191D19;
  --line: #242A24;
  --line-strong: #364036;

  --ink: #EDF2EC;
  --ink-2: #B6C0B4;
  --muted: #7F8B7E;

  --brand: #39FF14;
  --on-brand: #051104;
  --brand-soft: rgba(57, 255, 20, .10);
  --brand-line: rgba(57, 255, 20, .42);

  /* 상태색 — 데이터 부호로만. 진행중이 '켜진' 초록이다. */
  --st-open: #FFB224;
  --st-progress: #39FF14;
  --st-resolved: #86B77E;
  --st-closed: #6F7A6E;

  --p-low: #6F7A6E;
  --p-medium: #B6C0B4;
  --p-high: #FFB224;
  --p-critical: #FF5247;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --font-display: "Paperlogy", "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", Menlo, Consolas, "Apple SD Gothic Neo", "Noto Sans KR", monospace;

  --tap: 44px;
  --focus-ring: 0 0 0 3px rgba(57, 255, 20, .28);
  --rail-w: 84px;
  --maxw: 1120px;
  --pad: clamp(16px, 3.4vw, 44px);
  /* 척추: 번호 칸 너비와 번호–본문 사이 간격 */
  --mark-w: clamp(34px, 6vw, 72px);
  --spine-gap: clamp(26px, 4vw, 44px);
}

/* ── 기본 ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body.app {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  /* 바탕색은 html 이 칠한다 — 섬유 질감(::before, z-index:-1)이 그 위·콘텐츠 아래에 놓이도록 */
  background: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  padding-left: var(--rail-w);
}
/* 질감: 가로로 늘인 섬유 노이즈 — 고정 한 겹, 입력을 가로막지 않는다 */
body.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 .93 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.035em;
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
b, strong { font-weight: 700; color: var(--ink); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--brand); color: var(--on-brand); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }

/* 표시등 — 브랜드 마크이자 '켜짐' 신호 */
.lamp {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-line), 0 0 14px -1px rgba(57, 255, 20, .7);
  flex: none;
}

/* ── 좌측 레일 ──────────────────────────────────────────────────────── */
.rail {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.rail__back { display: none; }
.rail__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
}
.rail__brand:hover { text-decoration: none; }
.rail__nav { display: flex; flex-direction: column; padding-top: 6px; }
.rail__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.rail__link:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.rail__link::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform .3s var(--ease-out);
}
.rail__link.is-active { color: var(--ink); }
.rail__link.is-active::before { transform: scaleY(1); box-shadow: 0 0 12px rgba(57, 255, 20, .7); }
.rail__link.is-active .icon { color: var(--brand); }
.rail__foot { margin-top: auto; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.rail__who {
  writing-mode: vertical-rl;
  align-self: center;
  max-height: 150px;
  padding: 16px 0 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .74rem;
  color: var(--ink-2);
}

/* ── 본문 래퍼 ───────────────────────────────────────────────────────── */
.wrap {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--maxw) + var(--pad) * 2);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 52px) var(--pad) 72px;
}

/* ── 히어로: 제목(좌) | 대표 장면(우) | 상태 띠(아래) ─────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 22px clamp(20px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 60px);
}
.hero--solo { grid-template-columns: minmax(0, 1fr); }
.hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 14px;
  font-size: .8rem;
  color: var(--muted);
}
.hero__title { font-size: clamp(2rem, 5vw, 3.6rem); overflow-wrap: anywhere; }
.hero__title .mono { display: block; margin-bottom: 8px; font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--brand); }
/* 제목이 데이터(리포트 제목)라 길 수 있다 */
.hero__title--data { font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1.28; }
.hero__title--data .mono { font-size: .52em; }
.hero__sub { max-width: 46ch; margin-top: 14px; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__strip { grid-column: 1 / -1; }

/* 대표 장면: 점 필드 */
.field { position: relative; min-width: 0; }
.field__canvas {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 230px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
html:not(.js-field) .field__canvas { display: none; }
.field__legend {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--ink-2);
}
.field__legend li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.field__legend b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.02em; }
.field__replay {
  position: absolute;
  top: 8px; right: 0;
  min-height: 30px;
  padding: 4px 10px;
  font-size: .72rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
}
.field__replay:hover { color: var(--ink); border-color: var(--line-strong); }
html:not(.js-field) .field__replay { display: none; }
.field--empty .field__replay { display: none; }

.dot { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--muted); }
.dot[data-st="open"] { background: transparent; box-shadow: inset 0 0 0 2px var(--st-open); }
.dot[data-st="in_progress"] { background: var(--st-progress); box-shadow: 0 0 10px rgba(57, 255, 20, .75); }
.dot[data-st="resolved"] { background: var(--st-resolved); }
.dot[data-st="closed"] { background: var(--st-closed); }

/* 상태 띠(마퀴) */
.strip {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
}
.strip__view { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.strip__track {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  width: max-content;
  max-width: 100%;
  padding: 9px 0;
}
.strip__set { display: flex; flex-wrap: wrap; flex: none; }
.strip__set + .strip__set { display: none; }
.strip__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ink-2);
}
.strip__item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.strip__item[data-st="in_progress"] b { color: var(--brand); }
.strip__toggle {
  flex: none;
  display: none;
  align-items: center;
  gap: 6px;
  min-width: var(--tap);
  padding: 0 14px;
  font-size: .72rem;
  color: var(--muted);
  background: var(--bg);
  border: 0;
  border-left: 1px solid var(--line-strong);
  cursor: pointer;
}
.strip__toggle:hover { color: var(--ink); }
/* 모션이 켜졌을 때만 한 줄로 흐른다(JS가 is-running 을 붙임) */
.strip.is-running .strip__track { flex-wrap: nowrap; max-width: none; animation: strip-run var(--strip-dur, 28s) linear infinite; }
.strip.is-running .strip__set { flex-wrap: nowrap; }
.strip.is-running .strip__set + .strip__set { display: flex; }
.strip.is-running .strip__toggle { display: inline-flex; }
.strip.is-paused .strip__track { animation-play-state: paused; }
@keyframes strip-run { to { transform: translate3d(-50%, 0, 0); } }

/* ── 척추: 번호 붙은 노드 ───────────────────────────────────────────── */
.spine { position: relative; }
.spine::before,
.spine::after {
  content: "";
  position: absolute;
  top: 6px; bottom: 0;
  left: calc(var(--mark-w) + var(--spine-gap) / 2);
  width: 1px;
  background: var(--line-strong);
}
/* 스크롤 진행에 따라 자라는 켜진 선 */
.spine::after {
  background: var(--brand);
  box-shadow: 0 0 10px rgba(57, 255, 20, .55);
  transform: scaleY(var(--spine-p, 0));
  transform-origin: top;
}
.node {
  position: relative;
  display: grid;
  grid-template-columns: var(--mark-w) minmax(0, 1fr);
  column-gap: var(--spine-gap);
  padding-bottom: clamp(34px, 5vw, 60px);
}
.node:last-child { padding-bottom: 0; }
.node__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-align: right;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
  transition: color .5s var(--ease);
}
/* 척추 위의 마디 점 */
.node::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: clamp(4px, .9vw, 12px);
  left: calc(var(--mark-w) + var(--spine-gap) / 2 - 4px);
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1px solid var(--muted);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.node.is-passed .node__mark { color: var(--ink); }
.node.is-passed::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 12px rgba(57, 255, 20, .8); }
.node__body { min-width: 0; }
.node__title { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 4px; }
.node__sub { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.node__title + :not(.node__sub) { margin-top: 16px; }

/* ── 상태 숫자 + HUD ────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.statgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 14px 0; }
.stat + .stat { padding-left: 14px; border-left: 1px solid var(--line); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.stat--progress .stat__num { color: var(--brand); }

.hud {
  display: none;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.hud__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--ink-2); }
.hud__list { list-style: none; padding: 0; min-height: 6.2em; }
.hud__line { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
.hud__line span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.hud__line.is-live span:first-child { color: var(--brand); }
.hud__bar { height: 2px; margin-top: 10px; background: var(--line); overflow: hidden; }
.hud__bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(var(--hud-p, 0)); transform-origin: left; }
@media (min-width: 1180px) and (min-height: 700px) {
  .stats--hud { grid-template-columns: minmax(0, 1fr) 290px; }
  html.js-hud .hud { display: block; }
}

/* ── 필터 칩 ─────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 0; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.filters .chip {
  min-height: 38px;
  padding: 6px 15px;
  font-size: .86rem;
  border: 0;
  border-right: 1px solid var(--line);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.filters .chip:last-child { border-right: 0; }
.filters .chip:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.filters .chip.is-active { color: var(--on-brand); background: var(--brand); font-weight: 700; }
.chip--admin { color: var(--brand); border-color: var(--brand-line); }
.chip--count { font-variant-numeric: tabular-nums; }

/* ── 원장 / 티켓 행 ─────────────────────────────────────────────────── */
.ledger { border-top: 1px solid var(--line-strong); }
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 16px 14px 16px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .18s var(--ease), padding-left .28s var(--ease-out);
}
.ticket:hover { background: var(--surface); padding-left: 26px; text-decoration: none; }
.ticket__edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--st-closed);
  transition: width .28s var(--ease-out);
}
.ticket:hover .ticket__edge { width: 9px; }
.ticket[data-status="open"] .ticket__edge { background: var(--st-open); }
.ticket[data-status="in_progress"] .ticket__edge { background: var(--st-progress); box-shadow: 0 0 14px rgba(57, 255, 20, .6); }
.ticket[data-status="resolved"] .ticket__edge { background: var(--st-resolved); }
.ticket__id { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.ticket__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ticket__title { font-weight: 600; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.ticket__tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ticket__side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ticket__time { font-size: .74rem; color: var(--muted); white-space: nowrap; }

/* ── 배지 / 우선순위 / 프로젝트 태그 ────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.badge::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.badge--open { color: var(--st-open); border-color: rgba(255, 178, 36, .42); }
.badge--in_progress, .badge--progress, .badge--in-progress { color: var(--st-progress); border-color: var(--brand-line); }
.badge--in_progress::before, .badge--progress::before, .badge--in-progress::before { box-shadow: 0 0 9px rgba(57, 255, 20, .9); }
.badge--resolved { color: var(--st-resolved); }
.badge--closed { color: var(--st-closed); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.prio__dot { width: 7px; height: 7px; background: var(--p-medium); }
.prio--low .prio__dot { background: var(--p-low); }
.prio--high .prio__dot { background: var(--p-high); }
.prio--critical .prio__dot { background: var(--p-critical); }
.prio--critical { color: var(--p-critical); font-weight: 700; }
.projtag { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-2); }
.projtag__dot { width: 8px; height: 8px; background: var(--c, var(--muted)); flex: none; }

/* ── 버튼 ───────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 9px 20px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.btn--primary:hover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-line), 0 0 22px -4px rgba(57, 255, 20, .7); }
.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover { color: var(--ink); background: var(--surface); }
.btn--danger { color: var(--p-critical); border-color: rgba(255, 82, 71, .45); }
.btn--danger:hover { color: #fff; background: var(--p-critical); border-color: var(--p-critical); }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: .84rem; }
.btn--block { width: 100%; }

/* ── 폼 ─────────────────────────────────────────────────────────────── */
.form { display: block; }
.fields { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.field-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.field__hint { font-size: .8rem; color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.textarea { line-height: 1.6; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); background: var(--surface-2); box-shadow: var(--focus-ring); }

.choicechips { display: flex; flex-wrap: wrap; gap: 8px; }
.choicechip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 7px 15px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.choicechip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* 꺼진 표시등 → 선택하면 켜진다 */
.choicechip span::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  vertical-align: 1px;
  background: var(--line-strong);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.choicechip:hover { border-color: var(--muted); }
.choicechip input:checked ~ span { color: var(--ink); font-weight: 700; }
.choicechip input:checked ~ span::before { background: var(--brand); box-shadow: 0 0 10px rgba(57, 255, 20, .9); }
.choicechip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.choicechip:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.filedrop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.filedrop:hover { border-color: var(--brand); background: var(--brand-soft); }
.filedrop input[type="file"] { width: 100%; cursor: pointer; }
.filedrop__preview { display: flex; flex-wrap: wrap; gap: 10px; }
.filedrop__preview:empty { display: none; }
.filedrop__preview img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); }

/* ── 본문 블록(상세) ────────────────────────────────────────────────── */
.prose { max-width: 68ch; color: var(--ink); overflow-wrap: anywhere; }
.block + .block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.block__label { margin-bottom: 8px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.node__actions { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; }

/* 상태 경로: 열림 → 진행중 → 해결됨 → 닫힘 */
.path { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; }
.path__step { position: relative; padding-top: 20px; font-size: .8rem; color: var(--muted); }
.path__step::before {
  content: "";
  position: absolute;
  top: 4px; left: 0; right: 0;
  height: 1px;
  background: var(--line-strong);
}
.path__step::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1px solid var(--muted);
}
.path__step i {
  position: absolute;
  top: 4px; left: 0; right: 0;
  height: 1px;
  background: var(--ink-2);
  transform: scaleX(0);
  transform-origin: left;
}
.path__step.is-done { color: var(--ink-2); }
.path__step.is-done::after { background: var(--ink-2); border-color: var(--ink-2); }
.path__step.is-done i { transform: scaleX(1); }
.path__step.is-now { color: var(--ink); font-weight: 700; }
.path__step.is-now::after { background: var(--path-c, var(--brand)); border-color: var(--path-c, var(--brand)); box-shadow: 0 0 12px var(--path-c, var(--brand)); }

/* ── 타임라인: 내 기록(왼쪽) | 척추 | 관리자 답변(오른쪽) ────────── */
.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; }
.tl-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; }
.tl-item__rail { position: relative; grid-column: 1; grid-row: 1; display: flex; justify-content: center; }
.tl-item__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-strong); }
.tl-item:first-child .tl-item__rail::before { top: 12px; }
.tl-item:last-child .tl-item__rail::before { bottom: auto; height: 12px; }
.tl-item__dot { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 8px; background: var(--bg); border: 1px solid var(--muted); flex: none; }
.tl-item__body { grid-column: 2; grid-row: 1; min-width: 0; padding-bottom: 20px; }
.tl-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-item__who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.tl-item__time { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.tl-item--event .tl-item__dot { width: 5px; height: 5px; margin-top: 10px; background: var(--muted); border: 0; }
.tl-item__meta { font-size: .84rem; color: var(--ink-2); padding-top: 3px; }
.tl-item__meta time { margin-left: 6px; color: var(--muted); font-size: .74rem; }
.tl-comment { padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); font-size: .94rem; overflow-wrap: anywhere; }
.tl-item--admin .tl-item__dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 10px rgba(57, 255, 20, .8); }
.tl-item--admin .tl-comment { border-color: var(--brand-line); border-left: 3px solid var(--brand); background: var(--brand-soft); }
@media (min-width: 1000px) {
  .tl-item { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); column-gap: 20px; }
  .tl-item__rail { grid-column: 2; }
  .tl-item__body { grid-column: 1; }
  .tl-item--event .tl-item__body { text-align: right; }
  .tl-item--admin .tl-item__body { grid-column: 3; }
}

/* ── 첨부 ───────────────────────────────────────────────────────────── */
.attachlist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.attach { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: var(--ink-2); }
.attach:hover { text-decoration: none; }
.attach--img { border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.attach--img:hover { border-color: var(--brand); }
.attach__thumb { display: block; width: 96px; height: 96px; object-fit: cover; }
.attach__file { padding: 8px 12px; font-size: .85rem; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; }
.attach__file:hover { border-color: var(--brand); color: var(--ink); }
.attach__file .icon { width: 16px; height: 16px; }

/* ── 플래시 ─────────────────────────────────────────────────────────── */
.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  font-size: .92rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}
.flash::before { content: ""; width: 8px; height: 8px; margin-top: 8px; background: var(--muted); flex: none; }
.flash.is-hiding { opacity: 0; transform: translateY(-6px); }
.flash--success { border-left-color: var(--st-resolved); }
.flash--success::before { background: var(--st-resolved); }
.flash--error { border-left-color: var(--p-critical); }
.flash--error::before { background: var(--p-critical); }
.flash--info { border-left-color: var(--brand); }
.flash--info::before { background: var(--brand); box-shadow: 0 0 10px rgba(57, 255, 20, .8); }

/* ── 빈 상태 — 꺼진 점 줄 ───────────────────────────────────────────── */
.empty { padding: 34px 0 10px; max-width: 46ch; }
.empty__icon {
  width: 132px; height: 9px;
  margin-bottom: 20px;
  font-size: 0;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 9px, transparent 9px 18px);
}
.empty__title { font-size: 1.3rem; margin-bottom: 8px; }
.empty__text { color: var(--ink-2); margin-bottom: 20px; }

/* ── 페이저 ─────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.pager__link { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 15px; border: 1px solid var(--line-strong); font-size: .86rem; font-weight: 600; }
.pager__link:hover { border-color: var(--brand); text-decoration: none; }
.pager__current { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }

/* ── 푸터 ───────────────────────────────────────────────────────────── */
.appfoot { border-top: 1px solid var(--line); }
.appfoot__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  max-width: calc(var(--maxw) + var(--pad) * 2);
  margin: 0 auto;
  padding: 18px var(--pad);
  font-size: .78rem;
  color: var(--muted);
}
.appfoot__brand { font-family: var(--font-display); font-weight: 800; letter-spacing: .1em; color: var(--ink-2); }

/* ── 로그인 ─────────────────────────────────────────────────────────── */
body.app--auth { padding-left: 0; }
.auth {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  min-height: 100vh;
}
.auth__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 420px;
  padding: clamp(22px, 4vw, 52px);
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.auth__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: .92;
}
/* 글자가 놓이는 왼쪽·아래쪽만 눌러 준다 */
.auth__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 12, 11, .94) 0%, rgba(10, 12, 11, .62) 40%, rgba(10, 12, 11, 0) 72%),
    linear-gradient(0deg, rgba(10, 12, 11, .9) 0%, rgba(10, 12, 11, 0) 34%);
}
.auth__stage > :not(.auth__img) { position: relative; z-index: 1; }
.auth__brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; }
.auth__thesis { font-size: clamp(2.3rem, 6.2vw, 5.4rem); line-height: 1.06; max-width: 9em; }
.auth__thesis span { display: block; }
.auth__sub { max-width: 40ch; margin-top: 18px; color: var(--ink-2); }
.auth__strip { margin: 0 calc(clamp(22px, 4vw, 52px) * -1) calc(clamp(22px, 4vw, 52px) * -1); border-bottom: 0; background: rgba(10, 12, 11, .72); }
.auth__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 72px); background: var(--bg); }
.auth__form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.auth__title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.auth__note { padding-top: 18px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }

/* ── 로더 인트로 (로그인 첫 진입) ───────────────────────────────────── */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader { display: block; position: fixed; inset: 0; z-index: 200; }
.loader__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--bg); transition: transform .9s cubic-bezier(.87, 0, .13, 1); }
.loader__half--top { top: 0; border-bottom: 1px solid var(--line-strong); }
.loader__half--bot { bottom: 0; }
.loader__core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: opacity .3s ease;
}
.loader__count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 17vw, 12rem);
  line-height: .9;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.loader__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }
.loader.is-open .loader__half--top { transform: translate3d(0, -101%, 0); }
.loader.is-open .loader__half--bot { transform: translate3d(0, 101%, 0); }
.loader.is-open .loader__core { opacity: 0; }

/* ── 커스텀 커서 + 스파크 (마우스 사용자만) ─────────────────────────── */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor .ticket { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
html.has-cursor .choicechip input, html.has-cursor input[type="file"] { cursor: none; }
.cursor__sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--brand); box-shadow: 0 0 10px rgba(57, 255, 20, .9); }
.cursor__ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(237, 242, 236, .55);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .2s var(--ease), border-color .2s var(--ease);
}
.cursor__label { font-size: .7rem; font-weight: 700; color: var(--on-brand); opacity: 0; white-space: nowrap; }
.cursor.is-hover .cursor__ring { width: 50px; height: 50px; margin: -25px 0 0 -25px; border-color: var(--brand); }
.cursor.is-label .cursor__ring { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: var(--brand); border-color: var(--brand); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot, .cursor.is-field .cursor__dot { opacity: 0; }
.cursor.is-field .cursor__ring, .cursor.is-out .cursor__ring, .cursor.is-out .cursor__dot { opacity: 0; }

/* ── 모션: JS 초기화가 성공한 뒤에만 숨김을 적용한다 ───────────────── */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
html.js-reveal .path__step i { transition: transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + 250ms); }
html.js-reveal .path:not(.is-in) .path__step.is-done i { transform: scaleX(0); }
/* 로그인 문구: 줄 단위로 올라온다 */
html.js-reveal .auth__thesis span { clip-path: inset(0 0 100% 0); transform: translate3d(0, 42%, 0); transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms + 120ms); }
html.js-reveal .auth.is-in .auth__thesis span { clip-path: inset(0 0 -12% 0); transform: none; }
html.js-reveal .auth__img { transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
html.js-reveal .auth.is-in .auth__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .strip__track { animation: none !important; }
  html.is-loading { overflow: auto; }
  html.is-loading .loader, .cursor { display: none !important; }
  .spine::after { transform: scaleY(1); }
}

/* ── 작은 화면: 레일 → 상단 줄, 척추는 왼쪽 한 줄 ─────────────────── */
@media (max-width: 899px) {
  body.app { padding-left: 0; }
  .rail {
    position: sticky;
    inset: 0 0 auto 0;
    width: 100%;
    height: 56px;
    flex-direction: row;
    align-items: stretch;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px;
    background: none; border: 0; border-right: 1px solid var(--line);
    color: var(--ink-2);
    cursor: pointer;
  }
  .rail__brand { flex-direction: row; padding: 0 14px; border-bottom: 0; border-right: 1px solid var(--line); }
  .rail__nav { flex-direction: row; padding-top: 0; flex: 1 1 auto; min-width: 0; }
  .rail__link { flex-direction: row; min-height: 0; padding: 0 12px; gap: 7px; font-size: .8rem; white-space: nowrap; }
  .rail__link::before { top: auto; bottom: 0; left: 10px; right: 10px; width: auto; height: 2px; transform: scaleX(0); }
  .rail__link.is-active::before { transform: scaleX(1); }
  .rail__foot { margin-top: 0; flex-direction: row; border-top: 0; border-left: 1px solid var(--line); }
  .rail__who { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding: 14px 10px 12px 0; }
  .stat:nth-child(4) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .ticket { grid-template-columns: minmax(0, 1fr); padding-right: 6px; }
  .ticket__side { justify-content: flex-start; }
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth__stage { min-height: 56vh; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  /* 라벨은 화면에서만 숨기고 읽기 프로그램에는 남긴다 */
  .rail__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail__link { padding: 0 14px; }
  .field__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { width: 100%; }
  .filters .chip { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  .path__step { font-size: .72rem; }
}
/* 가로로 눕힌 폰: 세로 공간을 아낀다 */
@media (max-height: 520px) and (orientation: landscape) {
  .auth__stage { min-height: 0; }
  .auth__thesis { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .field__canvas { height: 130px; }
}