/* features.css — 캘린더·감상 대기·비교·랭킹·즐겨찾기·관리자·뉴스·상세·박스오피스·타임라인·푸터·반응형 */
  .fc-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
  .filter-empty { text-align: center; color: var(--muted); padding: 2rem; }

  /* ── 개봉 캘린더·D-Day ── */
  .cal-group { margin-bottom: 1.8rem; }
  .cal-group-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.4rem; }
  .cal-list { display: flex; flex-direction: column; gap: 0.5rem; }
  .cal-row { display: flex; align-items: center; gap: 0.9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
  .cal-row:hover { border-color: var(--gold); transform: translateX(3px); }
  .cal-thumb { width: 44px; height: 62px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: #111; }
  .cal-thumb.logo-fallback { object-fit: contain; padding: 3px; border: 1px solid rgba(201,168,76,0.28); }
  .cal-thumb-placeholder { display: none; width: 44px; height: 62px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px dashed rgba(201,168,76,0.4); border-radius: 4px; background: #111; color: var(--gold); }
  .cal-thumb-placeholder .icon { width: 18px; height: 18px; opacity: 0.65; }
  .cal-info { flex: 1; min-width: 0; }
  .cal-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
  .cal-sub { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }
  .cal-dday { flex-shrink: 0; text-align: right; }
  .cal-dday-num { font-size: 1.3rem; font-weight: 800; color: var(--gold); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
  .cal-date { font-size: 0.66rem; color: var(--muted); }
  .cal-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 20px; letter-spacing: 0.05em; }
  .cal-badge.tbd { background: rgba(201,168,76,0.15); color: var(--gold); border: 1px solid var(--gold); }
  .cal-badge.unreleased { background: rgba(232,0,28,0.12); color: var(--red); border: 1px solid var(--red); }

  /* ── WATCH LATER·마라톤 ── */
  .wl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin-bottom: 1rem; }
  .wl-tool-group { display: flex; align-items: center; gap: 0.4rem; }
  .wl-toolbar select { background: #1a1a1a; border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 0.28rem 0.4rem; font-size: 0.72rem; font-family: inherit; }
  .wl-marathon-btn { background: var(--gold); color: #1a1500; border: none; border-radius: 6px; padding: 0.35rem 0.8rem; font-weight: 700; font-size: 0.74rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
  .wl-marathon-btn:hover { filter: brightness(1.1); }
  .wl-nextup { font-size: 0.78rem; color: var(--text); margin-bottom: 1rem; }
  .wl-nextup b { color: var(--gold); }
  .wl-list { display: flex; flex-direction: column; gap: 0.5rem; }
  .wl-row { display: flex; align-items: center; gap: 0.9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; transition: border-color 0.2s; }
  .wl-row.done .wl-sub { color: #7DDB8A; }
  .wl-idx { font-size: 0.8rem; font-weight: 700; color: var(--gold); width: 22px; flex-shrink: 0; text-align: center; }
  .wl-thumb { width: 40px; height: 56px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: #111; cursor: pointer; }
  .wl-info { flex: 1; min-width: 0; cursor: pointer; }
  .wl-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
  .wl-sub { font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }
  .wl-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
  .wl-act-btn { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); background: #1c1c1c; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
  .wl-act-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
  .wl-act-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .wl-act-btn.remove:hover { border-color: var(--red); color: var(--red); }
  .wl-act-btn.done-toggle.on { background: #7DDB8A22; border-color: #7DDB8A; color: #7DDB8A; }
  .wl-modal-btn { margin-top: 0.9rem; background: none; border: 1px solid var(--gold); color: var(--gold); border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.76rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-family: inherit; }
  .wl-modal-btn.on { background: var(--gold); color: #1a1500; }

  /* ── 작품 비교 (기능 7) ── */
  .cmp-modal-btn { margin-top: 0.9rem; margin-left: 0.5rem; background: none; border: 1px solid #4a8fd6; color: #6cb0f0; border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.76rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-family: inherit; }
  .cmp-modal-btn.on { background: #4a8fd6; color: #06121f; }
  .compare-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; background: rgba(18,18,18,0.97); border: 1px solid var(--gold); border-radius: 30px; padding: 0.45rem 1rem; box-shadow: 0 8px 30px rgba(0,0,0,0.6); max-width: 90vw; }
  .compare-tray.hidden { display: none; }
  .compare-tray-label { font-size: 0.72rem; color: var(--muted); }
  .compare-tray-label b { color: var(--gold); }
  .compare-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.66rem; background: #222; border: 1px solid var(--border); border-radius: 16px; padding: 0.15rem 0.4rem 0.15rem 0.55rem; color: var(--text); }
  .compare-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; }
  .compare-chip button:hover { color: var(--red); }
  .compare-go-btn { background: var(--gold); color: #1a1500; border: none; border-radius: 16px; padding: 0.32rem 0.95rem; font-weight: 700; font-size: 0.72rem; cursor: pointer; }
  .compare-go-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .compare-clear-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 16px; padding: 0.32rem 0.7rem; font-size: 0.7rem; cursor: pointer; }
  .compare-clear-btn:hover { border-color: var(--red); color: var(--red); }
  .compare-modal { background: #141414; border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem; width: 860px; max-width: 94vw; max-height: 88vh; overflow: auto; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,0.7); }
  .compare-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; margin-top: 0.8rem; }
  .compare-table th, .compare-table td { border: 1px solid var(--border); padding: 0.5rem 0.6rem; text-align: center; vertical-align: middle; }
  .compare-table .rowlabel { text-align: left; color: var(--muted); font-size: 0.7rem; white-space: nowrap; background: #181818; }
  .compare-table thead th { background: #1a1a1a; }
  .compare-poster { width: 66px; height: 96px; object-fit: cover; border-radius: 4px; background: #111; }
  .compare-work-title { font-size: 0.76rem; font-weight: 700; color: var(--text); margin-top: 0.3rem; }
  .compare-best { color: var(--gold); font-weight: 800; }

  .modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
  .modal-actions .wl-modal-btn, .modal-actions .cmp-modal-btn, .modal-actions .ph-save-btn, .modal-actions .ph-delete-btn { margin: 0; }
  .modal-actions .ph-save-btn, .modal-actions .ph-delete-btn { padding: 0.4rem 0.9rem; font-size: 0.76rem; }

  /* 모달 RT 확인 정보 */
  .modal-rtinfo { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.8rem; font-size: 0.72rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.3rem; }
  .modal-rtinfo .lbl { color: var(--gold); font-weight: 700; margin-right: 0.35rem; }
  .modal-rtinfo a { color: #6cb0f0; text-decoration: none; }
  .modal-rtinfo a:hover { text-decoration: underline; }
  .modal-src-edit { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
  .modal-src-edit input { flex: 1; background: #1a1a1a; border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 0.28rem 0.4rem; font-size: 0.7rem; font-family: inherit; }

  /* ── RT RANKING ── */
  .ranking-section.hidden { display: none; }

  /* 메인 포스터 대신 타이틀 로고가 들어간 썸네일.
     로고는 가로형이라 cover 로 두면 잘린다. 어느 화면이든 contain 으로 보여 준다. */
  /* 포스터 대신 표시되는 타이틀 로고. 로고는 가로로 긴 이미지라 cover 로 두면 잘리므로
   * contain 으로 전체가 보이게 하고, 남는 자리는 배경색으로 채운다.
   *
   * 여백을 padding 으로 주면 안 된다. CSS 의 퍼센트 padding 은 자기 크기가 아니라
   * **부모의 가로폭** 기준이라, 폭이 넓은 목록 행 안의 40px 썸네일에 8% 를 주면
   * 사방 100px 이 넘는 여백이 생겨 상자가 통째로 부풀고 이미지 자리가 0 이 된다.
   * (v2.15.4 에서 실제로 발생) 고정 px 여백도 화면마다 썸네일 크기가 달라 맞지 않는다.
   * contain 이 이미 이미지를 상자 안에 맞춰 넣으므로 여백은 필요 없다. */
  img.is-logo-fallback {
    object-fit: contain !important;
    background: #0c0c0e;
  }

  .ranking-intro {
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 2rem;
    line-height: 1.7;
  }
  .ranking-intro b { color: var(--gold); }

  /* ── 로튼토마토 랭킹 ──────────────────────────────────────────────
     정렬 토글 → TOP 3 포디움 → 4위 이하 순위 목록.
     4위 이하는 격자 카드가 아니라 한 줄짜리 순위 행(.rank-card)으로 통일한다.
     `.rank-card` 클래스명은 admin.js·watch-scores.js·search.js 가 참조하므로 바꾸지 말 것. */

  /* 정렬 토글 */
  .rank-sort {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    max-width: 560px;
    margin: 0 auto 2.2rem;
  }
  .rank-sort-btn {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .62rem .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(22,22,25,.9), rgba(11,11,13,.95));
    color: var(--muted);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, background .2s;
  }
  .rank-sort-btn::after {
    content: '';
    position: absolute;
    left: .9rem; right: .9rem; bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, var(--red), var(--gold));
    transform: scaleX(0);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
  }
  .rank-sort-name { font-size: .92rem; font-weight: 800; color: #cfcfd4; transition: color .2s; }
  .rank-sort-sub { font-size: .54rem; font-weight: 700; letter-spacing: .1em; color: #6d6d74; }
  .rank-sort-btn:hover { transform: translateY(-2px); border-color: rgba(201,168,76,.45); }
  .rank-sort-btn:hover .rank-sort-name { color: #f2eede; }
  .rank-sort-btn.is-active {
    border-color: rgba(201,168,76,.6);
    background: linear-gradient(180deg, rgba(201,168,76,.13), rgba(201,168,76,.02) 60%), rgba(14,14,16,.95);
  }
  .rank-sort-btn.is-active::after { transform: scaleX(1); }
  .rank-sort-btn.is-active .rank-sort-name { color: var(--gold); }
  .rank-sort-btn.is-active .rank-sort-sub { color: #9a9078; }
  .rank-sort-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* 점수 막대 — 포디움과 순위 행이 함께 쓴다 */
  .rank-meter { display: flex; align-items: center; gap: .4rem; }
  .rank-meter-label {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    flex: 0 0 auto;
    font-size: .6rem;
    font-weight: 700;
    color: var(--muted);
  }
  .rank-meter-label .icon { width: 13px; height: 13px; }
  .rank-meter-track {
    flex: 1 1 auto;
    min-width: 40px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    overflow: hidden;
  }
  /* span 이라 display 를 주지 않으면 inline 으로 남아 너비가 무시된다. */
  .rank-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.22,1,.36,1);
  }
  .rank-meter.critic .rank-meter-fill { background: linear-gradient(90deg, #b5271c, #E24136); }
  .rank-meter.audience .rank-meter-fill { background: linear-gradient(90deg, #9c7f2e, #C9A84C); }
  .rank-meter.is-rotten .rank-meter-fill { background: linear-gradient(90deg, #4a4a50, #6f6f78); }
  .rank-meter.is-na .rank-meter-fill { background: none; }
  .rank-meter-val {
    flex: 0 0 34px;
    text-align: right;
    font-size: .64rem;
    font-weight: 800;
    color: #e9e8e4;
    font-variant-numeric: tabular-nums;
  }
  .rank-meter.is-na .rank-meter-val { color: #63636a; }

  /* TOP 3 포디움 */
  .podium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    max-width: 860px;
    margin: 0 auto 2.6rem;
    align-items: end;
  }
  .podium-card {
    position: relative;
    cursor: pointer;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24,24,27,.95), rgba(10,10,12,.98));
    border: 1px solid var(--pc, var(--gold));
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  }
  .podium-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.6); }
  .podium-card.rank-1 { order: 2; --pc: #FFD700; box-shadow: 0 12px 34px rgba(255,215,0,.16); }
  .podium-card.rank-2 { order: 1; --pc: #C9C9D1; }
  .podium-card.rank-3 { order: 3; --pc: #CD7F32; }
  .podium-card::before {                 /* 상단 등수 색 띠 */
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 6;
    background: linear-gradient(90deg, transparent, var(--pc), transparent);
  }

  .podium-img-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #111114; }
  /* 포디움은 아래를 맞춰 세우므로(align-items:end) 1위 포스터를 더 **길게** 해야 위로 솟는다.
     여기를 2/3 보다 작은 값(더 짧은 포스터)으로 두면 1위가 오히려 낮아 보인다. */
  .podium-card.rank-1 .podium-img-wrap { aspect-ratio: 2/3.42; }
  .podium-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .podium-img-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(10,10,12,.92));
  }
  .podium-medal {
    position: absolute;
    top: .6rem; left: .6rem;
    z-index: 5;
    display: flex;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
    animation: medalPop .5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .podium-medal .icon { width: 30px; height: 30px; }
  @keyframes medalPop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    70% { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  .podium-rank-num {
    position: absolute;
    top: .55rem; right: .6rem;
    z-index: 5;
    min-width: 30px;
    padding: .1rem .45rem;
    border-radius: 8px;
    background: rgba(6,6,8,.78);
    border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
    color: var(--pc);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    line-height: 1.35;
    text-align: center;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .podium-info { padding: .85rem .9rem 1rem; }
  .podium-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.16rem;
    letter-spacing: .04em;
    line-height: 1.15;
    color: #f2f1ee;
    margin-bottom: .15rem;
  }
  .podium-title .icon { width: 15px; height: 15px; vertical-align: -2px; }
  .podium-year { font-size: .68rem; color: var(--muted); margin-bottom: .7rem; }
  .podium-meters { display: flex; flex-direction: column; gap: .35rem; }
  .podium-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .podium-total-label { font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
  .podium-total-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pc);
  }
  .podium-total-max { font-size: .6rem; color: #63636a; }

  /* 4위 이하 순위 목록 */
  .rank-list { display: flex; flex-direction: column; gap: .5rem; }
  .rank-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px 52px minmax(0, 1fr) minmax(180px, 250px) 74px;
    align-items: center;
    gap: .8rem;
    padding: .5rem .8rem .5rem .3rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: linear-gradient(90deg, rgba(20,20,23,.9), rgba(12,12,14,.92));
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s, background .18s;
  }
  .rank-card:hover {
    transform: translateX(3px);
    border-color: rgba(201,168,76,.55);
    background: linear-gradient(90deg, rgba(201,168,76,.08), rgba(12,12,14,.92));
  }
  .rank-num-badge {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    color: #6f6f78;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .rank-card:hover .rank-num-badge { color: var(--gold); }
  .rank-thumb {
    aspect-ratio: 2/3;
    border-radius: 6px;
    overflow: hidden;
    background: #111114;
  }
  .rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rank-main { min-width: 0; }
  .rank-title {
    font-size: .86rem;
    font-weight: 700;
    color: #eceae6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rank-sub {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .18rem;
    font-size: .62rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .rank-type {
    padding: .06rem .34rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .06em;
  }
  .rank-meters { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
  .rank-score { text-align: right; }
  .rank-score-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }
  .rank-score-label { font-size: .54rem; font-weight: 700; letter-spacing: .08em; color: #63636a; }

  .rank-section-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
  }
  .rank-section-label span { font-family: 'Noto Sans KR', sans-serif; font-size: .7rem; letter-spacing: 0; }

  /* TOP3 카드 파티클 (등수별 색상) */
  .rank-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
    border-radius: 14px;
  }
  .rank-particle {
    position: absolute;
    bottom: -6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: rankParticleFloat linear infinite;
  }
  .rank-particle.gold {
    background: radial-gradient(circle, #fff 0%, #FFD700 55%, transparent 100%);
    box-shadow: 0 0 6px 2px rgba(255,215,0,0.6);
  }
  .rank-particle.silver {
    background: radial-gradient(circle, #fff 0%, #C9C9D1 55%, transparent 100%);
    box-shadow: 0 0 6px 2px rgba(201,201,209,0.6);
  }
  .rank-particle.bronze {
    background: radial-gradient(circle, #fff 0%, #CD7F32 55%, transparent 100%);
    box-shadow: 0 0 6px 2px rgba(205,127,50,0.6);
  }
  @keyframes rankParticleFloat {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-260px) translateX(var(--pf-x, 10px)); opacity: 0; }
  }
  /* ── SCROLL TO TOP ── */
  #scrollTopBtn {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, background 0.2s;
  }
  #scrollTopBtn.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #scrollTopBtn:hover { background: var(--gold); color: #1a1500; }

  /* 사이트 버전·정보 버튼 (실제 푸터 흐름 안, 콘텐츠 비가림) */
  .site-version {
    position: static;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 1rem auto 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    opacity: 0.42;
    font-family: 'Noto Sans KR', sans-serif;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .site-version b { color: var(--gold); font-weight: 700; }
  .site-meta-actions {
    position: static;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    margin: 0 auto;
  }
  .patch-notes-btn,
  .rights-notice-btn {
    position: static;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    color: var(--muted); font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.05em; padding: 0.2rem 0.6rem;
    border-radius: 5px; cursor: pointer; transition: all 0.2s;
  }
  .patch-notes-btn:hover,
  .rights-notice-btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); }
  .patch-modal { background: #141414; border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem 1.6rem 1.8rem; width: 520px; max-width: 92vw; max-height: 86vh; overflow-y: auto; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,0.7); }
  .patch-modal-close { position: absolute; top: 0.85rem; right: 0.95rem; z-index: 4; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
  .patch-modal-close:hover { color: var(--text); }
  .patch-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
  .patch-modal-sub { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.2rem; }
  .patch-entry { border-left: 2px solid var(--gold); padding: 0.2rem 0 0.6rem 0.9rem; margin-bottom: 1rem; }
  .patch-entry-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
  .patch-ver { font-size: 0.95rem; font-weight: 800; color: var(--gold); }
  .patch-ts { font-size: 0.66rem; color: var(--muted); }
  .patch-notes-list { margin: 0; padding-left: 1.1rem; }
  .patch-notes-list li { font-size: 0.76rem; color: var(--text); line-height: 1.55; }
  .rights-modal { width: 620px; }
  .rights-notice-body { display: grid; gap: 0.85rem; }
  .rights-notice-body section { border-left: 2px solid rgba(201,168,76,0.72); padding: 0.1rem 0 0.1rem 0.9rem; }
  .rights-notice-body h3 { margin: 0 0 0.35rem; color: var(--gold); font-size: 0.82rem; letter-spacing: 0.08em; }
  .rights-notice-body p,
  .rights-notice-body li { margin: 0; color: var(--text); font-size: 0.75rem; line-height: 1.7; word-break: keep-all; }
  .rights-notice-body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
  .rights-legal-note { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.025); color: var(--muted) !important; font-size: 0.68rem !important; }

  /* ── FAVORITES (<svg class="icon"><use href="#i-star"></use></svg> 즐겨찾기) ── */
  .fav-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s, border-color 0.2s;
  }
  .poster-card:hover .fav-btn,
  .poster-card:focus-within .fav-btn,
  .fav-btn.faved { opacity: 1; }
  .fav-btn:hover { transform: scale(1.15); border-color: var(--gold); color: var(--gold); }
  .fav-btn.faved {
    color: var(--gold);
    border-color: var(--gold);
    text-shadow: 0 0 8px rgba(201,168,76,0.7);
  }

  /* ── 검색 결과 카운트 바 ── */
  .search-result-bar {
    display: none;
    position: sticky;
    top: 64px;
    z-index: 90;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: rgba(10,10,10,0.92);
    border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .search-result-bar.show { display: block; }

  /* ── 키보드 포커스 표시 (접근성) ── */
  .poster-card:focus-visible,
  .podium-card:focus-visible,
  .rank-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ── 모션 최소화 설정 존중 (접근성) ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ── ADMIN (관리자 로그인) ── */
  .admin-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9rem;
    padding: 0.28rem 2rem;
    background: #050505;
    border-bottom: 1px solid #161616;
  }
  .admin-info-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: auto;
  }
  /* ── MCU VIEWING FLOW — 관람 순서 마인드맵 ──
     세로 줄기(.mm-trunk)를 따라 본 줄기 작품이 이어지고, 선행 학습 갈래는
     줄기에서 옆으로 뻗어 나갔다가 특정 작품으로 합류한다.
     선은 전부 CSS 테두리로 그린다. SVG 절대좌표 방식으로 바꾸지 말 것. */
  /* ── 보기 방식 탭 (RELEASE TIMELINE / MCU VIEWING FLOW) ──
     두 섹션이 각자 자기 탭에 .is-active 를 갖고 있다. 한 번에 하나만 보이므로
     JavaScript 로 활성 상태를 동기화할 필요가 없다. */
  .view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
  }
  .view-tab {
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 74px;
    padding: .9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(22,22,25,.9), rgba(11,11,13,.95));
    color: var(--muted);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, color .2s, background .2s, box-shadow .2s;
  }
  .view-tab::after {                       /* 하단 강조선 */
    content: '';
    position: absolute;
    left: 1.1rem; right: 1.1rem; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--red), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
  }
  .view-tab .icon {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 10px;
    background: rgba(201,168,76,.06);
    color: #8a8a90;
    transition: color .2s, background .2s, border-color .2s;
  }
  .view-tab-text { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
  .view-tab-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.18rem;
    letter-spacing: .07em;
    line-height: 1.05;
    color: #cfcfd4;
    transition: color .2s;
  }
  .view-tab-sub {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6d6d74;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .view-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(201,168,76,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.3);
  }
  .view-tab:hover .icon { color: var(--gold); background: rgba(201,168,76,.12); }
  .view-tab:hover .view-tab-name { color: #f2eede; }
  .view-tab:hover::after { transform: scaleX(.45); }
  .view-tab.is-active {
    border-color: rgba(201,168,76,.6);
    background:
      linear-gradient(180deg, rgba(201,168,76,.13), rgba(201,168,76,.02) 60%),
      rgba(14,14,16,.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.35);
  }
  .view-tab.is-active::after { transform: scaleX(1); }
  .view-tab.is-active .icon { color: var(--gold); background: rgba(201,168,76,.16); border-color: rgba(201,168,76,.5); }
  .view-tab.is-active .view-tab-name { color: var(--gold); }
  .view-tab.is-active .view-tab-sub { color: #9a9078; }
  .view-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .view-count { display: flex; justify-content: center; margin-bottom: 1.1rem; }

  /* ── 뱀 모양(serpentine) 관람 순서 격자 ──
     1행 왼→오, 2행 오→왼으로 접히며 이어진다. 행 방향은 JS 가 붙이는 .is-rtl 로 갈리고
     열 개수가 바뀌면 flow.js 가 다시 그린다. 여기서 열 개수를 바꾸면 화살표가 어긋난다. */
  /* 한 행은 항상 3열(JS 의 SF_COLS 와 같아야 한다).
     카드는 폭에 맞춰 늘어나므로 화면 크기가 바뀌어도 다시 그릴 필요가 없다.
     열 수를 바꾸려면 flow.js 의 SF_COLS 와 여기 --sf-cols 를 함께 고쳐야 한다. */
  .sf-segment, .sf-branch-body {
    --sf-cols: 3;
    --sf-arrow: 30px;
    --sf-gap: .45rem;
    /* 카드 한 장 폭 = 항상 3열 기준. 카드가 2장뿐인 마지막 행에서도 같은 크기여야 하므로
       flex 로 늘어나게 두지 말고 이 값으로 고정한다. 꺾임 화살표도 같은 폭을 쓴다. */
    --sf-card-w: calc((100% - (var(--sf-cols) - 1) * (var(--sf-arrow) + var(--sf-gap) * 2)) / var(--sf-cols));
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 690px;
    margin-inline: auto;
  }
  .sf-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;   /* row-reverse 행은 자동으로 오른쪽부터 채워진다 */
    width: 100%;
    gap: var(--sf-gap);
  }
  .sf-row.is-rtl { flex-direction: row-reverse; }
  /* 마지막 낱개 작품 줄은 가운데로 모은다.
     꺾임 화살표는 꽉 찬 줄 뒤에만 오므로 정렬을 바꿔도 어긋나지 않는다. */
  .sf-row.is-partial { justify-content: center; }

  /* 화살표 색은 어두운 포스터 위에서도 또렷하게 보이는 밝은 금색으로 둔다.
     반투명하게 낮추면 흐름이 안 보인다. */
  .sf-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--sf-arrow);
    color: #FFD76B;
    filter: drop-shadow(0 0 5px rgba(255,199,84,.45));
    padding-bottom: 2.1rem;          /* 포스터 중앙 높이에 맞춤 */
  }
  .sf-arrow svg { width: 24px; height: 24px; }
  .sf-row.is-rtl .sf-arrow svg { transform: scaleX(-1); }

  .sf-turn {
    display: flex;
    padding: .1rem 0;
  }
  .sf-turn.at-end { justify-content: flex-end; }
  .sf-turn.at-start { justify-content: flex-start; }
  .sf-turn.at-center { justify-content: center; }
  /* 카드 한 장 폭을 차지해 마지막 카드 정중앙 아래에 놓인다. */
  .sf-down {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sf-card-w);
    color: #FFD76B;
    filter: drop-shadow(0 0 5px rgba(255,199,84,.45));
  }
  .sf-down svg { width: 26px; height: 26px; }

  /* 선행 학습 갈래 */
  .sf-branch {
    position: relative;
    margin: .3rem auto;
    max-width: 100%;
    /* 좌우 패딩을 두면 갈래 안 카드가 본 줄기 카드보다 좁아진다.
       가로 여백은 머리말·합류 문구에만 주고 카드 영역은 전체 폭을 쓴다. */
    padding: .85rem 0 .7rem;
    border: 1px solid color-mix(in srgb, var(--bc) 34%, transparent);
    border-radius: 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bc) 11%, transparent), transparent 55%),
      rgba(8,8,10,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.3);
  }
  .sf-branch.is-optional { border-style: dashed; }
  .sf-branch::after {
    content: '';
    position: absolute;
    left: 0; top: .9rem; bottom: .9rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bc);
  }
  .sf-branch.is-optional::after { opacity: .45; }
  .sf-branch-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding-inline: .9rem; }
  .sf-branch-kind {
    padding: .26rem .68rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bc) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent);
    color: var(--bc);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .sf-branch.is-required .sf-branch-kind { background: var(--bc); color: #14100c; border-color: var(--bc); }
  .sf-branch-label { font-size: 1rem; font-weight: 800; color: #f0efec; }
  .sf-branch-count {
    margin-left: auto;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
  }
  .sf-branch-body { margin-top: .7rem; }
  .sf-branch-merge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .75rem;
    padding: .6rem .9rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
    color: color-mix(in srgb, var(--bc) 82%, #fff);
    font-size: .82rem;
    font-weight: 700;
  }
  .sf-branch-merge .icon { width: 17px; height: 17px; }
  .sf-branch-merge b { color: #f0efec; }

  /* 작품 카드 — 메인 포스터(2:3) */
  .sf-card {
    position: relative;
    flex: 0 0 var(--sf-card-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(24,24,27,.9), rgba(12,12,14,.95));
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .2s;
  }
  .sf-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,168,76,.75);
    box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.2);
    z-index: 3;
  }
  .sf-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .sf-card.is-watched { border-color: rgba(63,143,92,.5); }
  .sf-card.is-fav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: 4;
  }
  .sf-no {
    position: absolute;
    top: 4px; left: 4px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 6px;
    background: rgba(6,6,8,.82);
    border: 1px solid rgba(201,168,76,.42);
    color: var(--gold);
    font-size: .53rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .sf-thumb {
    position: relative;
    aspect-ratio: 2 / 3;
    background: #08080a;
    overflow: hidden;
  }
  .sf-thumb::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38%;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(12,12,14,.85));
    pointer-events: none;
  }
  .sf-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .sf-card:hover .sf-thumb img { transform: scale(1.06); }
  .sf-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    text-align: center;
    color: #55555c;
    font-size: .55rem;
    line-height: 1.35;
  }
  .sf-badge {
    position: absolute;
    top: 4px;
    z-index: 3;
    width: 16px; height: 16px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,6,8,.8);
    border: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .sf-badge .icon { width: 10px; height: 10px; }
  .sf-badge.fav { right: 4px; color: var(--gold); }
  .sf-badge.watch { right: 24px; }
  /* 제목 줄 수가 1줄이든 2줄이든 카드 높이가 같도록 항상 2줄 높이를 차지한다.
     box-sizing 이 border-box 라 위쪽 패딩까지 더해야 2줄짜리와 높이가 맞는다. */
  .sf-card-title {
    padding: .42rem .4rem 0;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.34;
    min-height: calc(2 * 1.34em + .42rem);
    color: #e9e8e4;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sf-card-year {
    padding: .14rem .4rem .48rem;
    font-size: .64rem;
    font-weight: 600;
    color: #7b7b83;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .admin-info-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 28px;
    padding: .25rem .58rem;
    border: 1px solid #262626;
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #777;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .07em;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s, border-color .18s, background .18s;
  }
  .admin-info-btn .icon { width: 13px; height: 13px; }
  .admin-info-btn:hover,
  .admin-info-btn:focus-visible {
    color: var(--gold);
    border-color: rgba(201,168,76,.5);
    background: rgba(201,168,76,.08);
  }
  .admin-info-btn:focus-visible { outline: 2px solid rgba(201,168,76,.42); outline-offset: 2px; }
  .admin-status {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
  }
  .cloud-profile-status {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    min-height: 28px;
    padding: .25rem .62rem;
    border: 1px solid #292929;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #777;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    white-space: nowrap;
  }
  .cloud-profile-status .icon { width: 13px; height: 13px; }
  .cloud-profile-status:hover { color: var(--gold); border-color: rgba(201,168,76,.46); }
  .cloud-profile-status.sync-online { color: #65d28b; border-color: rgba(101,210,139,.38); }
  .cloud-profile-status.sync-loading { color: var(--gold); border-color: rgba(201,168,76,.38); }
  /* auth 상태도 cloud-sync.js 에서 sync-setup 클래스를 쓴다 (별도 sync-auth 클래스는 없음) */
  .cloud-profile-status.sync-setup { color: #ffb74d; border-color: rgba(255,183,77,.38); }
  .cloud-profile-status.sync-offline { color: #ff6b78; border-color: rgba(255,107,120,.38); }
  .cloud-profile-status.sync-local { color: #8eb8ff; border-color: rgba(142,184,255,.38); }
  .cloud-profile-status.sync-conflict { color: #ff9f43; border-color: rgba(255,159,67,.55); }
  .admin-login-btn {
    background: none;
    border: 1px solid transparent;
    color: #555;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .admin-login-btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.4); }

  /* 배경 선택 버튼 + 드롭다운 목록 (관리자 전용) */
  .bg-menu-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(201,168,76,0.12); border: 1px solid var(--gold); color: var(--gold);
    font-family: 'Noto Sans KR', sans-serif; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.26rem 0.7rem; border-radius: 4px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
  }
  .bg-menu-btn:hover { background: var(--gold); color: #1a1500; }
  /* 배경 선택 모달 (화면 중앙 오버레이 페이지) */
  .bg-modal {
    background: #141414; border: 1px solid var(--border); border-radius: 12px;
    padding: 1.6rem 1.6rem 1.8rem; width: 400px; max-width: 92vw; position: relative;
    box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  }
  .bg-modal-close {
    position: absolute; top: 0.85rem; right: 0.95rem; z-index: 4; background: none; border: none;
    color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color 0.2s;
  }
  .bg-modal-close:hover { color: var(--text); }
  .bg-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
  .bg-modal-sub { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.2rem; }
  .bg-option-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .bg-option {
    display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left;
    background: #1a1a1a; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.8rem 0.9rem; cursor: pointer; transition: all 0.18s; position: relative;
    font-family: 'Noto Sans KR', sans-serif;
  }
  .bg-option:hover { border-color: var(--gold); background: #1f1c15; }
  .bg-swatch { width: 60px; height: 40px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }
  .bg-swatch-default { background: radial-gradient(circle at 30% 30%, #2b2b2b, #0a0a0a 80%); }
  .bg-swatch-doom {
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.3)), url('../posters/news/official/2026_어벤져스 둠스데이 티저 포스터.jpg');
    background-size: cover;
    background-position: 50% 42%;
  }
  .bg-option-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
  .bg-option-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
  .bg-option-desc { font-size: 0.7rem; color: var(--muted); }
  .bg-option-check { color: var(--gold); opacity: 0; font-size: 1.15rem; flex-shrink: 0; }
  .bg-option.active { border-color: var(--gold); background: rgba(201,168,76,0.1); }
  .bg-option.active .bg-option-name { color: var(--gold); }
  .bg-option.active .bg-option-check { opacity: 1; }

  .admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: 950;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .admin-overlay.open { display: flex; }
  .mobile-overlay-close { display: none; }
  .admin-modal {
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem 2.2rem;
    width: 320px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .cloud-setup-modal {
    position: relative;
    width: min(720px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.8rem 2rem 2rem;
    border: 1px solid rgba(201,168,76,.34);
    border-radius: 14px;
    background: linear-gradient(145deg,#171612,#101010 42%);
    box-shadow: 0 24px 80px rgba(0,0,0,.76);
  }
  .cloud-setup-modal .admin-modal-title { margin-bottom: .75rem; text-align: left; }
  .cloud-setup-lead { margin: 0 2.5rem .9rem 0; color: var(--text); font-size: .82rem; line-height: 1.7; }
  .cloud-setup-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .95rem;
    padding: .68rem .8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    color: var(--muted);
    font-size: .72rem;
  }
  .cloud-setup-current strong { color: var(--gold); font-size: .72rem; letter-spacing: .06em; }
  .cloud-conflict-box { margin: 0 0 .9rem; padding: .85rem; border: 1px solid rgba(255,159,67,.48); border-radius: 8px; background: rgba(255,159,67,.07); }
  .cloud-conflict-box > b { color: #ffb15c; font-size: .8rem; letter-spacing: .04em; }
  .cloud-conflict-box p { margin: .45rem 0 .65rem; color: var(--text); font-size: .72rem; line-height: 1.55; }
  .cloud-conflict-box small { display: block; margin-top: .55rem; color: var(--muted); font-size: .64rem; line-height: 1.45; }
  .cloud-conflict-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
  .cloud-conflict-actions button { min-height: 38px; padding: .55rem .75rem; border: 1px solid rgba(201,168,76,.55); border-radius: 6px; background: rgba(0,0,0,.42); color: var(--gold); font-weight: 800; cursor: pointer; }
  .cloud-conflict-actions button:last-child { border-color: rgba(255,159,67,.65); color: #ffb15c; }
  .cloud-setup-steps { display: grid; gap: .58rem; margin: 0 0 .9rem; padding: 0; list-style: none; counter-reset: cloud-step; }
  .cloud-setup-steps li {
    counter-increment: cloud-step;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: .22rem .72rem;
    min-width: 0;
    padding: .72rem .78rem;
    border: 1px solid #2a2925;
    border-radius: 9px;
    background: rgba(255,255,255,.025);
  }
  .cloud-setup-steps li::before {
    content: counter(cloud-step);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: #171200;
    font: 800 .74rem 'Noto Sans KR',sans-serif;
  }
  .cloud-setup-steps b { color: var(--text); font-size: .78rem; }
  .cloud-setup-steps span { grid-column: 2; color: var(--muted); font-size: .7rem; line-height: 1.55; overflow-wrap: anywhere; }
  .cloud-setup-steps button {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 34px;
    padding: .38rem .6rem;
    border: 1px solid rgba(201,168,76,.46);
    border-radius: 6px;
    background: rgba(201,168,76,.08);
    color: var(--gold);
    font-size: .64rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .cloud-setup-modal code {
    padding: .08rem .3rem;
    border: 1px solid rgba(201,168,76,.24);
    border-radius: 4px;
    background: #090909;
    color: #edd26d;
    font: 600 .94em ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  .cloud-setup-note {
    margin-bottom: 1rem;
    padding: .75rem .85rem;
    border-left: 3px solid var(--gold);
    background: rgba(201,168,76,.07);
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.65;
  }
  .cloud-setup-note b { color: var(--gold); }
  .admin-modal-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 1.2rem;
  }
  .form-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 4;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--muted);
    cursor: pointer;
  }
  .form-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.14); }
  .admin-modal input {
    display: block;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  .admin-modal input:focus { border-color: var(--gold); }
  .admin-error {
    font-size: 0.72rem;
    color: var(--red);
    min-height: 1.1em;
    margin: 0.2rem 0 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .admin-error.show { opacity: 1; }
  .admin-modal-buttons { display: flex; gap: 0.6rem; }
  .admin-modal-buttons button {
    flex: 1;
    padding: 0.55rem 0;
    border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .admin-submit-btn {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: #1a1500;
  }
  .admin-submit-btn:hover { filter: brightness(1.12); box-shadow: 0 0 14px rgba(201,168,76,0.4); }
  .admin-cancel-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .admin-cancel-btn:hover { color: var(--text); border-color: #444; }
  /* ── MARVEL NEWS (오피셜 소식 + 루머 게시판) ── */
  .news-intro {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
  }
  .news-cat-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
  }
  .news-cat-tab {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .news-cat-tab:hover { color: var(--text); border-color: #444; }
  .news-cat-tab.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  .news-cat-toggle { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
  .news-cat-btn {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 0.55rem 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .news-cat-btn:hover { color: var(--text); }
  .news-cat-btn.active[id="newsCatOfficialBtn"] { background: #2f5fa8; border-color: #2f5fa8; color: #fff; }
  .news-cat-btn.active[id="newsCatRumorBtn"] { background: var(--red); border-color: var(--red); color: #fff; }
  .news-cat-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    z-index: 2;
  }
  .news-cat-badge.news-cat-official { background: #2f5fa8; color: #fff; }
  .news-cat-badge.news-cat-rumor { background: var(--red); color: #fff; }

  .news-write-btn {
    display: inline-block;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.1rem;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 1.4rem;
    transition: filter 0.2s;
  }
  .news-write-btn:hover { filter: brightness(1.12); }
  .news-empty {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 2rem 0;
    text-align: center;
  }
  .news-card {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
  .news-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--red);
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  }
  .news-thumb-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #111;
    overflow: hidden;
  }
  .news-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
  .news-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.4; }
  .news-play-badge {
    position: absolute;
    bottom: 0.5rem; right: 0.5rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
  }
  .news-card-info { padding: 0.8rem 0.9rem; }
  .news-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-card-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); }
  .news-card-meta .news-author { color: var(--gold); font-weight: 700; }

  body.list-mode .news-card { display: flex; flex-direction: row; align-items: stretch; }
  body.list-mode .news-thumb-wrap { width: 160px; flex-shrink: 0; }
  body.list-mode .news-card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  body.list-mode .news-card-title { -webkit-line-clamp: 1; }

  .news-card-num {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    z-index: 1;
  }
  .news-card-num-all { background: var(--gold); color: #1a1a1a; }
  .news-reorder { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
  .news-reorder-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: #1c1c1c;
    color: var(--text);
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.2s, color 0.2s;
  }
  .news-reorder-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
  .news-reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  .news-write-modal {
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.8rem 2rem;
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .news-write-modal input,
  .news-write-modal textarea {
    display: block;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.7rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  .news-write-modal input:focus,
  .news-write-modal textarea:focus { border-color: var(--gold); }
  .news-write-modal textarea { resize: vertical; min-height: 100px; }
  .news-write-modal label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .news-img-preview {
    max-width: 100%;
    max-height: 160px;
    border-radius: 6px;
    margin-bottom: 0.7rem;
    display: none;
  }
  .news-img-preview.show { display: block; }

  .news-detail-modal {
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    padding: 1.8rem 2rem 2rem;
    position: relative;
    text-align: left;
  }
  .news-detail-close {
    position: absolute;
    top: 1rem; right: 1rem; z-index: 4;
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
  }
  .news-detail-close:hover { background: rgba(255,255,255,0.15); }
  .news-detail-title { font-size: 1.3rem; font-weight: 700; margin: 0.2rem 2.2rem 0.5rem 0; }
  .news-detail-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 1.1rem; }
  .news-detail-meta .news-author { color: var(--gold); font-weight: 700; margin-right: 0.6rem; }
  .news-detail-media { margin-bottom: 1.1rem; }
  .news-detail-media img { width: 100%; border-radius: 8px; display: block; }
  .news-detail-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
  .news-detail-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .news-detail-body { font-size: 0.92rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; margin-bottom: 1.2rem; }
  .news-detail-actions { display: flex; gap: 0.6rem; }
  .news-detail-edit-btn,
  .news-detail-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .news-detail-edit-btn {
    background: none;
    border: 1px solid var(--gold);
    color: var(--gold);
  }
  .news-detail-edit-btn:hover { background: var(--gold); color: #1a1500; }
  .news-detail-delete-btn {
    background: none;
    border: 1px solid var(--red);
    color: var(--red);
  }
  .news-detail-delete-btn:hover { background: var(--red); color: #fff; }

  .admin-modal.shake { animation: adminShake 0.4s; }
  @keyframes adminShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
  }

  .admin-toast {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translate(-50%, -12px);
    background: rgba(18,18,18,0.97);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.7rem 1.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    white-space: nowrap;
  }
  .admin-toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* ── 관리자 메모 (모달 내 한줄평) ── */
  .modal-note {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(201,168,76,0.07);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
  }
  .modal-note-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 0.3rem;
  }
  .modal-note-edit { margin-top: 0.8rem; }
  .modal-note-edit textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    resize: vertical;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
    padding: 0.55rem 0.7rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .modal-note-edit textarea:focus { border-color: var(--gold); }
  .modal-note-edit-buttons { display: flex; gap: 0.5rem; margin-top: 0.45rem; }
  .modal-note-edit-buttons button {
    padding: 0.35rem 0.9rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.2s;
  }
  .note-save-btn { background: var(--gold); border: 1px solid var(--gold); color: #1a1500; }
  .note-save-btn:hover { filter: brightness(1.1); }
  .note-delete-btn { background: none; border: 1px solid var(--border); color: var(--muted); }
  .note-delete-btn:hover { color: var(--red); border-color: var(--red); }

  /* ── 모달 상세 정보 (박스오피스 · 러닝타임 · 수상) ── */
  .modal-trailer-wrap { margin-top: 6px; }
  .modal-trailer-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.35rem;
    font-weight: 700;
  }
  .modal-trailer-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
  }
  .modal-trailer-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .modal-detail-rows {
    margin-top: 1.1rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-size: 0.8rem;
    line-height: 1.5;
  }
  .detail-label {
    flex-shrink: 0;
    width: 108px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-transform: uppercase;
  }
  .detail-value { color: var(--text); }
  .detail-row.awards .detail-value { color: #E8C55A; }

  /* ── 시청 완료(<svg class="icon"><use href="#i-check"></use></svg>) 버튼 — 즐겨찾기 별 아래 ── */
  .watch-btn {
    position: absolute;
    top: 44px;
    left: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s, border-color 0.2s;
  }
  .poster-card:hover .watch-btn,
  .poster-card:focus-within .watch-btn,
  .watch-btn.watched { opacity: 1; }
  .watch-btn:hover { transform: scale(1.15); border-color: #7DDB8A; color: #7DDB8A; }
  .watch-btn.watched {
    color: #7DDB8A;
    border-color: #7DDB8A;
    text-shadow: 0 0 8px rgba(125,219,138,0.7);
  }

  /* ── 모달 관리자 도구 (시청 체크 · 점수 수정) ── */
  .modal-admin-tools {
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(201,168,76,0.35);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
  }
  .modal-admin-tools .tool-label {
    width: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold);
  }
  .modal-admin-tools input[type="number"] {
    width: 62px;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    padding: 0.3rem 0.4rem;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .modal-admin-tools input[type="number"]:focus { border-color: var(--gold); }
  .modal-admin-tools button {
    padding: 0.35rem 0.8rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: all 0.2s;
  }
  .modal-admin-tools button:hover { color: var(--text); border-color: #555; }
  .modal-admin-tools .tool-primary { background: var(--gold); border-color: var(--gold); color: #1a1500; }
  .modal-admin-tools .tool-primary:hover { filter: brightness(1.1); color: #1a1500; }

  /* ── 시청 진행률 대시보드 (STATS) ── */
  .watch-progress-total {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
  }
  .watch-progress-total b {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    color: #7DDB8A;
    letter-spacing: 0.02em;
  }
  .watch-progress-total span { color: var(--muted); font-size: 0.8rem; }
  .wp-row { margin-bottom: 0.75rem; }
  .wp-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }
  .wp-row-head b { color: var(--text); font-weight: 700; }
  .wp-bar {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
  }
  .wp-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #2e7d32, #7DDB8A);
    transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  }

  /* ── <svg class="icon"><use href="#i-coin"></use></svg> WORLD BOX OFFICE RANKING ── */
  .boxoffice-section { margin-bottom: 4rem; }
  .bo-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .bo-row {
    display: grid;
    grid-template-columns: 44px 40px 1fr minmax(120px, 300px) 92px;
    align-items: center;
    gap: 0.9rem;
    padding: 0.45rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .bo-row:hover {
    transform: translateX(3px);
    border-color: var(--gold);
    box-shadow: -3px 0 0 var(--gold), 0 4px 14px rgba(0,0,0,0.4);
  }
  .bo-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .bo-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    color: var(--muted);
    text-align: center;
  }
  .bo-row.top3 .bo-rank { font-size: 1.3rem; }
  .bo-thumb {
    width: 38px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 4px;
    background: #1a1a1a;
    display: block;
  }
  .bo-info { min-width: 0; }
  .bo-title {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bo-sub { font-size: 0.64rem; color: var(--muted); letter-spacing: 0.04em; }
  .bo-bar-wrap {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
  }
  .bo-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #7a5c1e, var(--gold));
  }
  .bo-amount {
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.03em;
  }

  /* ── <svg class="icon"><use href="#i-calendar"></use></svg> RELEASE TIMELINE (연도별 타임라인 뷰) ── */
  .timeline-section { margin-bottom: 4rem; }
  .tl-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: 2.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--muted);
  }
  .tl-legend .tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.35rem;
    vertical-align: -1px;
    box-shadow: inset -1px -1px 2px rgba(0,0,0,0.4), inset 1px 1px 2px rgba(255,255,255,0.3);
  }
  .tl-wrap {
    position: relative;
    padding-left: 110px;
  }
  .tl-wrap::before {
    content: '';
    position: absolute;
    left: 86px;
    top: 4px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--red), var(--gold) 40%, var(--gold));
    opacity: 0.45;
  }
  .tl-year-block {
    position: relative;
    margin-bottom: 2.4rem;
  }
  .tl-year-marker {
    position: absolute;
    left: -110px;
    top: -2px;
    width: 72px;
    text-align: right;
  }
  .tl-year-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    letter-spacing: 0.04em;
  }
  .tl-year-count {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: var(--muted);
  }
  .tl-year-block::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(201,168,76,0.8);
  }
  .tl-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 0.8rem;
  }
  .tl-card {
    width: 92px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .tl-card:hover { transform: translateY(-4px); }
  .tl-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
  .tl-thumb {
    position: relative;
    aspect-ratio: 2/3;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    border-left: 3px solid var(--uc, #555);
    box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  }
  .tl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
  }
  .tl-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.4rem;
    font-size: 0.56rem;
    color: var(--muted);
    line-height: 1.4;
  }
  .tl-badge {
    position: absolute;
    right: 4px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    z-index: 2;
  }
  .tl-fav { top: 4px; color: var(--gold); }
  .tl-watch { top: 24px; color: #7DDB8A; }
  .tl-title {
    margin-top: 0.35rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tl-sub {
    margin-top: 0.12rem;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  /* ── FOOTER ── */
  footer {
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  .footer-disclaimer { margin: 0 auto 1rem; max-width: 680px; color: #6f6f6f; font-size: 0.68rem; line-height: 1.8; letter-spacing: 0.035em; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .header-inner { flex-wrap: wrap; height: auto; padding: 0.75rem 0; gap: 0.6rem; }
    nav { width: 100%; order: 3; }
    .search-box { order: 2; margin-left: auto; }
    .search-box input { width: 100px; }
    .search-kbd-hint { display: none; }
    .poster-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.9rem; }
    body.list-mode #trailerMovieSelect { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.9rem; }
    .modal { flex-direction: column; }
    .modal-poster-col { width: 100%; }
    .modal-poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
    .modal-poster.is-logo-media { object-fit: contain; object-position: center; padding: 1rem; }
    .modal-poster-placeholder { width: 100%; height: 180px; aspect-ratio: unset; }
    .stats-bar { gap: 1.5rem; }
  }