/* MovieAgentStudio — 디자인 토큰 (모든 화면이 이 한 파일을 본다)
 *
 * 색은 둘뿐이다 (docs/11-WORKSPACE.md):
 *   --human  텅스텐 3200K — 사람이 개입할 곳. 필름 조명의 색이라 이 도메인에 맞는다
 *   --auto   데이라이트 5600K — 시스템이 자동 처리한 것
 * 배경은 중립 그래파이트. 채도는 콘텐츠(키프레임·영상)에만 준다.
 *
 * 예전에는 관제탑(ui.css)과 워크스페이스(studio.css)가 팔레트를 따로 들고 있었다.
 * 같은 클래스명이 다른 뜻으로 충돌했고, 화면마다 브랜드가 달라 보였다.
 */

:root {
  --bg: #0d0f12;
  --panel: #14171c;
  --raise: #1a1e25;
  --hover: #212630;
  /* 구분선. 선은 3:1 이면 충분하지만 1.28 이라 표의 줄이 거의 보이지 않았다. */
  --line: #2f3644;
  --line-soft: #1e232b;

  --ink: #e7ebf1;
  --ink-2: #a8b2c0;
  /* 보조 글자. 어느 바탕에서도 본문 기준(4.5:1)을 넘겨야 한다 — 예전 값
     #6f7a8a 은 가장 밝은 패널(--raise) 위에서 3.84 라, 설명과 표의 보조 글자가
     읽기 어려웠다. 지금은 4.53 이다. */
  --dim: #7b8695;
  /* 더 물러나는 글자. 그림이 들어올 자리에 「아직 없습니다」를 적을 때처럼,
     **내용보다 뒤에 있어야** 하는 안내에만 쓴다. 본문에는 쓰지 않는다. */
  --dim-2: #39414d;

  --human: #e0a458;
  --human-dim: #7a5a2e;
  --human-glow: rgba(224, 164, 88, .18);
  --auto: #5ec8be;
  --auto-dim: #2c5d5a;
  --danger: #e0705f;
  --ok: #6fbf73;

  /* 서체 — 브랜드에 처음 넣는 결정 (docs/18-PRODUCT-UX.md).
     제목은 세리프: 영화 타이틀의 감각. 본문은 산세리프, 숫자는 모노. */
  --serif: "Noto Serif KR", "Noto Serif CJK KR", "Apple SD Gothic Neo", Georgia, serif;
  --sans: "Inter", "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  /* 모노 서체에는 **한글 글자가 없다.** 그대로 두면 한글이 전각 모노 서체로
     대체되어 「팀과  기록」처럼 벌어져 보인다. 자간을 아무리 줄여도 소용없다 —
     서체가 글자마다 한 칸씩 잡기 때문이다.
     한글 서체를 **`ui-monospace` 앞에** 둔다. 뒤에 두었더니 시스템 모노 서체가
     한글을 먼저 가로채 그대로였다(재어 보니 47.0px, 고친 뒤 43.6px). 대체는 글자
     단위라 숫자와 라틴 문자는 그대로 JetBrains Mono 로 남는다. */
  --mono: "JetBrains Mono", "Noto Sans KR", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── 화면 폭의 단계 ──────────────────────────────────────────────────────
     좁게 쓰는 사람이 많다. 폭을 하나로 박아 두면 넓은 화면에서는 오른쪽이 비고,
     좁은 화면에서는 옆으로 넘친다. 단계마다 **본문 폭과 레일 폭**을 함께 정한다.

       XS  < 720   레일을 접고 본문이 전부
       S   720–1023
       M   1024–1279
       L   1280–1679
       XL  ≥ 1680

     지금 어느 단계인지는 머리말 오른쪽에 작게 표시한다(`whoami.js`). */
  --wrap: 920px;        /* 본문 최대 폭 — 아래에서 단계마다 바꾼다 */
  --rail: 216px;
  --side: 360px;      /* 담당자 대화 칸 — 모든 작품 화면이 같은 폭 */
  --inspect: 340px;
  --top: 56px;
}

/* html 에도 배경을 준다 — body 가 뷰포트보다 짧으면 아래에 흰 띠가 생긴다 */
html { background: var(--bg); }
/* 한국어를 글자 단위로 자르지 않는다. 브라우저 기본값은 CJK 를 아무 글자에서나 끊어서
   "버 / 리지 않는다" 처럼 단어 중간이 갈린다. 띄어쓰기에서만 끊고, 너무 긴 한 덩어리만
   넘칠 때 부순다. */
body { word-break: keep-all; overflow-wrap: break-word; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* 컴포넌트의 display 규칙이 hidden 을 이겨서, 숨겨야 할 회의 옵션이 늘 보였다 */
[hidden] { display: none !important; }

/* ── 누를 수 있는 것은 누를 수 있게 보인다 ──────────────────────────────────
   버튼과 링크가 화면마다 다른 파일에서 정의되다 보니 어떤 것은 마우스를 올려도
   반응이 없고 커서도 안 바뀌었다. 개별 파일을 다 고치는 대신 여기서 못 박는다.
   각 화면의 고유한 색과 모양은 그 파일이 계속 정한다 — 여기서는 **반응만** 준다. */
button, [role="button"], summary, a.item, a.mini, a.ghost, .cta, .act {
  cursor: pointer;
}
button:disabled, [role="button"][aria-disabled="true"] { cursor: default; }
button:not(:disabled):active, [role="button"]:active, .cta:not(:disabled):active,
.act:not(:disabled):active { transform: translateY(1px); }
button, .cta, .act, a.item, a.mini {
  transition: background-color .12s, border-color .12s, color .12s, opacity .12s;
}
/* 색을 정하지 않은 버튼도 마우스를 올리면 반응한다 */
button:not(:disabled):hover:not(.cta):not(.go):not(.on) { filter: brightness(1.18); }
:focus-visible { outline: 2px solid var(--accent, #5ec8be); outline-offset: 2px; }

/* ── 입력 요소의 기준 ──────────────────────────────────────────────────────

   공통 기준이 없어서 각 화면이 자기 범위(`body.start .bar input` 같은)에서만
   입력칸을 칠했다. 그 범위 밖은 브라우저 기본값이 그대로 나와, **어두운 화면에
   하얀 입력칸**이 박혔다. 어느 화면에서 새 입력칸을 만들어도 제품처럼 보이도록
   기준을 여기 둔다 — `tokens.css` 는 22개 화면이 모두 읽는다.

   화면마다 더 좁히고 싶으면 자기 CSS 에서 덮어쓴다. 여기서는 **바탕·글자·테두리**
   만 정하고 폭이나 배치는 정하지 않는다. */
input, select, textarea, button {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  /* 브라우저가 제 색을 입히는 것(날짜 고르개, 자동완성)을 막는다 */
  color-scheme: dark;
}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--human);
  box-shadow: 0 0 0 3px var(--human-glow);
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; }
textarea { line-height: 1.6; resize: vertical; }
/* 체크와 라디오는 크기와 강조색만 — 모양은 브라우저에 맡긴다 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--human); width: 15px; height: 15px; }

/* ── 입력칸 묶음 ───────────────────────────────────────────────────────────

   관련된 입력칸이 한 덩어리로 보여야 무엇을 함께 정하는 것인지 알 수 있다.
   설명과 입력칸이 같은 평면에 늘어서 있으면 화면이 길어질수록 복잡해 보인다. */
.group {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raise);
}
.group > h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.group > h3 + .dim { margin-top: 0; }
.group > :last-child { margin-bottom: 0; }
.group + .group { margin-top: 12px; }

/* 고르는 칩 — 눌러서 켜고 끈다. 켜진 것이 글자로도 갈려야 한다. */
.picks { display: flex; gap: 6px; flex-wrap: wrap; }
.picks .chip, .serving .chip {
  padding: 4px 11px; border-radius: 99px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: transparent;
  color: var(--dim); font: 500 12.5px var(--sans);
}
.picks .chip:hover { border-color: var(--ink-2); color: var(--ink-2); }
.picks .chip.on {
  border-color: var(--human); background: var(--human-glow); color: var(--human);
}


/* ── 단계별 폭 ─────────────────────────────────────────────────────────────
   한 줄이 너무 길면 읽기 어렵다(65자 안팎이 기준). 그래서 본문은 무한정 넓히지
   않고, 넓어진 만큼 **표와 카드가 쓴다** — 그쪽은 넓을수록 잘 읽힌다. */
@media (min-width: 1280px) { :root { --wrap: 1080px; } }
@media (min-width: 1680px) { :root { --wrap: 1240px; --rail: 240px; } }
@media (max-width: 1023px) { :root { --rail: 184px; } }

/* 좁은 화면에서는 레일을 접는다. 216px 은 800px 화면에서 4분의 1이 넘는다. */
@media (max-width: 719px) { :root { --rail: 0px; --side: 0px; } }