:root { 
    --bg-cream: #ffdddd; 
    --text-dark: #3E2723; 
    --border-color: #5D4037; 
    --white-border: #FFFFFF; 
    --theme-color: #FF5252; 
    --card-bg-white: #ffffff;
    --card-bg-cream: #FFFDF5;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

#pageLoadingImg.pop-in {
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'OmuDaye';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafeTwist';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimKkwabaegiR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face { font-family: 'DnfBitbeatV2'; src: url('//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PyeongchangPeace'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Sweet'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

.font-paperozi { font-family: 'Paperozi', sans-serif !important; }
.font-kkukkkuk { font-family: 'OmuDaye', sans-serif !important; }
.font-schoolsafe { font-family: 'SchoolSafeTwist', sans-serif !important; }

#pwInput { font-family: monospace !important; -webkit-text-security: disc; text-security: disc; }
.modal-content, #passwordModal, #logoutModal { font-family: 'Sweet', sans-serif !important; }

body { font-family: 'Paperozi', sans-serif; background-color: var(--bg-cream); transition: background-color 0.3s ease; color: var(--text-dark); padding: 44px 0; overflow-x: auto; }
.pretendard { font-family: 'Pretendard', sans-serif; }

.planner-container { display: flex; align-items: flex-start; justify-content: center; }

/* 수정 후 */
.home-white-box, .big-white-box { 
    background: var(--card-bg-white); 
    padding: 55px; 
    border-radius: 26px; 
    box-shadow: 0px 0px 0px 3px #5D4037; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
    z-index: 10; 
}

/* 2. 홈 탭 컨테이너: 기존 가로폭과 줌 비율 유지 */
.home-white-box { 
    width: 2348px; 
    zoom: 0.83; 
    background: #FFFFFF;
    border: 1px solid #ECEDFA;
    box-shadow: 0 26px 60px -24px rgba(90,80,190,0.20), 0 2px 10px rgba(90,80,190,0.05);
    border-radius: 34px;
}

/* 3. 개인일정 컨테이너: 가로폭을 줄이고 줌 비율 1 적용 (홈탭과 동일한 톤: 연한 보더 + 은은한 그림자) */
.big-white-box { 
    width: 1850px; /* 내부 콘텐츠 크기에 딱 맞게 자동 조절. (또는 width: 1500px; 로 고정하셔도 됩니다.) */
    min-width: 1500px;  /* 너무 줄어들지 않도록 최소 너비 방어선 설정 (PC 전용, 모바일에서는 아래 미디어쿼리로 해제됨) */
    zoom: 1; 
    background: #FFFFFF;
    border: 1px solid #ECEDFA;
    box-shadow: 0 26px 60px -24px rgba(90,80,190,0.20), 0 2px 10px rgba(90,80,190,0.05);
    border-radius: 34px;
}

/* 모바일에서는 .big-white-box의 PC용 최소 너비(1500px)를 강제로 해제.
   이 값이 남아있으면 클립모아보기/롤링페이퍼/노래책/시그널 등 모바일 페이지들이
   화면보다 훨씬 넓게 그려져 body의 overflow-x-hidden 때문에 오른쪽이 잘려 보이게 됨. */
@media screen and (max-width: 1050px) {
    .big-white-box {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* 업보관리: 모바일에서도 PC 카드형 구성을 유지하되 화면 폭에 맞게 압축 */
@media screen and (max-width: 1050px) {
    .upbo-box {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        margin: 0 12px !important;
        padding: 20px !important;
        border-radius: 26px !important;
    }

    .upbo-member-tabs {
        scrollbar-width: none;
    }

    .upbo-member-tabs::-webkit-scrollbar {
        display: none;
    }

    .upbo-admin-toolbar > button,
    .upbo-admin-toolbar > #upboFileMenuWrapper {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    .upbo-admin-toolbar #upboFileMenuWrapper > button {
        width: 100%;
    }
}
.weekly-grid { display: flex; flex-direction: column; gap: 31px; width: 2238px; align-items: center; }

/* 홈탭: 멤버별 카드 그리드 (주간표 대체) - 가로로 긴 카드가 4줄로 나열됨 */
.home-member-grid {
    width: 2238px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}
.home-member-card {
    background: var(--card-bg-white);
    border: 1.5px solid #ECEDFA;
    border-radius: 28px;
    box-shadow: 0 10px 28px -16px rgba(70,60,160,0.18);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.home-member-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -16px rgba(70,60,160,0.26);
    border-color: color-mix(in srgb, var(--member-accent, #8B85E8) 35%, #ECEDFA);
}

/* 홈탭 프로필 사진 프레임: 은은한 멤버 컬러 링 */
.home-profile-frame {
    border: 1.5px solid #ECEDFA;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--member-accent, #8B85E8) 12%, transparent);
}

/* 홈탭 이번 주 요일 카드 */
.home-week-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid #ECEDF5;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.home-week-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(70,60,160,0.28); }
.home-week-card.is-today {
    border: 2px solid var(--member-accent, #8B85E8);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--member-accent, #8B85E8) 55%, transparent);
}
.home-today-pill {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 3px 8px -2px rgba(0,0,0,0.35);
    z-index: 10;
    font-family: 'Paperozi', sans-serif;
}

/* 홈탭 멤버 카드: 노래책/SOOP/유튜브 등 앱 아이콘 느낌의 바로가기 버튼 */
.app-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid #ECEDFA;
    box-shadow: 0 6px 14px -8px rgba(70,60,160,0.22);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.app-icon-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(70,60,160,0.3); border-color: currentColor; }
.app-icon-btn i { font-size: 19px; }
.app-icon-btn span { font-size: 10.5px; font-weight: 700; font-family: 'Paperozi', sans-serif; }

/* 홈탭 멤버 카드 오른쪽에 세로로 배치되는 아이콘 버튼(아이콘만) */
.app-icon-btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    border: 1.5px solid #ECEDFA;
    box-shadow: 0 4px 10px -6px rgba(70,60,160,0.22);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.app-icon-btn-sm:hover { transform: translateY(-2px); box-shadow: 0 8px 14px -6px rgba(70,60,160,0.3); border-color: currentColor; }
.app-icon-btn-sm i { font-size: 18px; }

/* 홈탭: UP 해줘! 패널 - 홈탭의 다른 카드들(home-member-card 등)과 동일한 톤으로 통일 */
.home-up-panel {
    background: var(--card-bg-white);
    border: 1.5px solid #ECEDFA;
    border-radius: 26px;
    box-shadow: 0 10px 28px -16px rgba(70,60,160,0.18);
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.home-up-panel:hover {
    box-shadow: 0 18px 38px -16px rgba(70,60,160,0.24);
}
.home-up-panel-header {
    border-bottom: 1.5px solid #ECEDFA;
}

/* 홈탭 디데이 카드: 관리자가 배경 이미지를 등록하면 카드 전체에 사진 배경을 채워 보여준다 */
.home-dday-box-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: transparent;
}

/* 홈탭 디데이 히어로 카드 - 라이트모드에서는 밝은 카드, 다크모드에서는 어두운 그라디언트 카드로 전환 (외곽선 없음, 등록 시 선택한 색상 테마 적용) */
.dday-hero-card {
    --dday-c1: 236,72,153;
    --dday-c2: 99,102,241;
    --dday-badge-bg: rgba(244,114,182,0.12);
    --dday-badge-border: rgba(244,114,182,0.45);
    --dday-badge-text: #f9a8d4;
    --dday-stat-g1: 244,63,94;
    --dday-stat-g2: 219,39,119;
    --dday-stat-border: rgba(244,63,94,0.55);
    --dday-stat-shadow: rgba(244,63,94,0.6);
    --dday-stat-label: #fecdd3;
    position: relative;
    width: 100%;
    padding: 22px 24px;
    border-radius: 24px;
    /* 라이트모드 기본 배경: 밝은 톤의 그라디언트 */
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--dday-c1),0.16), transparent 55%),
        radial-gradient(120% 160% at 100% 100%, rgba(var(--dday-c2),0.14), transparent 55%),
        linear-gradient(135deg, #fff6fa 0%, #fdf2f8 55%, #f5f3ff 100%);
    box-shadow: 0 18px 36px -24px rgba(90,60,130,0.28);
    overflow: hidden;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 다크모드에서는 기존의 어두운 그라디언트 카드로 전환 */
html.dark-mode .dday-hero-card {
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--dday-c1),0.18), transparent 55%),
        radial-gradient(120% 160% at 100% 100%, rgba(var(--dday-c2),0.20), transparent 55%),
        linear-gradient(135deg, #150b23 0%, #0a0b16 55%, #170c22 100%);
    box-shadow: 0 18px 40px -20px rgba(0,0,0,0.5);
}
/* 배경 사진이 등록된 카드: 라이트 모드에서는 밝은 오버레이, 다크 모드에서는 어두운 오버레이 */
.dday-hero-card-img {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.65)), var(--dday-img) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.dark-mode .dday-hero-card-img {
    background-image: linear-gradient(135deg, rgba(10,8,20,0.85), rgba(10,8,20,0.72)), var(--dday-img) !important;
}

/* COUNTDOWN 뱃지 글씨색 변경 */
.dday-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--dday-badge-bg);
    border: 1px solid var(--dday-badge-border);
    color: rgb(var(--dday-c1)); /* 👈 이 부분을 테마 색상 변수로 변경 */
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
html.dark-mode .dday-hero-badge { color: var(--dday-badge-text) !important; }


/* (중간 클래스들은 그대로 유지) */
.dday-hero-title {
    margin-top: 14px;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.4;
    color: var(--text-dark);
}
html.dark-mode .dday-hero-title { color: #ffffff; }

.dday-hero-emoji { font-size: 17px; }

.dday-hero-sub {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(62,39,35,0.55);
}
html.dark-mode .dday-hero-sub { color: #9ca3af; }

.dday-hero-stat-row {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.dday-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(var(--dday-stat-g1),0.35), rgba(var(--dday-stat-g2),0.22));
    border: 1px solid var(--dday-stat-border);
    box-shadow: 0 0 24px -6px var(--dday-stat-shadow);
}


/* D-DAY (또는 남은 숫자) 글씨색 변경 */
.dday-hero-stat-num {
    font-size: 26px;
    font-weight: 900;
    color: #000000; /* 확실한 검정색으로 고정 */
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
html.dark-mode .dday-hero-stat-num { color: #ffffff; }

/* 하단 DAYS 라벨 글씨색 변경 */
.dday-hero-stat-label {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #000000; /* 기존 분홍색(#9d174d)에서 검정색으로 변경 */
}
html.dark-mode .dday-hero-stat-label { color: var(--dday-stat-label) !important; }

.dday-hero-card-img .dday-hero-stat-label { color: #fecdd3 !important; }

/* 디데이 등록 폼: 카드 색상 선택 스와치 */
.dday-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dday-color-swatch:hover { transform: scale(1.08); }
.dday-color-swatch-selected {
    border-color: #5D4037;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5D4037;
}

/* 홈탭 멤버 카드 맨 오른쪽: 각 멤버의 SOOP 공지(최신글) 여러 건을 카카오톡 채팅 느낌으로 표시 */
.home-member-notice {
    width: 300px;
    max-height: 340px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    border-radius: 22px;
}
.home-member-notice.kakao-chat-bg {
    background: color-mix(in srgb, var(--member-accent, #8B85E8) 18%, #FFFFFF);
}
.home-member-notice .kakao-bubble { box-shadow: 0 3px 10px -4px rgba(70,60,160,0.18); }
.home-member-notice.kakao-chat-bg:empty { display: none; }
.week-row { 
    display: flex; 
    width: 2238px; 
    height: 277px; 
    align-items: center; 
    justify-content: center; 
    border-radius: 15px; /* 행 전체를 둥글게 절단 */
    overflow: hidden; /* 내부 요소가 곡선을 벗어나지 않게 설정 */
    transition: all 0.2s ease;
    border: 1px solid #d3d3d3;
}

/* 1. 공통 스타일 (크기, 모양, 애니메이션 등 기본 뼈대만 남깁니다) */
.profile-cell { 
    width: 277px; 
    height: 100%; /* 부모 행 높이에 꽉 차게 설정 */
    background: var(--card-bg-white); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    overflow: hidden; 
    border-right: 1px solid #d3d3d3; /* 우측에만 구분 점선 추가 */
    cursor: pointer; 
    position: relative;
}

/* 홈탭 프로필 사진: 셀 높이에 맞춰 1:1(정사각) 비율로 표시 */
.profile-cell .profile-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* 홈탭 프로필 사진 좌상단 라이브 표시 배지 (항상 노출 - 방송 꺼져있으면 회색, 켜져있으면 빨간색) */
.live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 3px;
    background: #9E9E9E; /* 기본(오프라인) 상태: 회색 */
    color: #fff;
    font-family: 'Paperozi', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.3px;
    padding: 3px 7px 3px 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 4px rgba(0,0,0,0.35);
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease;
}
.live-badge.is-live {
    background: #FF3B30; /* 방송 중 상태: 빨간색 */
}
.live-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.7;
}
.live-badge.is-live .live-badge-dot {
    animation: liveBadgePulse 1.4s ease-in-out infinite;
}
@keyframes liveBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

/* 2. 호버 시 공통으로 위로 살짝 떠오르는 효과 */

/* =========================================
   3. 각 멤버별 '기본' 색상 (호버 전)
========================================= */
.week-row.row-1 { box-shadow: 0px 0px 0px 10px #FFF9C4, 0px 0px 0px 12px #3E2723; background-color: var(--card-bg-white); }
.week-row.row-2 { box-shadow: 0px 0px 0px 10px #BBDEFB, 0px 0px 0px 12px #3E2723; background-color: var(--card-bg-white); }
.week-row.row-3 { box-shadow: 0px 0px 0px 10px #F8BBD0, 0px 0px 0px 12px #3E2723; background-color: var(--card-bg-white); }
.week-row.row-4 { box-shadow: 0px 0px 0px 10px #FFE0B2, 0px 0px 0px 12px #3E2723; background-color: var(--card-bg-white); }

/* =========================================
   4. 각 멤버별 '호버(마우스 올렸을 때)' 효과
========================================= */

.days-container { width: 1939px; height: 277px; display: flex; border: 4px solid var(--white-border); border-radius: 9px; flex-shrink: 0; background: var(--card-bg-cream); box-sizing: border-box; }
.day-cell { flex: 1; height: auto; border-right: 2px solid rgba(0,0,0,0.05); position: relative; display: flex; flex-direction: column; padding: 6px 3px; overflow-y: auto; transition: background-color 0.2s; cursor: pointer; }
.day-cell:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.day-cell:last-child { border-right: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }


.header-days-container { 
    transform: translateY(-14px);    /* 요일 칸을 위로 살짝 올림 */
    width: 1386px; display: flex; background: var(--card-bg-cream); border: 1.5px solid #ECEDFA; border-radius: 25px; align-items:center;
    box-shadow: 0 10px 24px -16px rgba(70,60,160,0.15);
}
.header-days-container-week { width: 1939px; }
.header-days-cell { flex: 1; padding: 30px 0; font-family: 'Paperozi', sans-serif; font-size: 2.05rem; text-align: center; font-weight: normal; border-right: 1.5px solid #ECEDFA; letter-spacing: 1px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.header-days-cell:last-child { border-right: none; }

.nav-container { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 33px; }
.nav-btn { background: none; border: none; font-size: 3.3rem; color: #5D4037; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.nav-btn:hover { transform: scale(1.1); color: var(--theme-color); }
.hover-theme-text { transition: all 0.2s; transform: translateY(-12px); }
.hover-theme-text:hover { color: var(--theme-color); transform: translateY(-16px) scale(1.05); }

.big-box-container { 
    width: 1386px; 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: repeat(5, 198px); 
    background-color: var(--card-bg-white);
    border: 1.5px solid #ECEDFA; 
    border-radius: 26px; 
    /* 홈탭 프사처럼 테마색상이 은은하게 번지는 외곽 그림자 (--member-accent 미설정 시 투명이라 영향 없음) */
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--member-accent, transparent) 16%, transparent), 0 20px 45px -20px rgba(70,60,160,0.18);
    overflow: hidden;
    margin-top: 15px; /* 이 숫자를 늘리거나 줄여서 간격을 알맞게 조절하세요 */
}
.big-cell { height: 198px; border-right: 1px dashed; border-bottom: 1px dashed; padding: 6px 3px; font-weight: bold; font-size: 1.21rem; transition: background-color 0.2s; cursor: pointer; display: flex; flex-direction: column; }
.big-cell.empty-cell,
.big-cell.empty-cell:hover { border: none !important; background: transparent !important; box-shadow: none !important; transform: none !important; cursor: default; }
.big-cell:nth-child(7n) { border-right: none; }
.big-cell:nth-last-child(-n+7) { border-bottom: none; }


.schedule-list::-webkit-scrollbar { display: none; }
.schedule-list { -ms-overflow-style: none; scrollbar-width: none; display: flex; flex-direction: column; flex: 1; gap: 4px; overflow-y: auto !important; }

.schedule-card {
    border-radius: 15px !important; 
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; /* 애니메이션 효과 */
    cursor: pointer; 
    border: none !important;
    box-shadow: none !important; /* 그림자 삭제 */
    font-family: 'Paperozi', sans-serif; 
    font-weight: 600; 
    background-color: var(--sch-bg, var(--card-bg-white)) !important;
    color: var(--sch-text, var(--text-dark)) !important;
    position: relative;
}

.schedule-card:hover { 
    box-shadow: none !important; /* 호버 시에도 그림자 없음 */
    transform: scale(0.95) !important; /* 살짝 작아짐 */
    filter: brightness(0.97); /* 살짝 어두워지는 효과(유지) */
    z-index: 20; 
}

.schedule-card.bangon { color: var(--theme-color); }
.schedule-card.hubang { color: #6B7280; }

.weekly-grid .day-cell .schedule-list { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: visible !important; }
.weekly-grid .schedule-card { font-family: 'Paperozi', sans-serif; font-weight: 600; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.big-box-container .schedule-card { flex: 1 1 0%; min-height: 46px; display: flex; flex-direction: column; width: 100%; padding: 4px; }

.schedule-text { font-family: 'Paperozi', sans-serif !important; font-size: 15px; text-align: center; width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }

.theme-dalta .big-cell, .theme-dalta .big-cell:hover { border-right-color: #FBC02D !important; border-bottom-color: #FBC02D !important; }
.theme-darung .big-cell, .theme-darung .big-cell:hover { border-right-color: #1E88E5 !important; border-bottom-color: #1E88E5 !important; }
.theme-choitto .big-cell, .theme-choitto .big-cell:hover { border-right-color: #ff39c5 !important; border-bottom-color: #ff39c5 !important; }
.theme-kanasi .big-cell, .theme-kanasi .big-cell:hover { border-right-color: #F57C00 !important; border-bottom-color: #F57C00 !important; }
.big-cell:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: #FAFAFD !important; /* 마우스를 올렸다는 건 알 수 있게 아주 은은한 배경색만 줍니다 */
    border-right: 1px dashed !important;
    border-bottom: 1px dashed !important;

}

@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-content { 
    animation: fadeIn 0.15s ease-out forwards; 
    border: 1.5px solid #ECEDFA !important; 
    box-shadow: 0 26px 60px -24px rgba(90,80,190,0.20), 0 2px 10px rgba(90,80,190,0.05) !important; 
}

.modal-arrow-btn { transition: all 0.2s; }
.modal-arrow-btn:hover { color: var(--theme-color); transform: scale(1.1); }
.month-btn { border: 1.5px solid #ECEDFA; color: #5D4037; box-shadow: 0 6px 14px -8px rgba(70,60,160,0.18); background-color: var(--card-bg-white); transition: all 0.2s; }
.month-btn:hover { background-color: var(--theme-color); border-color: var(--theme-color); color: #FFF; box-shadow: 0 10px 20px -8px rgba(70,60,160,0.3); }
.month-btn.active { background-color: var(--theme-color); border-color: var(--theme-color); color: #FFF; box-shadow: 0 10px 20px -8px rgba(70,60,160,0.3); }

.type-radio { display: none; }
.type-label { display: block; padding: 8px 0; border: 1.5px solid #ECEDFA; border-radius: 14px; cursor: pointer; font-weight: bold; transition: all 0.2s; background: var(--card-bg-white); color: #5D4037; box-shadow: 0 6px 14px -8px rgba(70,60,160,0.15); text-align: center; }
.type-radio:checked + .type-label.bangon, .type-radio:checked + .type-label.hubang { background: var(--theme-color); color: white; border-color: var(--theme-color); box-shadow: inset 0px 2px 4px rgba(0,0,0,0.15); }
.ampm-btn { transition: background-color 0.2s; cursor: pointer; }
.ampm-btn:hover { background-color: #f3f4f6; }

.modal-scroll::-webkit-scrollbar { width: 8px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #5D4037; border-radius: 8px; border: 2px solid var(--card-bg-cream);}
.modal-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== 카카오톡 메신저 스타일 공지 카드 ===== */
.kakao-chat-bg {
    background-color: #B2C7DA;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15) 0, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0, transparent 45%);
    border-radius: 18px;
}
.kakao-msg-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; transition: transform 0.15s ease; }
.kakao-msg-row:hover { transform: translateY(-1px); }
.kakao-avatar {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    background-color: var(--card-bg-white);
}
/* ⭐ 신규: 프사 오른쪽 아래 라이브(SOOP)/카페 구분 뱃지 */
.notif-avatar-wrap { position: relative; flex-shrink: 0; }
.notif-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    color: #ffffff;
    border: 2px solid var(--card-bg-white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.notif-avatar-badge-live { background: linear-gradient(135deg, #FF6B4A, #FF3B30); }
.notif-avatar-badge-cafe { background: linear-gradient(135deg, #4FA6FF, #2979FF); }
html.dark-mode .notif-avatar-badge { border-color: var(--card-bg-white); }

/* ===== 알림 패널: 카톡 채팅말풍선 대신 플랫한 리스트형 알림 ===== */
.notif-list-bg { background: var(--card-bg-white); }

.notif-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    border-bottom: 1px solid #F0EEE7;
    transition: background 0.15s ease;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: #FAF8F2; }
html.dark-mode .notif-row { border-bottom-color: #2a2a2c; }
html.dark-mode .notif-row:hover { background: #202022; }

.notif-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    background-color: var(--card-bg-white);
}

.notif-col { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.notif-title-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.notif-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #3E2723;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.notif-time { font-size: 11px; font-weight: 500; color: #9c9490; }
html.dark-mode .notif-title { color: #f0ede8; }
html.dark-mode .notif-time { color: #9a9a9a; }
.kakao-msg-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kakao-nick { font-size: 12.5px; font-weight: 700; color: #000000; margin-bottom: 3px; }
.kakao-bubble-row { display: flex; align-items: flex-end; gap: 6px; }
.kakao-bubble {
    position: relative;
    background: var(--card-bg-white);
    border-radius: 4px 14px 14px 14px;
    padding: 9px 12px;
    max-width: 82%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.kakao-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 8px 10px 0;
    border-color: transparent var(--card-bg-white) transparent transparent;
}
.kakao-bubble-title { font-size: 13.5px; font-weight: 700; color: #3E2723; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.kakao-bubble-body { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #6B5D57; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kakao-time { font-size: 10.5px; color: #5D4037; opacity: 0.8; white-space: nowrap; margin-bottom: 2px; }
.kakao-msg-row:hover .kakao-bubble { box-shadow: 0 2px 5px rgba(0,0,0,0.25); }

.admin-button { position: fixed; bottom: 20px; right: 20px; z-index: 100; background: #5D4037; color: white; border: none; padding: 12px 16px; border-radius: 9999px; font-weight: 700; box-shadow: 0 10px 20px rgba(0,0,0,0.15); cursor: pointer; }
.admin-button:hover { transform: translateY(-1px); }

#passwordModal { display: none; z-index: 1000; }
#passwordModal.flex { display: flex; }
#pwInput { color: #000000 !important; }

#contextMenu { font-family: 'Paperozi', sans-serif; }
.context-menu-btn { width: 100%; text-align: left; padding: 12px 18px; font-size: 15px; font-weight: bold; transition: background 0.2s; cursor: pointer; }
.context-menu-btn:hover { background-color: #f3f4f6; }

@media screen and (max-width: 1920px) and (min-width: 1025px) {
    body {
        zoom: 0.75;
    }
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 롤링페이퍼 탭 배경 및 테마 박스설정 */
.theme-rolling {
    background-color: var(--card-bg-white) !important;
    border: none !important;
    border-radius: 26px !important;
}

/* 롤링페이퍼 전용 흰색 박스는 캘린더 여백과 통일감 있게 */
.theme-rolling.big-white-box {
    border-radius: 26px;
}

/* 시그널 탭 전용 흰색 박스 테마 */
.theme-signal {
    background-color: var(--card-bg-white) !important;
    border: 2px solid #5D4037 !important;
    border-radius: 26px !important;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* style.css 하단에 추가 */
#customMembersList {
    display: block !important;
    width: 100% !important;
}
#customMembersList > div {
    width: 100% !important;
}

/* style.css에 추가 */
.lunar-text {
    font-size: 10px;
    color: #9CA3AF; /* 회색조 */
    font-weight: normal;
    margin-left: 4px;
}

.today-highlight {
    color: #ffffff !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important; /* 외곽선 확실히 제거 */
}

/* 2. 멤버별 배경색과 그림자 적용 */
/* box-shadow는 반드시 '가로 세로 번짐 색상' 순으로 적어야 작동합니다! */
.theme-dalta .today-highlight { 
    background-color: #ffe298 !important; 
    box-shadow: 0px 0px 0px 2px #ffe298 !important; 
}
.theme-darung .today-highlight { 
    background-color: #BBDEFB !important; 
    box-shadow: 0px 0px 0px 2px #BBDEFB !important; 
}
.theme-choitto .today-highlight { 
    background-color: #F8BBD0 !important; 
    box-shadow: 0px 0px 0px 2px #F8BBD0 !important; 
}
.theme-kanasi .today-highlight { 
    background-color: #FFE0B2 !important; 
    box-shadow: 0px 0px 0px 2px #FFE0B2 !important; 
}
/* 공책 스타일 상세 내용 박스 */
.detail-notebook-box {
    background: var(--card-bg-white);
    border: 1.5px solid #e0d8d0; /* 노트 바깥쪽 테두리 */
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    padding: 10px 0; /* 상하 여백 추가해서 답답함 해소 */
}

.detail-notebook-line {
    font-family: 'OmuDaye', sans-serif;
    font-size: 18px;
    color: #3E2723;
    line-height: 1.4;
    
    /* 텍스트를 아랫선에 가깝게 배치 */
    display: flex;
    align-items: flex-end; 
    padding: 4px 10px 10px;
    
    /* 고동색 선과 좌우 여백 (노트 느낌) */
    margin: 0 16px; 
    border-bottom: 1.5px solid #5D4037; 
    
    min-height: 42px;
    height: auto;
    box-sizing: border-box;
    word-break: break-all;
}

/* (선택) 마지막 줄은 밑줄을 없애고 싶다면 아래 코드 유지, 끝까지 선을 긋고 싶다면 삭제하세요 */
.detail-notebook-line:last-child {
    border-bottom: none;
}
/* embed 모드: 스크롤 제거 */
/* embed 모드: 스크롤 제거 및 모바일 잘림 방지 */
body.embed-mode {
    overflow: hidden !important;
}

body.embed-mode .big-white-box {
    overflow-y: auto;
    overflow-x: hidden !important;
    max-height: 100vh;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important; /* 데스크탑 최소 너비(1500px) 방어선 무력화 */
    width: 100% !important;  /* 모바일 화면에 맞게 너비 100% 강제 */
}

body.embed-mode .upbo-content-wrap {
    min-width: 0 !important;
    width: 100% !important;
}

/* 노래책 카드 그리드 */
.song-card .song-art { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.song-card:hover .song-art { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); border-color: var(--songbook-accent, #FBC02D); }

/* 노래 추가 팝업 - 커스텀 장르 드롭다운 */
.song-genre-dropdown {
    animation: fadeIn 0.12s ease-out forwards;
    padding: 6px;
}
.song-genre-option { border-radius: 8px; }
.song-genre-option + .song-genre-option { margin-top: 2px; }
.song-genre-option:hover,
.song-genre-option:focus {
    background: var(--song-modal-soft, #FFF9C4);
    color: var(--song-modal-accent, #5D4037);
}

/* 노래책 좋아요 버튼 */
@keyframes likePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.fi-sr-heart { animation: likePop 0.25s ease; display: inline-block; }

/* =========================================
   스크롤바 투명 처리 (전체 요소 공통 적용)
   ========================================= */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
}
*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent; /* Chrome, Safari, Edge(Chromium) */
}
/* =========================================
   일정 순서 변경 - 드래그 핸들
   ========================================= */
.schedule-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 18px;
    line-height: 1;
    color: #c9beb8;
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.schedule-drag-handle:hover {
    color: #5D4037;
    background-color: #f5f1ee;
}
.schedule-drag-handle:active {
    cursor: grabbing;
}

.schedule-accordion-wrapper.schedule-dragging {
    opacity: 0.97;
    border-color: #5D4037;
    cursor: grabbing;
}
.schedule-accordion-wrapper.schedule-dragging .schedule-drag-handle {
    cursor: grabbing;
    color: #5D4037;
}

/* =========================================
   캘린더 일정카드 직접 드래그앤드롭 (어드민)
   ========================================= */
.schedule-card.calendar-card-dragging {
    opacity: 0.95;
    outline: 2px dashed #5D4037;
    outline-offset: 2px;
}
.schedule-card.calendar-card-dragging:hover {
    transform: none !important;
}
/* =========================================
   다크 모드
   SOOP 다크모드 참고 - 뉴트럴 블랙/그레이 다크 테마
   ========================================= */
html.dark-mode {
    --bg-cream: #101012;      /* 아주 짙은 뉴트럴 블랙 배경 */
    --card-bg-white: #1b1b1e; /* 패널/카드 배경 (약간 더 밝은 톤) */
    --card-bg-cream: #17171a; /* 보조 배경 */
    --white-border: #2a2a2c;  /* 뉴트럴 다크 그레이 테두리 */
    --text-dark: #f1f1f1;     /* 깨끗한 흰색 텍스트 */
}

/* 페이지 배경 통일 */
html.dark-mode body {
    background-color: var(--bg-cream) !important;
}

/* 이미지/영상/아이콘은 다크모드에서도 원본 색상을 그대로 유지 */
html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe {
    filter: none !important;
}

/* 일정카드: 다크모드에서 배경색과 제목 글자색을 서로 스왑 */
html.dark-mode .schedule-card {
    background-color: var(--sch-text, var(--card-bg-white)) !important;
    color: var(--sch-bg, #f1f1f1) !important;
}

/* 기존 고동색 텍스트를 깨끗한 흰색/밝은 회색으로 전환 */
html.dark-mode .dm-text-brown,
html.dark-mode .nav-btn,
html.dark-mode .month-btn,
html.dark-mode .type-label,
html.dark-mode .kakao-nick,
html.dark-mode .kakao-time,
html.dark-mode .detail-notebook-line,
html.dark-mode .schedule-drag-handle:hover,
html.dark-mode .schedule-accordion-wrapper.schedule-dragging .schedule-drag-handle,
html.dark-mode .text-\[\#5D4037\],
html.dark-mode .hover\:text-\[\#5D4037\]:hover,
html.dark-mode .text-\[\#000\],
html.dark-mode .text-black,
html.dark-mode .text-gray-900 {
    color: #f1f1f1 !important;
}

/* 팝업(모달) 안의 텍스트는 별도 색상 클래스가 없으면 기본적으로 흰색을 따르도록 함 */
html.dark-mode .modal-content {
    color: #f1f1f1;
}

/* 외곽선/보더 및 배경색을 뉴트럴 블랙 톤에 맞게 보정 */
html.dark-mode .home-white-box {
    background-color: var(--card-bg-white) !important;
    box-shadow: 0px 0px 0px 3px var(--white-border) !important;
}
html.dark-mode .big-white-box {
    background-color: var(--card-bg-white) !important;
    border-color: var(--white-border) !important;
    box-shadow: 0 26px 60px -24px rgba(0,0,0,0.8), 0 2px 10px rgba(0,0,0,0.5) !important;
}
html.dark-mode .header-days-container,
html.dark-mode .modal-content,
html.dark-mode .type-label,
html.dark-mode .theme-rolling,
html.dark-mode .theme-signal,
html.dark-mode .home-member-card,
html.dark-mode .home-up-panel,
html.dark-mode .home-up-panel-header,
html.dark-mode .big-box-container {
    border-color: var(--white-border) !important;
}
html.dark-mode .month-btn {
    border-color: var(--white-border) !important;
    box-shadow: 2px 2px 0px 0px var(--white-border) !important;
}
html.dark-mode .detail-notebook-line {
    border-bottom-color: var(--white-border) !important;
}
html.dark-mode .schedule-accordion-wrapper.schedule-dragging {
    border-color: var(--white-border) !important;
}
html.dark-mode .schedule-card.calendar-card-dragging {
    outline-color: var(--white-border) !important;
}
html.dark-mode .border-\[\#5D4037\],
html.dark-mode .hover\:border-\[\#5D4037\]:hover,
html.dark-mode .focus\:border-\[\#5D4037\]:focus {
    border-color: var(--white-border) !important;
}

/* 홈 화면 주간 캘린더 색상 유지하되 보더만 다크하게 */
html.dark-mode .week-row.row-1 { box-shadow: 0px 0px 0px 10px #FBC02D, 0px 0px 0px 12px var(--white-border) !important; }
html.dark-mode .week-row.row-2 { box-shadow: 0px 0px 0px 10px #4FC3F7, 0px 0px 0px 12px var(--white-border) !important; }
html.dark-mode .week-row.row-3 { box-shadow: 0px 0px 0px 10px #F48FB1, 0px 0px 0px 12px var(--white-border) !important; }
html.dark-mode .week-row.row-4 { box-shadow: 0px 0px 0px 10px #FFA726, 0px 0px 0px 12px var(--white-border) !important; }
html.dark-mode .big-box-container { background-color: var(--card-bg-white) !important; box-shadow: 0 20px 45px -20px rgba(0,0,0,0.55) !important; }

/* 흰 배경 유틸리티 클래스 강제 전환 */
html.dark-mode .bg-white {
    background-color: var(--card-bg-white) !important;
}
html.dark-mode .bg-\[\#FFFDF5\] {
    background-color: var(--card-bg-cream) !important;
}
html.dark-mode .bg-\[\#FFFDF5\]\/90 {
    background-color: rgba(23, 23, 26, 0.9) !important;
}
html.dark-mode .bg-\[\#f3f4f6\] {
    background-color: #202022 !important;
}
html.dark-mode .modal-content {
    background-color: var(--card-bg-cream) !important;
}

/* 상단바 반투명 블러 유리 효과 - 딥 네이비 톤에 맞게 */
html.dark-mode .bg-white\/15 {
    background-color: rgba(27, 27, 30, 0.5) !important;
}

/* 회색 보더/텍스트 뉴트럴 톤으로 보정 */
html.dark-mode .border-gray-200 { border-color: #2a2a2c !important; }
html.dark-mode .border-gray-300 { border-color: #333335 !important; }
html.dark-mode .bg-gray-200 { background-color: #2a2a2c !important; }
html.dark-mode .bg-gray-50 { background-color: #202022 !important; }
html.dark-mode .text-gray-400 { color: #9a9a9a !important; }
html.dark-mode .text-gray-500 { color: #a8a8a8 !important; }
html.dark-mode .text-gray-600 { color: #bcbcbc !important; }
html.dark-mode .text-gray-700 { color: #d0d0d0 !important; }
html.dark-mode .text-gray-800 { color: #e8e8e8 !important; }
html.dark-mode .hover\:bg-gray-50:hover { background-color: #232325 !important; }
html.dark-mode .hover\:bg-gray-300:hover { background-color: #3a3a3c !important; }
html.dark-mode #contextMenu .context-menu-btn:hover { background-color: #2a2a2c !important; }

/* 스크롤바 */
html.dark-mode .modal-scroll::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-color: var(--card-bg-cream);
}

/* 다크 모드 토글 버튼 - SOOP 톤 앤 매너 적용 */
html.dark-mode .dark-mode-toggle-btn {
    background: var(--card-bg-white);
    border-color: var(--white-border);
    color: #d4d4d4;
}
html.dark-mode .dark-mode-toggle-btn:hover { background: #232325; }

html.dark-mode .dark-mode-toggle-btn-mobile {
    background: var(--card-bg-white);
    border-color: var(--white-border);
    color: #d4d4d4;
}

/* 다크모드 공지 말풍선: 차가운 어두운 톤 */
html.dark-mode .kakao-bubble {
    background-color: #2a2a2c !important;
}
html.dark-mode .kakao-bubble::before {
    border-color: transparent #2a2a2c transparent transparent !important;
}
html.dark-mode .kakao-bubble-title {
    color: #f1f1f1 !important;
}
html.dark-mode .kakao-bubble-body {
    color: #a8a8a8 !important;
}

/* =========================================
   다크 모드 토글 버튼 아이콘 전환 규칙 복구
   ========================================= */
/* 활성화된 아이콘 정중앙 강제 정렬 */
.dark-mode-toggle-btn i,
.dark-mode-toggle-btn-mobile i {
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 라이트 모드 (기본): 해 아이콘 표시, 달 아이콘 숨김 */
.dark-mode-toggle-btn .fi-sun,
.dark-mode-toggle-btn-mobile .fi-sun { 
    display: flex !important; 
}
.dark-mode-toggle-btn .fi-moon,
.dark-mode-toggle-btn-mobile .fi-moon { 
    display: none !important; 
}

/* 다크 모드: 해 아이콘 숨김, 달 아이콘 표시 */
html.dark-mode .dark-mode-toggle-btn .fi-sun,
html.dark-mode .dark-mode-toggle-btn-mobile .fi-sun { 
    display: none !important; 
}
html.dark-mode .dark-mode-toggle-btn .fi-moon,
html.dark-mode .dark-mode-toggle-btn-mobile .fi-moon { 
    display: flex !important; 
}

.dark-mode-toggle-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid #e5e7eb !important;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 18px;
    color: #5D4037;
    flex-shrink: 0;
}
.dark-mode-toggle-btn:hover { background: #f9fafb; }

/* 모바일 버튼 기본(라이트) 스타일 */
.dark-mode-toggle-btn-mobile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #5D4037;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

/* 다크 모드일 때 외곽선 및 배경색 (SOOP 톤) 보정 */
html.dark-mode .dark-mode-toggle-btn,
html.dark-mode .dark-mode-toggle-btn-mobile {
    background: var(--card-bg-white) !important;
    border-color: var(--white-border) !important;
    color: #d4d4d4 !important;
}
html.dark-mode .dark-mode-toggle-btn:hover { 
    background: #232325 !important; 
}

/* ===== 알림벨 버튼 ===== */
.notif-bell-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid #e5e7eb !important;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 18px;
    color: #5D4037;
    flex-shrink: 0;
}
.notif-bell-btn:hover { background: #f9fafb; }

.notif-bell-btn-mobile {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #5D4037;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.notif-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #FF5252;
    box-shadow: 0 0 0 2px #fff;
}

.notif-bell-btn.has-new i,
.notif-bell-btn-mobile.has-new i { animation: notifBellRing 1.6s ease-in-out infinite; }
@keyframes notifBellRing {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-14deg); }
    20% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(8deg); }
    50% { transform: rotate(0deg); }
}

html.dark-mode .notif-bell-btn,
html.dark-mode .notif-bell-btn-mobile {
    background: var(--card-bg-white) !important;
    border-color: var(--white-border) !important;
    color: #d4d4d4 !important;
}
html.dark-mode .notif-bell-btn:hover { background: #232325 !important; }
html.dark-mode .notif-bell-badge { box-shadow: 0 0 0 2px var(--card-bg-white); }

/* 알림 패널 내부 빈 상태 문구 */
.notif-empty {
    text-align: center;
    color: #5D4037;
    opacity: 0.6;
    font-weight: 700;
    font-size: 13px;
    padding: 40px 0;
}
html.dark-mode .notif-empty { color: #e8e8e8; }

/* ===== 알림 패널: 전체/SOOP/카페 탭 ===== */
.notif-tab {
    position: relative;
    padding: 9px 2px;
    font-size: 13.5px;
    font-weight: 700;
    color: #9c9490;
    cursor: pointer;
    transition: color 0.15s ease;
}
.notif-tab:hover { color: #5D4037; }
.notif-tab.active { color: #5D4037; }
.notif-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: #5D4037;
}
html.dark-mode .notif-tab { color: #9a9a9a; }
html.dark-mode .notif-tab:hover { color: #e8e8e8; }
html.dark-mode .notif-tab.active { color: #e8e8e8; }
html.dark-mode .notif-tab.active::after { background: #d4d4d4; }

/* ===== 알림 패널: 시간순/읽지않은순 정렬 필터 ===== */
.notif-sort-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: #9c9490;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.notif-sort-btn:hover { background: #F3F1EA; color: #5D4037; }
html.dark-mode .notif-sort-btn { color: #9a9a9a; }
html.dark-mode .notif-sort-btn:hover { background: #232325; color: #e8e8e8; }

/* ===== 알림 패널: "모두 읽음" / "전체 삭제" 바로가기 버튼 ===== */
.notif-action-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: #9c9490;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.notif-action-btn:hover { background: #F3F1EA; color: #5D4037; }
.notif-action-btn-danger { color: #FF5252; }
.notif-action-btn-danger:hover { background: #FFF0F0; color: #FF5252; }
html.dark-mode .notif-action-btn { color: #9a9a9a; }
html.dark-mode .notif-action-btn:hover { background: #232325; color: #e8e8e8; }
html.dark-mode .notif-action-btn-danger { color: #ff6b6b; }
html.dark-mode .notif-action-btn-danger:hover { background: #3a2020; color: #ff6b6b; }

/* ===== 알림 패널: 드롭다운 메뉴 공통(정렬 필터) ===== */
.notif-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 118px;
    background: #ffffff;
    border: 1px solid #ECEDFA;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 20;
    display: flex;
    flex-direction: column;
}
.notif-dropdown-menu.notif-dropdown-menu-right { left: auto; right: 0; }
.notif-dropdown-menu button {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: #5D4037;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.notif-dropdown-menu button:hover { background: #F3F1EA; }
.notif-dropdown-menu button.notif-dropdown-danger { color: #FF5252; }
.notif-dropdown-menu button.notif-dropdown-danger:hover { background: #FFF0F0; }

html.dark-mode .notif-dropdown-menu {
    background: var(--card-bg-white);
    border-color: var(--white-border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
html.dark-mode .notif-dropdown-menu button { color: #e8e8e8; }
html.dark-mode .notif-dropdown-menu button:hover { background: #232325; }
html.dark-mode .notif-dropdown-menu button.notif-dropdown-danger { color: #ff6b6b; }
html.dark-mode .notif-dropdown-menu button.notif-dropdown-danger:hover { background: #3a2020; }

/* 클립 모아보기 */
html.dark-mode .clip-card .clip-thumbnail {
    transition: filter 180ms ease;
}
html.dark-mode .clip-card.is-watched .clip-thumbnail {
    filter: brightness(0.4) saturate(0.8);
}

/* 클립 모아보기: 좌·우클릭으로 본 클립은 썸네일을 어둡게 표시 */
.clip-card .clip-thumbnail {
    transition: filter 180ms ease;
}
.clip-card.is-watched .clip-thumbnail {
    filter: brightness(0.5) saturate(0.7);
}

/* ===== 더보기 - 사다리타기 ===== */
.ladder-board {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    width: 100%; box-sizing: border-box;
    background: linear-gradient(180deg, #F4EEFF 0%, #FFFDF5 100%);
    border: 1px solid #E4D9FA; border-radius: 24px;
    padding: 20px 14px 26px; position: relative; overflow: hidden;
}
.ladder-board-top { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; position: relative; z-index: 1; }
.ladder-count-nav {
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; border: 1px solid #E4D9FA; border-radius: 30px;
    padding: 6px 14px; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.1);
}
.ladder-count-nav button {
    width: 22px; height: 22px; border: none; background: transparent; cursor: pointer;
    font-size: 18px; font-weight: 900; color: #8B5CF6; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.ladder-count-nav button:hover { color: #7C3AED; }
.ladder-count-text { font-weight: 900; font-size: 14px; color: #5D4037; white-space: nowrap; font-family: 'Paperozi', sans-serif; }
.ladder-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ladder-start-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #8B5CF6; color: #fff; border: none; border-radius: 30px;
    padding: 10px 22px; font-weight: 900; font-size: 14px; cursor: pointer;
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.35); transition: background 0.15s, transform 0.1s;
    font-family: 'Paperozi', sans-serif;
}
.ladder-start-btn:hover { background: #7C3AED; }
.ladder-start-btn:active { transform: scale(0.97); }
.ladder-secondary-btn {
    background: #ffffff; color: #5D4037; border: 1px solid #E4D9FA; border-radius: 30px;
    padding: 10px 16px; font-weight: 800; font-size: 13px; cursor: pointer; transition: background 0.15s;
    font-family: 'Paperozi', sans-serif;
}
.ladder-secondary-btn:hover { background: #F4EEFF; }
.ladder-reset-btn { color: #e15b5b; border-color: #f6c9c9; }
.ladder-reset-btn:hover { background: #fdeeee; }
.ladder-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
.ladder-icon-btn svg { display: block; }

.ladder-svg-wrap { width: 100%; margin: 0 auto; position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.ladder-svg-wrap svg { display: block; height: auto; margin: 0 auto; overflow: visible; }
.ladder-result-text {
    min-height: 20px; font-weight: 900; font-size: 14px; color: #7C3AED;
    text-align: center; position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: center;
    gap: 12px; width: 100%; box-sizing: border-box; padding: 20px 6px 4px; flex: 1;
}
.ladder-result-summary-item { display: flex; align-items: center; gap: 10px; background: #F9F6FF; border: 2px solid #E4D9FA; border-radius: 40px; padding: 8px 18px 8px 8px; animation: ladderResultPop 0.25s ease; }
.ladder-result-summary-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; overflow: hidden; }
.ladder-result-summary-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ladder-result-summary-name { font-weight: 900; font-size: 15px; color: #5D4037; }
.ladder-result-summary-arrow { font-weight: 900; font-size: 15px; color: #8B5CF6; }
.ladder-result-summary-result { font-weight: 900; font-size: 15px; color: #8B5CF6; }
@keyframes ladderResultPop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.ladder-replay-btn-row { flex: 0 0 100%; display: flex; justify-content: center; margin-top: 6px; }
.ladder-replay-btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    background: #8B5CF6; color: #fff; border: none; border-radius: 30px;
    padding: 10px 22px; font-weight: 900; font-size: 14px; cursor: pointer;
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.35); transition: background 0.15s, transform 0.1s;
    font-family: 'Paperozi', sans-serif;
    animation: ladderResultPop 0.25s ease;
}
.ladder-replay-btn-sm:hover { background: #7C3AED; }
.ladder-replay-btn-sm:active { transform: scale(0.97); }

.ladder-col-header { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; transition: opacity 0.2s; }
.ladder-col-header.used { opacity: 0.5; }
.ladder-col-header.clickable { cursor: pointer; }
.ladder-col-header.clickable .ladder-avatar,
.ladder-col-header.clickable .ladder-name-pill { cursor: pointer; }
.ladder-col-header.clickable:hover .ladder-avatar { box-shadow: 0 2px 10px rgba(139, 92, 246, 0.45); transform: scale(1.04); }
.ladder-col-header.clickable:hover .ladder-name-pill { border-color: #8B5CF6; }
.ladder-col-header.clickable .ladder-avatar { transition: box-shadow 0.2s, transform 0.2s; }
.ladder-avatar {
    width: 62%; aspect-ratio: 1 / 1; max-width: 96px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: default; border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.18);
    overflow: hidden; font-size: 28px; font-weight: 900; color: #fff; font-family: 'Paperozi', sans-serif;
    transition: box-shadow 0.2s;
}
.ladder-avatar.has-photo { box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); }
.ladder-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ladder-name-pill {
    width: 100%; box-sizing: border-box; border: 1px solid #E4D9FA; background: #ffffff;
    border-radius: 20px; padding: 8px; cursor: pointer;
    font-family: 'Paperozi', sans-serif; font-weight: 800; font-size: 14px; color: #5D4037;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ladder-name-pill:focus { outline: none; border-color: #8B5CF6; }
.ladder-name-pill:disabled { cursor: default; }

.ladder-result-input {
    width: 100%; height: 100%; box-sizing: border-box; margin: 0;
    border: none; background: transparent;
    font-family: 'Paperozi', sans-serif; font-size: 15px; font-weight: 800; text-align: center;
    color: #5D4037; outline: none; padding: 0 2px;
}
.ladder-result-input::placeholder { color: #C9B8F2; }
.ladder-result-label {
    width: 100%; height: 100%; box-sizing: border-box; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Paperozi', sans-serif; font-size: 15px; font-weight: 800; text-align: center;
    color: #5D4037; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity 0.2s; cursor: pointer;
}
.ladder-result-label.is-used { opacity: 0.5; cursor: default; pointer-events: none; }
.ladder-result-box rect { fill: #ffffff; stroke: #E4D9FA; stroke-width: 1.5; }
.ladder-result-box.hit rect { fill: #EDE3FF; stroke: #C9AFFB; }
.ladder-vline { stroke: #C9B8F2; stroke-width: 2; }
.ladder-rung { stroke: #C9B8F2; stroke-width: 2; }
.ladder-path { fill: none; stroke: #8B5CF6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

html.dark-mode .ladder-board {
    background: linear-gradient(180deg, #221f28 0%, var(--card-bg-cream) 100%);
    border-color: var(--white-border);
}
html.dark-mode .ladder-count-nav,
html.dark-mode .ladder-secondary-btn,
html.dark-mode .ladder-name-pill,
html.dark-mode .ladder-result-summary-item {
    background: var(--card-bg-white);
    border-color: var(--white-border);
}
html.dark-mode .ladder-count-text,
html.dark-mode .ladder-name-pill,
html.dark-mode .ladder-result-input,
html.dark-mode .ladder-result-label,
html.dark-mode .ladder-result-summary-name { color: #f1f1f1; }
html.dark-mode .ladder-result-box rect { fill: var(--card-bg-white); stroke: var(--white-border); }
html.dark-mode .ladder-result-box.hit rect { fill: #372c52; stroke: #8B5CF6; }
html.dark-mode .ladder-vline,
html.dark-mode .ladder-rung { stroke: #4a4550; }
html.dark-mode .ladder-reset-btn { color: #ff8a8a; border-color: #5a2f2f; }
html.dark-mode .ladder-reset-btn:hover { background: #2e1f1f; }

/* 라이트 모드일 때 이미지 카드의 글씨색을 덮어쓰기 (뱃지는 제외) */
html:not(.dark-mode) .dday-hero-card-img .dday-hero-stat-label,
html:not(.dark-mode) .dday-hero-card-img .dday-hero-stat-num,
html:not(.dark-mode) .dday-hero-card-img .dday-hero-title {
    color: #000000 !important;
}

html:not(.dark-mode) .dday-hero-card-img .dday-hero-sub {
    color: #3E2723 !important; /* 서브 텍스트(디데이 멘트) */
}

/* 👈 뱃지는 선택한 테마 색상을 강제로 유지하도록 분리 */
html:not(.dark-mode) .dday-hero-card-img .dday-hero-badge {
    color: rgb(var(--dday-c1)) !important; 
}