/* responsive.css — PC·태블릿·휴대폰·폴더블 최종 반응형 계층 (항상 마지막 로드) */
html { overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-width:0; overflow-x:hidden; }
img,video,iframe,canvas,svg { max-width:100%; }
button,input,select,textarea { font:inherit; }
button,[role="button"] { touch-action:manipulation; }
.header-inner,main { width:100%; min-width:0; }
.poster-grid > *,.news-grid > * { min-width:0; }

.news-sync-row { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .8rem; margin:-.25rem 0 1.1rem; }
.news-sync-status { appearance:none; display:inline-flex; align-items:center; gap:.35rem; min-height:28px; padding:.28rem .62rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.035); color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.news-sync-status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.news-sync-status.sync-online { color:#65d28b; border-color:rgba(101,210,139,.4); }
.news-sync-status.sync-loading { color:var(--gold); }
.news-sync-status.sync-setup { color:#ffb74d; border-color:rgba(255,183,77,.4); }
.news-sync-status.sync-offline { color:#ff6b78; border-color:rgba(255,107,120,.4); }
.news-sync-status.sync-local { color:#8eb8ff; border-color:rgba(142,184,255,.4); }
.news-sync-status.sync-loading::before { animation:syncPulse .9s ease-in-out infinite alternate; }
@keyframes syncPulse { to { opacity:.25; } }
.news-sync-note { color:var(--muted); font-size:.72rem; line-height:1.45; }
.news-admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:1.4rem; }
.news-admin-actions .news-write-btn { display:inline-flex; align-items:center; gap:.35rem; margin-bottom:0; }
.news-sync-local-btn { align-items:center; gap:.35rem; min-height:38px; padding:.55rem .9rem; border:1px solid rgba(101,210,139,.48); border-radius:6px; background:rgba(101,210,139,.08); color:#78d99a; cursor:pointer; font-size:.78rem; font-weight:700; }

@media (max-width:1180px) {
  header { padding-inline:1.2rem; }
  main { padding:1.6rem 1.2rem; }
  .header-inner { gap:.85rem; }
  .nav-btn { padding-inline:.45rem; }
  .poster-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:1rem; }
  .trigger-group { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px) {
  header { padding:env(safe-area-inset-top) 1rem 0; }
  .header-inner { height:auto; min-height:64px; flex-wrap:wrap; padding-block:.65rem; gap:.55rem .7rem; }
  .logo { font-size:1.42rem; }
  nav { order:3; flex:0 0 100%; width:100%; padding-bottom:.25rem; overscroll-behavior-inline:contain; }
  .search-box { margin-left:auto; }
  .search-kbd-hint { display:none; }
  main { padding:1.35rem 1rem calc(5rem + env(safe-area-inset-bottom)); }
  .phase-section { margin-bottom:3rem; }
  .phase-header { align-items:center; flex-wrap:wrap; gap:.55rem .7rem; }
  .phase-count { margin-left:auto; }
  .stats-bar { gap:1rem; }
  .stats-actions { flex-direction:column; }
  .stats-actions .view-toggle { align-self:center; }
  .podium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 3열이 아니면 2-1-3 배치가 의미를 잃고 2등이 먼저 나온다. 순위 그대로 되돌린다. */
  .podium-grid { align-items:stretch; }
  .podium-card.rank-1 { order:1; }
  .podium-card.rank-2 { order:2; }
  .podium-card.rank-3 { order:3; }
  .podium-card.rank-1 .podium-img-wrap { aspect-ratio:2/3; }
  /* 랭킹 행: 점수 막대를 아래 줄로 내려 제목이 눌리지 않게 한다. */
  .rank-card {
    grid-template-columns:38px 44px minmax(0,1fr) 62px;
    gap:.55rem;
    padding:.5rem .6rem .5rem .25rem;
  }
  .rank-meters { grid-column:1 / -1; padding-left:.25rem; }
  .rank-num-badge { font-size:1.15rem; }
  .rank-score-num { font-size:1.15rem; }
  .news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-overlay,.admin-overlay { padding:.8rem; }
  .modal { max-width:min(94vw,760px); max-height:calc(100dvh - 1.6rem); }
  .modal-poster-col { width:min(42vw,310px); }
  .modal-body { padding:1.6rem 1.35rem; }
  /* 좁은 화면에서는 상세 모달 본문 2단을 1단으로 되돌린다. */
  .modal-cols { grid-template-columns:minmax(0,1fr); }
  .compare-modal,.patch-modal,.news-detail-modal,.news-write-modal,.cloud-setup-modal { max-width:min(94vw,680px); }
}
@media (max-width:720px) {
  :root { --mobile-edge:.8rem; --mobile-modal-toolbar:3.5rem; }
  header { padding-inline:var(--mobile-edge); }
  main { padding:1.1rem var(--mobile-edge) calc(5.5rem + env(safe-area-inset-bottom)); }
  .header-inner { gap:.5rem; }
  .logo { font-size:1.28rem; letter-spacing:.11em; }
  .admin-login-btn,.view-toggle-btn,.nav-btn,.search-box button { min-height:42px; }
  nav { gap:.25rem; scrollbar-width:none; }
  nav::-webkit-scrollbar { display:none; }
  .nav-btn { font-size:.68rem; padding:.52rem .58rem; }
  .search-box input { width:min(32vw,130px); min-height:42px; }
  .phase-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.5rem .7rem; }
  .phase-title { min-width:0; font-size:clamp(1.45rem,6vw,1.75rem); line-height:1.08; }
  .phase-badge { grid-column:1 / -1; order:0; justify-self:start; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .phase-count { margin-left:0; justify-self:end; align-self:center; font-size:.68rem; white-space:nowrap; }
  .poster-grid,body.list-mode #trailerMovieSelect { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.78rem; }
  .card-info { padding:.62rem .62rem .68rem; }
  .card-title { font-size:.78rem; }
  .card-year { font-size:.62rem; }
  .podium-grid { grid-template-columns:1fr; }
  .stats-bar {
    display:flex;
    align-items:stretch;
    gap:1rem;
    padding:1.15rem var(--mobile-edge) 1.35rem;
    overflow:hidden;
  }
  .stats-actions { width:100%; gap:.75rem; }
  .view-toggle {
    justify-self:center;
    align-self:auto;
    margin-top:0;
    padding:.28rem;
  }
  .view-toggle::before {
    content:'보기';
    padding:0 .4rem 0 .25rem;
    color:var(--muted);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.08em;
  }
  .trigger-group {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:.55rem;
    padding:.48rem;
    border-radius:14px;
  }
  .trigger-group .ranking-trigger-btn {
    align-self:stretch;
    justify-content:flex-start;
    gap:.5rem;
    width:100%;
    min-width:0;
    min-height:58px;
    margin:0;
    padding:.58rem .62rem;
    display:flex;
    align-items:center;
    font-size:clamp(.64rem,2.85vw,.75rem);
    line-height:1.25;
    letter-spacing:.06em;
    white-space:normal;
    text-align:left;
  }
  .trigger-group .ranking-trigger-btn:last-child { grid-column:1 / -1; justify-content:center; }
  .trigger-group .ranking-trigger-btn .icon { width:31px; height:31px; flex-basis:31px; padding:7px; }
  .trigger-group .ranking-trigger-btn .trigger-label { white-space:normal; }
  .stats-summary {
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.8rem;
    padding:0;
    border:0;
    background:none;
  }
  .stats-divider { display:none; }
  .stat-col { width:100%; min-width:0; }
  .stat-total-col {
    padding:.75rem;
    border:1px solid rgba(201,168,76,.28);
    border-radius:10px;
    background:rgba(0,0,0,.26);
  }
  .stat-total-col .stat-group-label { margin-bottom:.35rem; }
  .stat-total-col .stat {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.18rem;
  }
  .stat-total-col .stat-num { font-size:2.15rem; }
  .stat-total-col .stat-label { font-size:.72rem; white-space:normal; }
  .stat-mcu-col {
    padding:.85rem .7rem .7rem;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(0,0,0,.2);
  }
  .stat-group-label {
    width:100%;
    margin-bottom:.75rem;
    line-height:1.4;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .stat-mcu-col .stat-group {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:.55rem;
  }
  .archive-feature-panel { width:100%; padding:.85rem .7rem .75rem; }
  .archive-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
  .archive-feature-btn {
    min-height:58px;
    padding:.58rem .4rem;
    gap:.4rem;
    font-size:clamp(.61rem,2.75vw,.72rem);
    letter-spacing:.045em;
  }
  .archive-feature-btn .icon { width:1.2rem; height:1.2rem; }
  .stat-group > .stat {
    min-width:0;
    min-height:70px;
    padding:.5rem .22rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.075);
    border-radius:8px;
    background:rgba(255,255,255,.025);
  }
  .stat-group .stat-num { font-size:1.55rem; }
  .stat-group .stat-label {
    max-width:100%;
    font-size:.58rem;
    line-height:1.3;
    letter-spacing:.055em;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .modal-overlay.open { align-items:flex-end; padding:calc(env(safe-area-inset-top) + var(--mobile-modal-toolbar)) 0 0; box-sizing:border-box; }
  .modal { flex-direction:column; width:100%; max-width:none; max-height:calc(100dvh - env(safe-area-inset-top) - var(--mobile-modal-toolbar)); border-radius:14px 14px 0 0; }
  .modal-poster-col { width:100%; }
  .modal-media-frame { max-height:48dvh; }
  .modal-poster { width:100%; height:min(48dvh,430px); aspect-ratio:auto; object-fit:contain; }
  .modal-poster-placeholder { height:min(42dvh,330px); aspect-ratio:auto; }
  .modal-media-controls { min-height:58px; padding:.55rem .7rem; }
  .modal-media-toggle {
    position:static;
    width:max-content;
    min-width:142px;
    min-height:44px;
    height:auto;
    max-width:100%;
    transform:none;
  }
  .modal-media-toggle:hover { transform:translateY(-1px); }
  .modal-media-label { position:static; max-width:100%; transform:none; }
  .modal-nav-btn { top:24dvh; width:44px; height:44px; }
  .modal-nav-btn.prev { left:8px; }
  .modal-nav-btn.next { right:8px; }
  .modal-body { padding:1.3rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .modal-title { font-size:clamp(1.45rem,7vw,2rem); }
  .modal-meta { flex-wrap:wrap; }
  .admin-overlay { align-items:flex-end; padding:calc(env(safe-area-inset-top) + var(--mobile-modal-toolbar)) 0 0; box-sizing:border-box; }
  .admin-bar { flex-wrap:wrap; gap:.4rem .55rem; padding:.42rem var(--mobile-edge); }
  .admin-info-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:0 0 100%; width:100%; gap:.4rem; margin-right:0; }
  .admin-info-btn { min-width:0; min-height:42px; padding:.45rem .55rem; }
  /* 보기 방식 탭은 좁은 화면에서 세로로 쌓아 글자가 잘리지 않게 한다. */
  .view-tabs { grid-template-columns:minmax(0,1fr); gap:.55rem; }
  .view-tab { min-height:64px; padding:.75rem .85rem; }
  .view-tab .icon { width:30px; height:30px; flex-basis:30px; }
  .view-tab-name { font-size:1.05rem; }
  .view-tab-sub { white-space:normal; }
  /* MCU 관람 순서: 열 수(3)는 그대로 두고 화살표 폭만 줄인다.
     열 수를 바꾸면 flow.js 가 만든 행 구성과 어긋나므로 건드리지 않는다.
     카드 폭은 --sf-card-w 가 자동으로 다시 계산되므로 따로 지정하지 않는다. */
  .sf-segment, .sf-branch-body { --sf-arrow:20px; --sf-gap:.3rem; }
  .sf-arrow { padding-bottom:1.7rem; }
  .sf-arrow svg { width:18px; height:18px; }
  .sf-down svg { width:22px; height:22px; }
  .sf-branch { padding:.65rem 0 .55rem; }
  .sf-branch-head, .sf-branch-merge { padding-inline:.6rem; }
  .sf-branch-count { margin-left:0; }
  .sf-branch-label { font-size:.9rem; }
  .sf-branch-kind { font-size:.62rem; padding:.22rem .55rem; }
  .sf-branch-merge { font-size:.74rem; }
  .sf-card-title { font-size:.64rem; }
  .sf-card-year { font-size:.58rem; }
  .cloud-profile-status { min-height:42px; margin-right:auto; padding-inline:.72rem; }
  .admin-modal,.bg-modal,.news-write-modal,.news-detail-modal,.compare-modal,.patch-modal,.cloud-setup-modal { width:100%; max-width:none; max-height:calc(100dvh - env(safe-area-inset-top) - var(--mobile-modal-toolbar)); overflow-y:auto; border-radius:14px 14px 0 0; padding:1.2rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .modal-close,.form-modal-close,.news-detail-close,.patch-modal-close,.bg-modal-close { display:none; }
  .mobile-overlay-close {
    position:fixed;
    top:calc(env(safe-area-inset-top) + .25rem);
    right:max(.7rem,env(safe-area-inset-right));
    z-index:1205;
    width:48px;
    height:48px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:rgba(12,12,12,.94);
    box-shadow:0 5px 18px rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
  }
  .mobile-overlay-close .icon { width:21px; height:21px; }
  .mobile-overlay-close:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .news-detail-title { font-size:1.15rem; }
  .news-detail-media img { max-height:52dvh; object-fit:contain; background:#090909; }
  .news-cat-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
  .news-cat-tab { min-height:44px; padding-inline:.35rem; font-size:.68rem; }
  .news-admin-actions { align-items:stretch; }
  .news-admin-actions > button { min-height:44px; }
  .news-sync-note { flex-basis:100%; }
  .cloud-setup-modal .admin-modal-title { padding-right:0; font-size:1.12rem; }
  .cloud-setup-lead { margin-right:0; font-size:.76rem; }
  .cloud-setup-steps li { grid-template-columns:30px minmax(0,1fr); padding:.68rem; }
  .cloud-setup-steps button { grid-column:2; grid-row:3; justify-self:start; min-height:40px; margin-top:.25rem; white-space:normal; }
  .cloud-conflict-actions { display:grid; grid-template-columns:1fr; }
  .cloud-conflict-actions button { width:100%; }
  .compare-tray { left:var(--mobile-edge); right:var(--mobile-edge); bottom:calc(.55rem + env(safe-area-inset-bottom)); width:auto; }
  .site-version {
    position:static;
    display:block;
    width:max-content;
    max-width:calc(100% - 2rem);
    margin:1rem auto .35rem;
    font-size:.58rem;
    text-align:center;
    white-space:normal;
  }
  .site-meta-actions {
    position:static;
    display:flex;
    justify-content:center;
    width:100%;
    margin:0 auto calc(1rem + env(safe-area-inset-bottom));
  }
  .patch-notes-btn,
  .rights-notice-btn {
    position:static;
    display:block;
    min-height:38px;
    margin:0;
    font-size:.62rem;
  }
  .rights-notice-body p,.rights-notice-body li { word-break:normal; overflow-wrap:anywhere; }
  body.list-mode .poster-grid:not(#trailerMovieSelect):not(.news-grid) { display:grid; grid-template-columns:1fr; }
  body.list-mode .poster-card { grid-template-columns:72px minmax(0,1fr); min-height:108px; }
  body.list-mode .poster-img-wrap { width:72px; min-width:72px; }
  .boxoffice-section,.bo-list { width:100%; min-width:0; }
  .boxoffice-section .ranking-intro {
    max-width:34rem;
    margin-inline:auto;
    overflow-wrap:anywhere;
  }
  .boxoffice-section .ranking-intro br { display:none; }
  .bo-row {
    grid-template-columns:32px 48px minmax(0,1fr) max-content;
    grid-template-rows:auto 8px;
    grid-template-areas:
      'rank thumb info amount'
      'rank thumb bar bar';
    gap:.5rem .65rem;
    min-width:0;
    padding:.65rem .72rem;
    border-radius:10px;
  }
  .bo-rank { grid-area:rank; align-self:center; }
  .bo-thumb { grid-area:thumb; align-self:center; width:48px; }
  .bo-info { grid-area:info; align-self:center; min-width:0; }
  .bo-title {
    display:-webkit-box;
    white-space:normal;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.35;
  }
  .bo-sub { margin-top:.16rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bo-bar-wrap { grid-area:bar; width:100%; min-width:0; align-self:center; }
  .bo-amount { grid-area:amount; align-self:center; white-space:nowrap; font-size:.92rem; }
  .bo-row:hover { transform:none; box-shadow:none; }
}
@media (max-width:520px) {
  .news-grid { grid-template-columns:1fr; }
  .news-intro br { display:none; }
  .news-card-title { font-size:.92rem; }
  .news-write-btn,.news-sync-local-btn { width:100%; justify-content:center; }
  .phase-header { align-items:start; }
  .phase-count { margin-left:0; align-self:center; }
  .phase-badge { max-width:100%; }
  .admin-modal-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trailer-grid { grid-template-columns:1fr; }
  .tl-wrap { margin-left:0; }
}
@media (max-width:380px) {
  :root { --mobile-edge:.62rem; }
  .logo { font-size:1.1rem; }
  .search-box input { width:105px; }
  .poster-grid,body.list-mode #trailerMovieSelect { gap:.58rem; }
  .card-title { font-size:.72rem; }
  .card-info { padding-inline:.5rem; }
  .phase-badge { font-size:.6rem; letter-spacing:.08em; }
  .modal-media-controls { flex-direction:column; align-items:stretch; }
  .modal-media-toggle { width:100%; }
  .modal-media-label { text-align:center; }
  .news-cat-tab { font-size:.61rem; }
  .bo-row { grid-template-columns:27px 42px minmax(0,1fr) max-content; gap:.45rem .48rem; padding:.58rem .5rem; }
  .bo-thumb { width:42px; }
  .bo-title { font-size:.74rem; }
  .bo-sub { font-size:.58rem; }
  .bo-amount { font-size:.82rem; }
  .gate-box { width:min(320px,calc(100vw - 1.25rem)); box-sizing:border-box; }
  .gate-box-scaler { width:100%; display:flex; justify-content:center; }
}
@media (max-width:300px) {
  .poster-grid,body.list-mode #trailerMovieSelect { grid-template-columns:1fr; }
  .trigger-group,.stat-mcu-col .stat-group,.archive-feature-grid { grid-template-columns:1fr; }
  .search-box { flex:1 1 100%; order:2; }
  .search-box input { width:100%; }
}
@media (orientation:landscape) and (max-height:540px) {
  .modal-media-frame { max-height:82dvh; }
  .modal-poster { height:82dvh; }
  .modal-nav-btn { top:41dvh; }
  .gate-box { transform:scale(.86); transform-origin:center; }
}
/* 세로로 긴 휴대폰·커버 화면은 포스터 높이를 유지하면서 좌우만 자연스럽게 잘라 화면을 채운다. */
@media (max-aspect-ratio:7/10) {
  .doom-bg-image {
    object-fit:cover;
    object-position:50% 50%;
    filter:brightness(.54) saturate(.9) contrast(1.05);
  }
  .doom-bg::after {
    background:linear-gradient(180deg,rgba(5,4,3,.2) 0%,transparent 32%,rgba(5,4,3,.58) 100%);
  }
}
@media (hover:none) {
  .poster-card:hover,.news-card:hover { transform:none; }
  .poster-card:active,.news-card:active { border-color:var(--gold); }
}
/* 모바일·터치 기기 저전력 렌더링: 정적 배경, 정적 플레이스홀더, 블러 합성 제거. */
@media (hover:none), (pointer:coarse), (max-width:900px) {
  .site-bg-texture,
  .stats-chart-card::before,
  .poster-placeholder,
  .placeholder-icon { animation:none !important; }
  .gauge-item:hover,
  .phase-work-item:hover { transform:none; filter:none; }
  header,header.scrolled,
  .gate-box,.modal-media-toggle,.search-result-bar,
  .admin-overlay,.fav-btn,.watch-btn { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  header,header.scrolled { background:rgba(8,8,8,.96); }
}
/* 화면 밖 카드의 레이아웃·페인트를 건너뛰어 긴 목록 스크롤의 CPU·메모리 사용을 줄인다. */
@supports (content-visibility:auto) {
  .poster-card,.news-card {
    content-visibility:auto;
    contain-intrinsic-size:auto 440px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}