/* 롱폼워커 — 화면 전체 스타일
 *
 * [색] 검정 바탕 · 흰 글자 · **노랑 하나**로 강조합니다.
 * 강조색이 둘 이상이면 어디를 눌러야 하는지 알 수 없게 됩니다. 그래서
 * "지금 누를 것" 만 노랑이고, 나머지는 흰색과 회색입니다. 성공·경고·오류는
 * 뜻이 있는 색이라 남겨 두되(초록·주황·빨강) 채도를 낮춰 노랑을 이기지 않게 합니다.
 *
 * [노랑 위의 글자는 검정입니다]
 * 밝은 노랑에 흰 글자를 얹으면 읽히지 않습니다. 노랑 바탕에 올라가는 글자는
 * 전부 `--ink` 를 씁니다 — 버튼·배지·단계 칩·아바타가 모두 같은 규칙입니다.
 *
 * [레이아웃] 위쪽 가로 막대(로고·메뉴·계정) + 가운데 정렬 본문.
 * 왼쪽 세로 사이드바를 쓰던 때는 본문이 화면 오른쪽으로 밀려 넓은 모니터에서
 * 시선이 계속 왼쪽 끝과 오른쪽 끝을 오갔습니다. 껍데기(shell.js)는 그대로 두고
 * **여기서만** 가로로 눕힙니다 — 항목·순서·자리는 바뀌지 않습니다.
 */

:root {
  --bg: #0f1013;
  --bg2: #17181d;
  --bg3: #202329;
  --line: #2c2f38;
  --line2: #3a3e49;
  --text: #f2f4f7;
  --muted: #99a1b0;
  /* 노랑 한 가지. `--accent` 는 글자·테두리용(밝음), `--accent2` 는 바탕용. */
  --accent: #ffcf4a;
  --accent2: #f5bd1f;
  /* 노랑 바탕 위의 글자색. 흰색을 쓰면 안 읽힙니다. */
  --ink: #16181c;
  --ok: #4ec98a;
  --warn: #eda45c;
  --err: #f06d6d;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Malgun Gothic", "맑은 고딕", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ───────────────────────── 옛 상단바 (지금은 안 씁니다 — 껍데기가 대신합니다) */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 16px; display: flex; align-items: baseline; gap: 7px; }
.brand-en {
  font-size: 11px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.03em; text-transform: none;
}
.project-picker { display: flex; align-items: center; gap: 8px; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ───────────────────────── 레이아웃 (옛 세로 단계 목록 — 남아 있는 규칙만) */
.layout { display: flex; align-items: flex-start; }
.content { flex: 1; padding: 22px 26px 80px; min-width: 0; max-width: 1400px; }

.step { display: none; }
.step.active { display: block; }
.step h2 {
  margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
}
.step h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.step h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; }

/* 단계 제목 아래의 한 줄 설명. h2 바로 다음 문단만 크게 씁니다. */
.step > h2 + .lead { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; }

/* ───────────────────────── 요소 */
.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 12px; }
.hint.warn { color: var(--warn); }
.muted { color: var(--muted); }

/* 내 작업 줄 — 어느 작업이 칸을 차지했는지. */
.job-queue {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 12px;
}
.job-queue .hint { margin: 0 0 6px; }
.queue-row { padding: 4px 0; font-size: 13px; }
.queue-row + .queue-row { border-top: 1px solid var(--line); }
.sub { color: var(--muted); font-weight: 400; font-size: 12px; }
.spacer { flex: 1; }
.hidden { display: none !important; }

.row { display: flex; align-items: center; }
.row.gap { gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

textarea, input[type=text], input[type=number], input[type=password], input[type=email], select {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font-family: inherit; font-size: 13px;
}
textarea { width: 100%; resize: vertical; line-height: 1.7; }
textarea:focus, input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 207, 74, .16);
}
input[type=color] {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 7px;
  width: 46px; height: 32px; padding: 2px;
}
input[type=range] { accent-color: var(--accent); }
label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
label.check input[type=checkbox] { accent-color: var(--accent); }

.btn {
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--line2); border-radius: 9px;
  padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 13px;
  font-weight: 600; transition: border-color .12s, background .12s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
/* 지금 눌러야 하는 버튼 — 화면에서 유일하게 노랑으로 채웁니다. */
.btn.primary {
  background: var(--accent2); border-color: var(--accent2); color: var(--ink); font-weight: 700;
}
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* [한 화면에 채워진 노랑은 하나입니다]
 * 작은 버튼까지 노랑으로 채우면 ⑤ 처럼 버튼이 스무 개인 화면이 온통 노랑이 되고,
 * 그러면 "지금 눌러야 하는 것" 이 어디인지가 도로 안 보입니다. 작은 것은 **테두리만**
 * 노랑으로 두고, 채우는 것은 그 단계의 큰 버튼 하나에만 남깁니다. */
.btn.small.primary {
  background: transparent; color: var(--accent); border-color: rgba(255, 207, 74, .5);
}
.btn.small.primary:hover:not(:disabled) {
  background: rgba(255, 207, 74, .12); color: var(--accent); border-color: var(--accent);
}
/* 확인창의 실행 버튼은 예외입니다 — 그 창에서 눌러야 하는 것이 그것뿐입니다. */
.modal-foot .btn.small.primary {
  background: var(--accent2); border-color: var(--accent2); color: var(--ink);
}
.modal-foot .btn.small.primary:hover:not(:disabled) { background: var(--accent); color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: 12.5px; }
.btn.danger { color: var(--err); }
.btn.danger:hover:not(:disabled) { border-color: var(--err); color: var(--err); }
a.btn { display: inline-block; text-decoration: none; text-align: center; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--bg3); color: var(--muted); font-size: 12px; border: 1px solid var(--line);
}
.badge.ok { color: var(--ok); border-color: #2f5c46; background: #16281f; }
.badge.err { color: var(--err); border-color: #5f3030; background: #2a1a1a; }
.badge.warn { color: var(--warn); border-color: #5b4429; background: #2a2119; }
/* 「필수」처럼 지금 해야 할 일을 가리키는 배지 — 노랑입니다. */
.badge.must { color: var(--ink); background: var(--accent2); border-color: var(--accent2); font-weight: 700; }
.phase-tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: #2a2119; color: var(--warn); border: 1px solid #5b4429; vertical-align: middle;
}

.counter { color: var(--muted); font-size: 12.5px; }
.counter.good { color: var(--ok); }
.counter.warn { color: var(--warn); }
.counter.bad { color: var(--err); }

.panel {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 16px;
}
.subpanel { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }

.notice {
  background: #17202a; border: 1px solid #27333f; color: #c3d2e0;
  border-radius: var(--radius); padding: 12px 15px; margin: 10px 0 14px; font-size: 13px;
}
.notice.small { font-size: 12.5px; }
.notice.warn { background: #2a2119; border-color: #4d3d25; color: #e8cfa4; }

/* [반드시 해야 하는 것] 경고(.warn)보다 한 단계 위입니다.
   `.warn` 은 "알아 두세요", `.must` 는 "이걸 안 하면 결과물이 틀립니다".
   색만으로는 약해서 왼쪽 굵은 띠를 함께 씁니다. */
.notice.must {
  background: #2e1e1c; border-color: #7a2e2a; color: #ffd9d4;
  border-left: 5px solid #e05a4e;
}
.notice.must b { color: #fff; display: block; margin-bottom: 4px; font-size: 14px; }
.notice.must .hint { color: #f0b7b0; margin: 6px 0 0; }

/* 다음으로 넘어가기 전에 눌러야 하는 버튼 — 눈에 먼저 들어와야 합니다. */
.btn.step-cta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.btn.step-cta.must {
  border-color: #e05a4e;
  box-shadow: 0 0 0 3px rgba(224, 90, 78, .28);
  animation: cta-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(224, 90, 78, .28); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 90, 78, .12); }
}
/* 화면 움직임에 민감한 분에게는 깜빡임을 끄고 테두리만 남깁니다. */
@media (prefers-reduced-motion: reduce) {
  .btn.step-cta.must { animation: none; }
}

.result-box { margin-top: 14px; font-size: 13px; }
.preview {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; max-height: 380px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; font-size: 12px; color: #c6cedb;
  font-family: Consolas, "Courier New", monospace;
}

.placeholder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ph-card {
  background: var(--bg2); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 12px; opacity: .75;
}
.ph-card b { display: block; margin-bottom: 4px; }
.ph-card span { color: var(--muted); font-size: 12px; }

/* ───────────────────────── 진행 */
.progress-box {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; margin: 12px 0;
}
.bar { height: 7px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 9px 0; }
.bar > div { height: 100%; background: var(--accent); transition: width .25s; }
.log {
  max-height: 170px; overflow-y: auto; font-size: 11.5px; color: var(--muted);
  font-family: Consolas, "Courier New", monospace; white-space: pre-wrap;
}

/* ───────────────────────── 장면 카드 (④ 요약 그리드 + 모달 상세)
 *
 * 넓은 화면에서 **4열 고정**입니다. auto-fill 로 두면 화면이 넓을수록 열이
 * 계속 늘어 카드가 잘아집니다(5열까지 갔습니다). 열 수가 고정이라야 카드
 * 크기가 예측되고, 접힘 개수도 "열 수 × 3행" 으로 딱 떨어집니다.
 */
/* [칸이 장면마다 달라 보이던 것]
 * `align-items: start` 라 카드가 각자 내용만큼만 커졌습니다. 자막이 한 줄인
 * 장면과 두 줄인 장면의 높이가 달라 격자가 들쭉날쭉했습니다. 늘려서 **한 행의
 * 카드 높이를 맞춥니다** — 카드 안의 줄 수도 아래에서 못박습니다. */
.scene-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 14px; align-items: stretch;
}
/* 좁아지면 2열 → 1열. 어느 단계에서도 **행이 반쯤 비지 않게** 접힘 개수를
   JS 가 실제 열 수에서 다시 셉니다(`applySceneCollapse`). */
@media (max-width: 1040px) { .scene-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .scene-list { grid-template-columns: minmax(0, 1fr); } }
.scene-card {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; transition: border-color .12s;
  display: flex; flex-direction: column;
}
.scene-card:hover { border-color: var(--accent); }
.scene-card.failed { border-color: #6b3232; }

/* 상세는 모달이 전담합니다 — 카드 안에서 펼치지 않습니다. */
.scene-detail-label {
  font-size: 11px; color: var(--muted); font-weight: 700;
  margin: 10px 0 4px;
}

/* 프롬프트 미리보기 — 회색 소자로 두어 자막과 구별합니다. */
.scene-prompt-peek {
  font-size: 12px; color: var(--muted);
  line-height: 1.55; min-height: calc(2 * 1.55em); margin-top: auto;
}
.scene-prompt-peek.empty { font-style: italic; opacity: .75; }

.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 머리 한 줄: 장면 번호 · 섹션 … (오른쪽 끝) 프롬프트 배지.
   **줄바꿈하지 않습니다** — 예전에는 시간 글자가 긴 장면에서만 배지가 다음
   줄로 밀려서 카드마다 줄 수가 달랐습니다. 시간은 아래 자기 줄로 내렸습니다. */
.scene-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; margin-bottom: 4px;
}
.scene-no { font-weight: 700; white-space: nowrap; }
.scene-head .sec-badge, .scene-head .badge { flex: none; }
.scene-time {
  color: var(--muted); font-size: 12px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 자막·미리보기는 **두 줄 자리를 늘 차지합니다.** 한 줄짜리 장면 때문에
   카드가 짧아지면 격자가 도로 들쭉날쭉해집니다. */
.scene-sub {
  font-size: 13px; color: #d7dde5; margin-bottom: 8px;
  line-height: 1.55; min-height: calc(2 * 1.55em);
}
.scene-card textarea { font-size: 12.5px; }
.err-text { color: var(--err); font-size: 12px; margin-top: 6px; }

/* ───────────────────────── 이미지 그리드 */
.image-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin-top: 14px;
}
.img-card {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  position: relative;  /* 끌어다 놓기 덮개의 기준 */
}
.img-card.failed { border-color: #6b3232; }
.img-card.video-on { border-color: var(--accent); }
/* 파일을 끌고 카드 위에 왔을 때 — 어느 장면에 놓이는지 눈으로 보여 줍니다. */
.img-card.drop-over { border-color: var(--accent); }
.img-card.drop-over::after {
  content: "여기에 놓으면 이 장면에 올라갑니다";
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 12px; font-weight: 700; font-size: 13px; color: var(--text);
  background: rgba(255, 207, 74, 0.16);
  border: 2px dashed var(--accent); border-radius: var(--radius);
  pointer-events: none;  /* 덮개가 커서를 먹으면 dragleave 가 계속 터집니다 */
}
/* 올리는 중 — 어느 칸이 처리 중인지 보여 줍니다. */
.img-card.uploading { border-color: var(--accent); }
.img-card.uploading::after {
  content: "올리는 중…";
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--text);
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.img-thumb {
  aspect-ratio: 16 / 9; background: var(--bg); display: flex;
  align-items: center; justify-content: center; color: var(--muted); font-size: 12px;
  cursor: pointer; overflow: hidden;
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.img-thumb.has-video { cursor: default; border-bottom: 2px solid var(--accent); }
/* 되돌리기 확인창 — 지금 것과 이전 것을 나란히 놓고 눈으로 고릅니다. */
.prev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prev-box { min-width: 0; }
.prev-title { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.prev-box img, .prev-box video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; display: block;
}
.prev-name { font-size: 11.5px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.prev-empty {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
.inline-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.inline-label select { max-width: 280px; }
.img-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 8px; }
.img-body .scene-sub { margin: 0; font-size: 12.5px; }
.motion-box { border-top: 1px solid var(--line); padding-top: 8px; }
.motion-box textarea { font-size: 12px; }

/* ───────────────────────── ⑤ 그록 직접 만들기 안내
 *
 * API 로 영상화하면 장면마다 초당 요금이 붙습니다. 그록 웹은 이미 내고 있는
 * 월 구독 안에서 만드는 길이라 **편마다 더 나가는 돈이 없습니다.** 그 사실이
 * 화면에 없으면 사용자는 비싼 길만 보고 갑니다.
 */
.grok-card {
  background: linear-gradient(180deg, rgba(255, 207, 74, .09), rgba(255, 207, 74, .03));
  border: 1px solid rgba(255, 207, 74, .35);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
}
.grok-card h3 { margin: 0 0 4px; font-size: 15px; }
.grok-card .grok-lead { color: #f0e2bd; font-size: 13px; margin: 0 0 14px; }
.grok-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px;
}
@media (max-width: 860px) { .grok-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grok-step {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px;
}
/* 카드 제목만 줄을 차지합니다 — 설명문 안의 <b> 까지 블록으로 만들면
   「[이미지 저장] 과 [프롬프트 복사] 로」 같은 문장이 세 줄로 찢어집니다. */
.grok-step > b { display: block; font-size: 12.5px; margin: 7px 0 3px; }
.grok-step > span { color: var(--muted); font-size: 11.5px; line-height: 1.55; display: block; }
.grok-step > span b { color: var(--text); font-weight: 700; }
/* [명시도 때문에 숫자가 사라졌습니다]
 * `.grok-step > span`(0,1,1)이 `.grok-no`(0,1,0)를 이겨서, 번호 동그라미가
 * 설명문 색(회색)을 물려받아 노란 바탕 위에서 안 보였습니다. 같은 자리에서
 * 이기도록 선택자를 맞춥니다 — 색을 두 곳에서 정하면 늘 이런 일이 납니다. */
.grok-step > span.grok-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent2); color: var(--ink); font-size: 11.5px; font-weight: 800;
}

/* ───────────────────────── 3단계 음성 — 보이스 캐러셀 (2행 × 3열) */
.voice-carousel { display: flex; align-items: stretch; gap: 8px; }
.voice-arrow {
  flex: 0 0 34px; background: var(--bg3); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.voice-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.voice-arrow:disabled { opacity: .35; cursor: not-allowed; }

.voice-list {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 10px; padding: 2px;
}
/* 좁아지면 2열 → 1열. 한 쪽에 담는 수(6)는 그대로라 줄만 늘어납니다. */
@media (max-width: 1040px) { .voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .voice-list { grid-template-columns: minmax(0, 1fr); } }

.voice-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.voice-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--line2); border: none; cursor: pointer;
}
.voice-dot.on { background: var(--accent); }

.voice-card {
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 7px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.voice-card:hover { border-color: var(--accent); }
.voice-card.selected { border-color: var(--accent); background: #241f12; }
.voice-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voice-meta { color: var(--muted); font-size: 12px; line-height: 1.5; }

#audioResult audio { margin-bottom: 12px; width: 100%; }
#audioResult .kv { margin-bottom: 10px; }

/* ───────────────────────── 캐릭터 */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.char-card {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px; display: flex; flex-direction: column; gap: 8px;
}
.char-card.selected { border-color: var(--accent); }
.char-card img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #fff; border-radius: 8px;
}
.char-card .noimg {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 8px; color: var(--muted); font-size: 12px;
}
.char-name { font-weight: 700; }

/* ───────────────────────── 단계 하단 [이전 | 다음] */
.step-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.step-foot-gap { flex: 1; }
/* [다음]이 왜 회색인지 그 옆에서 말합니다 — 이유 없는 회색은 고장으로 읽힙니다. */
.step-foot-why { margin: 0 12px 0 auto; text-align: right; max-width: 620px; }
.step-foot .btn { min-width: 150px; }
.step-foot .btn:disabled { opacity: .38; cursor: not-allowed; }

/* 장면이 많은 목록의 [상세보기 / 접기] — 그리드 한 줄을 통째로 씁니다. */
.scene-toggle {
  display: block; margin: 12px auto 0; min-width: 200px;
  grid-column: 1 / -1; justify-self: center;
}

/* 보이스 즐겨찾기 별표 */
.starbtn {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--muted); padding: 2px 4px; border-radius: 6px;
}
.starbtn:hover { color: var(--accent); background: var(--bg); }
.starbtn.on { color: var(--accent); }

/* ───────────────────────── ② 스타일 카드
 *
 * 글로 "재패니메이션" 이라고 적어 두면 사용자는 뭐가 나올지 모릅니다.
 * 그 스타일로 실제 생성한 그림을 보여 주는 것이 곧 설명입니다.
 */
.style-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.style-card {
  position: relative; background: var(--bg3); border: 2px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.style-card:hover, .style-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.style-card:focus-visible { outline: none; }
.style-card.selected { border-color: var(--accent); }
.style-shot { width: 100%; aspect-ratio: 16 / 9; background: var(--bg); }
.style-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-shot .noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-align: center; padding: 0 10px;
}
.style-name { font-weight: 700; padding: 9px 11px 0; }
.style-blurb { color: var(--muted); font-size: 12px; padding: 2px 11px 11px; }
.style-badge {
  position: absolute; top: 8px; right: 8px; background: var(--accent2); color: var(--ink);
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}

/* ② 「이 스타일로 한 장 그려 보기」 결과 — 글이 아니라 그림으로 고릅니다. */
.style-preview-shot { margin: 14px 0 4px; max-width: 640px; }
.style-preview-shot img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
}
.style-preview-shot .hint { margin: 7px 0 0; }

/* ───────────────────────── 6단계 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.form-grid label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; }
.form-grid input[type=text], .form-grid input[type=number], .form-grid select { width: 120px; }

.sub-preview-wrap { margin: 16px 0; }
.sub-preview-stage {
  position: relative; aspect-ratio: 16/9; max-width: 560px;
  /* 그림이 없을 때의 폴백. `background-image` 를 JS 가 얹으면 이 위에 깔립니다. */
  background: linear-gradient(160deg, #3c4350, #23272f);
  border-radius: 10px; border: 1px solid var(--line); overflow: hidden;
}
/* 실제 장면 이미지를 깔았을 때 — 16:9 무대를 꽉 채웁니다. */
.sub-preview-stage.has-shot { background-size: cover; background-position: center; }
/* 바깥 상자는 **항상 자막 상자 폭 그대로** 입니다(좌우 여백은 JS 가 넣습니다).
   배경은 안쪽 .ink 가 답니다. */
.sub-preview-text {
  position: absolute; left: 0; right: 0; text-align: center;
  font-weight: 800; line-height: 1.3; word-break: keep-all; white-space: pre-line;
}
.sub-preview-text .ink {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.effect-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.effect-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
}
.effect-row .no { font-weight: 700; min-width: 32px; }
.effect-row .txt { flex: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-row select { padding: 4px 6px; font-size: 12px; }
.effect-row.video-on { opacity: .5; }

/* ───────────────────────── 4단계 섹션 설정 */
.timeline-wrap { margin: 6px 0 14px; }
.timeline-bar {
  position: relative; height: 42px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  cursor: crosshair; user-select: none;
}
.tl-seg {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #0d1117; font-weight: 700; overflow: hidden;
  border-right: 1px solid rgba(0,0,0,.35);
}
.tl-seg.hook { background: var(--accent2); }
.tl-seg.body { background: #454b57; color: #d9e2ee; }
.tl-seg.emphasis { background: #e0625c; color: #fff; }
.tl-sel {
  position: absolute; top: 0; bottom: 0; background: rgba(255, 207, 74, .35);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
  pointer-events: none;
}
.tl-scene-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.28); }
.timeline-ticks { position: relative; height: 16px; font-size: 10.5px; color: var(--muted); }
.timeline-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.sec-controls { display: flex; flex-direction: column; gap: 8px; }
.sec-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
}
.sec-row label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.sec-row .grow { flex: 1; min-width: 190px; }
.sec-row .muted { font-size: 12.5px; }
.sec-row input[type=range] { width: 110px; }
.sec-row .grow input[type=range] { width: 100%; min-width: 120px; }
.sec-row .val { color: var(--text); font-size: 12.5px; min-width: 42px; display: inline-block; }
.sec-chip {
  padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink);
  min-width: 46px; text-align: center;
}
.sec-chip.hook { background: var(--accent2); }
.sec-chip.body { background: #454b57; color: #d9e2ee; }
.sec-chip.emphasis { background: #e0625c; color: #fff; }

.emphasis-block { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.emphasis-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.emphasis-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-size: 12.5px;
}
.emphasis-item .rng { font-weight: 700; color: #f0b4b1; }
.emphasis-item .why { color: var(--muted); flex: 1; }
input.narrow { width: 86px; }

.estimate-box {
  margin: 14px 0 12px; padding: 12px 15px; border-radius: 10px;
  background: #17202a; border: 1px solid #27333f; color: #c3d2e0; font-size: 13px;
}
.estimate-box b { color: #fff; }
.estimate-box .cost { color: var(--accent); font-weight: 700; }

/* ③ 무음 기준값을 바꿨을 때의 영향 — 돈이 나가는 줄만 눈에 띄게 합니다. */
.impact-list { margin-top: 6px; }
.impact-row { padding: 2px 0; }
.impact-row b { color: #d9e2ee; }
.impact-row.cost b, .impact-row.cost span { color: var(--accent); }

.sec-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink);
}
.sec-badge.hook { background: var(--accent2); }
.sec-badge.body { background: #454b57; color: #d9e2ee; }
.sec-badge.emphasis { background: #e0625c; color: #fff; }
/* ⑤ 직접 올린 그림·영상 — 일괄 생성·변환이 건너뛰는 장면임을 눈으로 알립니다. */
.sec-badge.upload { background: #3fb68b; }

/* ───────────────────────── 모달 / 토스트 */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-card {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 16px;
  width: min(900px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
/* 모달이 열린 동안 **배경이 따라 스크롤되면** 닫았을 때 엉뚱한 자리에 와
   있습니다. 딤(rgba .6)은 그대로 두어 뒤 화면이 보이게 합니다. */
body.modal-open { overflow: hidden; }
.modal-body .form-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--line2); border-radius: 10px;
  padding: 11px 18px; z-index: 300; max-width: 80vw; box-shadow: var(--shadow);
  /* 서버 오류는 여러 줄로 옵니다(무엇이·왜·어떻게 하라). 줄바꿈을 살립니다. */
  white-space: pre-line; text-align: left; line-height: 1.5;
}
.toast.ok { border-color: #2f5c46; }
.toast.err { border-color: #5f3030; }

/* [오류는 한가운데서 기다립니다]
 * 아래 토스트는 사용자가 안 보고 있는 자리에서 떴다 사라집니다 — 「아무 일도
 * 안 일어났다」로 읽히고 같은 버튼을 또 누릅니다. 오류만은 화면 한가운데에
 * 어둡게 깐 바탕 위로 띄우고, **스스로 사라지지 않습니다.** 닫는 것은
 * 읽었다는 뜻이라 사용자가 합니다. */
.alert-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0, 0, 0, .58);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.alert {
  background: var(--bg2); border: 1px solid #7a2e2a; border-radius: 14px;
  box-shadow: var(--shadow); max-width: 520px; width: 100%;
  border-top: 4px solid #e05a4e;
}
.alert-head {
  padding: 16px 20px 0; font-size: 16px; font-weight: 700; color: #ffd9d4;
}
.alert-body {
  padding: 10px 20px 4px; color: var(--text); font-size: 13.5px; line-height: 1.65;
  /* 서버 오류는 여러 줄로 옵니다(무엇이·왜·어떻게 하라). 줄바꿈을 살립니다. */
  white-space: pre-line; max-height: 60vh; overflow: auto;
}
.alert-foot { padding: 14px 20px 18px; display: flex; justify-content: flex-end; }

/* ③ 발음 검수 ---------------------------------------------------------
 *
 * 이제 **음성 생성의 첫 걸음**입니다(따로 누르는 버튼이 아닙니다).
 * [음성 생성] 을 누르면 이 창이 먼저 뜨고, 바꿔 읽을 곳을 확인한 뒤
 * [이대로 생성] 으로 넘어갑니다.
 */
/* 「이런 자리를 눈여겨보세요」 — 모델이 잘 읽어도 사람이 봐야 하는 것들. */
.pron-watch { margin: 10px 0 4px; }
.pron-watch b { color: var(--text); }
.pron-watch ul { margin: 8px 0 6px; padding-left: 20px; line-height: 1.9; }
.pron-watch code {
  background: var(--bg3); padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
}
.pron-watch .hint { margin: 6px 0 0; display: block; }

.pron-list { max-height: 460px; overflow-y: auto; margin-top: 10px; }
.pron-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 10px;
}
.pron-row:hover { border-color: var(--line2); }
.pron-row .no { color: var(--muted); font-size: 12px; min-width: 26px; padding-top: 2px; }
.pron-row .body { flex: 1; min-width: 0; }
.pron-row .orig { line-height: 1.7; word-break: keep-all; }
/* 바꿔 읽을 조각 — 눈에 바로 띄어야 합니다 */
.pron-hit {
  color: #ff8a8a; background: rgba(255, 90, 90, 0.13);
  border-bottom: 1px dashed #ff8a8a; border-radius: 3px; padding: 0 2px;
}
.pron-legend { color: #ff8a8a; }
.pron-row .says {
  margin-top: 4px; font-size: 12.5px; color: var(--muted);
  line-height: 1.6; word-break: keep-all;
}
.pron-row .says b { color: var(--accent); font-weight: 700; }
.pron-row.changed { border-color: rgba(255, 138, 138, .35); }
.pron-edit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pron-edit-table td { padding: 6px; border-bottom: 1px solid var(--line); }
.pron-edit-table td:first-child { color: var(--muted); white-space: nowrap; }
.pron-edit-table input[type="text"] { width: 100%; }

table.kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.kv td, table.kv th { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; }
table.kv td:first-child { color: var(--muted); width: 45%; }

/* ══════════════════════════ 로그인 · 목록 · 설정 ══════════════════════ */

/* 로그인 화면 */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  width: 100%; max-width: 400px; padding: 34px 30px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
}
.auth-brand { font-size: 21px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.auth-tagline { color: var(--muted); font-size: 13px; margin: 8px 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.auth-form input { width: 100%; }
.btn.wide { width: 100%; justify-content: center; margin-top: 6px; }
.auth-links { display: flex; gap: 8px; justify-content: center; font-size: 12.5px; margin-top: 4px; }
.auth-links a { color: var(--muted); text-decoration: none; }
.auth-links a:hover { color: var(--text); }
.auth-links .dot { color: var(--line2); }
.auth-foot { margin-top: 14px; line-height: 1.7; }

/* 목록 화면 (옛 카드 그리드 — 남아 있는 규칙만) */
.list-page { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }
.list-page h1 { font-size: 20px; margin: 0 0 4px; }
.project-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.project-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.project-card .thumb {
  aspect-ratio: 16 / 9; background: var(--bg3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-icon { font-size: 34px; opacity: 0.5; }
.card-body { padding: 11px 12px 8px; flex: 1; }
.card-body h2 {
  font-size: 14.5px; margin: 0 0 7px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.card-step { display: flex; gap: 7px; align-items: center; font-size: 12px; margin-bottom: 5px; }
.card-meta { font-size: 12px; color: var(--muted); }
.card-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
.card-actions .btn { flex: 1; justify-content: center; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--line); font-size: 11.5px;
}
.pill.ok { border-color: #2f5c46; color: #7fd6a6; }
.pill.bad { border-color: #5f3030; color: #ff8a8a; }
.empty-state { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty-state .big { font-size: 15px; margin-bottom: 8px; color: var(--text); }

/* 설정 화면 */
.key-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.key-row {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 9px; background: var(--bg3);
}
.key-row.set { border-color: #2f5c46; }
.key-head { font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.key-state { font-size: 12.5px; }
.key-state code { background: var(--bg); padding: 2px 7px; border-radius: 5px; }
.key-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.key-controls input { flex: 1; min-width: 200px; }
.override-form {
  display: grid; gap: 12px; margin: 12px 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.override-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.override-label { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   전역 껍데기 — 위쪽 가로 막대 + 가운데 정렬 본문
   (`shell.js` 가 그리는 마크업은 그대로입니다. 눕히는 일만 여기서 합니다.)
   ═══════════════════════════════════════════════════════════════════════════ */

.app { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; }

/* 이름은 `sidebar` 지만 자리는 **위쪽 가로 막대**입니다. */
.sidebar {
  width: 100%; flex: none; height: auto;
  background: rgba(23, 24, 29, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 10px 24px;
  position: sticky; top: 0; z-index: 60;
}

.side-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px 0 0; text-decoration: none; color: var(--text);
}
.side-logo {
  font-size: 15px; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.side-brand-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: 15px; }
.side-brand-text b {
  font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em;
}

.side-nav { display: flex; flex-direction: row; gap: 4px; }
.side-item {
  display: flex; align-items: center; gap: 7px;
  text-align: left; white-space: nowrap;
  padding: 8px 13px;
  background: transparent; border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted); font-size: 13px; font-family: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.side-item:hover { background: var(--bg3); color: var(--text); }
.side-item.active { background: var(--bg3); color: var(--accent); border-color: var(--line2); }
.side-icon { width: 16px; text-align: center; font-size: 13px; }
.side-action { color: var(--text); }

/* 아직 안 본 공지가 있을 때 메뉴에 붙는 점. 색이 아니라 **있고 없음**으로
   말합니다 — 늘 켜져 있으면 아무도 안 보게 되므로, 읽으면 사라집니다. */
.side-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 7px; margin-left: -2px;
}

/* Phase B(결제·사용량 위젯) 자리. 가로 막대에서는 이 칸이 늘어나 계정 영역을
   오른쪽 끝으로 밀어 줍니다 — 세로였을 때 높이를 차지하던 것과 같은 몫입니다. */
.side-slot { flex: 1; min-height: 0; }

.side-foot { display: flex; align-items: center; gap: 10px; border-top: none; padding-top: 0; }
/* 계정 알약 — 아바타·이름·배지가 **한 줄**입니다.
 *
 * 예전에는 세로 두 줄(이름 줄 + 들여쓴 배지 줄)이었습니다. 계정 영역만
 * 두 줄이라 막대가 두꺼워졌고, 34px 들여쓴 배지가 이름에 매달린 것처럼
 * 보였습니다. 테두리로 묶어 «한 덩어리»로 만들면 옆의 [로그아웃] 과도
 * 구분됩니다 — 예전에는 둘이 그냥 나란히 떠 있었습니다. */
.side-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg2);
}
.side-avatar {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; background: var(--accent2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.side-email {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 150px;
  flex: 0 1 auto; min-width: 0;
}
/* 운영자 표시. 등급 배지를 **대신하지 않고** 옆에 붙습니다 — 운영자도 자기
   이용권이 언제 끝나는지 막대에서 보여야 합니다. 채우지 않고 글자만 남겨
   등급 배지보다 뒤로 물러납니다. */
.side-admin {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); padding-left: 2px;
}
.side-logout {
  padding: 7px 13px; white-space: nowrap;
  background: transparent; border: 1px solid var(--line2);
  border-radius: 999px; color: var(--muted);
  font-size: 12.5px; font-family: inherit; cursor: pointer; font-weight: 600;
}
.side-logout:hover { border-color: var(--accent); color: var(--accent); }

/* 등급 배지 — 이름 **바로 옆**입니다. 내용 크기만큼만 차지합니다(늘어나면
   입력창처럼 보입니다). 「멤버십 D-30」처럼 회원이 산 것의 이름으로 적습니다. */
.side-plan {
  flex: none; width: fit-content; max-width: 100%;
  padding: 2px 9px; white-space: nowrap;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--bg3); color: var(--muted); border: 1px solid var(--line);
}
.side-plan.ok { color: var(--ok); border-color: #2f5c46; background: #16281f; }
.side-plan.warn { color: var(--warn); border-color: #5b4429; background: #2a2119; }

/* 막대 오른쪽 끝의 [내 스튜디오 →]. `/` 는 어느 때나 소개 화면이라, 자기
   작업물로 들어가는 문이 화면마다 다른 자리에 있으면 안 됩니다. 이 막대에서
   유일하게 노랑으로 채워지는 것이라 눈이 여기서 멈춥니다. */
.side-cta {
  margin-left: 12px; flex: none; white-space: nowrap;
  padding: 8px 15px; font-size: 13px; text-decoration: none;
}

@media (max-width: 720px) {
  /* 좁은 화면에서는 메뉴 글자를 접고 아이콘만 남깁니다 — [내 스튜디오] 가
     줄바꿈으로 밀려 내려가면 어디로 가야 할지가 안 보입니다. */
  .sidebar { padding: 10px 14px; gap: 2px; }
  .side-brand { padding-right: 8px; }
  .side-brand-text { display: none; }
  .side-item span:not(.side-icon) { display: none; }
  .side-item { padding: 8px 10px; }
  .side-email, .side-plan { display: none; }
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-inner {
  flex: 1; width: 100%; max-width: 1000px; margin: 0 auto;
  padding: 34px 24px 96px;
}
.main-inner h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.main-inner h4 { margin: 16px 0 6px; }

/* ───────────────────────── 홈 — 새 영상 만들기 카드 */
.home-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 26px; margin-bottom: 30px;
  background: linear-gradient(135deg, rgba(255, 207, 74, .12), rgba(255, 207, 74, .03));
  border: 1px solid rgba(255, 207, 74, .3); border-radius: 16px;
  cursor: pointer; width: 100%; text-align: left;
  color: var(--text); font-family: inherit;
}
.home-hero:hover { border-color: var(--accent); }
.home-hero-icon {
  width: 54px; height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--accent2); border-radius: 15px;
}
.home-hero-text { flex: 1; min-width: 0; }
.home-hero-text b { display: block; font-size: 18px; margin-bottom: 4px; }
.home-hero-text span { color: var(--muted); font-size: 12.5px; }
.home-hero-go { color: var(--accent); font-size: 22px; }

.home-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 12px;
}
.home-section-head h2 { font-size: 15px; margin: 0; }

/* ───────────────────────── 내 스튜디오 (홈)
 *
 * 제목 줄 · 이어서 작업하기 · 내 채널. 예전 홈은 '새 영상 만들기' 큰 카드가
 * 맨 위였는데, 돌아온 사람이 열 번 중 아홉 번 하는 일은 **하던 것 잇기**라
 * 그 자리를 [이어서 작업하기] 에 내줬습니다. 새로 만들기는 제목 줄의 버튼입니다.
 */
.studio-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px;
}
.studio-head h1 { margin: 0; font-size: 21px; }

/* 이어서 작업할 한 건은 목록의 다른 줄보다 도드라져야 합니다 — 여기서
   눈이 멈추고 바로 [이어하기] 로 가야 합니다. */
.proj-row-resume {
  border-color: rgba(255, 207, 74, .34);
  background: linear-gradient(135deg, rgba(255, 207, 74, .07), transparent 60%);
}

/* 채널 칸 — 상위 폴더. 누르면 그 채널 영상만 걸러 보여 줍니다(지우는 것이
   아니라 거르는 것입니다). ⚙ 는 채널 설정입니다. */
.channel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; margin-bottom: 30px;
}
.channel-card {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.channel-card:hover { border-color: var(--line2); }
/* 지금 보고 있는 채널. 목록이 걸러져 있다는 사실이 **눈에 보여야** 합니다 —
   안 그러면 영상이 사라진 줄 압니다. */
.channel-card.on { border-color: var(--accent2); background: rgba(255, 207, 74, .07); }
.channel-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font-family: inherit; text-align: left;
}
.channel-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); font-size: 16px;
}
.channel-card.on .channel-icon { background: var(--accent2); color: var(--ink); }
.channel-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.channel-text b {
  font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-text .muted { font-size: 12px; }
.channel-gear {
  flex: 0 0 40px; background: transparent; border: 0; border-left: 1px solid var(--line);
  color: var(--muted); cursor: pointer; font-size: 14px; font-family: inherit;
}
.channel-gear:hover { color: var(--accent); background: var(--bg3); }
.channel-add {
  background: transparent; border: 1px dashed var(--line2); border-radius: 12px;
  color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px;
  padding: 13px 14px; font-weight: 600;
}
.channel-add:hover { border-color: var(--accent); color: var(--accent); }

/* 창 안에서 한 줄에 하나씩 놓는 입력. `.form-grid` 는 두 칸이라 설정 창처럼
   설명이 붙는 자리에는 안 맞습니다. */
.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.form-row input, .form-row select { width: 100%; }
.form-row .hint { margin: 0; }

/* ───────────────────────── 프로젝트 화면 머리 (가운데 한 줄) */
.proj-head {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 18px 24px 4px;
}
.proj-title { min-width: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.proj-title h1 {
  font-size: 15px; margin: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-title .muted { font-size: 12px; }
/* 「채널 › 제목」 — 어느 채널의 영상인지 제목 앞에 답니다. */
.pill-link { text-decoration: none; cursor: pointer; }
.pill-link:hover { border-color: var(--accent); color: var(--accent); }
.crumb-sep { color: var(--muted); font-size: 13px; }

/* 카드에 붙는 소속 채널 — 단계 배지보다 조용해야 합니다(상태가 아니라 이름표). */
.pill-soft { color: var(--muted); border-color: var(--line); background: transparent; }

/* 채널 정리 줄 + 카드 왼쪽 체크칸.
   채널은 나중에 생긴 개념이라 쓰던 사람의 영상은 전부 '채널 없음' 으로
   시작합니다. 스무 개를 하나씩 옮기게 하면 아무도 안 옮깁니다. */
.bulk-bar {
  align-items: center; margin: 0 0 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg2);
}
.bulk-bar .hint { margin: 0; }
.proj-pick { flex: none; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.proj-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ───────────────────────── 상단 가로 진행 바
 *
 * 참고 화면처럼 **가운데** 에 알약 모양으로 늘어놓습니다. 지금 단계만 노랑으로
 * 채우고, 끝난 단계는 체크만 답니다 — 색이 셋 이상이면 어디까지 왔는지가
 * 아니라 색을 읽게 됩니다.
 */
.stepbar {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 24px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 49px; z-index: 40;
  background: var(--bg);
}
.stepnode {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 7px 13px; flex: 0 0 auto;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
}
.stepnode:hover { color: var(--text); background: var(--bg2); }
/* 아직 못 가는 단계 — 흐리게 두되 **누를 수는 있습니다**. 누르면 왜 못 가는지
   말해 줍니다. 아예 못 누르게 하면 이유를 물어볼 데가 없어집니다. */
.stepnode.locked { opacity: .42; }
.stepnode.locked:hover { opacity: .62; }
.stepnode .dot {
  width: 21px; height: 21px; flex: 0 0 21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line2);
  background: var(--bg2); font-size: 11.5px; font-weight: 700;
}
.stepnode .lbl { font-weight: 700; }
.stepnode .st { font-size: 11px; color: var(--muted); }

.stepnode.done { color: var(--text); }
.stepnode.done .dot { background: #2a2412; border-color: #4d3f16; color: var(--accent); }
.stepnode.done .st { color: var(--muted); }
/* 지금 단계 — 칩을 노랑으로 **채웁니다.** 밑줄만으로는 눈에 안 들어옵니다. */
.stepnode.active {
  color: var(--ink); background: var(--accent2); border-color: var(--accent2);
}
.stepnode.active .dot { background: rgba(0, 0, 0, .18); border-color: transparent; color: var(--ink); }
.stepnode.active .lbl { font-weight: 800; }
.stepnode.active .st { color: rgba(0, 0, 0, .6); }

/* 단계 사이를 잇는 선. 어디까지 왔는지 한눈에 보입니다. */
.steplink {
  flex: 0 1 26px; min-width: 10px; height: 1px;
  background: var(--line2);
}
.steplink.done { background: #4d3f16; }

/* ⑥ 최종편집 — 설정 성격의 단계라 **아직 안 했을 때는** 톱니·점선으로 둡니다. */
.stepnode.settings .dot {
  background: var(--bg2); border-style: dashed; color: var(--muted); font-weight: 400;
}
.stepnode.settings.active .dot {
  background: rgba(0, 0, 0, .18); border-style: solid; border-color: transparent; color: var(--ink);
}
.stepnode.settings .st { color: var(--muted); }

/* [실기 버그] 자막이 나왔는데도 ⑥ 만 회색이었습니다. 위 `.stepnode.settings`
   규칙이 `.stepnode.done` 과 명시도가 같은데 뒤에 있어서 완료 표시를 덮습니다.
   `:not(.active)` 로 명시도를 올려 **순서와 무관하게** 이기게 합니다. */
.stepnode.settings.done:not(.active) .dot {
  background: #2a2412; border-color: #4d3f16; border-style: solid;
  color: var(--accent); font-weight: 700;
}
.stepnode.settings.done:not(.active) .st { color: var(--muted); }

/* ───────────────────────── 좁은 화면 */
@media (max-width: 860px) {
  .sidebar { padding: 8px 12px; overflow-x: auto; }
  .side-brand { padding-right: 10px; }
  .side-brand-text b { display: none; }
  .side-slot { min-width: 8px; }
  .side-user { display: none; }
  .side-item { padding: 7px 10px; }
  .main-inner, .proj-head, .stepbar { padding-left: 14px; padding-right: 14px; }
  .stepbar { justify-content: flex-start; position: static; }
  .stepnode .st { display: none; }
}

/* ───────────────────────── 프로젝트 목록 (홈 · 전체) */
.proj-list { display: flex; flex-direction: column; gap: 9px; }
.proj-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 13px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
}
.proj-row:hover { border-color: var(--line2); }
.proj-thumb {
  width: 88px; height: 50px; flex: 0 0 88px;
  border-radius: 8px; overflow: hidden; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.proj-body { flex: 1; min-width: 0; }
.proj-body h3 {
  font-size: 14.5px; margin: 0 0 5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
}
.proj-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

.link-more { color: var(--accent); text-decoration: none; font-size: 12.5px; }
.link-more:hover { text-decoration: underline; }
.link-more.strong { font-weight: 700; }
.list-head { margin-bottom: 18px; align-items: center; }
.list-head h1 { font-size: 24px; margin: 0; }
.list-head .hint { margin: 2px 0 0; }

/* ───────────────────────── 만들기 흐름 */
.flow-wrap { max-width: 560px; margin: 8vh auto 0; }
.flow-steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.flow-step {
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.flow-step.active { border-color: var(--accent); color: var(--accent); }
.flow-card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 30px 24px; box-shadow: var(--shadow);
}
.flow-card h1 { font-size: 20px; margin: 0 0 6px; }
.flow-label { display: block; margin: 16px 0 6px; font-size: 13px; color: var(--muted); }
.flow-card input[type="text"] { width: 100%; font-size: 15px; padding: 11px 13px; }
.flow-actions { margin-top: 20px; }

/* ───────────────────────── 대본 작성 가이드 (접이식) */
.guide {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); margin: 10px 0 14px; padding: 0 14px;
}
.guide summary {
  cursor: pointer; padding: 11px 0; font-size: 13px; font-weight: 700;
  list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary::before { content: "▸ "; color: var(--muted); }
.guide[open] summary::before { content: "▾ "; }
.guide-body { padding-bottom: 8px; }
.guide-body ul { margin: 6px 0 0; padding-left: 18px; }
.guide-body li { margin-bottom: 5px; }

/* ───────────────────────── 설정 — Phase B 자리 */
.panel-placeholder { border-style: dashed; opacity: 0.75; }

/* ───────────────────────── 공통 푸터 */
.site-foot {
  margin-top: auto;
  padding: 22px 24px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.site-foot-links { display: flex; gap: 8px; align-items: center; }
.site-foot-links a { color: var(--muted); text-decoration: none; }
.site-foot-links a:hover { color: var(--text); text-decoration: underline; }
.site-foot-biz:empty { display: none; }

/* ───────────────────────── 사용 가이드 (/guide) */
.guide-toc { margin: 6px 0 0; padding-left: 20px; line-height: 1.95; }
.guide-toc a { color: var(--accent); text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.guide-steps { margin: 6px 0 12px; padding-left: 22px; line-height: 1.8; font-size: 13px; }
.guide-steps li { margin-bottom: 6px; }
/* 실제 화면 캡처 — 글로 설명한 자리를 눈으로 확인시켜 줍니다.
   그림이 본문보다 커 보이지 않게 테두리를 얇게 두고, 아래에 설명 한 줄을 답니다. */
.guide-figure { margin: 12px 0 18px; }
.guide-figure img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
}
.guide-figure figcaption {
  color: var(--muted); font-size: 12px; margin-top: 7px; text-align: center;
}
/* 스크린샷 자리 — 그림을 채울 때까지 자리를 잡아 둡니다. */
.guide-shot {
  border: 1px dashed var(--line2); border-radius: var(--radius);
  padding: 28px 12px; margin: 8px 0 14px;
  text-align: center; color: var(--muted); font-size: 12px;
  background: var(--bg);
}

/* ───────────────────────── 공지사항 (/notice)
 *
 * 판올림 하나가 카드 하나입니다. 맨 위(최신)만 판올림 번호를 노랑으로 채워
 * 「지금 것」을 표시합니다 — 전부 칠하면 어느 것이 최신인지 안 보입니다.
 */
.notice-entry { padding: 20px 22px; }
.notice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.notice-ver {
  font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: var(--bg3); color: var(--muted); border: 1px solid var(--line);
}
.notice-ver.latest { background: var(--accent2); color: var(--ink); border-color: var(--accent2); }
.notice-date { color: var(--muted); font-size: 12.5px; }
.notice-title { margin: 0 0 14px; font-size: 16px; }
.notice-items { margin: 0; padding-left: 0; list-style: none; }
.notice-items li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 0; font-size: 13.5px; line-height: 1.7; word-break: keep-all;
}
.notice-items li + li { border-top: 1px solid var(--line); }
/* 종류 딱지 — 새 기능·고침·주의. 줄 맨 앞에서 폭이 같아야 글이 가지런합니다. */
.notice-kind {
  flex: 0 0 58px; text-align: center; margin-top: 2px;
  font-size: 11px; font-weight: 700; padding: 3px 0; border-radius: 6px;
  background: var(--bg3); color: var(--muted); border: 1px solid var(--line);
}
.notice-kind.new { color: var(--accent); border-color: rgba(255, 207, 74, .45); background: #241f12; }
.notice-kind.fix { color: var(--ok); border-color: #2f5c46; background: #16281f; }
.notice-kind.warn { color: var(--warn); border-color: #5b4429; background: #2a2119; }

/* [공지 게시판] 신문처럼 펼치지 않습니다.
 * 예전에는 모든 판올림의 항목을 한 화면에 다 늘어놨습니다. 공지가 세 개일 때는
 * 읽혔지만 스무 개가 되면 아무도 안 읽습니다. 목록에는 **날짜와 제목만** 세우고,
 * 누른 것 하나만 펼칩니다. 줄 전체가 링크라 어디를 눌러도 열립니다. */
.board { display: flex; flex-direction: column; }
.board-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { color: var(--accent); }
.board-title { font-size: 14px; font-weight: 600; flex: 1; }
/* 안 읽은 줄에 붙는 점 — 「새 소식」 이라고 글로 적는 것보다 짧습니다. */
.board-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent2); margin-left: 7px; vertical-align: 2px;
}
.board-count { color: var(--muted); font-size: 12px; flex: none; }
.notice-nav { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#noticeDetail > .btn { margin-bottom: 12px; }
/* 좁은 화면에서는 제목이 한 줄을 통째로 씁니다 — 날짜에 밀려 잘리면 안 됩니다. */
@media (max-width: 640px) {
  .board-row { flex-wrap: wrap; gap: 4px 10px; }
  .board-title { flex-basis: 100%; }
}

/* ───────────────────────── 회원 관리 표
 *
 * `.kv` 는 원래 "이름:값" 두 칸짜리라 첫 칸을 좁게 잡습니다. 회원 목록은
 * 여섯 칸이라 그대로 두면 표가 쏠립니다. 여기서만 되돌립니다.
 */
/* 열이 열한 개라 화면이 좁으면 옆으로 넘깁니다. 예전에는 앞 일곱 열이 폭을
 * 100% 다 가져가서 뒤 네 열(만료일·남은 기간·상태·버튼)이 눌려 「7일 남음」이
 * 「7…」 로 잘려 보였습니다 — 값은 오는데 화면이 못 보여 준 것입니다. */
.admin-users { overflow-x: auto; }
.admin-users table { width: 100%; table-layout: fixed; }
.admin-users th, .admin-users td {
  text-align: left; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 폭 배분(열 열 개) — 체크·이름·이메일·가입일·인증·승인·남은 기간·플랜·상태·버튼.
 * 합이 100% 를 넘지 않게 — 넘으면 뒤 열이 눌려 안 보입니다(0.4.38 에서 겪음). */
.admin-users th:nth-child(1) { width: 30px; }
.admin-users th:nth-child(2) { width: 8%; }
.admin-users th:nth-child(3) { width: 19%; }
.admin-users th:nth-child(4) { width: 10%; }
.admin-users th:nth-child(5) { width: 7%; }
.admin-users th:nth-child(6) { width: 10%; }
.admin-users th:nth-child(7) { width: 14%; }
.admin-users th:nth-child(8) { width: 10%; }
.admin-users th:nth-child(9) { width: 8%; }
/* 남은 기간(두 줄: 문구 + 만료일)과 버튼 칸은 줄을 바꿉니다. */
.admin-users td:nth-child(7), .admin-users td:last-child { white-space: normal; line-height: 1.35; }
.admin-users td:nth-child(7) .muted { font-size: 11px; }
/* 마지막 칸의 날짜 입력 — 버튼과 같은 높이로 */
.admin-users input[type="date"], .admin-bulk input[type="date"] {
  font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 8px;
  border: 1px solid var(--line2); background: var(--bg3); color: var(--text);
  color-scheme: dark; max-width: 100%;
}
/* 쪽 번호 — ‹ 1 2 3 › */
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.admin-pager .hint { margin-right: 6px; }
.admin-users select { max-width: 100%; }
/* 등급을 칸 색으로 — 표를 훑을 때 「누가 돈 내는 사람인가」가 글자를 읽기 전에
 * 보여야 합니다. 스탠다드 초록 · 프리미엄 파랑 · 나머지(무료)는 색 없음.
 * 어두운 바탕이라 옅은 반투명으로 깔고, 상태 배지 색과 겹쳐도 읽히게 둡니다. */
.admin-users tr.plan-standard td { background: rgba(78, 201, 138, .16); }
.admin-users tr.plan-premium td { background: rgba(96, 156, 255, .20); }
.admin-users tr.plan-standard:hover td { background: rgba(78, 201, 138, .26); }
.admin-users tr.plan-premium:hover td { background: rgba(96, 156, 255, .30); }
/* 탈퇴 버튼 — 다른 버튼과 나란히 두되 빨간 글자로 구분합니다. */
.admin-users .btn.danger { color: var(--err); border-color: #5f3030; }
.admin-users .btn.danger:hover { background: #2a1a1a; }
.admin-search { flex: 1; min-width: 14rem; }
.admin-search input { width: 100%; box-sizing: border-box; }

/* ───────────────────────── 회원 관리 도구 줄 */
.admin-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 10px 0 12px;
}
.admin-filter { font-size: 13px; color: var(--muted); }
.admin-filter select { margin-left: 6px; }
/* 일괄 변경은 오른쪽에 모아 둡니다 — 필터와 섞이면 잘못 누릅니다. */
.admin-bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ───────────────────────── ⑦ CapCut zip 안내 (SaaS) */
.zip-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.zip-steps { margin: 12px 0 4px; padding-left: 20px; font-size: 13px; }
.zip-steps li { margin-bottom: 10px; }
.zip-steps .hint { display: block; margin-top: 3px; }
.path-box {
  margin: 6px 0; padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  overflow-x: auto;
}
.path-box code { white-space: nowrap; font-size: 12.5px; }


/* ═══════════════════════════ 로그인 전 첫 화면 (landing.html)
 *
 * 로그인하면 같은 주소가 「내 스튜디오」가 됩니다. 여기는 사이드바도 위저드도
 * 없는 한 장짜리라, `.app` 격자를 안 쓰고 자기 폭으로 섭니다.
 */
.lp { max-width: 980px; margin: 0 auto; padding: 0 24px; }

.lp-hero { padding: 76px 0 64px; text-align: center; }
.lp-eyebrow {
  color: var(--accent); font-size: 12.5px; letter-spacing: .02em; margin: 0 0 18px;
}
.lp-hero h1 { font-size: 42px; line-height: 1.28; margin: 0 0 18px; letter-spacing: -.01em; }
.lp-sub {
  color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0 auto 24px; max-width: 620px;
}
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.lp-chips span {
  border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; color: var(--text); background: var(--bg2);
}
.lp-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-cta .btn { padding: 12px 22px; font-size: 14px; text-decoration: none; }
.lp-note { color: var(--muted); font-size: 12.5px; margin: 22px auto 0; max-width: 560px; line-height: 1.7; }

/* [파는 것 세 가지 — 히어로 CTA 바로 아래]
 *
 * 위의 [지금 바로 시작하기]가 유일한 «채운 노랑»이어야 합니다. 그래서 여기는
 * 큰 것도 테두리만 쓰고, 노랑은 글자와 값에만 얹습니다.
 *
 * 큰 것 하나(소개·구독) + 작은 것 둘(상품)의 층을 **글자 크기가 아니라 면적**
 * 으로 냅니다 — 글자만 키우면 좁은 화면에서 셋이 같은 폭이 되어 층이 사라집니다.
 */
.lp-promo { margin: 30px auto 0; max-width: 680px; text-align: left; }

.lp-promo-main {
  display: block; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--accent); background: var(--bg2); text-decoration: none;
  transition: background .15s, transform .15s;
}
.lp-promo-main:hover { background: var(--bg3, var(--bg2)); transform: translateY(-1px); }
/* 제목과 값이 한 줄에 마주 봅니다. 값을 제목 아래로 내리면 「무엇을 사는가」와
 * 「얼마인가」 사이에 설명 한 줄이 끼어, 값이 설명의 일부처럼 읽힙니다.
 * 좁아지면 `flex-wrap` 으로 값이 아래 줄로 내려옵니다 — 줄이지 않습니다. */
.lp-promo-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.lp-promo-main b { color: var(--accent); font-size: 16px; }
.lp-promo-main em {
  font-style: normal; color: var(--accent); font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.lp-promo-main > span:last-of-type { display: block; color: var(--text); font-size: 13px; line-height: 1.6; }

.lp-promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.lp-promo-pair a {
  display: block; padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--line2); background: var(--bg2); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.lp-promo-pair a:hover { border-color: var(--accent); transform: translateY(-1px); }
.lp-promo-pair b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 5px; }
.lp-promo-pair span { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lp-promo-pair em {
  display: block; margin-top: 8px; font-style: normal;
  color: var(--accent); font-size: 13px; font-weight: 700;
}
/* 지난 값. **취소선과 흐린 색을 같이** 씁니다 — 색만으로는 색을 잘 못 보는
   분에게 그냥 또 하나의 값입니다. 작게 줄여 시선이 할인가에서 멈추게 합니다. */
.lp-promo em s {
  color: var(--muted); font-weight: 500; font-size: .86em;
  margin-right: 6px; text-decoration-thickness: 1px;
}
/* 정원 한 줄. 값 아래에 붙고, 값보다 물러나 보입니다. */
.lp-limit {
  display: block; margin-top: 6px; font-style: normal;
  color: var(--warn); font-size: 11.5px; font-weight: 600; line-height: 1.5;
}

/* [가입 화면] 래피드 결제 이메일 안내. **가장 중요한 문장이라 가장 눈에
   띕니다** — 운영자가 승인할 때 대조하는 값이고, 여기가 다르면 그 사람은
   로그인도 못 한 채 기다립니다. `hint` 로 두면 다른 도움말에 묻힙니다. */
.signup-warn {
  margin: -6px 0 4px; padding: 10px 12px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: #2a2416; color: var(--text);
  font-size: 12.5px; line-height: 1.6;
}
.signup-warn b { color: var(--accent); }

/* [홈] 방금 가입한 분에게 보이는 상자. 기다리는 것이 둘(메일 확인·운영자
   확인)이라 번호를 매깁니다 — 한 덩어리 문장으로 적으면 둘 중 하나만 하고
   「왜 아직 안 되지」로 돌아옵니다. */
.lp-welcome {
  margin: 26px auto 0; max-width: 560px; text-align: left;
  border: 1px solid var(--accent); border-radius: 13px;
  background: var(--bg2); padding: 16px 18px;
}
.lp-welcome > b { display: block; color: var(--accent); font-size: 14.5px; }
.lp-welcome ol { margin: 10px 0 8px; padding-left: 20px; }
.lp-welcome li { color: var(--text); font-size: 13px; line-height: 1.75; }
.lp-welcome > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; }

.lp-promo-foot {
  color: var(--muted); font-size: 11.5px; line-height: 1.7; margin: 12px 2px 0;
}

.lp-section { padding: 46px 0; border-top: 1px solid var(--line); }
.lp-section h2 { font-size: 19px; margin: 0 0 22px; }
.lp-lead { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; max-width: 720px; }

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.lp-steps article {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px;
}
.lp-steps article > b { display: block; margin-bottom: 6px; font-size: 14px; }
.lp-steps span { color: var(--muted); font-size: 12.5px; line-height: 1.7; }

.lp-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.lp-values article {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 20px;
}
.lp-num { display: block; color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.lp-values article > b { display: block; margin-bottom: 8px; font-size: 14.5px; }
.lp-values article > span:last-child { color: var(--muted); font-size: 12.5px; line-height: 1.75; }

.lp-tail { padding: 62px 0; text-align: center; border-top: 1px solid var(--line); }
.lp-tail h2 { font-size: 24px; margin: 0 0 8px; }
.lp-tail p { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.lp-tail .btn { padding: 12px 24px; font-size: 14px; text-decoration: none; }

@media (max-width: 640px) {
  .lp-hero { padding: 48px 0 40px; }
  .lp-hero h1 { font-size: 30px; }
  .lp-promo-pair { grid-template-columns: 1fr; }
}