/* ============================================================
   커서 정의 — 밤: 별 / 별+클릭화살표, 낮: 해 / 해+클릭화살표
   ============================================================ */
* {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><polygon points="16,2 20,12 31,12 22,19 25,30 16,24 7,30 10,19 1,12 12,12" fill="%23FFD700" stroke="%23FFA500" stroke-width="1"/><circle cx="16" cy="16" r="8" fill="%23FFD700" opacity="0.3"/></svg>') 16 16, auto;
}
/* 낮에는 해가 기본 커서 */
[data-theme="light"] * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g stroke="%23FF9800" stroke-width="2" stroke-linecap="round"><line x1="16" y1="2" x2="16" y2="7"/><line x1="16" y1="25" x2="16" y2="30"/><line x1="2" y1="16" x2="7" y2="16"/><line x1="25" y1="16" x2="30" y2="16"/><line x1="6" y1="6" x2="9.5" y2="9.5"/><line x1="22.5" y1="22.5" x2="26" y2="26"/><line x1="6" y1="26" x2="9.5" y2="22.5"/><line x1="22.5" y1="9.5" x2="26" y2="6"/></g><circle cx="16" cy="16" r="7" fill="%23FFC107" stroke="%23FF9800" stroke-width="1"/></svg>') 16 16, auto;
}

/* 클릭 가능한 요소 위에서는 클릭 화살표가 함께 붙는다.
   커서용 SVG 는 <defs>/그라디언트 참조를 쓰면 브라우저가 통째로 무시하고
   폴백(손 모양)을 그리므로, 단색 도형만으로 그린다. 폴백도 none 으로 둔다. */
a, button, .card, .year-btn, .logout-btn, .theme-floating,
[role="button"], .nav-menu a, .dropdown li a,
input[type="submit"], input[type="button"], .login-btn,
.menu-item, .sub-item, .hamburger,
.work-toggle, input[type="checkbox"], input[type="radio"], select, .cal-evt-bar, .route-point {
    cursor: url('images/cursor-star-mascot.png') 5 7, pointer;
}
/* 낮의 클릭 커서 — 해 + 클릭 화살표 */
[data-theme="light"] a, [data-theme="light"] button, [data-theme="light"] .card,
[data-theme="light"] .year-btn, [data-theme="light"] .logout-btn, [data-theme="light"] .theme-floating,
[data-theme="light"] [role="button"], [data-theme="light"] .nav-menu a, [data-theme="light"] .dropdown li a,
[data-theme="light"] input[type="submit"], [data-theme="light"] input[type="button"], [data-theme="light"] .login-btn,
[data-theme="light"] .menu-item, [data-theme="light"] .sub-item, [data-theme="light"] .hamburger,
[data-theme="light"] .work-toggle, [data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"], [data-theme="light"] select,
[data-theme="light"] .cal-evt-bar, [data-theme="light"] .route-point {
    cursor: url('images/cursor-sun-mascot.png') 5 7, pointer;
}

/* 마우스를 따라다니는 오버레이(#customCursor)가 살아 있으면 그것만 커서로 쓴다.
   위의 SVG 커서까지 함께 보이면 별이 두 개로 겹치기 때문.
   클래스는 starhouse.js 가 붙이므로, JS 가 없으면 위의 SVG 커서로 되돌아간다. */
html.star-cursor,
html.star-cursor * {
    cursor: none !important;
}

/* ============================================================
   CSS 변수 (테마)
   ============================================================ */
/* ── 낮 (라이트) ──
   맑은 하늘. 위는 파랗고 아래로 갈수록 옅어지며, 지평선 쪽에 햇살이 번진다.
   포인트 색은 해와 같은 주황빛으로 두어 밤 테마의 별빛과 결이 이어지게 했다. */
:root {
    --bg-gradient:
        radial-gradient(circle at 78% 12%, rgba(255, 214, 130, 0.55) 0%, rgba(255, 214, 130, 0) 42%),
        linear-gradient(180deg, #8fc4ef 0%, #b6dcf5 38%, #d9ecf8 68%, #f3f7f3 100%);
    --bg-header: rgba(255, 255, 255, 0.62);
    --bg-navbar: rgba(255, 255, 255, 0.44);
    --bg-dropdown: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(255, 255, 255, 0.55);
    --bg-card-hover: rgba(255, 255, 255, 0.78);
    --bg-empty: rgba(255, 255, 255, 0.42);
    --bg-year: rgba(255, 255, 255, 0.5);
    --bg-year-hover: rgba(255, 255, 255, 0.7);
    --bg-toast: rgba(255, 255, 255, 0.92);
    --bg-floating: rgba(255, 255, 255, 0.78);
    --bg-login: rgba(255, 255, 255, 0.3);

    /* 배경이 밝아 투명도를 낮추면 글자가 사라진다. 대비를 넉넉히 준다. */
    --text-primary: #1f3347;
    --text-secondary: rgba(31, 51, 71, 0.8);
    --text-muted: rgba(31, 51, 71, 0.6);
    --text-light: rgba(31, 51, 71, 0.4);
    --text-placeholder: rgba(31, 51, 71, 0.52);

    --border-light: rgba(255, 255, 255, 0.65);
    --border-medium: rgba(31, 51, 71, 0.08);
    --border-dropdown: rgba(255, 255, 255, 0.5);

    --shadow-card: 0 8px 28px rgba(31, 51, 71, 0.08);
    --shadow-dropdown: 0 20px 55px rgba(31, 51, 71, 0.14);
    --shadow-floating: 0 8px 30px rgba(31, 51, 71, 0.14);
    --shadow-login: 0 30px 70px rgba(31, 51, 71, 0.16);

    --sky-opacity: 1;
    --scrollbar: rgba(245, 166, 35, 0.28);
}

/* ── 밤 (다크) ──
   깊은 밤하늘. 위는 짙은 남색, 아래는 지평선 빛이 살짝 남은 보랏빛.
   달빛이 오른쪽 위에서 은은하게 번진다. */
[data-theme="dark"] {
    --bg-gradient:
        radial-gradient(circle at 78% 12%, rgba(200, 214, 255, 0.16) 0%, rgba(200, 214, 255, 0) 40%),
        linear-gradient(180deg, #070a1c 0%, #0e1330 42%, #171a3c 74%, #221c3a 100%);
    --bg-header: rgba(11, 11, 26, 0.7);
    --bg-navbar: rgba(11, 11, 26, 0.5);
    --bg-dropdown: rgba(20, 20, 40, 0.95);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --bg-empty: rgba(255, 255, 255, 0.03);
    --bg-year: rgba(255, 255, 255, 0.04);
    --bg-year-hover: rgba(255, 255, 255, 0.08);
    --bg-toast: rgba(20, 20, 40, 0.9);
    --bg-floating: rgba(20, 20, 40, 0.8);
    --bg-login: rgba(255, 255, 255, 0.03);

    /* 다크도 원본 값은 너무 옅어 라벨·플레이스홀더가 사라진다. */
    --text-primary: #f0eef7;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-light: rgba(255, 255, 255, 0.3);
    --text-placeholder: rgba(255, 255, 255, 0.42);

    --border-light: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 255, 255, 0.04);
    --border-dropdown: rgba(255, 255, 255, 0.06);

    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-login: 0 30px 80px rgba(0, 0, 0, 0.6);

    --sky-opacity: 1;
    --scrollbar: rgba(255, 215, 0, 0.18);
}

/* ============================================================
   공통
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 스크롤바 — 어디서 스크롤이 생기든(모달, 사이드 패널, 폼 등) 브라우저 기본
   회색 막대 대신 테마 색의 가는 막대를 쓴다. content-area 등 개별 규칙보다 먼저 둔다. */
* {
    scrollbar-width: thin;                          /* Firefox + 최신 Chromium */
    scrollbar-color: var(--scrollbar) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }   /* 구형 Chromium/Safari */
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }

body {
    width: 100vw;
    height: 100vh;
    /* 모바일 브라우저의 주소창이 접혔다 펴져도 실제 보이는 높이를 따라간다. */
    height: 100dvh;
    overflow: hidden;
    font-family: 'Segoe UI', 'Helvetica', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-primary);
    transition: background 0.6s ease, color 0.4s ease;
}

/* 낮에는 해와 구름, 밤에는 별과 별똥별을 같은 캔버스에 그린다. */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: var(--sky-opacity);
    transition: opacity 0.6s ease;
}

/* ============================================================
   커스텀 커서 (별빛 글로우)
   ============================================================ */
/* 위치는 JS 가 transform 으로만 옮긴다(left/top 은 매 프레임 레이아웃을 다시 잡아 커서가 늦게 따라온다).
   가운데 정렬도 그 transform 안에 함께 넣으므로 여기서는 주지 않는다. */
.custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
    width: 40px;
    height: 40px;
    will-change: transform;
    display: none;
}
.custom-cursor .cursor-click-star,
.custom-cursor .cursor-click-sun,
.custom-cursor .cursor-sun,
.custom-cursor.link .cursor-star {
    display: none;
}
/* 밤: 링크 위에서는 별 + 클릭 화살표 */
.custom-cursor.link .cursor-click-star {
    display: block;
}
/* 낮(라이트): 평소엔 해, 링크 위에서는 해 + 클릭 화살표 */
[data-theme="light"] .custom-cursor .cursor-star,
[data-theme="light"] .custom-cursor .cursor-click-star {
    display: none;
}
[data-theme="light"] .custom-cursor:not(.link) .cursor-sun {
    display: block;
}
[data-theme="light"] .custom-cursor.link .cursor-click-sun {
    display: block;
}
/* 맥동은 transform 만 준다. drop-shadow 를 함께 쓰면 scale 이 바뀔 때마다 필터를 얹어
   래스터를 다시 떠야 해서 매 프레임 비용이 커지고, 그만큼 커서가 늦게 따라오는 것처럼 보인다.
   빛 번짐은 아래 .cursor-glow 가 전담한다 (별 자체에는 그림자를 주지 않는다). */
.custom-cursor svg,
.custom-cursor img {
    width: 100%;
    height: 100%;
    animation: cursorPulse 1.5s ease-in-out infinite alternate;
}
@keyframes cursorPulse {
    0% { transform: scale(0.92) rotate(0deg); }
    100% { transform: scale(1.18) rotate(20deg); }
}

/* 뭔가 처리 중일 때(회선 재연결, Blazor 가 서버 응답을 기다리는 동안 등)
   맥동 대신 별이 계속 한 바퀴씩 돈다 — 브라우저 기본 로딩 커서가 없는 자리를 대신한다.
   .custom-cursor.busy 는 starhouse.js 의 setCursorBusy() 가 붙인다. */
.custom-cursor.busy svg,
.custom-cursor.busy img {
    animation: cursorSpin 0.9s linear infinite;
}
@keyframes cursorSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 글로우도 마찬가지. transition 을 주면 커서보다 한 박자 늦게 끌려온다.
   별에서 drop-shadow 를 걷어냈으므로 그만큼의 빛은 여기서 조금 더 진하게 낸다.
   gradient 배경은 한 번만 그려지고 이후로는 transform 만 바뀌어 매 프레임 비용이 없다. */
.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9998;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, rgba(255, 205, 60, 0.08) 38%, transparent 70%);
    will-change: transform;
    display: none;
}

/* ============================================================
   로그인 컨테이너
   ============================================================ */
#loginContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-gradient);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loginContainer.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-box {
    /* 로고·제목이 드래그로 파랗게 선택되는 걸 막는다. 입력칸은 아래에서 되살린다. */
    user-select: none;
    position: relative;
    z-index: 2;
    background: var(--bg-login);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: 30px;
    padding: 3.5rem 4rem;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-login);
    animation: floatUp 1s ease-out;
}
@keyframes floatUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.login-box .logo {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.3rem;
    animation: starPulse 3s ease-in-out infinite alternate;
}
@keyframes starPulse {
    0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 20px rgba(255,215,0,0.2)); }
    100% { transform: scale(1.1) rotate(10deg); filter: drop-shadow(0 0 50px rgba(255,215,0,0.5)); }
}

.login-box h1 {
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
.login-box h1 .highlight,
.header .logo-area h1 .highlight {
    background: linear-gradient(135deg, #f5a623, #f7c948, #f5a623);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite alternate;
    font-weight: 500;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.login-box .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.3em;
    margin-bottom: 2.5rem;
    font-weight: 300;
    transition: color 0.3s ease;
}

.login-box .input-group {
    position: relative;
    margin-bottom: 1.5rem;
    text-align: left;
}
.login-box .input-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    font-weight: 300;
    transition: color 0.3s ease;
}
.login-box .input-group input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.4s ease;
    outline: none;
    font-family: inherit;
    letter-spacing: 0.05em;
    background: var(--bg-card);
}
.login-box .input-group input::placeholder {
    /* font-weight 200 은 획이 끊겨 보인다. 300 이상으로 둔다. */
    color: var(--text-placeholder);
    font-weight: 300;
    letter-spacing: 0.02em;
    opacity: 1; /* 파이어폭스는 기본으로 플레이스홀더를 더 흐리게 그린다 */
}
.login-box .input-group input:focus {
    border-color: rgba(245, 166, 35, 0.3);
    box-shadow: 0 0 40px rgba(245, 166, 35, 0.04);
}

/* 입력칸은 선택(복사·붙여넣기)이 돼야 한다 */
.login-box input[type="text"],
.login-box input[type="password"] {
    user-select: text;
}

.login-box .login-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #f5a623, #f7c04a 55%, #f5a623);
    background-size: 200% 100%;
    border: none;
    border-radius: 16px;
    color: #2b1c05;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.35);
    transition: all 0.35s ease;
    font-family: inherit;
}
/* 호버: 살짝 떠오르며 금빛이 좌우로 흐르고, 빛줄기가 지나간다 */
.login-box .login-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}
.login-box .login-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 26px rgba(245, 166, 35, 0.5);
}
.login-box .login-btn:hover::after { left: 125%; }
.login-box .login-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}
.login-box .login-btn:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* 로그인 실패 안내 */
.login-box .login-error {
    color: #e07a7a;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
    text-align: center;
}

/* 업무용으로 로그인 토글 */
.login-box .work-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding: 0.7rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.login-box .work-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.login-box .work-slider {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: 24px;
    background: var(--text-light);
    transition: background 0.25s ease;
}
.login-box .work-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}
.login-box .work-toggle input:checked ~ .work-slider {
    background: linear-gradient(135deg, #f5a623, #f7c948);
}
.login-box .work-toggle input:checked ~ .work-slider::before {
    transform: translateX(18px);
}
.login-box .work-toggle input:focus-visible ~ .work-slider {
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25);
}

/* ============================================================
   메인 컨테이너
   ============================================================ */
#mainContainer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#mainContainer.show {
    opacity: 1;
    visibility: visible;
}

/* ===== 헤더 ===== */
.header {
    /* 로고·사용자 영역도 클릭 대상 — 드래그 선택을 막는다. */
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem;
    background: var(--bg-header);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
    transition: background 0.4s ease, border-color 0.3s ease;
}
.header .logo-area {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

/* 업무용으로 로그인한 세션 표시 */
.header .user-area .work-badge {
    background: rgba(245, 166, 35, 0.15);
    border: 1px solid rgba(245, 166, 35, 0.3);
    color: #f5a623;
    border-radius: 20px;
    padding: 0.15rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 헤더의 로그인/나가기는 링크지만 버튼처럼 보이게 */
/* 유휴 로그아웃까지 남은 시간 — starhouse.js 의 startIdleTimer 가 매초 갱신한다.
   ⏳ 아이콘이 달린 알약 형태로 눈에 띄게 하고, 남은 시간에 따라 색이 바뀐다. */
.header .user-area .session-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-variant-numeric: tabular-nums; /* 초가 바뀌어도 폭이 흔들리지 않게 */
}
.header .user-area .session-timer:not(:empty)::before {
    content: '⏳';
    font-size: 0.8rem;
}
/* 3분 미만 — 주황으로 주의 */
.header .user-area .session-timer.warning {
    color: #d98a1f;
    border-color: rgba(245, 166, 35, 0.5);
    background: rgba(245, 166, 35, 0.12);
}
/* 1분 미만 — 빨강 + 깜빡임으로 경고 */
.header .user-area .session-timer.expiring {
    color: #e05d5d;
    border-color: rgba(224, 93, 93, 0.55);
    background: rgba(224, 93, 93, 0.12);
    animation: timerBlink 1s ease-in-out infinite;
}
@keyframes timerBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.header .user-area a.logout-btn {
    text-decoration: none;
    display: inline-block;
}
.header .logo-area .star-icon {
    font-size: 1.8rem;
    animation: starPulse 3s ease-in-out infinite alternate;
}
.header .logo-area h1 {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.header .user-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.header .user-area .user-name {
    color: #f5a623;
    font-weight: 400;
}
.header .user-area .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid rgba(200, 80, 80, 0.3);
    color: #c96a6a;
    padding: 0.28rem 0.9rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.25s ease;
    font-family: inherit;
}
.header .user-area .logout-btn .logout-icon {
    font-size: 0.8rem;
    line-height: 1;
}
.header .user-area .logout-btn:hover {
    background: rgba(200, 80, 80, 0.12);
    border-color: rgba(200, 80, 80, 0.55);
    color: #d95c5c;
    transform: translateY(-1px);
}
.header .user-area .logout-btn:active {
    transform: translateY(0);
}

/* ===== 내비 ===== */
.navbar {
    /* 메뉴는 클릭 대상 — 텍스트가 드래그로 선택되면 지저분해 보이니 막는다. */
    user-select: none;
    /* backdrop-filter 가 쌓임 맥락을 만들어, z-index 가 없으면 뒤따르는 본문(여행 히어로 등)이
       드롭다운 위에 그려진다. 본문보다 위, 모달(1200~)보다는 아래로 둔다. */
    position: relative;
    z-index: 900;
    flex-shrink: 0;
    background: var(--bg-navbar);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: background 0.4s ease, border-color 0.3s ease;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
    flex-wrap: wrap;
}
.nav-menu > li {
    position: relative;
}
.nav-menu > li > a {
    display: block;
    padding: 0.7rem 1.2rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
    white-space: nowrap;}
.nav-menu > li > a:hover,
.nav-menu > li > a.active {
    color: var(--text-primary);
    background: var(--bg-card);
}
.nav-menu > li > a .arrow {
    font-size: 0.6rem;
    margin-left: 0.3rem;
    opacity: 0.3;
}

.nav-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--bg-dropdown);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-dropdown);
    border-radius: 12px;
    padding: 0.3rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.25s ease;
    box-shadow: var(--shadow-dropdown);
    z-index: 100;
    list-style: none;
}
.nav-menu > li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu .dropdown li {
    list-style: none;
}
.nav-menu .dropdown li a {
    display: block;
    padding: 0.45rem 1.2rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 300;
    transition: all 0.2s ease;    letter-spacing: 0.05em;
}
.nav-menu .dropdown li a:hover {
    color: var(--text-primary);
    background: rgba(245, 166, 35, 0.06);
}
.nav-menu .dropdown li a.active {
    color: #f5a623;
    background: rgba(245, 166, 35, 0.06);
}
.nav-menu .dropdown .divider {
    height: 1px;
    margin: 0.2rem 1rem;
    background: var(--border-medium);
}

/* ===== 햄버거 ===== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 0.5rem;}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ===== 콘텐츠 ===== */
.content-area {
    flex: 1;
    padding: 2rem 2.5rem;
    overflow-y: auto;
    min-height: 0;
}
.content-area::-webkit-scrollbar {
    width: 4px;
}
.content-area::-webkit-scrollbar-track {
    background: transparent;
}
.content-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 10px;
}

.page {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.page .page-title {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
/* 메뉴 이동 후 FocusOnNavigate 가 접근성을 위해 h2 에 포커스를 주는데,
   그때 브라우저 기본 포커스 테두리가 제목을 감싸 선택된 것처럼 보인다. 테두리만 감춘다. */
h2:focus { outline: none; }
.page .page-title .highlight,
.timeline-item .content .highlight {
    background: linear-gradient(135deg, #f5a623, #f7c948);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page .page-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    font-weight: 300;
    transition: color 0.3s ease;
}
.page .divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(245, 166, 35, 0.3), transparent);
    margin-bottom: 1.5rem;
}

/* ===== 카드 ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.card {
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.5rem 1.2rem;
    transition: all 0.4s ease;    text-align: left;
    width: 100%;
    font-family: inherit;
}
.card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(245, 166, 35, 0.2);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.card .card-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}
.card .card-title {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
.card .card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 300;
    transition: color 0.3s ease;
}

/* ===== 타임라인 ===== */
.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-medium);
}
.timeline-item .date {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 70px;
    font-weight: 300;
}
.timeline-item .content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 300;
}

/* ===== 빈 상태 ===== */
.empty-state {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-light);
}
.empty-state .big-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.4;
}
.empty-state p {
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.1em;
}
.empty-state .hint {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* ===== 365행복 연도 ===== */
.year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 2rem;
}
.year-btn {
    background: var(--bg-year);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;    transition: all 0.3s ease;
    width: 100%;
    font-family: inherit;
}
.year-btn:hover {
    background: var(--bg-year-hover);
    border-color: rgba(245, 166, 35, 0.2);
    transform: translateY(-2px);
}
.year-btn .year-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.2rem;
}
.year-btn .year-label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    transition: color 0.3s ease;
}
.year-btn .year-label.current {
    color: #f5a623;
    font-weight: 400;
}

/* ===== 토스트 ===== */
.toast {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--bg-toast);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
    padding: 0.8rem 2rem;
    border-radius: 40px;
    font-size: 0.88rem;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    opacity: 0;
    transition: all 0.6s ease;
    pointer-events: none;
    font-weight: 400;
    box-shadow: var(--shadow-card);
    white-space: nowrap;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== 플로팅 테마 버튼 ===== */
.theme-floating {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    background: var(--bg-floating);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-light);
    border-radius: 60px;
    padding: 0.7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-floating);
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--text-primary);
    user-select: none;}
.theme-floating:hover {
    transform: scale(1.05);
    border-color: rgba(245, 166, 35, 0.3);
}
.theme-floating:active {
    transform: scale(0.95);
}
.theme-floating .floating-icon {
    font-size: 1.3rem;
    transition: transform 0.4s ease;
}
[data-theme="dark"] .theme-floating .floating-icon {
    transform: rotate(20deg);
}
.theme-floating .floating-label {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.95;
    white-space: nowrap;
}
/* ===== 반응형 ===== */
@media (max-width: 768px) {
    .header { padding: 0.6rem 1.2rem; }
    .header .logo-area h1 { font-size: 1.1rem; }
    .navbar { padding: 0 1.2rem; }
    .hamburger { display: flex; }
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0;
        background: var(--bg-dropdown);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--border-light);
    }
    .nav-menu.open { display: flex; }
    .nav-menu > li { width: 100%; }
    .nav-menu > li > a { padding: 0.6rem 1rem; font-size: 0.9rem; }
    .nav-menu > li > a .arrow { float: right; }
    .nav-menu .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        display: none;
        width: 100%;
    }
    .nav-menu > li.open .dropdown { display: block; }
    .nav-menu .dropdown li a { padding: 0.4rem 1rem 0.4rem 2rem; font-size: 0.85rem; }
    .nav-menu .dropdown .divider { display: none; }
    .content-area { padding: 1.2rem 1.2rem; }
    .custom-cursor { display: none !important; }
    .cursor-glow { display: none !important; }
    /* 오버레이를 감췄으니 커서를 다시 보이게 되돌린다. */
    html.star-cursor,
    html.star-cursor * { cursor: auto !important; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .page .page-title { font-size: 1.3rem; }
    .header .user-area .user-name { display: none; }
    .year-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .theme-floating { padding: 0.6rem 1rem; bottom: 1.2rem; right: 1.2rem; }
    .theme-floating .floating-label { display: none; }
    .toast { bottom: 4.5rem; font-size: 0.75rem; padding: 0.6rem 1.2rem; white-space: normal; max-width: 90%; }
    .login-box { padding: 2.5rem 1.8rem; }
    .login-box h1 { font-size: 1.8rem; }

    /* iOS 사파리는 입력 글씨가 16px 미만이면 포커스 때 화면을 강제 확대한다.
       모바일에서만 모든 텍스트 입력을 16px 로 올려 확대 없이 입력하게 한다. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea { font-size: 16px !important; }
}

@media (max-width: 400px) {
    .header .logo-area .star-icon { font-size: 1.4rem; }
    .header .logo-area h1 { font-size: 0.95rem; }
    .content-area { padding: 1rem; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .theme-floating { padding: 0.5rem 0.8rem; bottom: 1rem; right: 1rem; }
    .theme-floating .floating-icon { font-size: 1.1rem; }
}

/* ============================================================
   공통 UI 조각 — 기능 페이지들이 함께 쓰는 버튼/검색/구역 제목
   ============================================================ */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 0.45rem 1.1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.pill-btn:hover {
    background: var(--bg-card-hover);
    border-color: rgba(245, 166, 35, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.pill-btn:active { transform: scale(0.97); }
.pill-btn:disabled,
.pill-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.pill-btn.accent {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(245, 200, 100, 0.1));
    border-color: rgba(245, 166, 35, 0.3);
    color: var(--text-primary);
}
.pill-btn.danger {
    background: rgba(200, 80, 80, 0.1);
    border-color: rgba(200, 80, 80, 0.25);
    color: #d97070;
}
.pill-btn.danger:hover { background: rgba(200, 80, 80, 0.18); color: #e08585; }

.section-title {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 1.6rem 0 0.9rem;
}
.section-count {
    display: inline-block;
    background: rgba(245, 166, 35, 0.14);
    color: #f5a623;
    border-radius: 12px;
    padding: 0.05rem 0.55rem;
    font-size: 0.72rem;
    margin-left: 0.3rem;
}

/* ============================================================
   사진 보관함
   ============================================================ */
.photo-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.photo-toolbar .toolbar-spacer { flex: 1; }
.photo-toolbar .toolbar-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.photo-toolbar .folder-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    word-break: break-all;
}

.photo-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 0.5rem 1.1rem;
    margin-bottom: 1.4rem;
}
.photo-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.photo-search input::placeholder { color: var(--text-placeholder); }
.photo-search .search-icon { opacity: 0.5; font-size: 0.85rem; }
.photo-search .search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0 0.2rem;
}
.photo-search .search-clear:hover { color: #f5a623; }

.photo-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* ── 폴더 ── */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.9rem;
}
.folder-card {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    font-family: inherit;
    transition: all 0.3s ease;
}
.folder-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 166, 35, 0.25);
    box-shadow: var(--shadow-card);
}
.folder-thumb {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-empty);
}
.folder-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0.5;
}
.folder-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem 0.75rem;
}
.folder-name {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-count { font-size: 0.7rem; color: var(--text-muted); }

/* ── 사진 ── */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
}
.photo-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}
.photo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.photo-card:hover img { transform: scale(1.06); }
.photo-card.selected {
    outline: 3px solid #f5a623;
    outline-offset: -3px;
}
.photo-check {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}
.photo-card.selected .photo-check { color: #f5a623; text-shadow: 0 0 3px #fff; }

.photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.5rem;
    background: rgba(11, 11, 26, 0.3);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.photo-card:hover .photo-overlay { opacity: 1; }
.photo-delete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(200, 80, 80, 0.75);
    color: #fff;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.photo-delete:hover { background: rgba(200, 60, 60, 0.95); }

.photo-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 1.1rem 0.55rem 0.45rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #fff;
    font-size: 0.66rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.photo-card:hover .photo-meta { opacity: 1; }

/* ── 크게 보기 ── */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(9, 10, 24, 0.9);
    backdrop-filter: blur(6px);
}
.lightbox-box {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox-box img {
    max-width: 100%;
    max-height: calc(92vh - 70px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
    position: absolute;
    top: -2.4rem;
    right: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.3rem;
}
.lightbox-close:hover { color: #f5a623; }
.lightbox-footer {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
}

@media (max-width: 768px) {
    .folder-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .photo-toolbar .folder-title { font-size: 0.9rem; }
}

/* ============================================================
   목록 / 필터 / 모달 / 폼 — 구매 리스트 등 데이터 화면 공통
   ============================================================ */
.filter-tabs {
    display: flex;
    gap: 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 22px;
    padding: 0.25rem;
}
.filter-tab {
    border: none;
    background: none;
    border-radius: 18px;
    padding: 0.35rem 0.95rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all 0.25s ease;
}
.filter-tab:hover { color: var(--text-primary); }
.filter-tab.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(245, 200, 100, 0.12));
    color: var(--text-primary);
    font-weight: 400;
}

/* ── 목록 ── */
.list-group { margin-bottom: 1.6rem; }
.group-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem 0.2rem;
}
.list-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.45rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    transition: all 0.25s ease;
}
.list-row:hover {
    background: var(--bg-card-hover);
    border-color: rgba(245, 166, 35, 0.2);
}
.list-row.done { opacity: 0.55; }
.list-row.done .row-title { text-decoration: line-through; }

.row-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #f5a623;
}
.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}
.row-title {
    font-size: 0.92rem;
    color: var(--text-primary);
}
.row-badge {
    font-size: 0.66rem;
    background: rgba(245, 166, 35, 0.14);
    color: #f5a623;
    border-radius: 10px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.3rem;
}
.row-sub { font-size: 0.74rem; color: var(--text-muted); }
.row-memo {
    flex-basis: 100%;
    font-size: 0.74rem;
    color: var(--text-light);
    white-space: pre-wrap;
}
.row-price {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.row-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.row-date .done-mark { color: #6cba7f; }
.row-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.list-footer { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.icon-btn {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
    font-size: 0.9rem;
    /* 색을 지정하지 않으면 브라우저 기본(검정)이라 밤 테마에서 안 보인다. */
    color: var(--text-primary);
    opacity: 0.65;
    transition: all 0.2s ease;
}
.icon-btn:hover { opacity: 1; background: rgba(245, 166, 35, 0.1); }

/* ── 모달 ── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(9, 10, 24, 0.55);
    backdrop-filter: blur(4px);
}
.modal-box {
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    box-shadow: var(--shadow-login);
    padding: 1.6rem 1.8rem 1.4rem;
    animation: floatUp 0.35s ease-out;
}
.modal-box.narrow { max-width: 420px; }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
}
.modal-x {
    background: none;
    border: none;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.modal-x:hover { color: #f5a623; }
.modal-error {
    color: #e07a7a;
    font-size: 0.8rem;
    margin-top: 0.6rem;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

/* ── 폼 ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    /* 옆 칸의 라벨이 두 줄로 꺾여도 입력창은 아래에 나란히 붙는다. */
    justify-content: flex-end;
}
.form-field.wide { grid-column: span 2; }
.form-field.full { grid-column: 1 / -1; }
.form-field > span {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.87rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.25s ease;
}
.form-field textarea { resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-placeholder); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: rgba(245, 166, 35, 0.4); }
.form-field input:disabled,
.form-field select:disabled { opacity: 0.5; }
/* 라이트 테마의 모달은 배경이 거의 흰색이라, 반투명 흰 입력창이 그대로 묻힌다.
   또렷한 테두리와 불투명 배경을 줘 입력칸 윤곽이 보이게 한다. */
[data-theme="light"] .form-field input,
[data-theme="light"] .form-field select,
[data-theme="light"] .form-field textarea {
    background: #fff;
    border-color: rgba(31, 51, 71, 0.22);
}
.form-field select option { background: var(--bg-dropdown); color: var(--text-primary); }

.field-with-btn { display: flex; align-items: center; gap: 0.3rem; }
.field-with-btn select { flex: 1; }

/* ── 카테고리 관리 ── */
.cat-add-row { display: flex; gap: 0.5rem; }
.cat-add-row input {
    flex: 1;
    padding: 0.55rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.87rem;
    color: var(--text-primary);
    outline: none;
}
.cat-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.cat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.cat-row input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    outline: none;
}
.cat-name { flex: 1; font-size: 0.87rem; color: var(--text-primary); }
.cat-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 1rem 0; }

@media (max-width: 768px) {
    .form-field.wide { grid-column: 1 / -1; }
    /* dvh 는 iOS 사파리의 주소창이 줄었다 늘었다 해도 실제 보이는 높이를 따라간다. */
    .modal-box { padding: 1.2rem 1.1rem; border-radius: 20px; max-height: 88dvh; }
    .list-row { flex-wrap: wrap; }
    .row-content { flex-basis: 100%; order: 3; }
}

/* ============================================================
   일정 달력
   ============================================================ */
.cal-nav { display: flex; align-items: center; gap: 0.3rem; }
.cal-title {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    min-width: 8.5rem;
    text-align: center;
}

.cal-outer {
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
}
.cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-light);
}
.cal-dow {
    padding: 0.5rem 0;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
}
.cal-dow.sunday { color: #e08585; }
.cal-dow.saturday { color: #7aa7e0; }

/* 배경 셀과 이벤트 바를 겹쳐 놓아, 이벤트가 여러 칸을 가로지를 수 있게 한다. */
.cal-week-row { position: relative; }
.cal-bg-layer,
.cal-evt-layer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-bg-layer { height: 100%; }
.cal-evt-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    grid-auto-rows: 20px;
    gap: 2px 1px;
    pointer-events: none;
    padding: 0 2px;
}

.cal-bg-cell {
    border-right: 1px solid var(--border-medium);
    border-bottom: 1px solid var(--border-medium);
    padding: 0.25rem 0.4rem;
    min-height: 78px;
    transition: background 0.2s ease;
}
.cal-bg-cell:last-child { border-right: none; }
.cal-bg-cell:hover { background: var(--bg-card-hover); }
.cal-bg-cell.other-month { opacity: 0.35; }
.cal-bg-cell.today { background: rgba(245, 166, 35, 0.1); }
.cal-day-num { font-size: 0.78rem; color: var(--text-secondary); }
.cal-bg-cell.today .cal-day-num { color: #f5a623; font-weight: 500; }
.cal-bg-cell.sunday-col .cal-day-num { color: #e08585; }
.cal-bg-cell.saturday-col .cal-day-num { color: #7aa7e0; }

.cal-evt-bar {
    pointer-events: auto;
    height: 18px;
    line-height: 18px;
    border-radius: 5px;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* 마우스가 올라간 일정은 살짝 키워서 "이 일정을 클릭한다"는 걸 보여준다 */
.cal-evt-bar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 5;
    position: relative;
}
.cal-evt-bar.has-memo { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.35); }
.cal-evt-occ { opacity: 0.75; margin-left: 0.2rem; font-size: 0.62rem; }

/* ── 전체 일정 패널 ── */
.side-panel {
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    box-shadow: var(--shadow-login);
    padding: 1.4rem 1.5rem;
    animation: floatUp 0.35s ease-out;
}
.side-panel-body { overflow-y: auto; }
.lg-year {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 1rem 0 0.4rem;
}
.lg-month {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lg-month:hover { background: rgba(245, 166, 35, 0.08); }
.lg-goto { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); }
.lg-day {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0.2rem 0.6rem;
}
.lg-evt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    margin-left: 0.6rem;
    border-radius: 10px;
}
.lg-evt:hover { background: var(--bg-card-hover); }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lg-evt-info { display: flex; flex-direction: column; min-width: 0; }
.lg-evt-title { font-size: 0.85rem; color: var(--text-primary); }
.lg-evt-occ { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.2rem; }
.lg-evt-type { font-size: 0.72rem; color: var(--text-muted); }

/* ── 색상 선택 ── */
.color-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.cswatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
}
.cswatch:hover { transform: scale(1.15); }
.cswatch.sel { border-color: var(--text-primary); transform: scale(1.15); }
.cinput {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: none;
}

/* ── 일정 사진 ── */
.schd-photos { margin-top: 1.1rem; }
.schd-photos-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.schd-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
.schd-photo-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-empty);
}
.schd-photo-thumb img,
.schd-photo-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.schd-photo-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.schd-photo-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
}
.schd-photo-del:hover { background: rgba(200, 60, 60, 0.9); }

/* ── 업로드 진행 ── */
.upload-banner {
    background: var(--bg-card);
    border: 1px solid rgba(245, 166, 35, 0.25);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.upload-title { margin-bottom: 0.2rem; }
.upload-filename {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--bg-empty);
    overflow: hidden;
    margin: 0.4rem 0 0.2rem;
}
.upload-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5a623, #f7c948);
    transition: width 0.2s ease;
}
.upload-percent { font-size: 0.72rem; color: var(--text-muted); }
.upload-note { font-size: 0.72rem; color: #e0a060; margin-top: 0.3rem; }

/* ── 메모 툴팁 ── */
.evt-memo-tooltip {
    position: fixed;
    z-index: 3000;
    max-width: 280px;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
    padding: 0.6rem 0.8rem;
    pointer-events: none;
}
.evt-tip-title { font-size: 0.82rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.evt-tip-occ { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.2rem; }
.evt-tip-body { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; }

.lightbox-box video {
    max-width: 100%;
    max-height: calc(92vh - 70px);
    border-radius: 14px;
}

@media (max-width: 768px) {
    .cal-bg-cell { min-height: 62px; padding: 0.2rem; }
    .cal-title { font-size: 0.92rem; min-width: 7rem; }
    .cal-evt-bar { font-size: 0.6rem; height: 16px; line-height: 16px; }
    .cal-evt-occ { display: none; }
}

/* ============================================================
   위치 타입 / 미디어 — 목록 안 인라인 입력, 경로 관리, 플레이어
   ============================================================ */
.inline-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.87rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.25s ease;
}
.inline-input::placeholder { color: var(--text-placeholder); }
.inline-input:focus { border-color: rgba(245, 166, 35, 0.4); }

.type-tag {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.2rem 0.9rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── 경로 관리 ── */
.manage-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}
.manage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}
.manage-form {
    border-top: 1px solid var(--border-medium);
    margin-top: 0.8rem;
    padding-top: 0.9rem;
}

/* ── 현재 위치 ── */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 1.1rem;
}
.bc-item {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    font-size: 0.83rem;
    color: var(--text-secondary);
}
.bc-item:hover { background: rgba(245, 166, 35, 0.1); color: var(--text-primary); }
.bc-sep { color: var(--text-light); font-size: 0.8rem; }

.media-thumb { position: relative; font-size: 2rem; }
.ext-badge {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
}

/* ── 플레이어 ── */
.player-box {
    width: min(1100px, 94vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: #fff;
}
.player-title {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-index { color: #f5a623; font-size: 0.78rem; }
.sub-badge {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}
.player-video {
    width: 100%;
    max-height: calc(92vh - 130px);
    background: #000;
    border-radius: 14px;
}
.player-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.player-mode { display: flex; align-items: center; gap: 0.5rem; }
.mode-badge {
    font-size: 0.72rem;
    border-radius: 10px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.mode-badge.direct { background: rgba(245, 166, 35, 0.18); color: #f5c948; }
.mode-badge.transcode { background: rgba(255, 255, 255, 0.14); color: #ddd; }

@media (max-width: 768px) {
    .player-foot .pill-btn { padding: 0.4rem 0.8rem; font-size: 0.76rem; }
    .player-title { font-size: 0.8rem; }
}

/* ============================================================
   여행계획 카드
   ============================================================ */
.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.trip-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}
.trip-card.past { opacity: 0.72; }
.trip-card.past:hover { opacity: 1; }

.trip-cover {
    position: relative;
    height: 190px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-empty);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}
.trip-card:hover .trip-cover { transform: scale(1.04); }
.trip-cover-fallback { font-size: 2.6rem; opacity: 0.45; }

.trip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05));
}
.trip-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.trip-dday {
    align-self: flex-start;
    background: linear-gradient(135deg, #f5a623, #f7c948);
    color: #2b2738;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
}
.trip-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 0.15rem; }
.trip-name {
    color: #fff;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trip-dates { color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; }

.trip-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    display: flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.trip-card:hover .trip-actions { opacity: 1; }
.trip-actions .icon-btn {
    background: rgba(255, 255, 255, 0.85);
    opacity: 1;
}
.trip-actions .icon-btn:hover { background: #fff; }

@media (max-width: 768px) {
    .trip-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .trip-cover { height: 150px; }
    .trip-actions { opacity: 1; }
}

/* ============================================================
   ?꾩튂 愿€由?吏€??   ============================================================ */
.map-page { display: flex; flex-direction: column; height: 100%; }
.map-count { font-size: 0.85rem; color: var(--text-secondary); }

.map-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.map-search-bar select {
    padding: 0.45rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.83rem;
    color: var(--text-primary);
    outline: none;
}
.map-search-bar select option { background: var(--bg-dropdown); color: var(--text-primary); }
.map-search-bar .inline-input { flex: 1 1 180px; }

/* ?€?€ 蹂몃Ц 2???€?€ */
.map-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 520px;
}
.map-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}
.map-side-list {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    padding-right: 0.2rem;
}
.map-side-list::-webkit-scrollbar { width: 4px; }
.map-side-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }

.map-checked-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.map-side-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
    transition: all 0.25s ease;
}
.map-side-item:hover { background: var(--bg-card-hover); border-color: rgba(245, 166, 35, 0.25); }
.map-side-item.is-editing { border-color: rgba(245, 166, 35, 0.5); }
.map-side-item.is-checked { background: var(--bg-card-hover); }
.map-side-item.is-route { border-left: 3px solid var(--route-color, #0984e3); }

.map-item-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.map-item-name { font-size: 0.92rem; color: var(--text-primary); }
.map-item-region { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.2rem; }
.map-item-addr { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.1rem; word-break: break-all; }
.map-item-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.5rem; }
.map-item-actions .pill-btn { padding: 0.28rem 0.7rem; font-size: 0.74rem; }

.route-tag {
    font-size: 0.68rem;
    color: #fff;
    border-radius: 10px;
    padding: 0.08rem 0.5rem;
    white-space: nowrap;
}

/* ?€?€ 異붽?/?섏젙 ???€?€ */
.map-add-form {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    max-height: 46vh;
    overflow-y: auto;
}
.map-form-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}
.place-search-row { display: flex; gap: 0.4rem; margin: 0.7rem 0; }

.place-results {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.7rem;
}
.place-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    text-align: left;
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
}
.place-item:hover { background: var(--bg-card-hover); border-color: rgba(245, 166, 35, 0.3); }
.place-name { font-size: 0.85rem; color: var(--text-primary); }
.place-cat { font-size: 0.7rem; color: #f5a623; }
.place-addr { font-size: 0.73rem; color: var(--text-muted); }

/* ?€?€ 吏€???€?€ */
.map-body {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-empty);
    min-height: 420px;
}
#kakao-map { width: 100%; height: 100%; min-height: 420px; }

.map-overlay-search {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    right: 0.7rem;
    z-index: 5;
    max-width: 420px;
}
.map-overlay-search-row {
    display: flex;
    gap: 0.35rem;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 0.35rem;
    box-shadow: var(--shadow-dropdown);
}
.map-overlay-search .place-results {
    margin-top: 0.35rem;
    background: var(--bg-dropdown);
    border-radius: 14px;
    padding: 0.35rem;
    box-shadow: var(--shadow-dropdown);
}

/* ?€?€ 湲몄갼湲??⑤꼸 ?€?€ */
.route-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
}
.route-panel-scroll {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}
.route-arrow { color: var(--text-muted); flex-shrink: 0; }
.route-point {
    /* pointer 드래그(starHouseRouteDrag)용 — 터치에서 스크롤 대신 드래그가 되게 한다 */
    touch-action: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--stop-color, #0984e3);
    border-radius: 12px;
    padding: 0.35rem 0.6rem;
    cursor: grab;
}
.route-point.dragging { opacity: 0.45; }
.route-point.drag-over-before { box-shadow: -3px 0 0 #f5a623; }
.route-point.drag-over-after { box-shadow: 3px 0 0 #f5a623; }
.route-point-handle { color: var(--text-light); font-size: 0.8rem; }
.route-point-label { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.route-point-body { display: flex; flex-direction: column; min-width: 0; }
.route-point-name { font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; }
.route-point-eta { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.route-point-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0 0.1rem;
}
.route-point-clear:hover { color: #d97070; }

.route-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.route-result {
    font-size: 0.83rem;
    color: var(--text-primary);
    margin-right: auto;
}

/* ?€?€ 濡쒕뱶酉??€?€ */
/* 로드뷰 창 — JS(makeFloatingWindow)가 처음 뜬 자리를 left/top 으로 고정해 끌 수 있게 만든다.
   resize: both 로 오른쪽 아래 모서리를 늘릴 수 있고, 최소 크기는 로드뷰가 찌그러지지 않을 정도로 둔다. */
.roadview-panel-float {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    z-index: 1200;
    width: min(440px, 90vw);
    height: 360px;
    min-width: 300px;
    min-height: 260px;
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: var(--shadow-login);
    padding: 0.8rem 1rem 1rem;
    resize: both;
    overflow: auto;
}
.roadview-drag-handle { cursor: grab; user-select: none; }
.roadview-drag-handle:active { cursor: grabbing; }
.roadview-wrap { position: relative; flex: 1; min-height: 0; }
.roadview-canvas {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-empty);
}
.roadview-resize-hint {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-light);
    pointer-events: none;
}
.roadview-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.83rem;
    color: var(--text-muted);
}

/* 紐⑤컮????? 醫곸? ?붾㈃?먯꽌留??대떎 */
.mob-tabs { display: none; gap: 0.3rem; margin-bottom: 0.8rem; }

@media (max-width: 991px) {
    .mob-tabs { display: flex; }
    .map-layout { grid-template-columns: 1fr; }
    .map-layout.mob-list .map-body,
    .map-layout.mob-list .map-add-form { display: none; }
    .map-layout.mob-map .map-side { display: none; }
    .map-layout.mob-form .map-body,
    .map-layout.mob-form .map-side-list { display: none; }
    .map-add-form { max-height: none; }
    /* 좁은 화면에서는 끌기/리사이즈가 오히려 불편하니 고정 배치로 되돌린다. */
    .roadview-panel-float {
        right: 0.8rem !important;
        left: 0.8rem !important;
        top: auto !important;
        bottom: 4.5rem !important;
        width: auto !important;
        height: 340px !important;
        resize: none;
    }
    .roadview-resize-hint { display: none; }
}

/* ============================================================
   ?ы뻾 ?곸꽭 ??癒몃━, ?€?꾨씪?? ?묒듅沅? 鍮꾩슜 由ы룷??   ============================================================ */
.trip-detail { max-width: 860px; margin: 0 auto; }

.trip-hero {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #2b2738;
    padding: 2.2rem 1.4rem 1.6rem;
    margin-bottom: 1.4rem;
    text-align: center;
}
.trip-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.35));
}
.trip-hero-content { position: relative; z-index: 1; }
.trip-hero-title {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0.6rem 0 0.2rem;
}
.trip-hero-dates { color: rgba(255, 255, 255, 0.7); font-size: 0.83rem; margin-bottom: 1.1rem; }
.trip-hero-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.trip-hero-actions .pill-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.trip-hero-actions .pill-btn:hover { background: rgba(255, 255, 255, 0.24); }

/* ?€?€ ?쇱감 ???€?€ */
.day-selector {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}
.day-tab {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.25s ease;
}
.day-tab:hover { background: rgba(255, 255, 255, 0.22); }
.day-tab.active {
    background: linear-gradient(135deg, #f5a623, #f7c948);
    border-color: transparent;
    color: #2b2738;
}
.day-label { font-size: 0.8rem; font-weight: 500; }
.day-date { font-size: 0.66rem; opacity: 0.85; }

/* ?€?€ 寃쎈줈 吏€???€?€ */
.trip-map-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 0.9rem;
    margin-bottom: 1.4rem;
}

/* 여행 목록의 연월 소제목 */
.trip-month-head {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin: 1rem 0 0.6rem;
    border-left: 3px solid rgba(245, 166, 35, 0.55);
    padding-left: 0.6rem;
}

/* 전날 숙소에서 출발 안내 */
.trip-start-from {
    background: var(--bg-card);
    border: 1px dashed var(--border-medium);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

/* ── 전체 사진 모아보기 — 일차별 → 장소별 그리드 ── */
.trip-photos-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.4rem;
}
.tp-day-head {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1rem 0 0.2rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-medium);
}
.tp-day-head:first-of-type { margin-top: 0.2rem; }
.tp-day-date { font-size: 0.76rem; font-weight: 400; color: var(--text-muted); margin-left: 0.5rem; }
.tp-item-head { font-size: 0.82rem; color: var(--text-secondary); margin: 0.6rem 0 0.35rem; }
.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.45rem;
}
.tp-thumb {
    aspect-ratio: 1;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-empty);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-thumb:hover { transform: scale(1.04); box-shadow: var(--shadow-card); }

/* ── 비밀번호 입력칸 안 오른쪽에 겹쳐 놓는 👁️ 버튼 (업무 화면 공용) ── */
.pw-wrap {
    position: relative;
    display: block;
}
.pw-wrap .inline-input {
    width: 100%;
    padding-right: 2.1rem; /* 눈 버튼 자리 — 글자가 버튼 밑으로 들어가지 않게 */
}
.pw-eye {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.1rem 0.2rem;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
}
.pw-eye:hover { opacity: 1; }
.pw-eye:disabled { opacity: 0.4; pointer-events: none; }

/* 자체 confirm 모달(js/confirm.js) — 삭제 확인 등 */
.confirm-box .confirm-msg {
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    white-space: pre-line;
}

/* 달력 수정 모달의 연결된 여행 요약 칩 */
.trip-summary-chip {
    font-size: 0.74rem;
    color: var(--text-secondary);
    background: var(--bg-empty);
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}
.trip-map-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.trip-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.trip-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.trip-route-map { width: 100%; height: 450px; border-radius: 12px; overflow: hidden; }

/* ?€?€ ?€?꾨씪???€?€ */
.trip-body { padding-bottom: 2rem; }
.cost-badge {
    background: rgba(245, 166, 35, 0.16);
    color: #d98e1a;
    border-radius: 12px;
    padding: 0.1rem 0.6rem;
    font-size: 0.74rem;
    white-space: nowrap;
}
[data-theme="dark"] .cost-badge { color: #f7c948; }

.trip-timeline { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 0.7rem; }
.tl-time {
    width: 62px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0.35rem;
}
.tl-start { font-size: 0.83rem; color: var(--text-primary); }
.tl-duration { font-size: 0.68rem; color: var(--text-muted); }

.tl-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tl-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    font-size: 1rem;
}
.tl-line { flex: 1; width: 2px; background: var(--border-medium); margin: 0.2rem 0; }
.tl-content { flex: 1; min-width: 0; padding-bottom: 1rem; }

/* ?€?€ ?쇱젙 移대뱶 ?€?€ */
.plan-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.plan-card.has-cover { min-height: 150px; }
.plan-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}
.plan-card-inner { position: relative; z-index: 1; padding: 0.85rem 1rem; }
.plan-card.has-cover .plan-card-inner { color: #fff; }
.plan-card.has-cover .plan-title { color: #fff; }
.plan-card.has-cover .plan-desc { color: rgba(255, 255, 255, 0.85); }
.plan-card.has-cover .icon-btn { color: #fff; }

.plan-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.plan-title { font-size: 0.98rem; color: var(--text-primary); }
.plan-desc {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 0.4rem;
}
.plan-gallery { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; }
.plan-photo {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

/* ?€?€ ?묒듅沅??€?€ */
.boarding-pass {
    background: linear-gradient(135deg, #34406b, #4a5891);
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
}
.pass-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    background: rgba(0, 0, 0, 0.18);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}
.pass-cost {
    background: rgba(255, 255, 255, 0.9);
    color: #34406b;
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
}
.pass-body { padding: 0.9rem 1rem; }
.pass-flight-no { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.5rem; }
.pass-route { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pass-side { text-align: center; min-width: 0; }
.pass-city {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.pass-time { font-size: 0.9rem; margin-top: 0.15rem; }
.pass-middle { text-align: center; color: rgba(255, 255, 255, 0.7); }
.pass-duration { font-size: 0.7rem; }
.pass-line { font-size: 0.8rem; letter-spacing: 0.1em; }
.pass-direct { font-size: 0.62rem; opacity: 0.7; }
.pass-terminal {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.72rem;
    opacity: 0.8;
}
.pass-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.14);
}
.pass-foot .icon-btn { color: #fff; }

/* ?€?€ ?몃씪???ъ쭊 愿€由??€?€ */
.inline-photo-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    margin-top: 0.5rem;
}
.inline-photo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.schd-photo-thumb.is-main { outline: 2px solid #f5a623; outline-offset: -2px; }
.thumb-main-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.7rem;
    color: #f5a623;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.thumb-main-btn {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
}
.thumb-main-btn:hover { background: rgba(245, 166, 35, 0.9); }

/* ?€?€ ?쇱젙 ?좏삎 ?좏깮 ?€?€ */
.type-selector {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    margin-bottom: 1rem;
}
.btn-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    min-width: 68px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0.55rem 0.6rem;
    font-family: inherit;
    color: var(--text-secondary);
    transition: all 0.25s ease;
}
.btn-type:hover { background: var(--bg-card-hover); }
.btn-type.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(245, 200, 100, 0.12));
    border-color: rgba(245, 166, 35, 0.4);
    color: var(--text-primary);
}
.type-icon { font-size: 1.2rem; }
.type-name { font-size: 0.72rem; }

.addr-row { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.icon-input { text-align: center; }
.loca-search-panel {
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.4rem;
}
.coord-ok { font-size: 0.74rem; color: #6cba7f; margin-top: 0.3rem; display: inline-block; }
.coord-fail { font-size: 0.74rem; color: #e07a7a; margin-top: 0.3rem; display: inline-block; }

/* ?€?€ 鍮꾩슜 由ы룷???€?€ */
.cost-total {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.1rem;
    margin-bottom: 0.5rem;
}
.cost-total-label { display: block; font-size: 0.76rem; color: var(--text-muted); }
.cost-total-value {
    display: block;
    font-size: 1.7rem;
    font-weight: 400;
    color: #f5a623;
    margin-top: 0.2rem;
}
.cost-row { margin-bottom: 0.7rem; }
.cost-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.cost-bar {
    height: 7px;
    border-radius: 7px;
    background: var(--bg-empty);
    overflow: hidden;
}
.cost-bar-fill { height: 100%; border-radius: 7px; }

@media (max-width: 768px) {
    .trip-hero { padding: 1.6rem 1rem 1.2rem; }
    .trip-hero-title { font-size: 1.3rem; }
    .tl-time { width: 50px; }
    .pass-city { font-size: 1.15rem; max-width: 80px; }
    .trip-route-map { height: 340px; }
}

/* ============================================================
   ?낅Т紐⑤뱶 怨듯넻 ???? 諭껋?, ?듦퀎
   ============================================================ */
.work-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-card);
}
.work-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
}
.work-table th {
    text-align: left;
    font-weight: 400;
    color: var(--text-muted);
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-empty);
    position: sticky;
    top: 0;
}
.work-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-secondary);
}
.work-table tbody tr:last-child td { border-bottom: none; }
.work-table tbody tr:hover td { background: var(--bg-card-hover); }
.work-table .num { text-align: right; }

.work-badge {
    font-size: 0.7rem;
    background: rgba(245, 166, 35, 0.14);
    color: #d98e1a;
    border-radius: 12px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}
[data-theme="dark"] .work-badge { color: #f7c948; }

/* ?€?€ ?ъ슜 ?듦퀎 ?€?€ */
.usage-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1.4rem;
    margin: 1.2rem 0;
}
.usage-total-num { font-size: 2rem; color: var(--text-primary); }
.usage-total-num .unit { font-size: 0.95rem; color: var(--text-muted); margin-left: 0.2rem; }
.usage-total-label { font-size: 0.8rem; color: var(--text-muted); }

.usage-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.usage-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1rem 1.2rem;
}

.usage-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.usage-bar-label {
    width: 96px;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.usage-bar-track {
    flex: 1;
    height: 10px;
    background: var(--bg-empty);
    border-radius: 6px;
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f5a623, #f7c948);
    transition: width 0.3s ease;
}
.usage-bar-count {
    width: 40px;
    text-align: right;
    font-size: 0.82rem;
    color: #f5a623;
}

/* ?€?€ ?묒냽 ?뺣낫 移대뱶 (DB 鍮꾧탳 / ?곗씠???꾩넚 ?? ?€?€ */
.agent-dl {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.agent-dl .pill-btn { text-decoration: none; }

.conn-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.conn-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 1rem 1.1rem;
}
.conn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}
.conn-card-head .pill-btn { padding: 0.28rem 0.7rem; font-size: 0.74rem; }

.conn-mode { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.conn-dbtype { margin-bottom: 0.8rem; width: fit-content; }

.check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ?€?€ ?쒕쾭 ?꾨줈???€?€ */
.profile-box {
    background: var(--bg-empty);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.7rem;
    margin-bottom: 0.8rem;
}
.profile-list { max-height: 170px; overflow-y: auto; margin-bottom: 0.5rem; }
.profile-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.35rem;
    border-radius: 8px;
}
/* 반투명 흰색은 라이트 모달 위에서 티가 안 난다 — 포인트색으로 또렷하게 */
.profile-item {
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-item:hover {
    background: rgba(245, 166, 35, 0.14);
    border-left-color: #f5a623;
}
.profile-apply {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.84rem;
    color: var(--text-primary);
    padding: 0.15rem 0;
}

/* ?€?€ 鍮꾧탳 寃곌낵 ?곹깭 ?€?€ */
.status-src { color: #5b8ef5; }
.status-tgt { color: #4cae72; }
.status-diff { color: #e07a7a; }
.status-same { color: var(--text-muted); }

/* ?€?€ ?뺤쓽 鍮꾧탳 ?€?€ */
.diff-modal {
    max-width: 1100px;
    width: 94vw;
    display: flex;
    flex-direction: column;
}
.diff-cols { display: flex; gap: 0.6rem; min-height: 0; }
.diff-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}
.diff-col-head {
    background: var(--bg-empty);
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.diff-pane {
    flex: 1;
    overflow: auto;
    max-height: 58vh;
    background: #16162a;
    color: #d8d8e0;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.76rem;
}
.diff-line { padding: 0.05rem 0.7rem; white-space: pre; }
.diff-line.diff-src { background: rgba(224, 122, 122, 0.3); }
.diff-line.diff-tgt { background: rgba(76, 174, 114, 0.3); }

/* ?€?€ ?곗씠???꾩넚 ?€?€ */
.full-width { width: 100%; justify-content: center; }

.table-picker {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-empty);
}
.table-picker-row {
    display: flex;
    width: 100%;
    padding: 0.35rem 0.7rem;
    border-bottom: 1px solid var(--border-medium);
    white-space: normal;
    word-break: break-all;
}
.table-picker-row:last-child { border-bottom: none; }
.table-picker-row:hover { background: var(--bg-card-hover); }

.transfer-log {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    max-height: 300px;
    overflow-y: auto;
}
.transfer-log-line {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.15rem 0;
    word-break: break-all;
}

/* ?€?€ ?꾨줈?쒖? / ?⑥닔 愿€由??€?€ */
.proc-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 1rem;
    align-items: start;
}
.proc-side { display: flex; flex-direction: column; gap: 1rem; }
.proc-main { min-width: 0; }

.proc-list-card { display: flex; flex-direction: column; gap: 0.5rem; }
.proc-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.proc-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.35rem 0.55rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-secondary);
    word-break: break-all;
}
.proc-item:hover { background: var(--bg-card-hover); }
.proc-item.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 200, 100, 0.1));
    border-color: rgba(245, 166, 35, 0.35);
    color: var(--text-primary);
}
.proc-kind {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
}
.proc-kind.proc { background: #5b8ef5; }
.proc-kind.func { background: #8d8fa3; }

/* ?€?€ SQL ?몄쭛湲??€?€ */
.code-editor {
    width: 100%;
    height: calc(100vh - 340px);
    min-height: 380px;
    background: #16162a;
    color: #d8d8e0;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.84rem;
    line-height: 1.55;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    resize: vertical;
    white-space: pre;
    overflow: auto;
    tab-size: 4;
    outline: none;
}
.code-editor:focus { border-color: rgba(245, 166, 35, 0.5); }

@media (max-width: 991px) {
    .proc-layout { grid-template-columns: 1fr; }
    .code-editor { height: 420px; }
}

/* ============================================================
   ???€?쒕낫??   ============================================================ */
.home-greet { margin-bottom: 1.2rem; }
.home-hello { font-size: 0.83rem; color: var(--text-muted); letter-spacing: 0.05em; }
.home-user {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-top: 0.1rem;
}

.home-top,
.home-mid,
.home-bottom {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.home-top { grid-template-columns: minmax(260px, 1fr) 2fr; }
.home-mid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.home-bottom { grid-template-columns: 2fr minmax(260px, 1fr); }

.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(120, 110, 220, 0.16));
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 1.4rem 1.5rem;
}
.home-hero-emoji { font-size: 2rem; }
.home-hero-num {
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}
.home-hero-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.8rem; }

.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
}
.home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    background: var(--bg-empty);
    border-radius: 14px;
    padding: 0.8rem 0.5rem;
}
.home-stat-icon { font-size: 1.2rem; }
.home-stat-num { font-size: 1.3rem; color: var(--text-primary); }
.home-stat-label { font-size: 0.72rem; color: var(--text-muted); }

/* ?붿씪蹂?留됰? */
.home-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem;
    height: 140px;
    padding-top: 0.5rem;
}
.home-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; }
.home-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.home-bar-fill {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #f7c948, #f5a623);
    transition: height 0.3s ease;
}
.home-bar-label { font-size: 0.72rem; color: var(--text-muted); }

.home-budget { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.home-budget-num { font-size: 1.6rem; color: var(--text-primary); }
.home-budget .pill-btn { margin-top: auto; text-decoration: none; }

.home-progress { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.home-donut {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-donut-hole {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-donut-pct { font-size: 1.4rem; color: var(--text-primary); }
.home-donut-pct .unit { font-size: 0.8rem; color: var(--text-muted); }
.home-progress-legend { display: flex; gap: 1.2rem; font-size: 0.8rem; color: var(--text-secondary); }

/* 理쒓렐 ?쇱젙 */
.home-schd-list { display: flex; flex-direction: column; gap: 0.4rem; }
.home-schd {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-empty);
    border-radius: 12px;
}
.home-schd:hover { background: var(--bg-card-hover); }
.home-schd.is-today { outline: 1px solid rgba(245, 166, 35, 0.4); }
.home-schd.is-past { opacity: 0.55; }
.home-schd-bar { width: 4px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.home-schd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-schd-title { font-size: 0.88rem; color: var(--text-primary); }
.home-schd-dday {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.home-schd-dday.dday-today { color: #f5a623; }
.home-schd-dday.dday-past { color: var(--text-light); }

/* ?€?€ 怨꾩젙 / ?섍꼍?ㅼ젙 ?€?€ */
.account-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
}

.settings-card { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; }
.settings-card .pill-btn { align-self: flex-start; text-decoration: none; }
.settings-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.settings-row .row-title { display: block; }

@media (max-width: 991px) {
    .home-top, .home-bottom { grid-template-columns: 1fr; }
}