:root {
 --glass-bg: rgba(255,255,255,0.6);
 --glass-border: rgba(255,255,255,0.8);
 --primary: #0a84ff;
 --text: #1c1c1e;
 --text-light: #3c3c4399;
 --bg: #f2f2f7;
 --skeleton: #ddd;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 background: var(--bg);
 color: var(--text);
 overflow-x:hidden;
}
.visually-hidden {
 position:absolute; width:1px; height:1px;
 overflow:hidden; clip:rect(0,0,0,0);
}

.glass-panel {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 backdrop-filter: blur(20px);
 border-radius: 20px;
 padding: 16px;
 margin: 16px auto;
 max-width: 1200px;
}

.screen { display:none; }
.screen.active { display:block; }

/* ▼▼▼ UI改善: ハンバーガーメニューの位置を右下に変更、透明度調整 ▼▼▼ */
.hamburger-btn {
 position:fixed;
 right:16px;
 bottom:16px;
 /* left: 16px; bottom: 16px; 古い指定を削除 */
 width:48px; height:48px; font-size:24px;
 background: rgba(255,255,255,0.8); /* 透明度を下げて見やすく */
 border:none;
 border-radius:50%; backdrop-filter:blur(10px);
 z-index:1000; cursor:pointer;
}
/* ▲▲▲ UI改善: ハンバーガーメニューの位置を右下に変更、透明度調整 ▲▲▲ */


.menu-sheet {
 position:fixed; left:0; bottom:0; width:100%;
 max-height:0; overflow:hidden;
 background: var(--glass-bg);
 transition: max-height 0.3s ease;
 z-index:999;
}
.menu-sheet.open { max-height:80vh; }
.menu-list {
 list-style:none; padding:16px;
 display:flex; flex-direction:column; gap:8px;
}
.menu-item {
 padding:12px; background: var(--glass-bg);
 border:none; border-radius:12px; text-align:left;
 font-size:1rem; cursor:pointer;
 transition: background .2s, transform .1s;
}
.menu-item.active {
 background: var(--primary);
 color: #fff;
 font-weight: bold;
}

.glass-input, .glass-btn, .link-btn {
 width:100%; margin:8px 0; padding:12px;
 border:none; border-radius:12px;
 background: var(--glass-bg);
 backdrop-filter: blur(10px);
 font-size:1rem; transition: background .2s, transform .1s;
}
.glass-btn:active, .link-btn:active, .tab-btn:active, .hamburger-btn:active {
 transform: scale(0.98);
}

.glass-input:focus, .glass-btn:hover {
 background: rgba(0,122,255,0.2);
}
.primary { background: var(--primary); color:#fff; }
.back-btn { background: rgba(60,60,67,0.2); }
.link-btn {
 background:none; border:none;
 color: var(--primary); text-decoration:underline;
 cursor:pointer;
}
.highlight {
 border:2px solid var(--primary);
 background: rgba(10,132,255,0.1);
 font-weight:bold; padding:14px;
}
#previous-record-preview {
 margin-bottom: 12px;
 padding: 10px;
 background: rgba(10, 132, 255, 0.1);
 border: 1px solid rgba(10, 132, 255, 0.2);
 border-radius: 8px;
 font-size: 0.9rem;
 text-align: center;
 color: var(--primary);
 font-weight: bold;
}

.home-tabs {
 display:flex; gap:8px; margin:16px 0;
}
.tab-btn {
 flex:1; padding:12px; background: var(--glass-bg);
 border:none; border-radius:12px; font-weight:bold;
 transition: background .2s, transform .1s;
}
.tab-btn.active, .tab-btn:hover {
 background: var(--primary); color:#fff;
}

.tab-content { display:none; }
.tab-content.active { display:block; }

.charts-group { margin-bottom:24px; }
.charts-group h3 { color: var(--text-light); margin-bottom:8px; }
.chart-wrap {
 position: relative; max-width:800px; height:250px;
 margin:0 auto 24px;
}
.chart-wrap canvas {
 width:100% !important; height:100% !important;
}
.skeleton {
 background: var(--skeleton);
 animation: pulse 1.5s infinite;
}
@keyframes pulse {
 0% { opacity:1; }
 50% { opacity:0.4; }
100% { opacity:1; }
}

.shortcuts {
 display:flex; gap:8px; margin-top:16px;
}
.shortcuts .glass-btn { flex:1; }

.gallery {
 display:flex; flex-wrap:wrap; gap:8px;
}
.gallery img {
 width:100px; height:100px; object-fit:cover;
 border-radius:12px; border:1px solid #ddd;
 loading: lazy;
}

.calendar-controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 16px;
}
#calendar-month-year {
 font-size: 1.2rem;
 font-weight: bold;
}
.calendar-controls .glass-btn {
 flex: 0 1 80px;
}

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 4px;
}
.calendar-day, .calendar-weekday {
 padding: 8px;
 text-align: center;
 border-radius: 8px;
}
.calendar-weekday {
 font-weight: bold;
 color: var(--text-light);
}
.calendar-day {
 cursor: pointer;
 transition: background .2s;
 position: relative;
}
.calendar-day.other-month {
 color: var(--text-light);
 cursor: default;
}
.calendar-day:not(.other-month):hover {
 background: rgba(0, 0, 0, 0.1);
}
.calendar-day.has-record::after {
 content: '';
 position: absolute;
 bottom: 6px;
 left: 50%;
 transform: translateX(-50%);
 width: 6px;
 height: 6px;
 background-color: var(--primary);
 border-radius: 50%;
}
.calendar-day.selected {
 background-color: var(--primary);
 color: #fff;
 font-weight: bold;
}
#calendar-details hr {
   border: none;
   height: 1px;
   background-color: var(--glass-border);
   margin: 24px 0;
}
#details-title {
 margin-bottom: 16px;
}
#details-content .detail-item {
 background: var(--glass-bg);
 padding: 8px;
 border-radius: 8px;
 margin-bottom: 8px;
}
#details-content .gallery {
   margin-top: 16px;
}

@media (max-width:600px) {
 .glass-panel { margin:8px; }
 .chart-wrap { height:200px; }
 .home-tabs { flex-direction:column; }
 .calendar-day, .calendar-weekday { padding: 4px; font-size: 0.8rem; }
}