* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: #F2F2F7; color: #1C1C1E; display: flex; flex-direction: column; height: 100vh; overflow-x: hidden; }
header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 16px 20px; font-weight: 600; font-size: 17px; border-bottom: 0.5px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.logout-btn { background: none; border: none; color: #FF3B30; font-size: 15px; cursor: pointer; font-weight: 500; }
.dock-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 30px; display: flex; padding: 6px; gap: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 1000; }
.dock-btn { padding: 12px 20px; background: transparent; border: none; border-radius: 24px; font-size: 15px; font-weight: 600; color: #8E8E93; cursor: pointer; transition: 0.2s; white-space: nowrap; word-break: keep-all; display: flex; align-items: center; gap: 6px; }
.dock-btn.active { background: #007AFF; color: white; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); }
#main-container { display: none; flex-direction: column; height: 100vh; padding-bottom: 100px; width: 100%; }
.tab-content { flex: 1; display: none; overflow-y: auto; padding: 20px; width: 100%; }
.tab-content.active { display: flex; flex-direction: column; }

.diary-item { padding: 18px; margin-bottom: 14px; background: white; border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: all 0.3s ease; }
.diary-date { font-size: 13px; color: #8E8E93; margin-bottom: 8px; display: block; font-weight: 500; }
.diary-text { font-size: 16px; line-height: 1.5; color: #1C1C1E; margin-bottom: 14px; word-wrap: break-word; white-space: pre-wrap; }
.diary-actions { display: flex; gap: 8px; justify-content: flex-end; }
.action-btn { background: #F2F2F7; border: none; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; color: #007AFF; transition: 0.2s; }
.action-btn.delete { color: #FF3B30; background: #FFE5E5; }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 수정 모드: 인라인 style 조작 대신 클래스 하나로 전환 */
.diary-item.editing .diary-text { white-space: normal; margin-bottom: 0; }
.diary-item.editing .action-btn.save { color: #34C759; background: #E8F8F0; }
.diary-item.editing .action-btn.cancel { color: #8E8E93; background: #F2F2F7; }

.inline-edit-textarea { width: 100%; min-height: 80px; padding: 12px; border: 1.5px solid #007AFF; border-radius: 12px; font-size: 16px; font-family: inherit; resize: vertical; outline: none; background: #F8F9FA; color: #1C1C1E; line-height: 1.5; margin-bottom: 14px; }
.composer { margin-top: auto; flex-shrink: 0; width: 100%; }

/* 일기 작성 — 본문은 플로팅 버튼이 여는 모달에서만 씁니다.
   탭 하단은 체크인이 쓰고, 긴 글은 화면 전체를 쓰는 편이 낫습니다. */
.floating-write-btn { display: none; position: fixed; bottom: 100px; right: 20px; background: #007AFF; color: white; border: none; padding: 14px 20px; border-radius: 25px; font-weight: 600; font-size: 15px; box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3); cursor: pointer; z-index: 1005; }
.diary-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1100; }
.diary-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background: white; padding: 20px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 1101; }
.diary-popup h3 { margin: 0; color: #1C1C1E; font-size: 16px; }
.diary-guide { background: #F2F2F7; padding: 10px 12px; border-radius: 10px; margin-top: 8px; font-size: 12px; color: #48484A; line-height: 1.4; }
.diary-guide b:first-child { color: #007AFF; display: block; margin-bottom: 2px; }
.diary-popup textarea { width: 100%; height: 180px; padding: 12px; margin: 12px 0; border: 1px solid #ccc; border-radius: 8px; font-size: 13px; font-family: inherit; line-height: 1.5; box-sizing: border-box; resize: none; outline: none; }
.diary-popup textarea:disabled { opacity: 0.6; }
.diary-popup-actions { display: flex; justify-content: flex-end; gap: 8px; }
.popup-btn { padding: 10px 16px; border-radius: 10px; border: none; background: #E5E5EA; color: #1C1C1E; font-weight: 600; font-size: 13px; cursor: pointer; }
.popup-btn.primary { background: #007AFF; color: white; }
.popup-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 체크인 — 전부 선택 항목이므로 기본은 접혀 있고 시각적으로 가볍게 둡니다. */
.checkin { margin-bottom: 8px; }
.checkin-toggle { background: none; border: none; color: #007AFF; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.checkin-panel { display: none; background: white; border-radius: 16px; padding: 12px 14px; margin-top: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.checkin.open .checkin-panel { display: block; }
.checkin-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
/* 7영역 이름("인간관계", "신체·건강")이 한 줄에 들어가야 합니다. */
.checkin-label { font-size: 12px; color: #8E8E93; font-weight: 600; width: 64px; flex-shrink: 0; word-break: keep-all; }
.checkin-controls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.checkin-chip { border: 1px solid #E5E5EA; background: white; border-radius: 12px; padding: 5px 9px; font-size: 13px; cursor: pointer; color: #3A3A3C; line-height: 1.2; }
.checkin-chip.selected { background: #007AFF; border-color: #007AFF; color: white; font-weight: 600; }
.checkin-level { font-size: 15px; min-width: 38px; }
.checkin-value { font-size: 13px; font-weight: 600; min-width: 40px; text-align: center; color: #1C1C1E; }
.checkin-value.empty { color: #C7C7CC; }
.checkin-note { font-size: 12px; color: #8E8E93; line-height: 1.5; margin-bottom: 8px; }
.checkin-divider { height: 0.5px; background: #E5E5EA; margin: 10px 0 4px; }

.empty-state { text-align: center; color: #8E8E93; margin-top: 30px; font-size: 15px; line-height: 1.5; }

.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 20px; font-weight: 700; }
.cal-nav-btn { background: none; border: none; font-size: 22px; color: #007AFF; cursor: pointer; padding: 5px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; }
.cal-day-name { font-size: 13px; color: #8E8E93; font-weight: 600; margin-bottom: 10px; }
.cal-date { padding: 8px 0 6px; background: white; border-radius: 14px; font-size: 16px; cursor: pointer; transition: 0.2s; color: #1C1C1E; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; justify-content: center; }
.cal-date.today { color: #007AFF; font-weight: 700; }
/* 체크인한 날. 일기를 안 써도 체크인만 남길 수 있으므로 편수 배지와 별개로 표시합니다. */
.cal-date.checked { box-shadow: inset 0 0 0 1.5px #34C759; }
.cal-date.active.checked { box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); }
.cal-date.active { background: #007AFF !important; color: white !important; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); }
.cal-count { font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 8px; background: #E8F1FF; color: #007AFF; }
.cal-date.active .cal-count { background: rgba(255,255,255,0.28); color: white; }
.selected-date-area { margin-top: 25px; padding-top: 25px; border-top: 0.5px solid rgba(0,0,0,0.1); display: flex; flex-direction: column; flex: 1; }
.selected-date-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #1C1C1E; }

.ios-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 9999; }
.ios-modal { background: rgba(255, 255, 255, 0.95); width: 280px; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.ios-modal-title { font-weight: 600; font-size: 17px; padding: 20px 16px 10px; color: #000; }
.ios-modal-desc { font-size: 13px; padding: 0 16px 15px; color: #333; line-height: 1.4; display: none; }
.ios-modal-actions { display: flex; border-top: 0.5px solid #A9A9AE; }
.ios-btn { flex: 1; padding: 14px; background: none; border: none; font-size: 17px; color: #007AFF; cursor: pointer; border-right: 0.5px solid #A9A9AE; }
.ios-btn:last-child { border-right: none; font-weight: 600; }
.ios-btn.destructive { color: #FF3B30; }
.ios-btn.hidden { display: none; }

#auth-container { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; padding: 20px; }
.auth-card { background: white; padding: 30px; border-radius: 20px; width: 100%; max-width: 400px; text-align: center; }
.auth-title { margin-bottom: 20px; }
.auth-input { width: 100%; padding: 14px; margin: 8px 0; border: 1px solid #E5E5EA; border-radius: 12px; font-size: 16px; outline: none; }
.auth-btn { width: 100%; padding: 14px; background-color: #007AFF; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; margin-top: 12px; cursor: pointer;}
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-toggle { margin-top: 16px; color: #007AFF; font-size: 14px; cursor: pointer; }

/* AI 탭 전용 스타일 */
.ai-header-card { background: linear-gradient(135deg, #007AFF, #5AC8FA); padding: 24px; border-radius: 20px; color: white; text-align: center; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(0, 122, 255, 0.2); }
.ai-header-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ai-header-card p { font-size: 14px; opacity: 0.9; margin-bottom: 16px; line-height: 1.4; }
.generate-btn { background: white; color: #007AFF; border: none; padding: 14px 24px; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.2s; }
.generate-btn:active { transform: scale(0.96); }
.generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 보고서 카드 스타일 */
.ai-report-card { background: white; padding: 24px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 15px; border-left: 5px solid #5AC8FA; }
.ai-report-header { display: flex; justify-content: space-between; align-items: center; }
.ai-report-date { font-size: 13px; color: #8E8E93; font-weight: 600; margin-bottom: 12px; display: block; }
.ai-report-content { font-size: 15px; line-height: 1.7; color: #1C1C1E; white-space: pre-wrap; word-wrap: break-word; }
.ai-report-delete { padding: 4px 8px; font-size: 12px; }
.ai-report-meta { font-size: 12px; color: #AEAEB2; margin-top: 14px; }

/* 분석 대시보드 */
.panel { background: white; border-radius: 20px; padding: 20px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.panel h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: #1C1C1E; }
.panel svg { display: block; margin: 0 auto; max-width: 360px; }
.chart-legend { text-align: center; font-size: 12px; color: #8E8E93; margin-top: 6px; }

.summary-card { text-align: center; }
.summary-score { font-size: 52px; font-weight: 800; line-height: 1.1; }
.summary-delta { font-size: 13px; color: #8E8E93; margin-top: 6px; }
/* 종합 점수가 독립적 판단인 척하지 않도록 계산 방식을 밝힙니다. */
.summary-note { font-size: 12px; color: #AEAEB2; margin-top: 10px; line-height: 1.5; }

.area-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.area-row { display: flex; align-items: center; gap: 10px; }
.area-name { font-size: 13px; color: #3A3A3C; width: 66px; flex-shrink: 0; }
.area-bar { flex: 1; height: 8px; background: #F2F2F7; border-radius: 4px; overflow: hidden; }
.area-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.area-score { font-size: 12px; font-weight: 700; color: #3A3A3C; width: 56px; text-align: right; flex-shrink: 0; }

.weak-card { border-left: 5px solid #FF9500; }
.weak-item { padding: 10px 0; border-bottom: 0.5px solid #F2F2F7; }
.weak-item:last-child { border-bottom: none; }
.weak-head { display: flex; justify-content: space-between; align-items: baseline; }
.weak-name { font-size: 15px; font-weight: 700; }
.weak-score { font-size: 20px; font-weight: 800; }
.weak-evidence { font-size: 13px; color: #6C6C70; margin-top: 6px; line-height: 1.5; }

/* 기록 부족은 "약점"과 시각적으로 확실히 구분되어야 합니다 — 다른 뜻이므로 색도 다릅니다. */
.coverage-card { border-left: 5px solid #C7C7CC; }
.coverage-note { font-size: 13px; color: #8E8E93; line-height: 1.5; margin-bottom: 10px; }
.coverage-item { display: flex; gap: 8px; padding: 6px 0; align-items: baseline; }
.coverage-name { font-size: 13px; font-weight: 700; color: #3A3A3C; width: 66px; flex-shrink: 0; }
.coverage-hint { font-size: 13px; color: #6C6C70; line-height: 1.5; }

/* 종합 점수 가중치 조절 — UI가 존재한다는 사실 자체가 "이건 추정치"라는 신호입니다. */
.weights-panel > summary { font-size: 15px; font-weight: 700; cursor: pointer; }
.weight-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.weight-slider { flex: 1; min-width: 0; accent-color: #007AFF; }
.weight-value { font-size: 12px; font-weight: 700; color: #3A3A3C; width: 42px; text-align: right; flex-shrink: 0; }
.weights-panel .action-btn { margin-top: 12px; }