* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #0f0a15 0%, #1a0f2e 50%, #0f0a15 100%);
            color: #f0f0f0;
            overflow-x: hidden;
        }

        /* ===============================
           컬러 시스템 (12색)
        =============================== */
        :root {
            --page-side-pad: 20px;
            --page-max-width: 960px;
            --home-max-width: 420px;
            --main-header-height: 70px;
            --sub-page-bar-height: 52px;
            --subpage-body-gap: 18px;
            --nana-shell-community-max: 1240px;
            --nana-shell-write-max: 1040px;
            --nana-shell-detail-max: 1080px;
            --nana-main-purple: #a855f7;
            --nana-light-purple: #d946ef;
            --nana-pink: #ec4899;
            --nana-magenta: #d60f5f;
            --nana-blue: #3b82f6;
            --nana-sky: #0ea5e9;
            --nana-cyan: #06b6d4;
            --nana-teal: #14b8a6;
            --nana-green: #10b981;
            --nana-lime: #84cc16;
            --nana-yellow: #facc15;
            --nana-orange: #f97316;
            --nana-red: #ef4444;
            --nana-navy: #1e3a8a;
            --viewport-height: 100vh;
            --app-chrome-below-nav: calc(var(--viewport-height) - var(--main-header-height, 70px));
            --subpage-scroll-pad-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        }

        @supports (height: 100dvh) {
            :root {
                --viewport-height: 100dvh;
            }
        }

        /* ===============================
           네비게이션 (좌: 햄버거+브랜드 / 우: 인증)
        =============================== */
        nav.nav-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            width: 100%;
            background: rgba(15, 10, 21, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.2);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 var(--page-side-pad);
            box-sizing: border-box;
            overflow: visible;
            z-index: 1001;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .nav-bar__left {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex: 1 1 auto;
            min-width: 0;
            gap: 0;
        }

        .nav-bar__right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 0 0 auto;
            min-width: 0;
        }

        .hamburger {
            width: 44px;
            height: 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: none;
            background: none;
            margin-right: 10px;
            z-index: 1101;
            padding: 0;
            transition: background 0.18s;
        }

        .hamburger:focus {
            outline: 2px solid var(--nana-main-purple);
        }

        .hamburger-bar {
            width: 28px;
            height: 3.5px;
            background: var(--nana-main-purple);
            border-radius: 2px;
            margin-bottom: 5px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
            transition: all 0.3s cubic-bezier(.4, 2, .5, 1);
        }

        .hamburger-bar:last-child {
            margin-bottom: 0;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(135deg, #a855f7, #d946ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.3s ease;
            z-index: 1101;
        }

        .nav-logo:hover {
            transform: scale(1.05);
        }

        .nav-logo-text {
            letter-spacing: 1px;
        }

        .logo-na-pink {
            background: linear-gradient(90deg, #ec4899 0%, #d946ef 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            font-weight: inherit;
            letter-spacing: 0;
            filter:
                drop-shadow(0 0 6px #ec489975) drop-shadow(0 0 14px #ff8cfb3b);
            /* 네온 느낌 & 약간의 glow */
        }

        .logo-na-blue {
            background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            font-weight: inherit;
            letter-spacing: 0;
            filter:
                drop-shadow(0 0 6px #3b82f675) drop-shadow(0 0 14px #80e5fd38);
            /* 네온 느낌 & 약간의 glow */
            margin-left: -2px;
        }

        .nav-logo-text {
            display: flex;
            gap: 0;
            align-items: center;
        }


        /* Drawer & Overlay Styles (개선됨) */
        .drawer-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(25, 11, 42, 0.58);
            backdrop-filter: blur(2px);
            z-index: 1110;
            /* 오버레이가 드로어 아래가 되지 않도록 드로어보다 낮게 */
            transition: opacity 0.26s;
        }

        .drawer-overlay.active {
            display: block;
            opacity: 1;
        }

        .drawer {
            position: fixed;
            top: 0;
            left: 0;
            width: 260px;
            height: 100vh;
            max-height: 100vh;
            background: #171021;
            background: linear-gradient(140deg, #0f0a15 68%, #1a0f2e 100%);
            box-shadow: 2px 0 24px rgba(139, 92, 246, 0.12);
            z-index: 1120;
            /* 오버레이 위에 표시 */
            padding: 0;
            transform: translateX(-110%);
            transition: transform 0.36s cubic-bezier(.77, 0, .18, 1);
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            overflow: hidden;
            min-height: 0;
        }

        .drawer.active {
            transform: translateX(0);
        }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-shrink: 0;
            padding: 18px 14px 18px 22px;
            border-bottom: 1px solid rgba(139, 92, 246, 0.12);
        }

        .drawer-brand-title {
            flex: 1;
            min-width: 0;
            font-size: 19px;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.2;
            text-align: left;
            background: linear-gradient(135deg, #a855f7, #d946ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .drawer-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: var(--nana-main-purple);
            font-size: 28px;
            font-weight: 700;
            cursor: pointer;
            padding: 4px 6px;
            margin: 0;
            border-radius: 24px;
            line-height: 1;
            transition: background 0.16s, color 0.21s;
        }

        .drawer-close:hover,
        .drawer-close:focus {
            color: var(--nana-light-purple);
            background: rgba(168, 85, 247, 0.13);
            outline: none;
        }

        .drawer-menu {
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            align-content: flex-start;
            gap: 4px;
            margin: 0;
            padding: 14px 8px 24px 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            scrollbar-width: none;
        }

        .drawer-menu::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .drawer-link {
            font-size: 16px;
            font-weight: 500;
            color: #e2dbfd;
            padding: 0 24px 0 22px;
            min-height: 44px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            text-decoration: none;
            border: none;
            background: none;
            cursor: pointer;
            outline: none;
            transition: background 0.15s, color 0.20s;
            border-radius: 0 30px 30px 0;
            flex: 0 0 auto;
        }

        .drawer-link.active,
        .drawer-link:focus,
        .drawer-link:hover {
            color: var(--nana-main-purple);
            background: rgba(168, 85, 247, 0.13);
        }

        .drawer-submenu-block {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            flex: 0 0 auto;
        }

        .drawer-submenu-toggle {
            font-family: inherit;
            font-size: 16px;
            font-weight: 500;
            color: #e2dbfd;
            padding: 0 16px 0 22px;
            min-height: 44px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            text-align: left;
            border: none;
            background: none;
            cursor: pointer;
            outline: none;
            transition: background 0.15s, color 0.20s;
            border-radius: 0 30px 30px 0;
        }

        .drawer-submenu-toggle:hover,
        .drawer-submenu-toggle:focus {
            color: var(--nana-main-purple);
            background: rgba(168, 85, 247, 0.13);
        }

        .drawer-submenu-toggle-label {
            flex: 1;
            min-width: 0;
        }

        .drawer-submenu-chevron {
            flex-shrink: 0;
            font-size: 10px;
            line-height: 1;
            color: rgba(226, 219, 253, 0.55);
            transition: transform 0.22s ease, color 0.15s ease;
            transform: rotate(-90deg);
        }

        .drawer-submenu-block.is-open .drawer-submenu-chevron {
            transform: rotate(0deg);
            color: rgba(226, 219, 253, 0.75);
        }

        .drawer-submenu-toggle:hover .drawer-submenu-chevron,
        .drawer-submenu-toggle:focus .drawer-submenu-chevron {
            color: rgba(226, 219, 253, 0.85);
        }

        .drawer-submenu {
            display: none;
            flex-direction: column;
            gap: 2px;
            padding: 4px 0 6px 0;
            margin: 0;
        }

        .drawer-submenu-block.is-open .drawer-submenu {
            display: flex;
        }

        .drawer-sublink {
            font-size: 14px;
            font-weight: 500;
            color: rgba(226, 219, 253, 0.82);
            padding: 0 24px 0 36px;
            min-height: 40px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            text-decoration: none;
            border: none;
            background: none;
            cursor: pointer;
            outline: none;
            transition: background 0.15s, color 0.20s;
            border-radius: 0 30px 30px 0;
        }

        .drawer-sublink:hover,
        .drawer-sublink:focus {
            color: var(--nana-main-purple);
            background: rgba(168, 85, 247, 0.1);
        }

        /* 드로어 하단 계정 (비로그인: 로그인·회원가입 — 상단 nav와 별도 DOM) */
        .drawer-auth {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid rgba(139, 92, 246, 0.18);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        /* 드로어 준비중 안내 등 짧은 메시지 (fixed, 최소 스타일) */
        .nana-app-toast {
            position: fixed;
            left: 50%;
            bottom: 28px;
            transform: translateX(-50%);
            max-width: min(92vw, 360px);
            padding: 12px 18px;
            border-radius: 12px;
            background: rgba(30, 22, 45, 0.96);
            border: 1px solid rgba(168, 85, 247, 0.35);
            color: #ede9fe;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            z-index: 1200;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease;
        }

        .nana-app-toast.nana-app-toast--visible {
            opacity: 1;
        }

        .nana-app-toast.nana-app-toast--action.nana-app-toast--visible {
            pointer-events: auto;
            z-index: 1250;
        }

        .nana-app-toast.nana-app-toast--action {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 12px 14px;
            pointer-events: auto;
            bottom: 32px;
        }

        .nana-app-toast.nana-app-toast--action.nana-app-toast--visible {
            opacity: 1;
        }

        .nana-app-toast__text {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
            line-height: 1.35;
        }

        .nana-app-toast__action {
            flex: 0 0 auto;
            border: 1px solid rgba(168, 85, 247, 0.55);
            background: rgba(168, 85, 247, 0.22);
            color: #f5f3ff;
            font-size: 13px;
            font-weight: 700;
            border-radius: 999px;
            padding: 6px 12px;
            cursor: pointer;
            pointer-events: auto;
            position: relative;
            z-index: 1;
            touch-action: manipulation;
        }

        .nana-app-toast__action:hover,
        .nana-app-toast__action:focus-visible {
            background: rgba(168, 85, 247, 0.38);
        }

        /* 내정보 등 다줄 안내 (비차단 모달, drawer 유지) */
        .nana-info-modal {
            position: fixed;
            inset: 0;
            z-index: 1300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            box-sizing: border-box;
        }

        .nana-info-modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(10, 6, 20, 0.72);
            cursor: pointer;
        }

        .nana-info-modal__panel {
            position: relative;
            width: 100%;
            max-width: min(92vw, 380px);
            padding: 22px 20px 18px;
            border-radius: 16px;
            background: rgba(30, 22, 45, 0.98);
            border: 1px solid rgba(168, 85, 247, 0.45);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
            color: #ede9fe;
            pointer-events: auto;
        }

        .nana-info-modal__close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 10px;
            background: transparent;
            color: #c4b5fd;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
        }

        .nana-info-modal__close:hover,
        .nana-info-modal__close:focus {
            background: rgba(168, 85, 247, 0.15);
            color: #fff;
        }

        .nana-info-modal__title {
            margin: 0 36px 12px 0;
            font-size: 18px;
            font-weight: 700;
            color: #f5f3ff;
        }

        .nana-info-modal__body {
            margin: 0 0 18px;
            font-size: 14px;
            line-height: 1.55;
            color: #ddd6fe;
            max-height: min(55vh, 320px);
            overflow-y: auto;
        }

        .nana-info-modal__ok {
            width: 100%;
            padding: 11px 16px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            color: #faf5ff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .nana-info-modal__ok:hover,
        .nana-info-modal__ok:focus {
            filter: brightness(1.08);
        }

        .nana-confirm-modal__actions {
            display: flex;
            gap: 10px;
            margin-top: 4px;
        }

        .nana-confirm-modal__btn {
            flex: 1;
            padding: 11px 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            transition: filter 0.15s ease;
        }

        .nana-confirm-modal__btn:hover,
        .nana-confirm-modal__btn:focus {
            filter: brightness(1.08);
        }

        .nana-confirm-modal__btn--secondary {
            background: rgba(139, 92, 246, 0.12);
            color: #ddd6fe;
            border: 1px solid rgba(168, 85, 247, 0.45);
        }

        .nana-confirm-modal__btn--primary {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            color: #faf5ff;
        }

        .nana-confirm-modal__btn--danger {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            color: #fef2f2;
        }

        /* ===============================
           인증 폼 (로그인/회원가입)
        =============================== */
        .auth-form-container {
            max-width: 400px;
            margin: 40px auto 0 auto;
            padding: 0 20px;
        }

        .auth-form {
            background: rgba(39, 18, 84, 0.97);
            border-radius: 24px;
            padding: 32px 24px;
            box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .auth-form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .auth-label {
            font-size: 14px;
            font-weight: 600;
            color: #e2dbfd;
        }

        .auth-input {
            padding: 12px 16px;
            border: 2px solid rgba(168, 85, 247, 0.2);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            color: #f0f0f0;
            font-size: 16px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .auth-input:focus {
            border-color: var(--nana-main-purple);
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
        }

        .auth-input::placeholder {
            color: rgba(226, 219, 253, 0.5);
        }

        .auth-form-error {
            font-size: 13px;
            line-height: 1.45;
            color: #fca5a5;
            margin: 0;
            padding: 0 2px;
        }

        .auth-form-error[hidden] {
            display: none !important;
        }

        .auth-submit-btn {
            padding: 14px 20px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--nana-main-purple), var(--nana-light-purple));
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            transition: transform 0.1s, box-shadow 0.2s;
            margin-top: 8px;
        }

        .auth-submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
        }

        .auth-submit-btn:active {
            transform: translateY(0);
        }

        .auth-submit-btn:disabled {
            opacity: 0.72;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .auth-switch {
            text-align: center;
            margin-top: 16px;
        }

        .auth-switch p {
            font-size: 14px;
            color: rgba(226, 219, 253, 0.7);
            margin: 0;
        }

        .auth-link {
            color: var(--nana-main-purple);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
        }

        .auth-link:hover {
            color: var(--nana-light-purple);
        }

        /* ===============================
           네비게이션 인증 버튼
        =============================== */
        .nav-auth-buttons {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            white-space: nowrap;
            min-width: 0;
        }

        .nav-auth-btn {
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            outline: none;
            transition: all 0.2s ease;
            border: none;
            writing-mode: horizontal-tb;
            white-space: nowrap;
        }

        .nav-auth-btn--login {
            background: rgba(255, 255, 255, 0.05);
            color: #e2dbfd;
            border: 1px solid rgba(168, 85, 247, 0.3);
        }

        .nav-auth-btn--login:hover,
        .nav-auth-btn--login:focus {
            background: rgba(168, 85, 247, 0.1);
            color: var(--nana-main-purple);
            border-color: var(--nana-main-purple);
        }

        .nav-auth-btn--signup {
            background: linear-gradient(135deg, var(--nana-main-purple), var(--nana-light-purple));
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
        }

        .nav-auth-btn--signup:hover,
        .nav-auth-btn--signup:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
        }

        /* 드로어 등 상단 바 밖의 회원가입 버튼은 모바일 nav 숨김 규칙에서 제외 */
        .drawer .nav-auth-btn--signup,
        .drawer-menu .nav-auth-btn--signup,
        .drawer-content .nav-auth-btn--signup,
        .drawer-auth .nav-auth-btn--signup {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 510px) {
            .drawer {
                width: 80vw;
                min-width: 154px;
                max-width: 92vw;
            }

            .drawer-header {
                padding: 16px 12px 16px 18px;
            }

            .drawer-brand-title {
                font-size: 18px;
            }

            .hamburger {
                margin-right: 2px;
                width: 38px;
                height: 38px;
            }

            .nav-logo {
                font-size: 19px;
            }

            /* 좁은 화면: 회원가입만 숨김, 로그아웃 버튼은 표시 */
            .nav-bar__right .nav-auth-btn--signup[data-auth-action="signup"] {
                display: none;
            }

            .nav-bar__right .nav-auth-btn--signup[data-auth-action="logout"] {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .nav-bar__right .nav-auth-btn--login {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* nav-menu, nav-link, nav-chat-btn 제거됨 */

        /* ===============================
           메인 콘텐츠 · 앱 홈
        =============================== */
        main {
            margin-top: var(--main-header-height, 70px);
            min-height: var(--app-chrome-below-nav);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .content-view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: var(--app-chrome-below-nav);
            padding: 0;
            z-index: 10;
            background: linear-gradient(135deg, #20123a 68%, #271254 100%);
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        /*
         * 서브페이지(상세·글쓰기·영상 등): 바는 nav 아래 고정(sticky), 본문만 스크롤
         * — 부모 overflow:hidden 으로 iOS sticky 안정화
         */
        .content-view.content-view--subpage {
            height: var(--app-chrome-below-nav);
            max-height: var(--app-chrome-below-nav);
            min-height: var(--app-chrome-below-nav);
            overflow: hidden;
        }

        .content-view.content-view--subpage>.view-app-bar,
        .content-view.content-view--subpage>.post-detail-app-bar {
            position: sticky;
            top: 0;
            left: auto;
            right: auto;
            z-index: 50;
            flex-shrink: 0;
            width: 100%;
            height: var(--sub-page-bar-height, 52px);
            min-height: var(--sub-page-bar-height, 52px);
        }

        .content-view.content-view--subpage>.view-app-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding-top: var(--subpage-body-gap, 18px);
            padding-bottom: var(--subpage-scroll-pad-bottom);
        }

        .hidden {
            display: none !important;
        }

        /* 영상보기 — YouTube 큐레이션
           main에 margin-top(=nav 높이)이 이미 있어 콘텐츠 박스 top은 nav 아래에서 시작함.
           고정 view-app-bar는 top=nav와 맞닿으므로 본문은 (바 높이 52px) + (intro 전 간격)만 밀면 됨.
           → 70px/60px 를 한 번 더 넣지 않음(이전 intro 과다 하강 원인). */
        #videoView.content-view--subpage .view-app-body,
        #videoView.content-view--subpage .video-view-body {
            position: relative;
            margin-top: 0;
            padding-left: 16px;
            padding-right: 16px;
            padding-bottom: 28px;
            padding-top: var(--subpage-body-gap, 16px);
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            box-sizing: border-box;
        }

        #videoView .video-song-pick-wrap,
        #videoView .video-song-pick-grid {
            margin-top: 0;
            padding-top: 0;
        }

        #videoView .video-view-intro {
            margin: 0 0 20px;
            padding: 12px 14px;
            border-radius: 14px;
            font-size: 13px;
            line-height: 1.5;
            color: #c4b5fd;
            background: rgba(88, 28, 135, 0.18);
            border: 1px solid rgba(168, 85, 247, 0.22);
            border-top: none;
            letter-spacing: -0.02em;
        }

        #videoView .video-view-intro strong {
            color: #ede9fe;
            font-weight: 700;
        }

        #videoView .video-featured-today {
            margin: 0 0 14px;
        }

        #videoView .video-featured-today[hidden] {
            display: none !important;
        }

        #videoView .video-featured-today-card {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(168, 85, 247, 0.28);
            background: linear-gradient(135deg, rgba(59, 20, 110, 0.42), rgba(30, 12, 58, 0.5));
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            color: inherit;
            box-sizing: border-box;
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

        #videoView .video-featured-today-card:hover,
        #videoView .video-featured-today-card:focus-visible {
            border-color: rgba(192, 132, 252, 0.55);
            background: linear-gradient(135deg, rgba(76, 29, 149, 0.48), rgba(36, 14, 72, 0.55));
            outline: none;
        }

        #videoView .video-featured-today-kicker {
            margin: 0;
            font-size: 13px;
            font-weight: 700;
            color: #ede9fe;
            letter-spacing: -0.02em;
        }

        #videoView .video-featured-today-sub {
            margin: 4px 0 0;
            font-size: 12px;
            line-height: 1.45;
            color: rgba(196, 181, 253, 0.82);
        }

        #videoView .video-featured-today-body {
            display: flex;
            gap: 12px;
            align-items: center;
            min-width: 0;
        }

        #videoView .video-featured-today-thumb-wrap {
            position: relative;
            flex: 0 0 auto;
            width: 104px;
            max-width: 34%;
            aspect-ratio: 16 / 9;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(15, 6, 32, 0.65);
            border: 1px solid rgba(139, 92, 246, 0.22);
        }

        #videoView .video-featured-today-thumb {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #videoView .video-featured-today-meta {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        #videoView .video-featured-today-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
            color: #f5f3ff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #videoView .video-featured-today-author {
            margin: 0;
            font-size: 12px;
            color: rgba(196, 181, 253, 0.78);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #videoView .video-featured-today-cat {
            align-self: flex-start;
            margin-top: 2px;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #ddd6fe;
            background: rgba(88, 28, 135, 0.45);
            border: 1px solid rgba(168, 85, 247, 0.28);
        }

        @media (max-width: 480px) {
            #videoView .video-featured-today-thumb-wrap {
                width: 88px;
            }

            #videoView .video-featured-today-title {
                font-size: 13px;
            }
        }

        @media (min-width: 481px) {
            #videoView .video-featured-today {
                margin: 0 0 12px;
            }

            #videoView .video-featured-today-card {
                gap: 7px;
                padding: 10px 13px;
                border-color: rgba(168, 85, 247, 0.24);
                background: linear-gradient(135deg, rgba(52, 18, 98, 0.36), rgba(26, 10, 50, 0.44));
            }

            #videoView .video-featured-today-card:hover,
            #videoView .video-featured-today-card:focus-visible {
                border-color: rgba(216, 180, 254, 0.68);
                background: linear-gradient(135deg, rgba(72, 28, 140, 0.5), rgba(34, 14, 68, 0.56));
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(46, 16, 86, 0.32);
            }

            #videoView .video-featured-today-copy {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            #videoView .video-featured-today-sub {
                margin: 0;
                line-height: 1.4;
            }

            #videoView .video-featured-today-body {
                gap: 10px;
            }

            #videoView .video-featured-today-thumb-wrap {
                width: 96px;
                max-width: 30%;
                border-radius: 8px;
            }

            #videoView .video-featured-today-meta {
                gap: 3px;
            }

            #videoView .video-featured-today-author {
                color: rgba(196, 181, 253, 0.62);
            }
        }

        #videoView .video-source-tab-scroll {
            width: 100%;
            margin: 0 0 12px;
        }

        #videoView .video-source-tab-rail {
            display: flex;
            gap: 8px;
            width: 100%;
        }

        #videoView .video-source-tab {
            flex: 1 1 0;
            min-height: 44px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid rgba(168, 148, 220, 0.35);
            background: rgba(22, 14, 42, 0.58);
            color: rgba(230, 220, 255, 0.88);
            font-family: inherit;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoView .video-source-tab:hover,
        #videoView .video-source-tab:focus-visible {
            outline: none;
            border-color: rgba(192, 170, 245, 0.48);
            color: #faf5ff;
        }

        #videoView .video-source-tab.is-active {
            border-color: transparent;
            color: #0f0818;
            background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 40%, #a855f7 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 4px 16px rgba(88, 28, 135, 0.38);
        }

        #videoView .video-source-tab[data-video-source='soundcloud'].is-active {
            color: #1c1208;
            background: linear-gradient(135deg, #fde68a 0%, #fbbf24 42%, #d97706 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 4px 16px rgba(120, 53, 15, 0.28);
        }

        #videoView .video-song-pick-wrap--soundcloud .video-song-pick-grid {
            grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
            gap: 28px;
        }

        #videoView .video-song-pick-wrap--soundcloud .video-main-preview-inner {
            aspect-ratio: auto;
            min-height: 0;
            max-height: none;
        }

        #videoView .video-song-pick-wrap--soundcloud .video-main-preview-inner iframe,
        #videoView .video-sc-browse-player-iframe {
            position: relative;
            display: block;
            width: 100%;
            height: 152px;
            max-height: 168px;
            border: none;
            border-radius: 12px;
        }

        #videoView .video-main-panel--soundcloud-browse {
            cursor: default;
        }

        #videoView .video-main-panel--soundcloud-browse:hover {
            transform: none;
        }

        #videoView .video-main-panel--soundcloud-browse:focus-visible {
            box-shadow: none;
        }

        #videoView .video-main-panel--soundcloud-browse .video-main-title {
            cursor: pointer;
        }

        #videoView .video-main-panel--soundcloud-browse .video-main-title:hover,
        #videoView .video-main-panel--soundcloud-browse .video-main-title:focus-visible {
            color: #faf5ff;
            text-decoration: underline;
            text-decoration-color: rgba(216, 180, 254, 0.5);
            text-underline-offset: 4px;
            outline: none;
        }

        #videoView .video-main-panel--soundcloud-browse .video-main-preview-inner,
        #videoView .video-main-panel--soundcloud-browse .video-main-glow-frame {
            cursor: default;
        }

        #videoView .video-song-pick-wrap--soundcloud .video-wheel-stage {
            --video-wheel-slot: 118px;
            height: min(520px, 58vh);
            max-height: 58vh;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
        }

        #videoView .video-sc-track-rail {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0;
            min-height: 0;
        }

        #videoView .video-sc-track-item {
            flex: 0 0 auto;
            scroll-snap-align: center;
            scroll-snap-stop: normal;
            contain: layout style;
            display: grid;
            grid-template-columns: 112px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            width: 100%;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(139, 92, 246, 0.18);
            background: rgba(30, 16, 52, 0.5);
            cursor: default;
            text-align: left;
            font: inherit;
            color: inherit;
            opacity: 0.86;
            transition:
                border-color 0.22s ease,
                background 0.22s ease,
                opacity 0.22s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoView .video-sc-track-item.is-active {
            opacity: 1;
            border-color: rgba(192, 132, 252, 0.34);
            background: rgba(46, 20, 82, 0.68);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        }

        #videoView .video-sc-track-item__thumb {
            display: block;
            border-radius: 10px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
        }

        #videoView .video-sc-track-item__thumb .video-sc-preview--track {
            border-radius: 10px;
            min-height: 64px;
        }

        #videoView .video-sc-track-item__thumb .video-sc-preview--track .video-sc-preview__icon {
            font-size: 22px;
        }

        #videoView .video-sc-track-item__body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        #videoView .video-sc-track-item__title {
            display: -webkit-box;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            font: inherit;
            text-align: left;
            font-size: 15px;
            font-weight: 700;
            color: #f5f3ff;
            line-height: 1.35;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }

        #videoView .video-sc-track-item__title:hover,
        #videoView .video-sc-track-item__title:focus-visible {
            color: #faf5ff;
            text-decoration: underline;
            text-decoration-color: rgba(216, 180, 254, 0.5);
            text-underline-offset: 3px;
            outline: none;
        }

        #videoView .video-sc-track-item__meta {
            font-size: 12px;
            color: rgba(196, 181, 253, 0.72);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 768px) {
            #videoView .video-song-pick-wrap--soundcloud .video-song-pick-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            #videoView .video-song-pick-wrap--soundcloud .video-wheel-stage {
                --video-wheel-slot: 108px;
                height: min(42vh, 340px);
                max-height: 42vh;
                overflow-y: auto;
                scroll-snap-type: y mandatory;
                overscroll-behavior-y: contain;
                touch-action: pan-y;
            }

            #videoView .video-song-pick-wrap--soundcloud .video-sc-track-rail {
                gap: 12px;
                padding-inline: 8px 4px;
            }

            #videoView .video-song-pick-wrap--soundcloud .video-sc-track-item {
                grid-template-columns: clamp(96px, 32%, 120px) minmax(0, 1fr);
                padding: 10px 8px;
                border-radius: 12px;
                border: 1px solid rgba(120, 80, 200, 0.14);
                background: rgba(30, 16, 52, 0.42);
                scroll-snap-align: center;
            }

            #videoView .video-song-pick-wrap--soundcloud .video-sc-track-item.is-active {
                background: rgba(46, 20, 82, 0.58);
                border-color: rgba(192, 132, 252, 0.3);
                box-shadow: none;
            }
        }

        @media (min-width: 1024px) {
            #videoView .video-song-pick-wrap--soundcloud .video-song-pick-grid {
                grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
                gap: 32px;
            }

            #videoView .video-song-pick-wrap--soundcloud .video-wheel-stage {
                height: min(560px, 60vh);
                max-height: 60vh;
            }
        }

        /* 영상 유형 필터 (글쓰기 pill과 유사 톤, 모바일 가로 스크롤) */
        #videoView .video-type-filter-scroll {
            width: 100%;
            max-width: 100%;
            margin: 0 0 14px;
            padding: 0 0 2px;
            box-sizing: border-box;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        #videoView .video-type-filter-rail {
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 10px;
            padding: 4px 2px 6px;
            min-width: min-content;
            box-sizing: border-box;
        }

        #videoView .video-type-tab {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 16px;
            border-radius: 999px;
            border: 1px solid rgba(168, 148, 220, 0.38);
            background: rgba(22, 14, 42, 0.58);
            color: rgba(230, 220, 255, 0.9);
            font-family: inherit;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.25;
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            transition:
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoView .video-type-tab:hover,
        #videoView .video-type-tab:focus-visible {
            outline: none;
            background: rgba(36, 24, 62, 0.78);
            border-color: rgba(192, 170, 245, 0.48);
            color: #faf5ff;
        }

        #videoView .video-type-tab:active {
            transform: scale(0.985);
        }

        #videoView .video-type-tab.is-active {
            border-color: transparent;
            color: #0f0818;
            background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 38%, #a855f7 72%, #7c3aed 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 6px 22px rgba(88, 28, 135, 0.45);
        }

        /* 좌측 메인 미리보기 + 우측 음악 셀렉터형 세로 휠 (플레이리스트 탐색 느낌) */
        #videoView .video-song-pick-wrap {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
        }

        #videoView .video-song-pick-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
            gap: 32px;
            align-items: start;
            width: 100%;
        }

        /* 좌측 프리뷰 glow는 우측 셀렉터보다 아래 레이어에 두어 테두리가 덮이지 않게 */
        #videoView .video-main-column {
            position: relative;
            z-index: 0;
            min-width: 0;
        }

        #videoView .video-main-panel-stack {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }

        /* 선택 트랙 주변 은은한 앰비언트 글로우 */
        #videoView .video-main-column::before {
            content: '';
            position: absolute;
            left: 50%;
            top: min(180px, 28%);
            width: min(100%, 420px);
            height: min(320px, 55vw);
            transform: translate(-50%, -42%);
            background: radial-gradient(ellipse 70% 60% at 50% 50%,
                    rgba(139, 92, 246, 0.14) 0%,
                    rgba(219, 39, 119, 0.07) 45%,
                    transparent 72%);
            pointer-events: none;
            z-index: 0;
            filter: blur(2px);
        }

        #videoView .video-main-panel {
            text-align: left;
            cursor: pointer;
            border-radius: 20px;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
            font: inherit;
            color: inherit;
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
            position: relative;
            z-index: 1;
            transition: transform 0.35s cubic-bezier(0.25, 0.82, 0.25, 1);
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        /* 곡 교체 시 메인 프리뷰·메타 페이드 (리스트 선택과 리듬감 연동) */
        #videoView .video-main-content-sync {
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition:
                opacity 0.34s ease,
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        }

        #videoView .video-main-content-sync.is-browse-dim {
            opacity: 0;
            transform: translateY(8px);
            pointer-events: none;
            will-change: opacity, transform;
        }

        #videoView .video-main-panel:hover {
            transform: translateY(-1px);
        }

        #videoView .video-main-panel:focus-visible {
            box-shadow:
                0 0 0 2px rgba(24, 14, 40, 0.95),
                0 0 0 5px rgba(167, 139, 250, 0.6);
            border-radius: 22px;
        }

        #videoView .video-main-glow-frame {
            position: relative;
            z-index: 0;
            border-radius: 18px;
            padding: 3px;
            background: linear-gradient(135deg,
                    rgba(167, 139, 250, 0.55),
                    rgba(91, 33, 182, 0.35),
                    rgba(236, 72, 153, 0.2));
            box-shadow:
                0 0 52px rgba(139, 92, 246, 0.32),
                0 22px 60px rgba(0, 0, 0, 0.45);
            transition:
                box-shadow 0.42s cubic-bezier(0.25, 0.82, 0.25, 1),
                filter 0.42s cubic-bezier(0.25, 0.82, 0.25, 1);
        }

        #videoView .video-main-panel.is-selected .video-main-glow-frame {
            box-shadow:
                0 0 56px rgba(167, 139, 250, 0.28),
                0 0 80px rgba(236, 72, 153, 0.1),
                0 24px 72px rgba(0, 0, 0, 0.5);
            filter: saturate(1.05);
        }

        #videoView .video-main-preview-inner {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            background: radial-gradient(circle at 40% 20%, rgba(88, 28, 135, 0.45), #0f081f);
            min-height: 160px;
            contain: layout style paint;
        }

        #videoView .video-main-preview-inner iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            contain: strict;
        }

        #videoView .video-sc-browse-player-iframe {
            contain: strict;
        }

        #videoView .video-main-preview-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #videoView .video-main-preview-thumb--placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: rgba(196, 181, 253, 0.35);
        }

        .video-sc-preview {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-sizing: border-box;
            background: linear-gradient(145deg,
                    rgba(59, 20, 110, 0.72) 0%,
                    rgba(46, 16, 86, 0.82) 48%,
                    rgba(55, 32, 18, 0.55) 100%);
            border: 1px solid rgba(168, 85, 247, 0.22);
            color: rgba(237, 233, 254, 0.92);
            user-select: none;
            pointer-events: none;
        }

        .video-sc-preview__icon {
            font-size: 28px;
            line-height: 1;
            filter: saturate(0.9);
        }

        .video-sc-preview__label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(253, 230, 138, 0.82);
        }

        #videoView .video-main-preview-inner .video-sc-preview--main {
            position: absolute;
            inset: 0;
            border-radius: 15px;
        }

        #videoView .video-main-preview-inner .video-sc-preview--main .video-sc-preview__icon {
            font-size: 40px;
        }

        #videoView .video-main-preview-inner .video-sc-preview--main .video-sc-preview__label {
            font-size: 12px;
        }

        #videoView .video-wheel-item .video-sc-preview--wheel {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: center;
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }

        #videoView .video-wheel-item .video-sc-preview--wheel .video-sc-preview__icon {
            font-size: 22px;
        }

        #videoView .video-wheel-item .video-sc-preview--wheel .video-sc-preview__label {
            font-size: 9px;
        }

        #videoView .video-featured-today-thumb-wrap .video-sc-preview--featured {
            position: absolute;
            inset: 0;
            border-radius: 10px;
        }

        #videoView .video-featured-today-thumb-wrap .video-sc-preview--featured .video-sc-preview__icon {
            font-size: 20px;
        }

        #videoView .video-featured-today-thumb[hidden] {
            display: none !important;
        }

        #videoDetailView .video-detail-player-wrap--soundcloud {
            aspect-ratio: auto;
            max-height: none;
        }

        #videoDetailView .video-detail-player-inner--soundcloud {
            aspect-ratio: auto;
            max-height: 168px;
            min-height: 152px;
            height: 152px;
            background: linear-gradient(160deg,
                    rgba(46, 16, 86, 0.5),
                    rgba(30, 12, 58, 0.65));
        }

        #videoDetailView .video-detail-player-mount--soundcloud {
            position: relative;
            inset: auto;
            width: 100%;
            height: 152px;
            max-height: 168px;
        }

        #videoDetailView .video-detail-player-mount--soundcloud iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        #videoView .video-main-title {
            margin: 4px 0 0;
            font-size: 20px;
            font-weight: 800;
            color: #faf5ff;
            letter-spacing: -0.04em;
            line-height: 1.3;
            text-align: left;
        }

        #videoView .video-main-author {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #c4b5fd;
            text-align: left;
            opacity: 0.92;
        }

        #videoView .video-main-meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
        }

        #videoView .video-main-cat {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 999px;
            color: rgba(237, 233, 254, 0.95);
            background: rgba(91, 33, 182, 0.4);
            border: 1px solid rgba(192, 181, 255, 0.35);
        }

        #videoView .video-main-stat {
            font-size: 13px;
            color: #a78bfa;
            font-weight: 600;
        }

        #videoView .video-main-hint {
            margin: -4px 0 0;
            font-size: 12px;
            color: rgba(167, 139, 250, 0.75);
            text-align: left;
        }

        /* 우측 셀렉터: 별도 stacking context으로 메인 프리뷰 박스 섀도우 위에 올림 */
        #videoView .video-wheel-column {
            width: 100%;
            min-width: 280px;
            max-width: 320px;
            position: relative;
            z-index: 20;
            isolation: isolate;
        }

        #videoView .video-wheel-stage {
            --video-wheel-slot: 158px;
            height: min(520px, 58vh);
            max-height: 58vh;
            overflow-y: auto;
            overflow-x: hidden;
            scroll-snap-type: y mandatory;
            overscroll-behavior-y: contain;
            scroll-behavior: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;
            outline: none;
        }

        /* 스크롤 중 카드 transition·메인 glow 비용 억제 */
        #videoView .video-song-pick-wrap.is-wheel-scrolling .video-wheel-item,
        #videoView .video-song-pick-wrap.is-wheel-scrolling .video-sc-track-item {
            transition: none !important;
        }

        #videoView .video-song-pick-wrap.is-wheel-scrolling .video-main-glow-frame,
        #videoView .video-song-pick-wrap.is-wheel-scrolling .video-main-content-sync {
            transition: none;
        }

        #videoView .video-song-pick-wrap.is-wheel-scrolling .video-wheel-thumb {
            transition: none;
        }

        #videoView .video-wheel-stage::-webkit-scrollbar {
            display: none;
        }

        #videoView .video-wheel-rail {
            display: flex;
            flex-direction: column;
            gap: 18px;
            box-sizing: border-box;
            min-height: calc(100% + 48px);
            /* active glow·lift가 스테이지에 잘리지 않도록 좌우 여유 */
            padding-inline: 20px 14px;
        }

        #videoView .video-wheel-item {
            flex: 0 0 auto;
            scroll-snap-align: center;
            scroll-snap-stop: normal;
            position: relative;
            z-index: 1;
            contain: layout style;
            display: grid;
            grid-template-columns: clamp(170px, 38%, 260px) minmax(0, 1fr);
            grid-template-rows: auto;
            align-items: center;
            gap: 20px 24px;
            min-height: max(var(--video-wheel-slot), 148px);
            padding: 12px 14px;
            margin: 0;
            border-radius: 20px;
            border: 1px solid rgba(120, 80, 200, 0.16);
            background: rgba(22, 12, 38, 0.82);
            cursor: pointer;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            opacity: 0.82;
            transform: scale(0.965);
            transform-origin: calc(50% + 18px) 50%;
            filter: saturate(0.92);
            transition:
                transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.26s ease,
                border-color 0.26s ease,
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.26s ease;
            -webkit-tap-highlight-color: transparent;
            font: inherit;
            color: inherit;
        }

        /* 비선택: 미디어 플랫폼형 카드 — 살짝만 작게 */
        #videoView .video-wheel-item:not(.is-active):hover {
            opacity: 0.92;
            transform: scale(0.972) translateY(-2px);
            border-color: rgba(167, 139, 250, 0.38);
            background: rgba(30, 18, 52, 0.88);
            filter: saturate(0.98);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        }

        #videoView .video-wheel-item:not(.is-active):focus-visible {
            outline: none;
            opacity: 0.94;
            border-color: rgba(167, 139, 250, 0.45);
            box-shadow:
                0 0 0 2px rgba(139, 92, 246, 0.22),
                0 8px 24px rgba(0, 0, 0, 0.22);
        }

        #videoView .video-wheel-item.is-active {
            opacity: 1;
            transform: scale(1.02) translateX(-4px);
            filter: saturate(1.02);
            border-color: rgba(196, 181, 255, 0.52);
            background: linear-gradient(155deg,
                    rgba(48, 28, 82, 0.95) 0%,
                    rgba(32, 20, 58, 0.96) 55%,
                    rgba(26, 14, 46, 0.98) 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 10px 28px rgba(0, 0, 0, 0.34),
                0 0 20px rgba(139, 92, 246, 0.2);
            z-index: 30;
        }

        #videoView .video-wheel-thumb {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: center;
            width: 100%;
            max-width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            object-fit: cover;
            background: #1a1028;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }

        #videoView .video-wheel-item:not(.is-active):hover .video-wheel-thumb {
            transform: scale(1.02);
        }

        #videoView .video-wheel-item.is-active .video-wheel-thumb {
            box-shadow:
                0 6px 20px rgba(0, 0, 0, 0.42),
                0 0 20px rgba(167, 139, 250, 0.25);
        }

        #videoView span.video-wheel-thumb.video-wheel-thumb--placeholder {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            aspect-ratio: 16 / 9;
            min-height: 0;
            font-size: 22px;
            color: rgba(196, 181, 253, 0.35);
        }

        #videoView .video-wheel-text {
            grid-column: 2;
            grid-row: 1;
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            padding: 2px 0;
        }

        #videoView .video-wheel-title {
            font-size: 15px;
            font-weight: 700;
            color: #faf5ff;
            line-height: 1.5;
            letter-spacing: -0.02em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #videoView .video-wheel-sub {
            font-size: 13px;
            font-weight: 600;
            color: #bdb2ff;
            opacity: 0.95;
            line-height: 1.45;
            letter-spacing: -0.01em;
        }

        /* 데스크탑: 모바일 전용 카드 메타 숨김 */
        #videoView .video-wheel-mobile-more {
            display: none;
            grid-column: 2;
            grid-row: 2;
        }

        /*
         * 데스크탑 우측 셀렉터 / 상세 관련 영상: 슬림 큐레이션 패널 (가로형 compact)
         * — 메인과 경쟁하지 않게, 세로 한 글자 깨짐 방지(keep-all + min-width)
         */
        @media (min-width: 769px) {
            #videoView .video-wheel-column .video-wheel-stage {
                --video-wheel-slot: 0px;
                height: min(520px, 58vh);
                max-height: 58vh;
            }

            #videoView .video-wheel-column .video-wheel-rail {
                gap: 8px;
                padding-inline: 0;
                min-height: 0;
            }

            #videoView .video-wheel-column .video-wheel-item,
            #videoDetailView .video-detail-related .video-wheel-item,
            #videoDetailView .video-detail-related-card {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 8px;
                min-height: 0;
                min-width: 0;
                padding: 6px 8px;
                border-radius: 12px;
                transform: none;
                transform-origin: center center;
                opacity: 0.92;
                filter: none;
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
            }

            #videoView .video-wheel-column .video-wheel-item:not(.is-active):hover {
                opacity: 0.98;
                transform: translateY(-1px);
                filter: none;
                box-shadow:
                    0 6px 16px rgba(0, 0, 0, 0.22),
                    0 0 14px rgba(139, 92, 246, 0.14);
            }

            #videoView .video-wheel-column .video-wheel-item.is-active {
                opacity: 1;
                transform: translateX(-1px);
                filter: none;
                box-shadow:
                    0 0 0 1px rgba(196, 181, 255, 0.2) inset,
                    0 4px 18px rgba(0, 0, 0, 0.28),
                    0 0 16px rgba(139, 92, 246, 0.18);
            }

            #videoView .video-wheel-column .video-wheel-thumb,
            #videoView .video-wheel-column span.video-wheel-thumb.video-wheel-thumb--placeholder,
            #videoDetailView .video-detail-related .video-wheel-thumb,
            #videoDetailView .video-detail-related span.video-wheel-thumb.video-wheel-thumb--placeholder,
            #videoDetailView .video-detail-related-card .video-detail-related-thumb,
            #videoDetailView .video-detail-related-card .video-wheel-thumb {
                grid-column: unset;
                grid-row: unset;
                align-self: center;
                flex: 0 0 auto;
                width: clamp(140px, 36%, 170px);
                min-width: 140px;
                max-width: 170px;
                height: auto;
                aspect-ratio: 16 / 9;
                border-radius: 10px;
                min-height: 0;
            }

            #videoView .video-wheel-column span.video-wheel-thumb.video-wheel-thumb--placeholder,
            #videoDetailView .video-detail-related span.video-wheel-thumb.video-wheel-thumb--placeholder {
                font-size: 15px;
            }

            #videoView .video-wheel-column .video-wheel-text,
            #videoDetailView .video-detail-related .video-wheel-text,
            #videoDetailView .video-detail-related-card .video-detail-related-body {
                grid-column: unset;
                grid-row: unset;
                flex: 1 1 0;
                width: auto;
                min-width: 0;
                gap: 4px;
                padding: 0 2px 0 0;
                justify-content: center;
            }

            #videoView .video-wheel-column .video-wheel-title,
            #videoDetailView .video-detail-related .video-wheel-title,
            #videoDetailView .video-detail-related-card .video-detail-related-title {
                font-size: 12px;
                line-height: 1.32;
                white-space: normal;
                word-break: keep-all;
                overflow-wrap: break-word;
                -webkit-line-clamp: 2;
            }

            #videoView .video-wheel-column .video-wheel-sub,
            #videoDetailView .video-detail-related .video-wheel-sub,
            #videoDetailView .video-detail-related-card .video-detail-related-meta {
                display: block;
                font-size: 10.5px;
                line-height: 1.28;
                white-space: normal;
                word-break: keep-all;
                overflow-wrap: break-word;
            }

            #videoDetailView .video-detail-related .video-wheel-mobile-more {
                display: none;
            }

            #videoDetailView .video-detail-related-heading {
                margin: 0 0 8px;
                font-size: 11px;
                letter-spacing: 0.08em;
            }

            #videoDetailView .video-detail-related-list {
                gap: 8px;
            }

            /* 상세 우측만 한 단계 더 슬림 (보조 패널) */
            #videoDetailView .video-detail-related .video-wheel-item,
            #videoDetailView .video-detail-related-card {
                padding: 5px 7px;
                gap: 7px;
            }

            #videoDetailView .video-detail-related .video-wheel-thumb,
            #videoDetailView .video-detail-related span.video-wheel-thumb.video-wheel-thumb--placeholder,
            #videoDetailView .video-detail-related-card .video-detail-related-thumb,
            #videoDetailView .video-detail-related-card .video-wheel-thumb {
                width: clamp(132px, 32%, 160px);
                min-width: 132px;
                max-width: 160px;
                border-radius: 9px;
            }

            #videoDetailView .video-detail-related .video-wheel-title,
            #videoDetailView .video-detail-related-card .video-detail-related-title {
                font-size: 11.5px;
                line-height: 1.3;
            }

            #videoDetailView .video-detail-related .video-wheel-sub,
            #videoDetailView .video-detail-related-card .video-detail-related-meta {
                font-size: 10px;
                line-height: 1.26;
            }
        }

        /* 넓은 데스크탑: 메인 스테이지 높이만 확대 (우측 compact 카드는 유지) */
        @media (min-width: 1024px) {
            #videoView .video-wheel-column .video-wheel-stage {
                height: min(560px, 60vh);
                max-height: 60vh;
            }

            #videoView .video-song-pick-grid {
                grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
                gap: 32px;
            }
        }

        /* 모바일: 휠·미리보기 제거, YouTube형 세로 카드 리스트만 */
        @media (max-width: 768px) {
            #videoView .video-browser {
                display: block;
            }

            #videoView .video-main-panel-wrap {
                display: none;
            }

            #videoView .video-song-pick-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            #videoView .video-selector {
                display: flex;
                flex-direction: column;
                gap: 18px;
                height: auto;
                overflow: visible;
            }

            #videoView .video-wheel-stage {
                height: auto;
                max-height: none;
                overflow: visible;
                scroll-snap-type: none;
                overscroll-behavior-y: auto;
                scroll-behavior: auto;
                touch-action: auto;
            }

            #videoView .video-wheel-rail {
                min-height: 0;
                gap: 18px;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-inline: 0;
            }

            #videoView .video-wheel-item {
                position: relative;
                width: 100%;
                transform: none !important;
                opacity: 1 !important;
                filter: none !important;
                scroll-snap-align: none;
                display: grid;
                grid-template-columns: clamp(170px, 38%, 220px) minmax(0, 1fr);
                grid-template-rows: auto auto;
                align-items: center;
                gap: 8px 16px;
                min-height: 112px;
                padding: 12px 0 16px;
                border-radius: 0;
                border: none;
                border-bottom: 1px solid rgba(120, 80, 200, 0.18);
                background: transparent;
                box-shadow: none;
                transition:
                    border-color 0.2s ease,
                    background-color 0.2s ease;
            }

            #videoView .video-wheel-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            #videoView .video-wheel-item.is-active {
                transform: none !important;
                opacity: 1 !important;
                filter: none !important;
                border-color: rgba(120, 80, 200, 0.18);
                background: transparent;
                box-shadow: none;
            }

            #videoView .video-wheel-item:not(.is-active):hover,
            #videoView .video-wheel-item:not(.is-active):focus-visible {
                opacity: 1 !important;
                filter: none !important;
            }

            #videoView .video-wheel-thumb {
                grid-column: 1;
                grid-row: 1 / -1;
                align-self: center;
                width: 100%;
                max-width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
                border-radius: 12px;
            }

            #videoView span.video-wheel-thumb.video-wheel-thumb--placeholder {
                grid-column: 1;
                grid-row: 1 / -1;
                font-size: 20px;
            }

            #videoView .video-wheel-text {
                grid-column: 2;
                grid-row: 1;
                padding: 0;
                gap: 8px;
            }

            #videoView .video-wheel-title {
                font-size: 16px;
                line-height: 1.46;
                white-space: normal;
                word-break: keep-all;
                overflow-wrap: break-word;
                -webkit-line-clamp: 3;
            }

            #videoView .video-wheel-sub {
                display: none;
            }

            #videoView .video-wheel-mobile-more {
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: 100%;
                grid-column: 2;
                grid-row: 2;
            }

            #videoView .video-wheel-mobile-author {
                font-size: 14px;
                font-weight: 600;
                color: rgba(196, 181, 255, 0.92);
                line-height: 1.4;
                white-space: normal;
                word-break: keep-all;
                overflow-wrap: break-word;
            }

            #videoView .video-wheel-mobile-meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px 12px;
                font-size: 13px;
                font-weight: 600;
                color: rgba(167, 139, 250, 0.88);
                line-height: 1.4;
                white-space: normal;
                word-break: keep-all;
                overflow-wrap: break-word;
            }

            #videoView .video-wheel-mobile-cat {
                padding: 2px 8px;
                border-radius: 999px;
                border: 1px solid rgba(139, 92, 246, 0.35);
                background: rgba(88, 28, 135, 0.28);
                color: #e9d5ff;
            }

            #videoView .video-wheel-mobile-dot {
                opacity: 0.55;
                user-select: none;
            }
        }

        @media (max-width: 480px) {
            #videoView .video-wheel-item {
                grid-template-columns: clamp(130px, 34%, 150px) minmax(0, 1fr);
                gap: 6px 10px;
                min-height: 96px;
                padding: 10px 0 14px;
            }

            #videoView .video-wheel-thumb {
                border-radius: 10px;
            }

            #videoView span.video-wheel-thumb.video-wheel-thumb--placeholder {
                font-size: 16px;
            }

            #videoView .video-wheel-text {
                gap: 6px;
            }

            #videoView .video-wheel-title {
                font-size: 14px;
                line-height: 1.44;
                -webkit-line-clamp: 2;
            }

            #videoView .video-wheel-mobile-more {
                gap: 6px;
            }

            #videoView .video-wheel-mobile-author {
                font-size: 12.5px;
            }

            #videoView .video-wheel-mobile-meta {
                gap: 6px 8px;
                font-size: 11.5px;
                line-height: 1.38;
            }

            #videoView .video-wheel-mobile-cat {
                padding: 2px 7px;
                font-size: 11px;
            }
        }

        .video-empty {
            text-align: center;
            padding: 44px 20px 48px;
            max-width: 380px;
            margin: 0 auto;
            border-radius: 18px;
            border: 1px dashed rgba(168, 85, 247, 0.35);
            background: rgba(39, 18, 84, 0.25);
        }

        /* 헤더 하단 border와 겹치지 않도록 빈 목록 박스는 상단 테두리 없음 */
        #videoView .video-empty {
            border-top: none;
        }

        .video-empty-line--primary {
            margin: 0 0 10px;
            font-size: 15px;
            font-weight: 700;
            color: #f3e8ff;
            letter-spacing: -0.03em;
        }

        .video-empty-line--secondary {
            margin: 0;
            font-size: 13px;
            color: #a78bfa;
            line-height: 1.45;
        }

        /* 상단 바 우측 — 과하지 않은 등록 액션 */
        #videoView .video-toolbar-add-btn {
            flex-shrink: 0;
            min-width: 52px;
            min-height: 36px;
            padding: 8px 12px;
            margin: 0;
            border-radius: 999px;
            border: 1px solid rgba(168, 85, 247, 0.42);
            background: rgba(88, 28, 135, 0.35);
            color: #ede9fe;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                background 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoView .video-toolbar-add-btn:hover,
        #videoView .video-toolbar-add-btn:focus-visible {
            background: rgba(124, 58, 237, 0.42);
            border-color: rgba(196, 181, 253, 0.55);
            box-shadow: 0 0 16px rgba(139, 92, 246, 0.28);
            outline: none;
        }

        #videoView .video-toolbar-add-btn:active {
            transform: scale(0.97);
        }

        #videoView .view-app-bar {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) auto;
            align-items: center;
            justify-content: stretch;
            gap: 6px;
            padding-right: 10px;
            /* 공통 .view-app-bar 하단 border만 유지 + inset 하이라이트. 바깥쪽 그림자 제거로 이중 선 느낌 완화 */
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
        }

        #videoView .view-app-bar .view-app-bar-title {
            grid-column: 2;
            text-align: center;
            justify-self: stretch;
        }

        #videoView .video-toolbar-add-btn {
            grid-column: 3;
            justify-self: end;
        }

        #videoDetailView.content-view--subpage .view-app-body.video-detail-body {
            flex: 1 1 auto;
            padding: var(--subpage-body-gap, 18px) 16px var(--subpage-scroll-pad-bottom);
            width: 100%;
            max-width: 720px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        #videoDetailView .video-detail-layout {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            min-width: 0;
        }

        #videoDetailView .video-detail-main {
            min-width: 0;
        }

        #videoDetailView .video-detail-related {
            min-width: 0;
            width: 100%;
        }

        #videoDetailView .video-detail-related-heading {
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(196, 181, 255, 0.72);
        }

        #videoDetailView .video-detail-related-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #videoDetailView .video-detail-related-card,
        #videoDetailView .video-detail-related .video-wheel-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            width: 100%;
            min-width: 0;
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(120, 80, 200, 0.18);
            background: rgba(22, 12, 38, 0.72);
            text-align: left;
            cursor: pointer;
            box-sizing: border-box;
            font: inherit;
            color: inherit;
            -webkit-tap-highlight-color: transparent;
        }

        #videoDetailView .video-detail-related-thumb,
        #videoDetailView .video-detail-related .video-wheel-thumb {
            width: 100%;
            max-width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            object-fit: cover;
            background: #1a1028;
        }

        #videoDetailView .video-detail-related-title,
        #videoDetailView .video-detail-related .video-wheel-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.44;
            color: #faf5ff;
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #videoDetailView .video-detail-related-meta,
        #videoDetailView .video-detail-related .video-wheel-sub {
            margin: 0;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.38;
            color: rgba(189, 178, 255, 0.92);
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: break-word;
        }

        @media (max-width: 768px) {

            #videoDetailView .video-detail-related,
            #videoDetailView .video-detail-related-list {
                width: 100%;
            }

            #videoDetailView .video-detail-related-card,
            #videoDetailView .video-detail-related .video-wheel-item {
                min-width: 0;
            }
        }

        .video-detail-player-wrap {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            background: #0f0a15;
            border-bottom: 1px solid rgba(139, 92, 246, 0.22);
        }

        .video-detail-player-inner {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: min(56vh, 420px);
            margin: 0 auto;
            background: #000;
        }

        .video-detail-player-inner iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* JS가 iframe을 마운트하는 래퍼 — 16:9 박스를 채우고 모바일에서 넘침 방지 */
        #videoDetailView #videoDetailPlayerMount {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        #videoDetailView #videoDetailPlayerMount iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            border: none;
            display: block;
        }

        .video-detail-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 20px;
            text-align: center;
            color: #c4b5fd;
            font-size: 14px;
        }

        .video-detail-open-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            color: #faf5ff;
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
            text-decoration: none;
        }

        .video-detail-content-pad {
            padding: 18px 16px 8px;
        }

        .video-detail-title-block {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 12px;
            margin-bottom: 8px;
        }

        .video-detail-title-block .video-detail-heading {
            margin: 0;
            flex: 1 1 12rem;
            min-width: 0;
        }

        .video-detail-type-badge {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: rgba(245, 240, 255, 0.95);
            background: rgba(88, 28, 135, 0.55);
            border: 1px solid rgba(168, 85, 247, 0.42);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

        .video-detail-type-badge.hidden {
            display: none !important;
        }

        .video-source-badge {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1.2;
            color: rgba(196, 181, 253, 0.88);
            background: rgba(46, 16, 86, 0.45);
            border: 1px solid rgba(139, 92, 246, 0.28);
        }

        .video-source-badge.hidden {
            display: none !important;
        }

        .video-source-badge--soundcloud {
            color: rgba(253, 230, 138, 0.9);
            border-color: rgba(251, 191, 36, 0.32);
            background: rgba(69, 45, 10, 0.4);
        }

        #videoRegisterView .video-source-type-seg {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        #videoRegisterView .video-source-type-seg__opt {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            cursor: pointer;
        }

        #videoRegisterView .video-source-type-seg__opt input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        #videoRegisterView .video-source-type-seg__opt span {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            color: rgba(196, 181, 253, 0.85);
            background: rgba(46, 16, 86, 0.35);
            border: 1px solid rgba(139, 92, 246, 0.28);
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
        }

        #videoRegisterView .video-source-type-seg__opt input:checked+span {
            color: #f5f3ff;
            background: rgba(88, 28, 135, 0.55);
            border-color: rgba(192, 132, 252, 0.55);
        }

        #videoView .video-wheel-source {
            display: block;
            margin-top: 2px;
            font-size: 10px;
            font-weight: 600;
            color: rgba(167, 139, 250, 0.72);
            letter-spacing: 0.01em;
        }

        .video-detail-heading {
            margin: 0 0 8px;
            font-size: 20px;
            font-weight: 800;
            color: #faf5ff;
            line-height: 1.35;
        }

        .video-detail-author {
            margin: 0 0 12px;
            font-size: 14px;
            color: #a78bfa;
        }

        .video-detail-desc {
            margin: 0 0 18px;
            font-size: 14px;
            line-height: 1.55;
            color: #ddd6fe;
            white-space: pre-wrap;
        }

        .video-detail-stats-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #c4b5fd;
        }

        .video-detail-like-btn {
            border: 1px solid rgba(168, 85, 247, 0.45);
            background: rgba(88, 28, 135, 0.35);
            color: #f5f3ff;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
        }

        .video-detail-like-btn:hover,
        .video-detail-like-btn:focus-visible {
            background: rgba(124, 58, 237, 0.45);
        }

        .video-detail-like-btn.is-liked {
            background: rgba(124, 58, 237, 0.65);
            border-color: rgba(196, 181, 253, 0.55);
        }

        .video-detail-like-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .video-detail-owner-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .video-detail-owner-actions button {
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid rgba(168, 85, 247, 0.4);
            background: rgba(39, 18, 84, 0.75);
            color: #ede9fe;
        }

        .video-detail-owner-actions .video-detail-delete-btn {
            border-color: rgba(239, 68, 68, 0.45);
            color: #fecaca;
        }

        .video-detail-admin-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .video-detail-admin-actions button {
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid rgba(251, 191, 36, 0.45);
            background: rgba(69, 45, 10, 0.65);
            color: #fde68a;
        }

        .video-detail-admin-actions .video-detail-feature-today-btn {
            border-color: rgba(168, 85, 247, 0.45);
            background: rgba(59, 20, 110, 0.55);
            color: #e9d5ff;
        }

        #videoDetailView .video-detail-comments-section {
            margin-top: 4px;
            padding-top: 18px;
            border-top: 1px solid rgba(139, 92, 246, 0.14);
        }

        #videoDetailView .video-detail-comments-label {
            margin: 0 0 12px 0;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(148, 138, 185, 0.55);
        }

        #videoDetailView .video-detail-comments-count {
            display: inline-block;
            min-width: 1.1em;
            margin-left: 6px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: none;
            color: rgba(150, 140, 188, 0.58);
            transition: color 0.2s ease;
        }

        #videoDetailView .video-detail-comment-list {
            list-style: none;
            margin: 0 0 16px 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-height: 240px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #videoDetailView .video-detail-comment-list>li {
            list-style: none;
        }

        #videoDetailView .video-detail-comment-item {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(12, 8, 28, 0.38);
            border: 1px solid rgba(139, 92, 246, 0.12);
        }

        #videoDetailView .video-detail-comment-meta {
            font-size: 11px;
            color: rgba(138, 128, 175, 0.65);
            margin-bottom: 6px;
        }

        #videoDetailView .video-detail-comment-meta .video-detail-comment-author {
            font-weight: 600;
            color: rgba(175, 165, 210, 0.78);
        }

        #videoDetailView .video-detail-comment-text {
            margin: 0;
            font-size: 13px;
            line-height: 1.55;
            color: rgba(210, 202, 238, 0.88);
            word-break: break-word;
        }

        #videoDetailView .video-detail-comment-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }

        #videoDetailView .video-detail-comment-input {
            width: 100%;
            box-sizing: border-box;
            min-height: 72px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(139, 92, 246, 0.22);
            background: rgba(18, 12, 36, 0.65);
            color: #f0eaff;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.5;
            resize: vertical;
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        #videoDetailView .video-detail-comment-input::placeholder {
            color: rgba(150, 140, 185, 0.35);
        }

        #videoDetailView .video-detail-comment-input:focus {
            outline: none;
            border-color: rgba(168, 85, 247, 0.45);
            box-shadow: 0 0 0 1px rgba(88, 45, 160, 0.2);
        }

        #videoDetailView .video-detail-comment-input:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        #videoDetailView .video-detail-comment-submit {
            align-self: flex-end;
            min-height: 44px;
            min-width: 44px;
            padding: 10px 18px;
            border-radius: 10px;
            border: none;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            color: rgba(235, 228, 255, 0.95);
            background: rgba(88, 55, 140, 0.55);
            cursor: pointer;
            transition: background 0.15s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoDetailView .video-detail-comment-submit:hover,
        #videoDetailView .video-detail-comment-submit:focus-visible {
            background: rgba(110, 65, 165, 0.65);
            outline: none;
        }

        #videoDetailView .video-detail-comment-submit:active:not(:disabled) {
            transform: scale(0.98);
        }

        #videoDetailView .video-detail-comment-submit:disabled {
            opacity: 0.38;
            cursor: not-allowed;
            transform: none;
            background: rgba(60, 42, 95, 0.35);
            color: rgba(190, 182, 220, 0.45);
        }

        #videoDetailView .video-detail-comment-submit:not(:disabled) {
            transition:
                background 0.2s ease,
                opacity 0.2s ease,
                transform 0.12s ease,
                box-shadow 0.2s ease;
        }

        #videoDetailView .video-detail-comment-item--empty {
            list-style: none;
            background: transparent;
            border-style: dashed;
            font-size: 12px;
            color: rgba(130, 120, 165, 0.45);
            text-align: center;
        }

        /* 영상 상세 — 대화 선택 CTA (라운지 / 랜덤채팅 2분할) */
        #videoDetailView .video-detail-lounge-cta {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 18px;
            padding: 16px 14px 18px;
            border-radius: 16px;
            border: 1px solid rgba(139, 92, 246, 0.22);
            background:
                linear-gradient(155deg, rgba(36, 18, 58, 0.92) 0%, rgba(14, 8, 28, 0.88) 48%, rgba(18, 12, 40, 0.9) 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 12px 40px rgba(0, 0, 0, 0.35),
                0 0 48px rgba(124, 58, 237, 0.08);
        }

        #videoDetailView .video-detail-lounge-copy {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 13px;
            line-height: 1.45;
            color: rgba(221, 214, 254, 0.92);
        }

        #videoDetailView .video-detail-lounge-copy strong {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #faf5ff;
        }

        #videoDetailView .video-detail-lounge-copy span {
            color: rgba(196, 181, 253, 0.78);
        }

        #videoDetailView .video-detail-chat-choice {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
            align-items: stretch;
        }

        #videoDetailView .video-detail-choice-btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 4px;
            min-height: 76px;
            padding: 14px 14px 16px;
            border-radius: 14px;
            border: 1px solid transparent;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            color: rgba(250, 245, 255, 0.96);
            background: rgba(12, 8, 26, 0.65);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            transition:
                transform 0.14s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease,
                filter 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #videoDetailView .video-detail-choice-btn strong {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        #videoDetailView .video-detail-choice-btn span {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
            color: rgba(220, 210, 250, 0.72);
        }

        /* 라운지: 핑크·퍼플 네온 */
        #videoDetailView .video-detail-choice-btn--lounge {
            border-color: rgba(236, 72, 153, 0.35);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 0 28px rgba(192, 38, 211, 0.18),
                0 0 52px rgba(124, 58, 237, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.35);
            background:
                linear-gradient(145deg, rgba(88, 28, 135, 0.55) 0%, rgba(46, 16, 80, 0.75) 45%, rgba(24, 10, 48, 0.92) 100%);
        }

        #videoDetailView .video-detail-choice-btn--lounge:hover,
        #videoDetailView .video-detail-choice-btn--lounge:focus-visible {
            outline: none;
            border-color: rgba(244, 114, 182, 0.55);
            filter: brightness(1.05);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 0 36px rgba(236, 72, 153, 0.28),
                0 0 64px rgba(167, 139, 250, 0.18),
                0 10px 28px rgba(0, 0, 0, 0.38);
        }

        #videoDetailView .video-detail-choice-btn--lounge:active {
            transform: scale(0.985);
            filter: brightness(0.98);
        }

        /* 랜덤대화: 블루·시안 네온 */
        #videoDetailView .video-detail-choice-btn--random {
            border-color: rgba(56, 189, 248, 0.35);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 0 28px rgba(14, 165, 233, 0.2),
                0 0 52px rgba(59, 130, 246, 0.14),
                0 8px 24px rgba(0, 0, 0, 0.35);
            background:
                linear-gradient(145deg, rgba(30, 58, 138, 0.55) 0%, rgba(12, 42, 74, 0.78) 48%, rgba(10, 22, 48, 0.92) 100%);
        }

        #videoDetailView .video-detail-choice-btn--random:hover,
        #videoDetailView .video-detail-choice-btn--random:focus-visible {
            outline: none;
            border-color: rgba(103, 232, 249, 0.55);
            filter: brightness(1.06);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 0 36px rgba(34, 211, 238, 0.28),
                0 0 64px rgba(59, 130, 246, 0.2),
                0 10px 28px rgba(0, 0, 0, 0.38);
        }

        #videoDetailView .video-detail-choice-btn--random:active {
            transform: scale(0.985);
            filter: brightness(0.98);
        }

        /* 라운지: 뷰포트 높이에 고정해 페이지(body) 스크롤 없이 메시지 목록만 스크롤 */
        #loungeView {
            height: var(--app-chrome-below-nav);
            min-height: var(--app-chrome-below-nav);
            max-height: var(--app-chrome-below-nav);
            overflow: hidden;
        }

        #loungeView .lounge-view-body {
            flex: 1 1 0;
            min-height: 0;
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
            padding: calc(52px + 14px) 16px calc(14px + env(safe-area-inset-bottom, 0px));
            box-sizing: border-box;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #loungeView .lounge-shell {
            flex: 1;
            min-height: 0;
            height: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 220px;
            gap: 14px;
            align-items: stretch;
        }

        #loungeView .lounge-members-panel {
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 12px 12px 12px 10px;
            border-radius: 14px;
            background: rgba(18, 10, 40, 0.72);
            border: 1px solid rgba(139, 92, 246, 0.22);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
        }

        #loungeView .lounge-members-head {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex: 0 0 auto;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(139, 92, 246, 0.18);
        }

        #loungeView .lounge-members-head strong {
            font-size: 13px;
            font-weight: 800;
            color: #ede9fe;
            letter-spacing: -0.02em;
        }

        #loungeView .lounge-member-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #loungeView .lounge-member-item {
            flex: 0 0 auto;
        }

        #loungeView .lounge-member-self {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(88, 55, 140, 0.28);
            border: 1px solid rgba(168, 85, 247, 0.22);
            font-size: 13px;
            font-weight: 600;
            color: #f5f3ff;
        }

        #loungeView .lounge-member-self-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #loungeView .lounge-member-self-badge {
            margin-left: auto;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: #0f0a15;
            background: linear-gradient(135deg, #c4b5fd, #a855f7);
        }

        #loungeView .lounge-member-chip {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid rgba(139, 92, 246, 0.2);
            background: rgba(12, 8, 28, 0.45);
            color: #e9d5ff;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s, border-color 0.15s, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #loungeView .lounge-member-chip:hover,
        #loungeView .lounge-member-chip:focus-visible {
            background: rgba(88, 55, 140, 0.42);
            border-color: rgba(168, 85, 247, 0.35);
            outline: none;
        }

        #loungeView .lounge-member-chip:active {
            transform: scale(0.98);
        }

        #loungeView .lounge-chat-panel {
            min-height: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0 4px 0 0;
        }

        #loungeView .lounge-intro {
            flex: 0 0 auto;
            margin: 0 0 10px;
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
            color: rgba(210, 200, 250, 0.88);
            background: rgba(88, 28, 135, 0.2);
            border: 1px solid rgba(168, 85, 247, 0.2);
        }

        /* 라운지 정책 안내 카드 (메시지 배열과 무관) */
        #loungeView .lounge-policy-notice {
            flex: 0 0 auto;
            position: relative;
            margin: 0 0 8px;
            padding: 10px 36px 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: rgba(14, 10, 28, 0.78);
            font-size: 12px;
            line-height: 1.55;
            color: rgba(205, 195, 240, 0.9);
        }

        #loungeView .lounge-policy-notice.hidden {
            display: none;
        }

        #loungeView .lounge-policy-notice__close {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 32px;
            height: 32px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
            color: rgba(230, 220, 255, 0.85);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        #loungeView .lounge-policy-notice__close:hover,
        #loungeView .lounge-policy-notice__close:focus-visible {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            outline: none;
        }

        #loungeView .lounge-policy-notice__title {
            margin: 0 0 6px;
            font-size: 13px;
            font-weight: 700;
            color: rgba(237, 233, 254, 0.95);
        }

        #loungeView .lounge-policy-notice__text {
            margin: 0;
        }

        /* 메시지 적을 때 하단 정렬: ::before 스페이서 (flex-end는 데스크탑 휠 위 스크롤 깨짐) */
        #loungeView .lounge-message-list {
            list-style: none;
            margin: 0;
            padding: 10px 8px 16px 4px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: auto;
            border-radius: 14px;
            border: 1px solid rgba(139, 92, 246, 0.18);
            background: rgba(10, 6, 24, 0.55);
        }

        #loungeView .lounge-message-list::before {
            content: '';
            display: block;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
        }

        #loungeView .lounge-message-item {
            flex-shrink: 0;
            max-width: 92%;
            padding: 10px 12px;
            border-radius: 14px 14px 14px 6px;
            background: rgba(28, 16, 52, 0.85);
            border: 1px solid rgba(139, 92, 246, 0.15);
            align-self: flex-start;
        }

        #loungeView .lounge-message-item--self {
            align-self: flex-end;
            border-radius: 14px 14px 6px 14px;
            background: linear-gradient(135deg,
                    rgba(109, 40, 217, 0.96) 0%,
                    rgba(124, 58, 237, 0.9) 38%,
                    rgba(192, 38, 211, 0.82) 100%);
            border: 1px solid rgba(236, 72, 153, 0.4);
            box-shadow:
                0 12px 32px rgba(124, 58, 237, 0.22),
                0 4px 16px rgba(217, 70, 239, 0.14);
        }

        #loungeView .lounge-message-item--empty {
            max-width: 100%;
            align-self: center;
            text-align: center;
            font-size: 12px;
            color: rgba(130, 120, 165, 0.55);
            border-style: dashed;
            background: transparent;
            border-radius: 12px;
        }

        #loungeView .lounge-message-item--system {
            max-width: min(92%, 420px);
            align-self: center;
            justify-content: center;
            text-align: center;
            padding: 0;
            margin: 8px 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        #loungeView .lounge-message-item--system-video {
            list-style: none;
        }

        #loungeView .lounge-system-video {
            cursor: pointer;
            pointer-events: auto;
        }

        #loungeView .lounge-system-video .lounge-system-pill {
            pointer-events: auto;
        }

        #loungeView .lounge-system-pill {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            padding: 12px 14px;
            border-radius: 16px;
            background: linear-gradient(135deg,
                    rgba(124, 58, 237, 0.28) 0%,
                    rgba(217, 70, 239, 0.18) 100%);
            border: 1px solid rgba(216, 180, 254, 0.42);
            box-shadow:
                0 10px 28px rgba(124, 58, 237, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            text-align: left;
        }

        #loungeView .lounge-system-pill__emoji {
            flex: 0 0 auto;
            font-size: 20px;
            line-height: 1.2;
            margin-top: 1px;
        }

        #loungeView .lounge-system-pill__body {
            flex: 1 1 auto;
            min-width: 0;
        }

        #loungeView .lounge-system-pill__main {
            margin: 0;
            font-size: 13px;
            font-weight: 700;
            color: #f5f3ff;
            line-height: 1.45;
        }

        #loungeView .lounge-system-pill__sub {
            margin: 4px 0 0;
            font-size: 12px;
            font-weight: 500;
            color: rgba(233, 213, 255, 0.82);
            line-height: 1.35;
        }

        #loungeView .lounge-message-item--system-clickable {
            cursor: pointer;
        }

        #loungeView .lounge-message-item--system-clickable:hover .lounge-system-pill,
        #loungeView .lounge-message-item--system-clickable:focus-visible .lounge-system-pill {
            background: linear-gradient(135deg,
                    rgba(124, 58, 237, 0.38) 0%,
                    rgba(217, 70, 239, 0.26) 100%);
            border-color: rgba(233, 213, 255, 0.55);
            outline: none;
        }

        #loungeView .lounge-message-item--system-clickable:focus-visible {
            outline: none;
        }

        #loungeView .lounge-message-text--system {
            margin: 0;
            font-size: 13px;
            font-weight: 600;
            color: rgba(233, 213, 255, 0.95);
            line-height: 1.45;
        }

        #loungeView .lounge-message-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 11px;
            color: rgba(180, 170, 220, 0.78);
        }

        #loungeView .lounge-message-item--self .lounge-message-meta {
            color: rgba(255, 255, 255, 0.74);
        }

        #loungeView .lounge-message-item--self .lounge-message-author--self {
            font-weight: 700;
            color: rgba(255, 255, 255, 0.96);
        }

        #loungeView .lounge-message-item--self .lounge-message-time {
            color: rgba(255, 255, 255, 0.68);
        }

        #loungeView .lounge-message-item--self .lounge-message-text {
            color: rgba(255, 255, 255, 0.96);
        }

        /* optimistic pending은 폭 변화 없이 투명도만 낮춘다 */
        #loungeView .lounge-message-item--self.lounge-message-item--pending {
            opacity: 0.85;
        }

        #loungeView .lounge-message-item--self.lounge-message-item--failed {
            opacity: 1;
        }

        #loungeView .lounge-message-author-btn {
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            color: #ddd6fe;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        #loungeView .lounge-message-author-btn:hover,
        #loungeView .lounge-message-author-btn:focus-visible {
            color: #fff;
            outline: none;
        }

        #loungeView .lounge-message-time {
            font-size: 11px;
            color: rgba(130, 120, 165, 0.65);
        }

        #loungeView .lounge-message-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.55;
            color: rgba(245, 240, 255, 0.95);
            word-break: break-word;
            white-space: pre-wrap;
        }

        #loungeView .lounge-message-reported-badge {
            display: inline-block;
            margin-left: 6px;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: rgba(196, 181, 253, 0.95);
            background: rgba(88, 28, 135, 0.45);
            border: 1px solid rgba(167, 139, 250, 0.35);
            vertical-align: middle;
        }

        #loungeView .lounge-form {
            flex: 0 0 auto;
            flex-shrink: 0;
            width: 100%;
            padding-top: 10px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            margin-top: 0;
            background: rgba(20, 12, 38, 0.96);
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }

        #loungeView .lounge-mute-hint {
            margin: 0;
            padding: 0.45rem 0.65rem;
            font-size: 0.75rem;
            line-height: 1.4;
            color: rgba(210, 200, 248, 0.82);
            background: rgba(55, 38, 95, 0.42);
            border-radius: 10px;
            border: 1px solid rgba(124, 92, 200, 0.28);
            box-sizing: border-box;
        }

        #loungeView .lounge-mute-hint.hidden {
            display: none !important;
        }

        #loungeView .lounge-spam-hint {
            margin: 0;
            padding: 0.45rem 0.65rem;
            font-size: 0.75rem;
            line-height: 1.4;
            color: rgba(210, 200, 248, 0.82);
            background: rgba(55, 38, 95, 0.42);
            border-radius: 10px;
            border: 1px solid rgba(124, 92, 200, 0.28);
            box-sizing: border-box;
        }

        #loungeView .lounge-spam-hint.hidden {
            display: none !important;
        }

        #loungeView .lounge-message-input {
            width: 100%;
            box-sizing: border-box;
            min-height: 56px;
            max-height: 120px;
            flex-shrink: 0;
            font-size: 16px;
            line-height: 1.5;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: rgba(18, 12, 36, 0.88);
            color: #f0eaff;
            font-family: inherit;
            resize: vertical;
            overflow-y: auto;
        }

        #loungeView .lounge-message-input::placeholder {
            color: rgba(150, 140, 185, 0.35);
        }

        #loungeView .lounge-message-input:focus {
            outline: none;
            border-color: rgba(168, 85, 247, 0.5);
            box-shadow: 0 0 0 1px rgba(88, 45, 160, 0.25);
        }

        #loungeView .lounge-message-input:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        #loungeView .lounge-message-input:disabled::placeholder {
            color: rgba(175, 165, 210, 0.48);
        }

        #loungeView .lounge-message-submit {
            align-self: flex-end;
            flex-shrink: 0;
            min-height: 44px;
            min-width: 44px;
            padding: 10px 20px;
            border-radius: 10px;
            border: none;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            color: rgba(255, 252, 255, 0.96);
            background: linear-gradient(135deg, #6d28d9, #a855f7);
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(109, 40, 217, 0.35);
        }

        #loungeView .lounge-message-submit:disabled {
            opacity: 0.38;
            cursor: not-allowed;
            box-shadow: none;
        }

        #loungeView .lounge-member-action-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1180;
            background: rgba(5, 3, 12, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        #loungeView .lounge-member-action-panel {
            position: fixed;
            left: 50%;
            bottom: max(24px, env(safe-area-inset-bottom, 0px));
            transform: translateX(-50%);
            width: min(360px, calc(100vw - 32px));
            z-index: 1190;
            padding: 18px 18px 14px;
            border-radius: 16px;
            background: rgba(24, 14, 48, 0.97);
            border: 1px solid rgba(168, 85, 247, 0.35);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: stretch;
        }

        #loungeView .lounge-member-action-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #f5f3ff;
            text-align: center;
        }

        #loungeView .lounge-member-dm-request-btn {
            padding: 11px 14px;
            border-radius: 11px;
            border: none;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            color: #0f0a15;
            background: linear-gradient(135deg, #e9d5ff, #c4b5fd);
        }

        #loungeView .lounge-member-report-btn {
            padding: 10px 14px;
            border-radius: 11px;
            border: 1px solid rgba(248, 113, 113, 0.45);
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            color: rgba(254, 226, 226, 0.98);
            background: linear-gradient(135deg, rgba(127, 29, 29, 0.75), rgba(185, 28, 28, 0.65));
            box-shadow: 0 4px 14px rgba(220, 38, 38, 0.22);
            -webkit-tap-highlight-color: transparent;
        }

        #loungeView .lounge-member-report-btn:hover,
        #loungeView .lounge-member-report-btn:focus-visible {
            filter: brightness(1.06);
            outline: none;
        }

        #loungeView .lounge-member-action-close {
            padding: 8px;
            border: none;
            border-radius: 8px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            color: rgba(200, 190, 235, 0.85);
            background: transparent;
        }

        #loungeView .lounge-member-action-close:hover,
        #loungeView .lounge-member-action-close:focus-visible {
            color: #fff;
            outline: none;
        }

        #loungeView .lounge-report-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: rgba(5, 3, 12, 0.62);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        #loungeView .lounge-report-panel {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(400px, calc(100vw - 24px));
            max-height: min(88vh, 640px);
            overflow-y: auto;
            z-index: 1210;
            padding: 18px 18px 16px;
            border-radius: 16px;
            background: rgba(22, 12, 42, 0.98);
            border: 1px solid rgba(168, 85, 247, 0.4);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            gap: 10px;
            -webkit-overflow-scrolling: touch;
        }

        #loungeView .lounge-report-title {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            color: #f5f3ff;
        }

        #loungeView .lounge-report-preview {
            margin: 0;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(139, 92, 246, 0.2);
            font-size: 12px;
            line-height: 1.5;
            color: rgba(220, 210, 250, 0.92);
            max-height: 7.5em;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }

        #loungeView .lounge-report-fieldset {
            margin: 0;
            padding: 0;
            border: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        #loungeView .lounge-report-legend {
            padding: 0;
            font-size: 12px;
            font-weight: 700;
            color: rgba(200, 190, 235, 0.95);
        }

        #loungeView .lounge-report-radio-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: rgba(230, 220, 255, 0.9);
            cursor: pointer;
        }

        #loungeView .lounge-report-radio-label input {
            accent-color: #a855f7;
        }

        #loungeView .lounge-report-detail-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(200, 190, 235, 0.9);
        }

        #loungeView .lounge-report-detail-input {
            width: 100%;
            box-sizing: border-box;
            min-height: 72px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(139, 92, 246, 0.35);
            background: rgba(10, 6, 22, 0.85);
            color: rgba(245, 240, 255, 0.95);
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
        }

        #loungeView .lounge-report-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 4px;
        }

        #loungeView .lounge-report-btn {
            padding: 10px 16px;
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            -webkit-tap-highlight-color: transparent;
        }

        #loungeView .lounge-report-btn--ghost {
            background: transparent;
            color: rgba(200, 190, 235, 0.9);
            border: 1px solid rgba(139, 92, 246, 0.35);
        }

        #loungeView .lounge-report-btn--primary {
            color: #0f0a15;
            background: linear-gradient(135deg, #e9d5ff, #c4b5fd);
        }

        #loungeView .lounge-report-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            #loungeView .lounge-view-body {
                height: 100%;
                min-height: 0;
                padding-left: 14px;
                padding-right: 14px;
                padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            }

            #loungeView .lounge-shell {
                display: flex;
                flex-direction: column-reverse;
                flex: 1;
                min-height: 0;
                height: 100%;
                gap: 10px;
            }

            #loungeView .lounge-members-panel {
                flex: 0 0 auto;
                max-height: 86px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 8px 10px;
            }

            #loungeView .lounge-member-list {
                flex-direction: row;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                gap: 8px;
                padding-bottom: 2px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                flex: 1 1 auto;
                min-height: 0;
            }

            #loungeView .lounge-member-list::-webkit-scrollbar {
                display: none;
            }

            #loungeView .lounge-member-item {
                flex: 0 0 auto;
            }

            #loungeView .lounge-member-chip,
            #loungeView .lounge-member-self {
                width: auto;
                min-width: min(200px, 72vw);
                max-width: 240px;
            }

            #loungeView .lounge-member-self {
                white-space: nowrap;
            }

            #loungeView .lounge-chat-panel {
                flex: 1 1 0;
                min-height: 0;
                overflow: hidden;
                padding-right: 0;
            }
        }

        /* 영상보기 / 커뮤니티 — iOS 스타일 상단 바 */
        .view-app-bar {
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            height: 52px;
            padding: 0 8px 0 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            z-index: 15;
            background: rgba(15, 10, 21, 0.88);
            backdrop-filter: saturate(160%) blur(16px);
            -webkit-backdrop-filter: saturate(160%) blur(16px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.22);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 20px rgba(0, 0, 0, 0.18);
        }

        .view-app-bar-title {
            flex: 1;
            min-width: 0;
            margin: 0;
            padding: 0 4px;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #f3edff;
            text-align: center;
            line-height: 1.2;
        }

        .view-app-bar-spacer {
            width: 44px;
            flex-shrink: 0;
            height: 44px;
        }

        .back-home-btn {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: var(--nana-main-purple);
            border: none;
            border-radius: 12px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, transform 0.12s ease;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        .back-home-btn:hover,
        .back-home-btn:focus,
        .back-from-board-btn:hover,
        .back-from-board-btn:focus {
            background: rgba(168, 85, 247, 0.15);
            color: var(--nana-light-purple);
        }

        .back-home-btn:active,
        .back-from-board-btn:active {
            transform: scale(0.94);
            background: rgba(168, 85, 247, 0.22);
        }

        .back-from-board-btn {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: var(--nana-main-purple);
            border: none;
            border-radius: 12px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, transform 0.12s ease;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* 커뮤니티 Launchpad (#communityView 전용) */
        #communityView .view-app-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 70px - 52px);
            padding-top: 52px;
            padding-bottom: 32px;
            box-sizing: border-box;
        }

        @media (max-width: 768px) {
            #communityView .view-app-body {
                min-height: calc(100vh - 60px - 52px);
            }
        }

        #communityView .community-launchpad {
            width: 100%;
            max-width: 820px;
            margin: 0 auto;
            padding: 20px 22px 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #communityView .launchpad-intro {
            font-size: 13px;
            font-weight: 600;
            color: rgba(210, 200, 245, 0.58);
            text-align: center;
            margin: 0 auto 12px;
            width: 100%;
            max-width: 36rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.5;
        }

        #communityView .launchpad-subintro {
            margin: 0 auto 22px;
            max-width: 28rem;
            text-align: center;
            font-size: 14px;
            line-height: 1.55;
            font-weight: 500;
            color: rgba(205, 195, 235, 0.72);
        }

        #communityView .community-all-board-wrap {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 820px;
            margin: 0 auto 18px;
            padding: 0 4px;
            box-sizing: border-box;
        }

        #communityView .community-all-board-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            max-width: 100%;
            min-height: 0;
            padding: 12px 22px;
            border-radius: 999px;
            border: 1px solid rgba(110, 75, 170, 0.28);
            background: rgba(18, 12, 34, 0.82);
            box-shadow: none;
            color: rgba(205, 195, 235, 0.82);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.01em;
            line-height: 1.2;
            cursor: pointer;
            transition:
                background 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #communityView .community-all-board-btn:hover,
        #communityView .community-all-board-btn:focus-visible {
            outline: none;
            border-color: rgba(139, 92, 246, 0.38);
            background: rgba(32, 22, 56, 0.92);
            color: rgba(228, 218, 248, 0.95);
        }

        #communityView .community-all-board-btn:active {
            background: rgba(26, 18, 48, 0.95);
        }

        #communityView .community-quick-write-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            width: 100%;
            max-width: 560px;
            margin: 0 auto 26px;
            padding: 0 4px;
            box-sizing: border-box;
        }

        #communityView .community-quick-write-btn {
            flex: 1 1 140px;
            min-height: 44px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid rgba(168, 85, 247, 0.35);
            background: rgba(40, 24, 78, 0.72);
            color: #f4edff;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #communityView .community-quick-write-btn:hover,
        #communityView .community-quick-write-btn:focus-visible {
            outline: none;
            border-color: rgba(236, 72, 153, 0.45);
            background: rgba(56, 30, 98, 0.85);
        }

        #communityView .community-quick-write-btn:active {
            transform: scale(0.98);
        }

        #communityView .launchpad-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            width: 100%;
            max-width: 820px;
        }

        #communityView .launchpad-tile {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 26px 22px 28px;
            min-height: 180px;
            max-height: 200px;
            border-radius: 20px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 0 0 1px rgba(88, 45, 140, 0.15) inset,
                0 12px 36px rgba(0, 0, 0, 0.42);
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            color: #f8f5ff;
            transition:
                transform 0.24s cubic-bezier(0.25, 0.46, 0.35, 1),
                border-color 0.24s ease,
                box-shadow 0.24s ease,
                background 0.24s ease;
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
        }

        /* 네온 엣지 + 소프트 글로우 (pink → magenta → purple → blue → cyan, 12색 팔레트) */
        #communityView .launchpad-tile:hover,
        #communityView .launchpad-tile:focus-visible {
            outline: none;
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(118deg,
                    var(--nana-pink),
                    var(--nana-magenta),
                    var(--nana-light-purple),
                    var(--nana-main-purple),
                    var(--nana-blue),
                    var(--nana-sky),
                    var(--nana-cyan)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.22),
                0 0 10px rgba(236, 72, 153, 0.26),
                0 0 20px rgba(168, 85, 247, 0.22),
                0 0 30px rgba(59, 130, 246, 0.14),
                0 0 40px rgba(6, 182, 212, 0.1),
                -4px 5px 18px rgba(236, 72, 153, 0.14),
                5px -4px 20px rgba(6, 182, 212, 0.1),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(1):hover,
        #communityView .launchpad-tile:nth-child(1):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(92deg,
                    var(--nana-pink),
                    var(--nana-light-purple),
                    var(--nana-main-purple),
                    var(--nana-blue),
                    var(--nana-cyan)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 10px rgba(236, 72, 153, 0.28),
                0 0 22px rgba(217, 70, 239, 0.2),
                0 0 32px rgba(59, 130, 246, 0.13),
                -7px 5px 20px rgba(236, 72, 153, 0.15),
                0 14px 34px rgba(24, 10, 52, 0.5);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(2):hover,
        #communityView .launchpad-tile:nth-child(2):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(148deg,
                    var(--nana-magenta),
                    var(--nana-main-purple),
                    var(--nana-blue),
                    var(--nana-teal),
                    var(--nana-cyan)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 12px rgba(214, 15, 95, 0.2),
                0 0 24px rgba(168, 85, 247, 0.22),
                0 0 36px rgba(14, 165, 233, 0.12),
                8px 4px 22px rgba(59, 130, 246, 0.14),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(3):hover,
        #communityView .launchpad-tile:nth-child(3):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(205deg,
                    var(--nana-pink),
                    var(--nana-main-purple),
                    var(--nana-sky),
                    var(--nana-cyan),
                    var(--nana-teal)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 11px rgba(14, 165, 233, 0.22),
                0 0 24px rgba(168, 85, 247, 0.2),
                0 0 36px rgba(6, 182, 212, 0.13),
                5px 8px 24px rgba(6, 182, 212, 0.12),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(4):hover,
        #communityView .launchpad-tile:nth-child(4):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(72deg,
                    var(--nana-orange),
                    var(--nana-pink),
                    var(--nana-light-purple),
                    var(--nana-main-purple),
                    var(--nana-blue)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 10px rgba(249, 115, 22, 0.16),
                0 0 22px rgba(236, 72, 153, 0.22),
                0 0 34px rgba(168, 85, 247, 0.18),
                -6px -3px 22px rgba(217, 70, 239, 0.12),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(5):hover,
        #communityView .launchpad-tile:nth-child(5):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(262deg,
                    var(--nana-lime),
                    var(--nana-green),
                    var(--nana-teal),
                    var(--nana-cyan),
                    var(--nana-blue)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 11px rgba(16, 185, 129, 0.16),
                0 0 24px rgba(6, 182, 212, 0.2),
                0 0 36px rgba(59, 130, 246, 0.14),
                0 -5px 26px rgba(132, 204, 22, 0.1),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        #communityView .launchpad-tile:nth-child(6):hover,
        #communityView .launchpad-tile:nth-child(6):focus-visible {
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(318deg,
                    var(--nana-navy),
                    var(--nana-blue),
                    var(--nana-main-purple),
                    var(--nana-light-purple),
                    var(--nana-pink)) border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.09) inset,
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 11px rgba(30, 58, 138, 0.24),
                0 0 24px rgba(168, 85, 247, 0.22),
                0 0 36px rgba(236, 72, 153, 0.12),
                10px 6px 26px rgba(59, 130, 246, 0.14),
                0 14px 34px rgba(24, 10, 52, 0.52);
            transform: translateY(-5px) scale(1.015);
        }

        /* 클릭/키 눌림: 살짝 눌림 + 글로우 약화 (호버 네온 유지) */
        #communityView .launchpad-tile:active {
            transform: translateY(2px) scale(0.975);
            border-color: rgba(139, 92, 246, 0.28);
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 0 0 1px rgba(88, 45, 140, 0.12),
                0 8px 26px rgba(0, 0, 0, 0.48);
        }

        #communityView .launchpad-tile:nth-child(1):hover:active,
        #communityView .launchpad-tile:nth-child(1):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(92deg,
                    var(--nana-pink),
                    var(--nana-light-purple),
                    var(--nana-main-purple),
                    var(--nana-blue),
                    var(--nana-cyan)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 6px rgba(236, 72, 153, 0.14),
                0 0 12px rgba(217, 70, 239, 0.11),
                0 0 18px rgba(59, 130, 246, 0.07),
                -4px 3px 14px rgba(236, 72, 153, 0.1),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile:nth-child(2):hover:active,
        #communityView .launchpad-tile:nth-child(2):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(148deg,
                    var(--nana-magenta),
                    var(--nana-main-purple),
                    var(--nana-blue),
                    var(--nana-teal),
                    var(--nana-cyan)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 7px rgba(214, 15, 95, 0.12),
                0 0 14px rgba(168, 85, 247, 0.13),
                0 0 22px rgba(14, 165, 233, 0.08),
                5px 3px 14px rgba(59, 130, 246, 0.1),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile:nth-child(3):hover:active,
        #communityView .launchpad-tile:nth-child(3):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(205deg,
                    var(--nana-pink),
                    var(--nana-main-purple),
                    var(--nana-sky),
                    var(--nana-cyan),
                    var(--nana-teal)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 7px rgba(14, 165, 233, 0.13),
                0 0 14px rgba(168, 85, 247, 0.12),
                0 0 22px rgba(6, 182, 212, 0.09),
                4px 5px 16px rgba(6, 182, 212, 0.09),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile:nth-child(4):hover:active,
        #communityView .launchpad-tile:nth-child(4):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(72deg,
                    var(--nana-orange),
                    var(--nana-pink),
                    var(--nana-light-purple),
                    var(--nana-main-purple),
                    var(--nana-blue)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 6px rgba(249, 115, 22, 0.11),
                0 0 13px rgba(236, 72, 153, 0.12),
                0 0 20px rgba(168, 85, 247, 0.11),
                -4px -2px 14px rgba(217, 70, 239, 0.09),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile:nth-child(5):hover:active,
        #communityView .launchpad-tile:nth-child(5):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(262deg,
                    var(--nana-lime),
                    var(--nana-green),
                    var(--nana-teal),
                    var(--nana-cyan),
                    var(--nana-blue)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 7px rgba(16, 185, 129, 0.11),
                0 0 14px rgba(6, 182, 212, 0.12),
                0 0 22px rgba(59, 130, 246, 0.09),
                0 -4px 18px rgba(132, 204, 22, 0.08),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile:nth-child(6):hover:active,
        #communityView .launchpad-tile:nth-child(6):focus-visible:active {
            border-color: transparent;
            background:
                linear-gradient(155deg, rgba(52, 32, 98, 0.55) 0%, rgba(22, 14, 42, 0.94) 48%, rgba(12, 8, 28, 0.98) 100%) padding-box,
                linear-gradient(318deg,
                    var(--nana-navy),
                    var(--nana-blue),
                    var(--nana-main-purple),
                    var(--nana-light-purple),
                    var(--nana-pink)) border-box;
            background-clip: padding-box, border-box;
            transform: translateY(-3px) scale(0.975);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 0 7px rgba(30, 58, 138, 0.14),
                0 0 14px rgba(168, 85, 247, 0.13),
                0 0 22px rgba(236, 72, 153, 0.08),
                6px 4px 18px rgba(59, 130, 246, 0.1),
                0 10px 26px rgba(24, 10, 52, 0.52);
        }

        #communityView .launchpad-tile-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            min-width: 0;
        }

        #communityView .launchpad-name {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.035em;
            line-height: 1.28;
            color: #ffffff;
            text-shadow: 0 1px 18px rgba(139, 92, 246, 0.22);
        }

        #communityView .launchpad-desc {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.45;
            color: rgba(205, 195, 235, 0.62);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        @media (max-width: 480px) {
            #communityView .launchpad-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            #communityView .launchpad-tile {
                min-height: 148px;
                max-height: none;
                padding: 20px 18px 22px;
                border-radius: 18px;
            }

            #communityView .launchpad-name {
                font-size: 16px;
            }

            #communityView .launchpad-desc {
                font-size: 12px;
                color: rgba(205, 195, 235, 0.58);
            }

            #communityView .community-launchpad {
                padding: 16px 14px 36px;
            }

            #communityView .launchpad-intro {
                margin-bottom: 14px;
                font-size: 12px;
            }

            #communityView .launchpad-subintro {
                font-size: 13px;
                margin-bottom: 18px;
                padding: 0 6px;
            }

            #communityView .community-quick-write-row {
                margin-bottom: 22px;
                gap: 8px;
            }

            #communityView .community-quick-write-btn {
                flex: 1 1 calc(50% - 6px);
                min-height: 46px;
                font-size: 13px;
            }
        }

        @media (max-width: 380px) {
            #communityView .launchpad-grid {
                gap: 12px;
            }

            #communityView .launchpad-tile {
                padding: 18px 14px 20px;
                min-height: 138px;
            }

            #communityView .launchpad-name {
                font-size: 15px;
            }

            #communityView .launchpad-desc {
                font-size: 11px;
            }
        }

        /* 게시판 boardView 전용 */
        #boardView .board-view-body {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding-left: 0;
            padding-right: 0;
            overflow-x: hidden;
            position: relative;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }

        #boardView .board-tabs-wrap {
            flex-shrink: 0;
            padding: 10px 0 0;
            background:
                linear-gradient(180deg, rgba(18, 12, 32, 0.72) 0%, rgba(14, 10, 26, 0.45) 100%);
            border-bottom: 1px solid rgba(139, 92, 246, 0.16);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        #boardView .board-category-tabs {
            display: flex;
            flex-wrap: nowrap;
            gap: 10px;
            padding: 8px 16px 14px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
        }

        #boardView .board-category-tabs::-webkit-scrollbar {
            height: 0;
        }

        #boardView .board-tab {
            flex: 0 0 auto;
            padding: 10px 18px;
            border-radius: 14px;
            border: 1px solid rgba(110, 75, 170, 0.35);
            background: rgba(28, 20, 48, 0.72);
            color: rgba(215, 205, 245, 0.72);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.03em;
            cursor: pointer;
            transition:
                transform 0.2s ease,
                background 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease,
                box-shadow 0.22s ease;
            white-space: nowrap;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 4px 14px rgba(0, 0, 0, 0.22);
        }

        #boardView .board-tab:hover {
            border-color: rgba(168, 85, 247, 0.42);
            color: #ece8ff;
            background: rgba(42, 28, 72, 0.82);
        }

        #boardView .board-tab.is-active {
            background: linear-gradient(165deg, rgba(110, 55, 180, 0.42) 0%, rgba(52, 28, 98, 0.78) 100%);
            border-color: rgba(192, 132, 252, 0.55);
            color: #ffffff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 0 0 1px rgba(168, 85, 247, 0.15),
                0 4px 20px rgba(88, 28, 135, 0.35);
        }

        #boardView .board-tab:active {
            transform: scale(0.97);
        }

        #boardView .board-sort-bar {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 2px 16px 4px;
            width: 100%;
            box-sizing: border-box;
            background: none;
            border: none;
        }

        #boardView .board-search-wrap,
        #videoView .board-search-wrap,
        #communityView .board-search-wrap {
            flex-shrink: 0;
            width: 100%;
            padding: 4px 16px 8px;
            box-sizing: border-box;
        }

        #communityView .community-global-search-wrap {
            max-width: 820px;
            padding: 0 4px 10px;
            margin: 0 auto;
        }

        #videoView .board-search-wrap.video-search-wrap {
            margin: 0 0 14px;
            padding: 0 16px;
        }

        #boardView .board-search-shell,
        #videoView .board-search-shell,
        #communityView .board-search-shell {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 0 10px 0 12px;
            border-radius: 11px;
            border: 1px solid rgba(110, 75, 170, 0.24);
            background: rgba(20, 13, 36, 0.56);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
        }

        #boardView .board-search-shell:focus-within,
        #videoView .board-search-shell:focus-within,
        #communityView .board-search-shell:focus-within {
            border-color: rgba(168, 85, 247, 0.4);
            box-shadow:
                0 0 0 1px rgba(168, 85, 247, 0.16),
                0 1px 0 rgba(255, 255, 255, 0.05) inset;
        }

        #boardView .board-search-input,
        #videoView .board-search-input,
        #communityView .board-search-input {
            flex: 1;
            min-width: 0;
            height: 32px;
            border: 0;
            outline: 0;
            padding: 0;
            margin: 0;
            background: transparent;
            color: rgba(220, 212, 245, 0.85);
            font-family: inherit;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: -0.02em;
        }

        #boardView .board-search-input::placeholder,
        #videoView .board-search-input::placeholder,
        #communityView .board-search-input::placeholder {
            color: rgba(150, 136, 188, 0.5);
        }

        #boardView .board-search-clear,
        #videoView .board-search-clear,
        #communityView .board-search-clear {
            flex: 0 0 auto;
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            background: rgba(82, 58, 128, 0.34);
            color: rgba(216, 205, 242, 0.78);
            font-family: inherit;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
        }

        #boardView .board-search-clear[hidden],
        #videoView .board-search-clear[hidden],
        #communityView .board-search-clear[hidden] {
            display: none !important;
        }

        #boardView .board-search-clear:hover,
        #boardView .board-search-clear:focus-visible,
        #videoView .board-search-clear:hover,
        #videoView .board-search-clear:focus-visible,
        #communityView .board-search-clear:hover,
        #communityView .board-search-clear:focus-visible {
            background: rgba(109, 73, 171, 0.46);
            color: rgba(244, 239, 255, 0.95);
            outline: none;
        }

        #boardView .board-search-clear:active,
        #videoView .board-search-clear:active,
        #communityView .board-search-clear:active {
            transform: scale(0.94);
        }

        #communityView .community-launchpad .board-feed-surface {
            width: 100%;
            align-self: stretch;
        }

        #communityView .community-launchpad-default[hidden] {
            display: none !important;
        }

        #boardView .board-sort-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 5px;
            align-items: center;
            width: 100%;
            min-width: 0;
        }

        #boardView .board-sort-btn {
            margin: 0;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid rgba(110, 75, 170, 0.22);
            background: rgba(18, 12, 36, 0.35);
            color: rgba(155, 145, 195, 0.52);
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                background 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #boardView .board-sort-btn:hover,
        #boardView .board-sort-btn:focus-visible {
            border-color: rgba(168, 85, 247, 0.32);
            color: rgba(200, 190, 235, 0.78);
            background: rgba(32, 22, 58, 0.55);
            outline: none;
        }

        #boardView .board-sort-btn:active {
            transform: scale(0.97);
        }

        #boardView .board-sort-btn.is-active {
            border-color: rgba(192, 132, 252, 0.48);
            background: linear-gradient(165deg, rgba(100, 48, 165, 0.45) 0%, rgba(48, 26, 88, 0.72) 100%);
            color: #f5f0ff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 0 0 1px rgba(168, 85, 247, 0.12),
                0 3px 14px rgba(72, 22, 110, 0.28);
        }

        .board-feed-surface.board-feed-stack {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            width: 100%;
        }

        #boardView .board-activity-line {
            flex-shrink: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: 6px 12px;
            width: 100%;
            box-sizing: border-box;
            padding: 6px 16px 10px;
            margin: 0;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: -0.02em;
            line-height: 1.35;
            color: rgba(124, 110, 168, 0.38);
            border-bottom: 1px solid rgba(72, 48, 120, 0.14);
        }

        #boardView .board-activity-online {
            flex: 0 0 auto;
            color: rgba(148, 132, 195, 0.4);
        }

        #boardView .board-activity-msg {
            flex: 1 1 120px;
            min-width: 0;
            text-align: right;
            color: rgba(118, 104, 160, 0.36);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 380px) {
            #boardView .board-activity-msg {
                text-align: left;
                flex-basis: 100%;
            }
        }

        .board-feed-surface .board-feed {
            flex: 1 1 auto;
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 18px 16px 100px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            min-height: 0;
        }

        @media (max-width: 1023px) {

            #boardView .board-notice-bar,
            #boardView .board-sort-bar,
            #boardView .board-search-wrap,
            .board-feed-surface.board-feed-stack,
            #videoView .video-search-wrap,
            #videoView .video-type-filter-scroll {
                max-width: 560px;
                margin-left: auto;
                margin-right: auto;
            }

            #writeView.community-shell .write-view-body,
            #postDetailView.community-shell .post-detail-body {
                max-width: 560px;
            }
        }

        /* 커뮤니티: community-wide-shell + 중앙 main (광고 레일은 1280px 이상만) */
        /* display는 .community-shell .community-wide-shell에만 둔다.
           여기서 flex를 고정하면 (특이도가 더 커서) 1280px+ grid가 덮이지 않아
           광고 레일이 세로로 쌓이는 붕괴가 발생한다. */
        #boardView .board-view-body>.community-wide-shell,
        #writeView .write-view-body>.community-wide-shell,
        #postDetailView .post-detail-body>.community-wide-shell {
            flex: 1;
            min-height: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .community-shell .community-wide-shell {
            flex: 1;
            min-height: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
        }

        /* AdSense 승인 전: nana-ads.js (__NANA_ENABLE_ADS=false) + body.ads-enabled 없음 */
        body:not(.ads-enabled) .nana-ad,
        body:not(.ads-enabled) .ad-slot,
        body:not(.ads-enabled) .adsense-slot,
        body:not(.ads-enabled) .community-ad-rail,
        body:not(.ads-enabled) .community-ad-slot,
        body:not(.ads-enabled) .community-ad-slot-label,
        body:not(.ads-enabled) .ad-slot-feed,
        body:not(.ads-enabled) .ad-slot-inline,
        body:not(.ads-enabled) .ad-slot-inner,
        body:not(.ads-enabled) .ad-slot-placeholder-text,
        body:not(.ads-enabled) #ad-container {
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 0 !important;
            max-height: none !important;
            border: none !important;
            overflow: hidden !important;
        }

        .community-shell .community-ad-rail,
        .community-shell .community-ad-rail-left,
        .community-shell .community-ad-rail-right {
            display: none !important;
        }

        .community-shell .community-main-column {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
        }

        .community-shell .community-ad-slot--rail-vertical {
            min-height: 200px;
            width: 100%;
            max-width: 220px;
            margin: 0 auto;
            border-radius: 14px;
            border: 1px dashed rgba(110, 75, 160, 0.32);
            background: rgba(12, 8, 26, 0.38);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 20px 8px;
            opacity: 0.52;
        }

        .community-shell .community-ad-slot-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.16em;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            color: rgba(132, 118, 175, 0.55);
            user-select: none;
        }

        #boardView .ad-slot-feed {
            width: 100%;
            max-width: 100%;
            margin: 0;
            min-height: 100px;
            border-radius: 14px;
            border: 1px dashed rgba(110, 75, 160, 0.34);
            background: rgba(12, 8, 26, 0.4);
            box-sizing: border-box;
        }

        .ad-slot-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: inherit;
            width: 100%;
            padding: 12px 10px;
            box-sizing: border-box;
        }

        .ad-slot-placeholder-text {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.42em;
            color: rgba(132, 118, 175, 0.34);
            user-select: none;
        }

        @media (min-width: 1024px) and (max-width: 1279px) {

            #boardView.community-shell .community-wide-shell,
            #writeView.community-shell .community-wide-shell,
            #postDetailView.community-shell .community-wide-shell {
                max-width: min(100%, 980px);
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (min-width: 1280px) {

            /* 광고 OFF: 3열 해제 · 중앙 본문만 max-width 유지(레일 DOM은 display:none) */
            body:not(.ads-enabled) #boardView.community-shell .community-wide-shell,
            body:not(.ads-enabled) #writeView.community-shell .community-wide-shell,
            body:not(.ads-enabled) #postDetailView.community-shell .community-wide-shell {
                max-width: min(100%, 1040px);
                margin-left: auto;
                margin-right: auto;
                padding-left: 24px;
                padding-right: 24px;
                box-sizing: border-box;
            }

            body:not(.ads-enabled) .community-shell .community-main-column {
                width: 100%;
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            body.ads-enabled .community-shell .community-wide-shell {
                display: grid;
                grid-template-columns: 180px minmax(760px, 1040px) 180px;
                max-width: min(100%, 1500px);
                margin-left: auto;
                margin-right: auto;
                padding: 0 24px;
                gap: 32px;
                align-items: start;
                box-sizing: border-box;
            }

            body.ads-enabled .community-shell .community-ad-rail-left,
            body.ads-enabled .community-shell .community-ad-rail-right {
                display: block !important;
            }

            /* rail은 그리드 셀 높이를 늘리지 않음 · sticky는 내부 슬롯만 */
            .community-shell .community-ad-rail {
                position: static;
                top: auto;
                align-self: start;
                justify-self: stretch;
                width: 100%;
                height: auto;
                min-height: 0;
            }

            .community-shell .community-main-column {
                align-self: start;
                min-height: 0;
            }

            body.ads-enabled .community-shell .community-ad-slot--rail-vertical {
                position: sticky;
                top: 122px;
                max-width: 200px;
                width: 100%;
                margin: 0 auto;
                min-height: 160px;
            }

            body.ads-enabled .community-shell#postDetailView .ad-slot-inline--post-detail {
                display: none !important;
            }

            .community-shell#postDetailView .post-detail-content {
                max-width: min(68ch, 100%);
            }
        }

        @media (max-width: 1023px) {
            body.ads-enabled #boardView .ad-slot-feed {
                display: none !important;
            }

            body.ads-enabled #postDetailView .ad-slot-inline--post-detail {
                display: none !important;
            }
        }

        .board-feed-surface .board-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8px 16px 100px;
            box-sizing: border-box;
            min-height: 200px;
        }

        .board-feed-surface .board-empty[hidden] {
            display: none !important;
        }

        .board-feed-surface .board-empty-inner {
            max-width: 300px;
        }

        .board-feed-surface .board-empty-panel[hidden] {
            display: none !important;
        }

        .board-feed-surface .board-empty-line--primary {
            font-size: 15px;
            font-weight: 600;
            color: rgba(186, 172, 220, 0.52);
            margin: 0 0 6px 0;
            letter-spacing: -0.03em;
            line-height: 1.4;
        }

        .board-feed-surface .board-empty-line--secondary {
            font-size: 13px;
            font-weight: 500;
            color: rgba(140, 128, 175, 0.45);
            margin: 0 0 18px 0;
            line-height: 1.5;
        }

        .board-feed-surface .board-empty-line--search {
            margin: 0;
        }

        .board-feed-surface .board-empty-write-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 20px;
            border-radius: 12px;
            border: 1px solid rgba(120, 80, 180, 0.35);
            background: rgba(32, 22, 58, 0.55);
            color: rgba(200, 188, 235, 0.75);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .board-feed-surface .board-empty-write-btn:hover,
        .board-feed-surface .board-empty-write-btn:focus-visible {
            border-color: rgba(168, 85, 247, 0.4);
            color: rgba(230, 220, 255, 0.9);
            background: rgba(48, 32, 88, 0.6);
            outline: none;
        }

        .board-feed-surface .board-empty-write-btn:active {
            transform: scale(0.98);
        }

        .board-feed-surface .board-post-card {
            border-radius: 18px;
            padding: 16px 18px 14px;
            background: linear-gradient(155deg, rgba(42, 26, 82, 0.55) 0%, rgba(18, 12, 36, 0.92) 100%);
            border: 1px solid rgba(139, 92, 246, 0.22);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 8px 28px rgba(0, 0, 0, 0.35),
                0 0 24px rgba(88, 45, 160, 0.08);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .board-feed-surface .board-post-card:active {
            border-color: rgba(168, 85, 247, 0.35);
        }

        .board-feed-surface .board-post-card--rich {
            padding: 18px 18px 16px;
        }

        .board-feed-surface .board-post-card--with-thumb .post-card-thumbnail {
            width: 100%;
            margin: 0 0 12px 0;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: rgba(12, 8, 28, 0.65);
            aspect-ratio: 16 / 10;
            max-height: 160px;
        }

        .board-feed-surface .board-post-card--with-thumb .post-card-thumbnail-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @media (min-width: 520px) {
            .board-feed-surface .board-post-card--with-thumb {
                display: grid;
                grid-template-columns: minmax(104px, 120px) 1fr;
                column-gap: 14px;
                align-items: start;
            }

            .board-feed-surface .board-post-card--with-thumb .post-card-thumbnail {
                grid-column: 1;
                grid-row: 1 / -1;
                margin-bottom: 0;
                max-height: none;
                min-height: 108px;
                align-self: stretch;
            }

            .board-feed-surface .board-post-card--with-thumb .board-post-head {
                grid-column: 2;
            }

            .board-feed-surface .board-post-card--with-thumb .board-post-badge-row {
                grid-column: 2;
            }

            .board-feed-surface .board-post-card--with-thumb .board-post-title {
                grid-column: 2;
            }

            .board-feed-surface .board-post-card--with-thumb .board-post-snippet {
                grid-column: 2;
            }

            .board-feed-surface .board-post-card--with-thumb .board-post-stats {
                grid-column: 2;
            }
        }

        .board-feed-surface .board-post-badge-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .board-feed-surface .board-post-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .board-feed-surface .board-post-badge--sub {
            background: rgba(56, 189, 248, 0.14);
            border: 1px solid rgba(56, 189, 248, 0.35);
            color: rgba(224, 242, 254, 0.95);
        }

        .board-feed-surface .board-post-badge--contact {
            background: rgba(16, 185, 129, 0.16);
            border: 1px solid rgba(16, 185, 129, 0.38);
            color: rgba(209, 250, 229, 0.95);
        }

        .board-feed-surface .board-post-badge--price {
            background: rgba(251, 191, 36, 0.12);
            border: 1px solid rgba(251, 191, 36, 0.45);
            color: #ffe9a3;
            font-size: 13px;
        }

        #boardView .board-notice-bar {
            margin: 0 0 10px;
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid rgba(139, 92, 246, 0.22);
            background: rgba(30, 20, 52, 0.55);
            font-size: 12px;
            line-height: 1.45;
            color: rgba(196, 181, 230, 0.92);
            letter-spacing: -0.02em;
        }

        #boardView .board-notice-bar__line {
            margin: 0;
        }

        #boardView .board-notice-bar__line+.board-notice-bar__line {
            margin-top: 4px;
        }

        .board-feed-surface .board-post-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(168, 85, 247, 0.95);
        }

        .board-feed-surface .board-post-cat {
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(168, 85, 247, 0.12);
            border: 1px solid rgba(168, 85, 247, 0.22);
            color: rgba(226, 219, 253, 0.88);
            font-size: 10px;
            text-transform: none;
        }

        .board-feed-surface .board-post-dot {
            color: rgba(148, 130, 190, 0.45);
            font-weight: 400;
        }

        .board-feed-surface .board-post-author {
            color: rgba(200, 190, 235, 0.65);
            font-weight: 500;
        }

        .board-feed-surface .board-post-time {
            color: rgba(160, 150, 195, 0.55);
            font-weight: 500;
        }

        .board-feed-surface .board-post-edited {
            color: rgba(150, 140, 180, 0.48);
            font-weight: 500;
            font-size: 10px;
        }

        .board-feed-surface .board-post-title {
            font-size: 16px;
            font-weight: 700;
            color: #faf7ff;
            letter-spacing: -0.035em;
            margin: 0 0 8px 0;
            line-height: 1.38;
        }

        .board-feed-surface .board-post-snippet {
            font-size: 13px;
            line-height: 1.55;
            color: rgba(215, 208, 242, 0.72);
            margin: 0 0 14px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .board-feed-surface .board-post-stats {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
            padding-top: 12px;
            margin-top: 2px;
            border-top: 1px solid rgba(139, 92, 246, 0.12);
            font-size: 11px;
            font-weight: 600;
            color: rgba(170, 158, 210, 0.68);
        }

        .board-feed-surface .board-post-stats--compact {
            padding-top: 10px;
            margin-top: 0;
            gap: 0;
        }

        .board-feed-surface .board-post-mini-stats {
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.02em;
            color: rgba(148, 138, 188, 0.62);
            line-height: 1.4;
        }

        .board-feed-surface .board-post-stat {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .board-feed-surface .board-post-stat--time {
            margin-left: auto;
            color: rgba(148, 138, 185, 0.75);
            font-weight: 500;
        }

        #boardView .board-fab {
            position: fixed;
            right: max(18px, env(safe-area-inset-right, 18px));
            bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px));
            z-index: 40;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 52px;
            padding: 0 20px;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-family: inherit;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #fff;
            background: linear-gradient(135deg, var(--nana-main-purple), var(--nana-light-purple));
            box-shadow:
                0 4px 22px rgba(139, 92, 246, 0.45),
                0 2px 8px rgba(0, 0, 0, 0.35),
                0 1px 0 rgba(255, 255, 255, 0.15) inset;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #boardView .board-fab:hover {
            box-shadow:
                0 6px 28px rgba(168, 85, 247, 0.5),
                0 2px 10px rgba(0, 0, 0, 0.38),
                0 1px 0 rgba(255, 255, 255, 0.18) inset;
        }

        #boardView .board-fab:active {
            transform: scale(0.96);
        }

        #boardView .board-fab-icon {
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
            opacity: 0.95;
        }

        #boardView .board-fab-label {
            line-height: 1.2;
        }

        @media (max-width: 480px) {
            .board-feed-surface .board-feed {
                padding-left: 14px;
                padding-right: 14px;
                padding-bottom: 96px;
                gap: 18px;
            }

            .board-feed-surface .board-empty {
                padding-left: 14px;
                padding-right: 14px;
                padding-bottom: 96px;
                min-height: 180px;
            }

            .board-feed-surface .board-empty-line--primary {
                font-size: 14px;
            }

            .board-feed-surface .board-empty-line--secondary {
                font-size: 12px;
                margin-bottom: 16px;
            }

            #boardView .board-tab {
                padding: 9px 14px;
                font-size: 12px;
                border-radius: 12px;
            }

            #boardView .board-sort-bar {
                padding-left: 14px;
                padding-right: 14px;
                padding-top: 0;
                padding-bottom: 2px;
            }

            #boardView .board-sort-pills {
                gap: 3px 4px;
            }

            #boardView .board-sort-btn {
                padding: 4px 8px;
                font-size: 10px;
            }

            #boardView .board-fab {
                min-height: 50px;
                padding: 0 18px;
                font-size: 14px;
                right: max(14px, env(safe-area-inset-right, 14px));
            }
        }

        /* 글쓰기 writeView · 영상 등록 videoRegisterView (동일 헤더/폼 규칙) */
        #writeView.write-view.content-view,
        #writeView.content-view,
        #videoRegisterView.video-write-view.content-view,
        #videoRegisterView.content-view {
            background: linear-gradient(135deg, #20123a 68%, #271254 100%);
        }

        #writeView .write-app-bar,
        #videoRegisterView .video-write-app-bar {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 8px;
            padding-left: 6px;
            padding-right: 12px;
        }

        #writeView .write-app-bar .view-app-bar-title,
        #videoRegisterView .video-write-app-bar .view-app-bar-title {
            padding: 0 4px;
        }

        #writeView .back-from-write-btn,
        #videoRegisterView .back-from-video-write-btn {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: var(--nana-main-purple);
            border: none;
            border-radius: 12px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        #writeView .back-from-write-btn:hover,
        #writeView .back-from-write-btn:focus-visible,
        #videoRegisterView .back-from-video-write-btn:hover,
        #videoRegisterView .back-from-video-write-btn:focus-visible {
            background: rgba(168, 85, 247, 0.15);
            color: var(--nana-light-purple);
        }

        #writeView .write-submit-btn,
        #videoRegisterView .video-submit-btn {
            position: relative;
            z-index: 25;
            pointer-events: auto;
            flex-shrink: 0;
            padding: 9px 16px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #fff;
            background: linear-gradient(135deg, var(--nana-pink), var(--nana-main-purple), var(--nana-blue));
            box-shadow:
                0 2px 12px rgba(236, 72, 153, 0.35),
                0 1px 0 rgba(255, 255, 255, 0.12) inset;
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #writeView .write-submit-btn:hover,
        #videoRegisterView .video-submit-btn:hover {
            filter: brightness(1.06);
            box-shadow:
                0 4px 18px rgba(168, 85, 247, 0.4),
                0 1px 0 rgba(255, 255, 255, 0.15) inset;
        }

        #writeView .write-submit-btn:active,
        #videoRegisterView .video-submit-btn:active {
            transform: scale(0.96);
        }

        #writeView .write-submit-btn:focus-visible,
        #videoRegisterView .video-submit-btn:focus-visible {
            outline: 2px solid rgba(168, 85, 247, 0.65);
            outline-offset: 2px;
        }

        #writeView.content-view--subpage .view-app-body.write-view-body {
            padding: var(--subpage-body-gap, 18px) 16px 28px;
            max-width: 100%;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        #videoRegisterView.content-view--subpage .view-app-body.video-write-body {
            padding: var(--subpage-body-gap, 18px) 16px 28px;
            max-width: 560px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        #writeView .write-form,
        #videoRegisterView .video-register-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #writeView .write-field,
        #videoRegisterView .video-form-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #writeView .write-label,
        #videoRegisterView .video-form-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(200, 190, 235, 0.55);
        }

        #writeView .write-input,
        #videoRegisterView .video-form-input,
        #videoRegisterView .video-form-textarea,
        #videoRegisterView .video-form-select {
            width: 100%;
            box-sizing: border-box;
            border-radius: 14px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: rgba(22, 14, 42, 0.85);
            color: #f3edff;
            font-family: inherit;
            font-size: 16px;
            transition:
                border-color 0.22s ease,
                box-shadow 0.22s ease,
                background 0.22s ease;
        }

        #writeView .write-input::placeholder,
        #videoRegisterView .video-form-input::placeholder,
        #videoRegisterView .video-form-textarea::placeholder {
            color: rgba(180, 170, 220, 0.38);
        }

        #writeView .write-input:focus,
        #videoRegisterView .video-form-input:focus,
        #videoRegisterView .video-form-textarea:focus,
        #videoRegisterView .video-form-select:focus {
            outline: none;
            border-color: rgba(168, 85, 247, 0.55);
            background: rgba(28, 18, 52, 0.92);
            box-shadow:
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 0 20px rgba(88, 45, 160, 0.22);
        }

        #writeView .write-select,
        #videoRegisterView .video-form-select {
            padding: 14px 16px;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c4b5fd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
        }

        #writeView .write-title-input,
        #videoRegisterView .video-form-input {
            padding: 14px 16px;
        }

        #writeView .write-textarea,
        #videoRegisterView .video-form-textarea {
            min-height: 140px;
            padding: 16px 18px;
            line-height: 1.6;
            resize: vertical;
        }

        #writeView .write-textarea {
            min-height: 280px;
        }

        #writeView .write-input,
        #writeView .write-select,
        #writeView .write-textarea {
            font-size: 16px;
        }

        #writeView .write-title-input,
        #writeView .write-select {
            min-height: 44px;
            box-sizing: border-box;
        }

        #writeView .pill-glow {
            position: relative;
            overflow: visible;
            padding: 8px 2px;
            box-sizing: border-box;
        }

        #writeView .pill-selector {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            gap: 10px 12px;
            width: 100%;
            box-sizing: border-box;
            padding: 8px 0;
            overflow: visible;
            -webkit-overflow-scrolling: touch;
            touch-action: manipulation;
        }

        #writeView .pill-selector--sub {
            gap: 10px 12px;
        }

        #writeView .pill-option {
            position: relative;
            flex: 0 1 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            min-width: 96px;
            min-height: 44px;
            padding: 10px 24px 10px 40px;
            border-radius: 999px;
            border: 1px solid rgba(168, 148, 220, 0.35);
            background: rgba(22, 14, 42, 0.55);
            color: rgba(230, 220, 255, 0.88);
            font-family: inherit;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.1;
            white-space: nowrap;
            text-align: center;
            cursor: pointer;
            box-sizing: border-box;
            transition:
                background 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease,
                box-shadow 0.22s ease,
                transform 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #writeView .pill-option-sub {
            min-width: 88px;
            min-height: 44px;
            padding: 10px 20px 10px 36px;
            font-weight: 600;
        }

        #writeView .pill-option-label {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            text-align: center;
        }

        #writeView .pill-option-check {
            position: absolute;
            left: 16px;
            top: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1em;
            height: 1.1em;
            margin: 0;
            font-size: 0.88em;
            line-height: 1;
            opacity: 0;
            transform: translateY(-50%) scale(0.82);
            pointer-events: none;
            transition:
                opacity 0.2s ease,
                transform 0.2s ease;
        }

        #writeView .pill-option.active .pill-option-check {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }

        #writeView .pill-option:hover {
            background: rgba(36, 24, 62, 0.72);
            border-color: rgba(192, 170, 245, 0.45);
            color: #f6f0ff;
        }

        #writeView .pill-option:active {
            transform: scale(0.992);
        }

        #writeView .pill-option:focus {
            outline: none;
        }

        #writeView .pill-option:focus-visible {
            outline: none;
            box-shadow:
                0 0 0 2px rgba(12, 6, 28, 0.95),
                0 0 0 4px rgba(192, 132, 252, 0.55);
        }

        #writeView .pill-option.active {
            border-color: transparent;
            color: #fff;
            background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 42%, #4c1d95 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 0 12px rgba(139, 92, 246, 0.38),
                0 4px 16px rgba(91, 33, 182, 0.4);
        }

        #writeView .pill-option.active:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #5b21b6 100%);
            color: #fff;
        }

        #writeView .pill-option.active:focus-visible {
            box-shadow:
                0 0 0 2px rgba(12, 6, 28, 0.95),
                0 0 0 3px rgba(216, 180, 254, 0.45),
                0 0 12px rgba(139, 92, 246, 0.35),
                0 4px 14px rgba(91, 33, 182, 0.38);
        }

        @media (max-width: 768px) {
            #writeView .pill-option {
                min-width: 92px;
                padding: 9px 20px 9px 36px;
                font-size: 14px;
                min-height: 42px;
            }

            #writeView .pill-option-sub {
                min-width: 84px;
                padding: 9px 16px 9px 32px;
                font-size: 13px;
            }

            #writeView .pill-option-check {
                left: 13px;
                font-size: 0.76em;
                width: 1em;
                height: 1em;
            }
        }

        @media (max-width: 380px) {
            #writeView .pill-option-check {
                left: 11px;
                font-size: 0.7em;
            }

            #writeView .pill-option {
                min-width: 88px;
                padding: 8px 16px 8px 32px;
            }

            #writeView .pill-option-sub {
                min-width: 80px;
                padding: 8px 14px 8px 28px;
            }
        }

        #writeView .image-upload-help {
            margin: 0 0 8px 0;
            font-size: 14px;
            line-height: 1.5;
            font-weight: 500;
            color: rgba(198, 188, 232, 0.72);
        }

        #writeView .image-upload-help--market {
            margin-top: -4px;
            font-weight: 700;
            color: rgba(250, 220, 160, 0.92);
        }

        #writeView .image-upload-area {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: linear-gradient(155deg, rgba(52, 32, 98, 0.35) 0%, rgba(18, 12, 36, 0.75) 100%);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
        }

        #writeView .image-upload-area--market-emphasis {
            border-color: rgba(251, 191, 36, 0.42);
            background: linear-gradient(155deg, rgba(88, 52, 28, 0.35) 0%, rgba(36, 22, 52, 0.82) 100%);
            box-shadow:
                0 0 0 1px rgba(251, 191, 36, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.05) inset;
        }

        #writeView .image-upload-pick-wrap {
            position: relative;
            flex: 0 0 auto;
            min-width: 140px;
            min-height: 44px;
        }

        #writeView .write-image-file-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            font-size: 16px;
            z-index: 2;
        }

        #writeView .image-upload-pick-btn {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 18px;
            border-radius: 12px;
            border: 1px solid rgba(168, 85, 247, 0.45);
            background: rgba(72, 38, 130, 0.55);
            color: #f6f0ff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.02em;
            cursor: pointer;
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
            pointer-events: none;
        }

        #writeView .image-upload-pick-wrap:hover .image-upload-pick-btn,
        #writeView .image-upload-pick-wrap:focus-within .image-upload-pick-btn {
            border-color: rgba(236, 72, 153, 0.55);
            background: rgba(88, 48, 150, 0.72);
            box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18);
        }

        #writeView .image-upload-count {
            font-size: 13px;
            font-weight: 700;
            color: rgba(180, 168, 220, 0.85);
        }

        #writeView .write-image-error {
            min-height: 1.25em;
            margin: 8px 0 0 0;
            font-size: 13px;
            font-weight: 600;
            color: rgba(251, 113, 133, 0.95);
        }

        #writeView .image-preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        #writeView .image-preview-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(139, 92, 246, 0.25);
            background: rgba(10, 8, 22, 0.6);
        }

        #writeView .image-preview-item-img {
            display: block;
            width: 100%;
            height: 100px;
            object-fit: cover;
        }

        #writeView .image-preview-item-name {
            display: block;
            padding: 6px 8px 40px 8px;
            font-size: 11px;
            font-weight: 600;
            color: rgba(180, 170, 220, 0.75);
            word-break: break-all;
            line-height: 1.3;
        }

        #writeView .image-remove-btn {
            position: absolute;
            right: 6px;
            bottom: 6px;
            min-height: 36px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid rgba(248, 113, 113, 0.45);
            background: rgba(80, 20, 30, 0.75);
            color: #ffe4e6;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        #writeView .image-remove-btn:hover,
        #writeView .image-remove-btn:focus-visible {
            outline: none;
            background: rgba(120, 30, 40, 0.88);
            border-color: rgba(252, 165, 165, 0.65);
        }

        @media (max-width: 480px) {
            #writeView .image-preview-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #writeView .write-view-body {
                padding-left: 14px;
                padding-right: 14px;
            }

            #videoRegisterView .video-write-body {
                padding-left: 14px;
                padding-right: 14px;
            }

            #writeView .write-textarea {
                min-height: 220px;
            }

            #writeView .write-submit-btn,
            #videoRegisterView .video-submit-btn {
                padding: 8px 12px;
                font-size: 13px;
            }
        }

        /* 게시글 상세 postDetailView */
        #postDetailView.content-view {
            background: linear-gradient(135deg, #20123a 68%, #271254 100%);
        }

        #postDetailView .post-detail-app-bar {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) 44px;
            align-items: center;
            column-gap: 8px;
            padding-left: 6px;
            padding-right: 8px;
        }

        /* 메뉴 열림 시 상단바 blur가 드롭다운 텍스트까지 번지지 않게 */
        #postDetailView .post-detail-app-bar:has(.post-detail-action-menu:not(.hidden)) {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        #postDetailView .post-detail-app-bar .view-app-bar-title {
            padding: 0 4px;
        }

        #postDetailView .back-from-post-detail-btn,
        #videoDetailView .back-from-post-detail-btn {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: var(--nana-main-purple);
            border: none;
            border-radius: 12px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .back-from-post-detail-btn:hover,
        #postDetailView .back-from-post-detail-btn:focus-visible,
        #videoDetailView .back-from-post-detail-btn:hover,
        #videoDetailView .back-from-post-detail-btn:focus-visible {
            background: rgba(168, 85, 247, 0.15);
            color: var(--nana-light-purple);
        }

        #postDetailView .post-detail-menu-wrap {
            position: relative;
            justify-self: end;
            width: 44px;
            height: 44px;
            z-index: 2;
            isolation: isolate;
        }

        #postDetailView .post-detail-menu-btn {
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 12px;
            color: rgba(215, 205, 245, 0.85);
            font-size: 22px;
            line-height: 1;
            letter-spacing: 0.12em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-detail-menu-btn:hover,
        #postDetailView .post-detail-menu-btn:focus-visible {
            background: rgba(168, 85, 247, 0.18);
            color: #fff;
        }

        #postDetailView .post-detail-report-btn {
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 12px;
            color: rgba(248, 180, 180, 0.92);
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-detail-report-btn:hover,
        #postDetailView .post-detail-report-btn:focus-visible {
            background: rgba(239, 68, 68, 0.14);
            color: #fecaca;
            outline: none;
        }

        #postDetailView .post-detail-report-btn.hidden {
            display: none !important;
        }

        #postDetailView .post-detail-menu-wrap:has(.post-detail-report-btn:not(.hidden)):not(.post-detail-menu-wrap--admin) .post-detail-menu-btn {
            display: none;
        }

        .post-report-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: rgba(5, 3, 12, 0.62);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .post-report-panel {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(400px, calc(100vw - 24px));
            max-height: min(88vh, 640px);
            overflow-y: auto;
            z-index: 1210;
            padding: 18px 18px 16px;
            border-radius: 16px;
            background: rgba(22, 12, 42, 0.98);
            border: 1px solid rgba(168, 85, 247, 0.4);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            gap: 10px;
            -webkit-overflow-scrolling: touch;
        }

        .post-report-title {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            color: #f5f3ff;
        }

        .post-report-preview {
            margin: 0;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(139, 92, 246, 0.2);
            font-size: 12px;
            line-height: 1.5;
            color: rgba(220, 210, 250, 0.92);
            max-height: 7.5em;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .post-report-fieldset {
            margin: 0;
            padding: 0;
            border: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .post-report-legend {
            padding: 0;
            font-size: 12px;
            font-weight: 700;
            color: rgba(200, 190, 235, 0.95);
        }

        .post-report-radio-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: rgba(230, 220, 255, 0.9);
            cursor: pointer;
        }

        .post-report-radio-label input {
            accent-color: #a855f7;
        }

        .post-report-detail-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(200, 190, 235, 0.9);
        }

        .post-report-detail-input {
            width: 100%;
            box-sizing: border-box;
            min-height: 72px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(139, 92, 246, 0.35);
            background: rgba(10, 6, 22, 0.85);
            color: rgba(245, 240, 255, 0.95);
            font-family: inherit;
            font-size: 16px;
            resize: vertical;
        }

        .post-report-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 4px;
        }

        .post-report-btn {
            padding: 10px 16px;
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            -webkit-tap-highlight-color: transparent;
        }

        .post-report-btn--ghost {
            background: transparent;
            color: rgba(200, 190, 235, 0.9);
            border: 1px solid rgba(139, 92, 246, 0.35);
        }

        .post-report-btn--primary {
            color: #0f0a15;
            background: linear-gradient(135deg, #e9d5ff, #c4b5fd);
        }

        .post-report-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        #postDetailView .post-detail-action-menu {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            min-width: 156px;
            padding: 8px 0;
            border-radius: 16px;
            background: linear-gradient(165deg, #2c1c4e 0%, #160e2a 100%);
            border: 1px solid rgba(139, 92, 246, 0.35);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(168, 85, 247, 0.12);
            z-index: 60;
        }

        #postDetailView .post-detail-action-menu:not(.hidden) {
            animation: postDetailMenuIn 0.2s ease;
        }

        @keyframes postDetailMenuIn {
            from {
                opacity: 0;
                transform: translateY(-6px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #postDetailView .post-detail-menu-item {
            display: block;
            width: 100%;
            padding: 12px 18px;
            border: none;
            background: transparent;
            text-align: left;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            color: rgba(236, 232, 255, 0.92);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-detail-menu-item:hover,
        #postDetailView .post-detail-menu-item:focus-visible {
            background: rgba(168, 85, 247, 0.18);
            outline: none;
        }

        #postDetailView .post-detail-menu-item--danger {
            color: rgba(251, 165, 180, 0.95);
        }

        #postDetailView .post-detail-menu-item--danger:hover,
        #postDetailView .post-detail-menu-item--danger:focus-visible {
            background: rgba(236, 72, 153, 0.14);
        }

        /* 본문만 dim/blur — sticky 상단바(z-index:50)와 드롭다운 아래에 둠 */
        #postDetailView .post-detail-menu-backdrop {
            position: fixed;
            inset: 0;
            z-index: 45;
            background: rgba(8, 4, 18, 0.4);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        #postDetailView.content-view--subpage .view-app-body.post-detail-body {
            padding: var(--subpage-body-gap, 20px) 16px var(--subpage-scroll-pad-bottom);
            max-width: 100%;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        #postDetailView .post-detail-article {
            border-radius: 20px;
            padding: 22px 20px 26px;
            background: linear-gradient(155deg, rgba(42, 26, 82, 0.45) 0%, rgba(18, 12, 36, 0.88) 100%);
            border: 1px solid rgba(139, 92, 246, 0.22);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 12px 36px rgba(0, 0, 0, 0.35);
        }

        #postDetailView .post-detail-meta-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        #postDetailView .post-detail-cat {
            padding: 5px 11px;
            border-radius: 8px;
            background: rgba(168, 85, 247, 0.14);
            border: 1px solid rgba(168, 85, 247, 0.28);
            color: rgba(226, 219, 253, 0.92);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        #postDetailView .post-detail-meta-line {
            flex: 1;
            min-width: 0;
            font-size: 12px;
            font-weight: 600;
            color: rgba(180, 168, 220, 0.72);
            line-height: 1.45;
            word-break: break-word;
        }

        #postDetailView .post-detail-extra-line {
            margin: -6px 0 14px 0;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.55;
            color: rgba(196, 181, 236, 0.88);
            word-break: break-word;
        }

        #postDetailView .post-detail-extra-wrap {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 14px;
            max-width: 100%;
        }

        #postDetailView .post-detail-extra-price {
            font-size: 13px;
            font-weight: 700;
            color: rgba(250, 232, 160, 0.95);
        }

        #postDetailView .post-contact-row {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            max-width: 100%;
        }

        #postDetailView .post-detail-extra-contact-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(158, 148, 198, 0.78);
        }

        #postDetailView .post-contact-links {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            max-width: 100%;
        }

        #postDetailView .post-detail-contact-plain {
            font-size: 13px;
            font-weight: 600;
            color: rgba(206, 196, 238, 0.92);
            white-space: pre-wrap;
            word-break: break-word;
        }

        .safe-link-pill,
        .safe-link-contact {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            max-width: 100%;
            min-height: 36px;
            padding: 7px 14px 7px 12px;
            margin: 2px 2px 2px 0;
            border-radius: 999px;
            border: 1px solid rgba(168, 85, 247, 0.42);
            background: linear-gradient(155deg, rgba(72, 38, 130, 0.55) 0%, rgba(28, 18, 52, 0.88) 100%);
            color: #f3ecff;
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.25;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease,
                color 0.2s ease,
                transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .safe-link-contact {
            padding-left: 13px;
            padding-right: 16px;
            border-color: rgba(192, 132, 252, 0.48);
            background: linear-gradient(155deg, rgba(88, 48, 150, 0.62) 0%, rgba(32, 20, 62, 0.92) 100%);
        }

        .safe-link-pill:hover,
        .safe-link-pill:focus-visible,
        .safe-link-contact:hover,
        .safe-link-contact:focus-visible {
            outline: none;
            border-color: rgba(236, 72, 153, 0.55);
            background: linear-gradient(155deg, rgba(100, 52, 168, 0.72) 0%, rgba(36, 22, 68, 0.95) 100%);
            box-shadow:
                0 0 0 1px rgba(168, 85, 247, 0.2),
                0 4px 18px rgba(88, 45, 160, 0.35);
            color: #fff;
        }

        .safe-link-pill:focus-visible,
        .safe-link-contact:focus-visible {
            outline: 2px solid rgba(236, 72, 153, 0.65);
            outline-offset: 2px;
        }

        .safe-link-pill:active,
        .safe-link-contact:active {
            transform: scale(0.98);
        }

        .safe-link-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 1.1em;
            height: 1.1em;
            opacity: 0.88;
        }

        .safe-link-icon::before {
            content: '↗';
            display: block;
            font-weight: 800;
            font-size: 11px;
            line-height: 1;
            color: rgba(216, 180, 254, 0.95);
        }

        .safe-link-text {
            min-width: 0;
            max-width: 16rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #postDetailView .post-detail-content .safe-link-pill {
            font-size: 13px;
            padding: 8px 15px 8px 12px;
            min-height: 38px;
        }

        #postDetailView .post-detail-content .safe-link-text {
            max-width: 20rem;
        }

        #postDetailView .post-detail-comment-text .safe-link-pill {
            font-size: 12px;
            padding: 5px 11px 5px 9px;
            min-height: 34px;
            margin: 1px 3px 1px 0;
        }

        #postDetailView .post-detail-comment-text .safe-link-text {
            max-width: 11rem;
        }

        #videoDetailView .video-detail-comment-text .safe-link-pill {
            font-size: 12px;
            padding: 5px 11px 5px 9px;
            min-height: 34px;
            margin: 1px 3px 1px 0;
        }

        #videoDetailView .video-detail-comment-text .safe-link-text {
            max-width: 11rem;
        }

        #postDetailView .post-detail-extra-line .safe-link-contact {
            min-height: 38px;
            padding: 8px 16px 8px 12px;
        }

        #postDetailView .post-detail-extra-line.hidden {
            display: none !important;
        }

        #postDetailView .post-detail-title {
            font-size: 1.28rem;
            font-weight: 800;
            letter-spacing: -0.04em;
            color: #faf7ff;
            margin: 0 0 10px 0;
            line-height: 1.35;
        }

        #postDetailView .post-detail-title-stats {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            margin: 0 0 18px 0;
            font-size: 11px;
            font-weight: 500;
            color: rgba(148, 138, 185, 0.72);
        }

        #postDetailView .post-detail-title {
            margin-bottom: 22px;
        }

        #postDetailView .post-detail-title-stats {
            margin-bottom: 28px;
        }


        #postDetailView .post-detail-stat-muted strong {
            font-weight: 600;
            color: rgba(175, 165, 210, 0.85);
        }

        #postDetailView .post-detail-stat-sep {
            color: rgba(110, 98, 150, 0.45);
            font-weight: 400;
            user-select: none;
        }

        #postDetailView .post-detail-react-btn {
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
            font-family: inherit;
            font-size: 11px;
            font-weight: 500;
            color: rgba(148, 138, 185, 0.78);
            cursor: pointer;
            border-radius: 8px;
            transition: color 0.15s ease, background 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-detail-react-btn:hover:not(:disabled),
        #postDetailView .post-detail-react-btn:focus-visible:not(:disabled) {
            color: rgba(200, 190, 235, 0.92);
            background: rgba(88, 55, 140, 0.2);
        }

        #postDetailView .post-detail-react-btn:disabled {
            cursor: default;
            opacity: 0.45;
        }

        #postDetailView .post-detail-react-btn span {
            font-weight: 600;
            color: rgba(165, 155, 200, 0.88);
        }

        #postDetailView .post-detail-content {
            font-size: 15px;
            line-height: 1.9;
            color: rgba(220, 212, 248, 0.9);
            white-space: pre-wrap;
            word-break: break-word;
            padding-top: 16px;
            margin-bottom: 16px;
        }

        #postDetailView .ad-slot-inline--post-detail {
            width: 100%;
            max-width: 560px;
            margin: 0 auto 22px;
            min-height: 88px;
            border-radius: 14px;
            border: 1px dashed rgba(110, 75, 160, 0.38);
            background: rgba(12, 8, 26, 0.38);
            box-sizing: border-box;
        }

        #postDetailView .post-image-gallery {
            margin: 0 0 8px 0;
        }

        #postDetailView .post-image-gallery.hidden {
            display: none !important;
        }

        #postDetailView .post-image-main {
            margin-bottom: 12px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: rgba(8, 6, 20, 0.55);
        }

        #postDetailView .post-image-main-link {
            display: block;
            line-height: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
            font: inherit;
            cursor: zoom-in;
            border-radius: inherit;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-image-main-link:focus {
            outline: none;
        }

        #postDetailView .post-image-main-link:focus-visible {
            box-shadow: 0 0 0 2px rgba(12, 6, 28, 0.95), 0 0 0 4px rgba(192, 132, 252, 0.55);
        }

        #postDetailView .post-image-main-img {
            width: 100%;
            max-height: min(52vh, 360px);
            object-fit: contain;
            display: block;
            background: rgba(0, 0, 0, 0.2);
        }

        #postDetailView .post-image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
        }

        #postDetailView .post-image-grid-cell {
            display: block;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(139, 92, 246, 0.22);
            line-height: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            background: rgba(8, 6, 20, 0.45);
            font: inherit;
            cursor: zoom-in;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-image-grid-cell:focus {
            outline: none;
        }

        #postDetailView .post-image-grid-cell:hover,
        #postDetailView .post-image-grid-cell:focus-visible {
            outline: none;
            border-color: rgba(236, 72, 153, 0.45);
            box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2);
        }

        #postDetailView .post-image-grid-img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            display: block;
        }

        @media (max-width: 480px) {
            #postDetailView .post-image-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .image-viewer-modal {
            position: fixed;
            inset: 0;
            z-index: 9999;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        }

        .image-viewer-modal[hidden],
        .image-viewer-modal:not(.active) {
            display: none !important;
        }

        .image-viewer-modal.active {
            display: flex !important;
        }

        .image-viewer-backdrop {
            position: absolute;
            inset: 0;
            z-index: 0;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: rgba(6, 4, 14, 0.78);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .image-viewer-panel {
            position: relative;
            z-index: 1;
            max-width: 92vw;
            max-height: 82vh;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .image-viewer-img {
            max-width: 92vw;
            max-height: 82vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 14px;
            display: block;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
        }

        .image-viewer-close {
            position: fixed;
            top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
            right: max(10px, calc(env(safe-area-inset-right, 0px) + 6px));
            z-index: 10002;
            min-width: 44px;
            min-height: 44px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 999px;
            font-size: 26px;
            line-height: 1;
            font-weight: 500;
            color: #f3edff;
            cursor: pointer;
            background: rgba(30, 18, 52, 0.88);
            border: 1px solid rgba(168, 85, 247, 0.45);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
            transition:
                background 0.2s ease,
                transform 0.18s ease,
                box-shadow 0.2s ease;
            pointer-events: auto;
            -webkit-tap-highlight-color: transparent;
        }

        .image-viewer-close:hover {
            background: rgba(48, 28, 82, 0.95);
        }

        .image-viewer-close:active {
            transform: scale(0.96);
        }

        .image-viewer-close:focus {
            outline: none;
        }

        .image-viewer-close:focus-visible {
            box-shadow:
                0 0 0 2px rgba(12, 6, 28, 0.95),
                0 0 0 4px rgba(216, 180, 254, 0.65);
        }



        #postDetailView .post-detail-comments-section {
            margin-top: 4px;
            padding-top: 18px;
            border-top: 1px solid rgba(139, 92, 246, 0.14);
        }

        #postDetailView .post-detail-comments-label {
            margin: 0 0 12px 0;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(148, 138, 185, 0.55);
        }

        #postDetailView .post-detail-comments-count {
            display: inline-block;
            min-width: 1.1em;
            margin-left: 6px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: none;
            color: rgba(150, 140, 188, 0.58);
            transition: color 0.2s ease;
        }

        #postDetailView .post-detail-comment-list {
            list-style: none;
            margin: 0 0 16px 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-height: 240px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #postDetailView .post-detail-comment-list>li {
            list-style: none;
        }

        #postDetailView .post-detail-comment-item {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(12, 8, 28, 0.38);
            border: 1px solid rgba(139, 92, 246, 0.12);
        }

        #postDetailView .post-detail-comment-meta,
        #videoDetailView .video-detail-comment-meta {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            font-size: 11px;
            color: rgba(138, 128, 175, 0.65);
            margin-bottom: 6px;
        }

        #postDetailView .post-detail-comment-meta-main,
        #videoDetailView .video-detail-comment-meta-main {
            flex: 1;
            min-width: 0;
        }

        #postDetailView .post-detail-comment-meta .post-detail-comment-author,
        #videoDetailView .video-detail-comment-meta .video-detail-comment-author {
            font-weight: 600;
            color: rgba(175, 165, 210, 0.78);
        }

        .detail-comment-delete-btn {
            flex: 0 0 auto;
            min-height: 32px;
            min-width: 44px;
            padding: 4px 10px;
            margin: -4px -6px -4px 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: rgba(167, 139, 250, 0.55);
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
            cursor: pointer;
            transition:
                color 0.18s ease,
                background 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .detail-comment-delete-btn:hover,
        .detail-comment-delete-btn:focus-visible {
            outline: none;
            color: rgba(252, 165, 165, 0.95);
            background: rgba(120, 30, 50, 0.28);
        }

        .detail-comment-delete-btn:active {
            transform: scale(0.97);
        }

        .detail-comment-report-btn {
            flex: 0 0 auto;
            min-height: 32px;
            min-width: 44px;
            padding: 4px 10px;
            margin: -4px 0 -4px 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: rgba(167, 139, 250, 0.55);
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .detail-comment-report-btn:hover,
        .detail-comment-report-btn:focus-visible {
            outline: none;
            color: rgba(253, 224, 171, 0.95);
            background: rgba(69, 45, 10, 0.28);
        }

        #postDetailView .post-detail-comment-text {
            margin: 0;
            font-size: 13px;
            line-height: 1.55;
            color: rgba(210, 202, 238, 0.88);
            word-break: break-word;
        }

        #postDetailView .post-detail-comment-empty {
            margin: 0 0 14px 0;
            font-size: 12px;
            color: rgba(130, 120, 165, 0.45);
        }

        #postDetailView .post-detail-comment-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #postDetailView .post-detail-comment-input {
            width: 100%;
            box-sizing: border-box;
            min-height: 72px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(139, 92, 246, 0.22);
            background: rgba(18, 12, 36, 0.65);
            color: #f0eaff;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.45;
            resize: vertical;
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        #postDetailView .post-detail-comment-input::placeholder {
            color: rgba(150, 140, 185, 0.35);
        }

        #postDetailView .post-detail-comment-input:focus {
            outline: none;
            border-color: rgba(168, 85, 247, 0.45);
            box-shadow: 0 0 0 1px rgba(88, 45, 160, 0.2);
        }

        #postDetailView .post-detail-comment-submit {
            align-self: flex-end;
            min-height: 44px;
            min-width: 44px;
            padding: 10px 18px;
            border-radius: 10px;
            border: none;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            color: rgba(235, 228, 255, 0.95);
            background: rgba(88, 55, 140, 0.55);
            cursor: pointer;
            transition: background 0.15s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #postDetailView .post-detail-comment-submit:hover,
        #postDetailView .post-detail-comment-submit:focus-visible {
            background: rgba(110, 65, 165, 0.65);
            outline: none;
        }

        #postDetailView .post-detail-comment-submit:active:not(:disabled) {
            transform: scale(0.98);
        }

        #postDetailView .post-detail-comment-submit:disabled {
            opacity: 0.38;
            cursor: not-allowed;
            transform: none;
            background: rgba(60, 42, 95, 0.35);
            color: rgba(190, 182, 220, 0.45);
        }

        #postDetailView .post-detail-comment-submit:not(:disabled) {
            transition:
                background 0.2s ease,
                opacity 0.2s ease,
                transform 0.12s ease,
                box-shadow 0.2s ease;
        }

        #postDetailView .post-detail-comment-item--empty {
            list-style: none;
            background: transparent;
            border-style: dashed;
            font-size: 12px;
            color: rgba(130, 120, 165, 0.45);
            text-align: center;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        @media (max-width: 480px) {
            #postDetailView .post-detail-body {
                padding-left: 14px;
                padding-right: 14px;
            }

            #postDetailView .post-detail-title {
                font-size: 1.12rem;
            }
        }

        /* 데스크톱(1024px+): 홈/허브 미니멀 유지 · 커뮤니티 플로우 확장 */
        @media (min-width: 1024px) {
            .home-shell.app-home {
                --home-max-width: min(520px, 56vw);
            }

            .home-shell.app-home::before {
                width: min(520px, 46vw);
                height: min(520px, 46vw);
            }

            .home-tile {
                min-height: 228px;
                border-radius: 28px;
            }

            .home-rank-card__inner {
                min-height: 112px;
                padding: 22px 22px 22px 18px;
            }

            .home-rank-card__icon-wrap {
                width: 72px;
                height: 64px;
            }

            .home-rank-card__icon {
                width: 58px;
            }

            /* 커뮤니티 홈: 기본 820px 대비 데스크톱에서만 살짝 넓힘(이전 720px 상한 완화) */
            .hub-shell#communityView .community-launchpad,
            .hub-shell#communityView .launchpad-grid {
                max-width: min(94vw, 840px);
            }

            .hub-shell#communityView .launchpad-grid {
                gap: 22px;
            }

            .hub-shell#communityView .launchpad-tile {
                padding: 28px 24px 30px;
                min-height: 188px;
                max-height: 212px;
                border-radius: 21px;
            }

            .hub-shell#communityView .launchpad-intro {
                max-width: 38rem;
            }

            .hub-shell#communityView .launchpad-subintro {
                max-width: 28.5rem;
            }

            .hub-shell#communityView .community-quick-write-row {
                max-width: min(100%, 600px);
            }

            .hub-shell#rankView .rank-view-inner {
                max-width: min(100%, 1920px);
            }

            .hub-shell#videoView .video-view-intro {
                max-width: min(680px, 88vw);
                margin-left: auto;
                margin-right: auto;
            }

            /* 영상 상세: 본문·플레이어·메타 + 관련 영상 2열 */
            #videoDetailView.content-view--subpage .view-app-body.video-detail-body {
                max-width: min(100%, 1280px);
                padding: var(--subpage-body-gap, 20px) 24px var(--subpage-scroll-pad-bottom);
            }

            #videoDetailView .video-detail-layout {
                display: grid;
                grid-template-columns: minmax(640px, 1fr) minmax(280px, 320px);
                gap: 32px;
                align-items: start;
            }

            #videoDetailView .video-detail-related {
                width: 320px;
                min-width: 280px;
                max-width: 320px;
            }

            #videoDetailView .video-detail-player-inner {
                max-height: min(68vh, 560px);
            }

            #videoDetailView .video-detail-content-pad {
                padding-left: 0;
                padding-right: 0;
            }

            .community-shell.post-detail-shell#postDetailView.content-view--subpage .view-app-body.post-detail-body {
                max-width: 100%;
                padding: var(--subpage-body-gap, 22px) 28px var(--subpage-scroll-pad-bottom);
            }

            .community-shell#postDetailView .post-detail-article {
                padding: 26px 28px 32px;
                border-radius: 22px;
            }

            .community-shell#postDetailView .post-detail-title {
                font-size: clamp(1.32rem, 2.1vw, 1.82rem);
                line-height: 1.26;
                margin-bottom: 18px;
            }

            .community-shell#postDetailView .post-detail-content {
                font-size: 16px;
                line-height: 1.92;
                margin-bottom: 18px;
            }

            .community-shell#postDetailView .post-detail-comments-section {
                padding-top: 22px;
            }

            .community-shell#postDetailView .post-detail-comment-list {
                max-height: min(52vh, 440px);
            }

            .community-shell#postDetailView .ad-slot-inline--post-detail {
                max-width: 100%;
            }

            .community-shell#postDetailView .post-image-main-img {
                max-height: min(58vh, 520px);
            }

            .community-shell#postDetailView .post-image-grid {
                gap: 14px;
            }

            .community-shell.write-shell#writeView.content-view--subpage .view-app-body.write-view-body {
                max-width: 100%;
                padding: var(--subpage-body-gap, 20px) 28px 40px;
            }

            .community-shell#writeView .write-form {
                gap: 24px;
            }

            .community-shell#writeView .image-upload-area {
                padding: 18px 22px;
                gap: 14px;
            }

            .community-shell#writeView .image-preview-grid {
                grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
                gap: 16px;
            }

            .community-shell#writeView .write-textarea {
                min-height: 320px;
            }

            .community-shell#writeView #writeCategoryPills,
            .community-shell#writeView #writeSubTypePills {
                gap: 12px;
            }

            #boardView.community-shell .board-feed,
            #communityView .board-feed-surface .board-feed {
                gap: 20px;
                padding: 22px 18px 112px;
            }

            #boardView.community-shell .board-post-card,
            #communityView .board-feed-surface .board-post-card {
                padding: 18px 22px 16px;
                border-radius: 20px;
            }

            #boardView.community-shell .board-post-card--rich,
            #communityView .board-feed-surface .board-post-card--rich {
                padding: 20px 22px 18px;
            }

            #boardView.community-shell .board-post-card:hover,
            #communityView .board-feed-surface .board-post-card:hover {
                border-color: rgba(192, 132, 252, 0.4);
                box-shadow:
                    0 1px 0 rgba(255, 255, 255, 0.06) inset,
                    0 10px 38px rgba(0, 0, 0, 0.42),
                    0 0 36px rgba(110, 55, 190, 0.16);
            }

            #boardView.community-shell .board-post-title,
            #communityView .board-feed-surface .board-post-title {
                font-size: 17px;
            }

            #boardView.community-shell .board-post-card--with-thumb,
            #communityView .board-feed-surface .board-post-card--with-thumb {
                grid-template-columns: minmax(152px, 188px) 1fr;
                column-gap: 20px;
            }

        }

        .view-app-body {
            flex: 1;
            padding-top: 52px;
            width: 100%;
            min-height: min-content;
        }

        #postDetailView.content-view--subpage,
        #videoDetailView.content-view--subpage,
        #writeView.content-view--subpage,
        #videoRegisterView.content-view--subpage,
        #videoView.content-view--subpage,
        #rankView.content-view--subpage,
        #boardView.content-view--subpage {
            justify-content: flex-start;
            align-items: stretch;
        }

        #boardView.content-view--subpage .view-app-body.board-view-body {
            padding-top: var(--subpage-body-gap, 12px);
        }

        .content-view .temp-card,
        .content-view [data-role="temp-card"] {
            background: rgba(39, 18, 84, 0.97);
            border-radius: 22px;
            box-shadow: 0 6px 40px rgba(139, 92, 246, 0.12);
            padding: 20px 16px 32px 16px;
            margin: 35px auto 0 auto;
            max-width: 440px;
            width: 92vw;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .content-view .temp-card .temp-card-title,
        .content-view [data-role="temp-card"] .temp-card-title {
            color: #e2dbfd;
            font-size: 1.32rem;
            font-weight: 800;
            margin-bottom: 18px;
            letter-spacing: -0.02em;
            text-align: center;
        }

        .content-view .temp-card .temp-card-inner,
        .content-view [data-role="temp-card"] .temp-card-inner {
            background: rgba(168, 85, 247, 0.10);
            border-radius: 13px;
            padding: 32px 10px;
            color: #a892fd;
            font-size: 1rem;
            text-align: center;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .view-app-bar {
                top: 60px;
            }

            .content-view .temp-card,
            .content-view [data-role="temp-card"] {
                max-width: 98vw;
                width: 98vw;
                margin-top: 18px;
                padding: 12px 5vw 24px 5vw;
            }
        }

        @media (max-width: 480px) {

            .content-view .temp-card,
            .content-view [data-role="temp-card"] {
                padding: 6vw 2vw 5vw 2vw;
                border-radius: 14px;
                font-size: 0.97rem;
            }

            .view-app-bar-title {
                font-size: 16px;
            }
        }



        /* 홈: 헤더와 별도 기준 — 섹션 전체를 뷰포트 너비로 두고 inner만 중앙 정렬 */
        .app-home {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 28px var(--page-side-pad) 48px;
            position: relative;
            overflow: hidden;
        }

        .app-home::before {
            content: '';
            position: absolute;
            width: min(480px, 92vw);
            height: min(480px, 92vw);
            background: radial-gradient(circle, rgba(139, 92, 246, 0.26) 0%, transparent 68%);
            filter: blur(80px);
            top: 38%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .app-home::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: min(720px, 100%);
            height: min(280px, 42vh);
            transform: translateX(-50%);
            background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(124, 58, 237, 0.14) 0%, transparent 72%);
            pointer-events: none;
        }

        .app-home-inner {
            position: relative;
            z-index: 2;
            width: min(100%, var(--home-max-width));
            max-width: var(--home-max-width);
            margin-left: auto;
            margin-right: auto;
            align-self: center;
            text-align: center;
            box-sizing: border-box;
        }

        .app-home-brand {
            font-size: clamp(18px, 5vw, 24px);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(217, 70, 239, 0.92);
            text-align: center;
            margin-bottom: 14px;
            line-height: 1.35;
        }

        .board-view-body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .board-feed-stack {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            position: relative;
        }

        .board-feed {
            flex: 1 1 auto;
        }

        .board-empty {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 5;
            background: none;
            pointer-events: none;
        }

        .board-empty-inner {
            pointer-events: auto;
        }


        .app-home-headline {
            font-size: clamp(24px, 6vw, 32px);
            font-weight: 700;
            text-align: center;
            color: #f8f6ff;
            letter-spacing: -0.03em;
            margin-bottom: 10px;
            line-height: 1.26;
            text-shadow: 0 2px 28px rgba(139, 92, 246, 0.28);
        }

        .app-home-tagline {
            margin: 0 0 28px;
            font-size: clamp(13px, 3.4vw, 15px);
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: -0.02em;
            color: rgba(198, 188, 228, 0.62);
            text-align: center;
        }

        .home-admin-entry {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: -8px 0 18px;
            box-sizing: border-box;
        }

        .home-admin-entry.hidden {
            display: none;
        }

        .home-admin-ops-pill {
            appearance: none;
            -webkit-appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: calc(100% - 8px);
            margin: 0 auto;
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid rgba(168, 146, 253, 0.32);
            background: rgba(88, 62, 170, 0.22);
            color: rgba(235, 228, 255, 0.9);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }

        .home-admin-ops-pill:hover {
            background: rgba(120, 90, 220, 0.32);
            border-color: rgba(196, 181, 253, 0.45);
            color: #fff;
        }

        .home-admin-ops-pill:focus-visible {
            outline: 2px solid #c4b5fd;
            outline-offset: 2px;
        }

        .home-tiles {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            width: 100%;
        }

        .home-card-go {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(196, 181, 253, 0.32);
            background: rgba(255, 255, 255, 0.06);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            color: rgba(245, 240, 255, 0.92);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
            position: relative;
            z-index: 1;
        }

        .home-card-go--rank {
            width: 42px;
            height: 42px;
            font-size: 17px;
            border: 1px solid rgba(216, 180, 254, 0.22);
            background: rgba(255, 255, 255, 0.05);
            transition:
                background 0.32s ease,
                border-color 0.32s ease,
                box-shadow 0.32s ease,
                color 0.28s ease,
                transform 0.28s cubic-bezier(.34, 1.2, .64, 1);
        }

        @keyframes home-rank-border-shimmer {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .home-rank-card {
            position: relative;
            display: block;
            width: 100%;
            margin-top: 16px;
            padding: 0;
            border: none;
            border-radius: 26px;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            color: #faf5ff;
            overflow: visible;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.32s cubic-bezier(.34, 1.2, .64, 1);
        }

        .home-rank-card::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 30px;
            background: radial-gradient(ellipse 90% 70% at 50% 88%,
                    rgba(139, 92, 246, 0.22) 0%,
                    rgba(245, 158, 11, 0.06) 38%,
                    transparent 72%);
            opacity: 0.55;
            z-index: -1;
            pointer-events: none;
            transition: opacity 0.32s ease, inset 0.32s ease, filter 0.32s ease;
        }

        .home-rank-card__border {
            position: absolute;
            inset: 0;
            border-radius: 26px;
            padding: 2px;
            background: linear-gradient(135deg,
                    rgba(251, 191, 36, 0.42),
                    rgba(124, 58, 237, 0.5),
                    rgba(217, 70, 239, 0.38),
                    rgba(245, 158, 11, 0.32),
                    rgba(168, 85, 247, 0.48));
            background-size: 320% 320%;
            background-position: 0% 50%;
            opacity: 0.62;
            pointer-events: none;
            z-index: 0;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            transition:
                opacity 0.32s ease,
                box-shadow 0.32s ease,
                padding 0.32s ease;
        }

        .home-rank-card__inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            min-height: 108px;
            margin: 2px;
            padding: 20px 20px 20px 18px;
            border-radius: 24px;
            background: linear-gradient(128deg,
                    rgba(48, 22, 88, 0.98) 0%,
                    rgba(72, 36, 128, 0.72) 42%,
                    rgba(18, 10, 34, 0.98) 100%);
            box-shadow:
                0 4px 28px rgba(0, 0, 0, 0.38),
                0 8px 36px rgba(88, 28, 135, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
            overflow: hidden;
            transition:
                box-shadow 0.32s ease,
                transform 0.32s ease;
        }

        .home-rank-card__inner::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(148deg,
                    rgba(255, 255, 255, 0.1) 0%,
                    rgba(251, 191, 36, 0.04) 28%,
                    transparent 52%);
            pointer-events: none;
        }

        .home-rank-card__inner::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 62%;
            background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(139, 92, 246, 0.12) 55%,
                    rgba(245, 158, 11, 0.06) 100%);
            pointer-events: none;
            transition: background 0.32s ease, opacity 0.32s ease;
        }

        .home-rank-card:focus-visible {
            outline: 2px solid rgba(251, 191, 36, 0.55);
            outline-offset: 3px;
        }

        @media (hover: hover) and (pointer: fine) {
            .home-rank-card:hover {
                transform: translateY(-6px);
            }

            .home-rank-card:hover::before {
                inset: -6px;
                opacity: 0.38;
                background: radial-gradient(ellipse 85% 55% at 50% 50%,
                        rgba(168, 85, 247, 0.14) 0%,
                        transparent 68%);
            }

            .home-rank-card:hover .home-rank-card__border {
                opacity: 1;
                padding: 2.5px;
                background: linear-gradient(125deg,
                        #fcd34d,
                        #f59e0b,
                        #d946ef,
                        #a855f7,
                        #ec4899,
                        #fbbf24,
                        #c084fc,
                        #7c3aed,
                        #fcd34d);
                background-size: 400% 400%;
                animation: home-rank-border-shimmer 3.5s ease-in-out infinite;
                box-shadow:
                    0 0 8px rgba(168, 85, 247, 0.28),
                    0 0 5px rgba(251, 191, 36, 0.14);
            }

            .home-rank-card:hover .home-rank-card__inner {
                box-shadow:
                    0 10px 24px rgba(0, 0, 0, 0.34),
                    0 0 12px rgba(139, 92, 246, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }

            .home-rank-card:hover .home-rank-card__inner::after {
                background: linear-gradient(180deg,
                        transparent 0%,
                        rgba(139, 92, 246, 0.06) 75%,
                        rgba(139, 92, 246, 0.08) 100%);
                opacity: 0.75;
            }

            .home-rank-card:hover .home-card-go--rank {
                background: rgba(255, 255, 255, 0.16);
                border-color: rgba(252, 211, 77, 0.55);
                color: #fff;
                box-shadow:
                    0 0 0 1px rgba(168, 85, 247, 0.22),
                    0 0 10px rgba(168, 85, 247, 0.28),
                    0 2px 10px rgba(0, 0, 0, 0.24);
                transform: translateX(3px) scale(1.04);
            }

            .home-rank-card:hover .home-rank-card__icon {
                filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.32));
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .home-rank-card:hover .home-rank-card__border {
                animation: none;
            }

            .home-rank-card:hover .home-rank-card__icon {
                transform: none;
            }
        }

        .home-rank-card:active {
            transform: translateY(-3px) scale(0.992);
        }

        .home-rank-card:focus-visible .home-rank-card__border {
            opacity: 0.9;
            box-shadow:
                0 0 18px rgba(251, 191, 36, 0.4),
                0 0 16px rgba(168, 85, 247, 0.45);
        }

        @media (hover: none) {
            .home-rank-card:active {
                transform: translateY(-2px) scale(0.992);
            }

            .home-rank-card:active::before {
                opacity: 0.75;
            }

            .home-rank-card:active .home-rank-card__border {
                opacity: 0.92;
                background: linear-gradient(125deg,
                        #fbbf24,
                        #d946ef,
                        #a855f7,
                        #ec4899,
                        #f59e0b);
                background-size: 240% 240%;
                box-shadow:
                    0 0 14px rgba(168, 85, 247, 0.4),
                    0 0 10px rgba(251, 191, 36, 0.28);
            }

            .home-rank-card:active .home-rank-card__inner {
                box-shadow:
                    0 14px 36px rgba(139, 92, 246, 0.32),
                    0 0 22px rgba(168, 85, 247, 0.2);
            }

            .home-rank-card:active .home-rank-card__inner::after {
                background: linear-gradient(180deg, transparent 0%, rgba(168, 85, 247, 0.22) 100%);
            }

            .home-rank-card:active .home-card-go--rank {
                background: rgba(255, 255, 255, 0.12);
                border-color: rgba(252, 211, 77, 0.45);
                box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
            }

            .home-rank-card:active .home-rank-card__icon {
                filter:
                    drop-shadow(0 0 14px rgba(252, 211, 77, 0.65)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.3));
            }
        }

        @media (max-width: 640px) {
            .home-rank-card::before {
                inset: -4px;
                opacity: 0.4;
            }

            @media (hover: hover) and (pointer: fine) {
                .home-rank-card:hover::before {
                    inset: -5px;
                }

                .home-rank-card:hover .home-rank-card__border {
                    box-shadow:
                        0 0 7px rgba(168, 85, 247, 0.24),
                        0 0 4px rgba(251, 191, 36, 0.12);
                }

                .home-rank-card:hover .home-rank-card__inner {
                    box-shadow:
                        0 8px 20px rgba(0, 0, 0, 0.3),
                        0 0 10px rgba(139, 92, 246, 0.12);
                }
            }
        }

        .home-rank-card__icon-wrap {
            flex-shrink: 0;
            width: 72px;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
        }

        .home-rank-card__icon {
            width: clamp(52px, 12.5vw, 60px);
            height: auto;
            aspect-ratio: 1 / 1;
            display: block;
            flex-shrink: 0;
            color: rgba(216, 180, 254, 0.88);
            filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.2));
            transition: filter 0.32s ease, color 0.32s ease;
        }

        .home-rank-card__body {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 7px;
            text-align: center;
            padding: 0 8px;
            position: relative;
            z-index: 1;
        }

        .home-rank-card__title {
            font-size: clamp(19px, 4.8vw, 22px);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #ffffff;
            text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
        }

        .home-rank-card__sub {
            font-size: clamp(11px, 2.8vw, 12px);
            font-weight: 500;
            color: rgba(233, 225, 255, 0.52);
            letter-spacing: -0.01em;
            line-height: 1.45;
        }

        /* 홈 라운지 라이브 미리보기 (컴팩트, 채팅창 아님) */
        .home-lounge-preview {
            width: 100%;
            margin-top: 14px;
        }

        .home-lounge-preview__card {
            position: relative;
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 22px;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            color: #f5f3ff;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.28s cubic-bezier(0.34, 1.15, 0.64, 1);
        }

        .home-lounge-preview__glow {
            position: absolute;
            inset: -4px;
            border-radius: 26px;
            background: radial-gradient(ellipse 85% 70% at 50% 100%,
                    rgba(124, 58, 237, 0.2) 0%,
                    rgba(236, 72, 153, 0.08) 42%,
                    transparent 72%);
            opacity: 0.7;
            pointer-events: none;
            z-index: 0;
        }

        .home-lounge-preview__inner {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 16px 16px 14px;
            border-radius: 22px;
            border: 1px solid rgba(139, 92, 246, 0.28);
            background: linear-gradient(145deg,
                    rgba(34, 18, 62, 0.94) 0%,
                    rgba(20, 12, 38, 0.96) 55%,
                    rgba(12, 8, 26, 0.98) 100%);
            box-shadow:
                0 4px 22px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            overflow: hidden;
        }

        .home-lounge-preview__inner::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(160deg,
                    rgba(255, 255, 255, 0.07) 0%,
                    transparent 42%);
            pointer-events: none;
        }

        .home-lounge-preview__head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px 12px;
        }

        .home-lounge-preview__title {
            font-size: clamp(15px, 3.8vw, 17px);
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #faf5ff;
        }

        .home-lounge-preview__status {
            font-size: 11px;
            font-weight: 600;
            color: rgba(196, 181, 253, 0.88);
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(88, 28, 135, 0.35);
            border: 1px solid rgba(167, 139, 250, 0.28);
            white-space: nowrap;
        }

        .home-lounge-preview__status.hidden {
            display: none !important;
        }

        .home-lounge-preview__body {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-height: 3.6em;
            max-height: 5.4em;
            overflow: hidden;
            text-align: left;
        }

        .home-lounge-preview__line {
            display: block;
            font-size: clamp(12px, 3.1vw, 13px);
            line-height: 1.45;
            color: rgba(232, 224, 255, 0.88);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            animation: home-lounge-preview-line-in 0.45s ease both;
            animation-delay: var(--home-lounge-line-delay, 0s);
        }

        @keyframes home-lounge-preview-line-in {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .home-lounge-preview__nick {
            font-weight: 700;
            color: rgba(216, 180, 254, 0.95);
        }

        .home-lounge-preview__sep {
            color: rgba(180, 170, 220, 0.55);
            margin-right: 2px;
        }

        .home-lounge-preview__empty-title {
            display: block;
            font-size: clamp(13px, 3.3vw, 14px);
            font-weight: 600;
            color: rgba(210, 200, 248, 0.82);
            line-height: 1.45;
        }

        .home-lounge-preview__empty-sub {
            display: block;
            margin-top: 4px;
            font-size: clamp(11px, 2.9vw, 12px);
            color: rgba(160, 150, 200, 0.62);
            line-height: 1.4;
        }

        .home-lounge-preview__cta {
            display: block;
            margin-top: 2px;
            font-size: clamp(12px, 3vw, 13px);
            font-weight: 700;
            color: rgba(216, 180, 254, 0.92);
            letter-spacing: -0.01em;
        }

        @media (hover: hover) and (pointer: fine) {
            .home-lounge-preview__card:hover {
                transform: translateY(-2px);
            }

            .home-lounge-preview__card:hover .home-lounge-preview__inner {
                border-color: rgba(167, 139, 250, 0.42);
                box-shadow:
                    0 8px 28px rgba(88, 28, 135, 0.28),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
            }
        }

        .home-lounge-preview__card:active {
            transform: scale(0.99);
        }

        @media (max-width: 640px) {
            .home-lounge-preview {
                margin-top: 12px;
            }

            .home-lounge-preview__inner {
                padding: 14px 14px 12px;
            }
        }

        /* 랭킹: 서브페이지 본문 단일 세로 스크롤 · lane은 가로만 */
        #rankView.content-view--subpage .view-app-body.rank-view-body {
            flex: 1 1 auto;
            width: 100%;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
            min-height: 0;
            padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px));
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: auto;
            background:
                radial-gradient(ellipse 70% 45% at 10% -5%, rgba(168, 85, 247, 0.28) 0%, transparent 58%),
                radial-gradient(ellipse 65% 42% at 90% 2%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse 60% 40% at 50% 100%, rgba(124, 58, 237, 0.2) 0%, transparent 58%),
                radial-gradient(ellipse 50% 35% at 72% 42%, rgba(251, 191, 36, 0.12) 0%, transparent 52%),
                radial-gradient(ellipse 45% 30% at 22% 55%, rgba(52, 211, 186, 0.1) 0%, transparent 50%),
                linear-gradient(180deg, #05020c 0%, #08041a 42%, #060312 100%);
        }

        #rankView .rank-view-inner {
            width: 100%;
            max-width: min(100%, 1920px);
            margin-left: auto;
            margin-right: auto;
            padding: 0 clamp(12px, 2.4vw, 32px);
            box-sizing: border-box;
        }

        #rankView .rank-view-hero {
            position: relative;
            margin: 0 calc(-1 * clamp(12px, 2.4vw, 32px)) clamp(24px, 3.5vw, 36px);
            padding: clamp(36px, 5.5vw, 64px) clamp(20px, 4vw, 48px) clamp(32px, 4.5vw, 52px);
            text-align: center;
            overflow: hidden;
            border-radius: 0 0 clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
            border-bottom: 1px solid rgba(167, 139, 250, 0.28);
            background:
                linear-gradient(180deg,
                    rgba(10, 5, 22, 0.94) 0%,
                    rgba(8, 4, 18, 0.88) 55%,
                    rgba(6, 3, 14, 0.72) 100%);
            box-shadow:
                0 24px 64px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        #rankView .rank-view-hero__aurora {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(64px);
            opacity: 0.92;
            mix-blend-mode: screen;
        }

        #rankView .rank-view-hero__aurora--1 {
            width: min(560px, 78vw);
            height: min(300px, 44vw);
            left: -10%;
            top: -38%;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.75) 0%, rgba(168, 85, 247, 0.2) 38%, transparent 68%);
        }

        #rankView .rank-view-hero__aurora--2 {
            width: min(460px, 62vw);
            height: min(240px, 34vw);
            right: -8%;
            top: -24%;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.6) 0%, rgba(236, 72, 153, 0.15) 40%, transparent 70%);
        }

        #rankView .rank-view-hero__aurora--3 {
            width: min(500px, 68vw);
            height: min(220px, 30vw);
            left: 26%;
            bottom: -44%;
            background: radial-gradient(circle, rgba(251, 191, 36, 0.55) 0%, rgba(251, 191, 36, 0.12) 42%, transparent 72%);
        }

        #rankView .rank-view-hero__grid {
            position: absolute;
            inset: 0;
            opacity: 0.28;
            background-image:
                linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
            pointer-events: none;
        }

        #rankView .rank-view-hero__copy {
            position: relative;
            z-index: 2;
            max-width: 920px;
            margin: 0 auto;
        }

        #rankView .rank-view-eyebrow {
            margin: 0 0 12px;
            font-size: clamp(26px, 4.2vw, 52px);
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            line-height: 1.05;
            background: linear-gradient(118deg,
                    #fffef8 0%,
                    #fff0c8 18%,
                    #ffe8a8 38%,
                    #f5d890 58%,
                    #e8c878 78%,
                    #f0e0b0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter:
                drop-shadow(0 0 24px rgba(251, 211, 141, 0.75)) drop-shadow(0 0 48px rgba(251, 191, 36, 0.45));
        }

        #rankView .rank-view-title {
            margin: 0 0 10px;
            font-size: clamp(18px, 2.2vw, 24px);
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            line-height: 1.2;
            color: #f8f4ff;
            text-shadow:
                0 0 20px rgba(167, 139, 250, 0.65),
                0 2px 12px rgba(0, 0, 0, 0.5);
        }

        #rankView .rank-view-lead {
            margin: 0 auto 18px;
            max-width: 520px;
            font-size: clamp(13px, 1.6vw, 16px);
            font-weight: 600;
            line-height: 1.55;
            letter-spacing: -0.01em;
            color: rgba(220, 210, 245, 0.88);
        }

        #rankView .rank-view-hero__meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        #rankView .rank-hero-pill {
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(248, 244, 255, 0.95);
            background: rgba(12, 6, 28, 0.72);
            border: 1px solid rgba(167, 139, 250, 0.45);
            box-shadow:
                0 0 20px rgba(168, 85, 247, 0.35),
                inset 0 0 12px rgba(168, 85, 247, 0.08);
        }

        #rankView .rank-hero-pill:nth-child(2) {
            border-color: rgba(244, 114, 182, 0.45);
            box-shadow:
                0 0 20px rgba(236, 72, 153, 0.32),
                inset 0 0 12px rgba(236, 72, 153, 0.06);
        }

        #rankView .rank-hero-pill:nth-child(3) {
            border-color: rgba(251, 191, 36, 0.48);
            color: rgba(255, 248, 235, 0.95);
            box-shadow:
                0 0 20px rgba(251, 191, 36, 0.32),
                inset 0 0 12px rgba(251, 191, 36, 0.06);
        }

        #rankView .rank-board {
            --rank-col-gap: 28px;
            --rank-col-w: clamp(380px, calc((100vw - 100px) / 3.05), 420px);
            --rank-lane-pad: 20px;
            width: 100%;
            margin: 0 0 40px;
        }

        #rankView .rank-board__hint {
            margin: 0 0 16px;
            padding: 0 6px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(196, 181, 253, 0.72);
            text-align: center;
        }

        #rankView .rank-board-loading,
        #rankView .rank-board-empty {
            margin: 48px auto;
            padding: 24px;
            text-align: center;
            font-size: 15px;
            color: rgba(196, 181, 253, 0.65);
        }

        @keyframes rank-board-skeleton-pulse {

            0%,
            100% {
                opacity: 0.55;
            }

            50% {
                opacity: 1;
            }
        }

        #rankView .rank-board-loading-shell {
            margin: 32px auto 40px;
            padding: 0 20px 12px;
            max-width: 480px;
        }

        #rankView .rank-board-loading-msg {
            margin: 0 0 18px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(196, 181, 253, 0.78);
        }

        #rankView .rank-board-skeleton-bars {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #rankView .rank-board-skeleton-bar {
            display: block;
            height: 64px;
            border-radius: 16px;
            background: linear-gradient(90deg,
                    rgba(124, 58, 237, 0.22) 0%,
                    rgba(196, 181, 253, 0.35) 50%,
                    rgba(124, 58, 237, 0.22) 100%);
            animation: rank-board-skeleton-pulse 1.35s ease-in-out infinite;
        }

        #rankView .rank-board-skeleton-bar:nth-child(2) {
            animation-delay: 0.12s;
        }

        #rankView .rank-board-skeleton-bar:nth-child(3) {
            animation-delay: 0.24s;
        }

        #rankView .rank-board-error {
            margin: 36px auto 48px;
            padding: 28px 24px 32px;
            max-width: 440px;
            text-align: center;
            border-radius: 20px;
            border: 1px solid rgba(248, 113, 113, 0.35);
            background: rgba(127, 29, 29, 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
        }

        #rankView .rank-board-error__text {
            margin: 0 0 20px;
            font-size: 15px;
            line-height: 1.55;
            color: rgba(254, 226, 226, 0.92);
        }

        #rankView .rank-board-error__actions {
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        #rankView .rank-board-error__retry {
            cursor: pointer;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 700;
            border-radius: 999px;
            border: 1px solid rgba(251, 191, 36, 0.55);
            color: rgba(255, 250, 235, 0.96);
            background: linear-gradient(135deg,
                    rgba(124, 58, 237, 0.65),
                    rgba(99, 102, 241, 0.55));
        }

        #rankView .rank-board-error__retry:active {
            transform: scale(0.98);
        }

        #rankView .rank-columns-scroll {
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: rgba(251, 191, 36, 0.45) rgba(124, 58, 237, 0.15);
            margin: 0 calc(-1 * clamp(12px, 2.4vw, 32px));
            padding: 8px clamp(12px, 2.4vw, 32px) 20px;
        }

        #rankView .rank-columns-scroll::-webkit-scrollbar {
            height: 8px;
        }

        #rankView .rank-columns-scroll::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: linear-gradient(90deg,
                    rgba(251, 191, 36, 0.55),
                    rgba(168, 85, 247, 0.65));
        }

        #rankView .rank-columns {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 0;
            width: max-content;
            padding: 0 4px 16px;
            box-sizing: border-box;
        }

        /* 데스크톱 chart lane — 큰 floating dashboard */
        #rankView .rank-col {
            --rank-accent-rgb: 188, 172, 232;
            --rank-accent: rgb(var(--rank-accent-rgb));
            --rank-accent-soft: rgba(var(--rank-accent-rgb), 0.2);
            --rank-accent-mid: rgba(var(--rank-accent-rgb), 0.35);
            --rank-accent-glow: rgba(var(--rank-accent-rgb), 0.55);
            --rank-accent-border: rgba(var(--rank-accent-rgb), 0.5);
            position: relative;
            flex: 0 0 var(--rank-col-w);
            width: var(--rank-col-w);
            min-width: 380px;
            max-width: 420px;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-right: var(--rank-col-gap);
            padding: 0 var(--rank-lane-pad) 28px;
            border-radius: 24px;
            border: 1px solid rgba(var(--rank-accent-rgb), 0.28);
            border-top: 6px solid rgb(var(--rank-accent-rgb));
            background: linear-gradient(180deg,
                    rgba(var(--rank-accent-rgb), 0.1) 0%,
                    rgba(var(--rank-accent-rgb), 0.04) 14%,
                    rgba(10, 5, 22, 0.96) 38%,
                    rgba(6, 3, 14, 0.98) 100%);
            box-shadow:
                0 20px 48px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(var(--rank-accent-rgb), 0.22),
                inset 0 1px 0 rgba(var(--rank-accent-rgb), 0.12);
            overflow: visible;
            transition:
                background 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s ease;
        }

        #rankView .rank-col::after {
            content: '';
            position: absolute;
            inset: -6px -4px auto;
            height: 100px;
            border-radius: 20px 20px 40% 40%;
            background: radial-gradient(ellipse 85% 100% at 50% 0%,
                    rgba(var(--rank-accent-rgb), 0.35) 0%,
                    rgba(var(--rank-accent-rgb), 0.08) 42%,
                    transparent 70%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.85;
        }

        #rankView .rank-col:last-child {
            margin-right: 0;
        }

        #rankView .rank-col+.rank-col::before {
            content: '';
            position: absolute;
            left: calc(-0.5 * var(--rank-col-gap) - 1px);
            top: 20px;
            bottom: 20px;
            width: 1px;
            transform: translateX(-50%);
            background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(var(--rank-accent-rgb), 0.22) 18%,
                    rgba(167, 139, 250, 0.2) 50%,
                    rgba(var(--rank-accent-rgb), 0.16) 82%,
                    transparent 100%);
            pointer-events: none;
            z-index: 1;
        }

        #rankView .rank-col[data-rank-col="all"] {
            --rank-accent-rgb: 188, 172, 232;
        }

        #rankView .rank-col[data-rank-col="original"] {
            --rank-accent-rgb: 244, 158, 210;
        }

        #rankView .rank-col[data-rank-col="cover"] {
            --rank-accent-rgb: 148, 178, 255;
        }

        #rankView .rank-col[data-rank-col="performance"] {
            --rank-accent-rgb: 120, 228, 210;
        }

        #rankView .rank-col[data-rank-col="ai_music"] {
            --rank-accent-rgb: 200, 168, 255;
        }

        #rankView .rank-col[data-rank-col="live"] {
            --rank-accent-rgb: 235, 150, 190;
        }

        #rankView .rank-col[data-rank-col="playlist"] {
            --rank-accent-rgb: 255, 198, 168;
        }

        #rankView .rank-col[data-rank-col="process"] {
            --rank-accent-rgb: 255, 218, 148;
        }

        #rankView .rank-col[data-rank-col="other"] {
            --rank-accent-rgb: 172, 168, 220;
        }

        #rankView .rank-col--empty {
            background: linear-gradient(180deg,
                    rgba(var(--rank-accent-rgb), 0.08) 0%,
                    rgba(var(--rank-accent-rgb), 0.03) 30%,
                    rgba(8, 4, 18, 0.96) 100%);
            box-shadow:
                0 16px 40px rgba(0, 0, 0, 0.45),
                0 0 36px rgba(var(--rank-accent-rgb), 0.18);
        }

        #rankView .rank-col--empty .rank-col__head::after {
            opacity: 0.85;
        }

        #rankView .rank-col__head {
            position: relative;
            z-index: 5;
            flex-shrink: 0;
            margin: 0 calc(-1 * var(--rank-lane-pad)) 14px;
            padding: 16px var(--rank-lane-pad) 12px;
            background: linear-gradient(180deg,
                    rgba(8, 4, 18, 0.92) 0%,
                    rgba(8, 4, 18, 0.65) 70%,
                    transparent 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: none;
        }

        #rankView .rank-col__head::after {
            content: '';
            position: absolute;
            left: var(--rank-lane-pad);
            right: var(--rank-lane-pad);
            bottom: 0;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    var(--rank-accent) 30%,
                    rgb(var(--rank-accent-rgb)) 50%,
                    var(--rank-accent) 70%,
                    transparent 100%);
            box-shadow:
                0 0 12px var(--rank-accent-glow),
                0 0 24px rgba(var(--rank-accent-rgb), 0.5);
            opacity: 1;
        }

        #rankView .rank-col__title {
            display: block;
            font-size: clamp(22px, 1.8vw, 28px);
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1.12;
            color: #fff;
            text-shadow: 0 0 20px var(--rank-accent-glow);
        }

        #rankView .rank-col__list {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 4px 0 12px;
            overflow: visible;
        }

        @media (hover: hover) and (pointer: fine) {
            #rankView .rank-col:hover {
                transform: translateY(-3px);
                border-color: rgba(var(--rank-accent-rgb), 0.45);
                box-shadow:
                    0 24px 56px rgba(0, 0, 0, 0.52),
                    0 0 56px var(--rank-accent-glow);
            }

            #rankView .rank-col:hover::after {
                opacity: 1;
            }

        }

        #rankView .rank-col__empty {
            margin: 0;
            padding: 4px 4px 12px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            color: rgba(var(--rank-accent-rgb), 0.55);
        }

        #rankView .rank-item-card {
            position: relative;
            isolation: isolate;
            flex: 0 0 auto;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 14px;
            padding: 14px;
            border: 1px solid rgba(var(--rank-accent-rgb), 0.38);
            border-radius: 18px;
            background: linear-gradient(165deg,
                    rgba(20, 10, 38, 0.96) 0%,
                    rgba(10, 5, 22, 0.98) 55%,
                    rgba(6, 3, 14, 1) 100%);
            box-shadow:
                0 12px 36px rgba(0, 0, 0, 0.48),
                0 0 24px rgba(var(--rank-accent-rgb), 0.2);
            color: #f8f4ff;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            transition:
                transform 0.28s cubic-bezier(.34, 1.15, .64, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #rankView .rank-item-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            z-index: -1;
            border-radius: 20px;
            pointer-events: none;
            box-shadow: 0 0 28px rgba(var(--rank-accent-rgb), 0.18);
            opacity: 0.85;
            transition: box-shadow 0.28s ease, opacity 0.28s ease;
        }

        /* 포디엄 1·2·3위 — 골드 / 실버 / 브론즈 (카테고리 액센트와 블렌드) */
        #rankView .rank-item-card.rank-1,
        #rankView .rank-item-card.rank-2,
        #rankView .rank-item-card.rank-3 {
            isolation: isolate;
        }

        #rankView .rank-item-card.rank-1::before,
        #rankView .rank-item-card.rank-2::before,
        #rankView .rank-item-card.rank-3::before {
            content: '';
            position: absolute;
            top: 0;
            left: 12%;
            right: 12%;
            height: 2px;
            border-radius: 0 0 4px 4px;
            z-index: 3;
            pointer-events: none;
        }

        #rankView .rank-item-card.rank-1 {
            --rank-podium-rgb: 255, 220, 140;
            --rank-podium-mid: 232, 192, 108;
            --rank-podium-glow: rgba(255, 215, 120, 0.65);
            --rank-podium-border: rgba(255, 228, 160, 0.85);
            gap: 16px;
            padding: 16px;
            border-width: 2px;
            border-color: var(--rank-podium-border);
            background: linear-gradient(168deg,
                    rgba(24, 12, 44, 0.98) 0%,
                    rgba(12, 6, 28, 1) 55%,
                    rgba(6, 3, 14, 1) 100%);
            box-shadow:
                0 20px 52px rgba(0, 0, 0, 0.55),
                0 0 48px var(--rank-podium-glow),
                0 0 32px rgba(168, 85, 247, 0.35);
        }

        #rankView .rank-item-card.rank-1::before {
            height: 2px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 228, 160, 0.95) 50%,
                    transparent 100%);
            box-shadow: 0 0 20px rgba(255, 215, 120, 0.8);
        }

        #rankView .rank-item-card.rank-1::after {
            box-shadow:
                0 0 40px var(--rank-podium-glow),
                0 0 28px rgba(168, 85, 247, 0.35);
        }

        #rankView .rank-item-card.rank-2 {
            --rank-podium-rgb: 210, 202, 255;
            --rank-podium-mid: 175, 165, 235;
            --rank-podium-glow: rgba(196, 188, 255, 0.5);
            --rank-podium-border: rgba(220, 214, 255, 0.75);
            gap: 15px;
            padding: 15px;
            border-width: 2px;
            border-color: var(--rank-podium-border);
            background: linear-gradient(166deg,
                    rgba(22, 11, 42, 0.98) 0%,
                    rgba(10, 5, 22, 1) 100%);
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.5),
                0 0 40px var(--rank-podium-glow);
        }

        #rankView .rank-item-card.rank-2::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(210, 202, 255, 0.9) 50%, transparent);
            box-shadow: 0 0 16px rgba(196, 188, 255, 0.65);
        }

        #rankView .rank-item-card.rank-2::after {
            box-shadow: 0 0 36px var(--rank-podium-glow);
        }

        #rankView .rank-item-card.rank-3 {
            --rank-podium-rgb: 255, 175, 155;
            --rank-podium-mid: 235, 140, 125;
            --rank-podium-glow: rgba(255, 140, 175, 0.48);
            --rank-podium-border: rgba(255, 195, 180, 0.72);
            gap: 14px;
            padding: 14px;
            border-width: 2px;
            border-color: var(--rank-podium-border);
            background: linear-gradient(164deg,
                    rgba(20, 10, 36, 0.98) 0%,
                    rgba(10, 5, 22, 1) 100%);
            box-shadow:
                0 16px 44px rgba(0, 0, 0, 0.48),
                0 0 36px var(--rank-podium-glow),
                0 0 20px rgba(244, 114, 182, 0.25);
        }

        #rankView .rank-item-card.rank-3::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 185, 165, 0.88) 50%, transparent);
            box-shadow: 0 0 14px rgba(255, 140, 175, 0.55);
        }

        #rankView .rank-item-card.rank-3::after {
            box-shadow:
                0 0 32px var(--rank-podium-glow),
                0 0 18px rgba(244, 114, 182, 0.22);
        }

        #rankView .rank-item-card--rest {
            gap: 12px;
            padding: 12px;
            border-color: rgba(var(--rank-accent-rgb), 0.38);
        }

        @media (hover: hover) and (pointer: fine) {
            #rankView .rank-item-card:hover {
                transform: translateY(-7px);
                border-color: rgba(var(--rank-accent-rgb), 0.62);
                box-shadow:
                    0 20px 48px rgba(0, 0, 0, 0.52),
                    0 0 40px var(--rank-accent-glow);
            }

            #rankView .rank-item-card:hover::after {
                opacity: 1;
                box-shadow: 0 0 40px rgba(var(--rank-accent-rgb), 0.35);
            }

            #rankView .rank-item-card.rank-1:hover {
                transform: translateY(-9px);
                border-color: rgba(255, 228, 160, 0.95);
                box-shadow:
                    0 24px 56px rgba(0, 0, 0, 0.55),
                    0 0 56px rgba(255, 215, 120, 0.7),
                    0 0 36px rgba(168, 85, 247, 0.4);
            }

            #rankView .rank-item-card.rank-1:hover::after {
                box-shadow:
                    0 0 56px rgba(255, 215, 120, 0.75),
                    0 0 36px rgba(168, 85, 247, 0.45);
            }

            #rankView .rank-item-card.rank-2:hover {
                transform: translateY(-8px);
                box-shadow:
                    0 22px 52px rgba(0, 0, 0, 0.52),
                    0 0 48px rgba(196, 188, 255, 0.62);
            }

            #rankView .rank-item-card.rank-3:hover {
                transform: translateY(-8px);
                box-shadow:
                    0 20px 48px rgba(0, 0, 0, 0.5),
                    0 0 44px rgba(255, 140, 175, 0.55),
                    0 0 28px rgba(244, 114, 182, 0.32);
            }
        }

        #rankView .rank-item-card:active {
            transform: translateY(-2px) scale(0.992);
        }

        #rankView .rank-item-card__media {
            position: relative;
            display: block;
            width: 100%;
            min-width: 0;
        }

        #rankView .rank-item-card__rank {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 44px;
            padding: 0 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #fff;
            background: rgba(8, 4, 18, 0.82);
            border: 1px solid rgba(var(--rank-accent-rgb), 0.48);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 16px var(--rank-accent-soft);
        }

        #rankView .rank-item-card.rank-1 .rank-item-card__rank {
            min-width: 56px;
            height: 52px;
            padding: 0 16px 0 14px;
            font-size: 22px;
            color: #1a0f28;
            background: linear-gradient(145deg,
                    #fff8eb 0%,
                    rgba(var(--rank-podium-rgb), 1) 42%,
                    rgba(var(--rank-podium-mid), 1) 100%);
            border-color: rgba(255, 248, 230, 0.65);
            box-shadow:
                0 0 28px var(--rank-podium-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }

        #rankView .rank-item-card.rank-1 .rank-item-card__rank::before {
            content: '♛';
            margin-right: 6px;
            font-size: 17px;
            line-height: 1;
            color: rgba(88, 62, 18, 0.88);
        }

        #rankView .rank-item-card.rank-2 .rank-item-card__rank {
            min-width: 52px;
            height: 48px;
            padding: 0 16px;
            font-size: 19px;
            color: #f8f6ff;
            background: linear-gradient(145deg,
                    rgba(230, 226, 248, 0.95) 0%,
                    rgba(var(--rank-podium-rgb), 0.88) 48%,
                    rgba(42, 28, 72, 0.95) 100%);
            border-color: rgba(214, 208, 242, 0.55);
            box-shadow:
                0 0 22px var(--rank-podium-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
        }

        #rankView .rank-item-card.rank-3 .rank-item-card__rank {
            min-width: 50px;
            height: 46px;
            padding: 0 15px;
            font-size: 18px;
            color: #fff8f4;
            background: linear-gradient(145deg,
                    rgba(248, 220, 205, 0.92) 0%,
                    rgba(var(--rank-podium-rgb), 0.82) 50%,
                    rgba(52, 28, 38, 0.94) 100%);
            border-color: rgba(232, 198, 178, 0.5);
            box-shadow:
                0 0 18px var(--rank-podium-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        #rankView .rank-item-card--rest .rank-item-card__rank {
            min-width: 42px;
            height: 40px;
            font-size: 14px;
        }

        #rankView .rank-item-card__thumb {
            position: relative;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            border-radius: 14px;
            overflow: hidden;
            background: rgba(4, 2, 10, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 0 0 1px rgba(var(--rank-accent-rgb), 0.42),
                0 0 20px rgba(var(--rank-accent-rgb), 0.28);
        }

        #rankView .rank-item-card--top-1 .rank-item-card__thumb {
            aspect-ratio: 16 / 8.5;
            border-radius: 16px;
        }

        #rankView .rank-item-card.rank-1 .rank-item-card__thumb {
            box-shadow:
                0 0 0 2px rgba(255, 220, 140, 0.7),
                0 0 32px rgba(255, 215, 120, 0.5),
                0 0 20px rgba(168, 85, 247, 0.35);
        }

        #rankView .rank-item-card.rank-2 .rank-item-card__thumb {
            box-shadow:
                0 0 0 2px rgba(210, 202, 255, 0.58),
                0 0 28px rgba(196, 188, 255, 0.42);
        }

        #rankView .rank-item-card.rank-3 .rank-item-card__thumb {
            box-shadow:
                0 0 0 2px rgba(255, 185, 165, 0.55),
                0 0 24px rgba(255, 140, 175, 0.38),
                0 0 14px rgba(244, 114, 182, 0.22);
        }

        #rankView .rank-item-card--rest .rank-item-card__thumb {
            aspect-ratio: 16 / 9.2;
            border-radius: 12px;
        }

        #rankView .rank-item-card__thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #rankView .rank-item-card__thumb-ph {
            font-size: 36px;
            line-height: 1;
            color: rgba(var(--rank-accent-rgb), 0.45);
        }

        #rankView .rank-item-card__body {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 2px;
        }

        #rankView .rank-item-card__title {
            font-size: clamp(16px, 1.4vw, 18px);
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: -0.03em;
            color: #faf8ff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #rankView .rank-item-card--top-1 .rank-item-card__title {
            font-size: clamp(18px, 1.55vw, 21px);
            font-weight: 800;
            line-height: 1.35;
        }

        #rankView .rank-item-card.rank-1 .rank-item-card__title {
            color: #fffaf0;
            text-shadow: 0 0 28px rgba(232, 212, 168, 0.35);
        }

        #rankView .rank-item-card--top-2 .rank-item-card__title,
        #rankView .rank-item-card--top-3 .rank-item-card__title {
            font-size: clamp(17px, 1.45vw, 19px);
            font-weight: 800;
        }

        #rankView .rank-item-card.rank-2 .rank-item-card__title {
            color: #f4f2fc;
            text-shadow: 0 0 20px rgba(196, 188, 228, 0.28);
        }

        #rankView .rank-item-card.rank-3 .rank-item-card__title {
            color: #fff6f0;
            text-shadow: 0 0 18px rgba(214, 172, 148, 0.22);
        }

        #rankView .rank-item-card__stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        #rankView .rank-item-card__stat {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            background: rgba(8, 4, 18, 0.65);
            border: 1px solid rgba(var(--rank-accent-rgb), 0.32);
            color: rgba(228, 220, 248, 0.95);
            box-shadow: 0 0 12px rgba(var(--rank-accent-rgb), 0.12);
        }

        #rankView .rank-item-card__stat-label {
            opacity: 0.75;
            font-weight: 600;
        }

        #rankView .rank-item-card__stat-val {
            color: #fff;
            letter-spacing: -0.02em;
        }

        #rankView .rank-item-card.rank-1 .rank-item-card__stat {
            padding: 7px 13px;
            font-size: 13px;
            background: rgba(232, 212, 168, 0.14);
            border-color: rgba(232, 212, 168, 0.32);
        }

        #rankView .rank-item-card.rank-2 .rank-item-card__stat {
            background: rgba(196, 188, 228, 0.12);
            border-color: rgba(196, 188, 228, 0.28);
        }

        #rankView .rank-item-card.rank-3 .rank-item-card__stat {
            background: rgba(214, 172, 148, 0.11);
            border-color: rgba(214, 172, 148, 0.26);
        }

        /* 모바일 전용 랭킹 — 기본 숨김, 768px 이하에서 표시 */
        #rankView .rank-board-mobile {
            display: none;
        }

        #rankView .rank-mobile-cats-scroll {
            flex-shrink: 0;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            margin: 0 -4px 12px;
            padding: 2px 4px 6px;
        }

        #rankView .rank-mobile-cats-scroll::-webkit-scrollbar {
            display: none;
        }

        #rankView .rank-mobile-cats {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            width: max-content;
            min-width: 100%;
            padding: 0 2px;
        }

        #rankView .rank-mobile-cat {
            --rank-accent-rgb: 188, 172, 232;
            flex-shrink: 0;
            padding: 9px 16px;
            border-radius: 999px;
            border: 1px solid rgba(var(--rank-accent-rgb), 0.4);
            background: rgba(10, 5, 22, 0.85);
            color: rgba(248, 244, 255, 0.92);
            font-family: inherit;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.2;
            cursor: pointer;
            transition:
                background 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease;
            -webkit-tap-highlight-color: transparent;
        }

        #rankView .rank-mobile-cat[data-rank-cat="all"] {
            --rank-accent-rgb: 188, 172, 232;
        }

        #rankView .rank-mobile-cat[data-rank-cat="original"] {
            --rank-accent-rgb: 244, 158, 210;
        }

        #rankView .rank-mobile-cat[data-rank-cat="cover"] {
            --rank-accent-rgb: 148, 178, 255;
        }

        #rankView .rank-mobile-cat[data-rank-cat="performance"] {
            --rank-accent-rgb: 120, 228, 210;
        }

        #rankView .rank-mobile-cat[data-rank-cat="ai_music"] {
            --rank-accent-rgb: 200, 168, 255;
        }

        #rankView .rank-mobile-cat[data-rank-cat="live"] {
            --rank-accent-rgb: 235, 150, 190;
        }

        #rankView .rank-mobile-cat[data-rank-cat="playlist"] {
            --rank-accent-rgb: 255, 198, 168;
        }

        #rankView .rank-mobile-cat[data-rank-cat="process"] {
            --rank-accent-rgb: 255, 218, 148;
        }

        #rankView .rank-mobile-cat[data-rank-cat="other"] {
            --rank-accent-rgb: 172, 168, 220;
        }

        #rankView .rank-mobile-cat.is-active {
            background: rgba(12, 6, 28, 0.92);
            border-color: rgb(var(--rank-accent-rgb));
            box-shadow: 0 0 24px rgba(var(--rank-accent-rgb), 0.45);
            color: #fff;
        }

        #rankView .rank-mobile-feed {
            --rank-accent-rgb: 188, 172, 232;
            --rank-accent-soft: rgba(var(--rank-accent-rgb), 0.2);
            --rank-accent-glow: rgba(var(--rank-accent-rgb), 0.45);
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: visible;
            padding: 2px 0 16px;
        }

        #rankView .rank-mobile-feed[data-rank-col="all"] {
            --rank-accent-rgb: 188, 172, 232;
        }

        #rankView .rank-mobile-feed[data-rank-col="original"] {
            --rank-accent-rgb: 244, 158, 210;
        }

        #rankView .rank-mobile-feed[data-rank-col="cover"] {
            --rank-accent-rgb: 148, 178, 255;
        }

        #rankView .rank-mobile-feed[data-rank-col="performance"] {
            --rank-accent-rgb: 120, 228, 210;
        }

        #rankView .rank-mobile-feed[data-rank-col="ai_music"] {
            --rank-accent-rgb: 200, 168, 255;
        }

        #rankView .rank-mobile-feed[data-rank-col="live"] {
            --rank-accent-rgb: 235, 150, 190;
        }

        #rankView .rank-mobile-feed[data-rank-col="playlist"] {
            --rank-accent-rgb: 255, 198, 168;
        }

        #rankView .rank-mobile-feed[data-rank-col="process"] {
            --rank-accent-rgb: 255, 218, 148;
        }

        #rankView .rank-mobile-feed[data-rank-col="other"] {
            --rank-accent-rgb: 172, 168, 220;
        }

        #rankView .rank-mobile-feed__empty,
        #rankView .rank-mobile-feed .rank-board-empty {
            margin: 24px 8px;
            padding: 12px 8px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: rgba(var(--rank-accent-rgb), 0.5);
        }

        #rankView .rank-mobile-card {
            position: relative;
            flex: 0 0 auto;
            width: 100%;
            min-height: auto;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #faf8ff;
            font-family: inherit;
            text-align: left;
            cursor: pointer;
            overflow: visible;
            -webkit-tap-highlight-color: transparent;
        }

        #rankView .rank-mobile-card:active {
            transform: scale(0.992);
        }

        #rankView .rank-mobile-card__rank {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            padding: 8px 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #fff;
            background: rgba(12, 6, 28, 0.72);
            border: 1px solid rgba(var(--rank-accent-rgb), 0.45);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        #rankView .rank-mobile-card.rank-1,
        #rankView .rank-mobile-card.rank-2,
        #rankView .rank-mobile-card.rank-3 {
            position: relative;
            gap: 10px;
            padding: 14px;
            border-radius: 18px;
            isolation: isolate;
        }

        #rankView .rank-mobile-card.rank-1::before,
        #rankView .rank-mobile-card.rank-2::before,
        #rankView .rank-mobile-card.rank-3::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 2px;
            border-radius: 0 0 4px 4px;
            z-index: 4;
            pointer-events: none;
        }

        #rankView .rank-mobile-card.rank-1 {
            border: 2px solid rgba(255, 220, 140, 0.75);
            background: linear-gradient(165deg, rgba(18, 8, 36, 0.98) 0%, rgba(8, 4, 18, 1) 100%);
            box-shadow:
                0 14px 36px rgba(0, 0, 0, 0.5),
                0 0 36px rgba(255, 215, 120, 0.45),
                0 0 22px rgba(168, 85, 247, 0.3);
        }

        #rankView .rank-mobile-card.rank-1::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 220, 140, 0.9) 50%, transparent);
            box-shadow: 0 0 16px rgba(255, 215, 120, 0.7);
        }

        #rankView .rank-mobile-card.rank-2 {
            border: 2px solid rgba(210, 202, 255, 0.65);
            background: linear-gradient(165deg, rgba(16, 8, 32, 0.98) 0%, rgba(8, 4, 18, 1) 100%);
            box-shadow:
                0 12px 32px rgba(0, 0, 0, 0.48),
                0 0 32px rgba(196, 188, 255, 0.4);
        }

        #rankView .rank-mobile-card.rank-2::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(210, 202, 255, 0.88) 50%, transparent);
            box-shadow: 0 0 14px rgba(196, 188, 255, 0.55);
        }

        #rankView .rank-mobile-card.rank-3 {
            border: 2px solid rgba(255, 185, 165, 0.62);
            background: linear-gradient(165deg, rgba(16, 8, 30, 0.98) 0%, rgba(8, 4, 18, 1) 100%);
            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.46),
                0 0 28px rgba(255, 140, 175, 0.38),
                0 0 16px rgba(244, 114, 182, 0.22);
        }

        #rankView .rank-mobile-card.rank-3::before {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 175, 155, 0.85) 50%, transparent);
            box-shadow: 0 0 12px rgba(255, 140, 175, 0.5);
        }

        #rankView .rank-mobile-card.rank-1 .rank-mobile-card__rank {
            min-width: 54px;
            padding: 10px 14px 10px 12px;
            font-size: 17px;
            color: #1a0f28;
            background: linear-gradient(145deg,
                    #fff8eb 0%,
                    rgba(232, 212, 168, 1) 55%,
                    rgba(212, 188, 132, 1) 100%);
            border-color: rgba(255, 248, 230, 0.6);
            box-shadow: 0 0 18px rgba(232, 212, 168, 0.4);
        }

        #rankView .rank-mobile-card.rank-1 .rank-mobile-card__rank::before {
            content: '♛';
            margin-right: 5px;
            font-size: 14px;
            color: rgba(88, 62, 18, 0.88);
        }

        #rankView .rank-mobile-card.rank-2 .rank-mobile-card__rank {
            min-width: 50px;
            padding: 9px 14px;
            font-size: 16px;
            color: #f8f6ff;
            background: linear-gradient(145deg,
                    rgba(230, 226, 248, 0.95) 0%,
                    rgba(196, 188, 228, 0.85) 50%,
                    rgba(42, 28, 72, 0.94) 100%);
            border-color: rgba(214, 208, 242, 0.52);
            box-shadow: 0 0 14px rgba(196, 188, 228, 0.32);
        }

        #rankView .rank-mobile-card.rank-3 .rank-mobile-card__rank {
            min-width: 48px;
            padding: 9px 13px;
            font-size: 15px;
            color: #fff8f4;
            background: linear-gradient(145deg,
                    rgba(248, 220, 205, 0.92) 0%,
                    rgba(214, 172, 148, 0.82) 52%,
                    rgba(52, 28, 38, 0.92) 100%);
            border-color: rgba(232, 198, 178, 0.48);
            box-shadow: 0 0 12px rgba(214, 172, 148, 0.28);
        }

        #rankView .rank-mobile-card__media {
            flex: 0 0 auto;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            max-height: none;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(4, 2, 10, 0.95);
            overflow: hidden;
            border: 1px solid rgba(var(--rank-accent-rgb), 0.42);
            box-shadow:
                0 8px 28px rgba(0, 0, 0, 0.45),
                0 0 22px var(--rank-accent-glow);
        }

        #rankView .rank-mobile-card.rank-1 .rank-mobile-card__media {
            border-color: rgba(255, 220, 140, 0.65);
            box-shadow:
                0 0 28px rgba(255, 215, 120, 0.45),
                0 0 18px rgba(168, 85, 247, 0.28);
        }

        #rankView .rank-mobile-card.rank-2 .rank-mobile-card__media {
            border-color: rgba(210, 202, 255, 0.55);
            box-shadow: 0 0 24px rgba(196, 188, 255, 0.38);
        }

        #rankView .rank-mobile-card.rank-3 .rank-mobile-card__media {
            border-color: rgba(255, 175, 155, 0.52);
            box-shadow:
                0 0 22px rgba(255, 140, 175, 0.35),
                0 0 12px rgba(244, 114, 182, 0.2);
        }

        #rankView .rank-mobile-card__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #rankView .rank-mobile-card__ph {
            font-size: 42px;
            line-height: 1;
            color: rgba(var(--rank-accent-rgb), 0.45);
        }

        #rankView .rank-mobile-card__meta {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 0 2px 2px;
        }

        #rankView .rank-mobile-card__title {
            font-size: clamp(17px, 4.6vw, 20px);
            font-weight: 800;
            line-height: 1.38;
            letter-spacing: -0.03em;
            color: #faf8ff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #rankView .rank-mobile-card--top-1 .rank-mobile-card__title {
            font-size: clamp(18px, 4.8vw, 21px);
        }

        #rankView .rank-mobile-card.rank-1 .rank-mobile-card__title {
            color: #fffaf0;
            text-shadow: 0 0 20px rgba(232, 212, 168, 0.3);
        }

        #rankView .rank-mobile-card.rank-2 .rank-mobile-card__title {
            color: #f4f2fc;
            text-shadow: 0 0 16px rgba(196, 188, 228, 0.24);
        }

        #rankView .rank-mobile-card.rank-3 .rank-mobile-card__title {
            color: #fff6f0;
            text-shadow: 0 0 14px rgba(214, 172, 148, 0.2);
        }

        #rankView .rank-mobile-card__stats {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 12px;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.45;
            letter-spacing: -0.01em;
            color: rgba(220, 210, 245, 0.78);
        }

        #rankView .rank-mobile-card.rank-1 .rank-mobile-card__stats {
            font-size: 14px;
            color: rgba(255, 248, 235, 0.9);
        }

        #rankView .rank-mobile-card.rank-2 .rank-mobile-card__stats {
            color: rgba(232, 228, 248, 0.88);
        }

        #rankView .rank-mobile-card.rank-3 .rank-mobile-card__stats {
            color: rgba(248, 228, 215, 0.86);
        }

        @media (max-width: 768px) {
            #rankView.content-view--subpage .view-app-body.rank-view-body {
                flex: 1 1 auto;
                min-height: 0;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-y: auto;
                padding-top: var(--subpage-body-gap, 12px);
                padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
            }

            #rankView .rank-view-inner {
                display: block;
                min-height: auto;
                padding-left: 12px;
                padding-right: 12px;
                padding-bottom: 0;
            }

            #rankView .rank-view-hero {
                margin: 0 -12px 16px;
                padding:
                    calc(24px + env(safe-area-inset-top, 0px)) 16px 28px;
                border-radius: 0 0 20px 20px;
                text-align: left;
                overflow: visible;
            }

            #rankView .rank-view-hero__copy {
                overflow: visible;
            }

            #rankView .rank-view-eyebrow {
                display: block;
                font-size: clamp(20px, 5.5vw, 28px);
                letter-spacing: 0.06em;
                line-height: 1.22;
                margin-bottom: 8px;
            }

            #rankView .rank-view-title {
                margin-bottom: 8px;
                font-size: clamp(14px, 3.5vw, 16px);
                letter-spacing: 0.1em;
                line-height: 1.35;
            }

            #rankView .rank-view-lead {
                margin-bottom: 14px;
                font-size: 12px;
                line-height: 1.5;
                text-align: left;
            }

            #rankView .rank-view-hero__meta {
                justify-content: flex-start;
            }

            #rankView .rank-hero-pill {
                font-size: 10px;
                padding: 5px 10px;
            }

            #rankView .rank-view-hero__aurora {
                opacity: 0.88;
                filter: blur(48px);
            }

            #rankView .rank-view-hero__aurora--1 {
                width: 120%;
                left: -12%;
                top: -20%;
            }

            #rankView .rank-view-hero__aurora--2 {
                top: -10%;
                right: -12%;
            }

            #rankView .rank-view-hero__aurora--3 {
                bottom: -20%;
                left: 18%;
            }

            #rankView .rank-board {
                display: block;
                min-height: auto;
                height: auto;
                margin-bottom: 0;
            }

            #rankView .rank-board__hint--desktop {
                display: none;
            }

            #rankView .rank-board-desktop {
                display: none;
            }

            #rankView .rank-board-mobile {
                display: block;
                min-height: auto;
                height: auto;
            }

            #rankView .rank-board-loading,
            #rankView .rank-board-loading-shell,
            #rankView .rank-board-empty {
                margin: 32px auto;
            }

            #rankView .rank-board-error {
                margin: 28px 16px 40px;
                max-width: none;
            }

            #rankView .rank-mobile-cats-scroll {
                margin-bottom: 10px;
            }

            #rankView .rank-mobile-feed {
                display: flex;
                flex-direction: column;
                gap: 10px;
                overflow: visible;
                scroll-snap-type: none;
                padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px));
            }

            #rankView .rank-mobile-card {
                gap: 8px;
                min-height: auto;
                scroll-snap-align: none;
                scroll-snap-stop: normal;
            }

            #rankView .rank-mobile-card:last-child {
                margin-bottom: 0;
            }

            #rankView .rank-mobile-card__media {
                aspect-ratio: 16 / 9;
                max-height: none;
            }

            #rankView .rank-mobile-card--top-1 .rank-mobile-card__media {
                aspect-ratio: 16 / 9;
                max-height: none;
            }

            #rankView .rank-mobile-card__meta {
                gap: 6px;
                padding: 0 2px 4px;
            }

            #rankView .rank-mobile-card__title {
                line-height: 1.38;
            }

            #rankView .rank-mobile-card__stats {
                gap: 4px 10px;
                font-size: 12px;
                line-height: 1.4;
            }
        }

        @media (min-width: 769px) {
            #rankView .rank-view-hero {
                text-align: left;
            }

            #rankView .rank-board {
                --rank-col-w: clamp(380px, calc((100vw - 100px) / 3.05), 420px);
                --rank-col-gap: 28px;
                --rank-lane-pad: 20px;
                margin-bottom: 24px;
            }

            #rankView .rank-board__hint--desktop {
                text-align: left;
            }

            #rankView .rank-view-title {
                font-size: clamp(24px, 2.6vw, 36px);
                font-weight: 800;
                letter-spacing: -0.03em;
                text-transform: none;
            }

            #rankView .rank-columns-scroll {
                overflow-x: auto;
                overflow-y: visible;
            }

            #rankView .rank-columns {
                align-items: flex-start;
            }

            #rankView .rank-col {
                height: auto;
                max-height: none;
                min-height: 0;
                overflow: visible;
            }

            #rankView .rank-col__list {
                flex: none;
                min-height: auto;
                overflow: visible;
            }
        }

        @media (min-width: 1100px) {
            #rankView .rank-board {
                --rank-col-w: clamp(390px, calc((100vw - 112px) / 3.06), 420px);
                --rank-col-gap: 32px;
            }
        }

        @media (min-width: 1400px) {
            #rankView .rank-board {
                --rank-col-w: clamp(400px, calc((100vw - 128px) / 3.08), 420px);
                --rank-col-gap: 36px;
            }
        }


        .home-tile {
            min-height: clamp(200px, 44vw, 248px);
            border: 1px solid rgba(167, 139, 250, 0.28);
            border-radius: 26px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0;
            padding: 22px 14px 18px;
            font-family: inherit;
            color: #faf5ff;
            transition:
                transform 0.24s cubic-bezier(.34, 1.2, .64, 1),
                box-shadow 0.24s ease,
                border-color 0.24s ease;
            box-shadow:
                0 4px 26px rgba(0, 0, 0, 0.36),
                0 0 0 1px rgba(139, 92, 246, 0.06),
                0 12px 32px rgba(88, 28, 135, 0.14);
            position: relative;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        .home-tile::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 48%;
            background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.1) 100%);
            pointer-events: none;
        }

        .home-tile::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(148deg, rgba(255, 255, 255, 0.11) 0%, transparent 44%);
            pointer-events: none;
        }

        .home-tile:focus {
            outline: 2px solid rgba(168, 85, 247, 0.7);
            outline-offset: 3px;
        }

        .home-tile:active {
            transform: translateY(-1px) scale(0.98);
        }

        .home-tile:hover {
            transform: translateY(-5px);
            border-color: rgba(196, 181, 253, 0.42);
            box-shadow:
                0 20px 48px rgba(139, 92, 246, 0.32),
                0 10px 32px rgba(88, 28, 135, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }

        .home-tile--video {
            background: linear-gradient(165deg,
                    rgba(76, 29, 149, 0.94) 0%,
                    rgba(109, 40, 217, 0.62) 42%,
                    rgba(22, 16, 38, 0.95) 100%);
        }

        .home-tile--community {
            background: linear-gradient(165deg,
                    rgba(49, 46, 129, 0.9) 0%,
                    rgba(126, 58, 210, 0.5) 46%,
                    rgba(12, 8, 22, 0.96) 100%);
        }

        .home-tile-top {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 88px;
            position: relative;
            z-index: 1;
        }

        .home-tile-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .home-tile-icon {
            font-size: clamp(44px, 12vw, 56px);
            line-height: 1;
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.38));
        }

        .home-tile-label {
            font-size: clamp(16px, 4.2vw, 18px);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .home-tile-sub {
            font-size: 11px;
            font-weight: 500;
            color: rgba(245, 243, 255, 0.52);
        }

        /* ===============================
           푸터
        =============================== */
        footer {
            padding: 40px 20px;
            background: rgba(15, 10, 21, 0.8);
            border-top: 1px solid rgba(139, 92, 246, 0.2);
            text-align: center;
            color: #808080;
            font-size: 13px;
        }

        footer a {
            color: #a855f7;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer a:hover {
            color: #d946ef;
        }

        /* ===============================
           반응형
        =============================== */
        @media (max-width: 768px) {
            :root {
                --page-side-pad: 15px;
                --home-max-width: 420px;
                --main-header-height: 60px;
                --subpage-scroll-pad-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
            }

            #postDetailView .post-detail-comment-list,
            #videoDetailView .video-detail-comment-list {
                max-height: none;
                overflow-y: visible;
            }

            nav.nav-bar {
                height: var(--main-header-height, 60px);
                padding: 0 var(--page-side-pad);
            }

            main {
                margin-top: var(--main-header-height, 60px);
            }

            .app-home {
                padding: 24px 15px 40px;
            }

            /* 상단(nav-bar)에서만 회원가입 버튼 숨김 — 로그아웃은 동일 클래스를 쓰므로 별도 표시 */
            .nav-bar__right .nav-auth-btn--signup[data-auth-action="signup"] {
                display: none;
            }

            .nav-bar__right .nav-auth-btn--signup[data-auth-action="logout"] {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .nav-bar__right .nav-auth-btn--login {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .nav-bar__right .nav-auth-buttons {
                gap: 0;
            }

            .nav-bar__right .nav-auth-btn {
                padding: 7px 10px;
                font-size: 13px;
            }

            .nav-menu {
                gap: 20px;
            }

            .nav-link {
                display: none;
            }

            .app-home-tagline {
                margin-bottom: 24px;
            }

            .home-tiles {
                gap: 12px;
            }

            .home-tile {
                border-radius: 22px;
                min-height: clamp(188px, 46vw, 220px);
                padding: 18px 12px 16px;
            }

            .home-tile-top {
                min-height: 76px;
            }

            .home-rank-card {
                margin-top: 14px;
            }

            .home-rank-card__inner {
                min-height: 96px;
                padding: 16px 14px;
                gap: 10px;
            }

            .home-rank-card__icon-wrap {
                width: 58px;
                height: 54px;
            }

            .home-rank-card__icon {
                width: 48px;
            }

            .home-rank-card__body {
                padding: 0 4px;
            }

            .home-card-go--rank {
                width: 36px;
                height: 36px;
            }
        }

        @media (max-width: 380px) {
            .home-tiles {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .home-tile {
                min-height: 168px;
            }

            .home-tile-top {
                min-height: 64px;
            }
        }

        @media (max-width: 320px) {
            .home-tile {
                border-radius: 20px;
                padding: 16px 12px 14px;
            }

            .home-rank-card__inner {
                min-height: 88px;
                padding: 14px 12px;
            }

            .home-rank-card__icon-wrap {
                width: 52px;
                height: 48px;
            }

            .home-rank-card__icon {
                width: 44px;
            }

            .home-rank-card__sub {
                font-size: 10px;
            }
        }

        #communityView .launchpad-title {
            font-size: 2.2rem;
            font-weight: 800;
            color: #fff;
            opacity: 1;
            margin-bottom: 42px;
            margin-top: 0;
            text-align: center;
            letter-spacing: -0.01em;
            background: linear-gradient(90deg, #fff 80%, #a892fd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            filter:
                drop-shadow(0 2px 14px #b99aff32) drop-shadow(0 0px 4px #e9e6fb11);
        }

        @media (max-width: 480px) {
            #communityView .launchpad-title {
                font-size: 1.55rem;
            }
        }

        /* ========== 운영 관리 (운영자 전용) ========== */
        #opsAdminView.content-view--subpage {
            height: var(--app-chrome-below-nav);
            max-height: var(--app-chrome-below-nav);
            min-height: var(--app-chrome-below-nav);
            overflow: hidden;
        }

        #opsAdminView.content-view--subpage>.view-app-body.ops-admin-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding-top: var(--subpage-body-gap, 12px);
            padding-bottom: 0;
            max-width: 720px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        .ops-admin-stats {
            flex: 0 0 auto;
            padding: 0 14px 14px;
            box-sizing: border-box;
        }

        .ops-admin-stats-title {
            margin: 0 0 8px;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(200, 190, 255, 0.75);
        }

        .ops-admin-stats-status {
            margin: 0 0 8px;
            font-size: 0.78rem;
            color: rgba(232, 228, 255, 0.55);
            min-height: 1.1em;
        }

        .ops-admin-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        @media (min-width: 520px) {
            .ops-admin-stats-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (min-width: 680px) {
            .ops-admin-stats-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        .ops-admin-stat-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(18, 16, 36, 0.72);
            min-width: 0;
        }

        .ops-admin-stat-card--accent {
            border-color: rgba(251, 191, 36, 0.35);
            background: rgba(120, 90, 40, 0.18);
        }

        .ops-admin-stat-card__label {
            font-size: 0.72rem;
            font-weight: 600;
            color: rgba(232, 228, 255, 0.62);
            line-height: 1.3;
        }

        .ops-admin-stat-card__value {
            font-size: 1.12rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #f8f6ff;
            line-height: 1.2;
        }

        .ops-admin-stat-card--accent .ops-admin-stat-card__value {
            color: #fde68a;
        }

        .ops-admin-tabs {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 0 14px 12px;
            box-sizing: border-box;
        }

        .ops-admin-tab-btn {
            flex: 1 1 auto;
            max-width: 168px;
            min-width: 120px;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(20, 18, 40, 0.55);
            color: #e8e4ff;
            font-size: 0.86rem;
            font-weight: 600;
            cursor: pointer;
        }

        .ops-admin-tab-btn.is-active {
            border-color: #a892fd;
            background: rgba(120, 90, 220, 0.35);
            color: #fff;
        }

        .ops-admin-tab-btn:focus-visible {
            outline: 2px solid #c4b5fd;
            outline-offset: 2px;
        }

        .ops-admin-panel {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .ops-admin-panel.hidden {
            display: none !important;
        }

        #opsAdminView .ops-admin-panel--reports .report-admin-body,
        #opsAdminView .ops-admin-panel--hidden .hidden-content-admin-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #opsAdminView .report-admin-toolbar {
            flex: 0 0 auto;
            flex-shrink: 0;
            padding: 0 14px 10px;
            box-sizing: border-box;
            background: linear-gradient(135deg, #20123a 68%, #271254 100%);
            position: relative;
            z-index: 2;
        }

        #opsAdminView .report-admin-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding: 0 14px var(--subpage-scroll-pad-bottom, 24px);
            box-sizing: border-box;
        }

        .report-admin-body {
            padding: 0;
            max-width: none;
            margin: 0;
        }

        .report-admin-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }

        @media (max-width: 420px) {
            #opsAdminView .report-admin-filters {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                padding-bottom: 2px;
            }

            #opsAdminView .report-admin-filter-btn {
                flex: 0 0 auto;
                min-width: 68px;
            }
        }

        .report-admin-filter-btn {
            flex: 1 1 auto;
            min-width: 72px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(20, 18, 40, 0.55);
            color: #e8e4ff;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
        }

        .report-admin-filter-btn.is-active {
            border-color: #a892fd;
            background: rgba(120, 90, 220, 0.35);
            color: #fff;
        }

        .report-admin-filter-btn:focus-visible {
            outline: 2px solid #c4b5fd;
            outline-offset: 2px;
        }

        .report-admin-status-line {
            font-size: 0.82rem;
            color: rgba(232, 228, 255, 0.65);
            margin: 0 0 12px;
            min-height: 1.2em;
        }

        .report-admin-empty {
            text-align: center;
            color: rgba(232, 228, 255, 0.55);
            padding: 28px 12px;
            margin: 0;
        }

        .report-admin-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .report-admin-card {
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(18, 16, 36, 0.92);
            padding: 14px 14px 12px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
        }

        .report-admin-card-head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }

        .report-admin-card-head-pills {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .report-admin-source-pill {
            font-size: 0.76rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(56, 189, 248, 0.18);
            color: #bae6fd;
            border: 1px solid rgba(56, 189, 248, 0.28);
        }

        .report-admin-card-time {
            font-size: 0.82rem;
            color: rgba(232, 228, 255, 0.6);
        }

        .report-admin-status-pill {
            font-size: 0.78rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(120, 90, 220, 0.35);
            color: #f5f3ff;
        }

        .report-admin-status-pill--pending {
            background: rgba(234, 179, 8, 0.25);
            color: #fde68a;
        }

        .report-admin-status-pill--reviewed {
            background: rgba(34, 197, 94, 0.22);
            color: #bbf7d0;
        }

        .report-admin-status-pill--dismissed {
            background: rgba(148, 163, 184, 0.25);
            color: #e2e8f0;
        }

        .report-admin-auto-pill {
            font-size: 0.76rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(249, 115, 22, 0.22);
            color: #fed7aa;
        }

        .report-admin-card-row--auto-hidden {
            color: #fde68a;
        }

        .report-admin-card-row {
            font-size: 0.88rem;
            line-height: 1.45;
            color: #e8e4ff;
            margin: 4px 0;
        }

        .report-admin-card-row strong {
            color: rgba(200, 190, 255, 0.95);
            font-weight: 600;
            margin-right: 6px;
        }

        .report-admin-snapshot {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 0.86rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 140px;
            overflow-y: auto;
            color: rgba(248, 245, 255, 0.92);
        }

        .report-admin-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .report-admin-action-btn {
            flex: 1 1 120px;
            padding: 10px 12px;
            border-radius: 10px;
            border: none;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
        }

        .report-admin-action-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .report-admin-action-btn--reviewed {
            background: linear-gradient(135deg, #22c55e, #15803d);
            color: #fff;
        }

        .report-admin-action-btn--dismissed {
            background: rgba(100, 100, 120, 0.55);
            color: #f1f5f9;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .report-admin-action-btn--unhide {
            flex: 1 1 100%;
            background: rgba(251, 191, 36, 0.2);
            color: #fde68a;
            border: 1px solid rgba(251, 191, 36, 0.45);
        }

        .report-admin-action-btn--rehide {
            flex: 1 1 100%;
            background: rgba(34, 197, 94, 0.18);
            color: #bbf7d0;
            border: 1px solid rgba(34, 197, 94, 0.4);
        }

        .report-admin-actions--done {
            margin-top: 12px;
        }

        .report-admin-action-done {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 100%;
            min-height: 40px;
            padding: 10px 12px;
            border-radius: 10px;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .report-admin-action-done--reviewed {
            background: rgba(34, 197, 94, 0.16);
            color: #bbf7d0;
            border: 1px solid rgba(34, 197, 94, 0.35);
        }

        .report-admin-action-done--dismissed {
            background: rgba(100, 116, 139, 0.22);
            color: rgba(226, 232, 240, 0.88);
            border: 1px solid rgba(148, 163, 184, 0.28);
        }

        /* ========== 숨김 콘텐츠 (운영 관리 탭) ========== */

        #opsAdminView .hidden-content-admin-toolbar {
            flex: 0 0 auto;
            flex-shrink: 0;
            padding: 0 14px 10px;
            box-sizing: border-box;
            background: linear-gradient(135deg, #20123a 68%, #271254 100%);
            position: relative;
            z-index: 2;
        }

        #opsAdminView .hidden-content-admin-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding: 0 14px var(--subpage-scroll-pad-bottom, 24px);
            box-sizing: border-box;
        }

        .hidden-content-admin-body {
            padding: 0;
            max-width: none;
            margin: 0;
        }

        .hidden-content-admin-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }

        @media (max-width: 420px) {
            #opsAdminView .hidden-content-admin-filters {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                padding-bottom: 2px;
            }

            #opsAdminView .hidden-content-admin-filter-btn {
                flex: 0 0 auto;
                min-width: 68px;
            }
        }

        .hidden-content-admin-filter-btn {
            flex: 1 1 auto;
            min-width: 72px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(20, 18, 40, 0.55);
            color: #e8e4ff;
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
        }

        .hidden-content-admin-filter-btn.is-active {
            border-color: #a892fd;
            background: rgba(120, 90, 220, 0.35);
            color: #fff;
        }

        .hidden-content-admin-status-line {
            font-size: 0.82rem;
            color: rgba(232, 228, 255, 0.65);
            margin: 0 0 12px;
            min-height: 1.2em;
        }

        .hidden-content-admin-empty {
            text-align: center;
            color: rgba(232, 228, 255, 0.55);
            padding: 28px 12px;
            margin: 0;
        }

        .hidden-content-admin-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .hidden-content-admin-card {
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(18, 16, 36, 0.92);
            padding: 14px 14px 12px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
        }

        .hidden-content-admin-card-head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }

        .hidden-content-admin-card-head-pills {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .hidden-content-admin-type-pill {
            font-size: 0.76rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(168, 146, 253, 0.2);
            color: #e9d5ff;
            border: 1px solid rgba(168, 146, 253, 0.35);
        }

        .hidden-content-admin-status-pill {
            font-size: 0.78rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.22);
            color: #fecaca;
        }

        .hidden-content-admin-card-time {
            font-size: 0.82rem;
            color: rgba(232, 228, 255, 0.6);
        }

        .hidden-content-admin-card-row {
            font-size: 0.88rem;
            line-height: 1.45;
            color: #e8e4ff;
            margin: 4px 0;
        }

        .hidden-content-admin-card-row strong {
            color: rgba(200, 190, 255, 0.95);
            font-weight: 600;
            margin-right: 6px;
        }

        .hidden-content-admin-snapshot {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 0.86rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 140px;
            overflow-y: auto;
            color: rgba(248, 245, 255, 0.92);
        }

        .hidden-content-admin-card-actions {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        /* ===============================
           1:1 DM (MVP)
        =============================== */
        #dmView.content-view--subpage .view-app-body {
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 0 14px var(--subpage-scroll-pad-bottom, 24px);
        }

        @media (min-width: 769px) {
            #dmView.content-view--subpage .view-app-body {
                width: min(100%, 760px);
                max-width: 760px;
                margin: 0 auto;
                padding-left: 10px;
                padding-right: 10px;
            }
        }

        #dmView .dm-shell {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #dmView .dm-intro {
            flex: 0 0 auto;
            margin: 0;
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
            color: rgba(210, 200, 250, 0.88);
            background: rgba(88, 28, 135, 0.2);
            border: 1px solid rgba(168, 85, 247, 0.2);
        }

        #dmView .dm-peer-status {
            flex: 0 0 auto;
            margin: 0;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 12px;
            color: rgba(251, 191, 36, 0.95);
            background: rgba(120, 53, 15, 0.35);
            border: 1px solid rgba(245, 158, 11, 0.25);
        }

        #dmView .dm-peer-status.hidden {
            display: none;
        }

        #dmView .dm-message-list {
            list-style: none;
            margin: 0;
            padding: 10px 8px 10px 4px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1 1 0;
            min-height: 180px;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: auto;
            border-radius: 14px;
            border: 1px solid rgba(139, 92, 246, 0.18);
            background: rgba(10, 6, 24, 0.55);
        }

        #dmView .dm-message-list::before {
            content: '';
            display: block;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
        }

        #dmView .dm-message-item {
            flex-shrink: 0;
            max-width: 92%;
            padding: 10px 12px;
            border-radius: 14px 14px 14px 6px;
            background: rgba(28, 16, 52, 0.85);
            border: 1px solid rgba(139, 92, 246, 0.15);
            align-self: flex-start;
        }

        #dmView .dm-message-item--self {
            align-self: flex-end;
            border-radius: 14px 14px 6px 14px;
            background: linear-gradient(135deg,
                    rgba(109, 40, 217, 0.96) 0%,
                    rgba(124, 58, 237, 0.9) 38%,
                    rgba(192, 38, 211, 0.82) 100%);
            border: 1px solid rgba(236, 72, 153, 0.4);
            box-shadow:
                0 12px 32px rgba(124, 58, 237, 0.22),
                0 4px 16px rgba(217, 70, 239, 0.14);
        }

        #dmView .dm-message-item--empty {
            max-width: 100%;
            align-self: center;
            text-align: center;
            font-size: 12px;
            line-height: 1.55;
            color: rgba(130, 120, 165, 0.55);
            border-style: dashed;
            background: transparent;
            border-radius: 12px;
            padding: 24px 12px;
        }

        #dmView .dm-message-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 11px;
            color: rgba(180, 170, 220, 0.78);
        }

        #dmView .dm-message-item--self .dm-message-meta {
            color: rgba(255, 255, 255, 0.74);
        }

        #dmView .dm-message-author {
            font-weight: 700;
            color: #ddd6fe;
        }

        #dmView .dm-message-item--self .dm-message-author--self {
            font-weight: 700;
            color: rgba(255, 255, 255, 0.96);
        }

        #dmView .dm-message-time {
            font-size: 11px;
            color: rgba(130, 120, 165, 0.65);
        }

        #dmView .dm-message-item--self .dm-message-time {
            color: rgba(255, 255, 255, 0.68);
        }

        #dmView .dm-message-text {
            margin: 0;
            font-size: 14px;
            line-height: 1.55;
            color: rgba(245, 240, 255, 0.95);
            word-break: break-word;
            white-space: pre-wrap;
        }

        #dmView .dm-message-item--self .dm-message-text {
            color: rgba(255, 255, 255, 0.96);
        }

        #dmView .dm-form {
            flex: 0 0 auto;
            flex-shrink: 0;
            display: flex;
            gap: 8px;
            align-items: flex-end;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding-top: 10px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            margin: 0;
            background: rgba(12, 8, 24, 0.96);
            border-top: 1px solid rgba(167, 139, 250, 0.12);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 -1px 20px rgba(0, 0, 0, 0.12);
        }

        #dmView .dm-message-input {
            flex: 1 1 auto;
            min-height: 56px;
            max-height: 120px;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            resize: vertical;
            overflow-y: auto;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(167, 139, 250, 0.28);
            background: rgba(14, 10, 28, 0.72);
            color: rgba(248, 245, 255, 0.95);
            font-size: 16px;
            line-height: 1.5;
            font-family: inherit;
        }

        #dmView .dm-message-input:focus {
            outline: none;
            border-color: rgba(192, 132, 252, 0.55);
            box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.18);
        }

        #dmView .dm-message-input:disabled {
            opacity: 0.55;
        }

        #dmView .dm-message-submit {
            align-self: flex-end;
            flex: 0 0 auto;
            min-width: 64px;
            min-height: 44px;
            padding: 0 14px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #7c3aed, #9333ea);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        #dmView .dm-message-submit:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        #dmView .dm-message-submit:not(:disabled):hover,
        #dmView .dm-message-submit:not(:disabled):focus-visible {
            filter: brightness(1.06);
            outline: none;
        }

        #dmView .dm-waiting-shell {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 240px;
            padding: 24px 8px;
        }

        #dmView .dm-waiting-shell.hidden {
            display: none;
        }

        #dmView .dm-waiting-card {
            width: 100%;
            max-width: 360px;
            padding: 24px 20px;
            border-radius: 16px;
            text-align: center;
            background: rgba(14, 10, 28, 0.82);
            border: 1px solid rgba(167, 139, 250, 0.28);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
        }

        #dmView .dm-waiting-title {
            margin: 0 0 10px;
            font-size: 18px;
            font-weight: 700;
            color: rgba(245, 243, 255, 0.98);
        }

        #dmView .dm-waiting-target {
            margin: 0 0 8px;
            font-size: 14px;
            color: rgba(216, 180, 254, 0.92);
        }

        #dmView .dm-waiting-desc {
            margin: 0 0 18px;
            font-size: 13px;
            line-height: 1.55;
            color: rgba(200, 190, 235, 0.78);
        }

        #dmView .dm-waiting-cancel-btn {
            min-width: 96px;
            height: 42px;
            padding: 0 18px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.06);
            color: rgba(248, 245, 255, 0.92);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        #dmView .dm-waiting-cancel-btn:hover,
        #dmView .dm-waiting-cancel-btn:focus-visible {
            background: rgba(255, 255, 255, 0.12);
            outline: none;
        }

        #dmView .dm-chat-shell {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #dmView .dm-chat-shell.hidden {
            display: none;
        }

        @media (min-width: 769px) {
            #dmView .dm-form {
                max-width: 100%;
            }
        }

        .dm-request-notify-backdrop {
            position: fixed;
            inset: 0;
            z-index: 9998;
            background: rgba(8, 6, 18, 0.55);
        }

        .dm-request-notify-backdrop.hidden {
            display: none;
        }

        .dm-request-notify {
            position: fixed;
            left: 50%;
            top: 50%;
            bottom: auto;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: min(92vw, 380px);
            max-height: min(84vh, 340px);
            overflow-y: auto;
            padding: 16px 16px 14px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(32, 18, 58, 0.98), rgba(39, 18, 84, 0.98));
            border: 1px solid rgba(167, 139, 250, 0.35);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
        }

        .dm-request-notify.hidden {
            display: none;
        }

        .dm-request-notify--in-lounge {
            top: calc(var(--main-header-height, 70px) + var(--sub-page-bar-height, 52px) + 16px);
            bottom: auto;
            transform: translateX(-50%);
        }

        .dm-request-notify-text {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.55;
            color: rgba(248, 245, 255, 0.95);
            text-align: center;
        }

        .dm-request-notify-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        .dm-request-notify-btn {
            flex: 1 1 0;
            min-height: 42px;
            border-radius: 12px;
            border: none;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .dm-request-notify-btn--accept {
            background: linear-gradient(135deg, #7c3aed, #9333ea);
            color: #fff;
        }

        .dm-request-notify-btn--decline {
            background: rgba(255, 255, 255, 0.08);
            color: rgba(248, 245, 255, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }