/* ============================================================
   나의 유튜브 서재 v2 - 스타일시트
   Wanted 디자인 시스템 기반 (Pretendard + #0066FF Primary)
   ============================================================ */


/* ============================================================
   1. 디자인 토큰 (CSS 변수)
   - Wanted Design System의 컬러/지오메트리/그림자/모션 토큰
   ============================================================ */
:root {
  /* --- Brand --- */
  --primary-strong: #0066FF;          /* 메인 액센트 (블루) */
  --primary-heavy:  #3385FF;          /* 호버 시 더 밝은 블루 */

  /* --- Atomic: 차가운 회색 스케일 --- */
  --c-cool-5:  #15161A;
  --c-cool-25: #2B2D33;
  --c-cool-50: #6B6E78;
  --c-cool-60: #878A93;
  --c-cool-70: #A4A7AE;
  --c-cool-90: #DFE0E3;
  --c-cool-95: #ECEDEF;
  --c-cool-97: #F4F4F5;
  --c-cool-98: #F7F7F8;

  /* --- Semantic: 의미별 토큰 --- */
  --background-normal:           #F7F7F8;            /* 페이지 배경 */
  --background-elevated-normal:  #FFFFFF;            /* 카드/모달 배경 */
  --label-strong:                #15161A;            /* 본문 (가장 진함) */
  --label-neutral:               #2B2D33;            /* 보조 본문 */
  --label-alternative:           #6B6E78;            /* 부제, 라벨 */
  --label-assistive:             #878A93;            /* 흐린 텍스트 */
  --line-normal:                 rgba(112, 115, 124, 0.22);   /* 기본 구분선 */
  --line-alternative:            rgba(112, 115, 124, 0.16);
  --line-soft:                   rgba(112, 115, 124, 0.08);   /* 가장 옅은 선 */
  --fill-normal:                 rgba(112, 115, 124, 0.08);   /* 호버 배경 */
  --fill-strong:                 rgba(112, 115, 124, 0.16);

  /* --- Geometry: 라디우스 토큰 --- */
  --radius-8:  8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;

  /* --- Two-stop elevation: 두 단 그림자 (tight + soft) --- */
  --shadow-normal-medium: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-normal-small:  0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-emphasize:     0 2px 4px rgba(0,0,0,0.08), 0 16px 36px rgba(0,0,0,0.16);
  --shadow-blue:          0 1px 2px rgba(0,0,0,0.08), 0 14px 30px rgba(0, 102, 255, 0.32);

  /* --- Motion: 부드러운 가속 곡선 --- */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Type: 단일 폰트 패밀리 --- */
  --font-sans: "Pretendard Variable", "Pretendard JP", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", sans-serif;
}


/* ============================================================
   2. 전역 리셋 + 기본 타이포
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--background-normal);
  color: var(--label-strong);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  padding-bottom: 160px;          /* FAB이 푸터를 가리지 않도록 여유 */
}

/* 가운데 정렬 컨테이너 (시안의 .page) */
.page {
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 32px;
}


/* ============================================================
   3. 헤더 (사이트 제목 + 메타 줄)
   ============================================================ */
header.masthead {
  padding: 120px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--line-normal);
  position: relative;
}

/* 헤더 상단의 짧은 가로선 (장식) */
header.masthead::before {
  content: "";
  position: absolute;
  top: 88px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 1px;
  background: var(--label-strong);
  opacity: 0.6;
}

/* "A Personal Curation · Est. 2026" 라벨 */
.eyebrow {
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--label-alternative);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.eyebrow .dot {
  display: inline-block;
  margin: 0 10px;
  opacity: 0.5;
  font-style: normal;
}

/* 메인 타이틀 (Pretendard 700, 디스플레이 트래킹) */
h1.title {
  font-weight: 700;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.029em;        /* Wanted 디스플레이 트래킹 */
  color: var(--label-strong);
  margin-bottom: 24px;
}

/* 제목 안의 "서재" — 블루 + 이탤릭 + 형광펜 하이라이트 */
h1.title .accent {
  color: var(--primary-strong);
  font-style: italic;
  font-weight: 600;
  position: relative;
}
h1.title .accent::after {
  content: "";
  position: absolute;
  left: 4px; right: 6px; bottom: 8px;
  height: 8px;
  background: rgba(0, 102, 255, 0.12);
  z-index: -1;
  transform: skewX(-8deg);          /* 살짝 비스듬한 형광펜 느낌 */
}

.subtitle {
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: 0.006em;
  color: var(--label-alternative);
  font-weight: 400;
  max-width: 540px;
  margin: 0 auto;
}

/* "Vol. 03 · N Films · Spring, 2026" 메타 줄 */
.meta-row {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.14em;
  color: var(--label-assistive);
  text-transform: uppercase;
  font-weight: 500;
}
.meta-row .pip {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--label-assistive);
  opacity: 0.7;
  font-style: normal;
}


/* ============================================================
   4. 카테고리 탭 (시안 .tabs)
   ============================================================ */
.categories {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 40px 0 56px;
  flex-wrap: wrap;
}

.cat-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--label-alternative);
  letter-spacing: -0.01em;
  position: relative;
  transition: color 180ms var(--ease), background 180ms var(--ease);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border-radius: var(--radius-10);
}

/* 카테고리 옆 (개수) — 이탤릭으로 작게 */
.cat-btn .count {
  font-size: 12px;
  font-style: italic;
  color: var(--label-assistive);
  font-weight: 400;
  letter-spacing: 0;
}

.cat-btn:hover {
  color: var(--label-strong);
  background: var(--fill-normal);
}

/* 활성 카테고리 — 블루 + 굵게 + 짧은 밑줄 */
.cat-btn.active {
  color: var(--primary-strong);
  font-weight: 700;
}
.cat-btn.active:hover {
  background: rgba(0, 102, 255, 0.06);
}
.cat-btn.active .count {
  color: var(--primary-strong);
  opacity: 0.7;
}
.cat-btn.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--primary-strong);
  border-radius: 1px;
}


/* ============================================================
   5. 검색창 (실시간 필터링, 200ms 디바운스)
   - 좌측: 돋보기 SVG (장식, 클릭 통과)
   - 우측: X 버튼 (.has-value 클래스가 있을 때만 표시)
   ============================================================ */
.search-wrapper {
  max-width: 500px;
  margin: 24px auto 0;
  position: relative;
}

.search-input {
  width: 100%;
  height: 48px;
  padding: 0 48px;                  /* 좌우 아이콘 자리 */
  border: 1px solid var(--line-normal);
  background: var(--background-elevated-normal);
  font-family: inherit;
  font-size: 14px;
  color: var(--label-strong);
  border-radius: var(--radius-12);
  transition: border-color 180ms var(--ease),
              box-shadow 180ms var(--ease);
}
.search-input::placeholder {
  color: var(--label-assistive);
}
.search-input:focus {
  outline: none;
  border-color: var(--primary-strong);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.10);   /* 옅은 블루 포커스 링 */
}

/* 좌측 돋보기 아이콘 (클릭은 input으로 통과) */
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--label-assistive);
  pointer-events: none;
}

/* 우측 X 버튼 - 기본 숨김, .has-value일 때만 표시 */
.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--label-alternative);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 150ms var(--ease), color 150ms var(--ease);
  padding: 0;
}
.search-clear svg {
  width: 16px;
  height: 16px;
}
.search-clear:hover {
  background: var(--fill-normal);
  color: var(--label-strong);
}
.search-wrapper.has-value .search-clear {
  display: inline-flex;
}


/* ============================================================
   6. 영상 카드 그리드 (3열 → 반응형)
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}

/* 카드 컨테이너 — 24px 라운드 + 화이트 + 라인 */
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--background-elevated-normal);
  border: 1px solid var(--line-normal);
  border-radius: var(--radius-24);
  overflow: hidden;
  transition: transform 280ms var(--ease),
              box-shadow 280ms var(--ease),
              border-color 280ms var(--ease);
  animation: fadeUp 0.6s var(--ease) backwards;   /* 등장 애니메이션 */
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 카드 호버: 살짝 떠오르며 2-stop 그림자 + 라인 강화 */
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-normal-medium);
  border-color: rgba(112, 115, 124, 0.40);
}
/* 카드 호버 시 썸네일 1.04배 확대 */
.video-card:hover .thumbnail-wrapper img {
  transform: scale(1.04);
}
/* 카드 호버 시 재생 버튼이 블루로 차오름 */
.video-card:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--primary-strong);
}
.video-card:hover .play-icon svg {
  fill: #fff;
}

/* 삭제 직전 페이드 아웃 효과 */
.video-card.deleting {
  opacity: 0;
  transform: scale(0.95);
}


/* ============================================================
   7. 카드 - 썸네일 + 재생 버튼
   ============================================================ */
.thumbnail-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;            /* 시안: 16:9 → 16:10 */
  overflow: hidden;
  background: var(--c-cool-25);
  cursor: pointer;
}

.thumbnail-wrapper img,
.thumbnail-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  transition: transform 600ms var(--ease);
}

/* 썸네일 위 하단 그라디언트 (글자 가독성용) */
.thumbnail-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

/* 재생 시작되면 그라디언트와 재생 버튼 숨김 */
.thumbnail-wrapper.playing::after { display: none; }
.thumbnail-wrapper.playing .play-icon { display: none; }

/* 재생 버튼 (가운데 동그라미 + 삼각형 아이콘) */
.play-icon {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 240ms var(--ease), background 240ms var(--ease);
  box-shadow: var(--shadow-normal-small);
  padding: 0;
}
.play-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--label-strong);
  margin-left: 3px;                 /* 삼각형이 시각적으로 가운데 보이도록 */
  transition: fill 240ms var(--ease);
}


/* ============================================================
   8. 카드 - 본문 (제목, 채널, 노트, 액션)
   ============================================================ */
.card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 카테고리 라벨 - 작고 이탤릭, 블루 */
.card-category {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-strong);
  font-weight: 600;
  font-style: italic;
}

/* 카드 제목 - 굵고 약간 큰 */
.card-title {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--label-strong);
  margin-top: 2px;
  text-wrap: pretty;                /* 마지막 줄이 한 단어로 떨어지지 않게 */
}

/* 채널명 - 흐리고 이탤릭 */
.card-channel {
  font-size: 13px;
  color: var(--label-assistive);
  margin-top: 2px;
  font-weight: 500;
  font-style: italic;
}

/* 큐레이터 노트 (시안 .comment + .divider) */
.card-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-normal);
  font-size: 14px;
  line-height: 1.625;
  letter-spacing: 0.006em;
  color: var(--label-neutral);
  position: relative;
  font-weight: 400;
}

/* 큰 따옴표 장식 (❝) - 블루 */
.card-note::before {
  content: "❝";
  position: absolute;
  left: -2px; top: 18px;
  font-size: 28px;
  color: var(--primary-strong);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}

/* divider 위에 짧은 액센트 라인 (시안 .divider::before) */
.card-note::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 28px; height: 1px;
  background: var(--primary-strong);
}

.card-note-text {
  display: block;
  padding-left: 22px;
  padding-top: 8px;
  font-style: italic;
}

/* 카드 하단 편집/삭제 버튼 */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.card-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line-normal);
  color: var(--label-alternative);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 180ms var(--ease);
  border-radius: var(--radius-8);
  letter-spacing: 0.02em;
}
.card-btn:hover {
  background: var(--label-strong);
  color: white;
  border-color: var(--label-strong);
}
.card-btn.delete:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: white;
}


/* ============================================================
   9. 빈 상태 메시지
   - 텍스트는 JS가 상황(검색 여부)에 따라 갱신
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--label-assistive);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
}


/* ============================================================
   10. FAB (Floating Action Button) - 블루 글로우
   ============================================================ */
.add-fab {
  position: fixed;
  right: 40px; bottom: 40px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--primary-strong);
  border: none;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-blue);
  transition: transform 320ms var(--ease),
              background 220ms var(--ease),
              box-shadow 220ms var(--ease);
  z-index: 50;
  font-family: inherit;
}

.add-fab svg {
  width: 22px; height: 22px;
  transition: transform 360ms var(--ease);
}

/* 호버 시 살짝 떠오르며 + 글로우 강화 + 아이콘 90도 회전 */
.add-fab:hover {
  background: var(--primary-heavy);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16),
              0 18px 36px rgba(0, 102, 255, 0.45);
}
.add-fab:hover svg {
  transform: rotate(90deg);
}
.add-fab:active {
  background: var(--primary-strong);
  filter: brightness(0.92);
}


/* ============================================================
   11. 푸터 (장식적 마무리)
   ============================================================ */
.footnote {
  text-align: center;
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--line-normal);
  font-style: italic;
  color: var(--label-assistive);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.footnote .ornament {
  display: inline-block;
  margin: 0 14px;
  color: var(--primary-strong);
  opacity: 0.8;
  font-style: normal;
}


/* ============================================================
   12. 모달 (영상 추가/편집)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 22, 26, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
  padding: 20px;
}

.modal-backdrop.active {
  display: flex;
  animation: fadeIn 0.3s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--background-elevated-normal);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  animation: slideUp 0.4s var(--ease);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-emphasize);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-title {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.022em;
  color: var(--label-strong);
  margin-bottom: 6px;
}
.modal-subtitle {
  font-style: italic;
  color: var(--label-assistive);
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 400;
}


/* ============================================================
   13. 모달 - 폼 요소
   ============================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  color: var(--label-alternative);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-normal);
  background: var(--background-normal);
  font-family: inherit;
  font-size: 14px;
  color: var(--label-strong);
  border-radius: var(--radius-10);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

/* 포커스 시 블루 테두리 + 화이트 배경 */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-strong);
  background: var(--background-elevated-normal);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.625;
}

.form-group .hint {
  font-size: 11px;
  color: var(--label-assistive);
  margin-top: 6px;
  font-style: italic;
}


/* ============================================================
   14. 모달 - 버튼 (취소 / 저장)
   ============================================================ */
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  flex: 1;
  padding: 12px 20px;
  border: 1px solid var(--line-normal);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms var(--ease);
  background: var(--background-elevated-normal);
  color: var(--label-strong);
  border-radius: var(--radius-10);
  letter-spacing: -0.01em;
}
.btn:hover {
  background: var(--fill-normal);
}

/* 저장 버튼 - 블루 강조 */
.btn-primary {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-heavy);
  border-color: var(--primary-heavy);
}


/* ============================================================
   15. 사용자 인증 - 가시성 제어 + 헤더 영역 + 인증 탭
   - 비로그인: 회원가입/로그인 버튼만 표시
   - 로그인(body.logged-in): + FAB, 카드 편집/삭제, 도구, 사용자 배지 표시
   - body 클래스 하나만 토글하면 모든 UI가 알아서 바뀜
   ============================================================ */

/* + FAB와 카드 편집/삭제: 로그인 시에만 표시 */
.add-fab,
.card-actions {
  display: none;
}
body.logged-in .add-fab      { display: flex; }
body.logged-in .card-actions { display: flex; }

/* 헤더 우측 컨트롤 컨테이너 (항상 표시 — 안의 내용이 상태에 따라 바뀜) */
.admin-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 60;                     /* FAB(50)보다 위, 모달(100)보다 아래 */
}

/* 도구 그룹·사용자 배지는 로그인 시에만 / 로그인 버튼은 비로그인 시에만 */
.admin-tools,
.admin-badge {
  display: none;
}
body.logged-in .admin-tools      { display: inline-flex; }
body.logged-in .admin-badge      { display: inline-flex; }
body.logged-in .auth-trigger-btn { display: none; }

/* 회원가입/로그인 유도 버튼 (비로그인 시, 블루 강조) */
.auth-trigger-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--primary-strong);
  border: 1px solid var(--primary-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-normal-small);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.auth-trigger-btn:hover {
  background: var(--primary-heavy);
  border-color: var(--primary-heavy);
}

/* 사용자 정보 배지 (알약 모양, 로그인 시) */
.admin-badge {
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--background-elevated-normal);
  border: 1px solid var(--line-normal);
  border-radius: 999px;            /* 알약 모양 */
  box-shadow: var(--shadow-normal-small);
  font-size: 13px;
  font-weight: 500;
  color: var(--label-strong);
}

.admin-badge-icon {
  font-size: 14px;
  line-height: 1;
}

/* "안녕하세요, OOO님" — 이름 부분만 블루 강조 */
.user-greeting {
  letter-spacing: -0.01em;
}
.user-greeting strong {
  font-weight: 700;
  color: var(--primary-strong);
}

.admin-badge-divider {
  color: var(--label-assistive);
  margin: 0 2px;
}

.admin-badge-logout {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  letter-spacing: -0.01em;
  transition: color 150ms var(--ease);
}
.admin-badge-logout:hover {
  color: var(--primary-heavy);
  text-decoration: underline;
}

/* 인증 모달 - 로그인/회원가입 탭 (카테고리 탭과 같은 밑줄 패턴) */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line-normal);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--label-alternative);
  cursor: pointer;
  position: relative;
  transition: color 150ms var(--ease);
}
.auth-tab:hover {
  color: var(--label-strong);
}
.auth-tab.active {
  color: var(--primary-strong);
  font-weight: 700;
}
.auth-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary-strong);
}


/* ============================================================
   16. 인증 모달 - 흔들림 애니메이션 + 에러 메시지
   ============================================================ */

/* 잘못된 입력 시 input에 0.4초 동안 흔들림 효과 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

.form-group input.shake {
  animation: shake 0.4s var(--ease);
  border-color: var(--primary-strong);
}

/* 에러 메시지 (입력칸 아래) */
.error-message {
  color: #D6263D;                  /* 경고 빨강 */
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;                /* 표시/숨김 시 layout shift 방지 */
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ============================================================
   17. 관리자 도구 (내보내기 / 가져오기 + 백업 권장 점)
   ============================================================ */

.admin-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--background-elevated-normal);
  border: 1px solid var(--line-normal);
  border-radius: 999px;            /* 배지와 같은 알약 모양 */
  box-shadow: var(--shadow-normal-small);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--label-strong);
  letter-spacing: -0.01em;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
  position: relative;
}

.admin-tool-btn:hover {
  background: var(--fill-normal);
  border-color: rgba(112, 115, 124, 0.40);
}

.admin-tool-btn .emoji {
  font-size: 14px;
  line-height: 1;
}

.admin-tool-btn .label {
  letter-spacing: -0.01em;
}

/* 백업 권장 점 (영상 ≥ 10일 때 .show 클래스로 노출) */
.backup-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-strong);
  margin-left: 2px;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.20);  /* 옅은 후광 */
}
.backup-dot.show {
  display: inline-block;
}


/* ============================================================
   18. 가져오기 미리보기 모달 + 위험 액션 버튼
   ============================================================ */

.import-summary {
  padding: 20px;
  background: var(--background-normal);
  border-radius: var(--radius-12);
  font-size: 14px;
  line-height: 1.625;
  color: var(--label-neutral);
}

.import-summary strong {
  color: var(--primary-strong);
  font-weight: 700;
}

.import-summary p + p {
  margin-top: 8px;
}

.import-summary .meta {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--label-assistive);
  font-style: italic;
}

/* 위험한 액션 버튼 (덮어쓰기) - 빨강 외곽선 */
.btn.btn-warning {
  background: var(--background-elevated-normal);
  border-color: rgba(214, 38, 61, 0.30);
  color: #D6263D;
}
.btn.btn-warning:hover {
  background: rgba(214, 38, 61, 0.06);
  border-color: #D6263D;
}


/* ============================================================
   19. 토스트 알림 (실시간 변경 시 우상단에 잠깐 표시)
   ============================================================ */

/* 토스트들이 세로로 쌓이는 컨테이너
   - 우상단이지만 관리자 컨트롤(top:20px)과 겹치지 않게 그 아래에 둠 */
.toast-container {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 90;                /* FAB·배지보다 위, 모달(100)보다 아래 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;       /* 토스트가 뒤쪽 클릭을 가로채지 않도록 */
}

/* 개별 토스트 (어두운 배경 + 흰 글씨) */
.toast {
  background: var(--label-strong);
  color: white;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-normal-medium);
  letter-spacing: -0.01em;
  max-width: 280px;
  animation: toastIn 0.3s var(--ease);   /* 등장 애니메이션 */
}

/* 사라질 때 (.toast-out 클래스가 붙으면) */
.toast.toast-out {
  animation: toastOut 0.3s var(--ease) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}


/* ============================================================
   20. 반응형
   - 태블릿(920px 이하): 2열 그리드, 헤더 축소
   - 모바일(600px 이하): 1열, 카테고리 가로 스크롤, 도구 아이콘만
   ============================================================ */
@media (max-width: 920px) {
  .video-grid    { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  h1.title       { font-size: 60px; }
  header.masthead { padding: 80px 0 48px; }
  header.masthead::before { top: 56px; }
}

@media (max-width: 600px) {
  .page          { padding: 0 20px; }
  .video-grid    { grid-template-columns: 1fr; }
  h1.title       { font-size: 44px; }
  .subtitle      { font-size: 16px; }
  header.masthead { padding: 64px 0 40px; }
  header.masthead::before { top: 44px; }
  .meta-row      { gap: 12px; flex-wrap: wrap; }
  .categories    { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 24px 0 40px; }
  .add-fab       { right: 20px; bottom: 20px; }
  .modal         { padding: 28px; }

  /* 좁은 화면에선 관리자 도구 텍스트와 인사말 숨기고 이모지·아이콘만 */
  .admin-tool-btn .label  { display: none; }
  .user-greeting          { display: none; }
}