/* ══════════════════════════════════════════
   SHV_NEW 전용 브릿지 — V1 레거시 ↔ V2 디자인 공존
   V2 css/v2/ 원본은 수정하지 않고, SHV 고유 요소만 여기서 보정.
   ══════════════════════════════════════════ */

/* ── 1. V1 이름 → V2 토큰 별칭 ──
   --bg-2 / --topbar-h / --panel-2 는 tokens.css 가 SoT. 여기선 V1 네임만 매핑. */
:root {
    --text1:  var(--text-1);
    --text2:  var(--text-2);
    --text3:  var(--text-3);
    --panel2: var(--panel-2);
}

/* ── 2. Body 배경: shv-theme.css 가 담당 (라이트 클린 / 다크 솔리드)
   이전에 bridge 가 !important 로 V2 그래디언트를 강제해 theme 의도를 가로채던 문제 수정 ── */

/* ── 3. 로고 색상 다크모드 대응 ── */
[data-theme="dark"] .logo-sh {
    background: linear-gradient(135deg, #7eb3ff 0%, #4f8ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="dark"] .logo-vision { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .logo-portal {
    background: linear-gradient(135deg, #4f8ef7 0%, #2aafd4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 4. 드롭다운 포지셔닝 보정 ── */
.top-menu-item { position: relative; }
.top-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 950;
}

/* ── 4-a. V1 3단 네비게이션: top-nav view 모드 토글 ──
   [data-view="system"] → 카테고리 탭만 노출 (L0 숨김)
   [data-view="home"]   → L0 시스템 버튼만 노출 (카테고리 숨김) */
.top-nav[data-view="system"] .top-l0-btn { display: none; }
.top-nav[data-view="home"]   .top-cat-btn { display: none; }

/* 로고 pointer 명시 (a 태그라도 click-handler 용도 강조) */
.top-logo { cursor: pointer; }

/* ── 4-b. 모바일/데스크탑 네비게이션 분리 ──
   데스크탑: .top-nav (3단 네비 — L0 + 카테고리) 노출, 모듈 버튼 숨김
   모바일(포트레이트 + 랜드스케이프 폰): .top-nav 숨김, 모듈 버튼 노출 */
.module-switcher-btn.module-switcher-mobile { display: none !important; }

@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) {
    #topbar .top-nav { display: none !important; }
    .module-switcher-btn.module-switcher-mobile {
        display: inline-flex !important;
    }
    /* 모바일: 모듈 버튼 아이콘 제거 — 라벨 + 화살표만 */
    .module-switcher-btn.module-switcher-mobile .mod-sw-icon { display: none !important; }
}

/* ── 6. top-sys-badge 다크모드 ── */
[data-theme="dark"] .top-sys-badge {
    background: rgba(79,142,247,0.25);
    color: #8fb4ff;
    border-color: rgba(79,142,247,0.35);
}

/* ── 7. 사이드바 다크모드 ── */
[data-theme="dark"] #sidebar { color: var(--text-1); }
[data-theme="dark"] .side-title { color: var(--text-3); }
[data-theme="dark"] .side-item { color: var(--text-2); }
[data-theme="dark"] .side-item:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text-1);
}
[data-theme="dark"] .side-item.active {
    background: linear-gradient(135deg,
        rgba(26,58,110,0.80) 0%,
        rgba(41,82,163,0.85) 100%);
    color: #fff;
}

/* ── 8. 알림 배지 다크모드 ── */
[data-theme="dark"] .notif-badge { background: var(--danger); }

/* ── 9. 사이드바 모바일 오버레이 (common.css 중복 제거 후 SoT) ──
   V2 z-index 토큰 기반 + fade transition */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar, 800) - 1);
    background: rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity var(--duration-normal, 0.25s) var(--ease-default, ease);
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ── 10. 테넌트 드롭다운 포지셔닝 ── */
.top-tenant-wrap { position: relative; }
.top-tenant-dropdown { top: calc(100% + 6px); }

/* ── 10-a. 테넌트 버튼 다크모드 ── */
[data-theme="dark"] .top-tenant-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-1);
}
[data-theme="dark"] .top-tenant-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(126, 179, 255, 0.40);
}
[data-theme="dark"] .top-tenant-btn > .fa-building { color: #8fb4ff; }
[data-theme="dark"] .top-tenant-btn > .fa-caret-down { color: rgba(255,255,255,0.55); }

/* ══════════════════════════════════════════
   Login 페이지 전용 — V1 legacy 요소 비활성화
   (V1 login.css의 3D scene / orb / spark 이 V2 lp-bg 와 충돌)
   ══════════════════════════════════════════ */
.login-scene,
.scene-orb,
.scene-orb-left,
.scene-orb-right,
.scene-orb-top,
.scene-floor,
.scene-dashboard,
.scene-spark,
[class*="spark-"] {
    display: none !important;
}

/* 등록신청 제출 버튼 — 사진 row 와 간격 */
.login-btn--register {
    margin-top: 8px;
}

/* .is-hidden 은 common.css 에 정의 (중복 제거) */

/* ══════════════════════════════════════════
   Login V2 SHV 강화 — 레이어 대비 / CTA 포커스
   (V2 login.css 원본 위에 덧씌움)
   ══════════════════════════════════════════ */

/* 배경 오버레이 더 어둡게 → 카드와 대비 분리 */
.lp-overlay {
    background:
        radial-gradient(ellipse 55vw 55vw at 88% 2%, rgba(160,130,255,.14) 0%, transparent 68%),
        linear-gradient(135deg, rgba(10,16,60,.78) 0%, rgba(28,42,140,.68) 100%);
}

/* 카드 — 유리감 강화: blur + saturate + inset highlight */
.login-box {
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.30);
    backdrop-filter: blur(24px) saturate(1.45);
    -webkit-backdrop-filter: blur(24px) saturate(1.45);
    box-shadow:
        0 28px 72px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.60),
        inset 0 -1px 0 rgba(255,255,255,.06);
}

/* 로고 타이틀 — 대비 ↑ */
.login-logo h1 {
    color: #fff;
    text-shadow: 0 2px 28px rgba(120,140,255,.65);
}

/* 입력창 — 가독성 ↑ */
.input-icon-wrap input {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
}
.input-icon-wrap input::placeholder { color: rgba(255,255,255,.52); }
.input-icon-wrap input:focus {
    background: rgba(255,255,255,.20);
    border-color: rgba(160,180,255,.85);
}

/* CTA — 튀어나오는 느낌 */
.login-btn {
    background: linear-gradient(135deg, #5b7cff 0%, #7fa1ff 100%);
    box-shadow:
        0 8px 24px rgba(91,124,255,.50),
        inset 0 1px 0 rgba(255,255,255,.45);
}
.login-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 12px 30px rgba(91,124,255,.60),
        inset 0 1px 0 rgba(255,255,255,.50);
}
.login-btn:active:not(:disabled) { transform: translateY(0); }

/* ── 로그인 하단 링크 (비밀번호 찾기 · 등록신청) ── */
.login-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.login-bottom-links a {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .2px;
    transition: color .2s ease;
}
.login-bottom-links a:hover {
    color: #9aaeff;
}
.link-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}

/* ── 등록신청 폼 (V2 글래스 톤) ── */
.login-wrap.register-mode {
    max-width: 560px;
}
.login-wrap.register-mode .login-box {
    padding: 38px 32px 28px;
}

.login-field {
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.login-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.78);
}
.login-field label i {
    width: 14px;
    margin-right: 4px;
    color: rgba(255,255,255,.5);
}
.login-field input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    padding: 11px 12px;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 2px 6px rgba(0,0,0,.15);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.login-field input::placeholder {
    color: rgba(255,255,255,.38);
}
.login-field input:focus {
    border-color: rgba(140,160,255,.8);
    background: rgba(255,255,255,.18);
    box-shadow:
        0 0 0 3px rgba(140,160,255,.25),
        inset 0 1px 0 rgba(255,255,255,.1);
}

.req {
    color: #ff9aa8;
    font-size: 11px;
    margin-left: 2px;
}

.reg-row {
    display: flex;
    gap: 12px;
}
.reg-col {
    flex: 1;
    min-width: 0;
}
.reg-row .login-field {
    margin-bottom: 11px;
}
.reg-row .login-field label {
    margin-bottom: 5px;
    font-size: 11px;
}
.reg-row .login-field input {
    padding: 10px 11px;
    font-size: 13px;
}

.zip-wrap {
    display: flex;
    gap: 6px;
}
.zip-wrap input {
    flex: 1;
}
.zip-search-btn {
    width: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lc-primary, #5c6cff), var(--lc-primary2, #9aaeff));
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    box-shadow:
        0 8px 16px rgba(92,108,255,.32),
        inset 0 1px 0 rgba(255,255,255,.4);
    transition: filter .2s ease;
}
.zip-search-btn:hover {
    filter: brightness(1.08);
}

.reg-photo-row {
    margin-bottom: 10px;
}
.photo-upload-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.photo-upload-wrap img {
    width: 64px;
    height: 80px;
    border-radius: 9px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.08);
}
.photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    border: 1px dashed rgba(255,255,255,.42);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .2s ease;
}
.photo-upload-btn:hover {
    border-color: rgba(140,160,255,.6);
    background: rgba(255,255,255,.12);
    color: #fff;
}

.register-btn {
    width: 100%;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 11px;
    padding: 11px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.register-btn i { margin-right: 4px; }
.register-btn:hover {
    border-color: rgba(140,160,255,.6);
    background: rgba(255,255,255,.18);
    color: #fff;
}

.reg-message {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
}
.reg-message.success {
    border: 1px solid rgba(120,255,180,.32);
    background: rgba(60,200,120,.16);
    color: rgba(170,255,200,.95);
}
.reg-message.error {
    border: 1px solid rgba(255,100,130,.3);
    background: rgba(255,60,100,.12);
    color: rgba(255,160,180,.9);
}

@media (max-width: 560px) {
    .reg-row { flex-direction: column; gap: 0; }
    .login-wrap.register-mode { max-width: 100%; }
}

/* ── 저작권 푸터 가독성 강화 ── */
.login-footer {
    color: rgba(255,255,255,.7);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════════════════════
   모듈 스위처 + 바텀시트 + 자주 사용 탭바 (2026-04-21)
   - 상단 12개 L0 버튼/카테고리 탭 → 단일 모듈 버튼으로 통합
   - 모듈 선택 시 바텀시트 9개 그리드
   - 사이드바는 현재 시스템의 모든 카테고리를 flat 노출
   ══════════════════════════════════════════════════════════════ */

/* 1. 모듈 스위처 버튼 (상단) */
#topNav { gap: 8px; padding: 0 8px; align-items: center; }

.module-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.module-switcher-btn:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
}
.module-switcher-btn:active { transform: scale(.98); }
.module-switcher-btn[aria-expanded="true"] {
    background: rgba(120,140,255,.22);
    border-color: rgba(150,170,255,.38);
}
.module-switcher-btn .mod-sw-icon { font-size: 15px; opacity: .92; }
.module-switcher-btn .mod-sw-label { line-height: 1; }
.module-switcher-btn .mod-sw-caret {
    font-size: 11px;
    opacity: .7;
    margin-left: 2px;
    transition: transform .18s ease;
}
.module-switcher-btn[aria-expanded="true"] .mod-sw-caret { transform: rotate(180deg); }

/* 라이트 모드 보정 */
html:not([data-theme="dark"]) .module-switcher-btn {
    background: rgba(30,42,100,.08);
    border-color: rgba(30,42,100,.18);
    color: #1a2a6a;
}
html:not([data-theme="dark"]) .module-switcher-btn:hover {
    background: rgba(30,42,100,.14);
    border-color: rgba(30,42,100,.28);
}
html:not([data-theme="dark"]) .module-switcher-btn[aria-expanded="true"] {
    background: rgba(80,110,255,.14);
    border-color: rgba(80,110,255,.38);
    color: #1a2a6a;
}

/* 2. 모듈 선택 바텀시트 */
.mod-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,12,32,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}
.mod-picker-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mod-picker-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    max-height: 75vh;
    background: rgba(18,26,60,.92);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,.14);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 60px rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22,.8,.26,1);
    padding: 8px 18px 24px;
    display: flex;
    flex-direction: column;
    color: #fff;
}
.mod-picker-sheet.is-open { transform: translateY(0); }

/* 핸들 — 드래그 감지용 탭 영역 확장 (바 자체는 48x5, 상하 padding으로 총 ~30px 높이 확보) */
.mps-handle-wrap {
    padding: 10px 0 14px;
    display: flex; justify-content: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.mps-handle-wrap:active { cursor: grabbing; }
.mps-handle {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    margin: 0;
    transition: background .15s;
}
.mps-handle-wrap:active .mps-handle { background: rgba(255,255,255,.5); }
.mps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 14px;
}
.mps-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}
.mps-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 14px;
    transition: background .18s ease;
}
.mps-close:hover { background: rgba(255,255,255,.16); }

.mps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 4px 0 8px;
}
.mps-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
    min-height: 84px;
}
.mps-item:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
}
.mps-item:active { transform: scale(.97); }
.mps-item.is-active {
    background: rgba(120,140,255,.22);
    border-color: rgba(150,170,255,.5);
    box-shadow: 0 0 0 1px rgba(150,170,255,.25) inset;
}
.mps-item-icon {
    font-size: 22px;
    opacity: .95;
}
.mps-item-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* 라이트 모드 */
html:not([data-theme="dark"]) .mod-picker-sheet {
    background: rgba(250,252,255,.97);
    border-top-color: rgba(30,42,100,.12);
    color: #1a2a6a;
}
html:not([data-theme="dark"]) .mps-handle { background: rgba(30,42,100,.22); }
html:not([data-theme="dark"]) .mps-header { border-bottom-color: rgba(30,42,100,.08); }
html:not([data-theme="dark"]) .mps-title { color: #1a2a6a; }
html:not([data-theme="dark"]) .mps-close {
    background: rgba(30,42,100,.06);
    border-color: rgba(30,42,100,.12);
    color: #334;
}
html:not([data-theme="dark"]) .mps-close:hover { background: rgba(30,42,100,.12); }
html:not([data-theme="dark"]) .mps-item {
    background: rgba(255,255,255,.78);
    border-color: rgba(30,42,100,.1);
    color: #1a2a6a;
    box-shadow: 0 2px 8px rgba(30,42,100,.04);
}
html:not([data-theme="dark"]) .mps-item:hover {
    background: #fff;
    border-color: rgba(30,42,100,.22);
    box-shadow: 0 4px 14px rgba(30,42,100,.1);
}
html:not([data-theme="dark"]) .mps-item.is-active {
    background: rgba(80,110,255,.12);
    border-color: rgba(80,110,255,.45);
    color: #1a2a6a;
}

/* 3. 하단 네비 탭바 — 상시 표시, 스크롤 시 opacity 페이드 숨김/복귀, 모달 시 강제 숨김
   참고: fixed+backdrop-filter 조합에서 transform/translate/bottom/margin 계열 속성이 GPU 컴포지팅 레이어로
   승격된 element에서 렌더 레벨 무시 → opacity는 composited property라 정상 작동 → 페이드 전환으로 결정 */
.quick-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: rgba(14,20,50,.96);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 10px 8px;
    padding-bottom: 8px !important;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease;
}
/* 스크롤 다운 시 반투명 숨김 — opacity 0.18로 약간 남겨 존재감 유지 */
.quick-tabbar.is-nav-hidden { opacity: 0.18 !important; pointer-events: none !important; }
/* 바텀모달 열림 시 완전 숨김 */
.quick-tabbar.is-force-hidden { opacity: 0 !important; pointer-events: none !important; }
.quick-tabbar.is-hidden { display: none !important; }
/* 데스크탑에선 미노출 */
@media (min-width: 769px) {
    .quick-tabbar { display: none !important; }
}

.qtb-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.qtb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, opacity .18s ease;
    min-height: 54px;
}
.qtb-item:hover, .qtb-item:active {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.qtb-item.is-active {
    color: #9aaeff;
    background: rgba(120,140,255,.12);
}
.qtb-item .qtb-item-icon { opacity: .7; transition: opacity .18s ease, color .18s ease; }
.qtb-item.is-active .qtb-item-icon { opacity: 1; color: #4F8EF7; }
.qtb-item-icon { font-size: 18px; }
.qtb-item-label {
    font-size: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not([data-theme="dark"]) .quick-tabbar {
    background: rgba(255,255,255,.94);
    border-top-color: rgba(30,42,100,.08);
}
html:not([data-theme="dark"]) .qtb-item { color: #334155; }
html:not([data-theme="dark"]) .qtb-item .qtb-item-icon { opacity: .72; color: #475569; }
html:not([data-theme="dark"]) .qtb-item:hover,
html:not([data-theme="dark"]) .qtb-item:active {
    background: rgba(30,42,100,.06);
    color: #1a2a6a;
}
html:not([data-theme="dark"]) .qtb-item.is-active {
    color: #3a5bff;
    background: rgba(80,110,255,.1);
}
html:not([data-theme="dark"]) .qtb-item.is-active .qtb-item-icon { opacity: 1; color: #4F8EF7; }

/* 모바일 전용 — 탭바는 모바일에서만 노출 */
@media (min-width: 769px) {
    .quick-tabbar.is-visible { display: none; }
}

/* 4. 사이드바 flat 모드 — 카테고리 헤더 간격/구분선 조정 */
#sidebar .side-section + .side-section {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 2px;
    padding-top: 6px;
}
html:not([data-theme="dark"]) #sidebar .side-section + .side-section {
    border-top-color: rgba(30,42,100,.08);
}

/* 바텀시트 열렸을 때 배경 스크롤 잠금 */
body.mod-picker-open { overflow: hidden; }

/* ══════════════════════════════════════════
   PROFILE DROPDOWN (API도구 + 설정 + 로그아웃)
   ══════════════════════════════════════════ */
.top-user { position: relative; }

.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.user-trigger:focus-visible {
    outline: 2px solid rgba(79,127,255,0.55);
    outline-offset: 2px;
    border-radius: 999px;
}
.ut-caret {
    font-size: 11px;
    opacity: 0.65;
    transition: transform 0.18s ease;
    margin-left: 2px;
}
.top-user[data-open="true"] .ut-caret { transform: rotate(180deg); }

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--surface, #ffffff);
    color: var(--text-1, #0f172a);
    border: 1px solid rgba(30,42,100,0.10);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.08);
    padding: 8px 0;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 10000;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.top-user[data-open="true"] .user-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ud-head {
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(30,42,100,0.08);
}
.ud-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ud-head-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.ud-head .ud-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}
.ud-head .ud-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: rgba(15,23,42,0.58);
    word-break: break-all;
}
.theme-switch--dropdown {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
}

.ud-section {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(15,23,42,0.48);
}

.ud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-1, #0f172a);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
    transition: background 0.12s ease;
}
.ud-item:hover,
.ud-item:focus-visible {
    background: rgba(79,127,255,0.08);
    outline: none;
}
.ud-item > i {
    width: 16px;
    text-align: center;
    color: rgba(15,23,42,0.6);
    font-size: 13px;
}
.ud-item-danger { color: #dc2626; }
.ud-item-danger > i { color: #dc2626; }
.ud-item-danger:hover { background: rgba(220,38,38,0.08); }

.ud-divider {
    height: 1px;
    margin: 8px 0;
    background: rgba(30,42,100,0.08);
}

/* 다크 모드 */
[data-theme="dark"] .user-dropdown {
    background: #1e293b;
    color: #f1f5f9;
    border-color: rgba(148,163,184,0.18);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25);
}
[data-theme="dark"] .ud-head { border-bottom-color: rgba(148,163,184,0.18); }
[data-theme="dark"] .ud-head .ud-sub { color: rgba(226,232,240,0.65); }
[data-theme="dark"] .ud-section   { color: rgba(226,232,240,0.55); }
[data-theme="dark"] .ud-item      { color: #f1f5f9; }
[data-theme="dark"] .ud-item > i  { color: rgba(226,232,240,0.65); }
[data-theme="dark"] .ud-item:hover,
[data-theme="dark"] .ud-item:focus-visible { background: rgba(79,127,255,0.18); }
[data-theme="dark"] .ud-divider   { background: rgba(148,163,184,0.18); }
[data-theme="dark"] .ud-item-danger { color: #f87171; }
[data-theme="dark"] .ud-item-danger > i { color: #f87171; }
[data-theme="dark"] .ud-item-danger:hover { background: rgba(248,113,113,0.14); }

/* 모바일 — 화면 오른쪽에서 가득 차지 않도록 여백 */
@media (max-width: 768px) {
    .user-dropdown {
        right: 6px;
        min-width: min(300px, calc(100vw - 12px));
    }
    .ud-head-main {
        align-items: center;
    }
    .user-trigger .user-name { max-width: 80px; }
}