:root { color-scheme:light; --ink:#193d50; --muted:#5c7380; --green:#236856; --line:#dce6df; --section-title-size:1.3rem; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f6ee; color:var(--ink); font:1rem/1.65 system-ui,"Malgun Gothic",sans-serif; }
a { color:var(--green); text-underline-offset:4px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #d39433; outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.3; letter-spacing:-.04em; margin-bottom:.7rem; }
h2 { font-size:var(--section-title-size); line-height:1.5; }
h3 { font-size:1.15rem; line-height:1.5; }
.family-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1100px; margin:auto; padding:22px 26px; }
.brand { font-weight:900; font-size:1.45rem; color:var(--ink); text-decoration:none; white-space:nowrap; }
.family-nav nav { display:flex; flex-wrap:wrap; gap:18px; font-size:.9rem; }
.family-nav nav a { color:var(--muted); text-decoration:none; }
.family-main { max-width:1060px; margin:18px auto 70px; padding:0 26px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:26px; }
.eyebrow { color:#547568; font-weight:700; font-size:.85rem; letter-spacing:.025em; }
.paper { background:#fffef8; padding:28px; border:1px solid var(--line); border-radius:22px; box-shadow:0 6px 0 #e6e9de; margin-bottom:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:white; border:0; border-radius:12px; padding:12px 21px; text-decoration:none; font-weight:700; min-height:48px; }
.button:hover { background:#174f40; }
.button.secondary { background:#e8eee7; color:var(--ink); }
.intro-banner { position:relative; overflow:hidden; padding:42px; border-radius:30px; background:#e1eddd; margin-bottom:28px; min-height:270px; }
.intro-banner h1 { font-size:calc(var(--section-title-size) + 1pt); margin:12px 0 22px; word-break:keep-all; }
.intro-banner p { max-width:500px; position:relative; z-index:1; }
.intro-food { position:absolute; font-size:100px; right:35px; bottom:16px; transform:rotate(-12deg); opacity:.9; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step-number { display:inline-flex; width:35px; height:35px; border-radius:50%; background:#f8d477; align-items:center; justify-content:center; font-weight:bold; margin-bottom:15px; }
.example-promise { max-width:750px; margin:12px auto; }
.example-promise blockquote { font-size:1.25rem; font-weight:800; margin:24px 0; }
.promise-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:30px; }
.promise-tile { display:block; border:1px solid var(--line); border-radius:20px; background:#fffef8; padding:24px; text-decoration:none; color:var(--ink); box-shadow:0 5px 0 #e6e9de; transition:transform .15s; }
.promise-tile:hover { transform:translateY(-3px); }
.tile-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; margin-bottom:18px; font-weight:700; }
.promise-tile p { color:var(--muted); font-size:.9rem; }
.status-pill { display:inline-block; border-radius:30px; padding:5px 12px; font-size:.78rem; font-weight:700; background:#eaf0ec; color:#3a6356; white-space:nowrap; }
.status-achieved { background:#fff0b3; color:#795519; }
.status-cancelled { background:#ecece7; color:#6b716e; }
progress { display:block; width:100%; height:15px; border:0; border-radius:20px; overflow:hidden; background:#e5e9df; accent-color:#eea64b; }
progress::-webkit-progress-bar { background:#e5e9df; border-radius:20px; }
progress::-webkit-progress-value { background:#eea64b; border-radius:20px; }
.progress-count { display:block; text-align:right; font-weight:700; margin-top:8px; }
.empty-state { text-align:center; padding:35px; }
.empty-food { font-size:55px; margin-bottom:12px; }
.history summary { cursor:pointer; margin:20px 0; }
.promise-form { max-width:700px; margin:auto; }
.field { margin-bottom:24px; }
.field label,.quantity-picker>label { display:block; font-weight:700; margin-bottom:9px; }
.field input,.field select { width:100%; padding:13px; border:1px solid #b9cabb; background:white; border-radius:10px; color:var(--ink); }
.food-picker { border:0; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.food-picker legend { font-weight:700; margin-bottom:12px; }
.food-option { position:relative; display:flex; flex-direction:column; align-items:center; border:2px solid #dce4d8; border-radius:20px; background:white; padding:18px; cursor:pointer; }
.food-option:has(input:checked) { background:#fff4d1; border-color:#d69b30; box-shadow:0 4px 0 #eddb9a; }
.food-option input { position:absolute; top:14px; left:14px; width:18px; height:18px; accent-color:var(--green); }
.food-art { font-size:64px; line-height:1.4; }
.food-option small { color:var(--muted); margin-top:4px; }
.stepper { display:flex; align-items:center; justify-content:center; gap:16px; }
.stepper button { width:48px; height:48px; border:1px solid #b9cabb; border-radius:50%; background:#eef2e9; color:var(--ink); font-weight:700; }
.stepper input { width:90px; padding:8px; text-align:center; border:1px solid #b9cabb; border-radius:10px; font-size:1.4rem; color:var(--ink); }
.target-preview { text-align:center; background:#f0f3e8; border-radius:12px; padding:15px; font-weight:700; margin:22px 0 8px; word-break:keep-all; }
.muted { color:var(--muted); font-size:.9rem; }
.reward-examples { display:flex; flex-wrap:wrap; gap:8px; }
.reward-examples button { border:1px solid #d3dfd0; border-radius:22px; background:#f5f7ed; color:#3d6352; padding:8px 13px; font-size:.85rem; }
.form-actions { display:flex; align-items:center; gap:24px; margin-top:30px; }
.errorlist { color:#9f3540; padding-left:20px; }
.notice,.change-note { color:#805c24; background:#fff1c8; border-radius:12px; padding:14px; }
.detail-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:26px; align-items:start; }
.pact-card { text-align:center; padding-top:36px; border:2px solid #dec47e; background:#fffcf0; position:relative; }
.pact-art { font-size:84px; line-height:1.4; }
.pact-card h2 { font-size:1.7rem; margin-bottom:8px; }
.pact-reward { font-size:1.3rem; font-weight:800; line-height:1.65; overflow-wrap:anywhere; }
.pact-words { text-align:left; margin-top:30px; padding-top:22px; border-top:1px dashed #d4c795; }
.pact-words p { font-size:.95rem; }
.big-count { font-size:2rem; font-weight:800; margin:12px 0 4px; }
.big-count span { font-size:1.1rem; color:var(--muted); }
.celebration { font-size:54px; }
.detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.detail-actions form { margin:0; }
.text-button { background:none; border:0; padding:0; color:#926353; text-decoration:underline; }
.change-panel { background:#fff6d9; }
.change-panel button { margin:6px 0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.9rem; }
td,th { border-bottom:1px solid #e3e8de; padding:10px 4px; white-space:nowrap; }
@media(max-width:700px) {
  .family-nav { padding:18px; align-items:flex-start; }
  .family-nav nav { gap:8px 14px; justify-content:flex-end; }
  .family-main { padding:0 16px; margin-top:12px; }
  .paper { padding:22px; border-radius:18px; }
  .detail-grid,.step-grid,.promise-grid { grid-template-columns:1fr; }
  .detail-grid { gap:0; }
  .page-heading { flex-wrap:wrap; margin-bottom:20px; }
  .intro-banner { padding:28px; }
  .intro-food { font-size:60px; right:12px; bottom:4px; opacity:.25; }
  .food-picker { gap:12px; }
  .food-option { padding:18px 10px; }
  .food-art { font-size:56px; }
  .food-option small { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { .promise-tile { transition:none; } }
.start-modes { border:0; padding:0; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:10px; }
.start-modes legend { font-weight:700; margin-bottom:10px; }
.start-modes label { padding:10px 14px; border:1px solid #b9cabb; border-radius:12px; background:#f3f6ec; cursor:pointer; }
.start-modes label:has(input:checked) { border-color:#236856; background:#dfeddf; }
.field[hidden] { display:none; }
.entry-gate { max-width:620px; margin:40px auto; text-align:center; }
.entry-back { margin:22px 0 0; }
.share-link { width:100%; padding:12px; border:1px solid #b9cabb; border-radius:10px; background:white; margin-top:9px; font-size:.85rem; }
.error-message { color:#9f3540; }
.gate-buttons { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.guardian-signup { max-width:600px; margin:auto; }
.consent-field { margin:14px 0; }
.consent-field input { width:18px; height:18px; vertical-align:middle; margin-right:6px; accent-color:var(--green); }
.setup-progress { display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:0 0 24px; list-style:none; color:var(--muted); font-size:.9rem; }
.setup-progress [aria-current="step"] { color:var(--green); font-weight:800; }
.account-email-panel { max-width:750px; margin:0 auto 24px; }
.account-email-list { border:0; margin:0 0 20px; padding:0; min-width:0; }
.email-legend { margin-bottom:12px; color:var(--muted); font-size:.9rem; }
.account-email-option { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:16px 12px; margin-bottom:8px; background:#f0f4eb; border-radius:12px; }
.account-email-option input { margin:0; accent-color:var(--green); }
.account-email-address { overflow-wrap:anywhere; min-width:0; font-weight:700; }
.email-management { margin-top:20px; }
.email-management summary,.account-email-panel>summary { cursor:pointer; font-weight:700; }
.email-management .detail-actions { margin-top:14px; }
.email-add-form { margin-top:20px; }
.account-messages { padding:14px 30px; border-radius:12px; background:#e5efde; }