/* 유튜브 섹션 색 규칙 — 기본 UI는 모노톤(검정·흰색·회색). 색(하늘색·주황)은 강조할 곳과 호버에만 쓴다.
   버튼은 검정 바탕 + 흰 글자, 호버하면 연한 하늘색(--hover). 선택·진행·켬·링크는 하늘색, 경고·포인트는 주황.
   ※ 콘티 미리보기 무대(.seg-stage, .cap-preview)의 노랑·흰색·검정은 실제 영상 색이라 변수로 바꾸지 않는다. */
:root {
  --bg: #000000;            /* 페이지 바탕 */
  --inset: #0a0a0a;         /* 카드 안쪽에 파인 칸(번호 원, 트랙 바탕 등) */
  --card: #141414;          /* 카드·팝업 */
  --card-2: #181818;        /* 카드 위 한 단계 밝은 면 */
  --input: #1c1c1c;         /* 입력칸 */
  --btn: #000000;           /* 버튼 바탕 (검정, 글자는 흰색) */
  --btn-ring: #444444;      /* 검정 버튼 테두리 */
  --hover: #a8dcf6;         /* 호버 색: 연한 하늘색 (글자는 --on-accent 검정) */
  --line: #2a2a2a;          /* 테두리·구분선 */
  --line-strong: #333333;
  --text: #ffffff;          /* 본문 글자 */
  --text-2: #d0d0d0;        /* 조금 흐린 본문 */
  --muted: #9a9a9a;         /* 보조 글자 */
  --muted-2: #6a6a6a;       /* 더 흐린 보조 글자 */
  --accent: #4fc3f7;        /* 스킴밐스 하늘색: 버튼·선택·진행·링크·켬 */
  --accent-strong: #1e9ad6; /* 짙은 하늘색: 눌림·강조 버튼·자막 트랙 */
  --accent-dim: #16324a;    /* 하늘색 기운의 어두운 바탕(스킴밐스 값): 진행 중 칩 등 */
  --on-accent: #000000;     /* 하늘색·주황 바탕 위 글자 */
  --point: #ff7a1a;         /* 스킴밐스 주황: 경고·저장 안 됨 등 꼭 필요한 곳만 */
  --point-dim: #3a1f0a;
  --danger: #ff6b6b;        /* 삭제·오류 */
  --danger-bg: #2a1212;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 20px;
}

.wrap, .card {
  max-width: 460px;
  margin: 0 auto;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.card h1 {
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
  text-align: center;
}

p.role {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1.5;
  text-align: center;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

a.link-btn, button, input[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--btn);
  border: none;
  box-shadow: inset 0 0 0 1px var(--btn-ring);
  border-radius: 3px;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

a.link-btn:hover, button:hover {
  background: var(--hover);
  color: var(--on-accent);
}

a.link-btn:active, button:active {
  background: var(--accent-strong);
  color: var(--on-accent);
}

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

label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

input, textarea, select {
  width: 100%;
  box-sizing: border-box;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

button[type="submit"] {
  margin-top: 24px;
}

button:disabled {
  background: var(--line-strong);
  color: var(--muted-2);
  box-shadow: none;
  cursor: not-allowed;
}

.msg {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 0.9rem;
  display: none;
}
.msg.ok { background: var(--card-2); color: var(--text); display: block; }
.msg.err { background: var(--danger-bg); color: var(--danger); display: block; }

a.back {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.card-box {
  background: var(--card);
  border: none;
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.card-box .title {
  font-weight: 800;
  margin-bottom: 6px;
}
.card-box .meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.empty {
  color: var(--muted);
  text-align: center;
  margin-top: 40px;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }