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; } .rerelease-gap { height:3.4rem; } body.list-mode .rerelease-gap { flex-basis:3.4rem; height:3.4rem; } .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)); } .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; } .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; } .background-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.78rem; } .background-gallery-copy { padding:.68rem .62rem .75rem; } .background-gallery-copy strong { font-size:.78rem; } .background-gallery-copy small { font-size:.6rem; } .background-order-controls { gap:.4rem; padding:.55rem .45rem; } .background-order-controls button { width:36px; min-height:36px; } .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; } .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,.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 { 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; } .patch-series-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; } .patch-series-tabs .news-cat-tab { min-height:42px; padding:.48rem .35rem; } .patch-detail-modal { width:100%; } .patch-detail-tabs { position:sticky; top:0; z-index:2; margin-top:.9rem; background:#111; } .patch-detail-tab { min-height:42px; padding:.45rem .3rem; font-size:.61rem; } .patch-detail-list { gap:.5rem; } .patch-detail-list li { padding:.66rem .7rem .66rem 2.45rem; font-size:.78rem; overflow-wrap:anywhere; } .patch-detail-list li::before { left:.68rem; top:.68rem; } .patch-ai-section p,.patch-ai-legacy p { word-break:normal; overflow-wrap:anywhere; } .patch-ai-facts { grid-template-columns:1fr; } .patch-ai-files li { grid-template-columns:1fr; gap:.25rem; } .patch-ai-copy-row { align-items:stretch; } .patch-ai-copy-btn { width:100%; min-height:44px; } .patch-ai-copy-status { min-width:0; text-align:center; } .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 .rerelease-card { display:block; min-height:0; } body.list-mode .rerelease-card .poster-img-wrap { width:auto; min-width:0; } 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; } .background-gallery-grid { 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.mobile-fit-contain .doom-bg-image { object-fit:contain; } .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); } .work-card.is-pressed { transform:scale(.985); border-color:rgba(var(--card-accent-rgb),.92); } .work-card:hover .poster-img-wrap img { transform:none; filter:none; } .work-card:hover .card-open-cue { opacity:0; transform:translateY(7px); } } @media (hover:none), (pointer:coarse), (max-width:900px) { .work-card::before { display:none; } .card-open-cue { display:none; } .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); } } @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; } } @media(max-width:720px){#studioOverlay .studio-modal{max-height:calc(100dvh - env(safe-area-inset-top) - var(--mobile-modal-toolbar));margin-top:var(--mobile-modal-toolbar)}#studioClose{visibility:hidden}}