/* Global Scrollbar (Gemini Slim Style) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /* 항상 보이게 기본값 설정, 라이트 테마는 은은한 파란색 */
    background: rgba(59, 130, 246, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7) !important;
}

/* Dark Theme specific thumb color (Light White) */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

* {
    box-sizing: border-box;
}

/* refactoring */
:root{
    /* layout system */
    --header-height: 54px;
    --panel-width: 420px;
    --calendar-height: 85vh;

    /* ui system */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --spacing-sm: 6px;
    --spacing-md: 12px;
    --spacing-lg: 20px;

    --transition-fast: 0.15s ease;
}

html {
    height: 100%;
    font-family: "Noto Sans KR",
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    height: 100%;
    margin: 0;
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}

.hidden {
    display: none !important;
}

.header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title {
    font-weight: 700;
}

.hint {
    color: var(--muted);
    font-size: 12px;
}

.container {
    display: grid;
    grid-template-columns: 1fr var(--panel-width);
    height: calc(100vh - var(--header-height));
    padding: 0 14px 14px 14px;
    gap: 14px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px; /* Consistent gap between all header items */
}

/* Base Icon Button Style (v2.2.2 Refined) */
.icon-btn, .user-profile-btn {
    height: 36px; /* Increased height for better clickability and alignment */
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border); /* Changed from transparent to visible border */
    transition: all var(--transition-fast);
    background: var(--bg); /* Added background to match profile button */
    color: var(--text);
    white-space: nowrap;
}

.icon-btn:hover, .user-profile-btn:hover {
    background: var(--hover);
    border-color: var(--primary); /* Highlight border on hover */
}

.icon-btn .icon {
    font-size: 16px;
}

/* Special treatment for text-only buttons to match icon-btn visual weight */
.icon-btn .txt {
    margin-left: 2px;
}

/* User Profile Dropdown Specifics */
.user-profile-dropdown {
    position: relative;
    display: inline-block;
}

.user-profile-btn {
    min-width: 140px; /* Ensure button is not too small compared to dropdown */
    justify-content: space-between; /* Space out username and arrow */
    background: var(--bg); /* Subtle distinction from other buttons */
    border-color: var(--border);
}

.user-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 100%; /* Matches the exact width of the user-profile-btn */
    overflow: hidden;
    animation: dropdownFadeIn 0.15s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-item {
    width: 100%;
    text-align: left;
    font-size: 13px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition-fast);
}

.user-dropdown-item:hover {
    background: var(--hover);
}

.user-dropdown-item.danger {
    color: #ef4444;
}

.user-dropdown-item.danger:hover {
    background: #fef2f2;
}

html[data-theme="dark"] .user-dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.calendar-wrap {
    padding: 12px;
    height: 85vh;
    /* height: 85vh = 85% 비율로 줄이겠다 ; */
}

#calendar{
    height: 100%;
}

/* panel(reservation) part */
.panel {
    border-left: 1px solid var(--border);
    background: var(--surface);
    padding: 14px 16px;
    height: 100%;
    overflow: hidden; /* panel-body만 스크롤되도록 */
}

.panel-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 내부 스크롤(flex) 정상 동작 */
}

/* 저장 버튼 영역 하단 고정 */
.panel-footer {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--panel);
    padding-top: 12px;
    padding-bottom: 10px;
    border-top: 1px solid var(--border);
}

.panel-body {
    flex: 1;
    min-height: 0; /* flex 내부 스크롤 */
    overflow-y: auto;
    padding-right: 12px; /* 스크롤로 인한 내용 디자인 충돌 방지 및 우측 여백 확보 */
}

.label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

input, textarea, select {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    margin-top: 6px;
    outline: none;
    box-sizing: border-box;
}

/* =========================================================
   Chrome Autofill fix (Dark/Light theme safe)
   - 크롬 자동완성으로 input 배경이 하얗게 뜨는 문제 해결
   ========================================================= */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
    transition: background-color 999999s ease-in-out 0s;
}

/* 포커스 시에도 유지 */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
}

textarea {
    resize: vertical;
    min-height: 90px;
}

input:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus);
}

.btn-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

.mini-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 10px 8px;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.mini-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 10px;
    background: var(--surface);
}

.mini-item .mini-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.mini-item .mini-title {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
}

.mini-item .mini-time {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.mini-item .mini-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

button {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}

button.success {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}
button.success:hover {
    background: #059669;
    border-color: #059669;
}

button.danger-solid {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}
button.danger-solid:hover {
    background: #dc2626;
    border-color: #dc2626;
}

button.ghost {
    background: transparent;
}

/* anchor buttons (header nav) */
a.ghost{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

a.ghost:hover{
    background: var(--panel-2);
}

.danger {
    border: 1px solid rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.10);
    color: var(--text);
}

.danger:hover {
    background: rgba(239, 68, 68, 0.16);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.msg {
    white-space: pre-wrap;
    color: var(--muted);
    font-size: 12px;
    margin-top: 10px;
}

pre.detail {
    white-space: pre-wrap;
    word-break: break-word;
}


/* flatpickr dark mode basic */
html[data-theme="dark"] .flatpickr-calendar {
    transition: background 0.2s ease, color 0.2s ease;
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* flatpickr가 모달 뒤로 숨는 현상 방지 (day modal z-index가 매우 높음) */
.flatpickr-calendar {
    z-index: 210500 !important;
}

/* 월 / 연도 */
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-monthDropdown-months {
    color: var(--text) !important;
    background: var(--panel) !important;
}

/* 월 선택 드롭다운 내부 옵션 */
html[data-theme="dark"] .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--panel) !important;
    color: var(--text) !important;
}

/* 요일 (일~토) */
html[data-theme="dark"] .flatpickr-weekday {
    color: var(--muted) !important;
}

/* 날짜 숫자 */
html[data-theme="dark"] .flatpickr-day {
    color: var(--text) !important;
}

/* 날짜 hover */
html[data-theme="dark"] .flatpickr-day:hover {
    background: rgba(148, 163, 184, 0.15) !important;
}

/* 오늘 날짜 */
html[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--primary) !important;
}

/* 선택된 날짜 */
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--primary) !important;
    color: var(--primary-contrast) !important;
    border-color: var(--primary) !important;
}

/* 범위 선택 중 내부 날짜 (v1.9.7e) */
html[data-theme="dark"] .flatpickr-day.inRange,
html[data-theme="dark"] .flatpickr-day.prevMonthDay.inRange,
html[data-theme="dark"] .flatpickr-day.nextMonthDay.inRange,
html[data-theme="dark"] .flatpickr-day.today.inRange,
html[data-theme="dark"] .flatpickr-day.prevMonthDay.today.inRange,
html[data-theme="dark"] .flatpickr-day.nextMonthDay.today.inRange,
html[data-theme="dark"] .flatpickr-day:hover {
    background: #e6e6e6 !important; /* light 모드와 유사한 밝은 배경 */
    border-color: transparent !important;
    color: #393939 !important; /* 검은색 계열 폰트 강제 */
    box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6 !important;
}

/* 시간 선택 (시/분) */
html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--text) !important;
    background: transparent !important;
}

/* 화살표 아이콘 */
html[data-theme="dark"] .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-next-month svg {
    fill: var(--text) !important;
}

/* 연도 조절 화살표 (위/아래) */
html[data-theme="dark"] .flatpickr-calendar .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--text) !important;
}
html[data-theme="dark"] .flatpickr-calendar .numInputWrapper span.arrowDown:after {
    border-top-color: var(--text) !important;
}

select{
    width: 100%;
    padding: 10px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    margin-top: 6px;
    outline: none;
}

select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus);
}

html, body{
    height: 100%;
    overflow: hidden;
}

/* 월 이동 부드럽게 */
#calendar.cal-anim .fc-view-harness {
    animation: calFadeSlide 180ms ease-out;
}

@keyframes calFadeSlide {
    from {
        opacity: 0.65;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Toast
   ========================================================= */

.toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 250000; /* modal/flatpickr보다 위 */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    pointer-events: none;
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 180ms ease, transform 180ms ease;
    max-width: min(92vw, 560px);
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-color: rgba(34, 197, 94, 0.35);
}

.toast.error {
    border-color: rgba(239, 68, 68, 0.45);
}

/* =========================================================
   FullCalendar +more Popover Dark 개선
   ========================================================= */

.fc-popover {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.fc-popover-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: 10px 14px;
}

.fc-popover-body {
    padding: 12px 14px;
}

html[data-theme="dark"] .fc-popover {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   FullCalendar +more Popover (dayGridMoreLink) Theme Fix
   - FullCalendar 기본 테마가 우선하는 경우가 있어 !important로 강제
   ========================================================= */

html[data-theme="dark"] .fc-theme-standard .fc-popover,
html[data-theme="dark"] .fc .fc-popover {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.70) !important;
}

html[data-theme="dark"] .fc .fc-popover-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .fc .fc-popover-body {
    background: transparent !important;
    color: var(--text) !important;
}

/* 내부 이벤트 텍스트/링크가 흐리게 보이는 경우 보정 */
html[data-theme="dark"] .fc .fc-popover .fc-event,
html[data-theme="dark"] .fc .fc-popover a {
    color: var(--text) !important;
}

/* 닫기 버튼(X) 대비 */
html[data-theme="dark"] .fc .fc-popover-close {
    color: var(--text) !important;
    opacity: 0.85;
}
html[data-theme="dark"] .fc .fc-popover-close:hover {
    opacity: 1;
}



/* Header nav */
.header-right{
    display:flex;
    gap:8px;
    align-items:center;
}

.icon-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.icon-btn .icon{
    font-size:14px;
    line-height:1;
}

.icon-btn .txt{
    font-size:13px;
}

@media (max-width:720px){
    .icon-btn .txt{display:none;}
}