:root{--navy: #001f37;--navy-soft: #0b3252;--gold: #b09e80;--gold-soft: #cfc2ab;--paper: #f4f5f7;--ink: #1c2530;--muted: rgba(28, 37, 48, .6);--line: rgba(0, 31, 55, .12);--negative: #a5433c;--positive: #2e6e4e;--radius: 18px;--shadow: 0 10px 30px rgba(0, 31, 55, .08);--tabbar-height: 68px;--font-ja: "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;--font-en: "Inter", "Helvetica Neue", sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ja);-webkit-font-smoothing:antialiased;line-height:1.7}.frame{max-width:520px;margin:0 auto;padding:16px 16px calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 32px)}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 16px}.brand-en{font-family:var(--font-en);font-size:10px;letter-spacing:.32em;color:var(--gold);font-weight:600}.brand-title{margin:2px 0 0;font-size:19px;font-weight:700;color:var(--navy);letter-spacing:.05em}.privacy-chip{font-size:11px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}.privacy-chip:before{content:"🔒 "}.greeting{font-size:21px;font-weight:700;color:var(--navy);margin:8px 4px 2px}.greeting-sub{font-size:13px;color:var(--muted);margin:0 4px 16px}.hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:22px 22px 24px;color:#fff;background:linear-gradient(120deg,#b09e8040,#b09e8000 40%),linear-gradient(135deg,#01223c,#0b3252 55%,#123d61);box-shadow:var(--shadow);margin-bottom:16px}.hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px);pointer-events:none}.hero-top{display:flex;justify-content:space-between;margin-bottom:14px}.hero-en{font-family:var(--font-en);font-size:10px;letter-spacing:.3em;font-weight:600;color:#ffffffbf}.hero-rank{font-size:30px;font-weight:700;margin:0 0 14px;letter-spacing:.04em}.hero-label{font-size:12px;color:#ffffffbf;margin:0 0 2px}.hero-value{font-family:var(--font-en);font-size:38px;font-weight:700;margin:0 0 14px;letter-spacing:.02em}.hero-value.negative{color:#e8b4ae}.hero-bar{height:6px;border-radius:999px;background:#ffffff2e;margin-bottom:8px}.hero-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-soft),#fff)}.hero-note{font-size:12.5px;color:#ffffffd9;margin:0}.hero-divider{border-top:1px solid rgba(255,255,255,.16);margin:16px 0 12px}.hero-next{display:flex;flex-direction:column;gap:6px}.hero-link{background:none;border:0;color:#fff;font-family:var(--font-ja);font-size:14px;font-weight:700;text-align:left;padding:0;cursor:pointer}.hero .btn{position:relative;z-index:1;margin-top:6px}.row-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 18px;margin-bottom:16px}.row-card.flat{box-shadow:none;border:1px solid var(--line);margin:18px 0}.row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;gap:12px}.row+.row{border-top:1px dashed var(--line)}.row-label{font-size:13.5px;font-weight:600;color:var(--ink)}.row-value{font-family:var(--font-en);font-size:15px;font-weight:700;color:var(--navy);text-align:right}.row-value.gold{color:#8f7a56}.empty-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}.empty-card.center{text-align:center;padding:32px 20px}.empty-emoji{font-size:34px;margin:0 0 8px}.section-title{font-size:14px;color:var(--navy);margin:0 0 6px}.empty-text{font-size:13px;color:var(--muted);margin:0}.empty-card.center .empty-text{margin-bottom:18px}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px 28px;margin-bottom:16px}.progress{height:4px;border-radius:999px;background:#001f3714;margin-bottom:22px}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transition:width .3s ease}.step-en{font-family:var(--font-en);font-size:10.5px;letter-spacing:.3em;color:var(--gold);margin:0 0 6px;font-weight:600}.step-title{margin:0 0 4px;font-size:20px;color:var(--navy)}.step-lead{margin:0 0 22px;font-size:13.5px;color:var(--muted)}.field{display:block;margin-bottom:16px}.field-label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}.field-input{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s ease}.field-input:focus-within{border-color:var(--gold)}.field-input input{flex:1;border:0;outline:none;padding:12px 14px;font-size:16px;font-family:var(--font-en);color:var(--ink);background:transparent;min-width:0;border-radius:12px}.field-input select{flex:1;border:0;outline:none;padding:12px 14px;font-size:16px;font-family:var(--font-ja);color:var(--ink);background:transparent;min-width:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:12px}.unit{padding:0 14px;font-size:13px;color:var(--muted);border-left:1px solid var(--line)}.field-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}.field-error{display:block;font-size:12px;color:var(--negative);margin-top:4px}.field-error:empty{display:none}.nav-row{display:flex;gap:12px;margin-top:26px}.btn{font-family:var(--font-ja);font-size:14px;font-weight:700;letter-spacing:.06em;padding:14px 22px;cursor:pointer;border:1.5px solid transparent;border-radius:999px;transition:transform .1s ease,opacity .2s ease;text-decoration:none;text-align:center;display:inline-block}.btn:active{transform:scale(.98)}.btn.primary{background:var(--navy);color:#fff;flex:1}.btn.gold{background:linear-gradient(135deg,#bfae90,var(--gold));color:#fff}.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}.btn.large{display:block;width:100%;padding:16px 22px;font-size:15px}.cf-panel{border:1px solid var(--line);border-radius:14px;border-left:4px solid var(--gold);padding:16px 18px;margin:14px 0 24px;display:flex;flex-direction:column;gap:10px}.cf-label{display:block;font-size:12px;color:var(--muted)}.cf-value{font-family:var(--font-en);font-size:32px;font-weight:700;color:var(--navy)}.cf-value-sub{font-family:var(--font-en);font-size:17px;font-weight:600;color:var(--navy-soft)}.cf-value.negative,.cf-value-sub.negative{color:var(--negative)}.ef-panel{border:1px solid var(--line);border-radius:14px;padding:14px 18px 16px;margin:0 0 24px}.ef-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}.ef-value{font-family:var(--font-en);font-size:20px;font-weight:700;color:var(--navy);white-space:nowrap}.ef-bar{height:6px;border-radius:999px;background:#001f3714;margin-bottom:8px}.ef-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}.ef-note{font-size:11.5px;color:var(--muted);margin:0}.callout{background:#a5433c12;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.7;color:#7c3a34;margin:0 0 22px}.type-badge{display:inline-block;font-family:var(--font-en);font-size:10px;letter-spacing:.28em;font-weight:600;color:#8f7a56;background:#b09e801f;border-radius:999px;padding:6px 14px;margin-bottom:12px}.result-title{margin:0 0 10px;font-size:19px;color:var(--navy);line-height:1.5}.result-body{margin:0 0 24px;font-size:13.5px}.table-title{font-size:14px;color:var(--navy);margin:0 0 10px;padding-top:18px;border-top:1px solid var(--line)}.savings{width:100%;border-collapse:collapse;font-size:13px}.savings th,.savings td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left}.savings th{font-size:11px;color:var(--muted);font-weight:600}.savings .num{text-align:right;font-family:var(--font-en)}.savings .strong{color:var(--navy);font-weight:700}.savings tfoot td{border-bottom:0;font-weight:600}.table-note{font-size:11px;color:var(--muted);margin:8px 0 0}.cta{margin:26px 0 14px}.cta-note{text-align:center;font-size:12px;color:var(--muted);margin:10px 0 0}.disclaimer{font-size:10.5px;line-height:1.8;color:var(--muted);margin:4px 8px 16px}.segment{display:flex;background:#001f370f;border-radius:999px;padding:4px;margin-bottom:16px}.seg{flex:1;border:0;border-radius:999px;padding:10px 0;font-family:var(--font-ja);font-size:13.5px;font-weight:700;color:var(--muted);background:transparent;cursor:pointer}.seg.active{background:#fff;color:var(--navy);box-shadow:0 2px 8px #001f371a}.bud-row{padding:14px 0;border-bottom:1px dashed var(--line)}.bud-row:last-of-type{border-bottom:0}.bud-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}.bud-label{font-size:13.5px;font-weight:700;color:var(--navy)}.bud-hint{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}.bud-ideal{font-size:12px;color:var(--muted);white-space:nowrap}.bud-pct-input{width:2.6em;border:0;border-bottom:1px solid var(--line);outline:none;text-align:right;font-family:var(--font-en);font-size:13px;color:var(--navy);background:transparent;padding:0 2px}.bud-pct-input:focus{border-bottom-color:var(--gold)}.bud-inputs{display:flex;align-items:center;gap:10px}.field-input.compact{flex:1;min-width:0}.field-input.compact input{padding:9px 12px;font-size:15px}.bud-badge{font-size:11.5px;white-space:nowrap}.bud-badge .over{color:var(--negative);font-weight:700}.bud-badge .ok{color:var(--positive)}.bud-note{margin:8px 0 0;font-size:11.5px;color:#8f7a56}.bud-total{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}.over-text{color:var(--negative);font-weight:700}.advice-list{margin:0 0 20px;padding-left:20px;font-size:13px}.advice-list li{margin-bottom:8px}.sp-summary{display:flex;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:14px;border-left:4px solid var(--gold);padding:14px 16px;margin-bottom:16px}.month{border-bottom:1px dashed var(--line);padding:4px 0}.month summary{display:flex;justify-content:space-between;align-items:center;padding:10px 0;cursor:pointer;font-size:14px;font-weight:700;color:var(--navy);list-style:none}.month summary::-webkit-details-marker{display:none}.month summary:before{content:"▸";color:var(--gold);margin-right:8px}.month[open] summary:before{content:"▾"}.month summary>span:first-of-type{flex:1}.month-total{font-family:var(--font-en);font-weight:700}.sp-row{display:flex;align-items:center;gap:12px;padding:5px 0 5px 18px}.sp-label{flex:1;font-size:13px}.sp-row .field-input.compact{flex:0 0 140px}.cmp-row{padding:14px 0;border-bottom:1px dashed var(--line)}.cmp-row:last-of-type{border-bottom:0}.cmp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.cmp-label{font-size:13.5px;font-weight:700;color:var(--navy)}.cmp-over{font-size:12px;font-weight:700;color:var(--negative);white-space:nowrap}.cmp-under{font-size:12px;font-weight:700;color:var(--positive);white-space:nowrap}.cmp-na{font-size:11.5px;color:var(--muted)}.cmp-bars{display:flex;flex-direction:column;gap:6px}.cmp-bar-line{display:flex;align-items:center;gap:8px}.cmp-tag{flex:0 0 44px;font-size:11px;color:var(--muted)}.cmp-bar{height:12px;border-radius:6px;min-width:2px;transition:width .25s ease}.cmp-bar.mine{background:linear-gradient(90deg,var(--navy-soft),var(--navy))}.cmp-bar.avg{background:linear-gradient(90deg,var(--gold-soft),var(--gold))}.cmp-val{font-family:var(--font-en);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;margin-left:auto}.cmp-note{font-size:11px;color:var(--muted);margin:8px 0 0}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;align-items:stretch;background:#fffffff5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}.tab{flex:1;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:4px 0 2px;cursor:pointer;color:#97a0ac;font-family:var(--font-ja);font-size:10.5px;font-weight:600;letter-spacing:.04em;border-radius:12px}.tab svg{width:23px;height:23px}.tab.active{color:var(--navy)}.tab.active:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:1px}