/* 토큰 값의 권위는 이 파일의 :root 와 .x-col 테마 규칙이다. 이름·역할·쓰임 규칙은 docs/canonical/DESIGN.md 를 따른다. */

:root {
  color-scheme: light;

  --bg: #F5F6F7;
  --surface: #FFFFFF;
  --sunken: #EBEEF0;
  --line: #0F14191F;
  --text: #0F1419;
  --muted: #536471;
  --accent: #1D9BF0;
  --on-accent: #FFFFFF;
  --danger: #F4212E;

  /* family 이름은 index.html 이 불러오는 CDN 글꼴 CSS 의 @font-face 와 같아야 한다 */
  --font: "Pretendard GOV Variable", system-ui, sans-serif;
  --fs-md: 0.9375rem;
  --fs-sm: 0.8125rem;

  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;

  --radius-sm: 6px;
  --radius-lg: 10px;

  --h: 36px;
  --touch-min: 44px;

  --shadow-chip: 0 1px 2px #0F141929;
  --shadow-toast: 0 6px 20px #0F141933;

  --ghost-veil: #FFFFFF4D;
  --nav-shadow: 0 0 4px #0F141999;

  --dur: 160ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (pointer: coarse) {
  :root { --h: 44px; }
}

/* ── X 재현 표면 토큰(X 테마별). 속성이 없으면 시스템 설정을 따른다 ── */
.x-col {
  --x-bg: #FFFFFF;
  --x-line: #EFF3F4;
  --x-sub: #536471;
  --x-text: #0F1419;
}
@media (prefers-color-scheme: dark) {
  .x-col:not([data-x-theme="light"]) {
    --x-bg: #000000;
    --x-line: #2F3336;
    --x-sub: #71767B;
    --x-text: #E7E9EA;
  }
}
.x-col[data-x-theme="dark"] {
  --x-bg: #000000;
  --x-line: #2F3336;
  --x-sub: #71767B;
  --x-text: #E7E9EA;
}

/* ── 베이스라인 ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  /* 좁은 구간: 하단 고정 툴바(한 줄) 높이만큼 예약 */
  padding-bottom: calc(var(--h) + 2 * var(--gap-2) + 1px + env(safe-area-inset-bottom));
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, p { margin: 0; }
/* 화면에서 숨기고 보조 기술에는 남긴다 */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 컨트롤 ── */
.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  height: var(--h);
  padding-inline: var(--gap-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  white-space: nowrap;
}
.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--h);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--sunken);
}
.btn:disabled, .icon-btn:disabled, .seg button:disabled, .num input:disabled { opacity: 0.45; }

.seg {
  display: inline-flex;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--sunken);
}
/* 버튼 전체가 누르는 영역이고, 선택 칩은 안쪽 ::before 로 그린다 */
.seg button {
  position: relative;
  isolation: isolate;
  min-width: var(--h);
  height: var(--h);
  padding: 0 var(--gap-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.seg button[aria-checked="true"] { color: var(--text); }
.seg button[aria-checked="true"]::before {
  content: "";
  position: absolute;
  inset: var(--gap-1);
  z-index: -1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-chip);
}

.num { position: relative; display: inline-flex; flex: none; --chars: 4; }
.num.w5 { --chars: 5; }
.num input {
  width: calc(var(--chars) * 1ch + 2ch + 2 * var(--gap-2) + var(--gap-1) + 2px);
  height: var(--h);
  padding: 0 calc(var(--gap-2) + 2ch + var(--gap-1)) 0 var(--gap-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.num.bare input { width: calc(var(--chars) * 1ch + 2 * var(--gap-2) + 2px); padding-right: var(--gap-2); }
.num input[aria-invalid="true"] { border-color: var(--danger); }
/* 단위 표시는 칸 안 오른쪽 버튼이다. 입력칸의 오른쪽 padding 이 이 폭(2ch + 밀착 간격)을 비워 둔다 */
.num .unit {
  position: absolute;
  inset-block: 0;
  right: var(--gap-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(2ch + var(--gap-1));
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
}

/* ── 툴바 ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-2);
  padding: var(--gap-2);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tb-group { display: flex; flex: none; align-items: center; gap: var(--gap-3); }
.tb-end { gap: var(--gap-2); }
.field, .field-items { display: flex; flex: none; align-items: center; gap: var(--gap-2); }
.label { font-weight: 700; white-space: nowrap; }
/* 좁은 구간에서 편집 그룹은 하단 툴바로 옮겨진다(js/ui/toolbar.js). 옮기기 전 한 프레임도 상단에 보이지 않게 한다 */
.topbar > .tb-edit { display: none; }

/* 좁은 구간 하단 툴바: 한 줄(조각 · 크롭). 높이는 body 의 padding-bottom 예약과 같아야 한다 */
.bottombar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.bottombar > .tb-edit { padding: var(--gap-2) var(--gap-3); }
/* 360px 에서 한 줄이 넘치지 않게 가로 여백과 필드 사이를 줄인다 */
@media (max-width: 26rem) {
  .bottombar > .tb-edit { gap: var(--gap-2); padding-inline: var(--gap-2); }
}

/* ── 무대 ── */
.stage {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--gap-3);
  padding-top: var(--gap-3);
}
.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  width: var(--x-col-w, 100%);
  min-height: var(--h);
  padding-inline: var(--gap-3);
}
.stage-info {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gap-1);
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.stage-acts { display: flex; flex: none; gap: var(--gap-2); margin-inline-start: auto; }
.stage-warn {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  width: var(--x-col-w, 100%);
  padding-inline: var(--gap-3);
  font-size: var(--fs-sm);
}

/* ── X 열. 기하 변수(--x-*)는 js/ui/stage.js 가 x-carousel.js 상수와 scene() 에서 넣는다 ── */
.x-col {
  position: relative;
  width: var(--x-col-w, 100%);
  border-inline: 1px solid var(--x-line);
  background: var(--x-bg);
  color: var(--x-sub);
  /* 스크롤 컨테이너의 음수 margin 을 받는 들여쓰기: 스크롤 상자가 열 안쪽 폭 전체가 된다 */
  padding-inline: calc(-1 * var(--x-bleed-ms, 0px)) calc(-1 * var(--x-bleed-me, 0px));
}
[data-dragging] .x-col { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-dragging] .x-col:has(.drop:not([hidden])) { outline: none; }

.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - var(--x-bleed-ms, 0px) - var(--x-bleed-me, 0px));
  height: var(--x-void-h);
  margin-inline: var(--x-bleed-ms, 0px) var(--x-bleed-me, 0px);
  padding: var(--gap-3);
  border: 2px dashed transparent;
  background: none;
  color: var(--x-sub);
  text-align: center;
}
[data-dragging] .drop { border-color: var(--accent); }

.x-scroll {
  display: grid;
  grid-template-columns: var(--x-track-w);
  row-gap: var(--gap-3);
  margin-inline: var(--x-bleed-ms) var(--x-bleed-me);
  padding-inline: var(--x-pad-s) var(--x-pad-e);
  padding-block: var(--x-pad-b);
  scroll-padding-inline: var(--x-pad-s) var(--x-pad-e);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* 이음새 핸들의 z-index 를 스크롤 상자 안에 가둬 카드 넘기기 버튼 아래에 둔다 */
  isolation: isolate;
}
.x-scroll::-webkit-scrollbar { display: none; }
/* 마우스로 카드를 끄는 동안("")과 놓은 뒤 카드 위치로 가는 동안("settle") 스냅을 끈다(js/ui/stage.js).
   끄는 동안에는 scrollLeft 가 포인터에 바로 붙어야 하므로 부드러운 스크롤도 끈다 */
.x-scroll[data-panning] { scroll-snap-type: none; }
.x-scroll[data-panning=""] { scroll-behavior: auto; cursor: grabbing; }
.x-track, .x-notes-widths { user-select: none; -webkit-user-select: none; }

.x-track { position: relative; height: var(--x-card-h); }
.x-card {
  position: absolute;
  top: 0;
  left: var(--l);
  width: var(--w);
  height: var(--x-card-h);
  border: var(--x-card-border) solid var(--x-line);
  border-radius: var(--x-card-radius);
  overflow: hidden;
  scroll-snap-align: start;
}
.x-photo, .x-ghost-part {
  background-image: var(--x-img);
  background-repeat: no-repeat;
  background-size: var(--bgw) var(--bgh);
  background-position: var(--bgx) var(--bgy);
}
.x-photo { position: absolute; inset: 0; }

/* 지역 stacking: 카드 < 잘리는 부분 레이어 < 이음새 핸들 */
.x-ghosts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.x-ghost-part {
  position: absolute;
  top: var(--x-card-border);
  left: var(--l);
  width: var(--w);
  height: var(--x-inner-h);
}
/* 원본은 불투명하게 두고 막을 덮는다. X 테마와 무관하게 흰색 */
.x-ghost-part::after { content: ""; position: absolute; inset: 0; background: var(--ghost-veil); }

.x-seam {
  position: absolute;
  top: 0;
  left: calc(var(--x) - var(--touch-min) / 2);
  z-index: 2;
  width: var(--touch-min);
  height: var(--x-card-h);
  cursor: col-resize;
  touch-action: none;
}
/* 포커스 링은 히트 영역 전체가 아니라 카드 사이 간격 구간에만 그린다 */
.x-seam:focus-visible { outline: none; }
.x-seam::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--x-gap);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.x-seam:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 0; }

/* 주석 줄: 카드 위 조각 폭(카드 가운데), 카드 아래 분할선 입력칸(이음새 중심).
   두 줄의 높이(--h)와 카드까지의 간격(.x-scroll 의 row-gap)이 같아 카드가 위아래 같은 여백 사이에 놓인다 */
.x-notes-row { position: relative; height: var(--h); }
.x-line-input { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); }
.x-width {
  position: absolute;
  inset-block: 0;
  left: var(--x);
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  color: var(--x-text);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 카드 넘기기 버튼: 스크롤 상자 밖, X 열 기준. 세로 위치 = 위 여백 + 조각 폭 줄 + 줄 간격 + 카드 높이의 절반.
   포인터 기기에서 캐러셀에 올렸을 때만 보인다(아래 hover query). 처음·끝 위치에서는 stage.js 가 hidden 을 준다 */
.x-nav {
  position: absolute;
  top: calc(var(--x-pad-b) + var(--h) + var(--gap-3) + var(--x-card-h) / 2);
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--h);
  height: var(--h);
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF; /* 사진 위 글리프: X 테마와 무관하게 흰색 */
  font-size: 1.25rem;
  text-shadow: var(--nav-shadow);
  transform: translateY(-50%);
}
.x-nav-prev { left: var(--gap-2); }
.x-nav-next { right: var(--gap-2); }

/* ── 토스트 ── */
.toasts {
  position: fixed;
  top: 33.333vh;
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  width: max-content;
  max-width: calc(100vw - 2 * var(--gap-3));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  text-align: left;
  box-shadow: var(--shadow-toast);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease-out);
}
.toast .icon.spinner { animation: spin 1s linear infinite; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes spin { to { transform: rotate(1turn); } }

/* ── 넓은 구간. 이 query 문자열은 js/ui/toolbar.js 의 WIDE_QUERY 와 같아야 한다 ── */
@media (min-width: 64rem) {
  body { padding-bottom: var(--gap-4); }
  .topbar { flex-wrap: nowrap; justify-content: center; gap: var(--gap-3); padding-inline: var(--gap-3); }
  .topbar > .tb-edit { display: flex; }
  .stage { padding: var(--gap-4); }
  .stage-bar, .stage-warn { padding-inline: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(.primary):not(:disabled):hover { background: var(--sunken); }
  .btn.primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent), #000 8%); }
  .icon-btn:not(:disabled):hover { background: color-mix(in srgb, var(--sunken), var(--text) 6%); }
  .seg button:not(:disabled):hover { color: var(--text); }
  .num .unit:hover { color: var(--text); }
  .drop:hover { text-decoration: underline; }
  .x-scroll:not([hidden]):hover ~ .x-nav, .x-nav:hover { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .x-scroll { scroll-behavior: auto; }
  .toast, .toast .icon.spinner { animation: none; }
}