/* 손주약방 - 고령자 친화 UI (이미지 디자인 반영)
   핵심: 연한 민트/베이지 톤, 둥근 카드, 캐릭터 중심, 부드러운 그림자 */

:root {
    --primary: #5DB075;
    --primary-light: #7BC88E;
    --primary-dark: #3D8A56;
    --accent: #FFB74D;
    --danger: #EF5350;
    --warning: #FFA726;
    --safe: #66BB6A;
    --bg: #F0F7F4;
    --bg-warm: #FFF8F0;
    --card-bg: #FFFFFF;
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-light: #B2BEC3;
    --border: #E8F5E9;
    --shadow: 0 4px 12px rgba(93, 176, 117, 0.12);
    --shadow-lg: 0 8px 24px rgba(93, 176, 117, 0.15);
    --radius: 20px;
    --radius-sm: 14px;
    --font-size-xl: 24px;
    --font-size-lg: 20px;
    --font-size-md: 17px;
    --font-size-sm: 15px;
    --font-size-xs: 13px;
    --touch-min: 56px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari 동적 뷰포트 */
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent; /* iOS 탭 하이라이트 제거 */
    -webkit-touch-callout: none; /* iOS 롱프레스 메뉴 방지 */
    overscroll-behavior: none; /* 풀다운 새로고침 방지 */
}

#app {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh; /* iOS 동적 뷰포트 높이 */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
}

/* ==================== 헤더 ==================== */
.app-header {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 12px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.app-logo {
    font-size: 24px;
}

.app-title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--primary-dark);
}

.btn-emergency {
    background: var(--danger);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(239, 83, 80, 0.3);
}

/* ==================== 메인 ==================== */
.app-main {
    flex: 1;
    padding: 16px;
    padding-bottom: 100px;
    overflow-y: auto;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

/* ==================== 캐릭터 인사말 카드 ==================== */
.greeting-card {
    background: linear-gradient(135deg, #E8F8F0, #D4F1E3);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.greeting-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(93, 176, 117, 0.1);
    border-radius: 50%;
}

.character-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A8E6CF, #7BC88E);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 42px;
    box-shadow: 0 4px 12px rgba(93, 176, 117, 0.25);
}

.greeting-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.4;
}

/* ==================== 건강 점수 카드 ==================== */
.health-score-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}

.health-score-card h2 {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.score-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.score-number {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.score-label {
    font-size: 11px;
    opacity: 0.9;
}

.score-status {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--safe);
}

.score-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.score-detail-item {
    background: var(--bg);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

.score-detail-item .label {
    font-size: 11px;
    color: var(--text-secondary);
}

.score-detail-item .value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ==================== 메인 액션 그리드 (2x3) ==================== */
.main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.action-btn {
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-sm);
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow);
}

.action-btn:active {
    transform: scale(0.95);
    box-shadow: var(--shadow-lg);
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.action-voice .action-icon { background: #E3F2FD; }
.action-camera .action-icon { background: #FFF3E0; }
.action-medicine .action-icon { background: #E8F5E9; }
.action-chat .action-icon { background: #F3E5F5; }
.action-health .action-icon { background: #FFF8E1; }
.action-adcheck .action-icon { background: #E0F7FA; }

.action-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.action-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.2;
}

/* ==================== 오늘의 복약 카드 ==================== */
.today-meds-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.today-meds-card h2 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.med-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.med-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: var(--font-size-md);
}

.med-item.done {
    background: #E8F5E9;
    border-left: 4px solid var(--safe);
}

.med-item.pending {
    background: #FFF8E1;
    border-left: 4px solid var(--warning);
}

.med-item.upcoming {
    background: #F5F5F5;
    border-left: 4px solid var(--text-light);
}

.med-pill-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.med-info {
    flex: 1;
}

.med-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.med-time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.med-check {
    font-size: 20px;
}

.btn-take-med {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
}

.med-status {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    font-weight: 500;
}

/* ==================== 음성/OCR 화면 ==================== */
.voice-container, .ocr-container, .medications-container {
    padding: 12px 0;
}

.voice-instruction, .ocr-instruction {
    text-align: center;
    margin-bottom: 28px;
}

.big-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.sub-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.btn-voice-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    border: none;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(93, 176, 117, 0.35);
}

.btn-voice-record:active, .btn-voice-record.recording {
    background: linear-gradient(135deg, #EF5350, #D32F2F);
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(239, 83, 80, 0.4);
}

.record-icon { font-size: 44px; }
.record-label { font-size: var(--font-size-sm); font-weight: 700; margin-top: 6px; }

.voice-result, .ocr-result {
    margin-top: 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.voice-result h3, .ocr-result h3 {
    font-size: var(--font-size-md);
    margin-bottom: 10px;
}

/* ==================== 카메라 ==================== */
.camera-area { text-align: center; }

.btn-camera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 2px dashed var(--primary-light);
    border-radius: var(--radius);
    padding: 36px;
    width: 100%;
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--primary);
    transition: background 0.2s;
}

.btn-camera:active { background: var(--bg); }
.camera-icon { font-size: 48px; }

/* ==================== 복약 관리 ==================== */
.med-category { margin-bottom: 18px; }

.med-category h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.btn-dur-check {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: #1565C0;
    cursor: pointer;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.15);
}

/* ==================== 챗봇 ==================== */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg.user { flex-direction: row-reverse; }

.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A8E6CF, #7BC88E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.msg.user .msg-avatar {
    background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.msg-bubble {
    background: var(--card-bg);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 78%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.msg.user .msg-bubble {
    background: var(--primary);
    color: white;
    border-radius: 18px 18px 4px 18px;
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.chat-text-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: var(--font-size-sm);
    outline: none;
    background: var(--bg);
}

.chat-text-input:focus { border-color: var(--primary); background: white; }

.btn-voice-input, .btn-send {
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.btn-voice-input { background: #FFF3E0; }
.btn-send { background: var(--primary); color: white; padding: 0 16px; border-radius: 24px; }

/* ==================== 화면 헤더 ==================== */
.screen-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.screen-header h2 { font-size: var(--font-size-xl); font-weight: 700; }

.btn-back {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: 8px;
    color: var(--primary);
    font-weight: 700;
}

/* ==================== 하단 네비게이션 ==================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    background: white;
    border-top: 1px solid var(--border);
    padding: 6px 0 env(safe-area-inset-bottom, 8px);
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    min-height: 48px;
    transition: color 0.2s;
}

.nav-item.active .nav-icon { color: var(--primary); }
.nav-item.active .nav-label { color: var(--primary); font-weight: 700; }

.nav-icon { font-size: 22px; color: var(--text-light); }
.nav-label { font-size: 11px; color: var(--text-secondary); }

/* ==================== DUR 결과 ==================== */
.dur-alert {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border-left: 4px solid;
}

.dur-alert.high { background: #FFEBEE; border-color: var(--danger); }
.dur-alert.medium { background: #FFF8E1; border-color: var(--warning); }
.dur-alert.low { background: #E3F2FD; border-color: #1976D2; }

.dur-alert-title { font-weight: 700; font-size: var(--font-size-sm); margin-bottom: 4px; }
.dur-alert-desc { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: 4px; }
.dur-alert-rec { font-size: var(--font-size-xs); color: var(--primary-dark); font-weight: 500; }

/* ==================== WCAG 2.1 접근성 ==================== */
*:focus-visible {
    outline: 3px solid #1976D2;
    outline-offset: 3px;
    border-radius: 4px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-contrast: high) {
    :root { --primary: #006400; --text-primary: #000; --bg: #FFF; --border: #000; }
    .action-btn { border: 2px solid #000; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1A2E23; --card-bg: #243B2E; --text-primary: #F0F7F4;
        --text-secondary: #A8D5BA; --border: #2D4A38;
        --text-light: #9FB8AB;      /* 어두운 배경에서 안내문/부가설명 가독성 확보 */
        --primary-dark: #8FD9A5;    /* 카드 제목(💓 나의 질환 정보, 🍊 식단팁 등)을 밝은 민트로 */
    }
    .app-header { background: #1A2E23; border-color: #2D4A38; }
    .chat-text-input { background: #2D4A38; color: #F0F7F4; }
}

button, a, input, [role="button"] { min-height: 44px; min-width: 44px; }
p, li, span, div { line-height: 1.5; letter-spacing: 0.02em; }

/* ==================== 반응형 ==================== */

/* iPhone SE, 소형 Android (360px 이하) */
@media (max-width: 360px) {
    :root { --font-size-xl: 20px; --font-size-lg: 17px; --font-size-md: 15px; --font-size-sm: 13px; }
    .main-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
    .action-btn { min-height: 90px; padding: 14px 8px; }
    .action-icon { width: 40px; height: 40px; font-size: 20px; }
    .character-avatar { width: 60px; height: 60px; font-size: 32px; }
    .greeting-card { padding: 20px 16px; }
    .health-score-card { flex-direction: column; text-align: center; }
    .score-details { grid-template-columns: 1fr 1fr; }
}

/* iPhone 12/13/14, 표준 Android (361~393px) */
@media (min-width: 361px) and (max-width: 393px) {
    :root { --font-size-xl: 22px; --font-size-lg: 18px; --font-size-md: 16px; }
    .main-actions { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}

/* iPhone 14 Pro Max, 대형 Android (394~430px) */
@media (min-width: 394px) and (max-width: 430px) {
    :root { --font-size-xl: 24px; --font-size-lg: 20px; --font-size-md: 17px; }
    .main-actions { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
}

/* 태블릿 (431px 이상) */
@media (min-width: 431px) {
    #app { max-width: 480px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
    body { background: #E8F0EC; }
    :root { --font-size-xl: 26px; --font-size-lg: 22px; --font-size-md: 18px; }
}

/* 가로 모드 (landscape) */
@media (orientation: landscape) and (max-height: 500px) {
    .greeting-card { padding: 12px; }
    .character-avatar { width: 50px; height: 50px; font-size: 26px; }
    .main-actions { grid-template-columns: repeat(3, 1fr); }
    .action-btn { min-height: 80px; }
    .app-main { padding-bottom: 70px; }
}

/* iOS Safe Area (노치, 다이나믹 아일랜드, 홈 인디케이터) */
@supports (padding-top: env(safe-area-inset-top)) {
    .app-header {
        padding-top: calc(14px + env(safe-area-inset-top));
    }
    .app-main {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }
}

/* Android 네비게이션 바 대응 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* 높이가 짧은 기기 (iPhone SE 1세대 등) */
@media (max-height: 667px) {
    .greeting-card { padding: 16px; margin-bottom: 10px; }
    .character-avatar { width: 56px; height: 56px; font-size: 28px; }
    .health-score-card { padding: 14px; margin-bottom: 10px; }
    .score-circle { width: 56px; height: 56px; }
    .score-number { font-size: 20px; }
    .main-actions { gap: 8px; margin-bottom: 10px; }
    .action-btn { min-height: 90px; padding: 12px 8px; }
}

/* 초대형 디스플레이 (iPhone 16 Pro Max, Galaxy S24 Ultra) */
@media (min-width: 400px) and (min-height: 850px) {
    .greeting-card { padding: 32px 28px; }
    .character-avatar { width: 90px; height: 90px; font-size: 48px; }
    .main-actions { gap: 14px; }
    .action-btn { min-height: 120px; }
    .med-item { padding: 16px 18px; }
}


/* ==================== iOS 전용 ====================  */
html.ios #app {
    min-height: var(--real-vh, 100vh);
}

html.ios .chat-container {
    height: calc(var(--real-vh, 100vh) - 200px);
}

html.ios input, html.ios textarea {
    font-size: 16px; /* iOS 자동 확대 방지 (16px 이상이면 확대 안 함) */
}

/* ==================== Android 전용 ====================  */
html.android .bottom-nav {
    padding-bottom: 4px; /* Android 3버튼 네비 공간 */
}

/* 키보드 열림 시 하단바 숨기기 */
body.keyboard-open .bottom-nav {
    display: none;
}

body.keyboard-open .app-main {
    padding-bottom: 16px;
}

body.keyboard-open .chat-container {
    height: calc(100vh - 140px);
}

/* ==================== 터치 피드백 ====================  */
html.mobile .action-btn:active {
    transform: scale(0.93);
    opacity: 0.8;
}

html.mobile .btn-take-med:active,
html.mobile .btn-send:active,
html.mobile .btn-camera:active {
    opacity: 0.7;
}

/* iOS 스크롤 바운스 효과 유지하되 본문만 */
html.ios .app-main {
    -webkit-overflow-scrolling: touch;
}

/* ==================== 헤더 업데이트 (날짜/시간 + 약 알림) ==================== */
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.header-datetime {
    font-weight: 500;
}

.header-next-alarm {
    background: #FFF3E0;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    color: #E65100;
    font-size: 12px;
}

.header-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==================== 캐릭터 이미지 ==================== */
.character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.character-avatar {
    overflow: hidden;
}

.character-avatar-sm {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF9C4, #FFE082);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    box-shadow: 0 3px 10px rgba(255, 224, 130, 0.4);
    overflow: hidden;
}

.character-img-sm {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 건강정보 화면 (그림2 - 4분할 카드) ==================== */
.health-info-container {
    padding: 0;
}

.health-greeting-card {
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}

.health-greeting-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #5D4037;
    margin-bottom: 10px;
}

.health-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.health-tag {
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: var(--font-size-xs);
    color: #5D4037;
    font-weight: 500;
}

.health-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.health-info-card {
    border-radius: var(--radius-sm);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.health-info-card:active {
    transform: scale(0.96);
}

.card-disease {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

.card-diet {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
}

.card-supplement {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.card-relax {
    background: linear-gradient(135deg, #FCE4EC, #F8BBD0);
}

.card-icon-area {
    font-size: 32px;
    margin-bottom: 4px;
}

.card-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.card-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

/* 건강정보 상세 패널 */
.health-detail-panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    animation: slideDown 0.25s ease;
}

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

.detail-card h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary-dark);
}

.detail-card h4 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: 14px 0 8px;
    color: var(--text-primary);
}

.detail-card p {
    margin-bottom: 8px;
}

.detail-card ul, .detail-card ol {
    padding-left: 20px;
    margin-bottom: 10px;
}

.detail-card li {
    margin-bottom: 6px;
    font-size: var(--font-size-sm);
}

.tip-item {
    background: var(--bg);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
}

.tip-foods {
    font-size: var(--font-size-xs);
    color: var(--primary);
}

.avoid-note {
    color: var(--danger);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.meal-suggestion {
    background: #E8F5E9;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.disclaimer {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    margin-top: 10px;
}

.mood-msg {
    font-size: var(--font-size-md);
    color: #5D4037;
    font-style: italic;
    margin-bottom: 12px;
}

.music-item, .activity-item {
    background: var(--bg);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: var(--font-size-sm);
}

.music-benefit, .activity-benefit {
    font-size: var(--font-size-xs);
    color: var(--primary);
}

.supplement-item {
    background: var(--bg);
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.supplement-item p {
    font-size: var(--font-size-xs);
    margin-bottom: 2px;
}

.caution-text {
    color: var(--warning);
    font-size: var(--font-size-xs);
}

.caution-item {
    background: #FFF8E1;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 3px solid var(--warning);
}

.caution-item ul {
    margin-top: 6px;
    padding-left: 18px;
}

.caution-item li {
    font-size: var(--font-size-sm);
    margin-bottom: 4px;
}

/* ==================== 의약품 화면 (그림3 - 복약기간/약이미지/퀵액션) ==================== */
.med-period-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary);
}

.med-period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.med-period-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.med-period-dosage {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--bg);
    padding: 3px 10px;
    border-radius: 10px;
}

.med-period-info {
    font-size: var(--font-size-xs);
    color: var(--primary-dark);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.med-alarm-info {
    font-size: var(--font-size-xs);
    color: #E65100;
    margin-top: 6px;
    font-weight: 500;
}

/* 약 비주얼 리스트 (약 이미지 포함) */
.med-visual-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.med-visual-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.med-visual-item.done {
    border-left: 4px solid var(--safe);
}

.med-visual-item.warning {
    border-left: 4px solid var(--warning);
}

.med-pill-visual {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pill-image {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pill-white-round {
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #E0E0E0);
    border: 1px solid #BDBDBD;
    border-radius: 50%;
}

.pill-white-oval {
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #E0E0E0);
    border: 1px solid #BDBDBD;
    border-radius: 40%;
    width: 40px;
    height: 28px;
}

.med-status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.med-status-badge.done {
    background: #E8F5E9;
    color: #2E7D32;
}

.med-status-badge.warning {
    background: #FFF3E0;
    color: #E65100;
}

/* 하단 퀵 액션 버튼 */
.med-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.med-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    background: #E8F5E9;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.15s;
}

.med-quick-btn:active {
    transform: scale(0.94);
}

.quick-icon {
    font-size: 22px;
}

.quick-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

/* ==================== 나의 건강상태 화면 (그림4) ==================== */
.mystatus-container {
    padding: 0;
}

.status-character-card {
    text-align: center;
    margin-bottom: 16px;
}

.status-message {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 8px;
}

.health-score-main {
    text-align: center;
    margin-bottom: 20px;
}

.score-circle-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 6px 20px rgba(93, 176, 117, 0.3);
    margin-bottom: 8px;
}

.score-number-lg {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.score-label-lg {
    font-size: 13px;
    opacity: 0.9;
}

.score-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
}

/* 바이탈 4분할 카드 */
.vital-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.vital-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vital-icon {
    font-size: 20px;
}

.vital-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.vital-value {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.vital-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
    margin: 2px auto 0;
}

.vital-status.good {
    background: #E8F5E9;
    color: #2E7D32;
}

.vital-status.warning {
    background: #FFF3E0;
    color: #E65100;
}

.vital-status.danger {
    background: #FFEBEE;
    color: #C62828;
}

/* 차트 섹션 */
.chart-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.chart-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chart-tab {
    flex-shrink: 0;
    padding: 8px 12px;
    background: var(--bg);
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.chart-tab.active {
    background: var(--primary);
    color: white;
}

.chart-container {
    height: 200px;
    position: relative;
}

/* ==================== 반응형 추가 (새 컴포넌트) ==================== */
@media (max-width: 360px) {
    .health-cards-grid { gap: 8px; }
    .health-info-card { min-height: 100px; padding: 14px 10px; }
    .card-icon-area { font-size: 26px; }
    .vital-cards-grid { gap: 8px; }
    .vital-card { padding: 10px; }
    .med-quick-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
    .chart-tabs { gap: 2px; }
    .chart-tab { padding: 6px 8px; font-size: 11px; }
}

@media (min-width: 400px) and (min-height: 850px) {
    .health-info-card { min-height: 140px; }
    .vital-card { padding: 18px; }
    .score-circle-lg { width: 120px; height: 120px; }
    .score-number-lg { font-size: 42px; }
}


/* ==================== 프로필 버튼 (헤더) ==================== */
.btn-profile {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    border: 2px solid var(--primary);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(93, 176, 117, 0.3);
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ==================== 사용자 등록/프로필 화면 ==================== */
.profile-container {
    padding: 0;
}

.profile-card {
    background: linear-gradient(135deg, #E8F8F0, #D4F1E3);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF9C4, #FFE082);
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(93, 176, 117, 0.2);
    overflow: hidden;
}

.profile-name {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.profile-detail {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-profile-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.15s;
    text-align: left;
}

.btn-profile-action:active {
    transform: scale(0.97);
}

.btn-profile-action.logout {
    color: var(--danger);
    margin-top: 10px;
}

/* 인증 탭 */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: var(--bg);
    border-radius: 14px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(93, 176, 117, 0.3);
}

/* 인증 폼 */
.auth-form {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: var(--font-size-md);
    font-family: 'Noto Sans KR', sans-serif;
    outline: none;
    transition: border-color 0.2s;
    background: var(--bg);
}

.form-input:focus {
    border-color: var(--primary);
    background: white;
}

.btn-auth-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    border: none;
    border-radius: 14px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(93, 176, 117, 0.3);
    transition: transform 0.15s;
}

.btn-auth-submit:active {
    transform: scale(0.97);
}

.auth-hint {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-light);
    margin-top: 12px;
}

.auth-message {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
}

.auth-message.success {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

.auth-message.error {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}

/* ==================== 다크 모드 가독성 보정 (파일 맨 끝: 소스 순서로 확실히 우선) ====================
   밝은 배경을 전제로 작성된 요소들이 다크 모드에서 글씨가 밝게 뒤집혀 안 보이던 문제를 바로잡는다.
   기본 규칙과 명시도가 같으므로, 반드시 그 규칙들보다 뒤(파일 끝)에 위치해야 우선 적용된다. */
@media (prefers-color-scheme: dark) {
    /* 건강정보 4분할 카드: 밝은 파스텔 배경 고정 → 글씨를 진하게 */
    .health-info-card .card-title { color: #1B3A2A; }
    .health-info-card .card-desc { color: #3F5A4C; }

    /* 밝은 배경 위 텍스트 블록 → 어두운 배경 + 밝은 글씨 */
    .meal-suggestion { background: #2E4B39; color: var(--text-primary); }   /* 🍽️ 식단 제안 */
    .caution-item { background: #3A331C; color: var(--text-primary); }
    .caution-item li { color: var(--text-primary); }

    /* 어두운 글씨(#5D4037)가 어두운 배경에 묻히던 문구 → 밝은 색 */
    .mood-msg { color: #FFD9A8; }               /* 심신안정에 좋은 노래 문구 */
    .avoid-note { color: #FF8A80; }             /* ⚠️ 피할 음식 */
    .caution-text { color: #FFC061; }           /* 영양제 주의 문구 */

    /* DUR 경고 카드(밝은 배경 전제) → 어두운 배경으로 */
    .dur-alert.high { background: #3A2626; }
    .dur-alert.medium { background: #3A331C; }
    .dur-alert.low { background: #22303A; }

    /* 홈 "복용 중인 약" 카드: 밝은 배경(.done #E8F5E9 / .pending #FFF8E1 / .upcoming #F5F5F5)을
       가진 항목만 글씨를 진하게. (색 미지정 .med-name은 기본 --text-primary라 밝은 배경에서 안 보였음)
       배경이 어두운 일반 .med-item(예: OCR 결과 목록)은 제외해야 흰 글씨가 유지됨. */
    .med-item.done .med-name, .med-item.pending .med-name, .med-item.upcoming .med-name { color: #1B3A2A; }
    .med-item.done .med-time, .med-item.pending .med-time, .med-item.upcoming .med-time { color: #3F5A4C; }
    .med-item.done .med-status, .med-item.pending .med-status, .med-item.upcoming .med-status { color: #5A6B60; }

    /* 의약품 정보 화면 하단 퀵 액션 버튼: 밝은 초록 배경(#E8F5E9) 고정 → 글씨 진하게
       (처방전 촬영하기 / 병용금기 확인 / 주의사항 보기 / 건강기능식품 추천) */
    .med-quick-btn .quick-label { color: #1B3A2A; }
}

/* ==================== 식약처 의약품 허가정보 카드 ==================== */
.drug-search-box {
    margin-top: 24px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.drug-search-box h3 { margin-bottom: 6px; color: var(--primary-dark); }
.drug-search-row { display: flex; gap: 8px; margin-top: 12px; }
.drug-search-input {
    flex: 1;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}
.drug-search-input:focus { border-color: var(--primary); }
.btn-drug-search {
    padding: 0 22px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.btn-drug-search:active { background: var(--primary-dark); }

.btn-drug-detail {
    width: 100%;
    margin: 6px 0 14px;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--border);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.btn-drug-detail:active { background: #d7ecda; }

.drug-info-card {
    margin: 10px 0 16px;
    padding: 18px;
    background: var(--bg-warm);
    border: 2px solid var(--border);
    border-radius: var(--radius);
}
.drug-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.drug-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.drug-tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    background: #E8F5E9;
    padding: 4px 12px;
    border-radius: 999px;
}
.drug-tag-plain { color: var(--text-secondary); background: #EEE; }
.drug-pill-img {
    display: block;
    max-width: 160px;
    width: 100%;
    border-radius: var(--radius-sm);
    margin: 0 auto 14px;
}
.drug-info-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.drug-info-row:first-of-type { border-top: none; }
.drug-info-label {
    flex: 0 0 96px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
}
.drug-info-val {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-line;
}
.drug-demo-note, .drug-source-line {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 기기 내 OCR 진행 표시 */
.ocr-progress {
    width: 100%;
    height: 12px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 6px;
}
.ocr-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
    transition: width 0.3s ease;
}
.ocr-rawtext {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-line;
    max-height: 160px;
    overflow-y: auto;
}