/* base.css — 변수·배경·헤더·내비·드롭다운·검색·뷰 토글 */
  :root {
    --red: #E8001C;
    --gold: #C9A84C;
    --dark: #0A0A0A;
    --card-bg: #141414;
    --border: #2a2a2a;
    --text: #E8E8E8;
    --muted: #888;
    --phase1: #4A90D9;
    --phase2: #7B68EE;
    --phase3: #E8001C;
    --phase4: #00BCD4;
    --phase5: #FF6B35;
    --phase6: #C9A84C;
    --phase7: #76E06E;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--dark);
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    min-height: 100vh;
  }

  /* ── 어벤져스: 둠스데이 티저 포스터 배경 ──
     넓은 화면은 전체 포스터를 보존하고, 세로형 휴대폰은 responsive.css에서 화면을 채우도록 전환한다. */
  .doom-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    overflow: hidden;
    background: #070604;
  }
  .doom-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    opacity: 0;
    filter: brightness(0.56) saturate(0.88) contrast(1.06);
    transition: opacity 0.24s ease;
  }
  .doom-bg.is-loaded .doom-bg-image { opacity: 1; }
  .doom-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(5,4,3,0.82) 0%, transparent 23%, transparent 77%, rgba(5,4,3,0.82) 100%),
      linear-gradient(180deg, rgba(5,4,3,0.24) 0%, transparent 36%, rgba(5,4,3,0.5) 100%);
  }
  /* 배경 '기본' 선택 시: 둠스데이 포스터·비네트를 숨기고 원래의 별 배경만 표시한다. */
  body.bg-default .doom-bg,
  body.bg-default .doom-vignette { display: none; }
  body.bg-default .site-bg-texture { opacity: 0.5; }

  /* 포스터 위 콘텐츠의 가독성을 위해 가장자리와 하단을 은은하게 누른다. */
  .doom-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 78% 72% at 50% 42%, transparent 38%, rgba(6,4,2,0.58) 100%),
      linear-gradient(to bottom, rgba(6,4,2,0.4) 0%, transparent 18%, transparent 80%, rgba(6,4,2,0.55) 100%);
  }

  /* ── 사이트 전체 배경 텍스처 (암호창과 톤 통일) ── */
  .site-bg-texture {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
    background-image:
      radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 35% 9%, rgba(255,255,255,0.45) 0%, transparent 100%),
      radial-gradient(1px 1px at 48% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 75% 42%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 88% 8%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 5% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 30% 82%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 55% 88%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 95% 60%, rgba(255,255,255,0.35) 0%, transparent 100%);
    background-size: 900px 900px;
    animation: siteBgDrift 60s linear infinite;
  }
  @keyframes siteBgDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-60px, -90px); }
  }

  #siteContent > *:not(.site-bg-texture):not(.doom-bg):not(.doom-vignette):not(.modal-overlay):not(.admin-overlay):not(header) { position: relative; z-index: 1; }

  /* ── HEADER ── */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10,10,10,0.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    transition: background 0.3s, -webkit-backdrop-filter 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-bottom-color 0.4s;
  }
  header.scrolled {
    background: rgba(8,8,8,0.65);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }
  header.zone-mcu    { border-bottom: 1px solid rgba(232,0,28,0.5); }
  header.zone-defenders { border-bottom: 1px solid rgba(211,47,47,0.5); }
  header.zone-television { border-bottom: 1px solid rgba(63,81,181,0.5); }
  header.zone-xmen   { border-bottom: 1px solid rgba(74,111,227,0.5); }
  header.zone-sony   { border-bottom: 1px solid rgba(232,0,28,0.4); }
  header.zone-other  { border-bottom: 1px solid rgba(160,160,160,0.5); }
  header.zone-classic { border-bottom: 1px solid rgba(38,198,218,0.5); }

  .header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 64px;
    gap: 1.5rem;
  }

  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    color: var(--red);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s, transform 0.2s;
  }
  .logo:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(232,0,28,0.5)); transform: translateY(-1px); }
  .logo:active { transform: translateY(0); }
  .logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
  .logo span { color: var(--text); }

  /* ── NAV ── */
  nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  nav::-webkit-scrollbar { height: 4px; }
  nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .nav-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .nav-group-mcu {
    background: rgba(232,0,28,0.06);
    border: 1px solid rgba(232,0,28,0.2);
    border-radius: 5px;
    padding: 0.2rem;
  }
  .nav-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    flex-shrink: 0;
  }

  .nav-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--muted);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.52rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .nav-btn:hover { color: var(--text); border-color: var(--border); }
  .nav-btn.active { background: var(--red); color: #fff; border-color: var(--red); }

  /* ── RANKING TRIGGER (Stats bar) ── */
  .ranking-trigger-btn {
    align-self: center;
    margin-top: 1.1rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 62%),
      #111214;
    border: 1px solid rgba(255,255,255,0.1);
    color: #d8c476;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.055),
      0 8px 20px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
  }
  .ranking-trigger-btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--red), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
  }
  .ranking-trigger-btn .icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    box-sizing: border-box;
    padding: 7px;
    border: 1px solid rgba(201,168,76,0.26);
    border-radius: 9px;
    background: rgba(201,168,76,0.075);
    color: var(--gold);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .ranking-trigger-btn .trigger-label { position: relative; z-index: 1; white-space: nowrap; }
  .ranking-trigger-btn:hover {
    transform: translateY(-2px);
    background:
      linear-gradient(145deg, rgba(201,168,76,0.13), rgba(255,255,255,0.025) 65%),
      #151618;
    border-color: rgba(201,168,76,0.58);
    color: #fff4cf;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 11px 24px rgba(0,0,0,0.28);
  }
  .ranking-trigger-btn:hover::after { transform: scaleX(0.72); }
  .ranking-trigger-btn:hover .icon { background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.48); }
  .ranking-trigger-btn.active {
    background:
      linear-gradient(145deg, rgba(230,0,35,0.16), rgba(201,168,76,0.08) 72%),
      #151416;
    border-color: rgba(230,0,35,0.64);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 9px 24px rgba(157,0,19,0.18);
  }
  .ranking-trigger-btn.active::after { transform: scaleX(1); }
  .ranking-trigger-btn.active .icon {
    border-color: rgba(255,77,98,0.72);
    background: linear-gradient(145deg, #ed1632, #a90017);
    color: #fff;
  }
  .ranking-trigger-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

  /* 페이즈 드롭다운 */
  .phase-dropdown { position: relative; }
  .phase-menu {
    display: none;
    position: fixed;
    padding-top: 4px;
    background: transparent;
    z-index: 200;
    min-width: 160px;
  }
  .phase-menu-inner {
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .phase-menu.open { display: block; }
  .phase-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--muted);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
  }
  .phase-menu button:hover { background: #252525; color: var(--text); }

  /* 검색 */
  .search-box {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55rem 0.85rem;
    gap: 0.4rem;
    flex-shrink: 0;
    align-self: center;
    margin-top: 1.1rem;
  }
  .search-box input {
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.8rem;
    width: 130px;
  }
  .search-box input::placeholder { color: var(--muted); }
  .nav-search { flex-shrink: 0; align-self: center; margin-top: 0; margin-left: 0.6rem; padding: 0.32rem 0.6rem; border-radius: 5px; }
  .nav-search input { width: 120px; font-size: 0.72rem; padding: 0; }
  .search-icon { color: var(--muted); font-size: 0.85rem; }
  .search-kbd-hint {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Noto Sans KR', sans-serif;
    flex-shrink: 0;
  }
  .search-box input:focus ~ .search-kbd-hint,
  .search-box.has-value .search-kbd-hint { display: none; }

  /* ── VIEW TOGGLE ── */
  .view-toggle {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    align-self: center;
    margin-top: 1.1rem;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.25rem;
  }
  .view-toggle-btn {
    background: none;
    border: none;
    color: var(--muted);
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .view-toggle-btn svg { display: block; }
  .view-toggle-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
  .view-toggle-btn.active { background: var(--red); color: #fff; }