/* 축소하지 못했습니다. 축소되지 않은 콘텐츠를 반환합니다.
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,22): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(70,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(80,26): run-time error CSS1039: Token not allowed after unary operator: '-shell'
(82,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(94,41): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(96,35): run-time error CSS1039: Token not allowed after unary operator: '-line'
(112,39): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(113,25): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(126,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(128,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(129,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(137,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(137,71): run-time error CSS1039: Token not allowed after unary operator: '-line'
(139,34): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(139,63): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(139,85): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(140,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(142,79): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(143,28): run-time error CSS1039: Token not allowed after unary operator: '-late'
(148,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(149,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(150,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(152,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(158,116): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(159,47): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(167,68): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(171,99): run-time error CSS1039: Token not allowed after unary operator: '-line-soft'
(176,45): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(181,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(185,17): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(191,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(191,58): run-time error CSS1039: Token not allowed after unary operator: '-line'
(196,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-soft'
(196,60): run-time error CSS1039: Token not allowed after unary operator: '-line'
(202,68): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(215,32): run-time error CSS1039: Token not allowed after unary operator: '-late-soft'
(215,57): run-time error CSS1039: Token not allowed after unary operator: '-late'
(216,33): run-time error CSS1039: Token not allowed after unary operator: '-today-soft'
(216,59): run-time error CSS1039: Token not allowed after unary operator: '-today'
(217,30): run-time error CSS1039: Token not allowed after unary operator: '-ok-soft'
(217,53): run-time error CSS1039: Token not allowed after unary operator: '-ok'
(218,32): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(218,57): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(224,70): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(225,65): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(226,32): run-time error CSS1039: Token not allowed after unary operator: '-today'
(227,34): run-time error CSS1039: Token not allowed after unary operator: '-ok'
(230,107): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(238,49): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(243,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(243,53): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(243,76): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(245,44): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(247,37): run-time error CSS1039: Token not allowed after unary operator: '-line'
(247,64): run-time error CSS1039: Token not allowed after unary operator: '-line-soft'
(255,75): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(269,93): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(275,76): run-time error CSS1039: Token not allowed after unary operator: '-line'
(278,69): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(288,65): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(292,77): run-time error CSS1039: Token not allowed after unary operator: '-line-soft'
(294,87): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(296,44): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(302,37): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(303,54): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(309,66): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(310,47): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(316,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(318,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(319,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(326,69): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(334,77): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(346,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(351,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(354,47): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(354,76): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(354,98): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(355,60): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(358,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(358,69): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(358,91): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink'
(378,79): run-time error CSS1039: Token not allowed after unary operator: '-line-soft'
(379,84): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(387,41): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(389,32): run-time error CSS1039: Token not allowed after unary operator: '-line'
(404,17): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
(408,24): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(410,28): run-time error CSS1039: Token not allowed after unary operator: '-late'
(418,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(420,22): run-time error CSS1039: Token not allowed after unary operator: '-late-soft'
(421,17): run-time error CSS1039: Token not allowed after unary operator: '-late'
(428,32): run-time error CSS1039: Token not allowed after unary operator: '-ok-soft'
(428,55): run-time error CSS1039: Token not allowed after unary operator: '-ok'
(435,45): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(443,46): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft'
(448,43): run-time error CSS1039: Token not allowed after unary operator: '-line'
(448,85): run-time error CSS1039: Token not allowed after unary operator: '-ink-faint'
 */
/* 우리 아이 수첩.
   허브와 같은 토큰 위에 이 앱의 강조색 하나만 새로 얹는다. 부트스트랩을 쓰지 않는 것은 허브와
   같은 이유다 - 카드 몇 장과 목록에 프레임워크는 필요 없고, 프레임워크의 리셋이 오히려 타입
   스케일과 싸운다. 화면은 폰이 기준이고, 데스크톱은 같은 화면을 가운데로 모을 뿐이다. */

:root {
    color-scheme: light dark;

    --bg: #f4f2ee;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --line: #e3ded4;
    --line-soft: #efeae1;
    --ink: #23272e;
    --ink-soft: #6b7280;
    --ink-faint: #9ca3af;

    /* 호두나무색. 목줄과 털의 색이고, 여섯 앱이 쓰는 색과 겹치지 않으며, 무엇보다 빨강·주황·초록을
       상태 전용으로 비워둔다. 강조색이 빨강 계열이면 "지남" 표시와 싸운다. */
    --accent: #8a5a3b;
    --accent-ink: #ffffff;
    --accent-soft: #f1e9e1;

    --late: #b23b2e;
    --late-soft: #f7e7e4;
    --today: #a8701a;
    --today-soft: #f7eedd;
    --ok: #3f7d5e;
    --ok-soft: #e6f0ea;

    --shadow: 0 1px 2px rgba(35, 39, 46, .04), 0 8px 24px rgba(35, 39, 46, .06);
    --radius: 18px;
    --shell: 640px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --surface: #1e2125;
        --surface-2: #23262b;
        --line: #31353b;
        --line-soft: #2a2e33;
        --ink: #e8eaed;
        --ink-soft: #9aa1ab;
        --ink-faint: #767d87;

        /* 어두운 바탕에서 호두나무색은 가라앉는다. 뒤집는 대신 밝은 쪽에서 다시 고른 값이다. */
        --accent: #c9a184;
        --accent-ink: #1e1712;
        --accent-soft: #2a2320;

        --late: #f09182;
        --late-soft: #33211e;
        --today: #e4ae58;
        --today-soft: #31281a;
        --ok: #7cc0a0;
        --ok-soft: #1d2b25;

        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }

.shell { width: min(var(--shell), 100% - 32px); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 머리글 ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; }
.brand__mark { font-size: 1.1rem; }

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

.who { font-size: .84rem; color: var(--ink-soft); font-weight: 700; }
.who span { color: var(--ink-faint); font-weight: 600; }

main { padding: 22px 0 72px; }

/* ---------- 버튼 ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, filter .15s ease;
}

.btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { border-color: var(--accent); filter: brightness(1.07); }
.btn--wide { width: 100%; min-height: 48px; font-size: .96rem; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-soft); padding: 0 10px; }
.btn--danger { color: var(--late); }

/* ---------- 패널 ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.panels { display: flex; flex-direction: column; gap: 14px; }

.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.panel__title { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.panel__more { font-size: .82rem; color: var(--accent); font-weight: 700; }

.page-title { font-size: 1.35rem; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* 아이 화면 머리. 이름만 있으면 "이 아이가 누구였더라"에 답하지 못한다 - 품종과 나이가
   병원에서 가장 먼저 묻는 것이라 이름 바로 아래 둔다. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.page-head__name { font-size: 1.35rem; }
.page-head__meta { margin: 2px 0 0; font-size: .84rem; color: var(--ink-soft); }

/* ---------- 목록 행 ---------- */

.row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }
.row__body { flex: 1; min-width: 0; }
.row__name { font-size: .93rem; font-weight: 700; line-height: 1.35; }
.row__meta { font-size: .78rem; color: var(--ink-soft); }

/* 줄 전체가 링크가 될 수 없는 자리 - 같은 줄에 완료 버튼이 있으면 폼을 링크 안에 넣을 수 없다 -
   에서는 가운데 몸통만 링크가 된다. 손가락이 닿는 넓이는 그것으로 충분하다. */
.row__link { display: block; }
.row--on { background: var(--accent-soft); border-radius: 12px; padding-inline: 10px; }
/* 이름 옆의 비중. 합계 숫자만 세로로 쌓아두면 많이 쓴 것이 눈에 들어오지 않습니다. */
.row__share {
    margin-left: 5px; font-size: .74rem; font-weight: 800;
    color: var(--accent); font-variant-numeric: tabular-nums;
}

.icon-tile {
    width: 34px; height: 34px; flex: none; border-radius: 11px;
    display: grid; place-items: center; font-size: .98rem;
    background: var(--surface-2); border: 1px solid var(--line);
}

.face {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    background: var(--accent-soft); border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 1.2rem; overflow: hidden;
}
.face img { width: 100%; height: 100%; object-fit: cover; }

.trailing { margin-left: auto; font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trailing small { font-size: .72rem; font-weight: 700; color: var(--ink-soft); }

/* ---------- 상태 알약 ---------- */

.pill {
    flex: none;
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.pill--late { background: var(--late-soft); color: var(--late); }
.pill--today { background: var(--today-soft); color: var(--today); }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--done { background: var(--surface-2); color: var(--ink-faint); }

/* ---------- 몸무게 ---------- */

.figure-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.figure-num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figure-num small { font-size: .92rem; font-weight: 700; color: var(--ink-soft); margin-left: 3px; }
.figure-note { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.figure-note--up { color: var(--today); }
.figure-note--down { color: var(--ok); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-x { display: flex; justify-content: space-between; margin-top: 5px; font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- 달과 하루 ---------- */

/* 기록 화면의 뼈대. 화살표 둘과 가운데 한 덩어리. 폰에서 엄지가 양끝에 닿습니다. */
.monthbar { display: flex; align-items: center; gap: 6px; }
.monthbar__now { flex: 1; text-align: center; min-width: 0; }
.monthbar__label { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.monthbar__sub { font-size: .78rem; color: var(--ink-soft); }

.monthbar__arrow {
    flex: none; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.monthbar__arrow:active { background: var(--surface-2); }
/* 갈 곳이 없는 쪽은 눌리지 않습니다 - 빈 달이 끝없이 이어지면 고장으로 읽힙니다. */
.monthbar__arrow--off { color: var(--line); border-color: var(--line-soft); }

/* 달 이름이 곧 년월 고르개입니다. 접어두면 지금 보는 달만 보이고, 누르면 칸이 나옵니다 -
   화살표로 열두 번 넘기지 않아도 되는 길을 열어두되 평소에는 자리를 먹지 않습니다. */
.monthpick > summary { list-style: none; cursor: pointer; }
.monthpick > summary::-webkit-details-marker { display: none; }
/* 서버가 CSS에 charset을 붙이지 않지만, 스타일시트는 문서 인코딩(UTF-8)을 따라가므로 글자를
   그대로 써도 됩니다. */
.monthpick > summary::after { content: " ▾"; font-size: .7em; color: var(--ink-faint); }
.monthpick[open] > summary::after { content: " ▴"; }
.monthpick__form { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.monthpick__form input { width: auto; flex: 0 0 auto; min-width: 9.5em; }
.monthpick__form .btn { flex: none; }

/* 지출의 년월 두 칸은 한 줄에 하나씩입니다.

   크롬의 년월 칸은 로케일 형식을 그대로 그립니다 - 한국어에서는 "2026년 01월"에 달력 아이콘까지
   붙어 150px 남짓이 필요하고, 그보다 좁혀도 줄어들지 않고 끝을 잘라냅니다. min-width로도,
   flex로도 물러서지 않습니다. 둘을 나란히 두는 한 폰에서는 반드시 잘립니다.
   그래서 나란히 두지 않습니다. */
.rangebar { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.rangebar__row { display: flex; align-items: center; gap: 10px; }
.rangebar__tag { flex: none; width: 2.2em; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.rangebar input { width: 100%; min-width: 0; }
.rangebar .btn { min-height: 46px; }

.day__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.day__when { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.day__when small { font-size: .76rem; font-weight: 700; color: var(--ink-faint); margin-left: 3px; }
.day__when .pill { margin-left: 5px; }
.day__sum { font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 날짜 줄 바로 밑의 첫 줄은 선을 두 번 긋지 않습니다. */
.day__head + .row { border-top: 0; padding-top: 0; }

/* 열 가지를 언제나 펼쳐두면 목록이 화면 밖으로 밀립니다. 고른 것이 있을 때만 열립니다. */
.filter { }
.filter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer; }
.filter__head::-webkit-details-marker { display: none; }
.filter__now { font-size: .82rem; font-weight: 700; color: var(--accent); }

/* ---------- 지나온 일 ---------- */

.tl { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.tl:first-child { border-top: 0; padding-top: 0; }
.tl__date { flex: none; width: 44px; font-size: .73rem; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tl__what { font-size: .89rem; font-weight: 700; line-height: 1.35; }
.tl__note { font-size: .78rem; color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* 누르면 고칠 수 있는 줄. 꺾쇠 하나가 "여기 뭔가 더 있다"를 말한다 - 이것이 없으면 아무도
   기록을 눌러보지 않는다. */
.tl--link { align-items: center; }
.tl--link:active { background: var(--surface-2); }
.tl__go { flex: none; padding-left: 4px; color: var(--ink-faint); font-size: 1.1rem; }

/* ---------- 입력 ---------- */

.form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.field__hint { font-size: .74rem; color: var(--ink-faint); }

input[type=text], input[type=number], input[type=date], input[type=month], input[type=url], input[type=email], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

textarea { min-height: 96px; padding: 11px 13px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* 한 묶음 안의 소제목. 폭을 다 차지해 스스로 줄을 바꾸므로, 알약들은 갈래별로 나뉘어 보이면서도
   라디오는 여전히 하나의 묶음이다. 갈래마다 .chips를 따로 두면 둘 다 골라야 하는 것처럼 보인다. */
.chips__cap {
    flex-basis: 100%; margin: 4px 0 -1px;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--ink-faint);
}
.chips__cap:first-child { margin-top: 0; }

/* 라디오는 감추고 그 옆의 글자가 알약이 된다. 손가락으로 고르는 화면에서 기본 라디오는 너무 작다.
   고른 표시를 :has()가 아니라 인접 선택자로 거는 것은, 안 되는 브라우저에서 아무 표시도 안 나는
   쪽이 아니라 어디서나 나는 쪽을 택한 것이다. */
.chip { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.chip span {
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 700;
    background: var(--surface);
}

.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 링크로 된 알약. 고른 것을 라디오와 같은 모습으로 보이게 한다. */
.chip span.chip--on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- 갈래 ---------- */

/* 기록 화면이 두 가지를 받는다 - 한 일·할 일과 몸무게. 서로 다른 표에 들어가므로 폼도 둘이고,
   알약 하나로 갈아 끼운다. :has()를 못 쓰는 브라우저에서는 둘 다 그냥 보인다. 자리는 더 먹지만
   적을 수는 있고, 아무것도 안 보이는 것보다 낫다. */
.switch__pick { margin-bottom: 12px; }

@supports selector(:has(*)) {
    .switch > .pane { display: none; }
    .switch:has(.switch__pick input[value="care"]:checked) > .pane[data-mode="care"],
    .switch:has(.switch__pick input[value="weight"]:checked) > .pane[data-mode="weight"] { display: block; }
    /* 고치는 중에는 갈래가 없다. 하나뿐인 칸이 그냥 보여야 한다. */
    .switch:not(:has(.switch__pick)) > .pane { display: block; }
}

/* ---------- 비율 막대 ---------- */

/* 종류별 지출에서 "사료가 병원비의 몇 할인가"는 숫자를 나란히 읽는 것보다 길이로 보는 편이 빠르다. */
.meter { margin-top: 6px; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: .55; }

/* ---------- 아래 길잡이 ---------- */

.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__inner { display: flex; }

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px 8px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ink-faint);
}

.tab span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
.tab--on { color: var(--accent); }

.field-error { color: var(--late); font-size: .82rem; font-weight: 700; }

/* 링크를 건네는 자리. 폰에서는 공유가 먼저라 넓게 두고, 복사는 그 옆에 둡니다. */
.link-actions { display: flex; gap: 8px; margin-top: 10px; }
.link-actions .btn { flex: 1; min-height: 46px; }
#inviteLink { font-size: .88rem; }

.notice {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--late-soft);
    color: var(--late);
    padding: 11px 14px;
    font-size: .88rem;
    font-weight: 700;
}

/* 잘된 일도 알려야 합니다. 같은 모양에 색만 달리해 "무언가 일어났다"는 자리를 하나로 둡니다. */
.notice--ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- 아무것도 없을 때 ---------- */

.empty { text-align: center; padding: 26px 12px; }
.empty__mark { font-size: 2rem; }
.empty__title { margin-top: 8px; font-size: 1rem; font-weight: 800; }
.empty__text { margin-top: 4px; color: var(--ink-soft); font-size: .89rem; }
.empty .btn { margin-top: 14px; }

/* ---------- 로그인 ---------- */

.signin { max-width: 380px; margin: 8vh auto 0; text-align: center; }
.signin__mark { font-size: 2.6rem; }
.signin h1 { margin-top: 10px; font-size: 1.5rem; }
.signin p { margin: 10px 0 22px; color: var(--ink-soft); font-size: .93rem; }
.signin .notice { text-align: left; margin-bottom: 16px; }

/* ---------- 바닥글 ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 22px 0 34px; color: var(--ink-faint); font-size: .82rem; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }