/* Final stability overrides.
   Purpose: keep mobile/tablet behavior predictable even if older responsive rules remain.
   Strategy: preserve desktop appearance, unify compact UI for <=1100px, and tighten small-phone layout for <=640px. */

:root {
  --compact-breakpoint: 1100px;
  --mobile-breakpoint: 640px;
  --mobile-dock-offset: 86px;
}

@media (max-width: 1100px) {
  .pc-header { display: none !important; }
  .header-hover-zone { display: none !important; }
  .mobile-shell-brand {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 545;
    min-height: 66px;
    padding: 10px 64px 10px 14px;
    align-items: center;
    background: linear-gradient(180deg, rgba(9, 10, 18, .94), rgba(9, 10, 18, .76));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-shell-brand img {
    height: 34px;
    width: auto;
    display: block;
  }
  .menu-button {
    display: flex !important;
    left: auto !important;
    right: 12px !important;
    top: 10px !important;
    z-index: 560 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .shell-main {
    padding-top: 68px !important;
  }
  .page-frame {
    width: min(100vw, 100%) !important;
    margin: 0 auto !important;
  }
  .page-content {
    width: min(100%, 980px) !important;
    padding: 78px 16px 108px !important;
  }
  .sidebar {
    display: block !important;
    inset: 0 0 0 auto !important;
    left: auto !important;
    right: 0 !important;
    width: min(92vw, 360px) !important;
    transform: translateX(110%) !important;
    padding: 92px 22px 28px !important;
    z-index: 550 !important;
    background: linear-gradient(180deg, rgba(10, 12, 22, .98), rgba(8, 9, 18, .96)) !important;
    backdrop-filter: blur(18px) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .sidebar-logo-link {
    display: none !important;
  }
  .sidebar-nav {
    gap: 28px !important;
    padding-top: 18px !important;
  }
  .sidebar-nav a {
    font-size: 18px !important;
    line-height: 1.5 !important;
    padding: 10px 0 !important;
    letter-spacing: .12em !important;
  }
  .sidebar-copy {
    padding-top: 18px !important;
  }

  .hero-section,
  .hero,
  .top-hero {
    min-height: auto !important;
  }
  .top-hero,
  .hero-visual,
  .hero-main-visual {
    max-height: min(54vh, 520px) !important;
  }
  .hero-main-image,
  .hero-slide-image,
  .top-hero img {
    width: 100% !important;
    height: auto !important;
    max-height: min(54vh, 520px) !important;
    object-fit: cover !important;
  }

  .discography-grid,
  .visuals-grid,
  .goods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .player-overlay {
    display: none !important;
  }
  .player-dock {
    display: grid !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: 10px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    grid-template-columns: 44px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    background: rgba(10, 12, 22, .92) !important;
    backdrop-filter: blur(14px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 460 !important;
  }
  .player-dock-cover {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 12px !important;
  }
  .player-dock-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .player-dock-now {
    font-size: 9px !important;
  }
  .player-dock-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .player-dock-mini-btn {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .player-dock-play {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  .back-to-top {
    right: 12px !important;
    bottom: calc(var(--mobile-dock-offset) + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 470 !important;
  }
}

@media (max-width: 640px) {
  .mobile-shell-brand {
    min-height: 62px !important;
    padding: 10px 58px 10px 12px !important;
  }
  .mobile-shell-brand img {
    height: 30px !important;
  }
  .menu-button {
    width: 48px !important;
    height: 48px !important;
    right: 10px !important;
    top: 8px !important;
  }
  .shell-main {
    padding-top: 62px !important;
  }
  .page-content {
    padding: 72px 12px 100px !important;
  }
  .top-hero,
  .hero-visual,
  .hero-main-visual {
    max-height: min(48vh, 382px) !important;
    margin-bottom: 28px !important;
  }
  .hero-slider,
  .hero-slide {
    min-height: min(48vh, 382px) !important;
  }
  .hero-main-image,
  .hero-slide-image,
  .top-hero img {
    max-height: min(48vh, 382px) !important;
  }
  .hero-slide-content {
    padding: 18px 16px 48px !important;
  }
  .discography-grid,
  .visuals-grid,
  .goods-grid {
    gap: 10px !important;
  }
  .player-dock {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    min-height: 60px !important;
    padding: 9px 10px !important;
  }
  .player-dock-cover {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
  .player-dock-mini-btn {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
  .player-dock-play {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .back-to-top {
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    width: 46px !important;
    height: 46px !important;
  }
}