@charset "UTF-8";

/* =========================================
   THEME & TOKENS
   ========================================= */
:root{
    /* 기존 변수 유지 (하위 호환) */
    --primary:#ffb3b3;
    --today:#ff4d4d;
    --ring:#ffd2d2;

    /* 추가 토큰 (톤/그림자/라운드/보더) */
    --surface:#fffafa;
    --text:#222;
    --muted:#666;
    --card:#ffffff;
    --border:#f1d7dc;
    --accent:#ffe8ec;
    --shadow:0 10px 24px rgba(255, 122, 138, .16);
    --radius:14px;
}

/* =========================================
   BASE
   ========================================= */
*{ box-sizing:border-box; }
html, body{
    font-family: -apple-system,BlinkMacSystemFont,"Pretendard Variable","Noto Sans KR",
    Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    margin:0;
    color:var(--text);
    background:var(--surface);
    letter-spacing:.01em;
    -webkit-tap-highlight-color: transparent;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-underline-offset: .2em; }

/* 브랜드 */
.brand{ color:#333; font-weight:700; letter-spacing:.02em; }

/* =========================================
   LAYOUT
   ========================================= */
header{
    background: var(--primary);
    color:#fff;
    padding:1rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, white);
}
header .container{ overflow: visible; } /* 메뉴 튀어나옴 방지 */
main{ max-width:960px; margin:auto; padding:1.5rem; }
h1{ font-size:1.5rem; margin:.25rem 0 1rem; }

/* =========================================
   CARD & BADGE
   ========================================= */
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.badge,
.badge-hint{
    display:inline-block;
    background:#fff0f0;
    color:var(--muted);
    border:1px solid #ffd6d6;
    font-size:.85rem;
}
.badge{ padding:.4rem .6rem; border-radius:999px; }
.badge-hint{ white-space:normal; line-height:1.4; max-width:100%; }
.badge > b{ color: #c33; font-size: 16px;}

/* =========================================
   CONTROLS / STATUS
   ========================================= */
.controls{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.controls input[type="date"], .controls button, .controls label{ font-size:1rem; }
.status{ margin-top:.75rem; }
.helper{ margin-top:.5rem; font-size:.9rem; color:var(--muted); }

/* 공통 포커스 */
.form-control:focus{
    border-color:var(--ring);
    box-shadow:0 0 0 .22rem rgba(255, 125, 125, .28);
    outline: none;
}

/* =========================================
   CALENDAR (TABLE VIEW)
   ========================================= */
.calendar-container{ margin-top:1rem; display:grid; gap:1rem; }
/* @media (min-width:700px){ .calendar-container{grid-template-columns:repeat(2,1fr)} }
   @media (min-width:1000px){ .calendar-container{grid-template-columns:repeat(3,1fr)} } */

.month{
    background:#fff;
    border:1px solid #f2dede;
    border-radius:10px;
    padding:1rem;
    box-shadow: var(--shadow);
}
.month h2{ margin:0 0 .5rem; font-size:1.1rem; font-weight:700; }
table{ width:100%; border-collapse:collapse; }
th, td{
    width:14.285%;
    height:44px;
    text-align:center;
    border:1px solid #f2e4e7;
}
.leap-day{ background:var(--accent); }
.today{ border:2px solid var(--today); border-radius:10px; font-weight:bold; }
.hidden{ display:none; }

/* =========================================
   SPINNER / TOOLTIP
   ========================================= */
.spinner{
    display:inline-block; width:1em; height:1em;
    border:2px solid #ccc; border-top-color:#666;
    border-radius:50%; animation:spin .8s linear infinite;
    vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.tooltip{ font-size:.8rem; color:#444; }

/* =========================================
   FLATPICKR CUSTOM
   ========================================= */
.flatpickr-calendar{
    z-index:2000 !important;
    border-radius:16px;
    box-shadow: var(--shadow);
    overflow:hidden;
}
.flatpickr-innerContainer{ border-bottom: initial !important; }

/* 중앙 팝업 */
.fp-center-popup{
    position:fixed !important; top:50% !important; left:50% !important;
    transform:translate(-50%, -50%) !important; margin:0 !important;
    max-width:90vw; border-radius:16px; animation: fp-fade-in .18s ease-out;
}
@keyframes fp-fade-in{ from{opacity:0; transform:translate(-50%, -48%);} to{opacity:1; transform:translate(-50%, -50%);} }

/* 월 헤더 */
.flatpickr-months{ padding:0 !important; margin:0 !important; }
.flatpickr-months .flatpickr-month{
    height:48px !important; line-height:48px !important;
    display:flex; align-items:center; justify-content:center;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year{ font-weight:700; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
    display:flex !important; align-items:center; justify-content:center;
    width:40px; height:40px; top:6px !important;
}
.flatpickr-months .flatpickr-prev-month{ left:6px; font-size:28px; }
.flatpickr-months .flatpickr-next-month{ right:6px; font-size:28px; }

/* 요일 바 */
.flatpickr-weekdays{
    background:#ffe8ee; margin:0 !important; padding:4px 0 !important;
}
.flatpickr-weekday{ color:#7a1b2d !important; font-weight:600; line-height:28px !important; }
.flatpickr-weekdaycontainer{
    display:grid !important; grid-template-columns:repeat(7,1fr) !important;
    grid-auto-rows:40px !important; gap:6px !important; padding:6px 8px !important;
    background-color:#ef5350;
}

/* 날짜칸 */
.flatpickr-day{
    border-radius:10px; width:40px; height:40px; line-height:40px;
    margin:2px; box-sizing:border-box;
}
.flatpickr-day.today{ border-color:var(--today); color:var(--today); font-weight:700; }
.flatpickr-day.selected{
    background:var(--today); border-color:var(--today); color:#fff;
    box-shadow:0 4px 10px rgba(255,77,77,.25);
}
.flatpickr-day:hover{ background:#ffe9e9; }
.flatpickr-day.disabled{ color:#bbb; }

/* altInput 보정 */
.input-group > .flatpickr-input[readonly]{ display:none; }
.input-group > .form-control.flatpickr-alt-input{ flex:1 1 auto; }

/* 7열 강제 */
.flatpickr-calendar .flatpickr-days{ width:auto !important; }
.flatpickr-calendar .dayContainer{
    display:grid !important; grid-template-columns:repeat(7,1fr) !important;
    grid-auto-rows:40px !important; gap:6px !important; padding:6px 8px !important;
}
.flatpickr-day,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
    margin:0 !important; width:auto !important; max-width:none !important;
    height:40px !important; line-height:40px !important;
}

/* 모바일 캘린더 크기 */
@media (max-width:576px){
    .flatpickr-day{ width:44px; height:44px; line-height:44px; margin:4px; font-size:1.05rem !important; }
    .flatpickr-calendar .dayContainer{ grid-auto-rows:44px !important; gap:6px !important; }
}

/* =========================================
   HEADER NAV (단일 마크업: 모바일 Offcanvas / 데스크탑 가로 메뉴)
   ========================================= */

/* 햄버거 아이콘 흰색 */
.navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* 모바일: 오른쪽 슬라이드 메뉴 */
.ww-offcanvas{
    width:82vw;
    max-width:100%;
    border-left:0;
    /*box-shadow: var(--shadow);*/
}
.offcanvas-backdrop.show{ opacity:.35; }

.ww-menu{ display:block; }
.ww-link{
    display:block; padding:14px 18px; font-size:1.05rem;
    color:#333; text-decoration:none;
    border-bottom:1px solid #f2f2f2; transition: background .15s ease;
}
/*.ww-link:first-child{ border-top:1px solid #f2f2f2; }*/
.ww-link:hover{ background:#fff; }
.ww-section{ padding:10px 0; }
.ww-section + .ww-section{ border-top:1px solid #f0f0f0; }
.ww-section-title{ font-weight:700; padding:12px 18px 6px; color:#222; }
.ww-sublink{ display:block; padding:10px 18px; color:#444; text-decoration:none; }
.ww-sublink:hover{ background:#fff; color:#222; }
.ww-sublink small{ color:#777; }

/* 데스크탑: 헤더 우측 정렬 가로 메뉴 */
@media (min-width:768px){
    .offcanvas-md{
        position:static !important; transform:none !important; visibility:visible !important;
        background:transparent !important; border:0 !important; width:auto !important; height:auto !important;
    }
    .offcanvas-md .offcanvas-body{ padding:0 !important; }
    .ww-menu{ display:flex; align-items:center; gap:1.1rem; }
    .ww-link{
        border:0; padding:.5rem .8rem; color:#fff !important;
        border-radius:999px; transition: background .15s ease, transform .08s ease;
    }
    .ww-link:hover{ background:rgba(255,255,255,.18); }
    .ww-link:active{ transform: translateY(1px); }
    .ww-section{ display:none !important; } /* 모바일 전용 섹션 숨김 */
}

/* =========================================
   UTILS
   ========================================= */
hr{ border:none; border-top:1px solid var(--border); margin:1rem 0; }
.small, small{ color:var(--muted); }