@charset "utf-8";
/* =====================================================================
   B-SIDE · 폰 앱 느낌 (v25) — 싱크 게시판 스킨(ipno_sync_xedition)과 한 몸처럼
   ─ 층 순서(z-index) 약속 ─────────────────────────────────────────────
     레이아웃이 화면에 띄우는 것은 모두 9000 아래
       960  하단 탭바        980  알림 독         990  페이지 관리 독
      1000  고정 헤더       8700  메뉴 타일 시트   8800  로그인 팝업
     스킨: 크게 모드 9990 · 팝업/알림 9995~9997
   ===================================================================== */

/* ---------- 글꼴: 큰 제목용 Inter Display ExtraBold (영문·숫자만 26KB) ---------- */
@font-face {
    font-family: "BS Display";
    src: url("../fonts/BSDisplay-latin.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+00B7, U+2190-2193, U+25CF, U+2122;
}
:root {
    --bs-f-display: "BS Display", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --bs-tabbar-h: 0px;          /* 탭바가 실제로 떠 있을 때만 60px (스킨 시트가 이 값으로 위치 계산) */
    color-scheme: dark;
}
@media all and (max-width: 767px) {
    html.has-bs-tabbar { --bs-tabbar-h: 60px; }
    /* 키보드가 올라왔거나 스킨 크게 모드면 탭바가 없으니 0 → 스킨 시트가 바닥까지 내려옴 */
    html.has-bs-tabbar.bs-kb,
    html.has-bs-tabbar.ips-lock { --bs-tabbar-h: 0px; }
}
.bs-title,
.visual.sub .sub_title h1,
.logo-item .wm,
.bs-strip-txt > b,
.bs-sheet-head > b,
.bs-intro-word {
    font-family: var(--bs-f-display);
    letter-spacing: -0.03em;
}
.bs-eyebrow,
.visual.sub .sub_title:before,
.bs-tab-badge,
.bs-tile-new,
.bs-strip-chips b,
.bs-foot-cr {
    font-family: var(--bs-f-mono);
}

/* ---------- 층 순서 정리 ---------- */
.login_widget { z-index: 8800 !important; }
#nc_container { z-index: 980; }

/* =====================================================================
   P1-1  스킨 '크게(⛶)' 모드 → 레이아웃은 비켜 주기
   (폰을 가로로 돌려 스킨이 자동으로 크게 모드가 될 때도 같은 규칙)
   ===================================================================== */
html.ips-lock .header_wrap,
html.ips-lock .content > .btnArea:has(> .btn-group),
html.ips-lock #nc_container,
html.ips-lock .btn_top,
html.ips-lock .bs-tabbar,
html.ips-lock .bs-sheet,
html.ips-lock .bs-play,
html.ips-lock .bs-edit-exit,
html.ips-lock .bs-admin-close {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

/* =====================================================================
   P1-2  글보기(doc-view) · 폰/태블릿: 52px 슬림 헤더 + 스크롤 따라 숨김
   ===================================================================== */
.visual.sub .bs-np-doc { display: none; }
@media all and (max-width: 1023px) {
    .container.doc-view { padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; }
    .container.doc-view .header_wrap,
    .container.doc-view .header_wrap.shrink {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: block !important;
        height: auto;
        padding-top: env(safe-area-inset-top, 0px);
        border-bottom: 1px solid var(--bs-line);
        background: rgba(17, 17, 34, .86);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        transform: translateY(0);
        transition: transform .2s ease;
        animation: none;
    }
    html.bs-hdr-hidden .container.doc-view .header_wrap { transform: translateY(-100%); }
    .container.doc-view .header { height: 52px; }
    .container.doc-view .header > h1 { line-height: 52px !important; }
    .container.doc-view .header > .logo-item a { font-size: 20px; }
    .container.doc-view .gnb #mobile_menu_btn,
    .container.doc-view .gnb .menu_btn { top: 8px; }
}
/* 폰: NOW PLAYING → 한 줄 미니 바 (● + 글 제목) · 플레이어를 위로 바짝 */
@media all and (max-width: 640px) {
    html body .container.doc-view .visual.sub {
        display: flex;
        align-items: center;
        height: 32px;
        min-height: 0;
        padding: 0 max(16px, env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box;
        overflow: hidden;
    }
    html body .container.doc-view .visual.sub .sub_title {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    html body .container.doc-view .visual.sub .sub_title:before {
        flex: none;
        margin: 0;
        font-size: 9px;
    }
    html body .container.doc-view .visual.sub .sub_title h1 {
        min-width: 0;
        overflow: hidden;
        font-size: 13px !important;
        font-weight: 700;
        line-height: 32px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html body .container.doc-view .visual.sub .sub_title.has-doc h1 { display: none; }
    html body .container.doc-view .visual.sub .bs-np-doc {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 32px;
        color: var(--bs-tx);
    }
    .bs-np-doc > i {
        flex: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bs-acc);
        box-shadow: 0 0 10px var(--bs-acc);
    }
    .bs-np-doc > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    /* NOW PLAYING 라벨은 점 하나로 줄임 (제목이 주인공) */
    html body .container.doc-view .visual.sub .sub_title.has-doc:before { display: none; }

    html body .container.doc-view .body .content,
    html body .container.doc-view .body.fixed-width.left .content,
    html body .container.doc-view .body.fixed-width.right .content,
    html body .container.doc-view .body.fixed-width .content.no-lnb { padding-top: 12px !important; }
}

/* =====================================================================
   P2-4  폰 하단 탭바
   ===================================================================== */
.bs-tabbar { display: none; }
@media all and (max-width: 767px) {
    .bs-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 960;
        display: flex;
        align-items: stretch;
        box-sizing: border-box;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--bs-line-2);
        background: rgba(17, 17, 34, .8);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        transition: transform .22s ease, opacity .22s ease;
    }
    html.bs-kb .bs-tabbar,
    html.bs-sheet-open .bs-tabbar { transform: translateY(110%); opacity: 0; pointer-events: none; }
    .bs-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 2px 4px;
        color: var(--bs-tx-3);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    .bs-tab-ico {
        position: relative;
        font-size: 21px;
        line-height: 1;
        filter: grayscale(.7) opacity(.7);
        transition: filter .15s, transform .15s;
    }
    .bs-tab-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .bs-tab:active .bs-tab-ico { transform: scale(.9); }
    .bs-tab.is-on { color: #fff; }
    .bs-tab.is-on .bs-tab-ico { filter: none; }
    /* 지금 있는 탭: 인디고→스카이 그라데이션 점 */
    .bs-tab.is-on:before {
        position: absolute;
        top: 5px;
        left: 50%;
        width: 16px;
        height: 3px;
        margin-left: -8px;
        border-radius: 3px;
        background: var(--bs-grad);
        box-shadow: 0 0 10px rgba(var(--bs-acc-rgb, 129, 140, 248), .8);
        content: '';
    }
    .bs-tab-badge {
        position: absolute;
        top: -5px;
        left: 70%;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        box-sizing: border-box;
        border: 2px solid #111122;
        border-radius: 999px;
        background: var(--bs-rec);
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
        line-height: 12px;
        text-align: center;
        color: #fff;
    }
    /* 본문이 탭바에 가리지 않게 */
    html.has-bs-tabbar body { padding-bottom: calc(var(--bs-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    /* 탭바가 있으면: 알림 독은 🔔 탭이 대신 · 페이지 관리 독은 탭바 위로 */
    html.has-bs-tabbar #nc_container { display: none !important; }
    html.has-bs-tabbar .content > .btnArea:has(> .btn-group) { bottom: calc(var(--bs-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px) !important; }
    html.has-bs-tabbar .footer .f_cr_area .mobile-footer-member { display: none !important; }
}

/* =====================================================================
   P2-5  메뉴 → 아래에서 올라오는 큰 타일 시트 (폰 · 태블릿)
   ===================================================================== */
.bs-sheet { position: fixed; inset: 0; z-index: 8700; }
.bs-sheet[hidden] { display: none; }
.bs-sheet-dim {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 14, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}
.bs-sheet.is-open .bs-sheet-dim { opacity: 1; }
.bs-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    max-height: min(86svh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--bs-line-2);
    border-radius: 26px 26px 0 0;
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(var(--bs-acc-rgb, 129, 140, 248), .2), transparent 70%),
        #15152a;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, .5);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2, .9, .3, 1);
}
.bs-sheet.is-open .bs-sheet-panel { transform: translateY(0); }
.bs-sheet-grip {
    width: 42px;
    height: 5px;
    margin: 4px auto 12px;
    border-radius: 5px;
    background: var(--bs-line-2);
}
.bs-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.bs-sheet-head > b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}
.bs-sheet-av,
.bs-strip-av,
.bs-foot-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--bs-grad);
    font-family: var(--bs-f-display);
    font-weight: 800;
    color: #111122;
}
.bs-sheet-av { width: 38px; height: 38px; font-size: 17px; }
.bs-sheet-x {
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bs-line-2);
    border-radius: 50%;
    background: transparent;
    font-size: 16px;
    color: var(--bs-tx-2);
    cursor: pointer;
}
.bs-sheet-x:focus-visible { outline: 0; border-color: var(--bs-acc); box-shadow: 0 0 0 3px rgba(var(--bs-acc-rgb, 129, 140, 248), .3); }
.bs-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.bs-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 92px;
    box-sizing: border-box;
    padding: 14px 14px 13px;
    border: 1px solid var(--bs-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    color: var(--bs-tx) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, border-color .15s, background-color .15s;
}
.bs-tile:active { transform: scale(.97); }
.bs-tile:hover,
.bs-tile:focus-visible { outline: 0; border-color: rgba(var(--bs-acc-rgb, 129, 140, 248), .6); }
.bs-tile.is-on {
    border-color: var(--bs-acc);
    background: rgba(var(--bs-acc-rgb, 129, 140, 248), .14);
}
.bs-tile-ico { font-size: 28px; line-height: 1; }
.bs-tile-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-tile-txt small {
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--bs-tx-3);
}
.bs-tile-txt b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bs-tile-new {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bs-grad);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    color: #111122;
}
@media all and (min-width: 641px) and (max-width: 1023px) {
    .bs-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bs-sheet-panel { left: 50%; right: auto; width: min(720px, 100%); margin-left: max(-360px, -50%); }
}
@media all and (min-width: 1024px) {
    .bs-sheet { display: none !important; }
}
/* 시트가 열려 있을 때 뒤 화면 스크롤 막기 */
html.bs-sheet-open,
html.bs-sheet-open body { overflow: hidden; }

/* =====================================================================
   P2-7  게시판 목록 위 밴드 스트립 (폰 · 최대 96px) + 분류 탭 붙어 있기
   ===================================================================== */
.bs-strip { display: none; }
@media all and (max-width: 640px) {
    .bs-strip {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas: "av txt" "av chips";
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        box-sizing: border-box;
        max-height: 96px;
        margin: 6px 0 12px;
        padding: 12px 14px;
        overflow: hidden;
        border: 1px solid rgba(var(--bs-acc-rgb, 129, 140, 248), .35);
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(var(--bs-acc-rgb, 129, 140, 248), .2), rgba(56, 189, 248, .06)),
            var(--bs-surface);
    }
    .bs-strip-av { grid-area: av; width: 46px; height: 46px; font-size: 20px; }
    .bs-strip-txt { grid-area: txt; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
    .bs-strip-txt > b {
        min-width: 0;
        overflow: hidden;
        font-size: 18px;
        font-weight: 800;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #fff;
    }
    .bs-strip-txt > small { flex: none; max-width: 40%; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; color: var(--bs-tx-3); }
    .bs-strip-chips { grid-area: chips; display: flex; gap: 6px; min-width: 0; overflow: hidden; }
    .bs-strip-chips em {
        flex: none;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        font-size: 11.5px;
        font-style: normal;
        font-weight: 600;
        white-space: nowrap;
        color: var(--bs-tx-2);
    }
    .bs-strip-chips em b { margin-left: 2px; font-weight: 700; color: var(--bs-acc-2); }
    /* 스트립이 게시판 제목을 대신 → 위의 NOW PLAYING 띠는 숨김 */
    .container:has(.bs-strip) .visual.sub { display: none; }
    /* 분류 탭: 스크롤해도 화면 맨 위에 붙어 있기 */
    .body .content:has(.bs-strip) { overflow: visible !important; }
    .content .board .cTab {
        position: sticky;
        top: 0;
        z-index: 5;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        background: var(--bs-bg);
        box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .6);
    }
}

/* =====================================================================
   P2-8  폰 글씨
   ===================================================================== */
@media all and (max-width: 640px) {
    .body .content { font-size: 15px; line-height: 1.6; }
}

/* =====================================================================
   P3-10  녹음 중 (스킨이 html.ips-recording 을 붙임) → 빨간 점 깜빡
   ===================================================================== */
html.ips-recording .logo-item .wm-dot {
    background: var(--bs-rec) !important;
    box-shadow: 0 0 12px var(--bs-rec) !important;
    animation: bs-rec-blink 1s ease-in-out infinite !important;
}
html.ips-recording .bs-tab.is-rec-tab .bs-tab-ico:after {
    position: absolute;
    top: -3px;
    right: -6px;
    width: 9px;
    height: 9px;
    border: 2px solid #111122;
    border-radius: 50%;
    background: var(--bs-rec);
    animation: bs-rec-blink 1s ease-in-out infinite;
    content: '';
}
html.ips-recording .bs-tab.is-rec-tab .bs-tab-ico { filter: none; }
@keyframes bs-rec-blink {
    0%, 100% { opacity: 1 }
    50% { opacity: .2 }
}
@media (prefers-reduced-motion: reduce) {
    html.ips-recording .logo-item .wm-dot,
    html.ips-recording .bs-tab.is-rec-tab .bs-tab-ico:after { animation: none !important; }
}

/* =====================================================================
   P3-11  슬라이드 · 트레일러 (폰): 포스터 + ▶ 버튼 · 컷 문구 2줄
   ===================================================================== */
.bs-play {
    position: absolute;
    top: 14px;
    right: max(14px, env(safe-area-inset-right, 0px));
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--bs-line-2);
    border-radius: 999px;
    background: rgba(17, 17, 34, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: var(--bs-f-ko);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.bs-play i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bs-grad);
    -webkit-mask: radial-gradient(circle, #000 64%, transparent 66%);
    position: relative;
}
.bs-play i:after {
    position: absolute;
    top: 5px;
    left: 7px;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #111122;
    content: '';
}
.bs-play:focus-visible { outline: 0; border-color: var(--bs-acc); }
@media all and (max-width: 640px) {
    /* 각 줄(<br> 사이)은 한 줄로, 전체는 2줄 이내 */
    .bs-title,
    .swiper-container h1,
    .bs-trailer .bs-title {
        font-size: clamp(21px, 6.3vw, 28px) !important;
        line-height: 1.22;
        word-break: keep-all;
    }
    .bs-desc,
    .swiper-container p:not(.bs-eyebrow),
    .bs-trailer .bs-desc {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13.5px !important;
        line-height: 1.5;
        word-break: keep-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* =====================================================================
   P3-12  폰 미니 푸터: 밴드 로고 + 한 줄 저작권 (80px 이하)
   ===================================================================== */
.bs-foot-mini { display: none; }
@media all and (max-width: 640px) {
    .footer .f_info_area,
    .footer .f_cr_area .copyright { display: none !important; }
    .footer .f_cr_area { padding: 0 !important; border: 0 !important; }
    .bs-foot-mini {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
        max-height: 80px;
        padding: 18px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--bs-line);
    }
    .bs-foot-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--bs-tx) !important;
        text-decoration: none !important;
    }
    .bs-foot-av { width: 24px; height: 24px; font-size: 11px; }
    .bs-foot-cr {
        flex: none;
        font-size: 10px;
        letter-spacing: .02em;
        color: var(--bs-tx-3);
        white-space: nowrap;
    }
}

/* 폰: 슬라이드 좌우 화살표는 숨김 (아래 점 · 밀기로 넘김) */
@media all and (max-width: 640px) {
    .swiper-container .swiper-button { display: none !important; }
}
.bs-tile-new { font-family: var(--bs-f-ko); }