/* 한글 글꼴 Noto Sans KR — 직접 서빙하는 가변 글꼴 한 파일(굵기 400~900, KS X 1001 한글 2,350자 + 영문·기호, 348KB, OFL 라이선스 static/fonts/OFL-NotoSansKR.txt).
   2026-09-28: Google Fonts판은 굵기마다 약 120조각(unicode-range)으로 나뉘어 글꼴 항목이 543개였고, 그 때문에 한글 글자 배치가 3~4배 느렸다
   (측정: 4배 느린 CPU에서 메인 탭 전환 720ms → 159ms, 알림 패널 열기 243 → 33ms). 드문 글자(2,350자 밖)는 시스템 한글 글꼴로 보인다.
   글꼴을 바꾸면 파일명(-v2)도 바꿀 것(30일 immutable 캐시). */
@font-face{font-family:'Noto Sans KR';src:url('/static/fonts/noto-sans-kr-v1.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;}

        :root{
            /* ── Montage(WDS) 다크 팔레트 — coolNeutral 베이스 + blue 프라이머리 ──
               값의 출처는 wanteddev/montage-web의 wds-theme semantic.dark 토큰이다.
               rgba 틴트는 *-rgb 채널 토큰을 거치므로 라이트모드에서도 자동으로 따라간다. */
            --accent-rgb:51,133,255;      /* blue[60]  #3385FF */
            --accent2-rgb:250,115,227;    /* pink[60]  #FA73E3 */
            --online-rgb:30,212,90;       /* green[60] #1ED45A */
            --accent3-rgb:40,208,237;     /* cyan[60]  #28D0ED */
            --neutral-rgb:112,115,124;    /* coolNeutral[50] #70737C — 라인/보더 기준색 */
            --ink-rgb:0,0,0;              /* 검정 채널 — 라이트 테두리·누름 면·그림자 틴트(rgba(var(--ink-rgb),.1)) */

            /* 배경: background.normal.alternative / normal / elevated.normal */
            --bg:#0F0F10; --surface:#1B1C1E; --surface2:#212225; --surface3:#2E2F33;
            /* 보더: line.normal.alternative / normal */
            --border:rgba(var(--neutral-rgb),0.22); --border2:rgba(var(--neutral-rgb),0.32);
            --border-accent:rgba(var(--accent-rgb),0.43);
            /* primary.normal / 밝은 hover / accent 계열 */
            --accent:#3385FF; --accent-hover:#69A5FF; --accent2:#FA73E3; --accent3:#28D0ED; --star:#FFA938;
            --violet-dim:rgba(var(--accent-rgb),0.12);

            /* label.normal / neutral(88%) / alternative(74% — 2026-09-26 대비 보정, Montage 원값 61%) */
            --text:#F7F7F8; --text2:rgba(194,196,200,0.88); --text3:rgba(174,176,182,0.74);
            --online:#1ED45A;
            --overlay:rgba(15,15,16,0.74); --glass:rgba(33,34,37,0.84); --blur-glass:18px;


            --card-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.2);
            /* Montage에서 가장 많이 쓰는 radius 3단 (12/10/8) + pill */
            --radius:12px; --radius2:10px; --radius-sm:8px; --radius-pill:9999px;

            /* 레이아웃 */
            --sidebar-w:76px; --sidebar-w-open:280px;
            --rsidebar-w:288px;   /* 본문 가독성 우선. 오른쪽 패널은 방송 현황·링크만 담는다 */
            --content-max:1560px;   /* 2200px 이상은 아래 미디어 쿼리에서 1900px (2026-10-02 운영자 2560px 화면 "배치가 이상해졌다" — 가운데 1560px 섬처럼 보였다) */

            /* 타이포그래피 — Montage Typography 스케일의 letter-spacing 규칙을 따른다:
               큰 글자는 음수(-0.023em~), 본문은 0 근처, 작은 글자는 양수(+0.019em~) */
            --font-display:'Inter','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
            --font-body:'Inter','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
            --font-mono:'JetBrains Mono',ui-monospace,monospace;
            --font-base:17px;
            --ls-title:-0.023em;   /* title3 */
            --ls-heading:-0.0194em;/* heading1 */
            --ls-body:0.0057em;    /* body1 */
            --ls-label:0.0145em;   /* label1 */
            --ls-caption:0.0252em; /* caption1 */

            --danger:#FF6363;      /* status.negative */
            --caution:#FFA938;     /* status.cautionary */
            /* accent/danger 배경 위에 올라가는 글자색 — Montage solid 버튼은 static.white를 쓴다 */
            --on-accent:#ffffff;




            --ease:cubic-bezier(0.22,1,0.36,1);

            --dur-fast:140ms; --dur-med:220ms;

        }

        /* ═══════════════════════════════════════════════════════════════════
           WDS(Montage) 토큰 확장 레이어 — P0 · docs/DESIGN-SPEC.md §2/§3 그대로.
           위의 :root 블록은 건드리지 않는다. 아래는 신규 --wds-* 토큰 정의 +
           §2.4 별칭 재지정(기존 이름은 삭제 없이 신규 토큰을 가리키도록만 바꿈).
           같은 :root 특이도에서는 뒤에 오는 선언이 이긴다 → 이 블록이 최종값이 된다.
           ═══════════════════════════════════════════════════════════════════ */
        :root{
            /* ── §2.2 semantic 토큰 — 다크 ── */
            --wds-static-white:#FFFFFF;
            --wds-static-black:#000000;
            --wds-primary-normal:#3385FF;
            --wds-primary-strong:#1A75FF;
            --wds-primary-heavy:#0066FF;
            /* 글자 대비(4.5:1)용 파랑 두 벌 (2026-10-16 1.20, 운영자 "파란 버튼 더 밝게" → 진한 바탕 + 흰 글자 선택):
               --accent-solid = 흰 글자가 올라가는 파란 바탕(#3385FF 위 흰 글자는 3.5:1), --accent-text = 어두운 면 위 파란 글자·태그·칩 */
            --accent-solid:#0F6BFF; --accent-solid-hover:#0A5FE8; --accent-text:#69A5FF;
            --danger-text:#FF6363;   /* 빨간 글자(일정 일요일 등) */
            --danger-solid:#D92B2B;  /* 흰 글자가 올라가는 빨간 면(위험 버튼·solid 태그) — #FF6363 위 흰 글자는 2.9:1(2026-10-24) */
            --accent3-text:#28D0ED;  /* 청록 아이콘·글자 — 라이트에서 #0098B2는 2.9:1이라 따로 */
            --caution-text:#FFA938;  /* 주황 글자(휴방) — 테두리·점은 --caution */
            --wds-label-normal:#F7F7F8;
            --wds-label-strong:#FFFFFF;
            --wds-label-neutral:rgba(194,196,200,.88);
            --wds-label-alternative:rgba(174,176,182,.74);   /* Montage .61 → .74: 카드 위 대비 3.77 → 4.67 (WCAG AA 4.5, 2026-09-26 가독성) */
            --wds-label-assistive:rgba(174,176,182,.28);
            --wds-label-disable:rgba(152,155,162,.16);
            --wds-bg-normal:#1B1C1E;
            --wds-bg-alt:#0F0F10;
            --wds-bg-elevated:#212225;
            --wds-bg-elevated-alt:#141415;
            --wds-line-normal:rgba(112,115,124,.32);
            --wds-line-neutral:rgba(112,115,124,.28);
            --wds-line-alt:rgba(112,115,124,.22);
            --wds-line-solid:#37383C;
            --wds-line-primary:rgba(51,133,255,.28);
            --wds-line-primary-strong:rgba(51,133,255,.43);
            --wds-fill-normal:rgba(112,115,124,.22);
            --wds-fill-strong:rgba(112,115,124,.28);
            --wds-fill-alt:rgba(112,115,124,.12);
            --wds-status-positive:#1ED45A;
            --wds-status-cautionary:#FFA938;
            --wds-status-negative:#FF6363;
            --wds-interaction-inactive:#5A5C63;
            --wds-interaction-disable:#2E2F33;
            --wds-material-dimmer:rgba(23,23,25,.74);

            /* ── §2.3 채널 토큰(rgba 틴트용) — 다크 ── */
            --wds-primary-rgb:51,133,255;
            --wds-neutral-rgb:112,115,124;
            --wds-positive-rgb:30,212,90;
            --wds-cautionary-rgb:255,169,56;
            --wds-negative-rgb:255,99,99;
            /* static.white 채널 — 인트로/입장 오버레이처럼 테마와 무관하게 항상 어두운
               배경 위에 흰 글자를 쓰는 화면 전용. 양쪽 테마 값이 동일해 :root에 한 번만 정의. */
            --wds-static-white-rgb:255,255,255;
            /* 인트로 스크림 채널 — #intro는 라이트모드 대응이 없는 고정 다크 히어로라
               bg-alt(다크 값 #0F0F10)를 rgba 틴트로 쓸 때 이 채널을 경유한다. */
            --wds-intro-scrim-rgb:15,15,16;

            /* ── §3.1 스페이싱 (Montage spacing/index.ts 원본) ── */
            --sp-0:0px;   --sp-1:1px;   --sp-2:2px;   --sp-4:4px;   --sp-6:6px;
            --sp-8:8px;   --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px;
            --sp-18:18px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px;
            --sp-56:56px; --sp-64:64px; --sp-72:72px; --sp-80:80px;

            /* ── §3.2 Radius — 기존 --radius/--radius2/--radius-sm/--radius-pill은
               위 첫 :root 블록에 이미 있고 값도 동일하므로 유지, 여기선 빠진 2단만 추가 ── */
            --radius-xs:4px;
            --radius-lg:16px;

            /* ── §3.3 Elevation (다크/라이트 동일 5단) ── */
            --elev-xs:0 1px 2px -1px rgba(0,0,0,.10);
            --elev-sm:0 1px 2px 0 rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
            --elev-md:0 2px 4px -1px rgba(0,0,0,.10), 0 4px 8px -2px rgba(0,0,0,.06);
            --elev-lg:0 4px 8px -2px rgba(0,0,0,.10), 0 8px 16px -4px rgba(0,0,0,.08);
            --elev-xl:0 8px 16px -4px rgba(0,0,0,.12), 0 16px 32px -8px rgba(0,0,0,.10);

            /* ── §2.4 기존 토큰 별칭 — ⚠️ 삭제 금지. app.js가 460곳 이상 참조(PRD R3).
               이름은 그대로 두고 신규 --wds-* 토큰을 가리키도록만 재지정한다. ── */
            --bg:            var(--wds-bg-alt);
            --surface:       var(--wds-bg-normal);
            --surface2:      var(--wds-bg-elevated);
            --border:        var(--wds-line-alt);
            --border2:       var(--wds-line-normal);
            --border-accent: var(--wds-line-primary-strong);
            --accent:        var(--wds-primary-normal);
            --text:          var(--wds-label-normal);
            --text2:         var(--wds-label-neutral);
            --text3:         var(--wds-label-alternative);
            --online:        var(--wds-status-positive);
            --danger:        var(--wds-status-negative);
            --caution:       var(--wds-status-cautionary);
            /* ⚠️ 앱 전용 스크림 값(#0F0F10 기반). material.dimmer(#171719 기반)와 다르므로 원본 유지.
               신규 컴포넌트는 --wds-material-dimmer를 직접 참조한다. */
            --overlay:       rgba(15,15,16,0.74);
            --accent-rgb:    var(--wds-primary-rgb);
            --neutral-rgb:   var(--wds-neutral-rgb);
            --online-rgb:    var(--wds-positive-rgb);
            --on-accent:     var(--wds-static-white);
            /* --surface3 / --accent-hover 는 별도 면·전용 hover값이라 §2.4 원문대로 유지 */
        }
        @media (min-width:1920px){
            :root{ --sidebar-w:80px; --sidebar-w-open:292px; }
        }
        @media (min-width:2560px){
            :root{ --sidebar-w:84px; --sidebar-w-open:304px; --font-base:18px; }
        }
        *{margin:0;padding:0;box-sizing:border-box;}
        :focus-visible{outline:2px solid var(--border-accent);outline-offset:2px;border-radius:var(--radius-xs);}
        body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--font-base);
            min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
            letter-spacing:var(--ls-body);line-height:1.6;
            /* 한글은 낱말 단위로 줄바꿈(keep-all) — 기본값이면 "스\n페셜"처럼 글자 사이 어디서나 끊긴다(2026-10-20, PC도 폰과 같게). 한 줄보다 긴 낱말(주소)만 글자 단위로 넘긴다 */
            word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;}
        h1,h2,h3{letter-spacing:var(--ls-title);}
        h4,h5,h6{letter-spacing:var(--ls-heading);}

        /* INTRO */
        #intro{position:fixed;inset:0;z-index:9999;background:linear-gradient(rgba(var(--wds-intro-scrim-rgb),.80),rgba(var(--wds-intro-scrim-rgb),.93)),url('/static/intro-bg.jpg') center/cover no-repeat,var(--wds-bg-alt);color:var(--wds-static-white);overflow-y:auto;display:flex;flex-direction:column;align-items:center;opacity:1;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.4,0,.2,1);}
        #intro.fade-out{opacity:0;pointer-events:none;transform:scale(1.02);}
        /* 인트로 진입 애니메이션 — 별·로고·문구·멤버가 하나씩 스르륵 */
        @keyframes introUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
        /* P2: 네온 글로우(introGlow) 제거 — 진입 애니메이션(introUp)만 유지 (D5) */
        .intro-container > svg{animation:introUp 1s cubic-bezier(.2,.7,.2,1) both !important;}
        .intro-title{animation:introUp 1s cubic-bezier(.2,.7,.2,1) .18s both;}
        .intro-desc{animation:introUp 1s cubic-bezier(.2,.7,.2,1) .38s both;}
        #intro-member-selector{animation:introUp 1s cubic-bezier(.2,.7,.2,1) .58s both;}
        @media (prefers-reduced-motion:reduce){ .intro-container > svg,.intro-title,.intro-desc,#intro-member-selector{animation:none !important;} }
        .intro-container{width:100%;max-width:820px;padding:90px 28px 110px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2;}
        /* 배경 별과 글씨가 겹쳐 안 읽히지 않도록 텍스트 뒤에 은은한 스크림 */
        .intro-container::before{content:'';position:absolute;left:50%;top:40px;transform:translateX(-50%);width:min(760px,95%);height:640px;border-radius:50%;
            background:radial-gradient(ellipse at center,rgba(var(--wds-intro-scrim-rgb),.92) 0%,rgba(var(--wds-intro-scrim-rgb),.78) 45%,rgba(var(--wds-intro-scrim-rgb),0) 75%);pointer-events:none;z-index:-1;}
        .intro-title{font-family:var(--font-display);font-size:clamp(52px,11vw,96px);font-weight:800;
            letter-spacing:-0.04em;line-height:.95;margin-bottom:22px;color:var(--wds-static-white);}
        /* 사이트명은 span 2개(STEL/DATABASE)로 쪼개져 있다. 넓은 화면에서는 inline이라
           한 줄로 이어 붙고, 좁아지면 mobile.css 768px 규칙이 두 줄로 쌓아 가로 넘침을 막는다. */
        .intro-tagline{font-family:var(--font-display);font-size:clamp(14px,1.4vw,17px);font-weight:500;
            letter-spacing:var(--ls-caption);color:rgba(var(--wds-static-white-rgb),.5);margin:-8px 0 28px;   /* 대문자·넓은 자간은 생성형 UI 표식이라 뺐다(2026-10-20) */
            animation:introUp 1s cubic-bezier(.2,.7,.2,1) .28s both;}
        .intro-desc{font-size:16px;color:rgba(var(--wds-static-white-rgb),.5);line-height:1.85;margin-bottom:40px;max-width:540px;}

        #intro-member-selector{margin-bottom:40px;width:100%;}
        /* 인트로 멤버 고르기 — 스타일은 여기 한 곳(1.10: index.html 인라인·intro.js가 다른 값으로 덮고 있었다). 대문자·넓은 자간 대신 문장형 라벨 */
        .intro-member-hint{font-size:13px;color:rgba(var(--wds-static-white-rgb),.5);margin-bottom:16px;letter-spacing:var(--ls-caption);font-weight:600;}
        #intro-member-list{display:flex;flex-direction:column;align-items:center;gap:20px;}
        .intro-gen{display:flex;flex-direction:column;align-items:center;gap:11px;}
        .intro-gen__label{font-size:13px;font-weight:800;letter-spacing:var(--ls-caption);color:rgba(var(--wds-static-white-rgb),.5);}
        /* 인트로 멤버 격자: PC는 한 줄 4명(기수 인원이 적으면 그 수만큼), 폰은 mobile.css에서 2열 */
        .intro-member-grid{display:grid;grid-template-columns:repeat(var(--c4,4),150px);justify-content:center;gap:9px;}
        .intro-member-btn{width:100%;white-space:nowrap;background:rgba(var(--wds-static-white-rgb),.08);border:1px solid var(--m-color);color:var(--wds-static-white);
            padding:8px 12px;border-radius:var(--radius-pill);cursor:pointer;font-size:13px;font-family:inherit;font-weight:700;transition:background-color .25s var(--ease);}
        .intro-member-btn:hover{background:color-mix(in srgb,var(--m-color) 20%,transparent);}
        #intro-member-detail{background:rgba(var(--wds-static-white-rgb),.04);border:1px solid rgba(var(--wds-static-white-rgb),.08);
            padding:24px;border-radius:var(--radius-lg);margin-bottom:36px;width:100%;}
        #intro-detail-video{aspect-ratio:16/9;margin-bottom:15px;border-radius:var(--radius2);overflow:hidden;background:var(--wds-static-black);}
        #intro-detail-text{font-size:14px;line-height:1.6;}
        .intro-detail__meta{font-size:15px;color:rgba(var(--wds-static-white-rgb),.5);margin:4px 0;}
        .intro-detail__bio{color:rgba(var(--wds-static-white-rgb),.8);font-size:13px;line-height:1.7;white-space:pre-wrap;}
        /* 입장 버튼: 흐름상 맨 아래(겹침 없음) */
        .enter-btn-wrap{position:static;padding:8px 20px 0;margin-top:44px;z-index:3;width:100%;}
        #btn-enter-hub{padding:15px 52px;background:rgba(var(--wds-static-white-rgb),.06);color:var(--wds-static-white);
            border:1px solid rgba(var(--wds-static-white-rgb),.16);border-radius:var(--radius-pill);font-size:16px;font-weight:600;
            font-family:var(--font-body);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);
            backdrop-filter:blur(12px);letter-spacing:.01em;}
        #btn-enter-hub.ready{background:var(--accent-solid);border-color:transparent;color:var(--on-accent);
            box-shadow:0 4px 20px rgba(var(--accent-rgb),.25);animation:none;}
        #btn-enter-hub.ready:hover{background:var(--accent-hover);box-shadow:0 10px 34px rgba(var(--accent-rgb),.32);}

        /* MAIN APP */

        /* ── SIDEBAR ──
           접힘: 아이콘 레일 / 펼침: 아이콘+라벨. 활성 탭은 좌측 바 + 톤 배경으로 표시 */
        .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
            border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;z-index:100;
            transition:width .24s var(--ease);overflow:hidden;}
        .sidebar.open{width:var(--sidebar-w-open);}
        /* 접힌 레일에서는 토글 버튼만 있어 아래 탭 아이콘들과 세로선을 맞추려 가운데 정렬한다.
           펼치면 왼쪽에 .sidebar-brand(사이트명 + 한 줄 설명, 2026-09-23 운영자 요청)가 생겨 space-between. */
        .sidebar-header{display:flex;align-items:center;justify-content:center;padding:0 14px;
            border-bottom:1px solid var(--border);min-height:64px;gap:10px;flex-shrink:0;}
        .sidebar.open .sidebar-header{justify-content:space-between;}
        /* 펼친 사이드바 머리에는 사이트명 + 한 줄 설명을 둔다 (2026-09-23, "맨 위가 허전하다").
           접힌 레일에서는 자리를 차지하지 않도록 display:none. */
        .sidebar-brand{display:none;min-width:0;flex:1;line-height:1.2;}
        .sidebar.open .sidebar-brand{display:block;}
        .sidebar-brand__name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:var(--ls-heading);
            color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .sidebar-brand__desc{font-size:12px;color:var(--text3);letter-spacing:var(--ls-caption);white-space:nowrap;
            overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
        /* 좌측 사이드바 토글과 우측 패널 토글은 완전히 같은 규격이다 (사용자 요청).
           예전에는 둘 다 텍스트 '›' 문자라 흐릿하고 작아 버튼인지 알아보기 어려웠다.
           같은 monoline SVG + 면/보더를 줘서 눌리는 것으로 보이게 한다. */
        .wds-icon-btn.sidebar-toggle,
        .wds-icon-btn.panel-toggle{
            width:34px;height:34px;border-radius:var(--radius-sm);
            border:1px solid var(--border2);background:var(--surface2);color:var(--text2);
            cursor:pointer;display:flex;align-items:center;justify-content:center;
            transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast);flex-shrink:0;}
        .wds-icon-btn.sidebar-toggle:hover,
        .wds-icon-btn.panel-toggle:hover{background:var(--violet-dim);color:var(--accent-text);border-color:var(--border-accent);}
        .wds-icon-btn.sidebar-toggle svg,
        .wds-icon-btn.panel-toggle svg{width:18px;height:18px;stroke-width:2.2;}
        /* 펼쳐진 상태에서는 화살표를 뒤집어 "접기"임을 보여준다 */
        .sidebar.open .sidebar-toggle{transform:rotate(180deg);}
        .panel-toggle.is-collapsed{transform:rotate(180deg);}

        .nav-scroll{padding:10px 8px;}
        /* 좌측 탭 버튼은 우측 사이드바의 .rs-link와 같은 규격을 쓴다 (사용자 요청, 우측이 기준).
           surface2 면 + 보더 + radius2 + 14.5px. 접힌 상태에서도 같은 규격이 유지된다. */
        .nav-btn{width:100%;height:44px;border-radius:var(--radius2);
            border:1px solid var(--border);background:var(--surface2);
            color:var(--text2);cursor:pointer;display:flex;align-items:center;padding:0 12px;
            font-family:var(--font-body);font-weight:500;position:relative;gap:11px;white-space:nowrap;
            margin-bottom:6px;}
        /* 활성 표시 좌측 바 — 버튼이 보더+radius를 갖게 되면서 바깥에 붙는 ::before가
           둥근 모서리를 뚫고 나온다. 그래서 .wds-card--accent와 같은 inset 그림자 방식으로 바꿨다
           (DESIGN-SPEC §4.4). ::before는 남겨두면 이중으로 보이므로 없앤다. */
        .nav-btn .nav-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;display:flex;
            align-items:center;justify-content:center;line-height:1;}
        /* monoline SVG 아이콘 — 색은 버튼 상태(currentColor)를 따라간다 */
        .nav-btn .nav-icon svg{width:19px;height:19px;stroke-width:1.6;display:block;}
        .nav-btn .nav-label{font-size:14.5px;font-weight:inherit;color:inherit;white-space:nowrap;
            overflow:hidden;opacity:0;transition:opacity .18s;}
        .sidebar.open .nav-btn .nav-label{opacity:1;}
        .nav-bottom{padding:8px;border-top:1px solid var(--border);}
        /* 넓은 화면은 왼쪽 메뉴 버튼도 한 단계씩 키운다 — 기본 .nav-btn 규칙 뒤에 둬야 이긴다(2026-10-21 운영자 2560×1440 "왼쪽 메뉴(일정 등) 크기가 너무 작다" — 44px 버튼 9개 아래가 비었다) */
        @media (min-width:1920px){
            .nav-btn{height:50px;margin-bottom:8px;gap:12px;}
            .nav-btn .nav-icon svg{width:21px;height:21px;}
            .nav-btn .nav-label{font-size:15.5px;}
        }
        @media (min-width:2560px){
            .nav-scroll{padding:12px 10px;}
            .nav-btn{height:56px;margin-bottom:10px;gap:13px;padding:0 14px;}
            .nav-btn .nav-icon{width:24px;}
            .nav-btn .nav-icon svg{width:23px;height:23px;}
            .nav-btn .nav-label{font-size:17px;}
            .sidebar-brand__name{font-size:16px;}
            .sidebar-brand__desc{font-size:13px;}
        }

        /* MAIN AREA */
        /* 여백은 애니메이션하지 않는다(2026-09-27 운영자 "사이드바 열 때 렉") — 0.24초 동안 매 프레임 본문 폭이 바뀌어 VOD·굿즈 카드 수백 장을
           프레임마다 다시 배치했다(PC 4배 느린 CPU에서 한 프레임 50~83ms). 사이드바만 미끄러지고 본문은 한 번에 자리를 옮긴다 */
        .main{margin-left:var(--sidebar-w);margin-right:var(--rsidebar-w);min-height:100vh;position:relative;z-index:1;}
        /* 접힌 오른쪽 패널은 왼쪽처럼 아이콘 레일(--sidebar-w)로 남는다 (2026-09-23) */
        .main.rsidebar-collapsed{margin-right:var(--sidebar-w);}
        /* 사이드바 열고 닫기 끊김 (2026-09-27, 운영자 "꺼낼 때 끊김이 있다"): intro.js _slidePanel이 본문 배치(무거운 한 번)를 먼저 끝내고
           본문을 옛 자리에 transform으로 붙잡아 둔 뒤, 다음 프레임에 사이드바 폭 전환과 본문 미끄러짐(.is-sliding)을 함께 시작한다.
           예전엔 그 배치가 사이드바 전환이 시작된 프레임에 끼어 움직임이 40%쯤 건너뛴 채 튀어나오고, 본문은 순간 이동했다.
           사이드바는 contain:strict로 폭이 바뀌어도 안쪽만 다시 배치한다(데스크톱만 — 폰 서랍은 mobile.css). */
        .main.is-sliding{transition:transform .24s var(--ease);}
        @media (min-width:901px){ html:not(.is-phone) .sidebar, html:not(.is-phone) .right-sidebar{contain:strict;} }

        /* ── TOPBAR ── */
        .topbar{position:sticky;top:0;
            border-bottom:1px solid var(--border);padding:0 clamp(16px,2vw,28px);height:64px;
            display:flex;align-items:center;justify-content:space-between;z-index:50;}
        /* 왼쪽 그룹(메뉴버튼+제목)이 좁은 화면에서 줄어들 수 있어야 한다.
           min-width:0 없으면 제목이 상단바를 밀어내 가로스크롤이 생긴다. */
        .topbar>div:first-child{min-width:0;}
        .page-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-0.01em;
            color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
        /* 상단바 사이트명: 넓은 화면은 전체 표기, 좁아지면 짧은 표기로 교체
           (줄임표로 단어 중간이 잘리는 것보다 낫다) */
        .page-title .pt-short{display:none;}
        /* 베타 표기 (2026-09-25, 운영자 "지금 베타버전이라고 써줘") — 상단바 사이트명·사이드바 머리·인트로 태그라인 뒤 */
        .beta-badge{display:inline-flex;align-items:center;min-height:18px;margin-left:var(--sp-6);padding:0 var(--sp-6);
            border-radius:var(--radius-pill);background:rgba(var(--accent-rgb),.16);color:var(--accent-text);
            font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:0;line-height:1.4;
            text-transform:none;vertical-align:middle;flex-shrink:0;}

        
        .beta-badge--intro{min-height:20px;margin-left:var(--sp-10);color:var(--wds-static-white);
            background:rgba(var(--accent-rgb),.55);}
        .topbar-right{display:flex;align-items:center;gap:var(--sp-10);justify-content:flex-end;}

        /* 상단바 monoline 아이콘 — 사이드바와 동일한 스트로크 규격 */
        .tb-svg{width:18px;height:18px;stroke-width:1.6;display:block;}
        #mobile-menu-btn .tb-svg{width:20px;height:20px;}
        .tb-btn{padding:7px 14px;border-radius:var(--radius2);cursor:pointer;font-size:14px;font-weight:600;
            color:var(--text);background:var(--surface2);border:1px solid var(--border2);
            font-family:var(--font-body);letter-spacing:0;}

        /* ── CONTENT ── */
        .content{padding:clamp(20px,2vw,32px) clamp(20px,2.5vw,36px);width:100%;max-width:var(--content-max);
            margin:0 auto;box-sizing:border-box;}
        .page{display:none;width:100%;}
        .page.active{display:block;animation:pageIn .3s var(--ease);}
        @keyframes pageIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
        @media (prefers-reduced-motion:reduce){.page.active{animation:none;}}

        /* 섹션 제목 — 대문자 트래킹 대신 또렷한 위계 */
        .section-label{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.02em;
            color:var(--text);text-transform:none;margin:0 0 16px;display:flex;align-items:center;gap:10px;}

        /* ── FILTER TABS (pill) ── */
        .filter-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}

        /* ── 오른쪽 패널 (방송 현황) ── */
        .right-sidebar-title{font-family:var(--font-display);font-size:13px;font-weight:600;
            letter-spacing:var(--ls-caption,0.0252em);color:var(--text3);white-space:nowrap;}
        .right-sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
            padding:14px 12px;display:flex;flex-direction:column;gap:16px;}

        .widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
            padding:clamp(16px,1.4vw,20px);position:relative;overflow:visible;}
        .widget-title{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:var(--ls-caption,0.0252em);
            color:var(--text3);margin-bottom:12px;}

        /* STATS */
        .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
        .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,2.5vw,40px) clamp(14px,1.2vw,24px);min-height:clamp(100px,8vw,140px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
        .widget:hover,.stat-card:hover{border-color:var(--border2);}
        .stat-num{font-family:var(--font-display);font-size:clamp(36px,3.5vw,64px);font-weight:800;line-height:1;color:var(--accent-text);}   /* 그라데이션 글자는 숫자가 있는 가운데가 어두운 파랑이라 카드 위에서 안 보였다(2026-10-23 운영자 "색이 너무 어두워서") */
        .stat-label{font-size:clamp(13px,1vw,15px);color:var(--text3);margin-top:6px;letter-spacing:var(--ls-caption,0.0252em);font-family:var(--font-body);}


        .toggle{width:30px;height:17px;border-radius:var(--radius-pill);background:var(--border2);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
        .toggle.on{background:var(--accent);}
        body.light .toggle:not(.on){background:rgba(var(--neutral-rgb),.42);}   /* 흰 카드 위 꺼진 트랙이 거의 안 보였다(흰 손잡이와도 구분되게) */
        .toggle::after{content:'';position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:var(--on-accent);transition:transform .2s;box-shadow:0 1px 3px rgba(var(--ink-rgb),.3);}
        .toggle.on::after{transform:translateX(13px);}   /* left 대신 transform — 배치 없이 합성만 */

        /* MODALS — §4.8 .wds-modal 스펙 값(재질감·radius·elevation)을 기존 .modal-overlay/.modal에도
           적용한다. 마크업 자체는 정적 셸 모달(로그인/프로필/건의) 4개만 .wds-modal 구조로 이관하고,
           app.js가 동적으로 그리는 나머지 모달은 이 클래스를 그대로 쓰므로 여기서 함께 개선된다. */
        .modal-overlay{position:fixed;inset:0;background:var(--wds-material-dimmer);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:24px;overflow-y:auto;overflow-x:hidden;z-index:10000;}
        .modal-overlay.show{display:flex;}
        .modal{background:var(--wds-bg-elevated);border:1px solid var(--border2);border-radius:var(--radius-lg);width:90%;max-width:400px;max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;padding:26px;position:relative;box-shadow:var(--elev-xl);}
        .modal-close{position:absolute;top:16px;right:16px;background:var(--wds-fill-alt);border:1px solid var(--wds-line-normal);color:var(--text2);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s,opacity .18s;}
        .modal-close:hover{background:var(--wds-fill-normal);color:var(--text);}
        .modal-title{font-size:20px;font-weight:700;margin-bottom:20px;text-align:center;color:var(--text);}
        .form-group{margin-bottom:12px;}
        .form-group label{display:block;font-size:12px;color:var(--text3);margin-bottom:6px;font-weight:600;letter-spacing:var(--ls-caption,0.0252em);font-family:var(--font-body);}
        .form-group input[type="text"],.form-group input[type="password"]{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius2);padding:9px 12px;color:var(--text);font-size:16px;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box;font-family:var(--font-body);}
        .modal-actions{display:flex;gap:10px;margin-top:18px;}
        .modal-actions button{flex:1;padding:10px;border-radius:var(--radius2);border:none;font-size:15px;font-weight:700;cursor:pointer;color:var(--on-accent);transition:opacity .18s;font-family:var(--font-body);}
        .btn-cancel{background:var(--surface2)!important;border:1px solid var(--border2)!important;color:var(--text2)!important;}
        .btn-logout{background:rgba(var(--wds-negative-rgb),.08);margin-top:10px;width:100%;padding:9px;border-radius:var(--radius2);border:1px solid rgba(var(--wds-negative-rgb),.2);font-size:14px;font-weight:700;cursor:pointer;color:var(--danger-text);display:flex;align-items:center;justify-content:center;transition:background .18s;font-family:var(--font-body);}
        .btn-logout:hover{background:rgba(var(--wds-negative-rgb),.14);}
        .auth-btn{width:100%;padding:10px;border-radius:var(--radius2);border:none;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:9px;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .18s;font-family:var(--font-body);}
        .auth-btn:hover{opacity:.88;filter:brightness(1.06);}   /* 액센트 버튼 — 글로우 대신 톤 변화 */

        /* ALARM PANEL */
        .alarm-wrap{position:relative;}
        #alarm-panel{position:absolute;top:46px;right:0;width:min(360px,calc(100vw - 24px));background:var(--wds-bg-elevated);border:1px solid var(--wds-line-normal);border-radius:var(--radius);padding:var(--sp-12);box-shadow:var(--elev-lg);z-index:200;display:flex;flex-direction:column;}

        /* LIGHT THEME — 중립 그레이 베이스 + 동일 블루 액센트(살짝 진하게) */
        body.light{
            /* Montage semantic.light — 같은 토큰 이름을 재정의하므로 앱 전체가 함께 대응된다 */
            --accent-rgb:0,102,255;       /* blue[50]   #0066FF */
            --accent2-rgb:213,49,184;     /* pink[40]   #D331B8 */
            --online-rgb:0,115,38;        /* #007326 (2026-09-26 가독성, 원래 green[40] #009632) */
            --accent3-rgb:0,152,178;      /* cyan[40]   #0098B2 */
            --neutral-rgb:112,115,124;    /* coolNeutral[50] — 라이트에서도 동일 기준색 */

            --bg:#F7F7F8;--surface:#ffffff;--surface2:#F4F4F5;--surface3:#EAEBEC;
            --border:rgba(var(--neutral-rgb),0.16);--border2:rgba(var(--neutral-rgb),0.22);
            --border-accent:rgba(var(--accent-rgb),0.43);
            /* label.normal / neutral(88%) / alternative(74% — 2026-09-26 대비 보정, Montage 원값 61%) */
            --text:#171719;--text2:rgba(46,47,51,0.88);--text3:rgba(55,56,60,0.74);
            --accent:#0066FF;--accent-hover:#005EEB;--accent2:#D331B8;--accent3:#0098B2;
            --violet-dim:rgba(var(--accent-rgb),0.08);

            --online:#007326;--danger:#FF4242;--caution:#FF9200;--star:#D47800;
            --overlay:rgba(23,23,25,0.42);--glass:rgba(255,255,255,0.88);


            --card-shadow:0 1px 2px rgba(23,23,25,.05),0 4px 14px rgba(23,23,25,.05);




        }

        /* ── WDS(Montage) 토큰 확장 레이어 — 라이트. §2.2/§2.3/§2.4를 그대로.
           기존 body.light 블록은 건드리지 않고, 뒤에 이어서 재지정만 한다. ── */
        body.light{
            /* ── §2.2 semantic 토큰 — 라이트 ── */
            --wds-static-white:#FFFFFF;
            --wds-static-black:#000000;
            --wds-primary-normal:#0066FF;
            --wds-primary-strong:#005EEB;
            --wds-primary-heavy:#0054D1;
            --accent-solid:#0066FF; --accent-solid-hover:#005EEB; --accent-text:#0054D1;
            --danger-text:#C42323;   /* 흰 면 위 #FF4242는 3.4:1, #D92B2B는 빨간 틴트(.12) 위 4.05 → #C42323 4.85(2026-10-24) */
            --danger-solid:#D92B2B;  /* 흰 글자 4.85:1 */
            --accent3-text:#00748A;  /* 흰 면 위 4.62:1 */
            --caution-text:#A35C00;  /* 흰 면 위 #FF9200은 2.3:1 */
            --wds-label-normal:#171719;
            --wds-label-strong:#000000;
            --wds-label-neutral:rgba(46,47,51,.88);
            --wds-label-alternative:rgba(55,56,60,.74);   /* Montage .61 → .74: 흰 바탕 대비 3.66 → 5.27 */
            --wds-label-assistive:rgba(55,56,60,.28);
            --wds-label-disable:rgba(55,56,60,.16);
            --wds-bg-normal:#FFFFFF;
            --wds-bg-alt:#F7F7F8;
            --wds-bg-elevated:#FFFFFF;
            --wds-bg-elevated-alt:#F7F7F8;
            --wds-line-normal:rgba(112,115,124,.22);
            --wds-line-neutral:rgba(112,115,124,.16);
            --wds-line-alt:rgba(112,115,124,.08);
            --wds-card-line:var(--wds-line-neutral);   /* 카드 테두리만 .16 — 구분선(line-alt)은 그대로 */
            --wds-line-solid:#E1E2E4;
            --wds-line-primary:rgba(0,102,255,.28);
            --wds-line-primary-strong:rgba(0,102,255,.43);
            --wds-fill-normal:rgba(112,115,124,.08);
            --wds-fill-strong:rgba(112,115,124,.16);
            --wds-fill-alt:rgba(112,115,124,.05);
            --wds-status-positive:#007326;   /* #009632 → #007326: 초록 글자(LIVE·방송 중) 대비 3.26 → 4.89 (2026-09-26 가독성) */
            --wds-status-cautionary:#FF9200;
            --wds-status-negative:#FF4242;
            --wds-interaction-inactive:#989BA2;
            --wds-interaction-disable:#F4F4F5;
            --wds-material-dimmer:rgba(23,23,25,.52);

            /* ── §2.3 채널 토큰 — 라이트 ── */
            --wds-primary-rgb:0,102,255;
            --wds-neutral-rgb:112,115,124;
            --wds-positive-rgb:0,115,38;
            --wds-cautionary-rgb:255,146,0;
            --wds-negative-rgb:255,66,66;

            /* ── §2.4 기존 토큰 별칭 — 라이트도 동일하게 재지정. 이름 삭제 금지 ── */
            --bg:            var(--wds-bg-alt);
            --surface:       var(--wds-bg-normal);
            /* ⚠️ --surface2는 wds-bg-elevated(라이트=#FFFFFF)로 두면 --surface와 같은 색이 되어
               면 구분이 사라진다. Montage 라이트는 그림자로 elevation을 표현하지만 이 앱은 톤으로
               표현하므로, 라이트에서는 coolNeutral[98] 리터럴을 유지한다. */
            --surface2:      #F4F4F5;
            /* ⚠️ 라이트의 기존 --border는 0.16 = line.normal.neutral이다.
               line.normal.alternative(0.08)로 매핑하면 보더가 절반으로 옅어진다. */
            --border:        var(--wds-line-neutral);
            --border2:       var(--wds-line-normal);
            --border-accent: var(--wds-line-primary-strong);
            --accent:        var(--wds-primary-normal);
            --text:          var(--wds-label-normal);
            --text2:         var(--wds-label-neutral);
            --text3:         var(--wds-label-alternative);
            --online:        var(--wds-status-positive);
            --danger:        var(--wds-status-negative);
            --caution:       var(--wds-status-cautionary);
            /* ⚠️ 앱 전용 스크림 값. material.dimmer(라이트 .52)와 다르므로 원본 유지.
               신규 컴포넌트는 --wds-material-dimmer를 직접 참조한다. */
            --overlay:       rgba(23,23,25,0.42);
            --accent-rgb:    var(--wds-primary-rgb);
            --neutral-rgb:   var(--wds-neutral-rgb);
            --online-rgb:    var(--wds-positive-rgb);
            --on-accent:     var(--wds-static-white);
        }

        /* SETTINGS */
        .settings-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-20);}

        /* RIGHT SIDEBAR */
        .right-sidebar.collapsed{width:var(--sidebar-w);}
        .right-sidebar{position:fixed;right:0;top:0;bottom:0;width:var(--rsidebar-w);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:width .25s cubic-bezier(.4,0,.2,1);overflow:hidden;}
        body.overlay-open .right-sidebar,
        body.overlay-open .sidebar,
        body.overlay-open #mobile-menu-btn{display:none !important;}
        .right-sidebar-header{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;padding:0 14px;border-bottom:1px solid var(--border);height:64px;flex-shrink:0;}

        .rs-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 13px;}
        .rs-link{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--radius2);
            background:var(--surface2);border:1px solid var(--border);text-decoration:none;color:var(--text2);
            font-size:14.5px;font-weight:500;margin-bottom:6px;}
        .rs-link:last-child{margin-bottom:0;}

        .rs-link:hover{background:var(--rs-hover,var(--violet-dim));color:var(--rs-hc,var(--accent));
            border-color:var(--rs-hb,var(--border-accent));}
        /* MOBILE */

        #mobile-menu-btn{display:none;width:32px;height:32px;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);cursor:pointer;margin-right:10px;}

        

        /* 중간 해상도 (1280~1920) */
        @media(min-width:1280px) and (max-width:1919px){
            :root{--font-base:18px;--sidebar-w:72px;}
        }
        /* 인라인 px로 박힌 아주 작은 글자에만 가독성 하한선을 적용 (14px floor, 2026-09-10에 13→14).
           14px 이상은 각 화면의 의도된 위계이므로 건드리지 않는다. */
        .content [style*="font-size:10px"],
        .content [style*="font-size:11px"],
        .right-sidebar [style*="font-size:10px"],
        .right-sidebar [style*="font-size:11px"]{font-size:14px !important;}
        .content [style*="font-size:12px"],
        .content [style*="font-size:13px"],
        .right-sidebar [style*="font-size:12px"],
        .right-sidebar [style*="font-size:13px"]{font-size:14px !important;}
        /* 스크롤 등장(reveal) — 아래에서 부드럽게 올라오며 나타남 */
        /* will-change는 쓰지 않는다 — 카드 수백 장(굿즈 378 등)이 각각 그래픽 층이 되어 사이드바·스크롤 때 다시 그리기가 무거워졌다. 전환 중에만 브라우저가 알아서 올린다 */
        .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
        .reveal.in{opacity:1;transform:none;}
        /* 누를 수 있는 카드(.wds-card--interactive)의 transition이 뒤에 로드돼 이 페이드를 덮었다(정보 탭 타일) — 둘을 합쳐 둔다 */
        .reveal.wds-card--interactive{transition:opacity .5s var(--ease),transform var(--dur-med) var(--ease),background var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);}
        @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important;} }
        /* 상단바 오른쪽은 절대 줄바꿈하지 않는다(2026-09-27, 운영자 "PC 작은 창에서 위가 잘린다") — 높이 64px 고정이라 두 줄이 되면 윗줄이 화면 밖으로 잘렸다.
           좁아지면 덜 중요한 버튼부터 숨긴다(아래 1100px, mobile.css 900px) */
        .topbar-right{flex-wrap:nowrap;min-width:0;}
        .topbar-right > *{flex-shrink:0;}
        @media(max-width:1100px){ .page-title .pt-full{display:none;} .page-title .pt-short{display:inline;} }

body.light .widget:not(:hover){border-color:rgba(var(--ink-rgb),.1);}

/* ── 라이트모드 보완 ── */
body.light{ color-scheme: light; }

/* background-color만 바꾼다 — background 줄임말은 select 화살표(background-image)를 지운다. !important를 빼 .wds-field의 포커스·오류·비활성 테두리가 이긴다 */
body.light input:where(:not([type=checkbox],[type=radio],[type=range])),
body.light textarea,
body.light select{
    background-color: var(--surface2);
    border-color: rgba(var(--ink-rgb),.18);
    color: var(--text);
}
body.light input::placeholder,
body.light textarea::placeholder{ color: var(--text3) !important; }

body.light .tb-btn:not(:hover){ color: var(--text2); }

body.light #main-content,
body.light #main-trending-list{ background: var(--surface); }

.tb-btn,.nav-btn,.rs-link{
    transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* 호버 리프트 (전역) — components.css의 .wds-* 규칙과 짝을 이룬다.
   여기 있는 건 wds 컴포넌트로 안 바뀐 예전 클래스들이다. 작은 컨트롤이므로 -2px.
   위 transition 블록에 transform이 들어 있다. */
.tb-btn:hover,.nav-btn:hover,.rs-link:hover{
    transform: translateY(-2px);
    box-shadow: var(--elev-sm);
}
.nav-btn:active,.rs-link:active{ transform: translateY(0); }
/* 비활성 버튼은 뜨지 않는다 */
.tb-btn:disabled:hover{transform:none;box-shadow:none;}

@media (prefers-reduced-motion:reduce){
    .tb-btn:hover,.nav-btn:hover,.rs-link:hover{transform:none;}
}

.sidebar:not(.open) .nav-label{opacity:0;}

/* ═══════════════════════════════════════════════════════════════════
   고급화 폴리시 레이어  —  구조/탭/팔레트 변경 없이 디테일만 정교화
   (중립 다크 톤 유지 · 추가/보강 위주 · 라이트모드 호환)
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 전역 렌더링 품질 — 폰트 안티앨리어싱·선택색·부드러운 스크롤 */
html{scroll-behavior:smooth;}
::selection{background:rgba(var(--accent-rgb),.32);color:var(--on-accent);}
body.light ::selection{background:rgba(var(--accent-rgb),.22);color:var(--text);}

/* 2) 스크롤바 — 얇지만 잡기 쉬운 패딩형 + 호버 시 액센트 */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--radius-sm);border:3px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box;}




/* 9) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ═══════════════════════════════════════════════════════════════════
   리디자인 레이어 — 중립 다크 팔레트 기반의 차분한 디자인 시스템.
   기존 구조·탭·기능은 그대로 두고 표면(surface)만 재정의한다.
   원칙: 큰 그림자·네온 글로우 대신 얇은 보더와 미세한 톤 차이로 위계를 만든다.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 사이드바 — 활성 항목은 톤 배경 + 좌측 3px 바 (배경·보더는 아래 "세 패널 겉 형식 통일" 블록) */
.nav-btn.active{color:var(--accent-text);background:rgba(var(--wds-primary-rgb),.14);font-weight:600;
    border-color:var(--border-accent);box-shadow:inset 3px 0 0 0 var(--accent);}
/* 우측 .rs-link:hover와 같은 규격. .nav-btn.active 뒤에 있어야 활성 버튼에 올렸을 때도 호버 색이 이긴다 */
.nav-btn:hover{background:var(--violet-dim);color:var(--accent-text);border-color:var(--border-accent);}

/* 2)+3) 세 패널 겉 형식 통일 (2026-09-12) — 왼쪽 사이드바·상단바·오른쪽 패널은 같은 표면이다.
   같은 글래스 배경(--glass + 블러), 같은 1px --border 경계, 같은 64px 헤더, 같은 토글 버튼.
   예전에는 왼쪽만 --rs-bg(푸른 검정)·라이트에서는 셋이 제각각(rgba 하드코딩·surface·surface2)이라
   나란히 놓였을 때 색이 달라 보였다. 다크·라이트 모두 이 한 블록으로만 정한다 — 개별 규칙을 다시 만들지 말 것. */
.sidebar,.topbar,.right-sidebar{
    background:var(--glass);
    box-shadow:none;
}
.topbar{-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));}
/* 데스크톱 두 사이드바 뒤에는 본문이 지나가지 않는다(본문은 여백으로 비켜 있다) — 흐림은 평평한 바탕만 흐리게 하며 폭 전환 매 프레임 다시 계산된다(2026-09-28).
   같은 반투명 --glass 색은 그대로라 보이는 색은 같다. 본문이 밑으로 지나가는 상단바만 흐림을 남긴다. */
/* 오른쪽 패널 토글은 왼쪽 사이드바와 똑같이 패널 헤더 안에 둔다(안쪽 가장자리, 제목 앞).
   상단바의 예비 버튼(#rsidebar-topbar-btn)은 패널을 접어 헤더가 안 보일 때만 나타나 다시 펼치는 용도다.
   900px 이하에서는 패널이 드로어라 상단바 버튼이 항상 보인다(mobile.css 900px 블록). */
#rsidebar-topbar-btn{display:none;}
/* 2026-09-23: 데스크톱에서는 접혀도 레일 헤더의 토글이 보이므로 상단바 버튼은 900px 이하 드로어에서만 쓴다 */
.rs-sec-title{
    font-family:var(--font-display);font-size:13px;font-weight:600;
    letter-spacing:var(--ls-caption,0.0252em);color:var(--text3);
}

/* 6) 카드 — 리프트/글로우 없이 보더와 배경 톤으로만 반응 */
.widget,.stat-card{box-shadow:var(--card-shadow);transition:border-color var(--dur-med) var(--ease),background var(--dur-med) var(--ease);}   /* hover 테두리는 위 기본 규칙에 */

/* 7) 버튼 — ghost 기본, 호버 시 액센트 보더 */
.tb-btn:hover{background:var(--surface3);border-color:var(--accent);color:var(--accent-text);}
.tb-btn:active{transform:scale(0.98);}
.btn-save{
    background:var(--accent-solid);color:var(--on-accent);
    border:none;border-radius:var(--radius2);
    transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
    box-shadow:none;font-weight:600;
}
.btn-save:hover{background:var(--accent-hover);box-shadow:none;transform:none;}
.btn-save:active{transform:scale(0.98);}

/* 8) 입력 — 포커스: 액센트 보더 + 3px 링 (wds-field 스펙과 동일 비율) */
.form-group input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--wds-primary-rgb),.16);
}

/* 9) 모달 — §4.8 .wds-modal 스펙(radius-lg/elev-xl/material-dimmer)은 위 .modal/.modal-overlay 기본 규칙에 들어 있다 */

/* ── 오른쪽 패널 아이콘 레일 (2026-09-23) ──
   접으면 사라지는 대신 왼쪽 사이드바처럼 --sidebar-w 폭의 레일로 남아 치지직 방송 현황(아바타 + 라이브 링)과
   공식 링크(아이콘)만 보인다. 이름·제목·최신 VOD·섹션 제목은 숨긴다. 900px 이하는 드로어라 .collapsed 의미가
   달라서(폭 고정) 이 블록 전체를 데스크톱에만 건다. 기본값은 접힘(initRightSidebar). */
@media(min-width:901px){
    .right-sidebar.collapsed .right-sidebar-header{justify-content:center;padding:0;}
    .right-sidebar.collapsed .right-sidebar-title{display:none;}
    .right-sidebar.collapsed .right-sidebar-body{padding:10px 8px;gap:10px;}
    .right-sidebar.collapsed .rs-sec{padding:6px 4px;}
    .right-sidebar.collapsed .rs-sec-title,
    .right-sidebar.collapsed .rs-sec--vod{display:none;}
    /* 전체 11명 행(.rs-live-row)은 레일에서 통째로 숨기고, 방송 중 3명만 .rs-rail-live로 보인다 — 아래 "2026-09-24 운영자 요청 묶음" 블록 */
    /* 링크는 아이콘만: 글자를 0으로 접고 44px 정사각 버튼으로 */
    .right-sidebar.collapsed .rs-link{font-size:0;gap:0;width:44px;height:44px;padding:0;margin:0 auto 6px;justify-content:center;}
    .right-sidebar.collapsed .rs-link:last-child{margin-bottom:0;}
    .right-sidebar.collapsed .rs-link :is(svg,.brand-ico){width:18px;height:18px;}
}

/* ── 모달 머리·닫기 버튼 (2026-09-24) ──
   .modal-header에 규칙이 하나도 없어 제목이 가운데 정렬(.modal-title)이고 닫기 X가 제목 뒤에 붙어 작게 떠 있었다
   (운영자 "프로젝트의 x표시가 잘 안 보이고 별로임"). 제목 왼쪽·X 오른쪽 끝, X는 면·보더가 있는 36px 버튼. */
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-bottom:var(--sp-16);}
.modal-header .modal-title{margin:0;text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal-header .wds-icon-btn{width:36px;height:36px;flex-shrink:0;border:1px solid var(--border2);background:var(--surface2);color:var(--text);border-radius:var(--radius-sm);}
/* 주소 고르기 창 .link-sheet (2026-10-25) — 메인 일정 줄의 팝업스토어(네이버 예약·지도)·채팅 매니저 모집(멤버별 공고) */
.link-sheet{display:flex;flex-direction:column;gap:var(--sp-10);padding-bottom:var(--sp-24);}
.wds-card.link-sheet__row{display:flex;align-items:center;gap:var(--sp-12);width:100%;padding:var(--sp-12) var(--sp-16);text-align:left;font:inherit;color:var(--text);cursor:pointer;}
.link-sheet__row>.wds-ico{flex-shrink:0;color:var(--wds-label-alternative);}
.link-sheet__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.link-sheet__label{color:var(--wds-label-normal);}
.wds-caption1.link-sheet__sub{color:var(--wds-label-alternative);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.modal-header .wds-icon-btn:hover{background:var(--violet-dim);color:var(--accent-text);border-color:var(--border-accent);}
.modal-header .wds-icon-btn svg{width:18px;height:18px;stroke-width:2.2;}

/* 굿즈 반응 버튼(구매·찜)도 누를 수 있는 것이라 카드처럼 살짝 뜬다 (2026-09-24 운영자 요청) */
.wds-label2.goods-name{color:var(--wds-label-normal);line-height:1.4;height:2.8em;}
.goods-react{transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast);}
.goods-react:hover{transform:translateY(-2px);box-shadow:var(--elev-sm);}
.goods-react:active{transform:translateY(0);box-shadow:none;}
@media (prefers-reduced-motion:reduce){.goods-react:hover{transform:none;}}

/* ── 2026-09-24 운영자 요청 묶음 ──
   1) 메인 "지금 방송 중" 격자(900px 이하 3열·700px 이하 2열). PC 한 줄 알약은 1.22 블록.
   2) VOD 카드 열 수: 데스크톱은 폭에 맞춰 고정 열(1201px 이상 5열·901~1200px 4열)이고 **왼쪽 사이드바가 열리면 한 열 줄인다**
      (.main.lsb-open — 본문에 붙은 클래스를 봐야 사이드바가 움직이기 전에 본문 배치를 끝낼 수 있다). 900px 이하는 auto-fill. 인라인 grid-template-columns를 두면 이 규칙이 안 먹으니 app.js에 다시 박지 말 것.
   3) 오른쪽 레일의 방송 현황: 11명 전체 대신 방송 중인 멤버 3명(방송 현황과 같은 순서 — 내 팬덤 → 시청자순) + "+N"(.rs-rail-live). 펼치면 원래 목록. */
.main-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-10);}   /* 900px 이하의 폰이 아닌 창용 — PC는 1.22 블록(한 줄 알약·펼침 격자), 700px 이하 2열과 폰 가로 줄은 mobile.css */

#vod-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:1fr;align-items:stretch;}
#vod-list > a{display:flex!important;flex-direction:column;}
#vod-list > a > .wds-card{flex:1;}   /* 2026-10-30 운영자 "PC도 마찬가지" — 모든 카드 같은 높이(폰과 같은 규칙, mobile.css의 같은 줄은 지웠다) */   /* 카드는 제 높이(유튜브 피드처럼) — 명장면이 붙은 옆 카드 높이에 맞춰 제목·메타 사이가 비던 것(2026-10-20). 카드 인라인 height:100%도 뺐다 */
/* 열 수(2026-10-03 운영자 "카드가 너무 크다 — 기본 4개, 사이드바를 줄이면 5개"): 1201px 이상은 왼쪽 사이드바가 열려 있으면 4열, 접으면 5열(--vod-cols에서 --vod-l을 뺀다).
   901~1200px은 3·4열. 오른쪽 방송 현황 패널을 펼쳐도 열 수는 바꾸지 않는다(2026-09-24~10-03에는 한 열 더 빼서 둘 다 펼치면 3열이 됐다). */
@media(min-width:901px){
    #vod-list{--vod-cols:4;--vod-l:0;grid-template-columns:repeat(calc(var(--vod-cols) - var(--vod-l)),minmax(0,1fr));}
    .main.lsb-open #vod-list{--vod-l:1;}
}
@media(min-width:1201px){#vod-list{--vod-cols:5;}}

.rs-rail-live{display:none;}
@media(min-width:901px){
    .right-sidebar.collapsed #rs-live-list .rs-live-row{display:none!important;}
    .right-sidebar.collapsed .rs-rail-live{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0;}
    /* 방송 중인 멤버가 없으면 레일 맨 위에 빈 테두리 상자만 남았다 → 그 구역을 숨긴다(2026-09-27) */
    .right-sidebar.collapsed .rs-sec:has(#rs-live-list):not(:has(.rs-rail-live__item)){display:none;}
    .rs-rail-live__item{position:relative;display:block;width:42px;height:42px;}
    .rs-rail-live__item img{position:absolute;inset:0;display:block;}   /* 이미지가 못 뜨면(onerror로 제거) 아래 이니셜이 보인다 */
    .rs-rail-live__item img,.rs-rail-live__fallback{width:42px;height:42px;border-radius:50%;object-fit:cover;box-sizing:border-box;
        border:2px solid var(--online);box-shadow:0 0 0 2px rgba(var(--online-rgb),.22);}
    .rs-rail-live__fallback{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;background:var(--surface2);color:var(--wds-label-normal)!important;text-decoration:none;}   /* 이니셜은 글자 — 멤버 원색(라이트 2.4:1)이 아니라 본문색(DESIGN-SPEC §6.5), 2026-10-24 */
    .rs-rail-live__more{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
        color:var(--text2);background:var(--surface2);border:1px solid var(--border2);}
}

/* 방송 중 점 하나의 규격 — 방송 현황 행(아바타 래퍼 안)과 레일 아이템이 같이 쓴다. 3px/1px는 42px 원의 테두리 위에 겹치는 자리(2026-09-24) */
.rs-live-dot{position:absolute;bottom:3px;right:1px;width:11px;height:11px;border-radius:50%;background:var(--online);border:2px solid var(--surface);box-shadow:0 0 5px var(--online);}
/* 알림 탭은 패널보다 행 여백을 조금 넓게 */
.alarm-list--page .alarm-item{padding:var(--sp-14) var(--sp-16) var(--sp-14) var(--sp-20);content-visibility:auto;contain-intrinsic-size:auto 88px;}   /* 300개 — 화면 밖 항목은 배치를 건너뛴다 */
.alarm-more{width:100%;justify-content:center;margin-top:var(--sp-4);}   /* 벨 패널 끝 "알림 N개 전체 보기" */
.alarm-list--page .alarm-item__dot{left:8px;top:26px;}
.alarm-list--page .alarm-item__thumb{width:112px;}
.alarm-list--page .alarm-group{margin-top:var(--sp-8);}

/* ═══════════════════════════════════════════════════════════════════
   모바일 최적화 (2026-09-25, 운영자 "모바일 인터페이스가 너무 별로")
   ═══════════════════════════════════════════════════════════════════ */
/* 드로어 백드롭 — 예전 딤은 box-shadow라 탭을 못 받아, 드로어 바깥을 눌러 닫으면 그 탭이 아래 카드·메뉴까지 눌렀다 */
#drawer-backdrop{display:none;}   /* 폰에서 보이는 규칙은 mobile.css */

/* ── 화면 배율·터치 최적화 (2026-09-25 운영자 "화면 배율 및 최적화 전체적으로") ──
   7개 폭(360·390·412·768·1024·1344·1920) × 14탭 점검에서 넘침·겹침은 0이었고, 남은 문제는 터치 기기의 작은 누름 영역과 11px 글자였다. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}   /* 가로로 돌렸을 때 글자가 제멋대로 커지지 않게 */
@media (pointer:coarse){
    /* 누르는 곳은 최소 36~44px: 설정 토글 30×17 → 44×24, 작은 아이콘 버튼 28 → 36, 링크 태그 22 → 32 */
    .toggle{width:44px;height:24px;border-radius:12px;}
    .toggle::before{content:'';position:absolute;inset:-10px -6px;}   /* 보이는 크기는 그대로, 누르는 범위만 위아래로 넓힌다 */
    .toggle::after{top:3px;left:3px;width:18px;height:18px;}
    .toggle.on::after{transform:translateX(20px);}
    /* components.css가 이 파일보다 뒤에 로드돼 같은 우선순위면 거기 값이 이긴다 — body를 붙여 우선순위를 올린다 */
    body .wds-icon-btn--sm{width:36px;height:36px;}
    body .wds-icon-btn:not(.wds-icon-btn--sm):not(.wds-icon-btn--md):not(.wds-icon-btn--lg){min-width:36px;min-height:36px;}
    body a.wds-tag,body button.wds-tag{min-height:32px;}
    .goods-react{min-height:36px;}
    /* 핀치 확대를 허용하면서(뷰포트) iOS가 입력창을 누를 때 자동 확대하지 않게 — 16px 미만 입력창이 그 원인 */
    input,textarea,select{font-size:16px!important;}
}

/* 라이트의 옅은 파랑 배경 위 파란 글자(베타 배지)는 4.36 → 한 단계 진한 파랑 */
body.light .beta-badge{color:var(--wds-primary-heavy);}

/* ── 진입 공지 팝업 (2026-09-27, 운영자 "PC에서 제목이 잘린다, 깔끔한 공지 팝업을 참고해서, 옆으로 더 넓게") ──
   흔한 레이어 공지 형식: 머리(공지 태그 + 날짜 + 닫기) → 제목 전체(줄바꿈, 말줄임 없음) → 본문만 스크롤 → 아래 줄 왼쪽 "다시 보지 않기" · 오른쪽 버튼.
   PC 폭 720px. 제목·버튼 줄은 고정이고 본문만 스크롤한다. 폰 조정은 mobile.css. */
#notice-popup .notice-pop{max-width:720px;width:92%;padding:0;display:flex;flex-direction:column;overflow:hidden;}
.notice-pop__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-20) var(--sp-24) 0;}
.notice-pop__meta{display:flex;align-items:center;gap:var(--sp-10);color:var(--wds-label-alternative);}
.notice-pop__x{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--wds-label-alternative);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s;}
.notice-pop__x:hover{background:var(--wds-fill-normal);color:var(--text);}
.notice-pop__x svg{width:20px;height:20px;stroke-width:2;}
.notice-pop__title{margin:var(--sp-12) 0 0;padding:0 var(--sp-24) var(--sp-16);font-size:22px;font-weight:700;line-height:1.4;letter-spacing:var(--ls-heading);color:var(--text);
    word-break:keep-all;overflow-wrap:anywhere;border-bottom:1px solid var(--wds-line-alt);}
.notice-pop__body{padding:var(--sp-20) var(--sp-24);font-size:16px;line-height:1.75;color:var(--wds-label-neutral);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;
    overflow-y:auto;flex:1 1 auto;min-height:0;max-height:min(52vh,520px);}
.notice-pop__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-14) var(--sp-24);border-top:1px solid var(--wds-line-alt);background:var(--wds-fill-alt);}
.notice-pop__actions{display:flex;gap:var(--sp-8);}
.notice-pop__hide{border:none;background:none;padding:var(--sp-8) 0;font:inherit;font-size:14px;color:var(--wds-label-alternative);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.notice-pop__hide:hover{color:var(--text);}

/* 플랫폼 실제 로고(팬딩·스텔라이브 공식 사이트 파비콘, static/icons/brand/) — 글자 크기에 맞춘 작은 둥근 사각 */
.brand-ico{width:1.1em;height:1.1em;border-radius:var(--radius-xs);object-fit:contain;flex-shrink:0;vertical-align:-0.15em;}
.wds-chip .brand-ico{margin-right:var(--sp-4);}
.brand-ico--box{width:28px;height:28px;border-radius:var(--radius-sm);}
/* 브랜드 로고는 그림 자체에 색 바탕이 있어(유튜브 빨강·카페 초록 등) 상자 배경을 빼고 로고가 상자를 채운다 */
.wds-ico-box.wds-ico-box--brand{background:none;}   /* components.css가 뒤에 로드돼 같은 우선순위면 진다 */
#avatar-grid span:hover{border-color:var(--accent)!important;}   /* 프로필 아바타 고르기: 선택 표시는 selectAvatar가 인라인으로 */
.rs-vod-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:9px 0;border-radius:var(--radius2);transition:background-color .15s;}
.rs-vod-item:hover,.rs-live-row:hover{background:rgba(var(--neutral-rgb),.06);}
.rs-live-row{transition:background-color .15s;border-radius:var(--radius2);}
.wds-ico-box--brand .brand-ico{width:100%;height:100%;border-radius:var(--radius-sm);vertical-align:0;}
.rs-link .brand-ico{width:15px;height:15px;}   /* 레일(접힘)에서는 .rs-link 글자 크기가 0이라 em 크기면 사라진다 */

/* ── 상단바 방송 중 배지·앱 설치 (2026-09-27, 운영자 "방송 중 글꼴·디자인이 별로, 앱 설치는 방송 중 왼쪽에") ──
   예전 배지는 .wds-live(고정폭 글꼴·초록 테두리 알약)를 그대로 썼다 → 본문 글꼴의 중립 알약 + 초록 점 + 숫자 칩.
   아무도 방송하지 않으면(.is-idle) 점·숫자가 회색. 높이는 옆 아이콘 버튼(36px)과 맞춘다. */
.tb-live{display:inline-flex;align-items:center;gap:var(--sp-8);height:36px;padding:0 var(--sp-6) 0 var(--sp-12);border-radius:var(--radius-pill);
    border:1px solid var(--wds-line-normal);background:var(--wds-fill-alt);color:var(--wds-label-normal);font-family:var(--font-body);
    font-size:14px;font-weight:600;letter-spacing:var(--ls-label);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;}
.tb-live:hover{background:var(--wds-fill-normal);border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--elev-sm);}
.tb-live__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--online);flex-shrink:0;}
.tb-live__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(var(--online-rgb),.28);animation:tbLivePulse 2s ease-out infinite;}
@keyframes tbLivePulse{0%{transform:scale(.5);opacity:1;}100%{transform:scale(1.4);opacity:0;}}
.tb-live__count{min-width:24px;height:24px;padding:0 var(--sp-6);border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;
    background:rgba(var(--online-rgb),.16);color:var(--wds-status-positive);font-size:13px;font-weight:700;}
.tb-live.is-idle .tb-live__dot{background:var(--wds-label-assistive,var(--text3));}
.tb-live.is-idle .tb-live__dot::after{display:none;}
.tb-live.is-idle .tb-live__count{background:var(--wds-fill-normal);color:var(--wds-label-neutral);}
@media (prefers-reduced-motion:reduce){.tb-live__dot::after{animation:none;display:none;}}

.tb-install{display:inline-flex;align-items:center;gap:var(--sp-6);height:36px;padding:0 var(--sp-8) 0 var(--sp-12);border:none;border-radius:var(--radius-pill);
    background:var(--accent-solid);color:var(--on-accent);font-family:var(--font-body);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;
    transition:transform .15s,box-shadow .15s,background .15s;}
.tb-install:hover{transform:translateY(-2px);box-shadow:var(--elev-sm);background:var(--accent-solid-hover);}
.tb-install svg{width:18px;height:18px;stroke-width:2;flex-shrink:0;}
.tb-install__x{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;opacity:.8;margin-left:var(--sp-2);}
.tb-install__x:hover{opacity:1;background:rgba(var(--ink-rgb),.18);}

/* ── 로그인·회원가입 모달 (2026-09-27, 운영자 "PC에서 세로로 길어 스크롤해야 한다 → 가로로") ──
   회원가입이면(.is-register) PC에서 폭 820px, 입력칸은 두 열(.reg-cols), 가입·구글 버튼은 가운데 360px. 폰(900px 이하)은 한 열 그대로. */
.reg-hint{font-size:12px;color:var(--text3);margin-top:6px;line-height:1.5;}
@media(min-width:901px){
    .auth-modal.is-register{max-width:820px!important;padding:26px 32px;}
    .auth-modal.is-register .reg-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start;}
    .auth-modal.is-register .reg-col + .reg-col{padding-left:28px;border-left:1px solid var(--wds-line-alt);margin-left:-28px;}
    .auth-modal.is-register #btn-do-register{max-width:360px;margin:var(--sp-8) auto 0;}
    .auth-modal.is-register .auth-social{max-width:360px;margin:0 auto;}
}

/* 모달 버튼 줄 — PC에도 규칙이 없어 버튼이 왼쪽에 붙었다(건의사항 삭제 확인·앱 설치 안내). 폰은 mobile.css가 버튼 폭을 나눈다 */
.modal-footer{display:flex;justify-content:flex-end;gap:var(--sp-8);margin-top:var(--sp-16);}

/* ── 정보 탭 타일 (2026-09-27, 운영자 "카드 크기가 제각각이라 이질적") ──
   예전엔 설명 길이(1~3줄)에 따라 카드 높이가 달랐고 4번째 카드가 혼자 한 줄, 최대 폭 960px로 오른쪽이 비었다.
   → 모든 카드가 같은 틀(아이콘 · 제목 · 설명 두 줄 · 오른쪽 위 화살표)과 같은 높이, 두 묶음이 같은 열 폭을 쓴다. */
.info-groups{display:flex;flex-direction:column;gap:var(--sp-32);}
/* 일정 보기 전환(연도·월·일) = 세그먼트, "오늘"은 동작이라 따로 — 굿즈 판매 상태 필터와 같은 컴포넌트 */
.sched-views{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-16);}
.sched-views__cal{margin-left:auto;}
.sched-legend.wds-caption1{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);color:var(--wds-label-alternative);margin:calc(-1 * var(--sp-6)) 0 var(--sp-20);}
/* 탭 머리말(VOD·소식, 2026-10-24): 제목 + 설명 한 줄, 왼쪽 정렬(section-header 기본은 양끝) — 굿즈·일정 머리말과 같은 높이 */
.wds-section-header.page-head{justify-content:flex-start;gap:var(--sp-12);margin-bottom:var(--sp-16);}
.page-head .wds-section-header__subtitle{color:var(--wds-label-alternative);}
/* 두 줄 말줄임 공통(2026-10-24 CSS 점검 — 같은 네 선언이 8곳에 반복됐다). 2026-10-25 커뮤니티 삭제 때 이 줄이 통째로 지워져 굿즈 이름 등이 가격과 겹쳤다 → 10-26 되살림 */
:is(.goods-name,.sched-list-row__title,.info-tile__desc,.main-row__title,.main-splive__title,.bd-card__title){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* monoline SVG 아이콘 공통(2026-10-24 CSS 점검 — 같은 네 선언이 선택자 12곳에 반복됐다). 크기·굵기는 각자.
   2026-10-25 커뮤니티 삭제 때 목록째 지워져 메뉴·설치·화살표 아이콘이 꽉 찬 모양으로 보였다 → 10-26 되살림(지운 기능의 선택자만 빼고) */
:is(.nav-btn .nav-icon,.tb-install,.info-tile__go,.main-clips__nav,.nm-box,.main-live-toggle,.setlist-go,.notice-pop__x) svg,.tb-svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
/* 일정 탭 목록 행(2026-10-24 디자인 점검): 제목 왼쪽 · 날짜 오른쪽 — 메인 "다가오는 일정"과 같은 방향. 예전엔 날짜가 왼쪽 76px 칸이라 긴 날짜("2027.1.5 (화)")에서 제목 시작이 줄마다 어긋났다 */
.wds-card.sched-list-row{display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-14) var(--sp-24);margin-bottom:var(--sp-10);}
.sched-list-row--past{margin-bottom:0;}
.sched-list-row__title{flex:1;min-width:0;color:var(--wds-label-normal);word-break:keep-all;overflow-wrap:anywhere;}
.sched-list-row--past .sched-list-row__title{color:var(--wds-label-neutral);}
.sched-list-row__when{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap;color:var(--wds-label-neutral);}
.sched-list-row__when .wds-caption1{color:var(--wds-label-alternative);}
.sched-list-row--past .sched-list-row__when{color:var(--wds-label-alternative);}
.sched-legend__item{display:inline-flex;align-items:center;gap:var(--sp-6);}
.sched-legend__item i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;}
.sched-legend__item i+i{margin-left:calc(-1 * var(--sp-2));}
.sched-legend__note{flex:1 1 100%;color:var(--wds-label-alternative);line-height:1.5;}
.setlist-sub{display:none;}   /* 폰 전용 한 줄(부른 사람 · 비고) — PC는 비고 아래·오른쪽 칸에 따로 */
/* 어두운 멤버 색(토아 #513661 등)은 다크 테마에서 20% 틴트 막대·왼쪽 선이 배경에 묻힌다 → 밝힌 값(--ev-lift)으로 (2026-10-28). 라이트 테마는 그대로 */
body:not(.light) .sched-bar--dark{--ev-line:var(--ev-lift)!important;background:color-mix(in srgb, var(--ev-lift) 26%, transparent)!important;}
.info-group__title{display:flex;align-items:center;gap:var(--sp-8);margin:0 0 var(--sp-12);font-size:18px;font-weight:700;color:var(--wds-label-normal);letter-spacing:var(--ls-heading);}   /* 묶음 제목이 타일 제목보다 작아 위계가 거꾸로였다 */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-16);width:100%;}
.info-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8);min-height:168px;text-align:left;font:inherit;color:inherit;}
.info-tile .wds-ico-box{margin-bottom:var(--sp-8);}
.info-tile__title{font-size:18px;font-weight:600;line-height:1.35;color:var(--wds-label-normal);letter-spacing:var(--ls-heading);}
.info-tile__desc{font-size:15px;line-height:1.5;min-height:3em;color:var(--wds-label-alternative);word-break:keep-all;text-wrap:pretty;}
.info-tile__go{position:absolute;top:var(--sp-20);right:var(--sp-20);width:20px;height:20px;color:var(--wds-label-alternative);transition:transform .15s,color .15s;}
.info-tile__go svg{width:20px;height:20px;stroke-width:2;}
.info-tile:hover .info-tile__go{color:var(--accent-text);transform:translateX(2px);}

/* ═══ PC 메인 대시보드 (2026-09-27, 운영자 "PC 메인이 엉망 — 심플하게, 한 화면에 다 담기게", 참고: 관리 대시보드형 요약 타일 + 카드 격자) ═══
   두 열(.main-grid, 2026-10-24 운영자 "배치가 복잡해 보여" — 핫 이슈 칸을 일정 칸에 합쳤다): 다가오는 일정(큰 행사는 "핫" 태그 + 아래 핫 키워드 칩) / 실시간 인기 → 이번 주 인기 클립 줄(.main-best-row). 누가 방송 중이면 맨 위 "지금 방송 중" 카드(.main-sec-live).
   1.17(운영자 "메인도 최대한 보기 편하게"): 요약 타일 4개·"진행 중인 프로젝트" 칸을 뺐다. 본문 폭은 컨테이너 쿼리로 본다(사이드바를 펼치면 두 열·한 열로).
   폰(900px 이하)은 mobile.css가 한 열로 쌓는다. */
#main-content{container-type:inline-size;}
.main-dash{display:flex;flex-direction:column;gap:var(--sp-16);}

#main-push-card:empty,#main-update-card:empty,#main-welcome:empty,#main-bday:empty{display:none;}   /* 비어 있어도 .main-dash 간격이 두 번 들어가 위 칸과 사이가 두 배였다 */
.main-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);align-items:stretch;}   /* 두 칸 같은 폭(2026-10-21 운영자 "칸 크기가 달라서 별로" — 세 칸이던 것을 10-24에 두 칸으로) */
.main-col > .main-box:last-child{flex:1;}   /* 두 열의 아래 끝을 맞춘다 */
.main-box__head a{text-decoration:none;}
.main-col{display:flex;flex-direction:column;gap:var(--sp-16);min-width:0;}
.main-box{padding:0!important;overflow:hidden;}
.main-box__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);min-height:49px;padding:var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-20);border-bottom:1px solid var(--wds-line-alt);}   /* min-height: 버튼이 없는 칸(실시간 인기) 머리가 6px 낮아 세 칸 구분선이 어긋났다 */
.main-box__title{margin:0;font-size:16px;font-weight:700;color:var(--wds-label-normal);letter-spacing:var(--ls-heading);}
.main-list{display:flex;flex-direction:column;}
.main-empty{padding:var(--sp-20);font-size:14px;color:var(--wds-label-alternative);}
/* 목록 한 줄(소식·공지·일정·인기 공용): 아이콘/날짜/썸네일 + 제목 두 줄 + 메타 */
.main-row{display:flex;align-items:flex-start;gap:var(--sp-16);width:100%;padding:var(--sp-10) var(--sp-20);border:none;border-bottom:1px solid var(--wds-line-alt);
    background:none;text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;transition:background .15s;}
.main-list > .main-row:last-child,.main-list > .main-trend-row:last-child{border-bottom:none;}
.main-row:hover,.main-trend-row:hover{background:var(--wds-fill-alt);}
.main-row .wds-ico-box{margin-top:1px;}
.main-row__body{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;flex:1;}
.main-row__title{font-size:15px;font-weight:600;line-height:1.5;color:var(--wds-label-normal);word-break:keep-all;overflow-wrap:anywhere;}
.main-row__meta{display:flex;gap:var(--sp-8);font-size:13px;color:var(--wds-label-alternative);white-space:nowrap;overflow:hidden;}
/* 다가오는 일정 한 줄: 왼쪽 색 막대(일정 색) + 넓은 제목(큰 행사는 앞에 "핫" 태그) + 오른쪽 날짜 한 줄(진행 중·오늘은 파랑, 2026-10-24 — D-day·종류 라벨 삭제) */
.main-row--ev{align-items:center;gap:var(--sp-12);box-shadow:inset 3px 0 0 0 var(--ev);}
.main-row--ev .main-row__title{flex:1;min-width:0;}
.main-row__hot{display:inline-block;vertical-align:2px;margin-right:var(--sp-6);padding:0 var(--sp-6);border-radius:var(--radius-pill);font-size:12px;font-weight:700;line-height:18px;letter-spacing:var(--ls-caption);
    color:var(--accent-text);background:rgba(var(--accent-rgb),.14);}
.main-ev-when{display:flex;align-items:center;flex-shrink:0;font-size:12px;color:var(--wds-label-alternative);line-height:1.3;white-space:nowrap;}
.main-ev-when b{font-size:13px;font-weight:600;color:var(--wds-label-neutral);}
.main-ev-when .is-now{color:var(--accent-text);font-weight:600;}

/* 실시간 인기: 순위 + 썸네일 + 제목 */
.main-trend-row{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-16);border-bottom:1px solid var(--wds-line-alt);text-decoration:none;color:inherit;transition:background .15s;}
.main-trend-row img{width:80px;height:45px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--wds-fill-alt);}
.main-trend-row__rank{width:18px;flex-shrink:0;text-align:center;font-size:14px;font-weight:700;color:var(--wds-label-alternative);}
.main-trend-row__rank.is-top{color:var(--accent-text);}
.main-trend-row .main-row__title{font-size:14px;}
.main-pager{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-6) var(--sp-12);border-top:1px solid var(--wds-line-alt);font-size:13px;color:var(--wds-label-alternative);}

/* 인기 클립 카드 메타의 멤버 이름 — 소식 탭 행과 같은 멤버 색 */
.main-row__who{color:var(--m-fg,var(--accent-text));font-weight:600;}
/* 메인 맨 위 "지금 주목" 띠(2026-10-24 운영자 "싱크룸 같은 건 제일 앞에") — 방송 화면 + 라벨 + 제목 + 참여 멤버 + 시청자. PC는 가로 한 줄, 폰은 mobile.css가 세로 */
#main-splive:empty{display:none;}
.wds-card.main-splive{display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12)!important;cursor:pointer;
    border-color:rgba(var(--online-rgb),.45);box-shadow:inset 3px 0 0 0 var(--online);}
.main-splive__thumb{position:relative;flex:0 0 220px;aspect-ratio:16/9;border-radius:var(--radius2);overflow:hidden;background:var(--wds-fill-alt);}
.main-splive__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* 방송 화면이 없는 방송(19+ 방송은 치지직이 화면을 안 준다, 2026-10-24): 흐린 사진 대신 멤버 색 타일(theme.js data-member 토큰, VOD .vod-ph와 같은 면) + 선명한 아바타. LIVE 배지는 라벨 줄 */
.main-splive__tile{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--m-surface,var(--wds-fill-alt)),var(--wds-fill-normal));}
.main-splive__tile .wds-avatar{border:2px solid var(--surface);}
.main-splive__label .wds-live{margin-right:var(--sp-8);vertical-align:middle;}
.main-splive__thumb .wds-live{position:absolute;left:var(--sp-8);top:var(--sp-8);}
.main-splive__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--sp-4);}
.main-splive__label{font-size:13px;font-weight:700;color:var(--online);letter-spacing:var(--ls-caption);}
.main-splive__title{font-size:18px;font-weight:700;line-height:1.4;color:var(--wds-label-normal);word-break:keep-all;overflow-wrap:anywhere;}
.main-splive__meta{display:flex;align-items:center;gap:var(--sp-10);font-size:13px;color:var(--wds-label-alternative);min-width:0;}
.main-splive__avs{display:inline-flex;}
.main-splive__avs .wds-avatar{width:26px;height:26px;margin-left:-6px;border:2px solid var(--surface);}
.main-splive__avs .wds-avatar:first-child{margin-left:0;}
.main-splive__names{font-weight:600;color:var(--wds-label-neutral);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@container (min-width:1300px){ .main-splive__thumb{flex-basis:260px;} .main-splive__title{font-size:19px;} }
/* 언어 고르기(2026-10-24 운영자 "언어 표시가 복잡해 보여" — 설정 줄 대신 상단바 지구본·폰 더보기 서랍 버튼 → 작은 메뉴, i18n.js openLangMenu) */
.lang-menu{position:fixed;z-index:1200;min-width:150px;padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--radius2);background:var(--surface);box-shadow:var(--elev-lg);}
.lang-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);width:100%;padding:var(--sp-8) var(--sp-12);border:0;border-radius:var(--radius-sm);background:none;
    font:inherit;font-size:14px;font-weight:500;color:var(--wds-label-normal);text-align:left;cursor:pointer;}
.lang-menu__item:hover{background:var(--wds-fill-alt);}
.lang-menu__item.is-active{color:var(--accent-text);font-weight:700;}
.lang-menu__item .wds-ico{display:none;width:16px;height:16px;}
.lang-menu__item.is-active .wds-ico{display:inline-flex;}

/* 본문이 넓으면(사이드바를 펼친 1920·2560 화면) 간격·글자·여백을 한 단계씩 키운다 — 2000px 화면에서 카드가 작게 붙어 보이고 아래가 비던 것(2026-10-03 운영자 "PC 해상도에 따라 알아서").
   목록 건수는 app.js _mainRows()가 같은 기준(본문 1300px·높이 1000px)으로 늘린다 */
@container (min-width:1300px){
    .main-dash,.main-grid,.main-col{gap:var(--sp-20);}
    .main-box__head{min-height:53px;padding:var(--sp-10) var(--sp-14) var(--sp-10) var(--sp-24);}
    .main-box__title{font-size:17px;}
    .main-row{padding:var(--sp-12) var(--sp-24);}
    .main-row__title{font-size:16px;}
    .main-row__meta{font-size:14px;}
    .main-trend-row{padding:var(--sp-10) var(--sp-20);}
    .main-trend-row img{width:96px;height:54px;}
    .main-trend-row .main-row__title{font-size:15px;}
}
@container (min-width:1650px){
    .main-dash,.main-grid,.main-col{gap:var(--sp-24);}
    .main-row{padding:var(--sp-14) var(--sp-24);}
    .main-row__title{font-size:17px;}
    .main-trend-row img{width:112px;height:63px;}
}
/* 본문이 좁으면(사이드바·패널을 펼친 PC, 태블릿, 폰) 두 열 → 한 열 */
@container (max-width:760px){
    .main-grid{grid-template-columns:minmax(0,1fr);}
}

/* 상단바 프로필(auth.js updateAuthUI) — 동그란 아바타 + 얇은 이름 + 팬덤 배지. 예전엔 스타일이 없어 이름이 굵은 큰 글자로 떠 프로필처럼 안 보였다(2026-10-23) */
.profile-btn{display:inline-flex;align-items:center;gap:var(--sp-8);height:38px;padding:0 var(--sp-12) 0 var(--sp-4);border-radius:var(--radius-pill);cursor:pointer;color:var(--wds-label-normal);transition:background-color .15s;}
.profile-btn:hover{background:var(--wds-fill-alt);}
.profile-btn__av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--wds-fill-normal);color:var(--wds-label-neutral);font-size:16px;line-height:1;}
.profile-btn__av .wds-ico{width:18px;height:18px;}
.profile-btn .name{font-size:14px;font-weight:500;line-height:1.2;letter-spacing:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-btn .fandom-badge{margin-left:0;height:20px;padding:0 var(--sp-6);font-size:11px;font-weight:600;}

/* 팬덤 배지(auth.js fandomBadgeHtml) — 닉네임 옆, 그 멤버 색(theme.js 파생 토큰, 대비 보정). 팬덤이 멤버와 안 맞으면 기본 파랑 */
.fandom-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--sp-8);margin-left:var(--sp-6);border-radius:var(--radius-pill);
    font-size:12px;font-weight:700;line-height:1;white-space:nowrap;flex-shrink:0;letter-spacing:var(--ls-caption);
    color:var(--m-fg,var(--accent-text));background:var(--m-surface,rgba(var(--accent-rgb),.12));border:1px solid var(--m-line,rgba(var(--accent-rgb),.3));}
#settings-user-fandom .fandom-badge{margin-left:0;}
.fandom-badge__mark{margin-right:3px;font-size:12px;line-height:1;}
/* ── 2026-09-28 디자인 정리(운영자 "다른 사이트 참고해서 폰트·배치 수정") ──
   소식 행 .news-row(app.js _notifCard): 유튜브·치지직 피드처럼 플랫폼 로고 상자 + 제목 + 메타 한 행. 새 글은 알림 패널과 같이 굵은 제목 + 파란 점 */
.news-row{display:flex;align-items:flex-start;gap:var(--sp-12);margin:0;}   /* 여백은 .wds-card 기본(20/24) — 2026-09-28부터 실제로 보여 온 값 */
.news-row__body{flex:1;min-width:0;}
.news-row__title{font-size:15px;line-height:1.5;color:var(--wds-label-normal);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:var(--ls-body);}
.news-row--new .news-row__title{font-weight:600;}
.news-row__kind{font-size:13px;line-height:1.4;font-weight:600;color:var(--accent-text);letter-spacing:var(--ls-caption);margin-bottom:2px;}   /* "유튜브 새 영상"처럼 종류 줄 — 이름은 아래 메타에(2026-10-28) */
.news-row__sub{margin-top:2px;font-size:14px;line-height:1.5;color:var(--wds-label-alternative);word-break:keep-all;overflow-wrap:anywhere;}   /* 최초 공개 시각 같은 셋째 줄 */
.news-row__who{color:var(--m-fg,var(--accent-text));font-weight:600;}
.news-row__who,.alarm-item__who{cursor:pointer;}   /* 누르면 멤버 탭의 그 카드(openMemberTab, 2026-10-28) */
.news-row__who:hover,.alarm-item__who:hover,.news-row__who:focus-visible,.alarm-item__who:focus-visible{text-decoration:underline;outline:none;}
.member-card.is-focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.55);}   /* 소식·알림의 멤버 이름으로 찾아온 카드 강조(openMemberTab) */
.news-row__preview{margin-top:4px;font-size:14px;line-height:1.5;color:var(--wds-label-alternative);word-break:keep-all;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}   /* 카페·팬딩 본문 앞부분(2026-10-26), 두 줄까지 */
.news-row__meta{margin-top:4px;font-size:13px;line-height:1.4;color:var(--wds-label-alternative);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);letter-spacing:var(--ls-caption);}
.news-row__dot{width:7px;height:7px;border-radius:50%;background:var(--wds-primary-normal);flex-shrink:0;margin-top:8px;}
.news-row__thumb{width:128px;aspect-ratio:16/9;flex-shrink:0;border-radius:var(--radius-sm);object-fit:cover;background:var(--wds-fill-alt);}   /* 유튜브 영상·쇼츠 썸네일(2026-10-19) */
/* VOD 카드: 썸네일이 없을 때 멤버 색 면 + 재생 아이콘(예전 🎬 이모지). 메타는 "멤버 · 3일 전" 한 줄 — 이름이 길면 이름만 줄임 */
.vod-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--m-surface,var(--wds-fill-alt)),var(--wds-fill-normal));color:var(--m-fg,var(--wds-label-alternative));}
.vod-ph svg{width:36px;height:36px;fill:currentColor;opacity:.75;}
/* 콘서트·싱크룸 상세 창 맨 위 그림(포스터·다시보기 화면, 2026-10-30) — 누를 수 있으면 가운데 재생 단추 */
.concert-media{position:relative;display:block;aspect-ratio:16/9;margin-bottom:var(--sp-12);border-radius:var(--radius-sm);overflow:hidden;background:var(--wds-fill-alt);}
.concert-media img{width:100%;height:100%;object-fit:cover;display:block;}
.concert-media__play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(var(--ink-rgb),.55);color:var(--on-accent);transition:transform .15s ease,background-color .15s ease;}
.concert-media__play svg{width:26px;height:26px;fill:currentColor;margin-left:3px;}
a.concert-media:hover .concert-media__play{transform:scale(1.08);background:var(--accent-solid);}
.wds-caption1.vod-meta{color:var(--wds-label-alternative);margin-top:var(--sp-8);display:flex;gap:var(--sp-8);white-space:nowrap;overflow:hidden;}
.vod-meta span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.vod-meta span:last-child{flex-shrink:0;}
/* 멤버 카드 링크: 실제 로고 + 이름 알약(2026-09-29, 운영자 "폰에서 뭘 누르는지 모르겠다" — 아이콘만 있던 둥근 버튼에 이름을 다시 붙였다). 평소 중립 면, hover 때 브랜드색 틴트 */
.member-link{display:inline-flex;align-items:center;gap:var(--sp-6);min-height:32px;padding:0 var(--sp-12) 0 var(--sp-8);border-radius:var(--radius-pill);background:var(--wds-fill-alt);
    color:var(--wds-label-neutral);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:var(--ls-label);white-space:nowrap;transition:background .15s,color .15s,transform .15s;-webkit-tap-highlight-color:transparent;}
.member-link .brand-ico{width:16px;height:16px;vertical-align:0;}
/* 마우스를 올리면 -2px 리프트, 누르는 순간(:active — 폰은 hover가 없어 이것만 보인다)은 브랜드색으로 바뀌며 살짝 커진다(2026-09-29 운영자 "눌렀을 때 튀어나오는 모션은 해야지") */
.member-link:hover,.member-link:active{background:var(--lk-bg,var(--wds-fill-normal));color:var(--lk-fg,var(--wds-label-normal));}
.member-link:hover{transform:translateY(-2px);}
.member-link:active{transform:translateY(-2px) scale(1.08);transition-duration:.08s;}
.member-card__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6);}
/* 굿즈 필터(app.js _goodsFilterChips): 판매 상태 세그먼트 + 연도 칩 한 줄, 멤버 칩 한 줄 — 예전 칩 세 줄("전체" 세 개)을 무신사·네이버 쇼핑처럼 줄였다 */
.goods-filter-row{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin-bottom:var(--sp-10);}
.goods-filter-row .wds-segmented__item{white-space:nowrap;}
.goods-member-row,.goods-year-row{display:flex;flex-wrap:wrap;gap:var(--sp-8);}
.goods-year-row{margin-bottom:var(--sp-10);}   /* 2026-10-30 운영자 "전체 연도는 판매 상태 밑, 전체 멤버 위로" */
/* 키리누키 채널 목록(app.js renderFanzoneTab): 사진 + 이름 한 행. 폰은 mobile.css가 행을 낮춘다 */
.kiri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-14);}
.wds-card.kiri-row{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) var(--sp-20);min-height:68px;}

/* 팬캐릭터 일러스트(auth.js FANDOM_ICON, SVG) — 배지 안 16px */
.fandom-badge__ico{width:16px;height:16px;margin:0 4px 0 -3px;flex-shrink:0;display:block;}
/* 팬덤 정하기·변경 창(auth.js _fandomModalHtml) — 배지 + 멤버 이름 칩 2열 */
.fandom-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8);}
.wds-chip.fandom-pick__item{justify-content:flex-start;gap:var(--sp-8);min-height:44px;padding:0 var(--sp-12);width:100%;}
.fandom-pick__item .fandom-badge{margin-left:0;}
.fandom-pick__who{font-size:13px;color:var(--wds-label-alternative);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fandom-pick__item.is-active .fandom-pick__who{color:inherit;}

/* 설치 앱 자체 시작 화면 — OS 스플래시 뒤 1초쯤. 밤하늘 배경(static/splash/bg-v2.svg) + 큰 아이콘 + 이름. 테마와 무관하게 어둡다 (2026-10-01) */
#app-splash[hidden]{display:none;}
#app-splash{position:fixed;inset:0;z-index:10060;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-20);
    background:rgb(var(--wds-intro-scrim-rgb)) url('/static/splash/bg-v2.svg') center/cover no-repeat;color:var(--wds-static-white);font-family:var(--font-body);
    opacity:1;transition:opacity .4s ease;}
#app-splash.is-out{opacity:0;pointer-events:none;}
.app-splash__icon{width:168px;height:168px;border-radius:var(--radius-lg);filter:drop-shadow(0 0 28px rgba(var(--accent-rgb),.55)) drop-shadow(0 12px 32px rgba(var(--ink-rgb),.45));}
.app-splash__name{font-size:22px;font-weight:700;letter-spacing:-0.01em;text-shadow:0 2px 12px rgba(var(--ink-rgb),.5);}
/* 설정 "최신 버전으로 업데이트" 로딩 화면 — 설치 앱의 시작 화면(manifest background_color #0F0F10 + 아이콘 + 이름)과 같은 모양. 테마와 무관하게 항상 어둡다 */
#update-splash{position:fixed;inset:0;z-index:10050;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-16);
    background:rgb(var(--wds-intro-scrim-rgb));color:var(--wds-static-white);font-family:var(--font-body);}
.update-splash__icon{width:112px;height:112px;border-radius:var(--radius-lg);}
.update-splash__name{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin-top:var(--sp-8);}
.update-splash__msg{font-size:14px;color:rgba(var(--wds-static-white-rgb),.7);}
.update-splash__bar{width:min(220px,60vw);height:4px;border-radius:var(--radius-pill);background:rgba(var(--wds-static-white-rgb),.14);overflow:hidden;}
.wds-toast.app-update-banner{bottom:var(--sp-24);padding:var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-16);}
.push-ask-banner__btns{display:inline-flex;gap:var(--sp-6);flex-shrink:0;}
.update-splash__bar span{display:block;width:0;height:100%;background:var(--accent);transition:width .25s ease;}

/* 긴 목록: content-visibility:auto는 2026-09-28 뺐다 — 카드가 화면에 들어올 때마다 격자 전체를 다시 배치해 VOD·굿즈 스크롤이 끊겼다(측정: 빼면 50ms 넘는 프레임 6 → 0). 굿즈는 30개씩 더 보기로 나눈다. */

/* 노래 통계 표 — 열 제목 두 벌(PC 긴 글 / 폰 짧은 글, 폰 규칙은 mobile.css) */
.song-th-s{display:none;}
/* 노래 통계 — 멤버 이름을 누르면 그 멤버 노래 전체(2026-10-29) */
.song-who{white-space:nowrap;}
.song-who__btn{display:inline-flex;align-items:baseline;gap:var(--sp-6);padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--accent-text);cursor:pointer;text-align:left;}
.song-who__btn:hover span:first-child{text-decoration:underline;}
.song-who__n{font-size:12px;font-weight:600;color:var(--wds-label-alternative);}
.song-who__btn svg{width:14px;height:14px;align-self:center;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;}
/* 곡 수 칸 — 누를 수 있는 알약(옅은 파랑 면 + 파란 글자, 누를 수 있는 것만 -2px 리프트). 0은 같은 폭의 흐린 글자 */
.song-n{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 var(--sp-8);border:1px solid rgba(var(--accent-rgb),.28);border-radius:var(--radius-pill);
    background:rgba(var(--accent-rgb),.1);color:var(--accent-text);font:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;
    transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;}
button.song-n:hover{background:rgba(var(--accent-rgb),.2);transform:translateY(-2px);box-shadow:var(--elev-sm);}
button.song-n:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.song-n--zero{border-color:transparent;background:none;color:var(--wds-label-alternative);font-weight:500;cursor:default;}
.song-modal{max-width:620px;}
.song-modal__body{max-height:70vh;overflow-y:auto;padding-top:0;}
.song-nav{display:flex;gap:var(--sp-6);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:1;padding:var(--sp-12) 0 var(--sp-10);background:var(--wds-bg-elevated);}
.song-nav::-webkit-scrollbar{display:none;}
.song-nav .wds-chip{flex:none;}
.song-sec{padding-top:var(--sp-8);scroll-margin-top:60px;}
.song-sec__title{display:flex;align-items:center;gap:var(--sp-6);font-size:15px;font-weight:700;color:var(--wds-label-normal);margin:var(--sp-8) 0 var(--sp-6);}
.song-item{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-10) var(--sp-4);border-top:1px solid var(--wds-line-alt);text-decoration:none;color:inherit;}
.song-item:hover{background:var(--wds-fill-alt);}
.song-item__no{flex:none;width:24px;font-size:13px;font-weight:600;color:var(--wds-label-alternative);font-variant-numeric:tabular-nums;text-align:right;}
.song-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.song-item__t{font-size:15px;color:var(--wds-label-normal);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}
.song-item__kn{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-10);font-size:12px;color:var(--wds-label-alternative);}   /* 공개일 · 노래방 번호 */
.song-item svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--wds-label-alternative);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* 넓은 PC(2200px 이상, 2560×1440 등): 본문 폭을 1900px까지 — 1560px 고정이면 좌우 350px씩 비고 아래 절반이 비어 "섬"처럼 보였다(2026-10-02 운영자). 메인 목록 건수도 app.js _mainRows()가 높이에 맞춰 늘린다. */
@media(min-width:2200px){:root{--content-max:1900px;}}

/* 정보 탭 "스텔DB 소개" 맨 위 바로가기 — 이메일·인스타·X·스레드(운영자 홍보 계정, 2026-10-03). 멤버 링크 알약(.member-link)과 같은 모양 */
.promo-links{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-24);}
.page-back{margin-bottom:var(--sp-18);}   /* 공지·건의사항 탭 "← 정보 목록"(정보 탭에서 들어오므로, 2026-10-03) */
.promo-links__item{display:inline-flex;align-items:center;gap:var(--sp-6);min-height:34px;padding:0 var(--sp-12);border-radius:var(--radius-pill);
  background:var(--wds-fill-alt);border:1px solid var(--border2);color:var(--wds-label-normal);font-size:14px;font-weight:600;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;}
.promo-links__item:hover{transform:translateY(-2px);box-shadow:var(--elev-sm);background:var(--surface2);}
.promo-links__item .brand-ico{width:16px;height:16px;}
.promo-links__item .wds-ico{color:var(--accent-text);}

/* (익명 커뮤니티·추천 게시판 .cm-*·.bd-row 등은 2026-10-25 기능 삭제로 지웠다. .bd-card는 메인·VOD 인기 클립 카드가 쓴다) */
.wds-tabs.vod-tabs{border-bottom:none;flex:1 1 320px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}   /* VOD 탭 줄 — 세로 스크롤바가 "전체 멤버" 왼쪽 막대로 보였다(2026-09-24) */
.vod-tabs::-webkit-scrollbar{display:none;}
/* 넘치는 탭 줄의 넘길 쪽 끝을 흐리게(app.js _tabsFit) — 더 있다는 표시 */
.wds-tabs.fade-r{-webkit-mask-image:linear-gradient(to right,black calc(100% - 40px),transparent);mask-image:linear-gradient(to right,black calc(100% - 40px),transparent);}
.wds-tabs.fade-l{-webkit-mask-image:linear-gradient(to right,transparent,black 40px);mask-image:linear-gradient(to right,transparent,black 40px);}
.wds-tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,black 40px,black calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,black 40px,black calc(100% - 40px),transparent);}
/* 썸네일 카드(인기 클립 _clipCard — 예전 레전드 콘텐츠 카드에서 이어 쓴다) */
.bd-card{display:flex;flex-direction:column;padding:0!important;overflow:hidden;min-width:0;transition:transform .15s,box-shadow .15s;}
.bd-card:hover{transform:translateY(-4px);box-shadow:var(--elev-lg);}
.bd-card__media{position:relative;display:block;aspect-ratio:16/9;background:var(--wds-fill-alt);overflow:hidden;}
.bd-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.bd-card__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.bd-card__ph .brand-ico{width:40px;height:40px;opacity:.85;}
.bd-card__kind{position:absolute;left:var(--sp-8);top:var(--sp-8);display:inline-flex;align-items:center;gap:4px;padding:2px var(--sp-8);border-radius:var(--radius-pill);
    font-size:12px;font-weight:700;color:var(--wds-label-normal);background:var(--wds-bg-elevated,var(--surface));box-shadow:var(--elev-xs);}
.bd-card__kind .brand-ico{width:14px;height:14px;}
.bd-card__body{display:flex;flex-direction:column;gap:4px;flex:1;padding:var(--sp-12) var(--sp-14) var(--sp-12);min-width:0;}
.bd-card__title{font-size:15px;font-weight:700;line-height:1.4;min-height:calc(2 * 1.4em);color:var(--wds-label-normal);text-decoration:none;word-break:keep-all;overflow-wrap:anywhere;}
.bd-card__title:hover{color:var(--accent-text);}

/* ── 메인 카드 한 줄(이번 주 인기 클립) ── */
/* 카드 밖 줄 제목(이번 주 인기 클립)은 카드 본문(.bd-card__body 14px)과 같은 들여쓰기 — 카드 바깥 왼쪽에 딱 붙어 보였다(2026-10-19 운영자, 10-24 20/24 → 14) */
.main-best__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);margin-bottom:var(--sp-10);padding:0 var(--sp-14);}
.main-best-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16);}   /* 한 줄 — 카드 수는 app.js _mainBestCols()가 이 열 수에 맞춘다 */
@container (min-width:1300px){ .main-best-row{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--sp-20);} }
@container (min-width:1650px){ .main-best-row{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--sp-24);} }
@container (max-width:760px){ .main-best-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* 이번 주 인기 클립(1.28) — 줄·카드는 .main-best-row/.bd-card. 썸네일 오른쪽 아래 길이, 아래 멤버·조회수·시각 */
.main-clips__note{font-size:13px;color:var(--wds-label-alternative);letter-spacing:var(--ls-caption);}
.main-clip__dur{position:absolute;right:var(--sp-8);bottom:var(--sp-8);padding:1px var(--sp-6);border-radius:var(--radius-sm);
    font-size:12px;font-weight:600;color:var(--on-accent);background:rgba(var(--ink-rgb),.72);}
/* 핫 키워드 칩(2026-10-21) — 일정 칸 목록 아래, 운영자가 고른 낱말(점: 긍정 초록·부정 빨강·중립 회색). 10-24에 핫 이슈 칸이 일정 칸에 합쳐지며 칩만 남았다 */
.main-hot-kw{display:flex;align-items:flex-start;gap:var(--sp-10);padding:var(--sp-10) var(--sp-20) var(--sp-14);}   /* 라벨은 왼쪽 열, 칩은 자기 상자 안에서 줄바꿈 — 예전엔 한 flex-wrap이라 둘째 줄부터 라벨 자리까지 밀려 줄이 안 맞았다(2026-10-24 운영자 "핫 이슈 줄 맞춰줘") */
.main-hot-kw__label{flex:none;font-size:12px;color:var(--wds-label-alternative);line-height:24px;}
.main-hot-kw__list{display:flex;flex-wrap:wrap;gap:var(--sp-6);min-width:0;}
.main-hot-kw__chip{display:inline-flex;align-items:center;gap:var(--sp-6);padding:3px var(--sp-10);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface2);font-size:13px;color:var(--wds-label-normal);}
.main-hot-kw__chip i{width:7px;height:7px;border-radius:50%;background:var(--wds-label-alternative);flex:none;}
.main-hot-kw__chip.is-pos i{background:var(--online);}
.main-hot-kw__chip.is-neg i{background:var(--danger-text);}
/* 관리자 핫 키워드 카드 */
.hk-box{padding:var(--sp-16) var(--sp-20);}
.hk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-8);padding:var(--sp-8) 0;border-bottom:1px solid var(--wds-line-alt);}   /* 키워드 · 긍정/부정/중립 · 빼기 한 줄(2026-10-23 운영자 "줄 넘어가니까 보기 불편") */
.hk-row .main-hot-kw__chip{min-width:0;max-width:100%;justify-self:start;}
.hk-row .main-hot-kw__chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hk-row .wds-segmented__item{padding:var(--sp-4) var(--sp-10);font-size:13px;white-space:nowrap;}
.hk-row .hk-del{padding:0 var(--sp-6);white-space:nowrap;}
.hk-add{display:flex;gap:var(--sp-8);margin:var(--sp-12) 0 var(--sp-16);}
/* 관리자 "지금 상태"·"운영 데이터"(2026-10-29) */
.st-row{display:grid;grid-template-columns:12px 132px minmax(0,1fr);align-items:start;gap:var(--sp-8);padding:var(--sp-8) 0;border-bottom:1px solid var(--wds-line-alt);font-size:13px;line-height:1.5;}
.st-row:last-child{border-bottom:0;}
.st-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--wds-label-assistive);}
.st-dot--ok{background:var(--online);}
.st-dot--warn{background:var(--caution);}
.st-dot--bad{background:var(--danger);}
.st-label{font-weight:600;color:var(--wds-label-normal);}
.st-text{color:var(--wds-label-alternative);overflow-wrap:anywhere;}
.st-errs{margin-top:var(--sp-10);}
.st-errs summary{cursor:pointer;color:var(--wds-label-alternative);}
.st-errlist.wds-caption1{max-height:260px;overflow:auto;margin-top:var(--sp-6);color:var(--wds-label-alternative);line-height:1.6;}
.st-errlist>div{overflow-wrap:anywhere;}
.sd-tabs{margin-bottom:var(--sp-12);}
.wds-caption1.sd-help{color:var(--wds-label-alternative);line-height:1.5;margin-bottom:var(--sp-10);}
.sd-rows{display:flex;flex-direction:column;gap:var(--sp-6);}
.sd-row{display:grid;align-items:center;gap:var(--sp-6);}
.sd-row .wds-field{min-width:0;}
.sd-row--ev,.sd-row--ev-head{grid-template-columns:minmax(0,1.7fr) 140px 140px 112px 108px minmax(0,1.2fr) 32px;}
.sd-row--ev-head{font-size:12px;font-weight:600;color:var(--wds-label-alternative);padding:0 var(--sp-2);margin-top:var(--sp-8);}   /* 칸 이름(2026-10-29 운영자 "일정 추가 이상한 것 같다" — 날짜 칸 둘이 이름 없이 붙어 있었다) */
.sd-f{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sd-f > .wds-field{width:100%;min-width:0;}
.sd-f__l{display:none;font-size:12px;font-weight:600;color:var(--wds-label-alternative);}
.sd-row--stock{grid-template-columns:minmax(0,1fr) auto auto;padding:var(--sp-4) 0;border-bottom:1px solid var(--wds-line-alt);}
.sd-btns{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:flex-end;}
.sd-row--site{grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);padding:var(--sp-4) 0;cursor:pointer;}
.sd-row--add{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.4fr) auto;}
.sd-row--link{grid-template-columns:120px minmax(0,1fr);}
.sd-name{font-size:14px;color:var(--wds-label-normal);overflow-wrap:anywhere;}
.wds-caption1.sd-url{color:var(--wds-label-alternative);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sd-actions{display:flex;gap:var(--sp-8);margin-top:var(--sp-12);align-items:center;}
.sd-actions .wds-field{flex:1;min-width:0;}
.main-bday .wds-avatar{flex:none;}
.hk-add .wds-field{flex:1;min-width:0;}
.hk-cand{display:flex;flex-wrap:wrap;gap:var(--sp-6);}
.hk-cand__n{margin-left:var(--sp-4);color:var(--wds-label-alternative);}
/* 인기 클립 넘기기(2026-10-21 운영자 "넘기는 형식으로 최대 20개") — PC는 한 줄에 열 수만큼 보이고 좌우 버튼·스크롤로 넘긴다, 폰은 mobile.css의 가로 스크롤 그대로 */
.main-clips-wrap{position:relative;}
html:not(.is-phone) .main-clips-row{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;}
html:not(.is-phone) .main-clips-row::-webkit-scrollbar{display:none;}
html:not(.is-phone) .main-clips-row>*{flex:0 0 calc((100% - 3 * var(--sp-16)) / 4);scroll-snap-align:start;}
@container (min-width:1300px){ html:not(.is-phone) .main-clips-row>*{flex-basis:calc((100% - 4 * var(--sp-20)) / 5);} }
@container (min-width:1650px){ html:not(.is-phone) .main-clips-row>*{flex-basis:calc((100% - 5 * var(--sp-24)) / 6);} }
@container (max-width:760px){ html:not(.is-phone) .main-clips-row>*{flex-basis:calc((100% - 2 * var(--sp-12)) / 3);} }   /* 양쪽 패널을 다 펼쳐도 3장(2장이면 카드 하나가 화면 절반) */
.main-clips__nav{position:absolute;top:calc(28% - 18px);width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--wds-label-normal);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:var(--elev-sm);padding:0;}
.main-clips__nav svg{width:18px;height:18px;stroke-width:1.8;}
.main-clips__nav--prev{left:-8px;transform:rotate(180deg);}
.main-clips__nav--next{right:-8px;}
.main-clips-wrap.is-start .main-clips__nav--prev,.main-clips-wrap.is-end .main-clips__nav--next,html.is-phone .main-clips__nav{display:none;}
.main-clip__meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-8);row-gap:2px;margin-top:auto;padding-top:var(--sp-4);
    font-size:13px;color:var(--wds-label-alternative);}
/* 치지직 다시보기 카드의 명장면(1.29) — 그 방송 중에 만든 인기 클립 3개. 카드 전체가 링크라 줄은 span + _openDataUrl */
.vod-hl{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--border);}
.vod-hl[hidden]{display:none;}
.vod-hl__head{font-size:12px;font-weight:700;color:var(--wds-label-alternative);letter-spacing:var(--ls-caption);}
.vod-hl__row{display:flex;align-items:baseline;gap:var(--sp-8);padding:4px 0;font-size:13px;color:var(--wds-label-normal);cursor:pointer;}
.vod-hl__row:hover .vod-hl__title,.vod-hl__row:focus-visible .vod-hl__title{color:var(--accent-text);}
.vod-hl__title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vod-hl__views{flex-shrink:0;font-size:12px;color:var(--wds-label-alternative);}


/* 받을 알림(설정, 2026-10-19 운영자 "항목마다 선택") — 누르면 켜고 끄는 칩. 켬 = 옅은 파란 면 + 체크, 끔 = 점선 테두리·흐린 글자 */
.notif-picks{display:flex;flex-direction:column;gap:var(--sp-12);}   /* 줄 묶음(NOTIF_KIND_ROWS) — 줄마다 같은 폭 격자 */
.notif-picks__grp{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--sp-8);align-items:start;}   /* 줄 이름(방송·새 글·유튜브·굿즈) + 칩(2026-10-29) */
.notif-picks__lbl{font-size:13px;line-height:36px;color:var(--wds-label-alternative);white-space:nowrap;}
.notif-picks__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-8);}   /* 칩 길이가 제각각이라 두 줄이 8 + 3으로 나뉘던 것 → 같은 폭 격자(2026-10-20) */
.notif-pick{display:inline-flex;align-items:center;gap:var(--sp-6);min-height:36px;padding:0 var(--sp-14);border:1px dashed var(--wds-line-normal);border-radius:var(--radius-pill);
    background:transparent;color:var(--wds-label-alternative);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.notif-pick--wide{grid-column:span 2;}   /* 긴 이름(굿즈·팝업·콘서트 판매 오픈)은 두 칸을 써 한 줄로(2026-10-27 운영자 "가로로") */
.notif-pick{white-space:nowrap;}   /* "유튜브 최초\n공개"처럼 칩 안에서 접히지 않게(2026-10-29) */
.notif-pick .wds-ico{display:none;}
.notif-pick.is-on{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.6);color:var(--wds-label-normal);font-weight:600;padding-left:var(--sp-10);}   /* 켬 = 옅은 파란 면 + 파란 테두리·체크, 글자는 본문색(10-23 "다 파란색이라 눈 아프다" → 10-24 "이젠 색깔이 잘 안 보인다"의 중간) */
.notif-pick.is-on .wds-ico{display:inline-flex;color:var(--accent-text);}
.notif-pick:hover{border-color:rgba(var(--neutral-rgb),.55);}
/* 멤버별 알림 표(2026-10-19 운영자 "너무 길다", "켜 둔 건지 잘 안 보여") — 한 줄 = 이름 · 켜기 스위치 · 받을 곳 네 칸(체크 상자).
   켬 = 옅은 파란 면 + 파란 테두리·체크, 끔 = 빈 상자. 위 받을 알림에서 다 끈 곳은 칸이 비활성(is-gone), 멤버를 끄면 그 줄 칸이 흐려진다 */
.nm-table{display:flex;flex-direction:column;max-width:640px;}   /* 넓은 PC에서 이름과 칸이 멀어지지 않게 */
.nm-row{display:grid;grid-template-columns:minmax(0,1fr) 56px repeat(6,52px);align-items:center;min-height:44px;border-bottom:1px solid var(--wds-line-alt);font-size:14px;color:var(--wds-label-normal);}
.nm-row:last-child{border-bottom:none;}
.nm-head{min-height:32px;font-size:12px;font-weight:600;color:var(--wds-label-alternative);align-items:end;padding-bottom:var(--sp-6);}
.nm-hc{flex-direction:column;gap:var(--sp-4);}   /* 머리글 + 아래 끄기·켜기(2026-10-30) */
.nm-head .nm-c.is-gone > span{opacity:.5;}
.nm-some{display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;background:var(--caution);vertical-align:2px;}   /* 그 곳 종류가 일부만 켜짐 */
.nm-col-btn{position:relative;min-width:40px;height:24px;padding:0 var(--sp-6);border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--radius-pill);
    background:rgba(var(--accent-rgb),.08);color:var(--accent-text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s;}
.nm-col-btn::before{content:'';position:absolute;inset:-8px -2px;}   /* 누름 영역 40px(옆으로는 칸 안에서만) */
.nm-col-btn:hover{background:rgba(var(--accent-rgb),.16);}
.nm-col-btn.is-off{border-color:var(--wds-line-normal);background:none;color:var(--wds-label-neutral);}
/* 표 읽는 법 — 세 줄 안내 + 칸이 무엇을 받는지 한 줄 */
.nm-guide{margin:0 0 var(--sp-8);font-size:13px;line-height:1.55;color:var(--wds-label-neutral);max-width:640px;}
.nm-legend{margin:0 0 var(--sp-12);max-width:640px;font-size:13px;color:var(--wds-label-neutral);}
.nm-legend>summary{cursor:pointer;color:var(--accent-text);font-weight:600;padding:var(--sp-4) 0;}
.nm-legend ul{margin:var(--sp-6) 0 0;padding:var(--sp-8) var(--sp-12);list-style:none;border-radius:var(--radius-sm);background:var(--wds-fill-alt);display:flex;flex-direction:column;gap:var(--sp-4);line-height:1.5;}
.nm-legend b{display:inline-block;min-width:3.4em;color:var(--wds-label-normal);font-weight:600;}
.nm-name{min-width:0;display:flex;align-items:center;gap:var(--sp-6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nm-short{display:none;}
.nm-c{display:flex;justify-content:center;align-items:center;}
.nm-na{color:var(--wds-label-alternative);}
.nm-box{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1.5px solid rgba(var(--neutral-rgb),.55);border-radius:6px;
    background:transparent;color:transparent;cursor:pointer;transition:background .15s,border-color .15s;}
.nm-box::before{content:'';position:absolute;inset:-8px;}   /* 누름 영역 40px(폰 터치) */
.nm-box svg{width:16px;height:16px;stroke-width:2.4;}
.nm-box.is-on{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.7);color:var(--accent-text);}
.nm-box:disabled{opacity:.35;cursor:not-allowed;}
.nm-box:disabled.is-on{background:var(--wds-fill-alt);border-color:transparent;color:var(--wds-label-alternative);}   /* 위에서 꺼 둔 곳 — 켜 둔 값은 남지만 파란색으로 보이지 않게 */
.nm-row.is-off .nm-c:not(:nth-child(2)){opacity:.3;pointer-events:none;}
.nm-row.is-off .nm-name{color:var(--wds-label-alternative);}
/* 설정 "세부 설정" 접기(2026-10-19 운영자 "설정창이 너무 복잡") */
.set-more{border-top:1px solid var(--wds-line-alt);}
.ver-line{display:inline-flex;flex-wrap:wrap;column-gap:var(--sp-6);}   /* 설정 "앱 버전" 줄 — 둘째 칸의 가운뎃점은 그 칸과 함께 접힌다(2026-10-20) */
.ver-line>span+span::before{content:'· ';}
.set-more__sum{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-16) 0;cursor:pointer;list-style:none;}
.set-more__sum::-webkit-details-marker{display:none;}
.set-more__sum .set-row__title{flex:1;}
.set-more__sum .wds-ico{transition:transform var(--dur-fast) var(--ease);color:var(--wds-label-alternative);}
.set-more[open] .set-more__sum .wds-ico{transform:rotate(180deg);}
.set-more__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-bottom:var(--sp-10);}
.set-more > .nm-table,.set-more > .set-more__body{margin-bottom:var(--sp-16);}
/* 상단바 종: 숨김(커버 모드)·모두 꺼짐 상태면 아이콘이 바뀌고(app.js _renderBellState) 보조색으로 */
#tb-bell.is-muted{color:var(--wds-label-alternative);}
/* 설정 비회원 안내 — 비회원으로 쓴 글 정책(1.09). 접혀 있고 누르면 펼친다 */
.anon-policy{margin:0 0 var(--sp-12);text-align:left;font-size:14px;color:var(--wds-label-neutral);border:1px solid var(--wds-line-alt);border-radius:var(--radius-sm);padding:var(--sp-10) var(--sp-14);}
.anon-policy summary{cursor:pointer;font-weight:600;color:var(--wds-label-normal);}
.anon-policy ul{margin:var(--sp-8) 0 0;padding-left:1.2em;line-height:1.65;}
/* 관리자 "신고 모아 보기"(1.11) — 신고 한 건 = 한 행: 종류·상태·시각 / 대상 앞부분 / 사유 / 버튼 */
.rp-list{padding:0;overflow:hidden;}
.rp-row{display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-14) var(--sp-20);border-bottom:1px solid var(--wds-line-alt);}
.rp-row:last-child{border-bottom:0;}
.rp-row__head{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;}
.rp-row__meta{display:flex;gap:var(--sp-8);margin-left:auto;font-size:13px;color:var(--wds-label-alternative);}
.rp-row__target{font-size:15px;font-weight:600;color:var(--wds-label-normal);word-break:keep-all;overflow-wrap:anywhere;}
.rp-row__reason{font-size:14px;line-height:1.6;color:var(--wds-label-neutral);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;}
.rp-row__actions{display:flex;gap:var(--sp-6);flex-wrap:wrap;justify-content:flex-end;}
.rp-empty{padding:var(--sp-20);text-align:center;font-size:14px;color:var(--wds-label-alternative);}

/* 굿즈 "더 보기"(1.29): 한 번에 30개라 자주 누른다 — 넓은 버튼으로 */
.goods-more-btn{min-width:220px;}

/* ── 1.31 디자인 정리 ── */
/* 소식 멤버 칩의 기수 구분선 */
.news-chip-sep{flex:0 0 1px;align-self:center;height:20px;margin:0;background:var(--wds-line-normal);}
/* 소식 종류 칩(유튜브 영상·쇼츠·다시보기 …, 2026-10-30) — 멤버 칩 위 한 줄, 폰은 가로 스크롤 */
.news-kind{margin-bottom:var(--sp-10);overflow-x:auto;scrollbar-width:none;}
.news-kind[hidden]{display:none;}
.news-kind .wds-segmented{flex-wrap:nowrap;}
.news-kind .wds-segmented__item{white-space:nowrap;}
.news-kind__n{color:var(--wds-label-alternative);font-weight:500;margin-left:2px;}
.news-kind .is-active .news-kind__n{color:inherit;opacity:.8;}
/* 멤버 카드 링크 접기: 5개 이상이면 3개 + "+N" */
.member-card__more{display:none;}
.member-card__links.is-open .member-card__more{display:contents;}
.member-card__links.is-open .member-link--more{display:none;}
.member-link--more{padding:0 var(--sp-12);font:inherit;font-weight:700;color:var(--wds-label-neutral);border:0;cursor:pointer;}

/* ── 1.32 색·정체성 ── */
/* "지금 방송 중" 카드에 앱 아이콘·시작 화면의 밤하늘 느낌을 옅게 — 파랑·분홍 성운 틴트 + 작은 별 점(토큰 채널이라 라이트 모드도 자동) */
.wds-card.main-sec-live{position:relative;overflow:hidden;
    background:radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb),.24), transparent 60%),
               radial-gradient(90% 120% at 100% 100%, rgba(var(--accent2-rgb),.13), transparent 62%), var(--surface);}
.wds-card.main-sec-live::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
    background:radial-gradient(2px 2px at 8% 22%, rgba(var(--accent-rgb),.9), transparent 70%),
               radial-gradient(1.6px 1.6px at 23% 68%, rgba(var(--accent-rgb),.7), transparent 70%),
               radial-gradient(2.2px 2.2px at 41% 14%, rgba(var(--accent-rgb),.8), transparent 70%),
               radial-gradient(1.6px 1.6px at 57% 82%, rgba(var(--accent2-rgb),.7), transparent 70%),
               radial-gradient(1.9px 1.9px at 72% 28%, rgba(var(--accent-rgb),.8), transparent 70%),
               radial-gradient(1.6px 1.6px at 86% 60%, rgba(var(--accent-rgb),.6), transparent 70%),
               radial-gradient(2.1px 2.1px at 94% 16%, rgba(var(--accent2-rgb),.7), transparent 70%);}
.wds-card.main-sec-live > *{position:relative;z-index:1;}
/* PC "지금 방송 중" = 한 줄(1.22, 운영자) — 제목 + 방송 중인 멤버 알약이 옆으로. 예전엔 제목 줄 + 4열 카드 격자로 약 160px이라 세 열 목록을 밀어냈다.
   폰(html.is-phone)은 mobile.css의 가로 아바타 줄 그대로 */
@media(min-width:901px){
    html:not(.is-phone) .wds-card.main-sec-live{display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-12) var(--sp-20);}
    html:not(.is-phone) .main-sec-live .main-live-head{margin-bottom:0!important;flex-shrink:0;}
    html:not(.is-phone) .main-sec-live .main-live-grid{display:flex;gap:var(--sp-8);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
    html:not(.is-phone) .main-sec-live .main-live-grid::-webkit-scrollbar{display:none;}
    html:not(.is-phone) .wds-card.main-live-item{flex:0 0 auto;padding:var(--sp-6) var(--sp-14) var(--sp-6) var(--sp-8)!important;border-radius:var(--radius-pill);}   /* 접힘 = 아바타 + 이름 알약, 폭은 내용만큼(2026-10-24 — 1920에서 13개를 한 줄에 눌러 "유." "케."로 잘렸다). 넘치면 줄이 가로 스크롤 */
    html:not(.is-phone) .main-sec-live:not(.is-open) .main-live-title{display:none;}
    html:not(.is-phone) .main-live-item .wds-avatar--md{width:32px;height:32px;}
    html:not(.is-phone) .main-live-item .main-live-state{display:none;}
    /* 펼치기(2026-10-19 운영자 "지금 방송 중 내려서 볼 수 있게") — 머리 줄 아래 카드 격자, 방송 제목 두 줄까지 */
    html:not(.is-phone) .wds-card.main-sec-live.is-open{display:block;padding:var(--sp-16) var(--sp-20);}
    html:not(.is-phone) .main-sec-live.is-open .main-live-head{margin-bottom:var(--sp-12)!important;}
    html:not(.is-phone) .main-sec-live.is-open .main-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow:visible;}
    html:not(.is-phone) .main-sec-live.is-open .wds-card.main-live-item{border-radius:var(--radius);padding:var(--sp-10) var(--sp-14)!important;align-items:flex-start;}
    html:not(.is-phone) .main-sec-live.is-open .main-live-title{white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45;margin-top:var(--sp-2);}
}
.right-sidebar .rs-live-info > div + div{white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;}   /* 카테고리·제목 줄은 두 줄까지(2026-10-24 — 한 줄 말줄임으로 "발헤임 · 멤버들…") */
.main-live-toggle{display:none;}
@media(min-width:901px){
    html:not(.is-phone) .main-live-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:var(--sp-4);padding:0;border:1px solid var(--border);border-radius:var(--radius-pill);
        background:var(--surface2);color:var(--wds-label-neutral);cursor:pointer;transition:background-color .15s,color .15s;}
    html:not(.is-phone) .main-live-toggle:hover{background:var(--surface3);color:var(--wds-label-normal);}
    html:not(.is-phone) .main-live-toggle svg{width:16px;height:16px;stroke-width:2;transition:transform .18s;}
    html:not(.is-phone) .main-sec-live.is-open .main-live-toggle svg{transform:rotate(180deg);}
}
/* 건의사항(2026-10-19) — 쓴 사람·운영자만 보는 안내, 글 카드, 공지 탭 맨 위 설문 카드 */
.inq-note{display:flex;align-items:flex-start;gap:var(--sp-10);padding:var(--sp-14) var(--sp-16);margin-bottom:var(--sp-16);border-radius:var(--radius);
    background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.28);color:var(--wds-label-normal);font-size:15px;line-height:1.6;}
.inq-note .wds-ico{flex-shrink:0;margin-top:3px;color:var(--accent-text);}
.inq-note__sub{display:block;color:var(--wds-label-alternative);font-size:13px;margin-top:var(--sp-4);}
.wds-card.inq-card{margin-bottom:var(--sp-12);}
.wds-headline2.inq-card__title{color:var(--wds-label-normal);margin-bottom:var(--sp-8);line-height:1.45;display:flex;align-items:flex-start;gap:var(--sp-6);}
.wds-body2.inq-card__body{color:var(--wds-label-neutral);margin-bottom:var(--sp-12);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
.wds-caption1.inq-card__meta{color:var(--wds-label-alternative);display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;}
.inq-card__who{color:var(--wds-label-neutral);font-weight:600;}
.wds-btn.inq-card__del{margin-left:auto;background:rgba(var(--wds-negative-rgb),.10);color:var(--danger-text);}
/* 운영자 답변(2026-10-29) — 글 아래 왼쪽 파란 선 + 옅은 면. 관리자 입력칸은 그 아래 */
.inq-card__reply{margin-top:var(--sp-12);padding:var(--sp-12) var(--sp-14);border-radius:var(--radius-sm);background:rgba(var(--accent-rgb),.07);box-shadow:inset 3px 0 0 var(--wds-primary-normal);}
.wds-caption1.inq-card__reply-head{display:flex;align-items:center;gap:var(--sp-6);color:var(--accent-text);font-weight:600;margin-bottom:var(--sp-6);}
.inq-card__reply-at{color:var(--wds-label-alternative);font-weight:400;}
.inq-card__reply-body{color:var(--wds-label-normal);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
.inq-card__answer{margin-top:var(--sp-12);display:flex;gap:var(--sp-8);align-items:flex-end;}
.inq-card__answer .wds-field{flex:1;min-width:0;}
.wds-card.survey-card{display:flex;align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-20);text-decoration:none;background:rgba(var(--wds-primary-rgb),.08);border-color:var(--wds-line-primary);}
/* 관리자 유저 분석(1.22) — 요약 타일 격자 + 차트 두 열 */
.ua-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp-12);margin-bottom:var(--sp-16);}
.ua-kpi{background:var(--wds-bg-normal);border:1px solid var(--wds-card-line,var(--wds-line-alt));border-radius:var(--radius);padding:var(--sp-14) var(--sp-16);min-width:0;}
.ua-kpi--wide{grid-column:1 / -1;}
.ua-kpi__label{font-size:13px;color:var(--wds-label-alternative);}
.ua-kpi__value{font-size:24px;font-weight:700;color:var(--wds-label-normal);letter-spacing:var(--ls-heading);margin-top:var(--sp-4);}
.ua-kpi__hint{font-size:13px;color:var(--wds-label-alternative);margin-top:var(--sp-2);white-space:pre-wrap;}
.ua-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);margin-bottom:var(--sp-16);}
/* 관리자 차트(2026-10-28) — 선·막대만 SVG, 날짜·이름·숫자는 HTML 12px(SVG를 칸 폭에 맞춰 늘려도 글자가 찌그러지지 않게) */
.achart{position:relative;}
.achart--line,.achart--cols{padding-top:16px;}   /* 맨 위 최대값 글자 자리 */
.achart__svg{display:block;width:100%;}
.achart__max{position:absolute;top:0;left:0;font-size:12px;line-height:1;color:var(--wds-label-alternative);}
.achart__x{position:relative;height:18px;margin-top:var(--sp-6);font-size:12px;line-height:18px;color:var(--wds-label-alternative);}
.achart__x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;}
.achart__x span:first-child{transform:none;}
.achart__x span:last-child{transform:translateX(-100%);}
.achart__row{display:grid;grid-template-columns:var(--achart-l,78px) minmax(0,1fr) auto;align-items:center;gap:var(--sp-8);min-height:26px;}
.achart__row+.achart__row{margin-top:var(--sp-6);}
.achart__label{font-size:12px;color:var(--wds-label-alternative);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.achart__track{height:22px;border-radius:var(--radius-xs);background:var(--wds-fill-alt);overflow:hidden;}
.achart__track i{display:block;height:100%;border-radius:var(--radius-xs);background:var(--wds-primary-normal);}
.achart__val{font-size:12px;color:var(--wds-label-neutral);white-space:nowrap;}
.ua-grid .ua-wide{grid-column:1 / -1;}

/* 메인 "좋아하는 멤버 알림 받기"(1.23) — 아이콘·제목·설명 / 멤버 칩(사진 + 짧은 이름, 고르면 멤버 색 테두리) / 다음에·알림 받기 */
.wds-card.main-push{display:flex;flex-direction:column;gap:var(--sp-14);padding:var(--sp-18) var(--sp-24);border-color:var(--wds-line-primary);
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),transparent 70%),var(--wds-bg-normal);}
.main-push__head{display:flex;align-items:center;gap:var(--sp-14);}
.main-push__title{font-size:17px;font-weight:700;color:var(--wds-label-normal);letter-spacing:var(--ls-heading);}
.main-push__desc{font-size:14px;color:var(--wds-label-alternative);margin-top:var(--sp-2);word-break:keep-all;}
.push-pick-row{display:flex;flex-wrap:wrap;gap:var(--sp-8);}
.push-pick{display:inline-flex;align-items:center;gap:var(--sp-6);min-height:36px;padding:var(--sp-2) var(--sp-12) var(--sp-2) var(--sp-2);border-radius:var(--radius-pill);
    border:1px solid var(--wds-line-normal);background:var(--wds-fill-alt);color:var(--wds-label-neutral);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
    transition:transform var(--dur-fast,.15s) var(--ease),border-color .15s,background .15s;}
.push-pick:hover{transform:translateY(-2px);}
.push-pick__av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--wds-fill-normal);}
.push-pick__av img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.push-pick.is-on{border-color:var(--m-color,var(--accent));background:var(--m-surface,rgba(var(--accent-rgb),.14));color:var(--m-fg,var(--accent-text));}
.main-push__foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-8);}
@media(min-width:901px){   /* PC: 버튼을 제목 줄 오른쪽에 — 카드 높이를 한 줄 줄인다 */
    html:not(.is-phone) .wds-card.main-push{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-16);}
    html:not(.is-phone) .main-push .push-pick-row{grid-column:1 / -1;}
    html:not(.is-phone) .main-push__foot{grid-row:1;grid-column:2;}
}
/* 콘서트·싱크룸 세트리스트 행(2026-10-24 운영자 "글씨가 가로에 다 들어갔으면") — 제목 한 줄 말줄임, 부른 사람 줄바꿈 없음. 싱크룸은 번호 대신 다시보기 위치 */
.wds-caption1.setlist-no{color:var(--wds-label-alternative);min-width:22px;text-align:right;flex-shrink:0;}
.setlist-row--at .setlist-no{min-width:54px;font-size:12px;}
.setlist-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.setlist-by{white-space:nowrap;}
.setlist-go{display:inline-flex;flex-shrink:0;color:var(--wds-label-alternative);}   /* 예전 빨간 ▶ — 색에 뜻이 없는데 삭제·위험 색과 겹쳤다(2026-10-24) */
.setlist-go svg{width:16px;height:16px;stroke-width:1.8;}
.setlist-row:hover .setlist-go{color:var(--accent-text);}

/* 업데이트 안내 카드(2026-10-25) — 메인 맨 위, 새 번호로 열린 뒤 한 번. 아이콘 · 글 · 버튼 둘 · 닫기 */
.wds-card.main-update{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) var(--sp-20);border-color:var(--wds-line-primary);
    background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),transparent 70%),var(--wds-bg-normal);}
.main-update__text{flex:1;min-width:0;}
.main-update__title{font-size:16px;font-weight:700;color:var(--wds-label-normal);}
.main-update__desc{font-size:14px;color:var(--wds-label-alternative);margin-top:var(--sp-2);}
.main-update__btns{display:flex;gap:var(--sp-8);flex-shrink:0;}
.main-welcome__tabs{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-8);}   /* 첫 방문 안내 카드의 탭 바로가기 칩(2026-10-28) */
.main-welcome .wds-chip{min-height:28px;padding:0 var(--sp-10);font-size:13px;}

/* 팝업 품절 현황(2026-10-26) — 공식 X 품절 글을 상품마다 한 줄로, 활동 멤버 칩 중 품절만 꺼 둔다 */
#main-stock:empty,#main-bgoods:empty{display:none;}
/* 생일 굿즈 카드(2026-10-28, 11/22 토아 생일 준비) — 품절 카드와 같은 틀, 상품 이름은 팬딩 상품 링크 */
.main-bgoods .main-stock__prod{flex-basis:360px;}
.main-bgoods .main-stock__prod a{color:inherit;text-decoration:none;}
.main-bgoods .main-stock__prod a:hover{color:var(--accent-text);text-decoration:underline;}
.member-card__bday{margin-left:var(--sp-6);vertical-align:middle;}
.main-stock__toggle{display:inline-flex;align-items:center;gap:var(--sp-8);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;min-width:0;text-align:left;}   /* 접기(기본 접힘, 2026-10-26) */
.main-stock__toggle svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--wds-label-alternative);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-90deg);transition:transform var(--dur-fast) var(--ease);}
.main-stock.is-open .main-stock__toggle svg{transform:none;}
.main-stock__links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);flex:none;}
.main-stock__links--body{display:none;}   /* 폰은 머리에 자리가 없어 펼친 카드 아래로(mobile.css) */
.main-stock__sum{font-size:14px;font-weight:600;color:var(--wds-label-alternative);white-space:nowrap;}
.main-stock:not(.is-open) .main-stock__body{display:none;}
.main-stock:not(.is-open) .main-box__head{border-bottom:0;}
.main-stock__desc{font-size:14px;color:var(--wds-label-alternative);padding:var(--sp-14) var(--sp-20) var(--sp-6);display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-6);}
.main-stock__list{display:flex;flex-direction:column;padding:0 var(--sp-20) var(--sp-16);}
.main-stock__row{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-10) 0;border-top:1px solid var(--wds-line-alt);}
.main-stock__row:first-child{border-top:0;}
.main-stock__prod{flex:0 0 180px;font-size:15px;font-weight:600;color:var(--wds-label-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   /* 상품 이름 한 줄(운영자 "최대한 한 줄로") */
button.main-stock__prod{padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;min-width:0;}   /* 팝업 카드는 누르면 공식 MD 그림(2026-10-29) — 생일 굿즈 카드의 이름 칸(span)은 그대로 */
.main-stock__pn{display:flex;align-items:center;gap:var(--sp-4);max-width:100%;min-width:0;}
.main-stock__pt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main-stock__pn svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--wds-label-alternative);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.main-stock__prod:hover .main-stock__pn{color:var(--accent-text);}
.main-stock__prod:hover .main-stock__pn svg{stroke:var(--accent-text);}
.main-stock__who{display:flex;flex-wrap:wrap;gap:var(--sp-6);min-width:0;}
.main-stock__chip{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--sp-10);border-radius:var(--radius-pill);font-size:13px;font-weight:600;
    color:var(--m-fg,var(--wds-label-neutral));background:var(--m-surface,var(--wds-fill-normal));border:1px solid var(--m-line,var(--wds-line-alt));}
.main-stock__chip.is-off{color:var(--wds-label-alternative);background:transparent;border:1px dashed var(--wds-line-neutral);opacity:.6;text-decoration:line-through;}   /* 품절 = 꺼 둔 칩 — 점선 + 취소선(무채색 멤버 칩과 헷갈리지 않게) */
/* 칩은 누르면 "살 굿즈"로 고른다(2026-10-29) — 고른 칩은 파란 테두리 + 체크. 재판매는 초록 테두리 + 작은 "재판매" */
button.main-stock__chip{font-family:inherit;cursor:pointer;gap:var(--sp-4);}
button.main-stock__chip.is-off{cursor:not-allowed;}
.main-stock__chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.main-stock__chip.is-picked{color:var(--accent-text);background:rgba(var(--accent-rgb),.14);border:1px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.main-stock__chip.is-re{border:1px solid var(--online);box-shadow:inset 0 0 0 1px rgba(var(--online-rgb),.5);}
.main-stock__re{font-size:11px;font-weight:700;color:var(--wds-status-positive);}
.main-stock__cp{font-size:11px;font-weight:500;color:var(--wds-label-alternative);margin-left:var(--sp-2);}
.main-stock__legend{min-height:22px;font-size:12px;pointer-events:none;}
.main-stock__upd{margin-left:var(--sp-4);}
.main-stock__members{display:flex;gap:var(--sp-6);padding:var(--sp-8) var(--sp-20) var(--sp-8);overflow-x:auto;scrollbar-width:none;}
.main-stock__members::-webkit-scrollbar{display:none;}
.main-stock__members .wds-chip{flex:none;min-height:30px;padding:0 var(--sp-12);}
.main-stock__cart{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8) var(--sp-12);margin:0 var(--sp-20) var(--sp-16);padding:var(--sp-12) var(--sp-14);border-radius:var(--radius-sm);background:rgba(var(--accent-rgb),.08);}
.main-stock__sumline{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-8);font-size:15px;color:var(--wds-label-normal);}
.main-stock__total{font-size:17px;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.main-stock__gone{font-size:13px;color:var(--wds-label-alternative);}
.main-stock__cart-btns{display:flex;gap:var(--sp-6);}
.main-stock__hint::before{content:'·';margin-right:var(--sp-6);}   /* 사용법은 품절 견본·갱신 시각과 같은 줄에 이어서(2026-10-29) */
.stock-md{max-width:760px;}
.stock-md__body{padding:0;background:var(--wds-static-white);}
.stock-md__body img{display:block;width:100%;height:auto;}
.wds-caption1.stock-md__src{margin-right:auto;color:var(--wds-label-alternative);}
/* 팝업 안내사항·이스터에그 칸(2026-10-29) — 굿즈 현황 카드를 펼치면 맨 위 두 칸, 누르면 창(app.js POPUP_GUIDE) */
.main-stock__guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-12);padding:var(--sp-16) var(--sp-20) var(--sp-4);}   /* 카드 안쪽 여백 — 칸이 카드 테두리에 붙어 꽉 차 보였다(2026-10-30 운영자 "좀 띄워 놓자") */
.main-stock__gbtn{display:flex;align-items:center;gap:var(--sp-12);min-width:0;padding:var(--sp-10) var(--sp-12);border:1px solid var(--border);border-radius:var(--radius2);background:var(--surface2);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);}
.main-stock__gbtn:hover{transform:translateY(-2px);box-shadow:var(--elev-sm);border-color:var(--wds-primary-normal);}
.main-stock__gbtn>svg{flex:none;width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--wds-label-alternative);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.main-stock__gtx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.main-stock__gtx b{font-size:15px;font-weight:700;}
.main-stock__gtx span{font-size:13px;color:var(--wds-label-alternative);}
.stock-guide{max-width:640px;}
.stock-guide__body{display:flex;flex-direction:column;gap:var(--sp-18);}
.stock-guide__sec h3{margin:0 0 var(--sp-8);}
.stock-guide__sec ul{display:flex;flex-direction:column;gap:var(--sp-6);margin:0;padding-left:1.2em;}
.stock-guide__sec li{font-size:15px;line-height:1.55;color:var(--wds-label-normal);}
.stock-guide__foot{flex-wrap:wrap;justify-content:flex-start;gap:var(--sp-4);}
.stock-guide__src{margin-right:var(--sp-4);color:var(--wds-label-alternative);}
.stock-egg{display:flex;flex-direction:column;gap:var(--sp-10);}
.stock-egg+.stock-egg{padding-top:var(--sp-18);border-top:1px solid var(--border);}
.stock-egg img{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface2);}
.stock-egg__tx{display:flex;flex-direction:column;gap:var(--sp-6);}
.stock-egg h3{display:flex;align-items:center;gap:var(--sp-8);margin:0;}
.stock-egg__n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--accent-solid);color:var(--on-accent);font-size:13px;font-weight:700;}
.stock-egg p{margin:0;line-height:1.6;color:var(--wds-label-normal);}
.stock-egg__src{align-self:flex-start;color:var(--accent-text);}
.main-stock.is-closed .main-stock__chip:not(.is-off){color:var(--wds-label-neutral);background:var(--wds-fill-normal);border-color:var(--wds-line-alt);}   /* 팝업 종료(2026-10-28) — 판매 중이던 칩도 멤버 색 없이 회색 */
.main-stock__closed{margin-left:var(--sp-8);white-space:nowrap;}
.main-stock__n{display:block;font-size:12px;font-weight:500;color:var(--wds-label-alternative);margin-top:2px;}

/* 알림 탭 "알림 켜기" 줄(2026-10-25) — 푸시를 쓸 수 있는데 아직 구독하지 않은 기기만 */
.wds-card.alarms-push{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-14) var(--sp-20);margin-bottom:var(--sp-16);border-color:var(--wds-line-primary);}
.alarms-push__text{flex:1;min-width:0;font-size:15px;color:var(--wds-label-neutral);}
#alarms-push:empty{display:none;}

/* ── 다크 테마 = 푸른빛 차콜 (PC·폰 공통) ──
   2026-10-25 운영자 "다크모드가 너무 어둡다" → PC도 폰과 같은 차콜(바탕 #232428 · 카드 #2C2D31 · 올린 면 #34353A; 예전 PC #0F0F10 · #1B1C1E · #212225).
   2026-10-28 운영자 "모바일 기준 다크모드가 너무 까매졌어, 색감 다른 거 참고" → 한 단계 밝고 살짝 푸른 차콜(X "Dim"·GitHub dark dimmed·Discord 쪽 톤 — 사이트 아이콘의 남색 밤하늘과 같은 결):
   바탕 #252932 · 카드 #2F343E · 올린 면 #393F4B · 그 위 #444B5C.
   2026-10-30 운영자 "다크모드지만 너무 어두운 것 같아" → #2C313B로 밝혔다가 "너무 밝아졌다" → 중간 #282C35, 같은 날 밤 "너무 어두워서 눈 아파, 파스텔 톤, 지금 방송 중 색처럼 느낌 있게" → 남색 밤하늘(인디고): 바탕 #262B42 · 카드 #30364F · 올린 면 #3A415C · 그 위 #454D6A + 바탕에 파랑·분홍 성운. 구분선·채움도 푸른 중립(140,146,160)으로. 보조 글자 #B4B8C2 .92(올린 면 위 4.7:1), 파란 글자 #69A5FF(카드 위 5.0), 빨간 글자 #FF8080(카드 위 5.1).
   theme.js의 멤버 글자 대비 기준 카드 색·index.html theme-color·manifest theme_color도 같이 바꿨다. --bg 등 별칭은 :root에서 이미 계산돼 내려오므로 별칭까지 함께 다시 정한다. 라이트(body.light)는 그대로. */
body:not(.light){
    --wds-bg-alt:#262B42; --wds-bg-normal:#30364F; --wds-bg-elevated:#3A415C; --wds-bg-elevated-alt:#2B3049;
    --bg:#262B42; --surface:#30364F; --surface2:#3A415C; --surface3:#454D6A;
    --glass:rgba(42,47,72,.9);
    --wds-line-normal:rgba(160,170,210,.34); --wds-line-neutral:rgba(160,170,210,.28); --wds-line-alt:rgba(160,170,210,.2);
    --border:var(--wds-line-alt); --border2:var(--wds-line-neutral);
    --wds-fill-normal:rgba(160,170,210,.22); --wds-fill-alt:rgba(160,170,210,.12);
    --danger-text:#FF9EAE;
    --wds-label-alternative:#C6CAE0; --text3:#C6CAE0;
    /* 대비(올린 면 #3A415C 위): 파란 글자 #A8CBFF · 보조 #C6CAE0 · 빨강 #FF9EAE 모두 4.5 이상 */
    --accent-text:#A8CBFF; --wds-label-neutral:#D9DCEB;
}
/* 바탕에 "지금 방송 중" 카드와 같은 밤하늘 성운 — 왼쪽 위 파랑, 오른쪽 아래 분홍을 옅게(화면에 붙어 스크롤해도 그대로) */
body:not(.light){
    background:radial-gradient(1100px 760px at 0% 0%, rgba(var(--accent-rgb),.16), transparent 62%),
               radial-gradient(1000px 720px at 100% 100%, rgba(var(--accent2-rgb),.11), transparent 62%), var(--bg);
    background-attachment:fixed;
}

/* 멤버별 알림 표 숨 돌리기(2026-10-30 운영자 "멤버별 알림 보면 숨이 막힌다") — 줄 구분선 대신 기수 묶음 제목,
   체크 칸은 테두리 상자 대신 둥근 점(켬 = 파란 틴트 + 체크, 끔 = 옅은 고리), 머리글 끄기·켜기는 테두리 없는 글자 */
.nm-row{border-bottom:none;min-height:42px;}
.nm-head{border-bottom:1px solid var(--wds-line-alt);margin-bottom:var(--sp-2);}
.nm-gen{font-size:12px;font-weight:600;color:var(--wds-label-alternative);padding:var(--sp-12) 0 var(--sp-2);letter-spacing:var(--ls-caption);}
.nm-box{border-radius:50%;border:1.5px solid rgba(var(--neutral-rgb),.32);}
.nm-box.is-on{border-color:transparent;}
.nm-box:not(.is-on) svg{visibility:hidden;}
.nm-col-btn{border-color:transparent;background:none;color:var(--accent-text);}
.nm-col-btn.is-off{border-color:transparent;}
#platform-priority.is-off .wds-card{border-style:dashed;}   /* 중복 알림 하나만 받기가 꺼져 있을 때 — 흐리게 하면 글자 대비가 떨어져 점선 테두리로만(순서는 미리 바꿔 둘 수 있다) */

/* 프로필 고르기(2026-10-30) — 미리보기 + 종류 세그먼트 + 격자, 사진 올리기 안내 */
.pf-preview{width:72px;height:72px;margin:0 auto var(--sp-12);display:flex;align-items:center;justify-content:center;font-size:44px;line-height:1;border-radius:50%;background:var(--wds-fill-alt);overflow:hidden;}
.pf-tabs{margin-bottom:var(--sp-12);}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:var(--sp-6);margin-bottom:var(--sp-16);max-height:240px;overflow-y:auto;}
.pf-cell{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;font-size:26px;border:2px solid transparent;border-radius:50%;background:var(--wds-fill-alt);cursor:pointer;overflow:hidden;}
.pf-cell.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.15);}
.pf-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.pf-img--fan{object-fit:contain;padding:12%;}
.profile-btn__av{overflow:hidden;}
#settings-profile-emoji .pf-img{width:44px;height:44px;}
.pf-cellmini .pf-img{width:26px;height:26px;display:inline-block;vertical-align:middle;}
.pf-upload{grid-column:1/-1;text-align:left;}
.pf-rules{margin:var(--sp-10) 0 0;padding-left:1.2em;font-size:13px;line-height:1.6;color:var(--wds-label-alternative);}
.pf-upload__msg{margin-top:var(--sp-8);font-size:13px;color:var(--accent-text);min-height:1em;}

/* 내 유튜브 재생목록에 추가(2026-10-30) — VOD 카드 썸네일 오른쪽 위 둥근 +, 소식 행 메타 줄 끝 작은 알약, 고르기 창 */
.yt-add{display:inline-flex;align-items:center;gap:var(--sp-4);padding:2px var(--sp-8);border:1px solid var(--wds-line-normal);border-radius:var(--radius-pill);background:none;color:var(--wds-label-neutral);font-size:12px;cursor:pointer;}
.yt-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.yt-add:hover{color:var(--accent-text);border-color:rgba(var(--accent-rgb),.5);}
.wds-card__media{position:relative;}
.yt-add--over{position:absolute;top:var(--sp-8);right:var(--sp-8);width:34px;height:34px;padding:0;justify-content:center;border:0;background:rgba(var(--ink-rgb),.62);color:var(--on-accent);}
.yt-add--over svg{width:18px;height:18px;}
.yt-add--over:hover{background:var(--accent-solid);color:var(--on-accent);}
.yt-sheet{display:flex;flex-direction:column;gap:var(--sp-8);padding-bottom:var(--sp-20);}
.yt-sheet__video{font-size:13px;color:var(--wds-label-alternative);margin-bottom:var(--sp-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yt-sheet__msg{font-size:14px;line-height:1.6;color:var(--wds-label-neutral);padding:var(--sp-8) 0;}
.yt-sheet__new{display:flex;gap:var(--sp-8);margin-top:var(--sp-6);}
.yt-sheet__new input{flex:1;min-width:0;}
.yt-sheet__foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--wds-label-alternative);margin-top:var(--sp-4);}
/* VOD 카드 안: 제목(두 줄 높이) → 바로 아래 채널·날짜, 명장면은 카드 아래쪽에 붙인다 — 카드 높이를 같게 하면서 메타 줄 위치가 카드마다 달라 보이던 것(2026-10-30) */
.vod-body .vod-meta{margin-top:var(--sp-6);}
.vod-body .vod-hl{margin-top:auto;}
.vod-body .vod-meta:has(+ .vod-hl:not([hidden])){margin-bottom:var(--sp-10);}

/* 받을 알림 칩 = 6칸 격자(2026-10-30 운영자 "배치가 딱 떨어지게") — 줄마다 칩 수가 달라 5+1로 떨어지던 것. 6칩 줄은 한 줄, 3칩 줄은 반, 긴 칩은 두 칸 */
.notif-picks__row{grid-template-columns:repeat(6,minmax(0,1fr));}
@media(max-width:1280px){.notif-picks__row{grid-template-columns:repeat(3,minmax(0,1fr));}}
.notif-pick{justify-content:center;}
/* 멤버별 알림 표는 넓은 화면에서 넓게(2026-10-30 운영자 "오른쪽이 빈 느낌, 넓게 쓰거나 크게") */
.nm-table{max-width:none;}
.nm-row{grid-template-columns:minmax(150px,1.6fr) repeat(7,minmax(52px,1fr));}
/* 소식 멤버 칩은 PC에서도 한 줄(2026-10-30 운영자 "배치가 딱 떨어지게" — 17개가 두 줄로 떨어져 끝줄에 2~3개만 남았다). 칩을 조금 좁히고, 그래도 넘치면 가로로 넘긴다 */
[id$="news-member-chips"]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-top:3px;padding-bottom:2px;}
[id$="news-member-chips"]::-webkit-scrollbar{display:none;}
[id$="news-member-chips"] > .wds-chip{flex-shrink:0;padding-left:var(--sp-12);padding-right:var(--sp-12);}
.yt-auto{margin-top:var(--sp-10);padding:var(--sp-12);border:1px solid var(--wds-line-alt);border-radius:var(--radius);display:flex;flex-direction:column;gap:var(--sp-8);}
.yt-auto__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-8);}
.yt-auto__n,.yt-auto__desc{font-size:12px;color:var(--wds-label-alternative);}
.yt-auto__kinds{display:flex;gap:var(--sp-14);font-size:14px;color:var(--wds-label-normal);}
.yt-auto__btns{display:flex;gap:var(--sp-8);}
.yt-auto select{min-height:40px;padding:0 var(--sp-10);border-radius:var(--radius-sm);}

/* 로그인·회원가입 창 정리(2026-10-30 운영자 "로그인 화면 UI 배치가 왜 저래") — 칸마다 인라인 스타일이 달라 아이디 칸은 크고 비밀번호 칸은 작았다.
   모든 칸(아이디·비밀번호·닉네임·팬덤) 같은 높이 48px·글자 16px·여백, 라벨 14px, 버튼 48px, 칸 사이 16px */
.modal:focus,.wds-modal:focus{outline:none;}
.auth-modal{padding:28px 28px 24px;}
.auth-modal .modal-title{font-size:20px;font-weight:700;text-align:center;margin:0 40px 22px;}
.auth-modal .form-group{margin-bottom:16px;}
.auth-modal .form-group label{font-size:14px;color:var(--wds-label-neutral);margin-bottom:8px;}
.auth-modal .form-group input[type="text"],.auth-modal .form-group input[type="password"],.auth-modal #reg-fandom{
    width:100%;height:48px;padding:0 14px;box-sizing:border-box;font-size:16px;font-family:var(--font-body);color:var(--text);
    background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius2);outline:none;}
.auth-modal .form-group input[type="password"]{padding-right:44px;}
.auth-modal .form-group input::placeholder{font-size:15px;color:var(--wds-label-alternative);opacity:.85;}
.auth-modal .form-group input:focus,.auth-modal #reg-fandom:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);}
.auth-modal .auth-btn{height:48px;font-size:16px;font-weight:700;}
.auth-keep{display:flex;align-items:center;gap:8px;margin:-4px 0 18px;font-size:14px;color:var(--wds-label-neutral);cursor:pointer;width:max-content;}
.auth-keep input{width:18px;height:18px;margin:0;accent-color:var(--accent);}
.auth-modal #modal-pw-hint,.auth-modal #modal-pw2-hint{font-size:13px;margin-top:6px;}
@media (max-width:600px){ .auth-modal{padding:24px 18px 20px;} .auth-modal .modal-title{margin-bottom:18px;} }
.auth-switch{text-align:center;font-size:14px;color:var(--wds-label-neutral);cursor:pointer;margin-top:4px;padding:6px 0;}
.auth-switch:hover{color:var(--accent-text);}