/* 앱 아이콘 팔레트: 세이지 배경 · 크림 접시 · 짙은 잎 · 코랄 체크 */
:root {
    --page: #F6F1E6;
    --card: #FFFDF7;
    --row: #F8F4EA;
    --input: #F3EEE2;
    --leaf: #4F7D5C;
    --leaf-dark: #3C6648;
    --leaf-soft: #E5EEE1;
    --sage: #88A988;
    --sage-dark: #6C9171;
    --sage-soft: #EDF3EA;
    --coral: #EF8267;
    --coral-dark: #C9614A;
    --coral-soft: #FCE8E1;
    --clay: #D6A57F;
    --clay-text: #A9734D;
    --clay-soft: #F6EADF;
    --sky-text: #4C8299;
    --sky-soft: #E5EFF2;
    --butter: #E9C46A;
    --butter-text: #9A7420;
    --butter-soft: #FAF0D7;
    --track: #EDE7DA;
    --text: #2F3D33;
    --sub: #8A938A;
    --cream: #FBF1E3;
    --shadow: 0 3px 18px rgba(60, 102, 72, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--page);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { cursor: pointer; border: 0; background: none; }

/* ---------- 앱 틀: 왼쪽 사이드바 / 휴대폰은 하단 탭 ---------- */
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; padding: 26px 18px 22px;
    background: linear-gradient(var(--sage), var(--sage-dark));
    border-radius: 0 32px 32px 0; box-shadow: var(--shadow); color: var(--cream);
}
.brand { display: flex; align-items: center; gap: 12px; margin: 0 0 28px 6px; }
.brand img { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 2px 10px rgba(47, 74, 54, .25); }
.brand b { display: block; font-size: 18px; }
.brand small { font-size: 11px; color: #E3EBDD; white-space: nowrap; }
.nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 3px 0;
    border-radius: 16px; color: var(--cream); text-decoration: none; font-weight: 600; font-size: 15px;
}
.nav a:hover { background: rgba(251, 241, 227, .15); }
.nav a.active { background: var(--cream); color: var(--leaf-dark); }
.nav .emoji { font-size: 18px; }
.cheer { margin-top: auto; padding: 16px; border-radius: 20px; background: rgba(251, 241, 227, .2); text-align: center; font-size: 12px; line-height: 1.5; }
.cheer .emoji { font-size: 26px; display: block; margin-bottom: 6px; }
.account { margin-top: 12px; font-size: 12px; text-align: center; color: #E3EBDD; word-break: break-all; }
.account button { color: var(--cream); text-decoration: underline; font-size: 12px; }

main { min-width: 0; padding: 28px 16px 24px 32px; }

/* 화면 머리: 인사말 + 날짜 이동 */
.header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 16px 16px 0; }
.header h1 { margin: 0; font-size: 26px; }
.header .sub { margin: 4px 0 0 2px; }
.datenav { display: flex; align-items: center; gap: 8px; }
.datenav .date { background: var(--card); border-radius: 999px; padding: 9px 16px; font-weight: 700; min-width: 140px; text-align: center; box-shadow: var(--shadow); }

/* ---------- 카드와 칸 ---------- */
.grid-3, .grid-2, .cols { display: grid; gap: 16px; margin: 0 16px 16px 0; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.cols { grid-template-columns: 3fr 2fr; align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; }
.card { background: var(--card); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.card.flat { margin: 0 16px 16px 0; }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 24px; margin: 0 16px 16px 0; font-weight: 700; box-shadow: var(--shadow); }
.banner .emoji { font-size: 22px; }
.coral { background: var(--coral-soft); color: var(--coral-dark); }
.butter { background: var(--butter-soft); color: var(--butter-text); }

.sub { color: var(--sub); font-size: 12px; }
.big { font-size: 30px; font-weight: 700; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.empty { color: var(--sub); font-size: 12px; text-align: center; padding: 8px 0; }
.status { margin: 10px 0 0 2px; font-size: 13px; font-weight: 700; color: var(--leaf); }
.status.error { color: var(--coral-dark); }

/* 칼로리 링 */
.ring-wrap { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 150px; height: 150px; flex: none; }
.ring svg { width: 150px; height: 150px; }
.ring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.facts div { margin-bottom: 8px; }
.facts b { display: block; margin-top: 2px; }

/* 영양소 막대 */
.bar { height: 10px; border-radius: 6px; background: var(--track); overflow: hidden; margin: 6px 0 14px; }
.bar > i { display: block; height: 100%; border-radius: 6px; }

/* 물 잔 */
.cups { display: grid; grid-template-columns: repeat(4, 46px); gap: 8px; justify-content: center; }
.cup { width: 46px; height: 46px; border-radius: 16px; background: var(--track); font-size: 20px; opacity: .55; }
.cup.on { background: var(--sky-soft); opacity: 1; }

/* 끼니 카드 */
.meal { padding: 0; overflow: hidden; }
.meal-head { display: flex; justify-content: space-between; padding: 14px 20px; font-weight: 700; font-size: 16px; }
.meal-body { padding: 10px 14px 16px 20px; }
.food { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 0; }
.food .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food .amount { color: var(--sub); margin-left: 6px; }

/* 버튼 */
.pill { background: var(--leaf); color: #fff; font-weight: 700; border-radius: 999px; padding: 10px 18px; }
.pill:active, .soft:active, .chip:active { transform: scale(.97); }
.soft { background: var(--leaf-soft); color: var(--leaf-dark); font-weight: 700; border-radius: 999px; padding: 10px 16px; }
.icon { background: var(--card); width: 38px; height: 38px; border-radius: 50%; font-size: 18px; box-shadow: var(--shadow); }
.tiny { width: 30px; height: 30px; border-radius: 50%; color: var(--sub); font-size: 13px; }
.tiny:hover { background: var(--coral-soft); color: var(--coral-dark); }
.add { width: 34px; height: 34px; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf-dark); font-size: 18px; font-weight: 700; }
.chip { background: var(--track); color: var(--sub); font-weight: 700; border-radius: 999px; padding: 7px 16px; margin: 0 8px 8px 0; }
.chip.on { background: var(--leaf); color: #fff; }
.dashed { display: block; width: calc(100% - 6px); margin-top: 8px; padding: 10px; border: 1.5px dashed #D9D1C0; border-radius: 14px; color: var(--sub); }
.dashed:hover { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf-dark); }

/* 입력칸 */
.input { width: 100%; min-width: 0; background: var(--input); border: 2px solid transparent; border-radius: 14px; padding: 10px 14px; outline: none; }
.input:focus { border-color: var(--leaf); }
.field { margin-bottom: 12px; }
.field label { display: block; margin: 0 0 4px 4px; font-size: 12px; font-weight: 700; color: var(--sub); }
.inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }

/* 음식 한 줄 */
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--row); border-radius: 16px; padding: 9px 14px; margin: 6px 0; }
.item .kcal { font-weight: 700; color: var(--leaf-dark); }

/* 사진 */
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.photo { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--track); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .tag { position: absolute; left: 6px; bottom: 6px; background: rgba(255, 253, 247, .8); border-radius: 8px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
.photo .tiny { position: absolute; right: 4px; top: 4px; background: #fff; }
.file-button { display: inline-block; background: var(--sage); color: #fff; font-weight: 700; border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.file-button input { display: none; }

/* 통계 막대 */
.bars { display: flex; align-items: flex-end; height: 200px; }
.bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bars .v { font-size: 11px; color: var(--sub); margin-bottom: 6px; white-space: nowrap; }
.bars .b { border-radius: 7px 7px 4px 4px; background: var(--sage); }
.bars .b.over { background: var(--coral); }
.bars .d { margin-top: 8px; font-size: 12px; font-weight: 700; height: 16px; }
.legend { display: flex; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* 체중 기록 */
.weights > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--track); }
.chart { position: relative; height: 180px; background: var(--row); border-radius: 16px; }
.chart svg { width: 100%; height: 100%; }
.chart .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* 확인 창·저장 실패 띠 */
.dialog-bg { position: fixed; inset: 0; background: rgba(47, 61, 51, .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.dialog { background: var(--card); border-radius: 24px; padding: 24px; max-width: 360px; width: 100%; box-shadow: var(--shadow); }
.dialog h3 { margin: 0 0 8px; }
.dialog p { margin: 0 0 18px; line-height: 1.5; white-space: pre-line; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 40; display: flex; gap: 12px; align-items: center; background: var(--coral-dark); color: #fff; padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 700; }
.toast button { background: #fff; color: var(--coral-dark); border-radius: 999px; padding: 6px 12px; font-weight: 700; }

/* 로그인·안내 화면 */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login { width: 100%; max-width: 380px; text-align: center; }
.login img { width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--shadow); }
.login h1 { margin: 12px 0 4px; }
.login form { text-align: left; margin-top: 20px; }
.login .pill, .login .soft { width: 100%; margin-top: 8px; padding: 12px; }
.login .msg { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--coral-dark); }
.login .msg.ok { color: var(--leaf); }

/* 처음 여는 동안 */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--sub); }
.splash img { width: 96px; height: 96px; border-radius: 50%; }

/* 하단 탭 (휴대폰) */
.tabs { display: none; }

@media (max-width: 760px) {
    /* 폰 전용 배치. 아이폰 사파리는 16px보다 작은 입력칸을 누르면 화면을 확대해 좌우 스크롤이 생기므로 16px로 맞춘다. */
    html, body { overflow-x: clip; }
    input, select, textarea, .input { font-size: 16px; }
    .header { flex-direction: column; align-items: stretch; gap: 10px; }
    .datenav { justify-content: space-between; }
    .datenav .date { flex: 1; min-width: 0; padding: 9px 8px; }
    .grid-3, .grid-2, .cols { gap: 12px; margin-bottom: 12px; }
    .stack { gap: 12px; }
    .banner { margin-bottom: 12px; }
    .ring-wrap { gap: 14px; }
    .chip { padding: 7px 14px; }
    .meal-body { padding: 10px 10px 14px 16px; }
    .food .name { white-space: normal; }
    .toast { left: 16px; right: 16px; transform: none; border-radius: 18px; justify-content: space-between; }
    .shell { display: block; }
    .sidebar { display: none; }
    main { padding: calc(14px + env(safe-area-inset-top)) 0 calc(86px + env(safe-area-inset-bottom)) 16px; }
    .header h1 { font-size: 21px; }
    .grid-3, .grid-2, .cols { grid-template-columns: minmax(0, 1fr); }
    .card { padding: 18px; }
    .tabs {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--card); box-shadow: 0 -2px 16px rgba(60, 102, 72, .1);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--sub); text-decoration: none; font-size: 11px; font-weight: 700; border-radius: 12px; }
    .tabs a .emoji { font-size: 20px; }
    .tabs a.active { color: var(--leaf); background: var(--leaf-soft); }
    .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 12px 20px; background: var(--butter-soft); }
#blazor-error-ui .dismiss { position: absolute; right: 16px; cursor: pointer; }
.chart .lbl { font-size: 11px; fill: var(--sub); }

/* ---------- 식단 / 가계부 영역 전환 ---------- */
.area { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 16px; background: rgba(47, 74, 54, .18); }
.area a { text-align: center; padding: 8px 0; border-radius: 12px; color: var(--cream); font-weight: 700; font-size: 13px; text-decoration: none; }
.area a.on { background: var(--cream); color: var(--leaf-dark); }
.shell.money .sidebar { background: linear-gradient(#C9A27A, #A9734D); }
.shell.money .nav a.active { color: var(--clay-text); }
.shell.money .area a.on { color: var(--clay-text); }
.shell.money .cheer { background: rgba(251, 241, 227, .22); }

/* 가계부: 거래 한 줄 */
.tx { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--track); }
.tx:last-child { border-bottom: 0; }
.tx .badge { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.tx .title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .meta { font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .amt { font-weight: 700; white-space: nowrap; }
.income { color: var(--leaf); }
.expense { color: var(--coral-dark); }
.transfer { color: var(--sky-text); }
.badge.income { background: var(--leaf-soft); color: var(--leaf); }
.badge.expense { background: var(--coral-soft); color: var(--coral-dark); }
.badge.transfer { background: var(--sky-soft); color: var(--sky-text); }
.tx .acts { display: flex; gap: 2px; }

/* 가계부: 달력 */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--sub); padding: 4px 0; }
.cal .day { min-height: 64px; border-radius: 12px; padding: 6px; text-align: left; border: 2px solid transparent; background: var(--row); display: flex; flex-direction: column; gap: 2px; }
.cal .day.out { opacity: .35; }
.cal .day.today { border-color: var(--leaf); }
.cal .day.sel { background: var(--leaf-soft); border-color: var(--leaf-dark); }
.cal .day .n { font-weight: 700; font-size: 13px; }
.cal .day .e, .cal .day .i { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .day .e { color: var(--coral-dark); }
.cal .day .i { color: var(--leaf); }

/* 가계부: 선택 목록(계좌·카테고리) */
.select { width: 100%; min-width: 0; background: var(--input); border: 2px solid transparent; border-radius: 14px; padding: 10px 14px; outline: none; appearance: none; -webkit-appearance: none; }
.select:focus { border-color: var(--leaf); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 2px; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--track); }
.list-row:last-child { border-bottom: 0; }
.donut { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.donut svg { width: 170px; height: 170px; }
.legend-list div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.legend-list i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.more-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); color: var(--text); text-decoration: none; font-weight: 700; box-shadow: var(--shadow); margin: 0 16px 10px 0; }
.more-list a .emoji { font-size: 20px; }
.more-list a small { margin-left: auto; color: var(--sub); font-weight: 400; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--sub); }
.switch input { width: 18px; height: 18px; accent-color: var(--leaf); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 760px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .donut { grid-template-columns: 1fr; justify-items: center; }
    .cal .day { min-height: 54px; padding: 4px; }
    .tx { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .tx .acts { grid-column: 2 / 4; justify-content: flex-end; margin-top: -4px; }
}