/* Watchmong - Dark cinematic theme */
:root{
  --bg:#12141a; --bg2:#1a1d24;
  --panel:#1a1d23; --panel2:#22262e;
  --stroke:#2a2e37; --stroke2:#3a4049;
  --text:#e8eaed; --muted:#9aa0a6; --muted2:#8a919c;
  --accent:#e94b2c; --accent2:#0e8f83;
  --green:#34d399; --yellow:#fbbf24; --red:#f87171;
  --radius:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:15px;line-height:1.6;min-height:100vh;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
/* v117: 모바일에서 이미지가 화면을 넘지 않게 — 고정 높이·고정 너비 이미지도 화면 안에 맞춤 */
img,video,iframe{max-width:100%}
.sm-card,.sm-panel,.sm-wrap{min-width:0}

.sm-wrap{max-width:1200px;margin:0 auto;padding:0 16px 90px}

/* Header */
.sm-header{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--stroke)}
.sm-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px;gap:6px}
.sm-logo{display:flex;align-items:center;gap:8px;font-weight:700;flex-shrink:0}
.sm-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;min-width:0}
.sm-nav::-webkit-scrollbar{display:none}
.sm-nav a{padding:6px 7px;border-radius:6px;font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.sm-nav a:hover{background:var(--bg2);color:var(--text)}

.sm-nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* v252: 로그인 시 상단 버튼 때문에 메뉴가 잘리는 문제 해결 — 유저 버튼들을 별도 유틸 줄로 분리.
   메뉴 줄은 로고+메뉴만 남아 전체 너비를 쓰므로 데스크톱에서 10개 메뉴가 잘리지 않음. */
.sm-util-row{border-bottom:1px solid var(--stroke)}
.sm-util-row .sm-header-inner{height:36px;justify-content:flex-end}
.sm-util-row .sm-nav-right{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.sm-util-row .sm-nav-right::-webkit-scrollbar{display:none}

/* Hero */
.sm-hero-carousel{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:20px;border:1px solid var(--stroke)}
.sm-hero-track{display:flex;transition:transform .3s ease-out;will-change:transform}
.sm-hero-slide{flex:0 0 100%;min-width:100%;position:relative;min-height:320px}
.sm-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.sm-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sm-hero-content{position:relative;z-index:2;padding:40px 24px 24px;display:flex;align-items:flex-end;min-height:320px}
.sm-hero-info{max-width:520px}
.sm-hero-title{font-size:26px;font-weight:700;line-height:1.3;color:#e8eaed}
.sm-hero-desc{margin-top:6px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.5}
.sm-hero-dots{position:absolute;bottom:12px;right:16px;display:flex;gap:5px;z-index:5}
.sm-hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.sm-hero-dots span.active{background:#e8eaed}
.sm-hero-nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);background:rgba(18,20,26,.8);border:1px solid var(--stroke2);color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;opacity:0}
.sm-hero-carousel:hover .sm-hero-nav{opacity:1}
.sm-hero-nav.prev{left:8px}
.sm-hero-nav.next{right:8px}

/* Badges */
.sm-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;border:1px solid var(--stroke);background:var(--panel);font-size:11px;font-weight:700}
.sm-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sm-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;background:var(--bg2);border:1px solid var(--stroke);color:var(--text)}

/* Buttons */
.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:6px;border:1px solid var(--stroke2);background:var(--panel);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;text-decoration:none}
.sm-btn:hover{background:var(--bg2)}
.sm-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sm-btn-primary:hover{background:#d13d20;border-color:#d13d20}
.sm-btn-sm{padding:6px 12px;font-size:12px}
.sm-btn-danger{border-color:var(--red);color:var(--red)}

/* === Horizontal Scroll Row === */
.sm-scroll-row{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sm-scroll-row::-webkit-scrollbar{height:0}
.sm-scroll-row>.sm-card{flex:0 0 140px;min-width:140px}

/* === Cards === */
.sm-card{position:relative;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden}
.sm-card:hover{border-color:var(--stroke2)}
.sm-card-body{padding:8px 10px}
.sm-card-title{font-size:13px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-card-meta{margin-top:2px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between}

/* === Poster === */
.sm-poster{width:100%;aspect-ratio:2/3;object-fit:cover;background:#242832}
.sm-rank{position:absolute;bottom:6px;left:7px;font-size:32px;font-weight:700;color:rgba(255,255,255,.9);line-height:1;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* === Grid === */
.sm-grid-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:10px}

/* Section headers */
.sm-section-header{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px;flex-wrap:wrap;gap:6px}
.sm-section-header h2{font-size:18px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}

/* Toggle */
.sm-toggle{display:flex;gap:2px;background:var(--bg2);border-radius:6px;padding:3px;border:1px solid var(--stroke)}
.sm-toggle button{padding:5px 12px;border-radius:4px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit}
.sm-toggle button.active{background:var(--panel2);color:var(--text);border:1px solid var(--stroke)}

/* OTT tab */
.ott-tab{padding:4px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--muted)}
.ott-tab.active{color:var(--accent);font-weight:700}

/* Slider */
.sm-slider{display:flex;gap:8px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sm-slider::-webkit-scrollbar{display:none}
.sm-slide{flex:0 0 auto;min-width:100px;display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--stroke);border-radius:6px;background:var(--panel);cursor:pointer;font-size:13px}
.sm-slide:hover{border-color:var(--stroke2)}
.sm-slide.active{border-color:var(--accent);color:var(--accent);font-weight:600}

/* Panel */
.sm-panel{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:12px;margin-bottom:14px}

/* Table */
.sm-table{width:100%;border-collapse:collapse}
.sm-table th,.sm-table td{padding:10px 12px;border-bottom:1px solid var(--stroke);font-size:13px}
.sm-table th{color:var(--muted);text-align:left;font-size:12px;font-weight:600;background:var(--bg2)}

/* Form */
.sm-input{width:100%;padding:10px 12px;border-radius:6px;border:1px solid var(--stroke2);background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;outline:none}
.sm-input:focus{border-color:var(--accent)}
.sm-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.sm-form-group{margin-bottom:12px}

/* Alert */
.sm-alert{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:12px;border:1px solid var(--stroke)}
.sm-alert-success{background:rgba(14,143,131,.12);border-color:rgba(14,143,131,.45);color:#5eead4}

/* Stars */
.sm-stars span{font-size:28px;color:#3a4049;cursor:pointer}
.sm-stars span.active,.sm-stars span:hover{color:var(--yellow)}

/* Login */
.sm-login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px}
.sm-login-card{width:100%;max-width:420px;padding:32px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--panel)}

/* KPI */
.sm-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sm-kpi{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px}

/* Pie */
.sm-pie-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.sm-pie-card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px}
.sm-pie-card h3{font-size:14px;font-weight:700;margin:0 0 8px}
.sm-pie{width:min(180px,70%);aspect-ratio:1/1;border-radius:50%;margin:10px auto 14px;background:var(--pie)}
.sm-pie-legend{display:flex;flex-direction:column;gap:4px}
.sm-pie-item{display:flex;align-items:center;gap:6px;font-size:12px}
.sm-pie-item .dot{width:8px;height:8px;border-radius:2px}
.sm-pie-item b{font-weight:600}
.sm-pie-item strong{font-weight:700;margin-left:auto}

/* OTT Event Banner */
.sm-event-banner{border:1px solid var(--stroke);border-radius:var(--radius);padding:12px;margin-bottom:16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;background:var(--panel)}
.sm-event-banner::-webkit-scrollbar{display:none}
.sm-event-item{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:6px;background:var(--bg2);border:1px solid var(--stroke);font-size:12px;font-weight:600;white-space:nowrap}
.sm-event-item:hover{border-color:var(--stroke2)}

/* Footer */
.sm-footer{text-align:center;padding:24px 16px;margin-top:32px;border-top:1px solid var(--stroke);color:var(--muted);font-size:12px;background:var(--bg2)}

/* Community */
.sm-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Skeleton */
.sm-skeleton{background:#242832;border-radius:4px;animation:pulse 1.5s infinite}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sm-fadein{animation:fadeIn .2s ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Mobile Nav */
.sm-mobile-nav{display:none}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){.sm-grid-wrap{grid-template-columns:repeat(5,1fr)}}
@media(max-width:768px){
  .sm-grid-wrap{grid-template-columns:repeat(3,1fr);gap:10px}
  .sm-nav{display:none}
  .sm-hero-title{font-size:20px}
  .sm-hero-slide,.sm-hero-content{min-height:220px}
  .sm-wrap{padding:0 12px 90px}
  .sm-section-header{margin:20px 0 10px}
  .sm-section-header h2{font-size:16px}
  .sm-scroll-row>.sm-card{flex:0 0 120px;min-width:120px}
  .sm-pie-wrap{grid-template-columns:1fr}
  .sm-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .sm-mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px;z-index:9999;background:var(--panel);border-top:1px solid var(--stroke);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sm-mobile-nav a{flex:0 0 auto;min-width:56px;text-align:center;padding:6px 8px;border-radius:6px;color:var(--text);background:var(--bg2);border:1px solid var(--stroke);font-size:11px;white-space:nowrap;font-weight:600}
  .sm-mobile-nav a strong{display:block;font-size:14px;margin-bottom:1px}
  div[style*="grid-template-columns:280px"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  .sm-grid-wrap{grid-template-columns:repeat(2,1fr);gap:8px}
  .sm-kpi-row{grid-template-columns:1fr 1fr}
  .sm-scroll-row>.sm-card{flex:0 0 110px;min-width:110px}
}

/* ===== 메인 커뮤니티 최신글 2열 그리드 ===== */
.sm-post-2col-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.sm-post-listcol{padding:4px 12px;margin-bottom:0}
.sm-post-row{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--stroke);text-decoration:none;color:var(--text)}
.sm-post-row:last-child{border-bottom:0}
.sm-post-row:hover .sm-post-title{color:var(--accent)}
.sm-post-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.06);white-space:nowrap;flex-shrink:0}
.sm-post-title{flex:1;font-weight:700;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-post-meta{font-size:9px;color:var(--muted);flex-shrink:0;white-space:nowrap}
@media(max-width:480px){.sm-post-2col-list{grid-template-columns:1fr}}

/* 인디영화 큰 카드 그리드 */
.sm-indie-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px}
.sm-indie-grid .sm-card-title{font-size:13px}
.sm-indie-grid .sm-card-meta{font-size:11px}
@media(max-width:768px){.sm-indie-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:480px){.sm-indie-grid{grid-template-columns:repeat(3,1fr);gap:8px}}

/* ═══ 화면 설정: 화이트 테마 + 글자 크기 (회원 설정) ═══ */
body.theme-light{--bg:#f4f5f7;--bg2:#e8ecf1;--panel:#ffffff;--panel2:#eef1f5;--stroke:#dbe1e9;--stroke2:#c3ccd8;--text:#141a22;--muted:#5b6472;--muted2:#66707e}
body.font-large{zoom:1.12}
body.font-xlarge{zoom:1.25}

/* ── v105 셰이더 배경 (사이트 전체 테마) ── */
html{background:#12141a}
#wm-shader{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
body.shader-on #wm-shader{opacity:1}
body.shader-on{background-color:transparent;--panel:rgba(26,29,35,.88);--panel2:rgba(34,38,46,.88);--bg2:rgba(26,29,36,.88)}
body.theme-light #wm-shader{opacity:0}

/* ── v107 포스터 줄 캐러셀 ── */
.sm-scroll-row, .sm-slider, .arc-carousel{scroll-snap-type:x proximity}
.sm-scroll-row > *, .sm-slider > *, .arc-track > *{scroll-snap-align:start}
.wm-carousel{position:relative}
.wm-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:32px;height:32px;border-radius:50%;background:rgba(18,20,26,.85);border:1px solid var(--stroke2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;font-family:inherit}
.wm-car-btn:disabled{opacity:.3;cursor:default}
.wm-car-prev{left:6px}
.wm-car-next{right:6px}
.wm-carousel.wm-no-overflow .wm-car-btn{display:none}
/* v304: 신작 행 좌우 방향 버튼(‹ ›) 숨김 */
#wmNewRow ~ .wm-car-btn{display:none}

/* ── v108: GitHub 장점만 패치 (속도 비용 0) ──
   Leggo/Keen 접근성 교훈: 키보드 포커스가 보일 때만 테두리 표시.
   Adminator 다크 토큰 교훈과 동일하게, 기존 --accent 변수만 재사용.
   prefers-reduced-motion이면 캐러셀 줄의 부드러운 스크롤을 끔. */
.wm-car-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-scroll-row:focus-visible,.sm-slider:focus-visible,.arc-carousel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .sm-scroll-row,.sm-slider,.arc-carousel{scroll-behavior:auto}
}

/* ── v110: 소프트 1번 로고 (테마별 배경 일치) ──
   헤더 로고는 투명 배경 PNG를 쓴다. 다크 테마에서는 다크 패널(#1a1d23),
   화이트 테마에서는 흰 패널(#ffffff), 셰이더 켠 상태에서는 반투명 패널이
   로고 뒤로 그대로 비치므로, 테마를 바꿔도 로고 배경이 따로 놀지 않는다.
   단색 버전(wm-logo.webp=다크, wm-logo-light.webp=화이트)은 공유 이미지용으로 유지. */
.sm-logo img{background:transparent}

/* v117 모바일 이미지 맞춤 */
@media(max-width:768px){
  .wm-feat-poster{flex:0 0 110px!important}
  .wm-feat-poster img{width:110px!important;height:165px!important}
  .sm-detail-poster{max-width:none;margin:0}
  .sm-detail-poster>img{width:100%!important;height:auto!important}
  .sm-poster{height:auto}
}

/* ── v119: 메인 스크롤 리빌 + 토스트 (플랫 규칙 유지, 블러 없음) ── */
.wm-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.wm-reveal.wm-visible{opacity:1;transform:none}
#wmToastWrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:100%}
.wm-toast{background:var(--panel);border:1px solid var(--stroke2);color:var(--text);padding:10px 18px;border-radius:999px;font-size:12px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;max-width:90vw;text-align:center;pointer-events:auto}
.wm-toast.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wm-reveal{opacity:1;transform:none;transition:none}.wm-toast{transition:none}}

/* ── v120: 스무스 트랜지션 (CSS만, 레이아웃·기능 변경 없음, 블러·그림자 추가 없음) ──
   이미 트랜지션이 있던 곳(히어로 트랙, 셰이더, 리빌, 토스트, 관리자 드로어)은 건드리지 않음.
   모달은 display:none↔flex라 트랜지션이 안 먹어서, 열리는 순간만 fadeIn 애니메이션으로 부드럽게 함. */
.sm-btn,.sm-nav a,.ott-tab,.sm-toggle button,.sm-more-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.sm-card,.sm-slide,.sm-event-item,.sm-panel,.sm-login-card,.sm-kpi{transition:border-color .2s ease,background-color .2s ease}
.sm-post-row .sm-post-title,.sm-stars span{transition:color .2s ease}
.sm-input{transition:border-color .2s ease}
.sm-hero-nav{transition:opacity .25s ease}
.sm-hero-dots span{transition:background-color .2s ease}
.wm-car-btn{transition:opacity .2s ease,background-color .2s ease}
.sm-scroll-row,.sm-slider,.arc-carousel{scroll-behavior:smooth}
div[id$="Modal"]>div{animation:fadeIn .2s ease}
@media(prefers-reduced-motion:reduce){
  .sm-btn,.sm-nav a,.ott-tab,.sm-toggle button,.sm-more-btn,.sm-card,.sm-slide,.sm-event-item,.sm-panel,.sm-login-card,.sm-kpi,.sm-post-row .sm-post-title,.sm-stars span,.sm-input,.sm-hero-nav,.sm-hero-dots span,.wm-car-btn{transition:none}
  .sm-scroll-row,.sm-slider,.arc-carousel{scroll-behavior:auto}
  div[id$="Modal"]>div{animation:none}
}

/* ── 전체 라이트 글래스 (2026-10-26, 관리자 검증 게이트 해제 후 전체 적용) ──
   대상은 고정/떠 있는 UI만: .sm-header(상단 스티키 헤더), .sm-mobile-nav(하단 모바일 네비),
   관리자 Drawer(#wmDrawer, admin_dashboard.php 인라인 스타일에서 처리),
   모달 패널(div[id$="Modal"]>div), .wm-toast, 관리자 상단바(.wm-topbar).
   제외: .sm-card, .sm-panel, .sm-kpi, .sm-pie-card 등 콘텐츠 카드·패널 전체에는
   backdrop-filter를 걸지 않는다. 셰이더와 함께 켜져도 블러 요소가 1~2개라 부하가 작다.
   모달 패널 배경에만 !important를 쓴 이유: 패널 배경이 각 페이지 인라인 스타일로
   background:var(--panel)이라서, 중앙 규칙이 이기려면 !important가 필요하다.
   backdrop-filter 미지원 브라우저는 rgba 반투명 배경만 적용되는 단색 폴백. */
.sm-header{background:rgba(26,29,35,.8)}
.sm-mobile-nav{background:rgba(26,29,35,.8)}
.wm-toast{background:rgba(26,29,35,.85)}
div[id$="Modal"]>div{background:rgba(26,29,35,.85)!important}
body.theme-light .sm-header,body.theme-light .sm-mobile-nav{background:rgba(255,255,255,.8)}
body.theme-light .wm-toast{background:rgba(255,255,255,.85)}
body.theme-light div[id$="Modal"]>div{background:rgba(255,255,255,.85)!important}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .sm-header,.sm-mobile-nav,.wm-toast,div[id$="Modal"]>div{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media(max-width:560px){
  @supports ((-webkit-backdrop-filter:blur(5px)) or (backdrop-filter:blur(5px))){
    .sm-header,.sm-mobile-nav,.wm-toast,div[id$="Modal"]>div{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  }
}
@media(prefers-reduced-motion:reduce){
  .sm-header,.sm-mobile-nav,.wm-toast,div[id$="Modal"]>div{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* 메인 저스트왓치식 개편: 첫 화면은 검색+히어로+타이틀 행 중심, 보조 섹션은 아래로.
   카드·패널 전체 글래스 금지 (헤더·네비·모달·토스트에만 이미 적용된 라이트 글래스와 별개).
   새 TMDB 호출·외부 라이브러리 없음, 기존 히어로/행 스타일만 보조한다. */
.wm-main-shortcut{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0 14px}
.wm-main-secondary{margin-top:8px}
.wm-main-secondary>.sm-section-header:first-child{margin-top:16px}
@media(max-width:560px){
  /* 모바일 첫 화면이 검색+히어로로 끝나게 히어로 높이를 과하게 키우지 않음 */
  .wm-main-hero .sm-hero-slide,.wm-main-hero .sm-hero-content{min-height:200px}
  .wm-main-hero .sm-hero-content{padding:24px 16px 20px}
}

/* v137 영화 상세 모바일 비율 수정: 상세 그리드가 모바일에서 280px+1fr로 안 접혀서
   오른쪽 정보 열이 60px대로 찌그러지고, 포스터가 강제 2/3 비율로 잘려 보이던 문제 수정.
   상세 포스터는 그리드 카드와 달리 원본 비율 그대로 보여야 하므로 cover/2:3을 쓰지 않는다. */
.sm-detail-poster img{aspect-ratio:auto;object-fit:contain}
@media(max-width:768px){
  .sm-detail-wrap{grid-template-columns:1fr!important;gap:16px!important}
  .sm-detail-poster{max-width:none;width:100%;margin:0}
  .sm-detail-poster>img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;display:block}
}

/* v156 데이터 3D 차트: 외부 라이브러리·이미지·JS 애니메이션 루프 없음.
   막대 높이가 곧 데이터(선호 %·최저 요금)이고, ::before/::after로 입체감만 더함.
   높이 애니메이션은 transform scaleY 1회(0.6초)뿐이고, 움직임 줄이기 설정 시 꺼짐. */
.wm-3d-stage{perspective:1000px}
.wm-3d-card{transform-style:preserve-3d;transition:transform .35s ease}
.wm-3d-card:hover{transform:rotateX(4deg) rotateY(-4deg) translateY(-2px)}
.wm-3d-bars{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:16px 12px 0 6px}
.wm-3d-barcol{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px;flex:1}
.wm-3d-bar{position:relative;width:36px;transform-origin:bottom;animation:wm-bar-grow .6s ease both}
.wm-3d-bar::before{content:'';position:absolute;left:0;top:-8px;width:100%;height:8px;background:rgba(255,255,255,.35);transform:skewX(-45deg);transform-origin:left bottom}
.wm-3d-bar::after{content:'';position:absolute;right:-8px;top:-4px;width:8px;height:100%;background:rgba(0,0,0,.25);transform:skewY(-45deg);transform-origin:left top}
.wm-3d-barval{font-size:11px;font-weight:900;white-space:nowrap}
.wm-3d-barlabel{font-size:11px;font-weight:700;text-align:center;white-space:nowrap}
@keyframes wm-bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .wm-3d-card{transition:none}
  .wm-3d-card:hover{transform:none}
  .wm-3d-bar{animation:none}
}

/* v158 가이드 순서 3D 단계 애니메이션: 9초 주기로 ①→②→③ 카드가 차례로 앞으로 튀어나옴.
   transform/border-color만 바꾸므로 레이아웃 이동이 없고, JS·이미지·외부 요청이 없음.
   카드와 아래 순서 문구가 같은 주기·같은 지연값으로 함께 강조돼 순서가 눈에 들어옴.
   전체 영역에 마우스를 올리면 일시정지, 움직임 줄이기 설정 시 애니메이션 꺼짐.
   기존 호버 틸트(wm-3d-card)와 transform이 충돌하므로, 가이드 카드 3개는 단계 애니메이션으로 대체함. */
.wm-3d-flow{perspective:1000px}
.wm-3d-step{transform-style:preserve-3d;animation:wm-step-cycle 9s linear infinite}
@keyframes wm-rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.wm-3d-flow.wm-rise-on .wm-3d-step{animation:wm-step-cycle 9s linear infinite,wm-rise-in .7s ease backwards}
.wm-3d-flow.wm-rise-on .wm-3d-arrow{animation:wm-rise-in .7s ease backwards}
.wm-3d-flow:hover .wm-3d-step,.wm-3d-flow:hover .wm-3d-steptext{animation-play-state:paused}
.wm-3d-steptext{animation:wm-steptext-cycle 9s linear infinite}
@keyframes wm-step-cycle{
  0%,26%{transform:translateZ(40px) scale(1.03);border-color:var(--accent)}
  33%,100%{transform:translateZ(0) scale(1)}
}
@keyframes wm-steptext-cycle{
  0%,26%{color:var(--accent);font-weight:900}
  33%,100%{color:var(--muted);font-weight:400}
}
@media (prefers-reduced-motion: reduce){
  .wm-3d-step,.wm-3d-steptext,.wm-3d-flow.wm-rise-on .wm-3d-step,.wm-3d-flow.wm-rise-on .wm-3d-arrow{animation:none}
}

/* ── v163: Taste Skill + UI/UX Pro Max 적용 (CSS만, PHP 로직·팔레트 색상·로고·단계 애니메이션 불변) ──
   적용한 원칙, 출처:
   - Taste (Leonxlnx/taste-skill, MIT, v2): 기본 템플릿 티(보라 그라데이션·똑같은 카드·얇은 라벨) 피하기,
     큰 타이포로 내용 채우기, 실제 브라우저 3개 폭에서 확인.
   - UI/UX Pro Max (nextlevelbuilder/ui-ux-pro-max-skill, MIT, v2, 기존 앱 테마 이관 방식):
     기존 토큰 재사용·병렬 테마 금지, 대비 4.5:1, 보이는 키보드 포커스, 좁은 폭에서 잘림 없는
     텍스트 리플로우, 움직임 줄이기 존중, 375/768/1024/1440 확인.
   의도적으로 바꾸지 않은 것:
   - 코랄 #e94b2c·틸 #0e8f83·다크 #12141a·반경 8px·플랫 규칙·소프트1 로고·v158 단계 애니메이션·
     제목 이모지(왓치몽 섹션 라벨로 정착됨, UUPM의 '이모지 아이콘 금지'를 액션 아이콘에만 적용).
   - 흰 글씨 on 코랄 버튼(대비 3.81)은 브랜드 버튼이라 이번에 색상을 바꾸지 않음. 다음 단계 후보로만 남김.
   - index.php·ott_guide.php의 인라인 스타일 117/47개는 이번 CSS만으로는 못 건드림. 다음 배치에서
     컴포넌트 단위로 토큰으로 옮길 것. */
/* 타이포 계층: 히어로와 섹션 제목을 키우고, 한글은 단어 단위로 줄바꿈 */
.sm-hero-title{font-size:clamp(28px,4vw,36px);line-height:1.25}
.sm-section-header h2{font-size:20px;line-height:1.3}
h1,h2,h3,.sm-section-header h2,.sm-hero-title{word-break:keep-all;text-wrap:balance}
.sm-card-title,.sm-post-title{word-break:keep-all}
/* 섹션 리듬: 데스크톱에서 섹션 간격을 한 단계 넓힘, 모바일은 기존 유지 */
.sm-section-header{margin:24px 0 12px}
/* 보이는 키보드 포커스: 기존 캐러셀·스크롤 행에만 있던 것을 버튼·링크·탭·입력까지 확대.
   :focus-visible이라 마우스 클릭 때는 테두리가 뜨지 않음 */
a:focus-visible,button:focus-visible,.sm-btn:focus-visible,.sm-slide:focus-visible,.ott-tab:focus-visible,.sm-input:focus-visible,.sm-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 칩·배지: 한글 음절 쪼개짐 방지 */
.sm-badge,.sm-pill,.sm-post-badge,.ott-tab{word-break:keep-all}
/* 모바일 하단 네비 터치 영역을 조금 키움 (화면 잠식 최소화) */
@media(max-width:768px){
  .sm-mobile-nav a{padding:10px 8px}
  .sm-section-header h2{font-size:17px}
  .sm-hero-title{font-size:22px}
}
/* 움직임 줄이기: 기존 개별 규칙에 히어로 트랙·페이드인·스켈레톤까지 합침 */
@media(prefers-reduced-motion:reduce){
  .sm-hero-track{transition:none}
  .sm-fadein{animation:none}
  .sm-skeleton{animation:none}
}

/* ── v164: 유튜브 Top 10 스킬 원칙 중 왓치몽에 맞는 것만 (CSS만, 색상·폰트·레이아웃 구조 불변) ──
   판정 (무리해서 덮지 않음):
   1 OKLCH Color (jakubkrehel/oklch-skill): 시범 적용만. 보조 회색 --muted2를 기존 hex와
     시각적으로 같은 oklch 값으로 추가. oklch 미지원 브라우저는 위 :root의 hex가 그대로 남음
     (미지원 선언은 무시됨). 코랄/틸 브랜드 색상은 oklch로 바꾸지 않음.
     다크 #8a919c = oklch(0.654 0.0183 259.4), 라이트 #66707e = oklch(0.542 0.0250 256.8).
   2 Swiss Design: 이미 충족. 1200px 그리드, 5→4→3열, 8px 단위 간격. 새로 바꾸지 않음.
   3 Transitions.dev: 이미 충족 (v120, 버튼·카드 0.2s, 움직임 줄이기 시 off). 이번에 카드
     호버에만 transform을 같은 0.2s로 추가해, 아래 마이크로 인터랙션이 끊기지 않게 함.
   4 DESIGN.md Directory: 이 주석 블록 자체가 결정 기록. 별도 디자인 문서·도구는 도입하지 않음.
   5 Agents with Taste: 이미 핵심. 그라데이션·똑같은 카드·얇은 라벨 없음. 새로 바꾸지 않음.
   6 Hue: 팔레트 감사만. 루트 색상이 코랄/틸/다크/중립 + 상태색(초록·노랑·빨강)으로 제한됨.
     새 색상 추가하지 않음.
   7 Refero Styles: 참조 스타일은 이미 정해진 Netflix/TVING식 플랫. 새 스타일 참조 추가하지 않음.
   8 TypeUI: 이미 충족 (v163). Pretendard+시스템 폰트, 히어로/섹션 계층, keep-all. 새 폰트 없음.
   9 UI/UX Pro Max: 이미 v163. 이번에 추가할 대비·포커스 결함이 없음 (a:focus-visible이 전역).
   10 AI UX Playground: 패턴 감사만. 스켈레톤 로딩·빈 상태 문구·토스트가 이미 있음.
     새로 추가한 패턴은 카드 호버 리프트 하나뿐.
   의도적으로 안 바꾼 것: 코랄/틸/다크 색상, 폰트, 반경 8px, 플랫 규칙, 소프트1 로고,
   v158 단계 애니메이션, 섹션 제목 이모지, 흰 글씨 on 코랄 버튼(대비 3.81, 브랜드 결정 필요). */
:root{--muted2:oklch(0.654 0.0183 259.4)}
body.theme-light{--muted2:oklch(0.542 0.0250 256.8)}
/* 카드 마이크로 인터랙션: 호버 시 2px만 위로. transform이라 레이아웃 이동 없음.
   가이드 단계 카드(.sm-panel)는 이 규칙 대상이 아니라 v158 애니메이션과 충돌하지 않음. */
.sm-card{transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.sm-card:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .sm-card{transition:none}
  .sm-card:hover{transform:none}
}
/* v85 전역 이펙트 배치 (2026-10-27, 사용자 '전체 사이트에 이펙트' 요청)
   규칙: transform·투명도·테두리색만. 그라데이션·패럴랙스·무거운 그림자·새 폰트·
   카드 글래스·새 JS 애니메이션 루프는 없음. 기존 v164 카드 리프트와 충돌하지 않게
   .sm-card 호버는 기존 리프트를 유지하고 테두리색만 추가한다. */
.sm-card img,.sm-slide img{transition:transform .3s ease}
.sm-card:hover img,.sm-slide:hover img{transform:scale(1.04)}
.sm-card:hover{border-color:var(--accent2)}
.sm-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.sm-btn:active{transform:translateY(1px) scale(.98)}
.sm-btn-primary:hover{transform:translateY(-1px)}
.sm-btn-primary:active{transform:translateY(1px) scale(.98)}
.sm-scroll-row,.sm-slider{scroll-behavior:smooth}
.sm-table tbody tr{transition:background-color .2s ease}
.sm-table tbody tr:hover{background:var(--bg2)}
.sm-event-item:hover{transform:translateY(-2px)}
.sm-event-item{transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
@media(prefers-reduced-motion:reduce){
  .sm-card img,.sm-slide img,.sm-btn,.sm-btn-primary,.sm-table tbody tr,.sm-event-item{transition:none}
  .sm-card:hover img,.sm-slide:hover img{transform:none}
  .sm-btn:active,.sm-btn-primary:hover,.sm-btn-primary:active,.sm-event-item:hover{transform:none}
  .sm-scroll-row,.sm-slider{scroll-behavior:auto}
}

/* ── v184 전역 폴리시 (2026-10-28, 영상 'TOP 14 GitHub Design & Motion Tools' 참고) ──
   Taste(레이아웃·애니메이션·정보밀도, 왓치몽 환경에 맞춰 최대한) + Hallmark(AI 티 제거) 배치.
   브랜드·팔레트·로고·폰트 변경 없음. 그라데이션·카드 글래스·패럴랙스·새 JS 루프 없음.
   레이아웃: 포스터 그리드 데스크톱 5→6열(1024px 이하 4→5열), 패널 패딩 16→14px,
   섹션 간격 28/14→24/12px. 모바일 열 수(768px 3열, 375px 2열)는 가독성 때문에 유지.
   애니메이션: 히어로 진입만 transform+opacity .5s ease-out 1회, 캐러셀 전환 .4s→.3s ease-out,
   reduced-motion에서는 진입 애니메이션 없음. 새 JS 루프 없음.
   Hallmark 감사 결과(전역 CSS): 그라데이션 0건, 트래킹 대문자 라벨 0건, 아이브로우 라벨 없음,
   히어로는 좌하단 정렬(항상 가운데 아님), 그리드 종류가 이미 다양함(포스터/KPI/파이/갤러리/
   게시글). 남은 구조적 텔(가이드 3카드 동일 구조 등)은 페이지별 작업으로 미룸.
   전이되지 않은 것: React Bits(React 전용), Remotion/Hyperframes/Claude Motion(영상 제작),
   Stitch/OpenDesign(생성 도구), Keyframe Gallery(참고용).
   이미 충족돼 다시 하지 않은 것: 대비·keep-all·밸런스 래핑(v163), OKLCH 시범(v164),
   카드 호버·입력 포커스(v174). */
select:focus-visible,textarea:focus-visible,.sm-card:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-btn:disabled,.sm-btn[disabled],button:disabled{opacity:.55;cursor:not-allowed;transform:none}
input,select,textarea,button{font:inherit}
summary{cursor:pointer}
::selection{background:rgba(233,75,44,.35)}
@keyframes wm-hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.sm-hero-content{animation:wm-hero-in .5s ease-out both}
@media (prefers-reduced-motion:reduce){.sm-hero-content{animation:none}}

/* ── v185 React Bits 스타일 인터랙션 (2026-10-28, 바닐라 JS/CSS로 재구현) ──
   React Bits는 React 전용 라이브러리라 PHP 사이트에 그대로 붙일 수 없어, 대표 효과 3가지를
   바닐라로 구현 (assets/js/interactive.js): 카드 스포트라이트(마우스 따라오는 빛),
   프라이머리 버튼 마그네틱(커서 쪽으로 끌림), 버튼 클릭 스파크(8방향 점 burst).
   이벤트 기반만 사용, rAF 루프 없음. hover 가능 기기에서만 동작, reduced-motion에서는 전부 꺼짐.
   스포트라이트는 radial 빛 효과라 정적 배경 그라데이션 금지 규칙의 예외(인터랙션 효과 한정,
   흰색 8% 투명도) — 카드·패널 배경은 그대로 플랫. */
.sm-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 70%)}
.sm-card:hover::after{opacity:1}
.sm-btn{position:relative}
.wm-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);pointer-events:none;animation:wm-spark .55s ease-out forwards;z-index:5}
.sm-btn-primary .wm-spark{background:#fff}
@keyframes wm-spark{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.4)}}
@media (prefers-reduced-motion:reduce){.sm-card::after{display:none}.wm-spark{display:none}}

/* ── v186 페이지 내 인트로 (2026-10-28, 메인 첫 진입 시퀀스) ──
   Remotion식 시퀀스를 웹용으로 재구현: 로고→타이틀→부제 순서로 뜬 뒤 오버레이가 사라짐.
   transform/opacity만 사용, 새 JS 루프 없음. 세션 1회(세션스토리지), 클릭 시 즉시 건너뛰기,
   JS가 없어도 CSS 애니메이션만으로 자동 종료돼 페이지가 갇히지 않음.
   reduced-motion에서는 인트로 자체를 표시하지 않음. */
.wm-intro{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:wm-intro-out .45s ease 1.3s both}
.wm-intro.wm-intro-done{display:none}
.wm-intro-logo{width:84px;height:84px;object-fit:contain;animation:wm-intro-in .45s ease-out both}
.wm-intro-title{font-size:30px;font-weight:900;letter-spacing:-.01em;animation:wm-intro-in .45s ease-out .2s both}
.wm-intro-sub{font-size:13px;color:var(--muted);animation:wm-intro-in .4s ease-out .5s both}
@keyframes wm-intro-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wm-intro-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.wm-intro{display:none}}

/* ── v187 Impeccable 감사 + 개선 (2026-10-28, 코드 감사 기준) ──
   고친 문제:
   ① 토스트가 모바일 하단 네비에 가려짐: 토스트 래퍼(bottom 24px, z 2000)가 ≤768px에서
   하단 네비(z 9999) 뒤에 깔렸음 → 모바일에서만 bottom 84px로 네비 위로 올림.
   ② 모달이 모바일 하단 네비 아래에 깔림: 모달 인라인 z 999가 네비 9999보다 낮았음 →
   모든 *Modal 래퍼를 z 10000으로 통일. 인라인 스타일을 이기려고 !important 사용
   (기존 모달 배경 !important와 같은 사유).
   ③ 순수 흰색(#fff) 사용: 히어로 제목·도트를 #e8eaed로 교체. 라이트 테마에서도
   어두운 사진 위에 올라가므로 var(--text)로는 바꾸지 않음(라이트 테마 텍스트는 near-black).
   ④ 중복 규칙 제거: .sm-input:focus가 두 곳에 동일하게 있어 한 곳을 지움.
   ⑤ 리듬: 패널 패딩 14→12px (4px 그리드에 맞추고 밀도도 유지).
   깨끗했던 것: transition:all 0건, 그라데이션 텍스트 0건, 카드 글래스 없음,
   트래킹 대문자 라벨 0건, 대비(본문·뮤트 모두 4.5 이상) 통과.
   고치지 않은 것(사유): !important 17건은 전부 페이지 인라인 스타일을 이기는
   하중 규칙(상세 포스터 v182 수정, 모달 배경, 모바일 그리드)이라 함부로 지우지 않음 —
   줄이려면 PHP 인라인 스타일 정리 작업이 따로 필요. 버튼 흰 글씨는 브랜드 결정,
   라이트 테마 흰 패널은 테마 자체라 유지. OKLCH는 muted2 시범만 유지(브랜드 색을
   표현만 바꾸는 작업은 시각적 이득 없이 구형 브라우저 리스크만 생김). 빈 상태 스타일·
   긴 본문 줄길이 제한은 마크업(클래스) 작업이 필요해 페이지별 후속 과제로 남김. */
@media(max-width:768px){#wmToastWrap{bottom:84px}}
div[id$="Modal"]{z-index:10000!important}

/* ── v202 모바일 데스크톱 보기 (force-desktop) ──
   원인: 반응형이 화면 너비 기준이라 브라우저 데스크톱 모드만으로는 좁은 폰에서 계속 모바일 레이아웃.
   해결: ?view=desktop → body.force-desktop + viewport width=1200. 아래 규칙이 모바일 미디어쿼리를 이김. */
body.force-desktop .sm-nav{display:flex!important}
body.force-desktop .sm-mobile-nav{display:none!important}
body.force-desktop .sm-wrap{padding:0 16px 20px!important;max-width:1200px;margin-left:auto;margin-right:auto}
body.force-desktop .sm-grid-wrap{grid-template-columns:repeat(6,1fr)!important;gap:12px!important}
body.force-desktop .sm-indie-grid{grid-template-columns:repeat(6,1fr)!important}
body.force-desktop .sm-post-2col-list{grid-template-columns:repeat(2,1fr)!important}
body.force-desktop .sm-scroll-row>.sm-card{flex:0 0 140px!important;min-width:140px!important}
body.force-desktop .sm-section-header h2{font-size:18px!important}
body.force-desktop .sm-hero-title{font-size:28px!important}

/* v215 wm-header-wrap-fix: 상단 메뉴 잘림 방지 - 모바일에서 헤더를 2행으로, nav-right는 줄바꿈 */
@media(max-width:768px){.sm-header-inner{flex-wrap:wrap;height:auto!important;padding:10px 12px}.sm-nav{order:3;flex-basis:100%;flex-shrink:1}.sm-nav-right{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:768px){.sm-util-row .sm-header-inner{flex-wrap:nowrap;overflow-x:auto;height:36px!important;padding:0 12px}.sm-util-row .sm-nav-right{flex-wrap:nowrap;justify-content:flex-end}}

/* v230: React Bits / Keyframe Gallery 장점만, CSS 전용, 속도 비용 없음
   - 한 글자씩 등장: 히어로 제목만, transform+opacity만 사용, JS 라이브러리·React·캔버스 없음
   - 버튼 반응: 검색 버튼·인기 검색어 알약만, transform만 사용
   - 제외: 파티클(캔버스), 마우스 따라오는 배경(마우스 이벤트·리페인트), 3D 카드 기울기(마우스 추적), 그라데이션 텍스트(플랫 규칙)
*/
@keyframes wmLetterIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wm-word{white-space:nowrap}
.wm-letter{display:inline-block;opacity:0;animation:wmLetterIn .45s ease forwards;will-change:transform,opacity}
.wm-search-btn{transition:transform .15s ease}
.wm-search-btn:active{transform:scale(.97)}
.wm-pop-pill{transition:background-color .2s ease,transform .15s ease}
.wm-pop-pill:hover{background:var(--bg2);transform:translateY(-1px)}
.wm-pop-pill:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.wm-letter{animation:none;opacity:1}.wm-search-btn,.wm-pop-pill{transition:none}}

/* ── v272: 8종 모션 효과 ── */
/* 1) 뷰 트랜지션: 상세·메뉴 전환 시 기본 크로스페이드 (미지원 브라우저는 일반 전환) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
/* 2) 슬라이드다운 배너: 위에서 내려왔다 3초 뒤 다시 올라감 */
#wmSlideBanner { position: fixed; top: 12px; left: 50%; z-index: 10002; background: #e94b2c; color: #fff; font-size: 22px; font-weight: 900; text-align: center; padding: 14px 30px; cursor: pointer; width: max-content; max-width: calc(100% - 32px); border-radius: 999px; transform: translate(-50%, -200%); opacity: 0; pointer-events: none; transition: transform .45s ease, opacity .45s ease; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#wmSlideBanner.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* 3) 찜 뱃지 스케일 팝 */
.wm-fav-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #e94b2c; font-size: 11px; font-weight: 900; text-align: center; line-height: 18px; vertical-align: 1px; }
.wm-fav-badge.wm-pop { animation: wmBadgePop .5s ease; }
@keyframes wmBadgePop { 0% { transform: scale(.4); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* 4) 히어로 타이포라이터 커서 */
.wm-type-cursor { display: inline-block; width: 3px; height: 1em; background: var(--accent); margin-left: 3px; vertical-align: -0.12em; animation: wmCursorBlink 1s steps(1) infinite; }
@keyframes wmCursorBlink { 50% { opacity: 0; } }
/* 5) 시간/날짜/날씨 위젯 바 + 햄버거 드로어 */
#wmDrawerClose { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
/* 6) 회원 별점 마퀴: 끝없이 흐름, 호버 시 정지 */
.wm-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wm-marquee-track { display: flex; gap: 12px; width: max-content; animation: wmMarquee 45s linear infinite; padding: 4px 0; }
.wm-marquee:hover .wm-marquee-track { animation-play-state: paused; }
.wm-marquee-chip { flex-shrink: 0; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--stroke); border-radius: 20px; padding: 8px 14px; font-size: 12px; color: var(--text); text-decoration: none; background: var(--panel); }
.wm-marquee-chip b { color: #f59e0b; }
@keyframes wmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #wmSlideBanner { transition: none; }
  .wm-fav-badge.wm-pop { animation: none; }
  .wm-type-cursor { animation: none; }
  .wm-marquee-track { animation: none; }
  .wm-marquee { overflow-x: auto; }
}

/* v339: 헤더 칩 아이디 스무스 그라데이션 (사용자 요청 — 이 요소에만 적용) */
.wm-id-grad{background:linear-gradient(90deg,#bae6fd,#ddd6fe,#fecdd3,#fef08a,#ffffff,#99f6e4,#bae6fd);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wmIdGrad 6s ease-in-out infinite}
@keyframes wmIdGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.wm-id-grad{animation:none}}

/* v369: 포인트샵 상단 마퀴 카드 + 뱃지 상세 모달 */
.wm-shop-mq-card{flex:0 0 110px;text-align:center;padding:12px 8px;background:var(--bg);border-radius:12px;border:0;cursor:pointer}
.wm-shop-mq-card img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 6px}
.wm-shop-mq-card span{display:block;font-size:11px;font-weight:800}
.wm-badge-open{cursor:pointer}
.wm-badge-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:10002;padding:16px}
.wm-badge-modal.open{display:flex}
.wm-badge-modal-panel{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;max-width:380px;width:100%;padding:24px;text-align:center;position:relative}
.wm-badge-modal-panel img{width:120px;height:120px;object-fit:contain;display:block;margin:0 auto 12px}
.wm-badge-modal-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}

/* v371: 포인트샵 카드 (테마 아이콘 카드 스타일, 작게) + 5열 그리드 + 다크모드 별점 가독성 */
.wm-shop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,130px));gap:12px;justify-content:center}
.wm-shop-card{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:border-color .2s ease,transform .2s ease}
.wm-shop-card:hover{border-color:var(--stroke2);transform:translateY(-2px)}
.wm-shop-card img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 6px}
.wm-shop-card-name{font-size:12px;font-weight:800;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.wm-shop-card-price{font-size:11px;color:var(--muted);margin:2px 0 8px}
@media(max-width:640px){.wm-shop-grid{grid-template-columns:repeat(5,1fr);gap:8px}.wm-shop-card{padding:10px 4px}.wm-shop-card img{width:100%;height:auto;aspect-ratio:1/1;max-width:72px}.wm-shop-card-name{font-size:11px}}
.sm-stars span{color:var(--muted)}

/* v373: 뱃지 이름 원래 위치(이미지 아래)로 복원, 다크모드 글자색 수정은 유지 */
.wm-badge-open,.wm-shop-mq-card,.wm-shop-card-name{color:var(--text)}

/* v375: 제목과 뱃지 그리드 정렬 (제목을 그리드 폭 698px에 맞춰 가운데 배치) */
.wm-shop-grade-title,.wm-shop-set-label{max-width:698px;margin-left:auto;margin-right:auto}

/* v381: 예고편 리워드 (스폰서 영상 → 포인트 → 예고편) */
.rw-video-wrap{position:relative;padding-bottom:56.25%;height:0;background:#000;border-radius:12px;overflow:hidden}
.rw-video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%}
.rw-trailer-wrap{position:relative;padding-bottom:56.25%;height:0}
.rw-trailer-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:12px}

/* v397: PC 모드 메뉴 여백 확대 → v413: 10개 메뉴 잘림 방지 위해 간격 축소 (gap 18→8px, padding 6px 10px→6px 8px) */
@media(min-width:769px){.sm-nav{gap:8px}.sm-nav a{padding:6px 8px}}
body.force-desktop .sm-nav{gap:8px}
body.force-desktop .sm-nav a{padding:6px 8px}

/* v406 OTT 랭킹 — flat (coral/teal/dark, radius 8px, 그라데이션·그림자·글래스 없음). 2px 호버 리프트(transform만), reduced-motion 해제 */
.wm-rank-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.wm-rank-tab{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--stroke);background:var(--panel);color:var(--text);font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;word-break:keep-all;transition:transform .2s}
.wm-rank-tab:hover{transform:translateY(-2px)}
.wm-rank-tab.on{color:#fff;border-color:transparent}
.wm-rank-tab:focus-visible,.wm-rank-card:focus-visible{outline:2px solid #0e8f83;outline-offset:2px}
.wm-rank-sec{margin-top:22px}
.wm-rank-sec-head{display:flex;align-items:baseline;gap:8px;border-left:4px solid var(--accent);padding-left:10px;margin-bottom:12px}
.wm-rank-sec-head h2{font-size:18px;font-weight:900;margin:0;word-break:keep-all}
.wm-rank-sec-head a{margin-left:auto;font-size:12px;font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap}
.wm-rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1023px){.wm-rank-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){.wm-rank-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
.wm-rank-card{position:relative;display:block;background:var(--panel);border:1px solid var(--stroke);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s}
.wm-rank-card:hover{transform:translateY(-2px)}
.wm-rank-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--bg2)}
.wm-rank-num{position:absolute;top:8px;left:8px;min-width:30px;height:30px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:#12141a;color:var(--muted);border:1px solid var(--stroke);border-radius:8px;font-size:17px;font-weight:900;line-height:1}
.wm-rank-num.top{background:var(--accent);color:#fff;border-color:transparent}
.wm-rank-body{display:block;padding:10px 10px 12px}
.wm-rank-title{display:block;font-size:13px;font-weight:800;line-height:1.45;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wm-rank-meta{display:block;margin-top:4px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-rank-meta b{color:#f5c542;font-weight:900}
@media (prefers-reduced-motion:reduce){.wm-rank-card,.wm-rank-tab{transition:none}.wm-rank-card:hover,.wm-rank-tab:hover{transform:none}}

/* v407 커뮤니티 게시판 정렬 — 정보소식·IT포럼을 2행에 맞춤 (공지사항 1행 왼쪽, 1행 오른쪽은 다른 게시판이 자동 배치로 채움) */
.wm-board-notice{grid-column:1;grid-row:1}
.wm-board-news{grid-column:1;grid-row:2}
.wm-board-itforum{grid-column:2;grid-row:2}

/* v410 OTT 가이드 단계 네비 — ①②③ 순서가 3번까지 계속 보임 */
.wm-guide-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--stroke);border-radius:8px}
.wm-guide-steps .wm-guide-home{font-size:12px;font-weight:800;color:var(--muted);text-decoration:none;white-space:nowrap;margin-right:2px}
.wm-guide-step{font-size:12px;font-weight:800;color:var(--text);text-decoration:none;white-space:nowrap;padding:6px 10px;border:1px solid var(--stroke);border-radius:8px;background:var(--bg2);word-break:keep-all}
.wm-guide-step.cur{background:var(--accent);border-color:var(--accent);color:#fff}
.wm-guide-step:not(.cur):hover{border-color:var(--accent)}
.wm-guide-step:focus-visible,.wm-guide-home:focus-visible,.wm-guide-next a:focus-visible{outline:2px solid #0e8f83;outline-offset:2px}
.wm-guide-arrow{color:var(--accent);font-weight:900;font-size:13px}
.wm-guide-next{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 8px}
.wm-guide-next .sm-btn{white-space:nowrap}
@media(max-width:640px){.wm-guide-steps{gap:4px}.wm-guide-step{padding:5px 8px}}

/* v413 메뉴 잘림 방지 — 모바일 하단 내비는 가로 스크롤 대신 줄바꿈으로 전체 표시 (2행), 본문 하단 여백·토스트 위치도 맞춤 */
@media(max-width:768px){
  .sm-mobile-nav{flex-wrap:wrap;overflow-x:visible;gap:4px}
  .sm-mobile-nav a{min-width:52px;padding:6px 6px}
  .sm-wrap{padding-bottom:130px}
  #wmToastWrap{bottom:122px}
}