/* --- 全域設定 --- */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --bg-color: #f7f5f0;
    --card-bg: #ffffff;
    --text-main: #4a4a4a;
    --accent-color: #d97558;
    --accent-blue: #6d9dc5; 
    --accent-pink: #e08c8c;
    --line-color: #e0e0e0;
}

html {
    background-color: var(--bg-color);
    /* 🔴 關鍵修正：使用 100dvh (Dynamic Viewport Height) */
    /* 這就是你印象中的 hv，它能完美解決 iOS 上下黑邊與伸縮問題 */
    min-height: 100dvh;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    padding-top: env(safe-area-inset-top); 
    padding-bottom: 120px;
    color: var(--text-main);
    -webkit-tap-highlight-color: transparent;
    /* 🔴 關鍵修正：body 也要設為 100dvh */
    min-height: 100dvh;
}

.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 15px;
}

/* 頭像樣式 */
.avatar-icon {
    width: 42px; height: 42px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    vertical-align: middle; margin-right: 8px;
}
.avatar-dot {
    width: 18px; height: 18px;
    border-radius: 50%; object-fit: cover;
    border: 1px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 儀表板 */
.status-dashboard { display: flex; gap: 12px; margin-bottom: 20px; margin-top: 10px; }
.user-stat-card {
    flex: 1; background: white; border-radius: 16px; padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-top: 5px solid #ccc;
    display: flex; flex-direction: column; justify-content: center;
}
.enen-style { border-top-color: var(--accent-blue); }
.wanwan-style { border-top-color: var(--accent-pink); }
.stat-head { font-weight: bold; margin-bottom: 8px; font-size: 1.05rem; display: flex; align-items: center; }
.stat-body { font-size: 0.95rem; color: #666; display: flex; flex-direction: column; gap: 4px; padding-left: 5px;}
.stat-body b { color: #333; font-size: 1.15rem; }

/* 月曆控制 */
.calendar-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding: 0 10px;
}
.nav-btn {
    background: white; border: 1px solid #ddd; border-radius: 50%; 
    width: 40px; height: 40px; font-size: 1.2rem; color: var(--text-main);
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: flex; justify-content: center; align-items: center;
}
#current-month-label { margin: 0; font-size: 1.3rem; color: var(--accent-color); font-weight: bold; letter-spacing: 1px; }

/* 月曆容器 */
.calendar-wrapper {
    background: var(--card-bg); border-radius: 20px; padding: 15px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    width: 100%;
    margin-bottom: 20px;
}
.calendar-header {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; margin-bottom: 10px; color: #999; font-weight: bold; font-size: 0.9rem;
}
.calendar-grid {
    display: grid; 
    grid-template-columns: repeat(7, minmax(0, 1fr)); 
    gap: 6px;
    width: 100%;
}

/* 日期格子 */
.day {
    /* 🔴 關鍵修正：調整長寬比，讓格子變長 */
    /* 0.8 代表：寬度是高度的 0.8 倍 (也就是高度會變長) */
    aspect-ratio: 0.8; 
    border-radius: 12px;
    background: #fdfdfd; 
    border: 1px solid #f0f0f0;
    position: relative; 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: 6px; /* 上方留白稍微多一點 */
    font-size: 0.95rem; cursor: pointer; overflow: visible; 
}
.day:active { background-color: #f5f5f5; transform: scale(0.95); transition: 0.1s;}
.day.today { 
    background-color: #fff9e6; border: 1.5px solid #ffe082; 
    font-weight: bold; color: #d97558;
}
.day.other-month { opacity: 0; pointer-events: none; }

/* 標記容器 */
.marks-container {
    display: flex; gap: 2px; margin-top: 4px; /* 間距微調 */
    flex-wrap: nowrap; 
    justify-content: center; width: 100%;
    pointer-events: none; z-index: 1;
}

/* 禮物容器 */
.gifts-container {
    position: absolute; bottom: -8px; display: flex;
    justify-content: center; width: 100%; z-index: 10; pointer-events: none;
}

/* 禮物標記 */
.gift-mark {
    font-size: 0.85rem;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-width: 2px; border-style: solid;
    margin: 0 -3px;
}
.gift-mark.enen { background-color: var(--accent-blue); border-color: var(--accent-blue); }
.gift-mark.wanwan { background-color: var(--accent-pink); border-color: var(--accent-pink); }

/* Toast */
.toast {
    visibility: hidden; min-width: 200px; background-color: rgba(60,60,60,0.95); color: #fff;
    text-align: center; border-radius: 50px; padding: 14px 24px;
    position: fixed; z-index: 999; left: 50%; bottom: 100px;
    transform: translateX(-50%); font-size: 1rem; opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.toast.show { visibility: visible; opacity: 1; bottom: 120px; }

/* 警示框 */
.alert-box {
    background: #fff3cd; border: 1px solid #ffeeba; color: #856404;
    padding: 12px 16px; border-radius: 12px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.95rem;
}
.alert-danger { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.alert-box button {
    background: white; border: 1px solid rgba(0,0,0,0.1); padding: 6px 14px;
    border-radius: 20px; cursor: pointer; font-size: 0.85rem; font-weight: bold;
}

/* 底部按鈕區 */
.actions-area { text-align: center; margin-bottom: 30px; }
.btn-action {
    background: #666; color: white; border: none; padding: 12px 30px;
    border-radius: 30px; font-size: 0.95rem; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-action:disabled { background: #e0e0e0; color: #aaa; box-shadow: none; }
.small-hint { font-size: 0.8rem; color: #aaa; margin-top: 10px; }

/* 懸浮按鈕 */
.fab-container {
    position: fixed; bottom: 35px; left: 0; width: 100%;
    display: flex; justify-content: center; z-index: 100; pointer-events: none;
}
.fab-btn-large {
    pointer-events: auto;
    background: linear-gradient(135deg, var(--accent-color), #f09880);
    color: white; border: none; border-radius: 50px; padding: 16px 40px;
    box-shadow: 0 8px 25px rgba(217, 117, 88, 0.4);
    display: flex; align-items: center; gap: 10px;
    font-size: 1.25rem; font-weight: bold; cursor: pointer; transition: transform 0.1s;
}
.fab-btn-large:active { transform: scale(0.95); }

/* Modal */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 200;
    backdrop-filter: blur(3px);
}
.modal-content {
    background: white; padding: 30px; border-radius: 24px;
    width: 85%; max-width: 340px; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.modal-content h2 { margin-top: 0; color: var(--accent-color); font-size: 1.4rem;}
.btn-group { margin-top: 25px; display: flex; gap: 12px; justify-content: center; }
.btn-primary, .btn-secondary, .btn-danger { 
    padding: 12px 24px; border-radius: 50px; cursor: pointer; font-size: 1rem; border: none; font-weight: bold;
}
.btn-primary { background: var(--accent-color); color: white; }
.btn-secondary { background: #f0f0f0; color: #555; }
.btn-danger { background: white; color: #d9534f; border: 2px solid #d9534f; }