/* =========================================================================
   로비 — 메인 뷰 CSS
   - 섹션(.lobby-panel)은 배경 투명. 배경 위에 얹히는 형태.
   - 버튼과 내부 컨트롤만 불투명 배경.
   - 100dvh 사용 (모바일 URL 바 대응).
   ========================================================================= */

/* ===== 플레이 뷰 body 예외 (사이트 공통 헤더/사이드바/BGM 숨김) ===== */
body.lobby-play-body {
    margin: 0; padding: 0; overflow: hidden;
    /* 배경은 사이트 default.css.php 의 body 규칙(--bg-image-url 등) 을 그대로 상속 */
    font-family: var(--content-font-family, var(--f-pre));
    color: var(--content-font-color, var(--text-primary));
    font-size: var(--content-font-size, 14px);
}
body.lobby-play-body > *:not(#lobby-root):not(script):not(style):not(noscript):not(#inv-context-menu):not(#itemResultModal):not(#itemInputModal):not(.inventory-context-menu):not(.sq-mini-popup):not(.tl-sv-menu):not(#sq-notif-panel):not(#sq-inventory-panel):not(#lb-profile-menu):not(#lb-menu-sidebar):not(#lb-menu-backdrop) {
    display: none !important;
}
/* ※ 일부 브라우저는 long :not() 체인을 부정적으로 처리하므로
     보조 룰로 display: revert 지원 */
body.lobby-play-body > #sq-notif-panel,
body.lobby-play-body > #sq-inventory-panel,
body.lobby-play-body > #lb-profile-menu,
body.lobby-play-body > #lb-menu-sidebar,
body.lobby-play-body > #lb-menu-backdrop,
body.lobby-play-body > .sq-mini-popup,
body.lobby-play-body > .tl-sv-menu {
    display: revert !important;
}

body.lobby-play-body [class*="bgm"]:not([class*="lb-"]):not([class*="sq-"]),
body.lobby-play-body [class*="integrated-widget"],
body.lobby-play-body [class*="widget-fab"],
body.lobby-play-body [class*="floating-bgm"] {
    /* BGM 플로팅 위젯은 유지 — 사용자 지시대로 */
}

/* ===== 루트 ===== */
/* 헤더·푸터는 fixed 로 띄워서 중앙 캐릭터 이미지가 상단/바닥까지 이어지도록. */
#lobby-root {
    display: block;                  /* grid 아님 — main 하나만 사용 */
    height: 100vh;       /* 폴백 */
    height: 100dvh;
    width: 100vw;
    box-sizing: border-box;
    background: transparent;
    backdrop-filter: blur(7px);
}

/* ===== HEADER — 플로팅 ===== */
.lobby-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    pointer-events: none;           /* 빈 영역 클릭 통과 */
    /* 배경 투명 — 페이지 배경 이미지가 비쳐 보이도록 */
}
.lobby-header > * { pointer-events: auto; }
.lb-header-home {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-primary); background: var(--gray-100, rgba(255,255,255,0.06));
    text-decoration: none; flex-shrink: 0;
}
.lb-header-home:hover { background: var(--primary-color, #5a7ab8); color: #fff; }

.lb-header-meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    flex: 1; min-width: 0; flex-wrap: wrap;
}
.lb-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.lb-meta-item i { color: var(--accent-color, var(--primary-color)); font-size: 13px; }

.lb-header-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.lb-header-btn, .lb-header-profile {
    position: relative;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: filter var(--transition-fast);
    /* overflow 는 profile(이미지 clip)만 적용. 일반 버튼은 배지 오버플로 허용 */
}
.lb-header-profile { overflow: hidden; }
.lb-header-btn:hover, .lb-header-profile:hover { filter: brightness(1.1); }
.lb-header-profile img { width: 100%; height: 100%; object-fit: cover; }
.lb-header-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 5px;
    background: var(--error-color, #ef4444); color: #fff;
    border-radius: 8px; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--card-bg-color, #222);
}

/* ===== MAIN ===== */
.lobby-main {
    display: grid;
    grid-template-columns: 350px 1fr 420px;
    gap: 14px;
    padding: 0 14px;             /* 상하 padding 제거 */
    height: 100dvh;              /* 루트 전체 높이 사용 (fixed 헤더/푸터가 위/아래에 떠있음) */
    overflow: hidden;
    box-sizing: border-box;
    min-height: 0;
}
.lobby-col {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 0; overflow-y: auto;
}
.lobby-col-left {
    padding: 50px 0 50px 40px;
}
.lobby-col-center {
    display: block;          /* wrap 가 height:100% 로 채우고 자체 스크롤 */
    overflow: hidden;
    position: relative;
}
.lobby-col-right {
    padding-top: 70px;
    padding-bottom: 90px;
    padding-right: 70px;
    justify-content: center;   /* 우측 버튼 그리드를 세로 중앙 정렬 */
}

/* ===== 공통 패널 — 배경 투명 ===== */
.lobby-panel {
    background: transparent;
    border: none;
    padding: 0;
}
.lb-panel-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.4px;
}
.lb-panel-link { color: inherit; text-decoration: none; }
.lb-panel-link:hover { color: var(--accent-color, var(--primary-color)); }

/* ===== 좌: 캐릭터 카드 (배경/테두리 없음, 이름만 검정 그라디언트) ===== */
.lb-char-card {
    display: flex; align-items: center; gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
}
.lb-char-card:hover { background: transparent; }
.lb-char-portrait {
    width: 48px; height: 48px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    background: var(--gray-100, rgba(255,255,255,0.06));
    border: 3px solid var(--accent-color);
    display: inline-flex; align-items: center; justify-content: center;
}
.lb-char-portrait img { width: 100%; height: 100%; object-fit: cover; }
.lb-char-info {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; flex: 1;      /* 이름 gradient 가 우측까지 확장되도록 채움 */
}
/* 진영명 — 배경 없음, 진영 color 그대로 (inline style 에서 부여) */
.lb-char-faction {
    font-size: 11px; font-weight: 700; line-height: 1.1;
    padding: 0 2px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* 이름 — 검정 배경이 오른쪽으로 페이드 */
.lb-char-name {
    display: block;
    padding: 4px 48px 4px 8px;
    background: linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== 좌: 공지 리스트 ===== */
.lb-panel-notices { margin-top: 40px; margin-left: 20px; }   /* 캐릭터 이름 카드와 분리 + 좌측 들여쓰기 */
.lb-notice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.lb-notice-item a {
    display: flex; gap: 8px; align-items: center;
    padding: 7px 12px; border-radius: 6px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-decoration: none; font-size: 12px;
}
.lb-notice-item a:hover { filter: brightness(1.1); }
.lb-notice-icon  { font-size: 10px; color: var(--accent-color, var(--primary-color)); flex-shrink: 0; }
.lb-notice-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-notice-date  { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.lb-notice-item.lb-empty { padding: 8px; color: var(--text-muted); font-size: 12px; }

/* ===== 좌: 바로가기 버튼 (이 이하 — 푸터 쪽으로 밀착) ===== */
.lb-panel-shortcuts { margin-top: auto; }   /* 여기부터 아래 모두 컬럼 하단 밀착 */
.lb-shortcut-grid {
    display: inline-flex; gap: 8px;         /* 좌측 정렬 + 컴팩트 */
}
.lb-shortcut-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--container-bg-color);
    border: 1px solid var(--border-light, var(--card-border-color, rgba(255,255,255,0.1)));
    border-radius: 8px;
    color: var(--content-font-color);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.lb-shortcut-btn:hover {
    background: var(--primary-color, #5a7ab8); color: #fff;
    transform: translateY(-2px);
}
.lb-shortcut-btn i { font-size: 16px; color: var(--accent-color, var(--primary-color)); }
.lb-shortcut-btn:hover i { color: #fff; }

/* ===== 좌: 배너 크로스페이드 ===== */
.lb-panel-banners { position: relative; }
.lb-banner-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray-100, rgba(0,0,0,0.2));
}
.lb-banner-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end; padding: 0;
    opacity: 0; transition: opacity 0.8s ease-in-out;
    color: #fff; text-decoration: none;
    overflow: hidden;
}
.lb-banner-slide.active { opacity: 1; }
/* 오버레이 텍스트가 있을 때만 하단 검정 그라디언트 + 흰 글씨 */
.lb-banner-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 24px 12px 10px;
    background: linear-gradient(to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 55%,
        rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;    /* 링크 클릭은 슬라이드 자체가 받도록 */
}
.lb-banner-dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 6px;
}
.lb-banner-dot {
    width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
    background: var(--text-muted, #888); opacity: 0.4; cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.lb-banner-dot.active { opacity: 1; background: var(--accent-color, var(--primary-color)); }

/* ===== 좌: 헤드라인 ===== */
.lb-headline {
    display: flex; gap: 8px; align-items: baseline;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color)) 10%, transparent);
    border-left: 3px solid var(--accent-color, var(--primary-color));
    border-radius: 6px;
    text-decoration: none;
    color: var(--gray-50);
    font-size: 13px;
    margin-left: 40px;
}
.lb-headline:hover { background: color-mix(in srgb, var(--accent-color, var(--primary-color)) 18%, transparent); }
.lb-headline i { color: var(--accent-color, var(--primary-color)); font-size: 11px; flex-shrink: 0; }
.lb-headline-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 중: 캐릭터 전신 이미지 — 원본 사이즈, 휠 수직 스크롤 (스크롤바 숨김) ===== */
.lb-portrait-wrap {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;     /* 수평 가운데 */
    align-items: flex-start;     /* 상단부터 시작 — 세로 큰 이미지는 스크롤 */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge (legacy) */
}
.lb-portrait-wrap::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lb-portrait-img {
    display: block;
    max-width: 100%;             /* 가로는 컨테이너 넘지 않음 */
    height: auto;                /* 세로는 원본 비율 */
    transform: translateY(2%);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}
.lb-portrait-placeholder {
    margin: auto;                /* 플레이스홀더는 완전 가운데 */
    text-align: center; color: var(--text-muted);
    padding: 40px 20px;
}
.lb-portrait-placeholder i { font-size: 72px; opacity: 0.35; margin-bottom: 10px; display: block; }

/* 캐릭터 이미지 없을 때 — 사이트 로고를 기본 이미지로. 중앙 정렬 + Y 55% */
.lb-portrait-wrap.is-logo-fallback {
    position: relative;
    overflow: hidden;               /* 로고는 스크롤 필요 없음 */
    align-items: center;            /* flex-start 덮어쓰기 */
}
.lb-portrait-img.is-logo-fallback {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}

/* ===== 우: 6슬롯 버튼 그리드 =====
   grid-auto-rows 를 40px 로 쪼개 두 단위 = 1 "큰 행" 으로 취급.
   small(1row=40px) 과 medium(2row=80px) 이 실제 세로 크기 차이남. */
.lb-slot-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;   /* 비대칭 */
    grid-auto-rows: 40px;
    gap: 10px;
    align-content: center;
}
.lb-slot {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgb(from var(--card-border-color) r g b / 0.2);
    text-decoration: none;
    color: var(--title-font-color);
    background-size: cover; background-position: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.lb-slot:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); */
    border-color: var(--accent-color);
    color: var(--title-font-color);
    filter: brightness(1.1);
}
.lb-slot-inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    padding: 10px;
    /* background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); */
}
.lb-slot-icon  { font-size: 22px; margin-bottom: 4px; opacity: 0.95; }
.lb-slot-label { font-size: 20px; font-weight: 600; letter-spacing: -2px; text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6); }

/* ===== 크기 변형 (행 단위 = 40px) =====
   small  : 1 col × 1 row  (40px) — 컴팩트
   medium : 1 col × 2 rows (80px) — 기본 정사각형 느낌
   wide   : 2 col × 2 rows (80px) — 가로 넓적
   tall   : 1 col × 4 rows (160px) — 세로 긴
   large  : 2 col × 4 rows (160px) — 큰 정사각형 */
.lb-slot-small  { grid-column: span 1; grid-row: span 1; }
.lb-slot-medium { grid-column: span 1; grid-row: span 2; }
.lb-slot-wide   { grid-column: span 2; grid-row: span 2; }
.lb-slot-tall   { grid-column: span 1; grid-row: span 4; }
.lb-slot-large  { grid-column: span 2; grid-row: span 4; }

/* 내부 컴포넌트 크기 — 버튼 크기에 맞춰 */
.lb-slot-small .lb-slot-inner { padding: 4px 6px; }
.lb-slot-small .lb-slot-icon  { font-size: 13px; margin-bottom: 0; }
.lb-slot-small .lb-slot-label { font-size: 10px; }

.lb-slot-medium .lb-slot-icon { font-size: 22px; }
.lb-slot-wide   .lb-slot-icon { font-size: 24px; }
.lb-slot-tall   .lb-slot-icon { font-size: 30px; }
.lb-slot-large  .lb-slot-icon { font-size: 34px; }

/* ===== 라벨 위치 — 9 포지션 (icon + label 그룹 전체를 flex 정렬) ===== */
.lb-slot-pos-tl .lb-slot-inner { justify-content: flex-start; align-items: flex-start; text-align: left;   }
.lb-slot-pos-tc .lb-slot-inner { justify-content: flex-start; align-items: center;     text-align: center; }
.lb-slot-pos-tr .lb-slot-inner { justify-content: flex-start; align-items: flex-end;   text-align: right;  }
.lb-slot-pos-cl .lb-slot-inner { justify-content: center;     align-items: flex-start; text-align: left;   }
.lb-slot-pos-cc .lb-slot-inner { justify-content: center;     align-items: center;     text-align: center; }
.lb-slot-pos-cr .lb-slot-inner { justify-content: center;     align-items: flex-end;   text-align: right;  }
.lb-slot-pos-bl .lb-slot-inner { justify-content: flex-end;   align-items: flex-start; text-align: left;   }
.lb-slot-pos-bc .lb-slot-inner { justify-content: flex-end;   align-items: center;     text-align: center; }
.lb-slot-pos-br .lb-slot-inner { justify-content: flex-end;   align-items: flex-end;   text-align: right;  }

/* ===== FOOTER — 플로팅 (grid 영역 차지하지 않음) ===== */
.lobby-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    z-index: 50;
    display: flex; align-items: center;
    padding: 0 24px 0 80px;       /* 좌측 padding 키움 */
    pointer-events: none;         /* 빈 영역은 클릭 통과 (배경 이미지 영역) */
    /* 배경 없음 — 버튼만 배경색 */
}
.lobby-footer > * { pointer-events: auto; } /* 실제 컨텐츠만 클릭 잡도록 */
.lb-footer-items {
    display: flex; align-items: center; gap: 8px; flex: 1;
    overflow: visible;            /* hover lift / box-shadow 가 잘리지 않게 */
    flex-wrap: nowrap;
    min-width: 0;
}
.lb-footer-item {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    width: 40px; height: 45px;
    padding: 4px 3px;
    border-radius: 6px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    text-decoration: none;
    font-size: 9px;
    white-space: nowrap;
    transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}
.lb-footer-item:hover {
    filter: brightness(1.1);
    transform: translateY(-3px);
}
.lb-footer-item:active { transform: translateY(-1px); }
.lb-footer-item i {
    font-size: 14px;
    color: var(--accent-color, var(--primary-color));
}
.lb-footer-empty { color: var(--text-muted); font-size: 12px; padding: 0 10px; }
.lb-footer-admin {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 20px; font-size: 11px;
    background: var(--warning-color, #f5a623); color: #fff; text-decoration: none;
}
.lb-footer-admin:hover { filter: brightness(1.1); }

/* ===== 프로필 드롭다운 (body 포털링) ===== */
.lb-profile-menu {
    position: fixed;
    display: none;
    min-width: 180px;
    padding: 6px 0;
    background: var(--card-bg-color, #222);
    border: 1px solid var(--card-border-color, rgba(255,255,255,0.1));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.lb-profile-menu.active { display: block; opacity: 1; transform: translateY(0); }
.lb-profile-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    color: var(--text-primary); text-decoration: none; font-size: 13px;
    transition: background var(--transition-fast);
}
.lb-profile-menu a:hover { background: color-mix(in srgb, var(--primary-color) 18%, transparent); color: var(--primary-color); }
.lb-profile-menu a i { width: 14px; text-align: center; color: var(--text-muted); }

/* =========================================================================
   ===== 모바일 (≤ 900px) — 세로 1열 스택 =====
   desktop: [header fixed] [3-col main] [footer fixed]
   mobile : [header fixed] [세로 스크롤 single-col main] [footer fixed]
   ========================================================================= */
@media (max-width: 900px) {
    body.lobby-play-body { overflow-y: auto; overflow-x: hidden; }
    #lobby-root {
        display: block;
        height: auto;
        min-height: 100dvh;
    }

    /* 헤더 — 컴팩트 (배경 투명 유지) */
    .lobby-header {
        height: 50px;
        padding: 0 10px;
        gap: 6px;
    }
    .lb-header-meta { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    .lb-meta-item {
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 6px;
    }
    .lb-meta-item i { font-size: 13px; }
    /* 모바일에서는 포인트/경험치만 */
    .lb-meta-stamina, .lb-meta-field, .lb-meta-dungeon { display: none; }
    .lb-header-btn, .lb-header-profile { width: 32px; height: 32px; }
    .lb-header-actions { gap: 4px; }

    /* 메인 — 세로 스택 */
    .lobby-main {
        display: flex; flex-direction: column;
        padding: 60px 14px 100px;   /* fixed 헤더 50 + 여백 10 / fixed 푸터 76 + 여백 24 */
        gap: 16px;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }
    .lobby-col {
        display: flex; flex-direction: column; gap: 12px;
        overflow-y: visible;
        min-height: auto;
    }
    /* 모바일에서는 캐릭터 전신 이미지 영역 숨김 */
    .lobby-col-center { display: none; }
    .lobby-col-left   {
        order: 1;
        padding: 0 !important;      /* 데스크톱 padding-left:40px 등 완전 초기화 */
    }
    .lobby-col-right  { order: 2; padding: 0 !important; justify-content: flex-start; }

    /* 좌측 내부 여백 복구 — 바로가기(지도/일정표) 는 모바일에서 숨김 */
    .lb-panel-notices { margin-top: 16px; margin-left: 0; }
    .lb-panel-shortcuts { display: none; }

    /* intro(헤드라인) 버튼 — 좌측 여백 제거 + 액센트 버튼 스타일 */
    .lb-headline {
        margin-left: 0;
        background: var(--btn-accent-bg);
        color: var(--btn-accent-text);
        border-left: none;
    }
    .lb-headline:hover {
        background: var(--btn-accent-bg);
        filter: brightness(1.1);
    }
    .lb-headline-text { color: var(--btn-accent-text); }

    /* 캐릭터 카드 — 모바일에서 숨김 */
    .lb-panel-character { display: none; }

    /* 슬롯 그리드 — 셀 높이 재조정, large/tall 축소 */
    .lb-slot-grid   { grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; }
    .lb-slot-large  { grid-column: span 2; grid-row: span 3; }
    .lb-slot-wide   { grid-column: span 2; grid-row: span 2; }
    .lb-slot-tall   { grid-column: span 1; grid-row: span 3; }
    .lb-slot-medium { grid-column: span 1; grid-row: span 2; }
    .lb-slot-small  { grid-column: span 1; grid-row: span 1; }
    .lb-slot-large  .lb-slot-icon { font-size: 26px; }
    .lb-slot-tall   .lb-slot-icon { font-size: 22px; }

    /* 배너 — 가로형 작게 */
    .lb-banner-stack { aspect-ratio: 2 / 1; }

    /* 푸터 — 컴팩트, 가로 스크롤 허용 */
    .lobby-footer {
        height: 64px;
        padding: 0 10px;
        background: color-mix(in srgb, var(--container-bg-color) 90%, transparent);
        backdrop-filter: blur(6px);
    }
    .lb-footer-items {
        gap: 6px;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lb-footer-items::-webkit-scrollbar { display: none; height: 0; }
    .lb-footer-item  { width: 38px; height: 42px; font-size: 9px; flex-shrink: 0; }
    .lb-footer-item i { font-size: 13px; }

    /* 프로필 드롭다운 — 좌표 보정 */
    .lb-profile-menu { min-width: 160px; }
}

/* 아주 좁은 화면 (≤ 380px) — 추가 압축 */
@media (max-width: 380px) {
    .lobby-header { padding: 0 6px; gap: 4px; }
    .lb-meta-item { padding: 3px 6px; font-size: 11px; }
    .lb-header-btn, .lb-header-profile { width: 30px; height: 30px; }
    .lobby-main { padding-left: 10px; padding-right: 10px; }
}

/* ================================================================
   패널 타이틀 (공지/헤드라인/캘린더 공용)
   ================================================================ */
.lb-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--content-font-color, var(--text-primary));
    margin: 0 0 8px 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lb-panel-title i {
    color: var(--accent-color, var(--primary-color));
    font-size: 12px;
}
.lb-headline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ================================================================
   좌측 일정표
   ================================================================ */
.lb-panel-calendar {
    /* 배경·테두리 없음. 예전 바로가기 처럼 컬럼 하단에 붙어 아래 배너까지 이어짐. */
    margin-top: auto;             /* 상단 섹션과 분리, 하단 밀착 */
    background: transparent;
    border: none;
    padding: 10px 12px;
}
.lb-panel-calendar .lb-cal-title,
.lb-panel-calendar .lb-cal-num,
.lb-panel-calendar .lb-cal-event-item,
.lb-panel-calendar .lb-cal-events-head {
    text-shadow:
        0 0 6px rgb(from var(--accent-color) r g b / 0.45),
        0 1px 2px rgba(0,0,0,0.6);
}
.lb-panel-calendar .lb-cal-dh {
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.lb-panel-calendar .lb-cal-events {
    border-top-color: rgb(from var(--accent-color) r g b / 0.18);
}
.lb-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.lb-cal-title {
    font-size: 12px; font-weight: 700;
    color: var(--header-font-color, var(--text-primary));
    display: inline-flex; align-items: center; gap: 5px;
}
.lb-cal-title i { color: var(--accent-color, var(--primary-color)); }
.lb-cal-more {
    font-size: 10px;
    color: rgb(from var(--header-font-color) r g b / 60%);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background var(--transition-fast, 0.15s);
}
.lb-cal-more:hover { background: rgba(255,255,255,0.08); color: var(--accent-color); }

.lb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.lb-cal-dh, .lb-cal-day {
    text-align: center;
    font-size: 10px;
    padding: 4px 0;
    line-height: 1;
}
.lb-cal-dh {
    font-weight: 700;
    color: rgb(from var(--header-font-color) r g b / 65%);
    padding: 6px 0 4px 0;
}
.lb-cal-dh.sun { color: #ef4444; }
.lb-cal-dh.sat { color: #3b82f6; }

.lb-cal-day {
    border-radius: 4px;
    cursor: pointer;
    min-height: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--header-font-color, var(--text-primary));
    transition: background var(--transition-fast, 0.15s);
}
.lb-cal-day:hover { background: rgba(255,255,255,0.08); }
.lb-cal-day.other-month { color: rgb(from var(--header-font-color) r g b / 50%); opacity: 0.6; cursor: default; }
.lb-cal-day.other-month:hover { background: transparent; }
.lb-cal-day.sun { color: #ef4444; }
.lb-cal-day.sat { color: #3b82f6; }
.lb-cal-day.today {
    background: var(--accent-color, var(--primary-color));
    color: var(--btn-accent-text, #fff);
    font-weight: 700;
}
.lb-cal-day.today:hover { filter: brightness(1.1); }
.lb-cal-day.selected {
    outline: 2px solid var(--accent-color, var(--primary-color));
    outline-offset: -2px;
}
.lb-cal-num { font-size: 11px; }
.lb-cal-dots {
    font-size: 5px;
    color: var(--accent-color, var(--primary-color));
    letter-spacing: 0;
    line-height: 0.7;
    text-shadow: 0 0 4px rgb(from var(--accent-color) r g b / 0.55);
}
.lb-cal-day.today .lb-cal-dots { color: var(--btn-accent-text, #fff); }

.lb-cal-events {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--container-border-color, rgba(255,255,255,0.08));
}
.lb-cal-events-head {
    font-size: 11px;
    color: rgb(from var(--header-font-color) r g b / 65%);
    margin-bottom: 6px;
}
.lb-cal-events-head i { color: var(--accent-color, var(--primary-color)); margin-right: 3px; }
.lb-cal-events-list {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 120px; overflow-y: auto;
}
.lb-cal-event-item {
    font-size: 11px;
    color: var(--header-font-color, var(--text-primary));
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex; align-items: center; gap: 5px;
    transition: background var(--transition-fast, 0.15s);
}
.lb-cal-event-item:hover { background: rgba(255,255,255,0.08); color: var(--accent-color); }
.lb-cal-event-item i { font-size: 6px; color: var(--accent-color, var(--primary-color)); }
.lb-cal-events-empty { font-size: 11px; color: rgb(from var(--header-font-color) r g b / 60%); padding: 4px 0; }

/* ================================================================
   우측 — 날씨 위젯 (6슬롯 위)
   ================================================================ */
.lb-panel-weather {
    background: transparent;
    border: none;
    padding: 10px 12px;
    margin-bottom: 40px;
}
.lb-panel-weather .lb-weather-loc,
.lb-panel-weather .lb-weather-time,
.lb-panel-weather .lb-weather-temp,
.lb-panel-weather .lb-weather-humidity,
.lb-panel-weather .lb-weather-air,
.lb-panel-weather .lb-weather-name,
.lb-panel-weather .lb-weather-desc {
    text-shadow:
        0 0 6px rgb(from var(--accent-color) r g b / 0.45),
        0 1px 2px rgba(0,0,0,0.6);
}
.lb-panel-weather .lb-weather-icon {
    filter: drop-shadow(0 0 6px rgb(from var(--accent-color) r g b / 0.55));
}
.lb-weather-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; color: rgb(from var(--header-font-color) r g b / 65%);
    margin-bottom: 6px;
}
.lb-weather-loc i { margin-right: 3px; color: var(--accent-color, var(--primary-color)); }
.lb-weather-body { display: flex; align-items: center; gap: 10px; }
.lb-weather-icon {
    font-size: 30px;
    color: var(--accent-color, var(--primary-color));
    flex-shrink: 0;
}
.lb-weather-info { flex: 1; min-width: 0; }
.lb-weather-topline {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.lb-weather-temp {
    font-size: 20px; font-weight: 700;
    color: var(--header-font-color, var(--text-primary));
}
.lb-weather-temp .unit { font-size: 12px; color: rgb(from var(--header-font-color) r g b / 60%); margin-left: 1px; }
.lb-weather-humidity, .lb-weather-air {
    font-size: 10px;
    color: rgb(from var(--header-font-color) r g b / 70%);
}
.lb-weather-humidity i, .lb-weather-air i { margin-right: 2px; }
.lb-weather-nameline {
    margin-top: 2px;
    font-size: 11px;
    color: var(--header-font-color, var(--text-primary));
}
.lb-weather-name { font-weight: 600; }
.lb-weather-desc { color: rgb(from var(--header-font-color) r g b / 60%); margin-left: 2px; }

/* ================================================================
   푸터 버튼 — 마름모(이중 라인, 글로우) + 라벨은 column 자연 방향
   .lb-footer-item
     ├── .lb-footer-diamond  (30x30, rotate 45)
     │      └── i            (counter-rotate, 정방향)
     └── .lb-footer-label   (column 하단 텍스트, 회전 없음)
   ================================================================ */
.lb-footer-items {
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 2px;
}
.lb-footer-item {
    display: block;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    text-decoration: none;
    flex-shrink: 0;
    margin-top: 0;
}
/* 과거 counter-rotate 규칙 제거 — .lb-footer-diamond 자체 회전을 방해하지 않도록
   .lb-footer-item > span 에 transform:none 을 주지 않음 (span.lb-footer-diamond 과 충돌) */
.lb-footer-diamond {
    width: 38px;
    height: 38px;
    border-radius: 0;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--btn-primary-bg), color-mix(in srgb, var(--btn-primary-bg) 70%, #000));
    border: 1px solid color-mix(in srgb, var(--accent-color) 75%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    outline-offset: 2px;
    box-shadow: none;
    filter: drop-shadow(0 0 4px rgb(from var(--accent-color) r g b / 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
    overflow: hidden;
}
/* 회전된 다이아몬드 내부 콘텐츠는 반대로 돌려 정방향 유지 (column 아이콘+라벨) */
.lb-footer-content {
    transform: rotate(-45deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 36px;                  /* 회전 보정 — 다이아 내부 수평 공간 */
    line-height: 1;
    text-align: center;
}
.lb-footer-content i {
    font-size: 14px;
    color: var(--accent-color, var(--primary-color));
}
.lb-footer-label {
    font-size: 9px;
    color: var(--btn-primary-text);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 지그재그 — 짝수 아이템을 아래로 내림(간격 넓게) */
.lb-footer-item:nth-child(even) {
    margin-top: 18px;
}
.lb-footer-item:hover .lb-footer-diamond {
    filter:
        brightness(1.2)
        drop-shadow(0 0 8px rgb(from var(--accent-color) r g b / 0.8));
    /* rotate(45deg) 좌표계에서 translate(-n, +n) 은 화면상 순수 좌측 이동 */
    transform: rotate(45deg) translate(-3px, 3px);
    box-shadow: none;
}
.lb-footer-item:active .lb-footer-diamond {
    transform: rotate(45deg) translate(-1px, 1px);
}

@media (max-width: 900px) {
    .lb-footer-items { gap: 6px; padding-bottom: 0; }
    .lb-footer-item { width: 28px; min-width: 28px; height: 28px; }
    .lb-footer-diamond { width: 28px; height: 28px; }
    .lb-footer-content { width: 24px; }
    .lb-footer-content i { font-size: 9px; }
    .lb-footer-label { font-size: 6.5px; }
    .lb-footer-item:nth-child(even) { margin-top: 16px; }
}

/* ================================================================
   PC(데스크톱) 에서 공지/헤드라인 타이틀 숨김
   일정표 상단 헤더/오늘일정 헤더 숨김
   모바일에서는 타이틀 자간 기본값 (넓히지 않음)
   ================================================================ */
@media (min-width: 901px) {
    .lb-panel-notices .lb-panel-title,
    .lb-panel-headline .lb-panel-title { display: none !important; }

    .lb-panel-calendar .lb-cal-head,
    .lb-panel-calendar .lb-cal-events-head { display: none !important; }
}

@media (max-width: 900px) {
    .lb-panel-title { letter-spacing: normal; }
}

/* ================================================================
   공용 메뉴 — 헤더 햄버거(마름모) + 우측 투명 사이드바(세로 지그재그)
   ================================================================ */
.lb-menu-btn {
    width: 26px;
    height: 26px;
    margin-left: 14px;        /* 프로필과 간격 확보 */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lb-menu-btn .lb-footer-diamond {
    width: 26px;
    height: 26px;
}
.lb-menu-btn .lb-footer-content {
    width: 22px;
}
.lb-menu-btn .lb-footer-content i {
    font-size: 12px;
}

/* 백드롭 — 우측 끝부터 왼쪽으로 검게 페이드, 메뉴 영역 정도만 어둡게 */
.lb-menu-backdrop {
    position: fixed;
    inset: 0;
    background: linear-gradient(to left,
                rgba(0,0,0,0.7) 0%,
                rgba(0,0,0,0.55) 80px,
                rgba(0,0,0,0.0) 200px,
                rgba(0,0,0,0.0) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 150;
    transition: opacity var(--transition-fast, 0.2s);
}
.lb-menu-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* 사이드바 — 투명, 박스 없음, 화면 우측 공간만 확보 */
.lb-menu-sidebar {
    position: fixed;
    top: 70px; right: 0; bottom: 70px;
    width: 160px;
    max-width: 50vw;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: translateX(110%);
    transition: transform 0.25s ease, opacity 0.2s ease;
    opacity: 0;
    z-index: 200;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    padding: 20px 30px;
    overflow: visible;
}
.lb-menu-sidebar.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* 세로 지그재그 컨테이너 — overflow 미설정 (자르지 않음) */
.lb-menu-sidebar .lb-menu-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-end;
    padding: 4px 0;
    overflow: visible;
}

/* 아이템 — 푸터 .lb-footer-item 스타일 상속 */
.lb-menu-sidebar .lb-menu-item-wrap { position: relative; }
.lb-menu-sidebar .lb-menu-item {
    margin-top: 0;
    text-decoration: none;
}
/* 세로 지그재그 — 짝수 래퍼 우측에서 더 들여쓰기 */
.lb-menu-sidebar .lb-menu-item-wrap:nth-child(even) {
    margin-right: 22px;
}
.lb-menu-sidebar .lb-menu-item-wrap:nth-child(even) > .lb-menu-item {
    margin-top: 0;
}

/* 하위 메뉴 있는 아이템의 caret (좌측) — 탭 가능, 서브메뉴 토글 */
.lb-menu-sub-caret {
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 24px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 10px;
    color: var(--accent-color, var(--primary-color));
    opacity: 0.75;
    filter: drop-shadow(0 0 3px rgb(from var(--accent-color) r g b / 0.6));
    cursor: pointer;
    z-index: 3;
}
.lb-menu-sub-caret:hover { opacity: 1; }

/* 플라이아웃 서브메뉴 — 메인 아이템 왼쪽에서 나옴. 우측 검정 → 좌측 투명 그라데이션. */
.lb-menu-sub {
    position: absolute;
    right: 100%;                       /* gap 없애고 메인 아이템에 바로 붙임 */
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    min-width: 150px;
    max-width: 200px;
    padding: 12px 16px 12px 20px;
    margin-right: -10px;               /* 메인 아이템 위로 약간 겹쳐 hover 이동 끊김 방지 */
    background: linear-gradient(to left,
                rgba(0,0,0,0.0) 3%,     /* 우측 끝 살짝 투명 */
                rgba(0,0,0,0.6) 20%,
                rgba(0,0,0,0.92) 75%,
                rgba(0,0,0,0.6) 88%,
                rgba(0,0,0,0.0)  100%);  /* 좌측으로 완전 페이드 */
    border: none;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 210;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 메인 아이템 → 서브메뉴 이동 브릿지 (링크 영역은 건드리지 않음, 좌측 공간만 채움) */
.lb-menu-item-wrap.has-sub::after {
    content: '';
    position: absolute;
    top: -8px; bottom: -8px;
    right: 100%;                       /* 아이템 좌측에 위치 (링크 위 겹치지 않음) */
    width: 30px;
    pointer-events: none;
}
.lb-menu-item-wrap.has-sub:hover::after,
.lb-menu-item-wrap.has-sub.active::after {
    pointer-events: auto;              /* hover 시 브릿지 활성 → 마우스 이동 끊김 방지 */
}
.lb-menu-item-wrap.has-sub:hover .lb-menu-sub,
.lb-menu-item-wrap.has-sub.active .lb-menu-sub,
.lb-menu-sub:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
.lb-menu-sub-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--header-font-color, var(--text-primary));
    text-decoration: none;
    border-radius: 5px;
    transition: color var(--transition-fast, 0.15s), text-shadow var(--transition-fast, 0.15s);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.lb-menu-sub-item i { display: none; }
.lb-menu-sub-item:hover {
    color: var(--accent-color);
    text-shadow: 0 0 6px rgb(from var(--accent-color) r g b / 0.55);
}
.lb-menu-sub-item:hover i {
    filter: drop-shadow(0 0 4px rgb(from var(--accent-color) r g b / 0.7));
}

/* 사이드바 내부 마름모 — 내용 잘리지 않도록 overflow 해제, 폰트 키움 */
.lb-menu-sidebar .lb-footer-diamond {
    overflow: visible;
}
.lb-menu-sidebar .lb-footer-content {
    width: 52px;               /* 라벨 여유 있게 */
}
.lb-menu-sidebar .lb-footer-content i {
    font-size: 14px;
}
.lb-menu-sidebar .lb-footer-label {
    font-size: 9px;
}

@media (max-width: 768px) {
    .lb-menu-sidebar { width: 110px; top: 60px; bottom: 60px; padding-right: 14px; }
    .lb-menu-btn { width: 30px; height: 30px; }
    .lb-menu-btn .lb-footer-diamond { width: 30px; height: 30px; }
    .lb-menu-btn .lb-footer-content { width: 24px; }
    .lb-menu-btn .lb-footer-content i { font-size: 11px; }
    .lb-menu-sidebar .lb-menu-item-wrap:nth-child(even) { margin-right: 18px; }
    /* 모바일에선 플라이아웃 대신 탭으로 토글 — 클릭 열림 */
    .lb-menu-sub { right: auto; left: auto; transform: translateY(8px); top: 100%; }
    .lb-menu-item-wrap.has-sub.active .lb-menu-sub { transform: translateY(0); }
    .lb-menu-item-wrap.has-sub:hover .lb-menu-sub { transform: translateY(8px); opacity: 0; pointer-events: none; } /* 모바일에선 hover 무효 */
    .lb-menu-item-wrap.has-sub.active .lb-menu-sub { opacity: 1; pointer-events: auto; }
}

/* ================================================================
   슬롯 타이포그래피 스타일 — 브래킷 코너 + 오버플로 허용 + 각진 느낌
   (판타지 톤: accent-color 웜톤 + 브래킷만 강조, 네온 아님)
   ================================================================ */
.lb-slot.lb-slot-style-typography {
    overflow: visible;
    border-radius: 4px;
    border: none;
    /* background-color: color-mix(in srgb, var(--card-bg-color) 70%, #000);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 25%, transparent),
        0 2px 10px rgba(0, 0, 0, 0.35); */
}

/* 상단-좌 / 하단-우 브래킷 코너 */
.lb-slot.lb-slot-style-typography::before,
.lb-slot.lb-slot-style-typography::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 1.5px solid var(--accent-color);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity var(--transition-fast, 0.2s), width var(--transition-fast, 0.2s), height var(--transition-fast, 0.2s);
}
.lb-slot.lb-slot-style-typography::before {
    top: -3px; left: -3px;
    border-right: none; border-bottom: none;
}
.lb-slot.lb-slot-style-typography::after {
    bottom: -3px; right: -3px;
    border-left: none; border-top: none;
}
.lb-slot.lb-slot-style-typography:hover::before,
.lb-slot.lb-slot-style-typography:hover::after {
    opacity: 1;
    width: 22px; height: 22px;
    filter: drop-shadow(0 0 4px rgb(from var(--accent-color) r g b / 0.55));
}

/* 내부 콘텐츠 — 기본 중앙 정렬 해제, 오버플로 자유, 라벨이 버튼 밖으로 삐져나가도 OK */
.lb-slot.lb-slot-style-typography .lb-slot-inner {
    position: relative;
    display: block;         /* flex 해제 — label_pos 로 위치 결정 */
    overflow: visible;
    padding: 10px 14px;
    line-height: 1;
}

/* 아이콘: 작고 연하게 포인트로, 좌상단 기본 */
.lb-slot.lb-slot-style-typography .lb-slot-icon {
    font-size: 14px;
    margin: 0;
    display: inline-block;
}

/* 라벨: 크게 — typography 의 주인공. 오버플로 허용, 줄간격 0.85 */
.lb-slot.lb-slot-style-typography .lb-slot-label {
    display: block;
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.85;
    color: color-mix(in srgb, var(--accent-color) 85%, var(--title-font-color, #e8ddc4));
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* label_pos 재정의 — typography 전용 (절대 배치로 귀퉁이/중앙 배치) */
.lb-slot.lb-slot-style-typography .lb-slot-label { position: absolute; }
.lb-slot.lb-slot-style-typography.lb-slot-pos-tl .lb-slot-label { top: 6px;    left: 10px; }
.lb-slot.lb-slot-style-typography.lb-slot-pos-tc .lb-slot-label { top: 6px;    left: 50%; transform: translateX(-50%); }
.lb-slot.lb-slot-style-typography.lb-slot-pos-tr .lb-slot-label { top: 6px;    right: 10px; }
.lb-slot.lb-slot-style-typography.lb-slot-pos-cl .lb-slot-label { top: 50%;   left: 10px;  transform: translateY(-50%); }
.lb-slot.lb-slot-style-typography.lb-slot-pos-cc .lb-slot-label { top: 50%;   left: 50%;   transform: translate(-50%, -50%); }
.lb-slot.lb-slot-style-typography.lb-slot-pos-cr .lb-slot-label { top: 50%;   right: 10px; transform: translateY(-50%); }
.lb-slot.lb-slot-style-typography.lb-slot-pos-bl .lb-slot-label { bottom: 6px; left: 10px; }
.lb-slot.lb-slot-style-typography.lb-slot-pos-bc .lb-slot-label { bottom: 6px; left: 50%; transform: translateX(-50%); }
.lb-slot.lb-slot-style-typography.lb-slot-pos-br .lb-slot-label { bottom: 6px; right: 10px; }

/* 아이콘은 좌상단 고정 (라벨이 어디 있든) */
.lb-slot.lb-slot-style-typography .lb-slot-icon {
    position: absolute;
    top: 8px;
    left: 10px;
}
/* 라벨이 좌상단(tl) 이면 아이콘은 우상단으로 — 겹침 회피 */
.lb-slot.lb-slot-style-typography.lb-slot-pos-tl .lb-slot-icon {
    left: auto;
    right: 10px;
}

/* 타이포 슬롯 hover — 라벨이 살짝 이동 */
.lb-slot.lb-slot-style-typography:hover .lb-slot-label {
    filter: drop-shadow(0 0 6px rgb(from var(--accent-color) r g b / 0.5));
}

/* 비회원 fallback */
.lb-login-required {
    padding: 14px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
}