/* =====================================================================
   app.css  —  니트로그 전체 스타일
   아이보리 베이스 / 블랙 텍스트 / 파스텔 포인트 컬러
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ── CSS 변수 ─────────────────────────────────────────── */
:root {
    /* 베이스 */
    --ivory:          #ffffff;
    --ivory-dark:     #f5f5f5;
    --ivory-mid:      #ebebeb;
    --white:          #ffffff;

    /* 블랙 & 텍스트 */
    --black:          #111111;
    --sidebar-bg:     var(--theme-pale);
    --text-dark:      #111111;
    --text-mid:       #5a5a5a;
    --text-light:     #9a9a9a;
    --border:         #e8e8e8;

    /* 파스텔 포인트 */
    --mint:           #b8e0c8;
    --mint-light:     #dff2e8;
    --mint-pale:      #f0faf4;
    --pink:           #f2b8c6;
    --pink-light:     #fad5de;
    --pink-pale:      #fef0f3;
    --yellow:         #f7e4a0;
    --yellow-light:   #faf0c8;
    --yellow-pale:    #fdfaee;
    --lavender:       #c8b8e8;
    --lavender-light: #e2d8f5;
    --lavender-pale:  #f4f0fc;
    --sky:            #b8d8f0;
    --sky-pale:       #edf5fc;

    --shadow:         rgba(0, 0, 0, 0.07);
    --shadow-md:      rgba(0, 0, 0, 0.11);
    --radius:         14px;
    --radius-sm:      9px;

    /* ── 테마 변수 (JS로 교체) ── */
    --theme-pale:     #f5f5f5;   /* 사이드바 배경 */
    --theme-light:    #e0e0e0;   /* 활성 메뉴 배경 */
    --theme-mid:      #cccccc;   /* 구분선/테두리 */
    --theme-muted:    #888888;   /* 푸터 텍스트 */
    --theme-btn:      #f5f5f5;   /* 버튼 배경 */
    --theme-active:   #333333;   /* 활성 텍스트/아이콘 */
}

/* ── 테마 정의 ───────────────────────────────────────────── */
[data-theme="green"]  { --theme-pale:#f0f9ec; --theme-light:#c8e6be; --theme-mid:#d4eccc; --theme-muted:#a8c8a0; --theme-btn:#f0f9ec; --theme-active:#3a7a4a; }
[data-theme="yellow"] { --theme-pale:#fffde4; --theme-light:#fff3b5; --theme-mid:#e8d870; --theme-muted:#a08828; --theme-btn:#fffde4; --theme-active:#6a4e00; }
[data-theme="sky"]    { --theme-pale:#eaf7ff; --theme-light:#d3f4ff; --theme-mid:#a8dff5; --theme-muted:#6aaac8; --theme-btn:#eaf7ff; --theme-active:#1a6a8a; }
[data-theme="pink"]   { --theme-pale:#fff1f1; --theme-light:#ffe7e7; --theme-mid:#f5c0c0; --theme-muted:#c88888; --theme-btn:#fff1f1; --theme-active:#8a3a3a; }
[data-theme="purple"] { --theme-pale:#f3efff; --theme-light:#e9e1ff; --theme-mid:#c8b8e8; --theme-muted:#8878b8; --theme-btn:#f3efff; --theme-active:#5a3a8a; }
[data-theme="mono"]   { --theme-pale:#f5f5f5; --theme-light:#e0e0e0; --theme-mid:#cccccc; --theme-muted:#888888; --theme-btn:#f5f5f5; --theme-active:#333333; }


/* ── 다크모드 ────────────────────────────────────────────── */
[data-dark="true"] {
    --ivory:      #111111;   /* 페이지 배경 */
    --ivory-dark: #1c1c1c;   /* 살짝 어두운 배경 */
    --ivory-mid:  #2c2c2c;   /* 호버/구분 */
    --white:      #232323;   /* 카드 배경 — 배경보다 확실히 밝게 */
    --black:      #f0f0f0;   /* 주 텍스트 */
    --text-dark:  #f0f0f0;
    --text-mid:   #aaaaaa;
    --text-light: #666666;
    --border:     #343434;
    --shadow:     rgba(0,0,0,0.5);
    --shadow-md:  rgba(0,0,0,0.7);
    /* 테마 컬러도 흑백 계열로 강제 — 어두운 배경에서 충분한 명도 확보 (배지/포인트 색이 묻히는 문제 방지) */
    --theme-pale:   #2c2c2c;
    --theme-light:  #3a3a3a;
    --theme-mid:    #4a4a4a;
    --theme-muted:  #888888;
    --theme-btn:    #2c2c2c;
    --theme-active: #e8e8e8;
}

/* 다크모드에서는 테마 무관하게 흑백 팔레트로 통일 (아래 버튼 오버라이드 섹션에서 처리) */

/* ── 리셋 & 기본 ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
    background: var(--ivory);
    color: var(--text-dark);
    min-height: 100vh; height: 100dvh; min-height: 100dvh;
}

/* ── 레이아웃 ────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* ── 사이드바 ────────────────────────────────────────── */
.sidebar {
    width: 220px;
    background: var(--theme-pale);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* 사이드바 자체는 스크롤 안 됨 */
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--theme-mid);
}

.sidebar-logo {
    width: 100px;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.sidebar-logo:hover { opacity: 1; }

/* 다크모드: invert로 밝게 */
[data-dark="true"] .sidebar-logo {
    opacity: 0.9;
}

.nav-list {
    list-style: none;
    padding: 16px 0;
    flex: 1;
    overflow-y: auto; /* 메뉴만 스크롤 */
    min-height: 0;    /* flex 자식의 overflow 스크롤 작동 필수 */
}

.nav-list li { margin: 4px 12px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: var(--theme-active);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.18s ease;
}

.nav-item:hover {
    background: var(--theme-light);
    color: var(--theme-active);
}

.nav-item.active {
    background: var(--theme-light);
    color: var(--theme-active);
    font-weight: 600;
}

.nav-icon { display: flex; align-items: center; justify-content: center; width: 32px; flex-shrink: 0; }
.nav-icon img { display: block; }


/* ── 메인 콘텐츠 ─────────────────────────────────────── */
.main-content {
    flex: 1;
    padding: 32px 36px;
    max-width: 1100px;
    min-width: 0;
    overflow-x: hidden; /* 가로 스크롤 원천 차단 */
}

/* ── 페이지 헤더 ─────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--black);
    outline: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title img {
    vertical-align: middle;
    position: relative;
    top: 2px;
}
.page-title img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.page-subtitle {
    color: var(--text-mid);
    font-size: 0.88rem;
    margin-top: 4px;
}

/* ── 버튼 ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.18s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--theme-pale);
    color: var(--theme-active);
    border: 1px solid var(--theme-mid);
}
.btn-primary:hover { opacity: 0.88; }

.btn-secondary {
    background: var(--ivory);
    color: var(--text-mid);
    border: 1px solid var(--border);
}
.btn-secondary:hover { opacity: 0.88; }

.btn-sage {
    background: var(--theme-pale);
    color: var(--theme-active);
    border: 1px solid var(--theme-mid);
}
.btn-sage:hover { opacity: 0.88; }

/* 일시중단/재개 버튼 — 라이트: 연한 배경, 다크: btn-secondary 패턴 */
.btn-pause {
    background: var(--ivory);
    color: var(--text-mid);
    border: 1px solid var(--border);
}
.btn-pause:hover { opacity: 0.88; }

.btn-mint {
    background: var(--theme-light);
    color: var(--black);
}
.btn-mint:hover { opacity: 0.88; }

.btn-ghost {
    background: transparent;
    color: var(--text-mid);
    border: 1px solid var(--border);
}
.btn-ghost:hover { opacity: 0.88; }

.btn-danger {
    background: transparent;
    color: #c0392b;
    border: 1px solid #f0c0c0;
}
.btn-danger:hover { opacity: 0.88; }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; white-space: nowrap; }

/* 사진 슬롯 */
.photo-slot-thumb { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); border:2px solid var(--border); }
.photo-slot-active { border-color: var(--theme-active); }

/* ── 카드 ────────────────────────────────────────────── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    /* 카드 내용이 카드 밖으로 튀어나오지 않도록 */
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.card:hover {
    box-shadow: 0 6px 20px var(--shadow-md);
    transform: translateY(-2px);
}

.card-title {
    font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── 그리드 ──────────────────────────────────────────── */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* grid 자식이 grid 폭을 초과하지 않도록 */
.grid-3 > * {
    min-width: 0;
}

/* ── 필터+정렬 바 ─────────────────────────────────────── */
/* 모바일: 세로 쌓기 */
.filter-sort-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: auto;
}

.filter-sort-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* 구분선: 모바일에서 숨김 */
.filter-sort-divider {
    display: none;
}

/* 태블릿 이상: 한 줄로 */
@media (min-width: 768px) {
    .filter-sort-bar {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
    }

    .filter-sort-group {
        overflow-x: visible;
        padding-bottom: 0;
        flex-shrink: 0;
    }

    .filter-sort-divider {
        display: block;
        width: 1px;
        height: 18px;
        background: var(--border);
        flex-shrink: 0;
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

/* ── 폼 ──────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-mid);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--ivory);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.18s;
    outline: none;
}

.form-control:focus {
    border-color: var(--mint);
    background: var(--ivory);
    box-shadow: 0 0 0 3px rgba(184, 224, 200, 0.3);
}

/* 체크리스트 수정 input — 언더라인 스타일 */
.checklist-input {
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    padding: 2px 4px;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--text-dark);
    width: 100%;
    line-height: 1.4;
}
.checklist-input:focus {
    border-bottom-color: var(--theme-active);
    box-shadow: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-row > * {
    min-width: 0;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── 모달 ────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal {
    background: var(--white);
    border-radius: var(--radius);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-title {
    font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--black);
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ── 배지 ────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-progress { background: var(--yellow-light); color: #8a6a08; }
.badge-done     { background: var(--mint-light);   color: #267848; }
.badge-wish     { background: var(--lavender-light); color: #4e3290; }
.badge-cable    { background: #dff0fb; color: #1a6a8a; }

/* ── 색상 원 ─────────────────────────────────────────── */
.color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── 사진 썸네일 ─────────────────────────────────────── */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.photo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
}

.photo-thumb:hover { opacity: 0.85; }

/* ── 빈 상태 ─────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.empty-state .empty-icon { margin-bottom: 12px; display:flex; justify-content:center; }
.empty-state p { font-size: 0.95rem; }

/* ── 파스텔 섹션 (선택적 사용) ─────────────────────── */
.section-mint     { background: var(--mint-pale);     border-radius: var(--radius); padding: 20px; }
.section-pink     { background: var(--pink-pale);     border-radius: var(--radius); padding: 20px; }
.section-yellow   { background: var(--yellow-pale);   border-radius: var(--radius); padding: 20px; }
.section-lavender { background: var(--lavender-pale); border-radius: var(--radius); padding: 20px; }

/* ── 유틸 ────────────────────────────────────────────── */
.text-right { text-align: right; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* Blazor 기본 top-row 숨김 */
.top-row { display: none !important; }

/* ── 프로젝트 상세 그리드 ────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* ── 홈 요약 카드 그리드 ─────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (min-width: 641px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }
}

/* ── 하단 탭바 (모바일 전용) ─────────────────────────── */
.bottom-nav {
    display: none;
}

/* ── 반응형 ──────────────────────────────────────────── */

/* 태블릿 (641px ~ 900px): 사이드바를 좁게 */
@media (max-width: 900px) and (min-width: 641px) {
    .sidebar { width: 72px; }
    .brand-name, .nav-label, .sidebar-footer, .theme-picker-label { display: none; }
    .theme-picker { padding: 12px 8px; }
    .theme-dots { justify-content: center; }
    .sidebar-brand { justify-content: center; padding: 16px 0; }
    .sidebar-logo { width: 70px; }
    .nav-list li { margin: 2px 8px; }
    .nav-item { justify-content: center; padding: 12px 8px; }
    .nav-icon { width: auto; }
    .main-content { padding: 24px 20px; }
}

/* 태블릿+PC (641px 이상) — 아이패드 10 가로(1180px) 포함 */
@media (min-width: 641px) {
    /* 태블릿: 정렬을 분류 행에 합치기 */
    .schedule-sort-inline { display: flex !important; }
    .schedule-sort-row { display: none !important; }

    /* 꺾은선 그래프: 아이패드에서 더 높게 */
    .stats-line-chart {
        height: clamp(300px, 36vw, 480px) !important;
    }

    /* 스와치 2행: 구분선 표시 + 바늘 콤보박스 너비 확보 */
    .swatch-filter-divider { display: block !important; }

    /* 설정 카드 너비 제한 해제 */
    .settings-wrapper {
        max-width: 100% !important;
    }

    /* select, date만 높이 통일 — text/textarea/file은 제외 */
    select.form-control,
    input[type="date"].form-control,
    input[type="date"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 12px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
        line-height: 40px !important;
        display: block !important;
        overflow: hidden;
    }

    /* 체크리스트 수정 input은 높이 강제 예외 */
    .checklist-input {
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        line-height: 1.4 !important;
        padding: 2px 4px !important;
        font-size: 0.78rem !important;
        border: none !important;
        border-bottom: 1.5px solid var(--border) !important;
        border-radius: 0 !important;
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        color: var(--text-dark);
        width: 100%;
    }
    .checklist-input:focus {
        border-bottom-color: var(--theme-active) !important;
        box-shadow: none !important;
    }

    /* 스와치 바늘 콤보박스: select.form-control 40px 규칙보다 뒤에 위치해 버튼 높이와 맞춤 */
    select.form-control.swatch-needle-select {
        min-width: 120px !important;
        width: auto !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        line-height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.82rem !important;
    }

    /* text input은 기본 스타일 유지 (height 강제 안 함) */
    input[type="text"].form-control,
    input[type="number"].form-control,
    input[type="email"].form-control,
    input.form-control:not([type="date"]):not([type="file"]) {
        height: auto;
        min-height: unset;
        padding: 10px 14px;
        display: block;
        line-height: 1.4;
    }

    /* file input 원래대로 */
    input[type="file"].form-control,
    input[type="file"] {
        height: auto !important;
        min-height: unset !important;
        line-height: normal !important;
        padding: 8px 12px !important;
    }

    /* 날짜 input 너비 강제 */
    input[type="date"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: center;
    }
    /* 날짜 두 칸 컨테이너: 아이패드에서도 확실히 나란히 */
    .date-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
    }
    .date-row .form-group {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .date-row input[type="date"].form-control {
        border: 1.5px solid var(--border) !important;
        background: var(--ivory) !important;
        width: 100% !important;
    }

    .form-row .form-group {
        min-width: 0;
        overflow: visible;
    }
    .form-row input[type="date"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .form-row {
        gap: 16px;
    }
}

/* 모바일 (640px 이하): 사이드바 숨기고 하단 탭바 표시 */
@media (max-width: 640px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar { display: none; }

    .main-content {
        padding: 16px 14px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 하단 탭바 높이 확보 */
        max-width: 100%;
    }

    .page-title { font-size: 1.4rem; }
    .page-header {
        position: sticky;
        top: env(safe-area-inset-top, 0px);
        z-index: 50;
        background: var(--white);
        margin-bottom: 16px;
        padding-top: 8px;
        padding-bottom: 4px;
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .form-row,
    .form-row-3 { grid-template-columns: 1fr; }

    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .detail-grid .card { grid-column: span 1 !important; }

    /* 날짜 input이 화면을 벗어나지 않도록 */
    input[type="date"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px; /* iOS에서 줌 방지 */
        -webkit-appearance: none;
        appearance: none;
    }

    /* iOS Safari: 빈 날짜 input placeholder - wrapper DOM 없이 CSS로 처리 */
    input[type="date"].date-empty {
        color: transparent;
        -webkit-text-fill-color: transparent;
        position: relative;
    }
    input[type="date"].date-empty::-webkit-date-and-time-value {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    input[type="date"].date-empty::-webkit-datetime-edit {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    /* placeholder 텍스트: 부모 relative + 가상요소로 */
    input[type="date"].date-empty {
        background-image: none;
    }
    /* data-placeholder 속성 이용 */
    input[type="date"][data-placeholder]::before {
        content: attr(data-placeholder);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #aaa;
        font-size: 16px;
        pointer-events: none;
        white-space: nowrap;
    }

    /* iOS 날짜 input - 빈 상태도 값 있을때와 동일한 높이 유지 */
    input[type="date"] {
        min-height: 44px;
    }


    /* form-control 전체도 넘치지 않도록 */
    .form-control {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 모든 input/textarea 에서 iOS 줌 방지 (16px 미만이면 자동 확대) */
    input:not(.checklist-input), textarea {
        font-size: 16px !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .checklist-input {
        font-size: 16px !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* select는 네이티브 피커라 줌 없음 — 작게 유지 */
    select {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 체크리스트 inline input/button은 크기 억제 */
    input[type='checkbox'] {
        font-size: unset !important;
        width: 14px !important;
        height: 14px !important;
    }



/* 삭제 확인 모달은 작게 유지 (전체화면 X) — 일반 modal-backdrop보다 먼저 선언 */
    .modal-backdrop.modal-confirm {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-height: unset !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        background: rgba(0,0,0,0.45) !important;
    }

    .modal-backdrop.modal-confirm .modal {
        border-radius: 16px !important;
        min-height: unset !important;
        max-height: unset !important;
        max-width: 320px !important;
        width: 100% !important;
        padding: 24px 20px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
    }

    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: flex-start;
        padding: 0;
        overflow-y: auto;
    }

    .modal {
        padding: 20px 16px;
        max-height: none;
        border-radius: 0;
        min-height: 100%;
        box-shadow: none;
        overflow-y: visible;
    }

    /* 추가/수정 팝업은 모바일에서도 내용에 맞게 */
    .modal.modal-sheet {
        max-height: 90vh !important;
        min-height: unset !important;
        height: auto !important;
        border-radius: var(--radius) !important;
        box-shadow: var(--shadow-lg) !important;
        margin: auto !important;
        overflow-y: auto !important;
    }

    /* 스와치 바늘 콤보박스: 모바일에서 버튼과 높이 맞춤 + auto margin 해제 */
    .swatch-needle-select {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        line-height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.8rem !important;
        box-sizing: border-box !important;
    }
    /* 스와치 2행: 모바일에서도 한 줄 유지 + 구분선 표시 */
    .swatch-filter-bar {
        flex-direction: row !important;
        align-items: center;
        overflow-x: auto;
    }
    .swatch-filter-bar .filter-sort-divider {
        display: block !important;
    }

    /* 하단 탭바 활성화 */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--theme-pale);
        border-top: 1px solid var(--theme-mid);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 18px 4px;
        text-decoration: none;
        color: var(--text-light);
        font-size: 0.65rem;
        gap: 5px;
        transition: color 0.1s;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        outline: none;
    }

    /* 아이콘/라벨이 클릭 타겟이 되지 않도록 — 항상 탭 전체(.bottom-nav-item)가 클릭됨 */
    .bottom-nav-item * {
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item.active {
        color: var(--theme-active);
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:active {
        color: var(--theme-active);
    }

    .bottom-nav-icon { font-size: 1.35rem; line-height: 1; }
    .bottom-nav-label { font-weight: 500; line-height: 1; }

    /* 캘린더 모바일: 세로 레이아웃 */
    .calendar-mobile-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* 메인 캘린더 영역: 항상 전체 너비 */
    .calendar-mobile-layout > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    /* 달력 그리드 컨테이너도 전체 너비 */
    .calendar-mobile-layout > div:first-child > div[style*="border:1px solid"] {
        width: 100%;
    }

    .calendar-mobile-layout .calendar-sidebar-panel {
        width: 100% !important;
        flex-shrink: unset !important;
    }

    /* 문어발 리스트형: 모바일에서 정보/버튼 2행 */
    .project-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .project-list-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        border-top: 1px solid var(--border);
        padding-top: 10px;
        flex-shrink: unset;
    }
}



/* ── 문어발 리스트형 아이템 ──────────────────────────────── */
.project-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

.project-list-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── 사이드바 하단 통계 ──────────────────────────────────── */
.sidebar-stats {
    padding: 14px 20px 10px;
    border-top: 1px solid var(--theme-mid);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--theme-muted);
}
.sidebar-stat-row img { display: inline; vertical-align: middle; }

.sidebar-stat-row strong {
    color: var(--theme-active);
    font-weight: 700;
}

.sidebar-dark-toggle {
    margin-top: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    user-select: none;
}

.sidebar-dark-toggle:hover {
    background: var(--theme-light);
}

/* ── 테마 색상 선택기 ────────────────────────────────────── */
.theme-picker {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--theme-mid);
    margin-top: auto;
}

.theme-picker-label {
    font-size: 0.72rem;
    color: var(--theme-muted);
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.theme-dots {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
}

.theme-dot:hover {
    transform: scale(1.2);
    border-color: rgba(0,0,0,0.3);
}

.theme-dot.active {
    transform: scale(1.15);
    border-color: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px rgba(0,0,0,0.25);
}


/* ── 드래그 카드 텍스트 선택 방지 ──────────────────────── */
[data-cardid] {
    -webkit-user-select: none;
    user-select: none;
}
/* 카드 내부 input/textarea는 텍스트 선택 허용 */
[data-cardid] input,
[data-cardid] textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* ── 설정 페이지 래퍼 ────────────────────────────────────── */
.settings-wrapper {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── 설정 페이지 테마 버튼 ──────────────────────────────── */
.settings-theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    transition: all 0.15s;
}

.settings-theme-btn:hover {
    border-color: var(--theme-mid);
    transform: translateY(-1px);
}

.settings-theme-btn.active {
    border-color: var(--theme-active);
    background: var(--theme-pale);
}

.settings-theme-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
}

.settings-theme-name {
    font-size: 0.72rem;
    color: var(--text-mid);
    font-weight: 500;
}


/* ── 다크모드 토글 스위치 ────────────────────────────────── */
.dark-toggle-btn {
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--border);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}

.dark-toggle-btn.on {
    background: var(--theme-active);
}

.dark-toggle-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.25s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.dark-toggle-btn.on .dark-toggle-thumb {
    transform: translateX(24px);
}



/* ── 다크모드 기타 요소 ──────────────────────────────────── */
[data-dark="true"] .card {
    background: var(--white);
    border-color: var(--border);
}

[data-dark="true"] .form-control {
    background: #1a1a1a;
    color: var(--text-dark);
    border-color: var(--border);
}

[data-dark="true"] .form-control:focus {
    background: #222222;
    border-color: var(--theme-active);
}

[data-dark="true"] .badge-progress { background: #2a2010; color: #c8a840; }
[data-dark="true"] .badge-done     { background: #0f2010; color: #70c870; }
[data-dark="true"] .badge-wish     { background: #1a1030; color: #a888e8; }
[data-dark="true"] .badge-cable    { background: #0a2030; color: #60b8e0; }

[data-dark="true"] select.form-control option {
    background: #1e1e1e;
    color: var(--text-dark);
}

/* pale 섹션 배경 다크 오버라이드 */
[data-dark="true"] .section-mint     { background: #0f1e18; }
[data-dark="true"] .section-pink     { background: #1e0f14; }
[data-dark="true"] .section-yellow   { background: #1a180a; }
[data-dark="true"] .section-lavender { background: #120e1a; }

/* CSS 변수 재정의 — 인라인 style로 쓰인 pale 변수들 → 다크에서 테두리 있는 무채색 */
[data-dark="true"] {
    --mint-pale:      #252525;
    --pink-pale:      #252525;
    --yellow-pale:    #252525;
    --lavender-pale:  #252525;
    --sage-light:     #252525;
    --mint-light:     #343434;
    --yellow-light:   #343434;
    --pink-light:     #343434;
    --lavender-light: #343434;
    --sky-pale:       #252525;
    --sky:            #343434;
    --ivory-dark:     #1c1c1c;
}

/* 스와치 바늘/뜨개방법 칩 다크모드 — 배경색 유지하되 어두운 파스텔로 */
[data-dark="true"] [style*="background:var(--sky-pale)"],
[data-dark="true"] [style*="background: var(--sky-pale)"] {
    background: #1a2a38 !important;
    border: 1px solid #2a4058 !important;
}
[data-dark="true"] [style*="background:var(--lavender-pale)"],
[data-dark="true"] [style*="background: var(--lavender-pale)"] {
    background: #221a38 !important;
    border: 1px solid #382a58 !important;
}
[data-dark="true"] [style*="color:#1a5276"],
[data-dark="true"] [style*="color: #1a5276"] { color: #70b8e8 !important; }
[data-dark="true"] [style*="color:#4e3290"],
[data-dark="true"] [style*="color: #4e3290"] { color: #b0a0e8 !important; }

/* pale 섹션(mint/sage/yellow) — 테두리로 구분감 */
[data-dark="true"] [style*="background:var(--mint-pale)"],
[data-dark="true"] [style*="background: var(--mint-pale)"],
[data-dark="true"] [style*="background:var(--sage-light)"],
[data-dark="true"] [style*="background: var(--sage-light)"],
[data-dark="true"] [style*="background:var(--yellow-pale)"],
[data-dark="true"] [style*="background: var(--yellow-pale)"] {
    border: 1px solid #383838 !important;
}

/* btn-danger hover 다크 */
[data-dark="true"] .btn-danger:hover { background: #2a1010; }

/* 테이블 다크 */
[data-dark="true"] table { color: var(--text-dark); }
[data-dark="true"] th { background: #2a2a2a; color: var(--text-mid); border-color: var(--border); }
[data-dark="true"] td { border-color: var(--border); color: var(--text-dark); }
[data-dark="true"] tr:hover td { background: #282828; }

/* 인라인 하드코딩 배경들 — 흰색/밝은회색만 오버라이드 (파스텔 포인트색은 건드리지 않음) */
[data-dark="true"] [style*="background:#f8f8f8"],
[data-dark="true"] [style*="background: #f8f8f8"] { background: #232323 !important; }
[data-dark="true"] [style*="background:#f5f5f5"],
[data-dark="true"] [style*="background: #f5f5f5"] { background: #1c1c1c !important; }
[data-dark="true"] [style*="background:white"],
[data-dark="true"] [style*="background: white"] { background: #232323 !important; }
[data-dark="true"] [style*="background:#ffffff"],
[data-dark="true"] [style*="background: #ffffff"] { background: #232323 !important; }

/* 인라인 하드코딩 텍스트색 오버라이드 — 캘린더 칩 TextColor(#111111)는 건드리지 않도록
   칩 안 글자는 배경 밝기에 따라 결정되므로 CSS 오버라이드 제외 */
[data-dark="true"] [style*="color:#333333"],
[data-dark="true"] [style*="color: #333333"] { color: #e0e0e0 !important; }
[data-dark="true"] [style*="color:#1a1a1a"],
[data-dark="true"] [style*="color: #1a1a1a"] { color: #f0f0f0 !important; }
[data-dark="true"] [style*="color:#5a5a5a"],
[data-dark="true"] [style*="color: #5a5a5a"] { color: #aaaaaa !important; }
[data-dark="true"] [style*="color:#9a9a9a"],
[data-dark="true"] [style*="color: #9a9a9a"] { color: #777777 !important; }
[data-dark="true"] [style*="color:#8a6a08"],
[data-dark="true"] [style*="color: #8a6a08"] { color: #c8a840 !important; }
[data-dark="true"] [style*="color:#267848"],
[data-dark="true"] [style*="color: #267848"] { color: #70c878 !important; }
[data-dark="true"] [style*="color:#8a6010"],
[data-dark="true"] [style*="color: #8a6010"] { color: #c8a040 !important; }

/* 다크모드에서는 테마색 무관하게 항상 흑백(mono) 팔레트 적용 */
[data-dark="true"],
[data-dark="true"][data-theme="green"],
[data-dark="true"][data-theme="yellow"],
[data-dark="true"][data-theme="sky"],
[data-dark="true"][data-theme="pink"],
[data-dark="true"][data-theme="purple"],
[data-dark="true"][data-theme="mono"] {
    --theme-pale:   #1e1e1e;   /* 사이드바 — 카드보다 밝게 */
    --theme-light:  #323232;   /* 활성 메뉴 배경 */
    --theme-mid:    #444444;   /* 구분선 */
    --theme-muted:  #888888;
    --theme-btn:    #323232;
    --theme-active: #e8e8e8;
}

/* ── 다크모드 버튼 오버라이드 ───────────────────────────── */
/* 그래프 막대 — theme-light가 어두워서 별도로 밝게 */
[data-dark="true"] [style*="background:var(--theme-light)"][style*="border-radius:4px 4px"] {
    background: #888888 !important;
}
[data-dark="true"] .btn-pause {
    background: var(--ivory-mid);
    color: var(--text-mid);
    border-color: var(--border);
}
[data-dark="true"] .btn-pause:hover {
    background: var(--ivory-dark);
    color: var(--text-dark);
}

[data-dark="true"] .btn-primary,
[data-dark="true"] .btn-sage {
    background: var(--theme-pale);
    color: var(--theme-active);
    border-color: var(--theme-mid);
}

[data-dark="true"] .btn-primary:hover,
[data-dark="true"] .btn-sage:hover { opacity: 0.88; }

[data-dark="true"] .btn-secondary {
    background: var(--ivory-mid);
    color: var(--text-mid);
    border-color: var(--border);
}
[data-dark="true"] .btn-secondary:hover { opacity: 0.88; }

[data-dark="true"] .btn-ghost {
    background: transparent;
    color: var(--text-mid);
    border-color: var(--border);
}
[data-dark="true"] .btn-ghost:hover { opacity: 0.88; }

[data-dark="true"] .btn-mint {
    color: var(--theme-active);
}

[data-dark="true"] .btn-danger {
    background: var(--ivory-mid);
    color: #e87878;
    border-color: #7a3030;
}
[data-dark="true"] .btn-danger:hover { background: var(--ivory-dark); }
[data-dark="true"] .btn-danger .icon-line { opacity: 0.9; }

/* ── 로딩 ────────────────────────────────────────────── */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--text-light);
    font-size: 0.9rem;
}
/* ── 라인 스타일 SVG 아이콘 ─────────────────────────────────── */
.icon-line {
    display: block;
    opacity: 0.45;                      /* 기본: 연한 느낌 */
    transition: opacity 0.15s ease;
}

/* 활성/호버/탭 시 진하게 */
.nav-item:hover .icon-line,
.nav-item.active .icon-line,
.bottom-nav-item:hover .icon-line,
.bottom-nav-item:active .icon-line,
.bottom-nav-item.active .icon-line {
    opacity: 1;
}

/* 다크모드: invert로 흰색 전환 + 연한 느낌 */
[data-dark="true"] .icon-line {
    filter: invert(1);
    opacity: 0.5;
}

[data-dark="true"] .nav-item:hover .icon-line,
[data-dark="true"] .nav-item.active .icon-line,
[data-dark="true"] .bottom-nav-item:hover .icon-line,
[data-dark="true"] .bottom-nav-item:active .icon-line,
[data-dark="true"] .bottom-nav-item.active .icon-line {
    opacity: 1;
}

/* 홈 카드 아이콘 */
.icon-line-card {
    display: block;
    opacity: 0.7;
}

[data-dark="true"] .icon-line-card {
    filter: invert(1);
    opacity: 0.8;
}

/* 드래그 핸들 아이콘 */
.drag-handle-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.35;
    filter: brightness(0);        /* 라이트모드: 검정 */
    cursor: grab;
}

[data-dark="true"] .drag-handle-icon {
    filter: brightness(0) invert(1);  /* 다크모드: 흰색 */
    opacity: 0.5;
}

/* 페이지 제목 아이콘: 항상 진한색 */
.page-title .icon-line {
    opacity: 1;
}

[data-dark="true"] .page-title .icon-line {
    opacity: 1;
}