/* ============================================================================
   pages.css — 화면 전용 레이아웃 + 최소한의 보조 클래스
   ----------------------------------------------------------------------------
   읽는 순서:  tokens.css → base.css → components.css → pages.css
   이 파일은 구현 담당자가 추가했다. tokens/base/components 는 건드리지 않았다.

   왜 이 파일이 생겼나
     CSP 가 `style-src 'self'` 다. 인라인 <style> 과 style="…" 속성이 차단된다.
     예전에는 public/index.html · survey-public/index.html 에 <style> 이 있었고
     JS 가 style="margin-top:…" 를 붙이고 있었다. 그것들을 전부 여기로 옮겼다.
     그래서 CSP 에서 'unsafe-inline' 예외를 뺄 수 있었다.

   ⚠️ design.md 0절은 "색 값을 HTML/JS 에 직접 쓰지 마라"고 한다. 여기도 같다 —
      이 파일에 하드코딩된 색은 없다. 전부 tokens.css 의 var() 다.
   ⚠️ base.css 는 "유틸 클래스는 만들지 않는다"고 적혀 있다. 아래 `u-` 묶음은
      그 방침에서 벗어난다. 이유는 하나뿐이다: style 속성을 없애야 CSP 예외를
      뺄 수 있어서다. 새 컴포넌트를 만들 때는 이걸 쓰지 말고 components.css 에
      제대로 된 이름을 붙여라.
   ========================================================================== */


/* ==========================================================================
   01 운영자 로그인
   ========================================================================== */

.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-6) var(--space-4);
}
.login-card { width: 100%; max-width: 400px; }
.login-mark { text-align: center; margin-bottom: var(--space-6); }
.login-mark b {
  display: block;
  font-size: var(--fs-600);
  font-weight: var(--fw-heavy);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}
.login-mark span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-300);
  color: var(--text-muted);
}
.login-foot {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-200);
  color: var(--text-muted);
  max-width: 400px;
}


/* ==========================================================================
   02 운영자 대시보드
   ========================================================================== */

.dash { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) {
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  /* ⚠️ 견본(docs/mockups/dashboard.html)은 여기에 position:sticky 를 걸었다.
     실제 데이터가 들어가면 상세 카드가 화면보다 길어지고, sticky 로 붙어 버리면
     카드 아래쪽(설문 응답·정정·파기 구역)에 스크롤로 닿을 수 없게 된다. */
  .dash__detail { align-self: start; }
}
.dash__bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.dash__bar .searchfield { flex: 1 1 240px; }

.section-title {
  font-size: var(--fs-200);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin: var(--space-6) 0 var(--space-3);
}
.sub-title {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

/* 지금 고른 줄 — 색만으로 알리지 않도록 왼쪽에 굵은 표시를 같이 준다 */
.table tbody tr[aria-current="true"] {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.strike { text-decoration: line-through; color: var(--text-muted); }

.ev-list { margin: 0; padding: 0; list-style: none; }
.ev-list li {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-200);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* 판정 근거 접기 */
.ev-summary {
  cursor: pointer;
  font-size: var(--fs-300);
  color: var(--text-muted);
}

/* 파기 구역 — 되돌릴 수 없는 동작은 다른 버튼들과 확실히 떨어뜨려 둔다.
   상세 카드 맨 아래, 파선으로 끊어서 "여기서부터는 다른 종류의 일"임을 보인다. */
.danger-zone {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-w-strong) dashed var(--danger-border);
}


/* ==========================================================================
   03 관장용 설문
   ========================================================================== */

/* 설문의 진행 레일은 운영자 화면의 경고 띠와 다르다. 조용한 흰 띠다. */
.rail--survey {
  background: var(--bg-surface);
  color: var(--text);
  border-bottom: var(--border-w) solid var(--border);
  padding-block: var(--space-3);
  display: block;
}
.rail__inner {
  width: 100%;
  max-width: var(--container-form);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .rail__inner { padding-inline: var(--space-6); }
}

/* 하단 고정 바의 "왜 못 누르는지" 한 줄. 비활성 버튼은 이유 없이 두지 않는다. */
.sticky-bar__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-200);
  color: var(--text-muted);
  text-align: center;
}

/* 완료 화면 — 가운데 정렬. 실패 상자(.submit-error)와 닮은 구석이 없어야 한다. */
.done { text-align: center; }
.done__mark { font-size: var(--fs-900); line-height: 1; }
.done__title { font-size: var(--fs-700); margin: var(--space-4) 0 var(--space-2); }
.done__no { font-size: var(--fs-600); }

/* 첫 화면 골격 */
.boot { padding-block: var(--space-8); }

/* 지도진 단수 경고 — 붉게 보이되 입력을 막지는 않는다 */
.warn-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--danger);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* 설문 본문 여백 */
.survey-main { padding-block: var(--space-5) var(--space-8); }

/* 설문 머리 아래 안내 */
.page-head--compact { padding-block: var(--space-5); }
.page-head--compact h1 { font-size: var(--fs-600); }

/* 운영자 본문 여백 */
.app-main { padding-block: var(--space-5) var(--space-16); }

/* 레일 오른쪽 조작 묶음 */
.rail__actions { gap: var(--space-2); }

/* 자바스크립트가 꺼져 있을 때 안내 */
.noscript-wrap { padding-block: var(--space-8); }


/* ==========================================================================
   04 보조 클래스 (style 속성을 없애기 위한 최소 묶음)
   --------------------------------------------------------------------------
   간격은 되도록 .stack / .form-section__body 같은 컨테이너가 처리한다.
   그걸로 안 되는 자리에만 아래를 쓴다.
   ========================================================================== */

.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-ml-2 { margin-left: var(--space-2); }

/* 배지·표의 메타 크기. 문장에는 쓰지 않는다(design.md 3-3). */
.u-note { font-size: var(--fs-200); }
/* 날짜 "9/19(토)" 가 괄호 앞에서 접히지 않게(관장 전달 표) */
.u-nowrap { white-space: nowrap; }

.u-left { text-align: left; }
.u-center-x { justify-content: center; }
.u-grow { flex: 1 1 0; }

/* 폭이 내용에 맞는 드롭다운 (정렬·보관기간 선택) */
.u-w-auto { width: auto; min-width: 150px; }

/* 목록의 점수 칸 골격 */
.u-skel-cell { width: 2.5em; display: inline-block; }

/* 골격 줄 폭 — 첫 화면에 무엇이 올지 미리 보이게 */
.u-w-90 { width: 90%; }
.u-w-70 { width: 70%; }

/* 화면 밖 임시 요소 (클립보드 대체 경로) */
.u-offscreen {
  position: fixed;
  top: -1000px;
  left: 0;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   05 2차 화면 보조 (2·3단계 — design.md 7~12절)
   --------------------------------------------------------------------------
   컴포넌트(components.css 17~28절)는 디자이너 것이라 건드리지 않았다.
   화면을 조립하며 필요해진 자리 맞춤만 여기 둔다.
   ========================================================================== */

/* 원문 확인 카드의 "어떻게 확인했나요" 칸 — 버튼 줄 위에 한 줄을 통째로 쓴다 */
.quote-check__note {
  flex-basis: 100%;
  margin: 0 0 var(--space-2);
}

/* 검토 화면 — 목록·상세 대신 넓은 작업 화면을 띄운다 */
#review-area { padding-top: var(--space-2); }

/* 목록 한 줄의 할 일 배지 — 도장명·메타 아래 한 줄 */
.list-row__task {
  display: inline-flex;
  margin-top: var(--space-2);
}
/* 할 일 배지가 둘 이상일 때(원문 확인 + 미업로드 등) 붙지 않게 */
.list-row__task + .list-row__task { margin-left: var(--space-2); }


/* ==========================================================================
   06 사진 방식 A/B (api.md 10-11 — 운영자 결정 2026-09-20)
   --------------------------------------------------------------------------
   A. 글감 주도 — 원고의 사진 자리마다 영어 프롬프트가 있다. 운영자가 그걸 복사해
      Gemini/Flow 에 넣고, 만든 그림을 그 자리에 올린다.
   B. 사진 주도 — 관장님 사진 + 한 줄 설명을 먼저 모아 둔다.

   ⚠️ 미리보기 그림은 **작게** 둔다(--thumb-h). 운영자 화면에서 사진이 크면
      한 자리 확인하는 데 스크롤을 몇 번씩 해야 한다. 크게 보려면 새 탭으로 연다.
   ========================================================================== */

/* ── 미리보기 틀 ─────────────────────────────────────────────────────────── */
.thumb {
  display: block;
  margin: 0;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  overflow: hidden;
}
.thumb__img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: cover;
  background: var(--bg-inset);
}
/* 아직 아무것도 안 올린 자리 — 숨기지 않는다. 빈 자리도 자리다 */
.thumb--empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: var(--space-3);
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-size: var(--fs-300);
  text-align: center;
}

/* ── 참고 이미지 두 자리 (api.md 10-12) ──────────────────────────────────────
   관장 아바타 · 도장 실내. 자리는 둘뿐이라 넓은 화면에서 **나란히** 둔다.
   폰(375px)에서는 한 줄씩 내려온다 — 한 자리에 미리보기·버튼 세 개가 들어간다. */
.ref-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .ref-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ref-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
/* 비어 있는 자리는 할 일이 남은 자리다 — 사진 자리(.slot-card)와 같은 줄무늬를 쓴다 */
.ref-card[data-state="empty"] { box-shadow: inset 3px 0 0 var(--pending); }
.ref-card[data-state="filled"] { box-shadow: inset 3px 0 0 var(--ok); }
.ref-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}
.ref-card__name {
  font-size: var(--fs-400);
  font-weight: var(--fw-heavy);
  color: var(--text-strong);
}

/* ── A 방식 — 원고의 사진 자리 목록 ──────────────────────────────────────── */
.slot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.slot-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
/* 아직 그림이 없는 자리는 왼쪽에 줄을 그어 눈에 띄게 — 할 일이 남은 자리다 */
.slot-card[data-state="empty"] { box-shadow: inset 3px 0 0 var(--pending); }
.slot-card[data-state="filled"] { box-shadow: inset 3px 0 0 var(--ok); }
.slot-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}
.slot-card__no {
  flex: 0 0 auto;
  font-size: var(--fs-400);
  font-weight: var(--fw-heavy);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.slot-card__guide {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--text);
  line-height: var(--lh-snug);
}
.slot-card__grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) {
  .slot-card__grid { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
}
.slot-card__main { display: grid; gap: var(--space-3); min-width: 0; }

/* 영어 프롬프트 전문 — 줄바꿈을 그대로 살린다. 운영자가 통째로 복사해 붙인다 */
.prompt-en {
  margin: 0;
  padding: var(--space-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── B 방식 — 사진함 ─────────────────────────────────────────────────────── */
/* 끌어다 놓는 칸. 여러 장을 한꺼번에 올린다 — 설명은 올린 뒤 목록에서 적는다. */
.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: var(--border-w) dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  text-align: center;
}
/* 파일을 끌고 들어온 동안 — 여기에 놓으면 된다는 것을 보여 준다 */
.dropzone[data-state="over"] {
  border-color: var(--accent);
  border-style: solid;
  background: var(--bg-selected);
}
/* 동의가 없거나 막힌 상태 — 버튼이 잠겨 있다는 것을 칸 전체로 알린다 */
.dropzone[data-state="off"] {
  opacity: 0.6;
  background: var(--bg-inset);
}
.dropzone__title {
  margin: 0;
  font-weight: var(--fw-heavy);
}
.dropzone__sub {
  margin: 0;
  font-size: var(--fs-300);
  color: var(--text-muted);
}
.photo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .photo-list { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}
.photo-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
/* 설명이 비면 원고가 이 사진을 못 쓴다 — 빨간 줄로 세워 둔다 */
.photo-card[data-state="no-note"] { box-shadow: inset 3px 0 0 var(--danger); }
.photo-card__no {
  font-size: var(--fs-300);
  font-weight: var(--fw-heavy);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.photo-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* 검토 화면 아래 — 사진 자리·그림 프롬프트.
   ⚠️ `.review` 격자 **밖**의 형제다. 격자 안에 넣으면 sticky 인 `.review__side` 가
      1,024px 이상에서 이 칸 위로 겹쳐 올라온다(실측). */
.review__slots {
  min-width: 0;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}