/* ═══════════════════════════════════════════════════════════════════
   mobile.css — 폰·태블릿(900px 이하) 전용 스타일 (2026-09-26 분리)
   index.html이 <link media="(max-width: 900px)">로 불러오므로 **이 파일의 규칙은 PC(901px 이상)에 절대 적용되지 않는다.**
   운영자 "모바일만 고쳐 달라 했는데 PC도 바뀐다" → 폰 전용 수정은 전부 이 파일에만 넣을 것.
   style.css·components.css 다음에 로드되므로 같은 우선순위면 이 파일이 이긴다.
   (안의 @media(max-width:600px) 등은 900px 이하 안에서 다시 폭을 나누는 것 — style.css에 있던 순서 그대로 옮겼다.)
   ═══════════════════════════════════════════════════════════════════ */

@media(max-width:768px){
            .intro-title>span{display:block;}
        }

/* 인트로 멤버 격자: 폰·태블릿은 기수마다 2열 (PC는 style.css에서 한 줄 4명, 2026-09-27) */
.intro-member-grid{grid-template-columns:repeat(var(--c2,2),150px);}

/* 폰 상단바 (2026-09-25, 운영자 "모바일 상단바에도 베타 표시"): 500~600px은 "STEL DB 베타", 360~499px은 사이트명 없이 "베타"만
           (그 폭에서는 STEL DB + 배지가 107px이라 "STEL …"로 눌렸다), 359px 이하는 아이콘과 겹쳐 숨긴다 — 사이드바 머리에는 항상 있다. */

@media(max-width:499px){
            .topbar .page-title{display:block!important;overflow:visible;flex-shrink:0;}
            .topbar .page-title .pt-full,.topbar .page-title .pt-short{display:none!important;}
            .topbar .page-title .beta-badge{margin-left:0;min-height:22px;padding:0 var(--sp-8);}
        }

@media(max-width:359px){ .topbar .page-title{display:none!important;} }

@media(max-width:900px){
            .sidebar{z-index:200;}   /* 위치·움직임은 파일 끝 transform 규칙이 정한다(left 애니메이션 금지) */
            /* 모바일 드로어: 열면 전체 너비 + 탭 이름(라벨) 표시 */
            .sidebar.mobile-open .nav-label{opacity:1!important;}
            .main{margin-left:0!important;margin-right:0!important;}
            .content{grid-template-columns:1fr;padding:12px;}   /* 480px 이하도 12px — 8px은 카드가 화면 끝에 붙어 보였다 */
            .stats-row{grid-template-columns:repeat(2,1fr);}
            /* 관리자 패널: 인라인 style의 `1fr 1fr 1fr` 격자가 넓은 유저 표(nowrap)의 최소 폭에 맞춰 늘어나 화면이 오른쪽으로 밀렸다(아래 탭 바도 밀려 사라졌다)
               → 폰·태블릿은 한 열 + 칸이 내용 폭에 끌려가지 않게 한다(표는 자기 안에서 가로 스크롤) */
            #page-admin > div[style*="display:grid"]{grid-template-columns:minmax(0,1fr)!important;}
            #page-admin .widget{min-width:0;}

            #mobile-menu-btn{display:flex!important;}

            /* 오른쪽 방송 현황 패널: 모바일에선 우측 드로어(팝업)로 */
            .right-sidebar{transform:translateX(106%);transition:transform .28s ease;z-index:210;}   /* 폭은 아래 900px 블록(min(264px,78vw)) */
            .right-sidebar.mobile-open{transform:translateX(0);}
            #rsidebar-topbar-btn{display:flex!important;}

        }

@media(max-width:600px){
            .wds-card{padding:var(--sp-16);}   /* 좁은 화면에서 좌우 24px은 본문 폭을 너무 깎는다 — 폭 규칙은 이 파일에(예전엔 components.css 끝) */
            :root{--font-base:13px;}
            .topbar{padding:0 10px;height:52px;}
            /* 알림 패널: 벨 아이콘 기준 우측 정렬(absolute)이면 폰에서 화면 왼쪽 밖으로 나간다(실측 -195px).
               상단바 아래 화면 폭에 고정한다. */
            #alarm-panel{position:fixed!important;top:60px!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100vh - 80px);}
            #alarm-panel #alarm-list{max-height:calc(100vh - 150px)!important;}
            /* 100vh는 삼성 인터넷·크롬의 아래 도구 막대 높이를 포함해 패널 아래가 화면 밖으로 잘렸다 → 보이는 높이(dvh) 기준 */
            @supports (height:100dvh){
                #alarm-panel{max-height:calc(100dvh - 80px);}
                #alarm-panel #alarm-list{max-height:calc(100dvh - 160px)!important;}
            }
            /* 폰은 아래 탭 바(60px)가 패널 위에 그려진다(.main이 z-index:1 쌓임 맥락) — 목록 끝이 가리지 않게 탭 바 높이만큼 뺀다 */
            html.is-phone #alarm-panel #alarm-list{max-height:calc(100dvh - 220px - env(safe-area-inset-bottom))!important;}
            /* 헤더 우측 간격 */
            .topbar-right{gap:5px!important;}   /* nowrap은 style.css 기본 */

            .sidebar-toggle{display:none!important;}
            .topbar-right #auth-area .tb-btn,.topbar-right #auth-area button{white-space:nowrap!important;padding:7px 13px!important;font-size:12px!important;}
            /* 로그인+회원가입 두 버튼이 좁은 폭에 눌려 줄바꿈되면서 상단바 밖으로
               삐져나오던 문제. 버튼 묶음은 줄어들지 않게 하고, 대신 사이트명이 줄어든다. */
            .topbar-right #auth-area{display:flex;align-items:center;flex-shrink:0;white-space:nowrap;}
        }

@media(max-width:480px){
            :root{--font-base:12px;}
            .topbar{padding:0 8px;}

            .widget{border-radius:var(--radius-sm);}

        }

/* 429px 이하: 방송 중 배지는 라벨을 빼고 점+숫자만, 상단바 간격을 줄인다 */

@media(max-width:429px){
            /* 방송 중 배지도 라벨을 빼고 점+숫자만 남긴다. 라벨만 60px 가까이 먹는데
               옆에 초록 점이 있어 뜻은 그대로 전달된다. */
            .tb-live-label{display:none;}
            .topbar-right .tb-live{padding:0 var(--sp-8)!important;}
            .topbar-right{gap:4px!important;}
        }

@media(max-width:820px){ .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12);} .info-tile{min-height:0;} }

/* 폰 정보 탭: 세로 타일(한 장 130px, 빈 자리 많음) → 아이콘 · 제목 · 설명 한 줄 · 화살표의 목록 행(iOS 설정·네이버 앱 "더보기" 목록) — 2026-09-28 */
@media(max-width:600px){
    .info-grid{grid-template-columns:1fr;gap:var(--sp-8);}
    .info-groups{gap:var(--sp-20);}
    .info-tile{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;column-gap:var(--sp-12);row-gap:2px;align-items:center;padding:var(--sp-12) var(--sp-14);}   /* 행 86px → 약 72px(2026-10-24, 한 화면에 6개) */
    .info-tile .wds-ico-box{grid-row:1 / span 2;margin:0;}
    .info-tile__title{grid-column:2;font-size:16px;}
    .info-tile__desc{grid-column:2;font-size:13px;-webkit-line-clamp:1;min-height:0;}   /* PC의 두 줄 최소 높이(style.css)는 폰 목록 행엔 불필요 — 행 89px → 약 70px(2026-10-24) */
    .info-tile__go{position:static;grid-column:3;grid-row:1 / span 2;width:18px;height:18px;}
    .info-tile__go svg{width:18px;height:18px;}
    /* 키리누키 채널 행: 68px → 56px(유튜브 구독 채널 목록 밀도) */
    .kiri-grid{gap:var(--sp-8);}
    .wds-card.kiri-row{padding:var(--sp-10) var(--sp-14);min-height:56px;gap:var(--sp-12);}
    /* 굿즈 필터 첫 줄(세그먼트 + 연도 칩, 가로 스크롤): 간격·세그먼트 여백만 줄인다 */
    .goods-filter-row{gap:var(--sp-8);}
    .goods-filter-row .wds-segmented__item{padding:var(--sp-6) var(--sp-10);}
}

/* 폰 달력: 칸이 좁아 "11 · 오늘"이 세로로 접히므로 글자는 숨기고 칸 강조(테두리·배경)만 남긴다 */

@media(max-width:600px){ .sched-today-label{display:none;} }

/* 10) 모바일 폴리시 — 터치 타깃·딤 배경·그리드 정리 */

@media(max-width:600px){
    .stats-row{gap:8px;}
}

@media(max-width:700px){.main-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

@media(max-width:900px){
    body.drawer-open #drawer-backdrop{display:block;position:fixed;inset:0;background:var(--overlay);z-index:199;}
    body.drawer-open{overflow:hidden;}
    .sidebar.mobile-open,.right-sidebar.mobile-open{box-shadow:var(--elev-lg)!important;}
}

/* 상단바: 인트로 버튼은 메인 "인트로 다시 보기"(900px 이하에서 보임)에, 회원가입은 로그인 창 아래 링크에 있다.
   예전엔 600px 이하에서만 숨겨 601~900px(PC 작은 창)에서 상단바가 넘쳐 두 줄로 접히며 윗줄이 잘렸다(2026-09-27) */
.topbar-right .tb-btn--signup{display:none!important;}
@media(max-width:600px){

    /* 칩 줄은 줄바꿈 대신 가로 스크롤 한 줄 — 소식 필터가 6줄, 굿즈 필터가 5줄을 차지했다 */
    .content .wds-chip-group,.content .m-scroll-row,#fanzone-tabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
        scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
    .content .wds-chip-group::-webkit-scrollbar,.content .m-scroll-row::-webkit-scrollbar,#fanzone-tabs::-webkit-scrollbar{display:none;}
    .content .wds-chip-group > *,.content .m-scroll-row > *,#fanzone-tabs > *{flex-shrink:0;}

    /* 멤버 카드: 가운데 정렬 큰 카드(한 장 290px) → 사진 왼쪽 가로형 */
    .member-grid{grid-template-columns:1fr!important;gap:var(--sp-10)!important;}
    .member-card{display:grid!important;grid-template-columns:64px 1fr;column-gap:var(--sp-14);align-items:center;text-align:left!important;
        padding:var(--sp-14) var(--sp-16)!important;}
    .member-card > *{margin:0!important;}
    .member-card__avatar{width:64px!important;height:64px!important;grid-row:1 / span 2;}
    .member-card__name{align-self:end;}
    .member-card > div:nth-of-type(2){align-self:start;margin-top:var(--sp-4)!important;}
    .member-card__links{grid-column:1 / -1;justify-content:flex-start!important;margin-top:var(--sp-12)!important;}

    /* VOD: 한 열(카드 하나가 화면 폭) → 두 열 */
    #vod-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-10)!important;}
    #vod-list .wds-card > div:last-child{padding:var(--sp-8) var(--sp-10) var(--sp-10)!important;}

    /* 굿즈 머리: 제목이 "공식 굿/즈"로 접혔다 — 검색창은 아래 줄 전체 폭 */
    .goods-head{flex-wrap:wrap;}
    .goods-head .wds-section-header__title{white-space:nowrap;}
    .goods-head input{width:100%!important;}

    /* 달력: 칸이 좁아 일정 제목이 "2..."로 잘렸다 — 막대(여러 날 일정은 이어진 막대)만 보이고, 칸 어디를 눌러도 그날 일정 팝업(schedDayPopup) */
    .sched-grid{gap:var(--sp-4)!important;}
    .sched-week,.sched-head{column-gap:var(--sp-4)!important;}
    .sched-week{min-height:52px!important;}
    .sched-daynum{padding:var(--sp-4) var(--sp-4) 0!important;}
    .sched-bar{font-size:0!important;height:6px;min-height:6px;padding:0!important;background:var(--ev)!important;box-shadow:none!important;pointer-events:none;}
    /* 어두운 멤버 색은 다크에서 밝힌 값 (2026-10-28). 종류 일정의 점선 무늬는 2026-10-29에 뺐다(운영자 "점선이 이상하다") — 색과 범례로만 가른다 */
    body:not(.light) .sched-bar--dark{background:var(--ev-lift)!important;}
}

/* ── 모바일 2차 (2026-09-25 운영자 "모바일 기준" 요청 목록) ── */

@media(max-width:600px){
    /* 상단 아이콘 터치 영역: 32~34px → 40px(아이콘 22px). 6개가 360px 폭에도 들어간다 */
    .topbar-right .wds-icon-btn,#mobile-menu-btn{width:40px!important;height:40px!important;}
    .topbar-right .wds-icon-btn svg{width:22px;height:22px;}
    .topbar-right .tb-live{min-height:40px;}
    /* 앱 설치: 폰 상단바에서는 아이콘만(숨기기 ✕ 없이 — 설정 탭 "앱 설치" 줄로도 열 수 있다) */
    .tb-install{width:40px;height:40px;padding:0!important;justify-content:center;}
    .tb-install__label,.tb-install__x{display:none!important;}

    /* 글자 잘림 → 줄바꿈: 데스크톱용 말줄임(한 줄 ellipsis·두 줄 line-clamp)을 폰에서는 풀어 전체 제목이 보이게 한다.
       인라인 스타일로 박힌 것이 대부분이라 속성 선택자로 겨냥한다. 달력 막대(.sched-bar)는 폰에서 색 막대라 제외 */
    .content [style*="-webkit-line-clamp"]:not(.sched-bar){-webkit-line-clamp:unset!important;display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;}
    .content [style*="text-overflow:ellipsis"]:not(.sched-bar){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}

    /* 글자·카드 한 단계 축소는 아래 "모바일 3차" 블록의 .content 규칙이 본문 전체에 건다(예전 메인·정보·프로젝트·일정 한정 id 규칙은 같은 값이라 지웠다) */
    #page-info .wds-ico-box{width:36px!important;height:36px!important;}
}

/* ── 모바일 3차 (2026-09-26 운영자 "공지가 잘림, 글씨·크기가 너무 커서 잘림, 왼쪽·오른쪽 배너가 너무 튀어나옴") ── */

@media(max-width:900px){
    /* 드로어 폭: 왼쪽 280px(360 화면의 78%)·오른쪽 300px(83%) → 둘 다 min(264px, 78vw) */
    .sidebar.mobile-open{width:min(264px, 78vw)!important;}
    .right-sidebar,.right-sidebar.collapsed{width:min(264px, 78vw)!important;}
    /* 드로어 머리가 비어 있었다(.sidebar-brand는 데스크톱 .open에서만 보였다) → 사이트명·설명을 보인다 */
    .sidebar.mobile-open .sidebar-brand{display:block;}
    .sidebar.mobile-open .sidebar-header{justify-content:space-between;min-height:56px;}
    /* 메뉴 버튼 54px × 13개가 화면보다 길어 "알림"이 아래 "설정" 줄에 가렸다 → 42px */
    .nav-btn{height:42px;margin-bottom:4px;}
    .sidebar.mobile-open .nav-scroll{overflow-y:auto;}
    .nav-btn .nav-label{font-size:14px;}
}

@media(max-width:600px){
    /* 모달: 100vh는 삼성 인터넷·크롬의 아래 도구 막대 뒤까지 쳐서 공지 팝업 버튼 줄이 가려졌다 → 보이는 높이(dvh) 기준,
       본문만 스크롤하고 제목·버튼 줄은 항상 보인다 */
    .modal-overlay{padding:12px;}
    .modal{width:100%!important;padding:18px 16px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);}
    .modal-title{font-size:17px;}
    #notice-popup .notice-pop{width:100%!important;}
    .notice-pop__head{padding:var(--sp-16) var(--sp-16) 0;}
    .notice-pop__title{font-size:18px;padding:0 var(--sp-16) var(--sp-12);margin-top:var(--sp-8);}
    .notice-pop__body{max-height:none;font-size:14px;line-height:1.65;padding:var(--sp-16);}
    .notice-pop__foot{flex-direction:column-reverse;align-items:stretch;gap:var(--sp-4);padding:var(--sp-12) var(--sp-16);}
    .notice-pop__actions .wds-btn{flex:1;}
    .notice-pop__hide{align-self:center;}
    .modal-footer .wds-btn{flex:1;}

    /* 글자·카드 한 단계 축소를 메인·정보·프로젝트·일정에서 본문 전체로 넓힌다(소식·멤버·VOD·굿즈·비공식·알림·설정·공지·건의사항 포함) */
    .content .wds-title3{font-size:20px!important;}
    .content :is(.wds-heading1,.wds-section-header__title){font-size:17px!important;}
    .content .wds-headline1{font-size:16px!important;}
    .content :is(.wds-headline2,.wds-body1){font-size:15px!important;}
    .content .wds-body2{font-size:14px!important;}
    .content .wds-label1{font-size:14px!important;}
    .content .wds-card:not([style*="padding:0"]){padding:var(--sp-12) var(--sp-14)!important;}
    .content .wds-section-header{margin-bottom:var(--sp-10);}
    /* 알림 탭 머리: 버튼이 셋이라 제목 옆에 다 못 들어가 가로로 밀렸다 → 제목 아래 줄로 내리고 폭을 나눠 쓴다 */
    .content .alarms-head{flex-wrap:wrap;align-items:center;}
    .content .alarms-head__btns{width:100%;}
    .content .alarms-head__btns .wds-btn{flex:1 1 0;min-width:0;white-space:nowrap;}

    /* 메인 "지금 방송 중": 두 열 카드 안에서 방송 제목이 한 글자 폭으로 4~5줄씩 접혔다 → 두 줄까지 */
    .content .main-live-grid .wds-card .main-live-title{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;
        -webkit-line-clamp:2!important;overflow:hidden!important;}
    .main-live-grid{gap:var(--sp-8);}
    .content .main-live-grid .wds-card{padding:var(--sp-10)!important;gap:var(--sp-8)!important;}
    .main-live-grid .wds-avatar--md{width:36px;height:36px;}

    /* 오른쪽 방송 현황 드로어: 아바타 42 → 34px, 이름 15 → 14px */
    .right-sidebar-body{padding:10px!important;}
    .rs-sec{padding:10px!important;}
    .rs-live-row{gap:10px!important;padding-left:4px!important;padding-right:4px!important;}
    .rs-live-row img,.rs-live-row > div:first-child > div{width:34px!important;height:34px!important;}
    .rs-live-info > div:first-child{font-size:14px!important;}
    /* style.css의 14px 하한(.right-sidebar [style*=font-size…])보다 우선순위를 높여야 적용된다 */
    .right-sidebar .rs-live-info > div + div{font-size:12px!important;max-width:none!important;}
    .right-sidebar .rs-live-row{align-items:flex-start;}
    .right-sidebar .rs-live-tag{font-size:12px!important;padding:2px 7px!important;}
    .rs-link{padding:10px 12px;font-size:14px;}

}

/* 설정 탭 "앱 설치" 줄은 폰에서만(설치된 앱 안에서는 숨김) */
html.is-phone:not(.pwa-standalone) #pwa-set-row{display:flex!important;}   /* 서버가 폰 기기로 판단했을 때만 — 좁힌 PC 창·태블릿에서는 숨김 */

/* ═══════════════════════════════════════════════════════════════════
   폰 전용 화면 (2026-09-26, 운영자 "모바일로 접속하면 모바일 화면, PC로 접속하면 PC 화면")
   서버(is_phone_ua)가 폰 기기에만 <html class="is-phone">을 붙이고 이 파일을 폭과 상관없이 적용한다.
   태블릿·PC(창을 좁힌 것 포함)는 위의 폭 기준 규칙만 받고 아래 규칙은 받지 않는다.
   - 아래쪽 탭 바(#phone-tabbar): 메인·소식·VOD·일정 + 더보기(왼쪽 메뉴 서랍). 상단바 메뉴·패널 버튼은 숨긴다.
   - 상단바 LIVE 배지를 누르면 방송 현황 서랍(liveBadgeClick).
   - 메인: renderMain 마크업 순서 그대로 — 지금 주목 → 지금 방송 중(아바타 가로 줄) → 인기 클립 → 다가오는 일정 → 실시간 인기(2026-10-25 기준).
   ═══════════════════════════════════════════════════════════════════ */
html.is-phone #phone-tabbar{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:150;
    height:calc(60px + env(safe-area-inset-bottom));padding:0 var(--sp-4) env(safe-area-inset-bottom);
    background:var(--glass);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));
    border-top:1px solid var(--border);}
html.is-phone .ptab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);
    background:none;border:0;padding:0;color:var(--wds-label-neutral);font-family:var(--font-body);font-size:12px;font-weight:600;
    letter-spacing:var(--ls-caption);cursor:pointer;-webkit-tap-highlight-color:transparent;}
html.is-phone .ptab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
html.is-phone .ptab.active{color:var(--accent-text);}
html.is-phone .ptab:active{opacity:.6;}
/* 본문이 탭 바에 가리지 않게 */
html.is-phone .main{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
/* 서랍이 열리면 탭 바는 백드롭(z 199) 아래에 깔린다 */

/* 상단바: 메뉴 버튼(→ 더보기)·방송 현황 버튼(→ LIVE 배지)을 빼고, 그 자리에 사이트명을 되살린다 */
html.is-phone #mobile-menu-btn,html.is-phone #rsidebar-topbar-btn{display:none!important;}
@media(min-width:360px){
    html.is-phone .topbar .page-title{display:block!important;margin-left:var(--sp-4);}
    html.is-phone .topbar .page-title .pt-short{display:inline!important;}
    html.is-phone .topbar .page-title .beta-badge{margin-left:var(--sp-6);}   /* 이름이 보이므로 배지를 띄운다(499px 블록의 0은 이름을 숨길 때 값) */
    html.is-phone .topbar .page-title .pt-full{display:none!important;}
}

/* 지금 방송 중: 두 열 카드 → 아바타 + 이름 가로 줄(옆으로 넘김) */
html.is-phone .main-live-grid{display:flex!important;gap:var(--sp-12);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--sp-2);}
html.is-phone .main-live-grid::-webkit-scrollbar{display:none;}
html.is-phone .content .main-live-grid > .wds-card{flex:0 0 64px;flex-direction:column!important;align-items:center;gap:var(--sp-6)!important;
    padding:var(--sp-4) 0 0!important;border:0;background:none;box-shadow:none;transform:none;}   /* 폰 카드 여백 일괄 규칙(.content .wds-card)보다 높게 — 좌우 14px이 들어가 이름 칸이 "마…"로 줄었다 */
html.is-phone .main-live-grid .wds-avatar--md{width:56px;height:56px;}
html.is-phone .main-live-grid > .wds-card > div{width:100%;text-align:center;}
html.is-phone .content .main-live-grid .wds-card > div > div:not(:first-child){display:none!important;}   /* 방송 중·제목 줄(.main-live-title의 두 줄 규칙보다 우선) */
html.is-phone .content .main-live-grid .wds-card .wds-label1{font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

/* ── 메인 대시보드의 900px 이하 조정 (2026-09-27) ── PC 규칙은 style.css "PC 메인 대시보드" */
.content .wds-card.main-box{padding:0!important;}    /* 폰 카드 여백 일괄 규칙(.content .wds-card:not(...))이 목록 카드 머리·줄 여백과 겹쳤다 */
.main-row,.main-trend-row{padding-left:var(--sp-14);padding-right:var(--sp-14);}
.main-row{padding-top:var(--sp-12);padding-bottom:var(--sp-12);}   /* PC는 10(2026-10-19 "너무 넓다"), 폰은 손가락 누름 영역 때문에 12 */
.main-trend-row{padding-top:var(--sp-12);padding-bottom:var(--sp-12);gap:var(--sp-12);}   /* 1.30 "모바일 메인 빡빡" — 8 → 12 */
.main-box__head,.main-best__head{padding-left:var(--sp-14);}
.main-best__head{padding-right:var(--sp-14);}
/* 폰 상단바는 자리가 좁아 팬덤 배지를 뺀다(설정 화면 프로필에서는 보인다) */
@media(max-width:600px){ .topbar .fandom-badge{display:none;} }

/* ── 문장 줄바꿈 (2026-09-27, 운영자 "모바일에서 문장이 이상하게 끊긴다, 자연스럽게") ──
   ① 한글 낱말 단위 줄바꿈(keep-all)·text-wrap:pretty는 2026-10-20부터 style.css body 규칙(PC 공통)이다.
   ② 제목은 줄 길이를 고르게(balance) — 두 줄 제목이 "긴 줄 + 한두 글자"로 끊기지 않게. */
:is(.wds-title3,.wds-heading1,.wds-headline1,.wds-section-header__title,
    .notice-pop__title,.modal-title,.intro-desc,.intro-tagline,.info-tile__title,.main-row__title,h1,h2,h3){text-wrap:balance;}

/* ── 폰 상단바·서랍 정리 (2026-09-27, 운영자 "위가 너무 복잡하다, 다운로드 아이콘이 이질적이다, 오른쪽 더보기가 왼쪽에서 나온다") ──
   상단바: 스텔DB·베타 | 앱 설치(설치 전만) · 방송 중 N · 알림 · 로그인 — 테마 버튼은 "더보기" 서랍 위 바로가기로 옮겼다.
   앱 설치는 파란 알약 대신 다른 상단 아이콘과 같은 모양(투명 바탕·같은 선 굵기). */
html.is-phone #tb-theme-btn,html.is-phone #tb-lang-btn{display:none!important;}   /* 테마·언어는 "더보기" 서랍 바로가기로 */
html.is-phone .topbar-right .tb-install{width:40px;height:40px;padding:0!important;justify-content:center;background:transparent!important;
    color:var(--wds-label-neutral)!important;border-radius:var(--radius-sm);box-shadow:none!important;transform:none!important;}
html.is-phone .topbar-right .tb-install svg{width:22px;height:22px;stroke-width:1.6;}
html.is-phone .topbar-right .tb-install:active{background:var(--wds-fill-normal)!important;}
/* "더보기"는 아래 탭 바의 오른쪽 끝이라 서랍도 오른쪽에서 나온다(예전엔 왼쪽에서 나와 부자연스러웠다) */
/* 위치(right) 대신 transform으로 미끄러진다 — right는 매 프레임 배치를 다시 해 폰에서 끊겼다(2026-09-27 "사이드바 열 때 렉") */
html.is-phone .sidebar{left:auto!important;right:0;width:min(264px, 78vw)!important;transform:translateX(100%);transition:transform .26s ease;border-right:0;border-left:1px solid var(--border);}
html.is-phone .sidebar.mobile-open{transform:none;}
/* 서랍 맨 위 바로가기: 방송 현황(오른쪽 패널) · 화면 테마 · 언어(2026-10-24, 설정 "언어" 줄 대신) */
html.is-phone .drawer-quick{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-8);padding:var(--sp-4) var(--sp-12) var(--sp-10);
    border-bottom:1px solid var(--border);}
html.is-phone .drawer-quick__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:var(--sp-6) var(--sp-4);
    border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--wds-fill-alt);color:var(--wds-label-normal);
    font-family:var(--font-body);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;}   /* 세 개가 한 줄에 들어가게 아이콘 위·글자 아래(2026-10-24) */
html.is-phone .drawer-quick__btn:active{background:var(--wds-fill-normal);}
html.is-phone .drawer-quick__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* 폰 다크 테마 회색빛 블록은 2026-10-25에 style.css 끝 "다크 테마 = 푸른빛 차콜"으로 옮겼다(PC도 같은 색 — 운영자 "다크모드가 너무 어둡다") */
html.is-phone #theme-set-row{display:flex!important;}

/* 서랍(왼쪽 메뉴·오른쪽 방송 현황)은 반투명 --glass 대신 불투명 면 — 화면 절반을 매 프레임 흐리게 다시 그리는 비용이 폰에서 가장 컸다.
   서랍 뒤에는 어차피 어두운 백드롭이 깔린다 (2026-09-27) */
.sidebar,.right-sidebar{background:var(--surface)!important;will-change:transform;}
/* 폰이 아닌 좁은 창(900px 이하)의 왼쪽 서랍도 left 대신 transform으로 (폰은 위 html.is-phone 규칙이 오른쪽에서 나오게 덮는다) */
.sidebar{left:0!important;transform:translateX(-100%);transition:transform .26s ease;}
.sidebar.mobile-open{transform:none;}

/* 토스트(app.js _appToast — "업데이트했습니다" 등)와 새 버전 알림(_showUpdateBanner)은 폰 아래 탭 바(60px) 위에 띄운다 — 예전엔 토스트가 탭 바에 겹쳤다 */
body.drawer-open .wds-toast{visibility:hidden;}   /* 서랍이 열려 있는 동안 서랍 아래쪽 항목을 가리지 않게 */
html.is-phone .wds-toast{bottom:calc(72px + env(safe-area-inset-bottom));left:var(--sp-16);right:var(--sp-16);transform:none;max-width:none;justify-content:center;text-align:center;text-wrap:balance;}
html.is-phone .app-update-banner{justify-content:space-between;text-align:left;}
html.is-phone .app-update-banner .wds-btn{flex-shrink:0;}
.alarm-item__thumb,.alarm-list--page .alarm-item__thumb{width:72px;}   /* 폰은 제목이 접히지 않게 작게 */
.news-row__thumb{width:72px;}   /* 96px이면 메타 줄이 "3분 전"만 따로 접혔다 */

/* 노래 통계 표: 폰 폭에 6열이 한 화면에 들어가게 — 짧은 열 제목, 좁은 여백 (2026-09-29) */
@media (max-width:600px){
  .song-table .song-th-l{display:none;}
  .song-table .song-th-s{display:inline;}
  .song-table th,.song-table td{padding:var(--sp-8) var(--sp-2);font-size:12px;}
  .song-table .song-n{min-width:28px;height:28px;padding:0 var(--sp-4);font-size:13px;}   /* 7열이 390px에 가로 스크롤 없이(2026-10-27 외부곡 열) */
  .song-table td:first-child{padding-left:var(--sp-8);white-space:nowrap;}
  .song-table td:first-child .wds-tag{display:none;}
  .song-table .song-who__n{display:none;}   /* 폰은 7열이 들어가게 곡 수를 숨긴다(누르면 창 제목에 나온다) */
}

/* 썸네일 카드(인기 클립): 폰은 여백·제목 글자를 한 단계 줄인다 */
@media(max-width:600px){
    .content .wds-card.bd-card{padding:0!important;}
    .bd-card__body{padding:var(--sp-10);}
    .bd-card__title{font-size:14px;}
}
/* 메인 카드 한 줄(인기 클립): 폰은 카드를 옆으로 넘기는 한 줄 */
html.is-phone .main-best-row{display:flex;gap:var(--sp-10);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-4);}
html.is-phone .main-best-row::-webkit-scrollbar{display:none;}
html.is-phone .main-best-row > .bd-card,html.is-phone .main-best-row > .wds-skeleton{flex:0 0 62%;}

/* 폰 "지금 주목" 띠(2026-10-24): 방송 화면 위, 글 아래 */
html.is-phone .wds-card.main-splive{flex-direction:column;align-items:stretch;gap:var(--sp-10);padding:var(--sp-10)!important;}
html.is-phone .main-splive__thumb{flex-basis:auto;width:100%;}
/* 폰 핫 이슈 칩(2026-10-24): 라벨을 윗줄에 — 왼쪽 열로 두면 390px에서 칩 9개가 7줄이었다 */
html.is-phone .main-hot-kw{flex-direction:column;gap:var(--sp-6);}
html.is-phone .main-hot-kw__label{line-height:1.4;}
html.is-phone .wds-card.main-splive--nothumb{flex-direction:row;align-items:center;gap:var(--sp-12);}   /* 방송 화면이 없으면(19+) 폰도 PC처럼 가로 — 왼쪽 84px 멤버 색 타일 + 글(2026-10-24 운영자 "이게 최선이야?" — 2.6:1 흐린 사진 상자 대신) */
html.is-phone .main-splive--nothumb .main-splive__thumb{flex:0 0 84px;width:84px;aspect-ratio:1;}
html.is-phone .setlist-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;}   /* 긴 일본어 제목은 두 줄까지(말줄임 대신) */
html.is-phone .main-splive__title{font-size:16px;}
html.is-phone .main-splive__names{white-space:normal;}
/* 달력 "+N"(1.22) — 폰 막대는 6px 띠라 글자도 작게 */
.sched-more{font-size:12px!important;line-height:1.1;}

/* 메인 알림 카드(1.23) — 폰은 멤버 칩을 가로로 넘기고, 버튼은 폭을 나눠 쓴다 */
html.is-phone .push-pick-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--sp-14));padding:0 var(--sp-14);}
html.is-phone .push-pick-row::-webkit-scrollbar{display:none;}
html.is-phone .push-pick{flex-shrink:0;}
html.is-phone .wds-card.main-push{padding:var(--sp-14);}
html.is-phone .main-push__foot .wds-btn{flex:1;}

/* ── 2026-10-19 디자인 점검 ── */
/* 굿즈: 360px 폰에서 minmax(170px) 격자가 한 열(카드 580px)이 됐다 — 폰은 늘 두 열 */
html.is-phone #official-goods-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-10)!important;}
/* 누름 영역 36px 이상(30~34px이던 작은 버튼·칩·세그먼트·명장면 줄) */
html.is-phone :is(.wds-btn--sm,.wds-chip,.wds-segmented__item,.member-link,.tb-btn,.vod-hl__row,.goods-react){min-height:40px;}   /* 2026-10-24 디자인 점검: 36 → 40(폰 누름 영역 기준) */
html.is-phone .goods-react{flex:1;}
.notif-picks__grp{grid-template-columns:1fr;gap:var(--sp-4);}   /* 폰: 줄 이름은 칩 위 */
.notif-picks__lbl{line-height:1.5;}
/* 멤버 알림 표: 폰은 짧은 이름(유니·시로…)과 좁은 칸 — 360px에 여섯 칸이 한 줄에 든다 */
.nm-row{grid-template-columns:minmax(0,1fr) 44px repeat(6,38px);}
.nm-col-btn{min-width:34px;padding:0 var(--sp-4);}
.nm-full{display:none;}
.nm-short{display:inline;}
html.is-phone .anon-policy summary{padding-top:var(--sp-8);padding-bottom:var(--sp-8);}
html.is-phone .vod-hl__row{display:flex;align-items:center;}
html.is-phone .vod-hl__title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:keep-all;overflow-wrap:anywhere;line-height:1.35;}   /* 2열 카드에서 "차비님 커스텀오르…"로 잘렸다 — 두 줄까지(2026-10-24) */
html.is-phone .main-row{min-height:56px;}   /* 한 줄 행 47px → 목록 행 최소 56px(Material·토스 기준) */

/* 관리자 유저 분석 격자 — 폰은 한 열(style.css .ua-grid의 2열) */
.ua-grid{grid-template-columns:1fr;}
.sd-row--ev,.sd-row--add{grid-template-columns:1fr 1fr;}   /* 관리자 운영 데이터 편집 줄 — 폰은 두 열로 접는다 */
.sd-row--ev .sd-f--wide{grid-column:1 / -1;}
.sd-row--ev-head{display:none;}
.sd-row--ev .sd-f__l{display:block;}   /* 폰은 칸 이름을 칸 위에 */
.sd-row--ev .sd-del{grid-column:1 / -1;justify-self:end;}
.sd-row--ev{padding:var(--sp-10) 0;border-bottom:1px solid var(--wds-line-alt);}
.st-row{grid-template-columns:12px 96px minmax(0,1fr);}
/* 폰 "이번 주 인기 클립" 머리: 제목 한 줄 + 설명은 아래 줄(2026-10-24 운영자 "제목이 세로로 접힌다") */
html.is-phone .main-best__head{flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 var(--sp-8);}   /* 제목과 설명이 한 줄에 들어가면 나란히, 안 들어가면 설명만 아래 줄(2026-10-24) */
html.is-phone .main-best__head .main-box__title{white-space:nowrap;}
/* 폰 세트리스트 행은 글자를 줄여 한 줄에(2026-10-24) */
html.is-phone .setlist-row{gap:var(--sp-8);padding:var(--sp-6) var(--sp-8)!important;flex-wrap:wrap;}   /* 부른 사람은 제목 아래 줄 — 제목이 좁은 열에 눌려 두 줄로 접혔다(2026-10-24) */
html.is-phone .setlist-note{font-size:12px;}
html.is-phone .setlist-by{font-size:12px;flex:1 1 100%;order:3;white-space:normal;padding-left:calc(36px + var(--sp-8));}
html.is-phone .setlist-row--at .setlist-by{padding-left:calc(48px + var(--sp-8));}
html.is-phone .setlist-go{order:2;}
html.is-phone .setlist-row--at .setlist-no{min-width:48px;font-size:12px;}

/* 업데이트 안내 카드(2026-10-25): 폰은 글 아래 버튼 줄, 닫기는 오른쪽 위 */
.wds-card.main-update{flex-wrap:wrap;position:relative;padding:var(--sp-14);padding-right:var(--sp-48);}
.main-update__btns{flex-basis:100%;}
.main-update__btns .wds-btn{flex:1;}
.main-update__close{position:absolute;top:var(--sp-8);right:var(--sp-8);}


/* 알림 탭 "알림 켜기" 줄 */
.wds-card.alarms-push{padding:var(--sp-12) var(--sp-14);}


/* 팝업 품절 현황(2026-10-26) — 폰은 상품 이름을 윗줄에, 칩은 아래 줄 */
.main-stock__guide{padding:var(--sp-12) var(--sp-14) var(--sp-4);gap:var(--sp-8);}
.main-stock__desc{padding:var(--sp-10) var(--sp-14) var(--sp-4);}
.main-stock__list{padding:0 var(--sp-14) var(--sp-12);}
.main-stock__row{flex-direction:column;gap:var(--sp-6);}
.main-stock__prod{flex:none;display:flex;align-items:baseline;gap:var(--sp-8);max-width:100%;}
.main-stock__members{padding:var(--sp-8) var(--sp-14) var(--sp-4);}
.main-stock__cart{margin:0 var(--sp-14) var(--sp-12);padding:var(--sp-10) var(--sp-12);}
.main-bgoods .main-stock__prod{flex-basis:auto;flex-wrap:wrap;}
.main-stock__n{margin-top:0;}
.main-box__head .main-stock__links{display:none;}   /* 폰: 머리는 제목·전체 상품 수만 한 줄 */
.main-stock__links--body{display:flex;justify-content:flex-start;padding:0 var(--sp-6) var(--sp-10);}
.main-stock__toggle .main-box__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.main-stock__who{gap:var(--sp-4);}
.main-stock__chip{padding:0 var(--sp-8);font-size:12px;}   /* 칩 줄을 최대한 적게(운영자 "최대한 한 줄로") */

/* 건의사항 운영자 답변 입력칸(2026-10-29) — 폰은 입력칸 아래에 버튼 */
@media(max-width:600px){ .inq-card__answer{flex-direction:column;align-items:stretch;} }

/* 일정 제목은 폰에서 자르지 않는다(2026-10-29 운영자 "모바일에서 일정이 이상하게 잘려서 보여" — "…매일 10~20시,…"처럼 두 줄 말줄임이 시각·장소를 잘랐다).
   일정 탭 목록과 메인 "다가오는 일정" 줄 모두 제목 전체를 낱말 단위로 줄바꿈한다 */
html.is-phone .sched-list-row__title,html.is-phone .main-box--sched .main-row__title{display:block;-webkit-line-clamp:unset;overflow:visible;}

/* ── 2026-10-30 폰 설정·머리말 정리 (운영자 "모바일 배치나 글, 특히 설정쪽") ── */
/* 탭 머리말: 제목 옆 설명이 좁은 폭에 끼어 두 줄로 접혔다 → 설명은 제목 아래 한 줄 */
.wds-section-header.page-head{flex-wrap:wrap;row-gap:2px;}
.wds-section-header.page-head .wds-section-header__subtitle{flex-basis:100%;margin:0;}
/* 설정: 내 계정을 맨 위로, 앱 버전 두 줄은 점 없이 위아래로 */
/* 폰 설정 순서: 알림(세부 설정까지) → 내 계정 → 앱 → 약관(2026-10-30 운영자 "내 계정을 세부 설정 밑으로") */
html.is-phone .settings-grid>*{order:2;}
html.is-phone .settings-grid>:first-child{order:0;}
html.is-phone .settings-grid>.set-account{order:1;}
.ver-line{display:flex;flex-direction:column;}
.ver-line>span+span::before{content:none;}
/* 폰 탭 정리(2026-10-30 운영자 "다른 탭들도 모바일 배치") */
/* 세트리스트: 부른 사람을 제목 아래 한 줄(비고와 함께)로 — 곡마다 세 줄로 늘어졌다 */
html.is-phone .setlist-row .setlist-note,html.is-phone .setlist-row .setlist-by{display:none;}
html.is-phone .setlist-sub{display:block;font-size:12px;color:var(--wds-label-alternative);}
/* VOD 치지직 카드 명장면은 폰에서 2줄 — 3줄이면 두 열 카드가 들쭉날쭉 길어졌다 */
html.is-phone .vod-hl__row:nth-of-type(n+3){display:none;}
/* 일정 범례 설명은 작게 */
html.is-phone .sched-legend__note{font-size:12px;}

/* 2026-10-30 운영자 "저거 누르면 위에 잘리는 것" — 터치 기기는 누른 뒤에도 :hover가 남아 칩이 2px 떠오르는데,
   가로 스크롤 줄(overflow-y:hidden)이 그 윗부분을 잘랐다. 스크롤 줄 안의 칩·버튼은 떠오르지 않게 하고 위쪽에 여유를 둔다. */
@media(max-width:600px){
    .content :is(.wds-chip-group,.m-scroll-row,.news-kind,#fanzone-tabs){padding-top:3px;}
}
@media(hover:none){
    :is(.wds-chip-group,.m-scroll-row,.news-kind,#fanzone-tabs) :is(.wds-chip,.wds-btn,.wds-segmented__item):hover{transform:none;box-shadow:none;}
}

/* 폰 설정 휴대폰 푸시 줄 — 토글·테스트 발송을 글자 아래로(2026-10-30 운영자 "테스트 발송이랑 저 토글은 글자 밑으로 내려버려") */
html.is-phone #push-card{flex-wrap:wrap;align-items:flex-start;}
html.is-phone #push-card .set-row__body{flex:1 1 calc(100% - 64px);}
html.is-phone #push-card .set-row__ctl{flex-basis:100%;display:flex;align-items:center;gap:var(--sp-10);padding-left:calc(36px + var(--sp-14));}
html.is-phone #push-card #push-toggle{order:-1;}

/* 폰 "더보기" 서랍 — 아래 탭 바에 있는 메인·소식·일정·VOD는 빼고 나머지 메뉴만(2026-10-30 운영자 결정) */
html.is-phone .sidebar .nav-btn:is([onclick="go('main')"],[onclick="go('news')"],[onclick="go('schedule')"],[onclick="go('vod')"]){display:none;}
/* 서랍: 위 묶음(굿즈·정보·알림·건의사항) 바로 아래 빈 공간, 맨 아래에 관리자 → 설정(2026-10-30 운영자) */
html.is-phone .sidebar .nav-bottom{margin-top:auto;}
/* 2026-10-30 운영자 "왜 또 길이가 들쭉날쭉" — 줄은 늘였지만(위 stretch) 카드를 감싼 <a>만 늘고 안의 카드는 제 높이였다(제목 한 줄 카드가 짧았다).
   카드가 <a>를 꽉 채우고, 메타 줄은 카드 아래쪽에 붙는다(카드 본문은 이미 space-between) */

.notif-picks__row{grid-template-columns:repeat(2,minmax(0,1fr));}
.notif-pick--wide{grid-column:span 2;}
.nm-table{max-width:none;}
.nm-row{grid-template-columns:minmax(0,1fr) 44px repeat(6,38px);}