@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ============================================================
   🎨 CUSTOMIZE — 전체 테마 색상
   이 :root 변수만 바꾸면 스킨 전체 색이 바뀝니다.
   ============================================================ */
:root {
    --primary-color : #1F2937;   /* CUSTOMIZE: 헤더·버튼 배경색 */
    --accent-color  : #B7CACB;   /* CUSTOMIZE: 강조색 (버튼·프로그레스바) */
    --border-color  : #212535;   /* CUSTOMIZE: 카드·캘린더 테두리색 */
    --font-family   : 'Pretendard', sans-serif; /* CUSTOMIZE: 폰트 */
}

/* ── 기본 초기화 ── */
* { font-family: var(--font-family); box-sizing: border-box; margin: 0; padding: 0; }
.todo-container { max-width: 1100px; margin: 0 auto; padding: 20px 15px; }

/* ── 캘린더 & 투두 헤더 폰트 통일 ── */
.cal-top-mask, .todo-header {
    font-weight    : 800 !important;
    font-size      : 14px !important;
    letter-spacing : 1px !important;
    color          : #DAD2CD !important; /* CUSTOMIZE: 헤더 글자색 */
    text-transform : uppercase;
}

/* ── 캘린더 레이아웃 ── */
.calendar-scaled-box {
    width         : 80% !important;
    margin        : 0 auto 20px auto !important;
    overflow      : hidden;
    border        : 2px solid var(--border-color); /* CUSTOMIZE: 캘린더 테두리 굵기·색 */
    border-radius : 12px;                          /* CUSTOMIZE: 캘린더 모서리 둥글기 */
    position      : relative;
}
.cal-top-mask {
    position      : absolute !important;
    top: 0; left: 0;
    width: 100%; height: 40px;
    background    : var(--primary-color) !important;
    z-index       : 20;
    display       : flex; align-items: center; justify-content: center;
    border-bottom : 1px solid var(--accent-color);
}
.cal-click-preventer {
    position : absolute;
    inset    : 0;
    z-index  : 10;
}

/* 캘린더 로딩 중 플레이스홀더 애니메이션 */
.calendar-wrapper {
    position   : relative;
    height     : 400px;
    overflow   : hidden;
    background : var(--primary-color); /* CUSTOMIZE: 캘린더 로딩 배경색 */
}
.calendar-wrapper::before {
    content    : 'Loading…';
    position   : absolute;
    inset      : 0;
    display    : flex;
    align-items: center;
    justify-content: center;
    color      : var(--accent-color); /* CUSTOMIZE: 로딩 텍스트 색 */
    font-size  : 13px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity    : 1;
    transition : opacity 0.4s;
}
/* iframe 이 로드되면 배경 글자 숨김 */
.calendar-wrapper.cal-loaded::before { opacity: 0; }

.calendar-wrapper iframe {
    width            : 125%;
    height           : 125%;
    transform        : scale(0.8, 0.9);
    transform-origin : 0 0;
    position         : absolute;
    top: -5px; left: 0;
    border           : 0;
    opacity          : 0;
    transition       : opacity 0.4s;
}
.calendar-wrapper.cal-loaded iframe { opacity: 1; }

/* ── 버튼 ── */
.btn-del-selected, .btn-add-todo {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    background     : var(--accent-color) !important; /* CUSTOMIZE: 버튼 배경색 */
    color          : var(--primary-color) !important; /* CUSTOMIZE: 버튼 글자색 */
    padding        : 6px 14px;
    border-radius  : 6px;                            /* CUSTOMIZE: 버튼 모서리 둥글기 */
    font-size      : 12px;
    border         : none;
    font-weight    : 800 !important;
    text-decoration: none !important;
    cursor         : pointer;
    transition     : 0.2s;
}
.btn-del-selected:hover, .btn-add-todo:hover { filter: brightness(90%); }

/* ── 투두 카드 ── */
.todo-card {
    border-radius : 12px;                 /* CUSTOMIZE: 카드 모서리 둥글기 */
    background    : #fff;                 /* CUSTOMIZE: 카드 배경색 */
    border        : 1px solid var(--border-color); /* CUSTOMIZE: 카드 테두리 */
    overflow      : hidden;
}
.todo-header {
    background : var(--primary-color);
    padding    : 12px 20px;
    display    : flex; justify-content: space-between; align-items: center;
}
.header-btns { display: flex; gap: 8px; }

.todo-item-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 18px 20px;
    border-bottom   : 1px solid #edf2f7; /* CUSTOMIZE: 항목 구분선 색 */
    width           : 100% !important;
    transition      : 0.3s;
}

/* ── 완료(done) 효과 ── */
.todo-item-row.is-done { background-color: #f9f9f9 !important; opacity: 0.5; }
.todo-item-row.is-done .todo-subject-text {
    text-decoration : line-through !important;
    color           : #888 !important; /* CUSTOMIZE: 완료 항목 글자색 */
}

.todo-content-left  { display: flex; align-items: center; gap: 15px; flex: 1; }
.todo-subject-text  { font-size: 15px; font-weight: 600; color: #2d3748; } /* CUSTOMIZE: 항목 글자색 */

.todo-content-right { display: flex; align-items: center; gap: 20px; }
.item-manage-btns   { display: flex; gap: 5px; }

/* ── 프로그레스 바 ── */
.todo-progress-container { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.todo-progress-bar  { width: 120px; height: 8px; background: #edf2f7; border-radius: 20px; overflow: hidden; }
.todo-progress-fill {
    height     : 100%;
    background : linear-gradient(90deg, var(--accent-color), var(--primary-color)); /* CUSTOMIZE: 프로그레스바 그라데이션 */
    transition : width 0.6s ease;
}
.todo-progress-text { font-size: 11px; font-weight: 700; color: var(--primary-color); }

/* 수정·삭제 링크 */
.todo-edit-btn, .todo-del-btn {
    font-size      : 11px;
    font-weight    : 700;
    padding        : 3px 8px;
    border-radius  : 4px;
    text-decoration: none;
}
.todo-edit-btn { background: #edf2f7; color: #555; }
.todo-del-btn  { background: #fee; color: #c0392b; }

/* ── 글쓰기 폼 ── */
#fwrite {
    max-width     : 650px !important;
    margin        : 40px auto !important;
    padding       : 30px !important;
    background    : #fff !important;
    border-radius : 20px !important;
    border        : 1px solid var(--border-color) !important; /* CUSTOMIZE: 폼 테두리 */
    box-shadow    : 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* 중요도 선택 그리드
   단계 수를 바꿀 경우 grid-template-columns 의 숫자도 맞춰 수정하세요. */
#fwrite .prio-select-group {
    display               : grid;
    grid-template-columns : repeat(6, 1fr); /* CUSTOMIZE: 중요도 단계 수 */
    gap                   : 8px;
    margin                : 10px 0 25px 0;
}
#fwrite .prio-select-group label { cursor: pointer; text-align: center; }
#fwrite .prio-select-group input { display: none; }
#fwrite .prio-select-group span {
    display       : block;
    padding       : 10px 0;
    background    : #f8f9fa;
    border        : 2px solid #eee;   /* CUSTOMIZE: 미선택 아이콘 테두리색 */
    border-radius : 10px;
    font-size     : 20px;
    transition    : 0.2s;
}
#fwrite .prio-select-group input:checked + span {
    border-color : var(--primary-color); /* CUSTOMIZE: 선택된 아이콘 테두리색 */
    background   : #f0f4f8;
    transform    : translateY(-3px);
    box-shadow   : 0 4px 10px rgba(0,0,0,0.1);
}
/* 아이콘 아래 레이블 */
#fwrite .prio-select-group .prio-label {
    display     : block;
    font-size   : 10px;
    font-weight : 700;
    color       : #999;            /* CUSTOMIZE: 레이블 글자색 */
    margin-top  : 4px;
}
#fwrite .prio-select-group input:checked ~ .prio-label {
    color: var(--primary-color);  /* CUSTOMIZE: 선택된 레이블 글자색 */
}

/* 입력 영역 */
.write-label       { display: block; font-weight: 800; margin-bottom: 10px; color: var(--primary-color); font-size: 14px; }
.progress-input-box { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 12px; border: 1px solid #eee; }
.input-flex        { display: flex; align-items: center; gap: 10px; }
.todo-prog-input   { width: 80px; padding: 10px; border: 2px solid #eee; border-radius: 8px; text-align: center; font-weight: bold; }
.input-unit        { font-weight: 800; color: var(--primary-color); }
.input-desc        { font-size: 11px; color: #888; margin-top: 8px; }

#fwrite .write-row { margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }
#fwrite .todo-input-main {
    width: 100% !important; padding: 15px !important;
    border: 2px solid #eee !important; border-radius: 12px !important;
    font-size: 16px !important; outline: none !important;
}
#fwrite .todo-input-main:focus { border-color: var(--accent-color) !important; }

/* 하단 버튼 */
.btn_confirm  { display: flex; gap: 10px; justify-content: center; margin-top: 25px; }
.btn_submit   {
    background    : var(--primary-color) !important; /* CUSTOMIZE: 등록 버튼 배경색 */
    color         : #fff !important;                 /* CUSTOMIZE: 등록 버튼 글자색 */
    padding       : 15px 40px !important;
    border-radius : 10px !important;
    font-weight   : 800 !important;
    cursor        : pointer; border: none; font-size: 16px; transition: 0.2s;
}
.btn_submit:hover { opacity: 0.9; transform: translateY(-1px); }
.btn_cancel   {
    background    : #eee !important; /* CUSTOMIZE: 취소 버튼 배경색 */
    color         : #666 !important; /* CUSTOMIZE: 취소 버튼 글자색 */
    padding       : 15px 40px !important;
    border-radius : 10px !important;
    text-decoration: none; font-weight: 800; font-size: 16px;
}