/* 공통 컴포넌트 — **이 제품의 화면 부품은 여기서 한 번만 정의한다.**

   그동안 화면마다 자기 CSS 에서 같은 부품을 다시 만들었다. 실측하면 이랬다.

       .ghost  7곳   .tag  6곳   .empty  6곳   .dim  6곳   .chip  5곳

   같은 것을 여러 곳에서 만들면 두 가지가 생긴다. 하나는 **화면마다 조금씩 다른
   제품**이고, 다른 하나는 **선택자끼리의 싸움**이다. 실제로 `body.start h2`(영문용
   모노·대문자·자간)와 `.admin-page h2`(크기만)가 같은 특정도로 부딪쳐, 한글 제목이
   「승인  대기」처럼 벌어져 나왔다.

   읽는 순서는 `fonts → tokens → components → 화면별`이다. 화면은 여기 정의를
   **덮어쓸 수 있다** — 다만 덮어쓸 때는 왜 다른지 그 자리에 적는다.

   여기 없는 것: 색·서체·간격의 값(`tokens.css`), 화면의 배치(화면별 CSS). */

/* ── 제목 ──────────────────────────────────────────────────────────────────
   한글 제목에 대문자화와 넓은 자간을 쓰지 않는다. 라틴 문자에서 오는 장식이라
   한글에서는 글자가 흩어져 읽기 어렵다. 영문 표시는 `.eyebrow` 가 맡는다. */
h1 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; font-weight: 600;
     letter-spacing: -.01em; color: var(--ink); }
h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* 본문 옆 설명. 제목 바로 아래 한 줄. */
/* 화면 첫 문단. **읽는 폭**을 여기서 한 번 정한다 — 한 줄이 너무 길면 눈이 다음 줄을
   못 찾고, 너무 짧으면 폭이 남는데도 접힌다. 예전에는 시작 화면 전용 규칙(64ch)이
   관리 화면까지 좁혀, 1,000px 이 남는 자리에서 두 줄로 접혔다. */
.lead { margin: 0 0 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.75;
  max-width: min(100%, 78ch); }
.dim { color: var(--dim); font-size: 12.5px; }
/* 없다는 사실을 말하는 자리. 오류처럼 보이지 않아야 한다. */
.empty { margin: 0; padding: 14px 0; color: var(--dim); font-size: 13px; }

/* ── 판 ────────────────────────────────────────────────────────────────────
   한 화면 안에서 주제가 바뀌는 자리를 나눈다. */
.panel { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line);
         border-radius: 9px; background: var(--panel); }
.panel > h2, .panel > h1 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel { overflow-x: auto; }

/* ── 단추 ──────────────────────────────────────────────────────────────────
     .act    보통 행동
     .act.go 이 화면에서 하려던 일 (하나만)
     .ghost  곁들이는 행동 · 링크처럼 가볍게
     .cta    화면 밖으로 이끄는 큰 행동
     .danger 되돌릴 수 없는 일 */
.act, .ghost, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--ink-2); font: 500 13px var(--sans); text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.act { padding: 6px 12px; }
.ghost { padding: 6px 12px; }
.cta { padding: 9px 18px; border-color: var(--human); background: var(--human);
       color: #14171c; font-weight: 600; }
.act:hover, .ghost:hover { border-color: var(--human); color: var(--ink); }
.cta:hover { filter: brightness(1.06); }
.act.go { border-color: var(--human); background: var(--human); color: #14171c; }
.act.go:hover { filter: brightness(1.06); color: #14171c; }
.act.danger:hover, .ghost.danger:hover { border-color: var(--danger); color: var(--danger); }
.act:disabled, .ghost:disabled, .cta:disabled { opacity: .45; cursor: default; filter: none; }
.act:disabled:hover, .ghost:disabled:hover { border-color: var(--line); color: var(--ink-2); }
/* 한 줄에 여러 행동이 설 때 */
.acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── 표 ────────────────────────────────────────────────────────────────────
   운영 화면의 표. 값이 많으므로 선은 가늘게, 숫자는 오른쪽으로. */
table.admin { width: 100%; border-collapse: collapse; font-size: 13px; }
table.admin th, table.admin td {
  padding: 9px 10px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
}
table.admin thead th { color: var(--dim); font: 500 12px var(--sans); white-space: nowrap;
                       border-bottom-color: var(--line); }
table.admin tbody tr:last-child td { border-bottom: 0; }
table.admin tbody tr:hover td { background: var(--raise); }
table.admin .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 표 안에서는 **줄바꿈하지 않는다.** 칸을 좁히면 단추가 두 줄로 쪼개져 행 높이가
   들쭉날쭉해지고, 무엇이 한 묶음인지 알 수 없다. 좁으면 표 전체를 옆으로 넘긴다. */
table.admin .acts, table.admin .serving, table.admin .picks { flex-wrap: nowrap; }
table.admin td.acts { white-space: nowrap; }
/* 넓은 표는 **판 안에서** 가로로 넘긴다(`.panel { overflow-x: auto }`). 본문
   전체가 옆으로 밀리면 안 된다. 표마다 감싸는 칸을 넣는 대신 판이 맡는다 —
   마크업을 건드리지 않는 쪽이 안전하다. 기계적으로 감싸다가 태그 짝을 깨뜨렸다. */

/* ── 상태 표시 ─────────────────────────────────────────────────────────────
   값이지 문장이 아니다. 명사구 한 낱말. */
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px;
       border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.tag.admin, .tag.wait { border-color: var(--human); color: var(--human); }
.tag.ok { border-color: var(--ok); color: var(--ok); }
.tag.left { color: var(--dim); }
/* 그림 위에 얹히는 표시. 테두리만으로는 그림에 묻혀 읽히지 않는다.
   콘티 보드의 샷 표시가 그렇다 — 화면이 따로 만들지 않도록 여기 둔다. */
.tag.solid { background: var(--raise); border-color: var(--line-soft); }

/* ── 사람 ──────────────────────────────────────────────────────────────────
   표 안에서 사진과 이름이 함께 서는 자리.

   예전 이름은 `.who` 였다. 그런데 제작 화면에서 `.who` 는 **발언자**와 **고를 수
   있는 제작진**을 가리키고 있었다 — 같은 이름이 네 가지를 뜻했다.

   `.person` 으로 옮기려다 **그것도 이미 쓰이고 있는 것을 뒤늦게 알았다**(제작진
   카드). 이름을 고를 때는 먼저 비어 있는지 본다. `.usercell` 은 CSS·JS 어디에도
   없던 이름이다. */
.usercell { display: flex; align-items: center; gap: 8px; }
.usercell img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ── 한 줄 입력 묶음 ───────────────────────────────────────────────────────
   입력칸과 단추가 한 줄에 설 때. */
.newrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 화면 안의 갈래 ────────────────────────────────────────────────────────
   한 화면이 길어지면 나눈다. 탭처럼 보이지만 **주소가 다른 화면**이라 북마크와
   뒤로가기가 그대로 동작한다. */
.sections { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.sections a {
  padding: 9px 14px; margin-bottom: -1px; text-decoration: none;
  border-bottom: 2px solid transparent; color: var(--dim);
  font: 500 13.5px var(--sans);
}
.sections a:hover { color: var(--ink-2); }
.sections a.on { color: var(--ink); border-bottom-color: var(--human); }


/* ── 팀 묶음 ───────────────────────────────────────────────────────────────
   제작진을 팀별로 나눠 보여 주는 자리. 제목이 테두리에 걸쳐 앉아, 어디부터
   어디까지가 한 팀인지 눈으로 끊어 읽힌다.

   이 모양이 작품 홈(`#crew`)에만 걸려 있었다. 제작팀 화면은 컨테이너 이름이
   달라(`#teamLanes`) 스타일이 닿지 않았고, 「기획」 같은 팀 이름이 **여백 없이
   왼쪽 벽에 붙어** 나왔다. 이름에 매달지 않고 `.lane` 자체에 건다. */
.lane {
  margin: 20px 0 0; padding: 6px 14px 14px;
  border: 1px solid var(--line); border-radius: 12px;
}
.lane > h2 {
  width: fit-content; display: flex; align-items: center; gap: 9px;
  margin: -16px 0 12px 4px; padding: 0 9px;
  background: var(--bg); color: var(--human);
  font-size: 12.5px; font-weight: 600;
}
.lane > h2 span { font-size: 11.5px; font-weight: 500; color: var(--dim); }
/* 카드 격자(`.idgrid`)는 `idcard.css` 가 정한다 — 명패와 한 몸이다. */

/* ── 고를 수 없는 칩 ───────────────────────────────────────────────────────
   흐리게만 두면 눌러 보고서야 안 되는 줄 안다. 커서도 함께 바꾼다. */
.picks .chip:disabled,
.picks .chip[aria-disabled="true"] {
  opacity: .38; cursor: not-allowed;
  border-style: dashed;
}
.picks .chip:disabled:hover,
.picks .chip[aria-disabled="true"]:hover { border-color: var(--line); color: var(--dim); }

/* ── 준비 표시 ─────────────────────────────────────────────────────────────
   「내 키」를 고른 칸 바로 옆. 초록 체크는 준비됨, 주황 느낌표는 아직 없음.
   색만으로 말하지 않는다 — 모양(✓ / !)도 다르다. 색을 구분하기 어려운 사람도
   읽을 수 있어야 한다. */
.keymark {
  display: inline-grid; place-items: center; flex: none;
  /* 칩 줄은 flex 라 `vertical-align` 이 듣지 않는다 — 떠 보였다. */
  align-self: center;
  width: 17px; height: 17px; margin: 0 6px 0 -2px;
  border-radius: 50%; font: 700 11px/1 var(--sans); font-style: normal;
  cursor: help;
}
.keymark.ok   { background: rgba(111, 191, 115, .18); color: var(--ok);
                border: 1px solid var(--ok); }
.keymark.warn { background: var(--human-glow); color: var(--human);
                border: 1px solid var(--human); }

/* ── 쪽 넘김 (`pager.js`) ──────────────────────────────────────────────────
   회원 관리와 이용 기록이 같은 모양을 쓴다. 지금 쪽은 채워서 한눈에 찾는다. */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 14px;
}
.pager .pg {
  min-width: 32px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--ink-2); font: 500 13px var(--sans);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.pager .pg:hover { border-color: var(--human); color: var(--ink); }
.pager .pg.on { border-color: var(--human); background: var(--human-glow);
  color: var(--human); cursor: default; }
.pager .gap { color: var(--dim); padding: 0 2px; }
/* 「이전·다음」도 `.pg` 다. 공통 `.act` 를 쓰면 `body.start button { border: 0 }`(0,1,2)이
   테두리를 지워 「이전」만 글자로 떠 있었고, 여기서 `.act` 모양을 다시 정하면 같은 이름이
   두 부품이 된다. */
.pager .pg.step { padding: 0 12px; }
.pager .pg:disabled { opacity: .4; cursor: default; }
.pager .pg:disabled:hover { border-color: var(--line); color: var(--ink-2); }
.pager > .dim { margin-left: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ── 「내 키」 제공자 칸 (`me.js`) ─────────────────────────────────────────
   선택·준비 표시·등록 단추가 한 줄에 선다. 좁으면 줄을 바꾼다. */
.pickprov { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pickprov select { min-width: 150px; }
.pickprov .keymark { margin: 0; }
.pickprov-note { display: block; margin-top: 4px; font-size: 12px; }