@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* ===== ダークテーマ ===== */
:root {
  --bg:           #0B0F14;
  --bg2:          #0f1420;
  --bg3:          #141a28;
  --card:         rgba(255,255,255,0.038);
  --card-border:  rgba(255,255,255,0.07);
  --card-hover:   rgba(255,255,255,0.06);
  --glass:        rgba(11,15,20,0.88);
  --accent:       #F5B942;
  --accent-dim:   rgba(245,185,66,0.1);
  --accent2:      #22C55E;
  --accent2-dim:  rgba(34,197,94,0.1);
  --accent3:      #4f8ef7;
  --danger:       #ff4d6d;
  --text:         #eef2ff;
  --text2:        #7a8aaa;
  --text3:        #3d4d6a;
  --shadow:       0 8px 40px rgba(0,0,0,0.5);
  --nav-h:        68px;
  --radius:       20px;
  --radius-sm:    12px;
  --font-display: 'Syne', sans-serif;
  --font-body:    'Noto Sans JP', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ===== ライトテーマ：soft trip journal ===== */
[data-theme="light"] {
  --bg:           #FFFDF8;
  --bg2:          #FFF8F1;
  --bg3:          #FFF3E8;
  --card:         rgba(255,255,255,0.92);
  --card-border:  rgba(180,140,100,0.12);
  --card-hover:   rgba(255,255,255,1);
  --glass:        rgba(255,253,248,0.93);
  --accent:       #C07830;
  --accent-dim:   rgba(192,120,48,0.1);
  --accent2:      #5A9E6F;
  --accent2-dim:  rgba(90,158,111,0.1);
  --accent3:      #7B8EC8;
  --danger:       #C85A5A;
  --text:         #2C1F14;
  --text2:        #6B5240;
  --text3:        #B09A84;
  --shadow:       0 4px 24px rgba(160,120,80,0.1);
  /* ライト専用追加変数 */
  --light-coral:  #E8886A;
  --light-sage:   #8BAF8A;
  --light-lavender: #A8A0C8;
  --light-paper:  #FFFDF8;
  --light-ink:    #3D2B1F;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow: hidden;
  transition: background .35s, color .35s;
}

/* 旅の黒 - ノイズ + 縦グラデ + 空気感 */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(245,185,66,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(34,197,94,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 50%, rgba(79,142,247,0.04) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
/* ノイズテクスチャ */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .6;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(232,136,106,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(90,158,111,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 40%, rgba(168,160,200,0.06) 0%, transparent 50%);
}
[data-theme="light"] body::after { opacity: 0; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; z-index: 1; }

.screen { display: none; flex: 1; overflow: hidden; padding-bottom: var(--nav-h); }
.screen.active { display: flex; flex-direction: column; }
.screen-scroll {
  flex: 1; overflow-y: auto; padding: 0 18px 28px;
  -webkit-overflow-scrolling: touch;
}
.screen-scroll::-webkit-scrollbar { display: none; }

/* ナビ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--glass);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid var(--card-border);
  display: flex; z-index: 100;
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text3); transition: color .2s, transform .15s;
  -webkit-tap-highlight-color: transparent; position: relative;
}
.nav-btn.active { color: var(--accent); }
.nav-btn.active::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--accent); border-radius: 0 0 4px 4px;
}
.nav-btn:active { transform: scale(.92); }
.nav-icon { font-size: 22px; line-height: 1; }
.nav-label { font-size: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }

/* カード（余白1.3倍） */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); transition: background .2s;
}
.section-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.section-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--text3); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 16px;
}

/* ダッシュボードヘッダー */
.dashboard-header { padding: 22px 0 10px; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.app-logo { display: flex; align-items: center; gap: 7px; }
.app-logo-main {
  font-family: 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 900;
  letter-spacing: .04em; color: var(--accent);
  text-shadow: 0 0 28px rgba(245,185,66,0.45);
  line-height: 1.4;
}
.app-logo-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text3); letter-spacing: .1em; }
.header-actions { display: flex; gap: 8px; }
.icon-btn {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.travel-day-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-dim); border: 1px solid rgba(245,185,66,0.2);
  border-radius: 99px; padding: 5px 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  letter-spacing: .06em;
}
.live-dot { width: 6px; height: 6px; background: var(--accent2); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ヒーローカード */
.hero-card {
  background: linear-gradient(160deg, rgba(245,185,66,0.07) 0%, rgba(34,197,94,0.04) 60%, transparent 100%);
  border: 1px solid rgba(245,185,66,0.16);
  border-radius: var(--radius); padding: 28px 22px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.hero-card::after {
  content: '¥'; position: absolute;
  font-family: var(--font-display); font-size: 200px; font-weight: 800;
  color: rgba(245,185,66,0.025); right: -20px; top: -50px;
  line-height: 1; pointer-events: none;
}
.hero-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--text3); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
}
.hero-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 9vw, 48px);
  color: var(--accent); letter-spacing: .01em; line-height: 1.1;
  text-shadow: 0 0 30px rgba(245,185,66,0.2);
  margin-bottom: 8px; word-break: break-all;
}
.hero-sub { font-size: 14px; color: var(--text2); font-weight: 500; line-height: 1.5; }
.hero-sub strong { color: var(--accent2); font-family: var(--font-mono); font-weight: 700; }

/* あと◯日 強化表示 */
.remaining-days-big {
  display: flex; align-items: center; gap: 10px;
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
.remaining-days-icon { font-size: 24px; }
.remaining-days-text { flex: 1; }
.remaining-days-main {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--accent2); letter-spacing: .02em; line-height: 1;
}
.remaining-days-sub { font-size: 12px; color: var(--text2); margin-top: 3px; font-family: var(--font-mono); }

/* 危機感バッジ */
.danger-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 99px;
  font-size: 13px; font-weight: 700; margin: 8px 0 10px;
  transition: all .3s;
}
.danger-safe     { background: rgba(34,197,94,.13);  color: #22C55E; border: 1px solid rgba(34,197,94,.25); }
.danger-caution  { background: rgba(250,204,21,.13); color: #facc15; border: 1px solid rgba(250,204,21,.25); }
.danger-warning  { background: rgba(251,146,60,.13); color: #fb923c; border: 1px solid rgba(251,146,60,.25); }
.danger-danger   { background: rgba(239,68,68,.13);  color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.danger-critical { background: rgba(239,68,68,.22);  color: #ff4d6d; border: 1px solid rgba(239,68,68,.45); animation: dangerPulse 1.4s infinite; }
@keyframes dangerPulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* 今日の勝ち負け */
.today-status-card {
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px;
  backdrop-filter: blur(12px);
}
.today-status-win     { background: rgba(34,197,94,.09);  border: 1px solid rgba(34,197,94,.22); }
.today-status-ok      { background: rgba(79,142,247,.09); border: 1px solid rgba(79,142,247,.22); }
.today-status-over    { background: rgba(251,146,60,.09); border: 1px solid rgba(251,146,60,.22); }
.today-status-fail    { background: rgba(239,68,68,.09);  border: 1px solid rgba(239,68,68,.22); }
.today-status-pending { background: var(--card);          border: 1px solid var(--card-border); }
.today-status-inner { display: flex; align-items: center; justify-content: space-between; }
.today-status-left  { display: flex; align-items: center; gap: 12px; }
.today-status-emoji { font-size: 26px; }
.today-status-label { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.today-status-detail { font-size: 12px; color: var(--text2); font-family: var(--font-mono); margin-top: 2px; }
.today-vs-budget { font-family: var(--font-mono); font-size: 13px; color: var(--text2); }

/* メーター */
.meter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.meter-title { font-size: 13px; font-weight: 700; color: var(--text2); }
.meter-pct { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent); }
.meter-track {
  background: rgba(255,255,255,.05); border-radius: 99px;
  height: 10px; overflow: hidden; margin-bottom: 10px;
}
[data-theme="light"] .meter-track { background: rgba(0,0,0,.07); }
.meter-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width 1.2s cubic-bezier(.23,1,.32,1); position: relative;
}
.meter-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px; background: rgba(255,255,255,.8); border-radius: 99px;
}
.meter-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
}

/* 統計チップ */
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.stat-chip {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 16px 10px; text-align: center;
  backdrop-filter: blur(12px);
}
.stat-chip-label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .07em; text-transform: uppercase; font-family: var(--font-display); margin-bottom: 5px; }
.stat-chip-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }

/* 国別 */
.country-item { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--card-border); gap: 12px; }
.country-item:last-child { border-bottom: none; }
.country-rank { font-family: var(--font-mono); font-size: 12px; color: var(--text3); width: 18px; text-align: center; }
.country-flag { font-size: 28px; line-height: 1; }
.country-info { flex: 1; min-width: 0; }
.country-name { font-size: 14px; font-weight: 700; color: var(--text); }
.country-days { font-size: 11px; color: var(--text3); font-family: var(--font-mono); }
.country-amounts { text-align: right; }
.country-total { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); }
.country-avg { font-size: 11px; color: var(--text3); font-family: var(--font-mono); }

/* カテゴリ */
.cat-item { margin-bottom: 14px; }
.cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cat-name { font-size: 13px; font-weight: 600; color: var(--text2); }
.cat-amount { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.cat-track { background: rgba(255,255,255,.05); border-radius: 99px; height: 5px; overflow: hidden; }
[data-theme="light"] .cat-track { background: rgba(0,0,0,.06); }
.cat-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent3), var(--accent)); transition: width .8s ease; }

/* 支出リスト */
.expense-row { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--card-border); gap: 10px; }
.expense-row:last-child { border-bottom: none; }
.expense-flag { font-size: 22px; flex-shrink: 0; }
.expense-body { flex: 1; min-width: 0; }
.expense-top-row { display: flex; justify-content: space-between; align-items: center; }
.expense-place { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.expense-yen { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.expense-bottom-row { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.expense-tag { font-size: 10px; color: var(--text3); background: rgba(255,255,255,.05); border: 1px solid var(--card-border); padding: 1px 7px; border-radius: 99px; font-family: var(--font-mono); }
[data-theme="light"] .expense-tag { background: rgba(0,0,0,.04); }
.expense-memo { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.del-btn { background: none; border: none; color: var(--text3); font-size: 15px; cursor: pointer; padding: 4px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: color .15s; }
.del-btn:active { color: var(--danger); }

/* ページヘッダー */
.page-header { padding: 22px 0 12px; }
.page-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: .02em; }

/* フォーム */
.input-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; backdrop-filter: blur(12px); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; font-family: var(--font-display); }
.form-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 16px; padding: 14px 15px; outline: none; transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none; }
[data-theme="light"] .form-input { background: rgba(0,0,0,.03); }
.form-input:focus { border-color: var(--accent); background: var(--accent-dim); }
.form-input-amount { font-family: var(--font-mono); font-size: 36px; font-weight: 700; text-align: right; letter-spacing: -.01em; padding: 14px 16px; }
.country-preview { text-align: center; font-size: 36px; min-height: 44px; margin-top: 6px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill { background: rgba(255,255,255,.04); border: 1px solid var(--card-border); border-radius: 99px; color: var(--text2); font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
[data-theme="light"] .cat-pill { background: rgba(0,0,0,.04); }
.cat-pill.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 800; }

/* ボタン */
.btn-primary { width: 100%; background: var(--accent); border: none; border-radius: var(--radius-sm); color: #000; font-family: var(--font-display); font-size: 16px; font-weight: 800; padding: 18px; cursor: pointer; margin-top: 4px; letter-spacing: .06em; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; box-shadow: 0 4px 20px rgba(245,185,66,0.28); }
.btn-primary:active { opacity: .85; transform: scale(.98); }
.btn-generate { width: 100%; background: linear-gradient(135deg, #F5B942 0%, #ff6b35 100%); border: none; border-radius: var(--radius-sm); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 800; padding: 18px; cursor: pointer; margin: 10px 0; letter-spacing: .06em; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; box-shadow: 0 6px 28px rgba(245,185,66,0.32); }
.btn-generate:active { opacity: .85; transform: scale(.98); }
.btn-generate:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-secondary { width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text2); font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 14px; cursor: pointer; margin-top: 8px; -webkit-tap-highlight-color: transparent; }
[data-theme="light"] .btn-secondary { background: rgba(0,0,0,.04); }

/* SNS */
.sns-context-label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display); margin-bottom: 10px; }
.sns-summary { font-size: 15px; color: var(--text); line-height: 1.75; }
.post-platform-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.post-platform { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text2); }
.post-chars { font-family: var(--font-mono); font-size: 11px; color: var(--text3); }
.post-text { font-size: 14px; color: var(--text); line-height: 1.85; white-space: pre-wrap; word-break: break-all; margin-bottom: 14px; min-height: 60px; }
.btn-copy { background: rgba(255,255,255,.06); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text2); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 9px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .15s; }
.btn-copy:active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* 投稿モード */
.mode-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-pill { background: rgba(255,255,255,.04); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; text-align: left; transition: all .15s; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; gap: 4px; }
[data-theme="light"] .mode-pill { background: rgba(0,0,0,.04); }
.mode-pill.active { background: var(--accent-dim); border-color: var(--accent); }
.mode-icon { font-size: 20px; }
.mode-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); }
.mode-desc { font-size: 11px; color: var(--text3); }
.mode-pill.active .mode-label { color: var(--accent); }

/* スクショカードタブ */
.sc-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sc-tab { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--text3); letter-spacing: .06em; cursor: pointer; text-align: center; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.sc-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ===== スクショカード共通（常にダーク） ===== */
.sc-wrap { border-radius: var(--radius); overflow: hidden; }

/* ① ミニマル型 */
.sc-minimal {
  background: #0B0F14; border: 1px solid rgba(245,185,66,0.18);
  padding: 28px 24px; position: relative;
}
.sc-minimal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,185,66,0.5), transparent);
}
.sc-m-day { font-family: var(--font-mono); font-size: 11px; color: rgba(245,185,66,0.55); letter-spacing: .12em; margin-bottom: 20px; }
.sc-m-amount { font-family: var(--font-display); font-size: 52px; font-weight: 800; color: #F5B942; letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; }
.sc-m-days { font-family: var(--font-mono); font-size: 18px; color: rgba(255,255,255,.5); margin-bottom: 20px; }
.sc-m-divider { height: 1px; background: rgba(255,255,255,.06); margin-bottom: 16px; }
.sc-m-today { display: flex; justify-content: space-between; align-items: center; }
.sc-m-today-label { font-size: 12px; color: rgba(255,255,255,.35); }
.sc-m-today-val { font-family: var(--font-mono); font-size: 16px; color: rgba(255,255,255,.7); }
.sc-m-tags { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: rgba(79,142,247,.65); }
.sc-m-brand { margin-top: 12px; font-family: var(--font-display); font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.15); text-align: right; }

/* ② エモ型 */
.sc-emo {
  background: linear-gradient(160deg, #0d1220 0%, #0B0F14 100%);
  border: 1px solid rgba(34,197,94,0.2); padding: 32px 24px;
  position: relative; text-align: center;
}
.sc-emo::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34,197,94,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.sc-e-day { font-family: var(--font-mono); font-size: 11px; color: rgba(34,197,94,.6); letter-spacing: .1em; margin-bottom: 6px; }
.sc-e-location { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 22px; }
.sc-e-quote { font-size: 18px; font-weight: 700; color: #eef2ff; line-height: 1.6; margin-bottom: 22px; font-style: italic; }
.sc-e-divider { width: 40px; height: 1px; background: rgba(255,255,255,.12); margin: 0 auto 18px; }
.sc-e-amount { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #F5B942; }
.sc-e-days { font-family: var(--font-mono); font-size: 14px; color: rgba(255,255,255,.45); margin-top: 4px; }
.sc-e-tags { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: rgba(79,142,247,.6); }
.sc-e-brand { margin-top: 10px; font-family: var(--font-display); font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.15); }

/* ③ バズ特化型 */
.sc-buzz {
  background: #080c12;
  border: 1px solid rgba(245,185,66,0.25);
  padding: 36px 24px 28px;
  position: relative; text-align: center;
}
.sc-buzz::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 30%, rgba(245,185,66,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.sc-b-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: rgba(245,185,66,.5); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.sc-b-amount { font-family: var(--font-display); font-size: clamp(44px, 14vw, 64px); font-weight: 800; color: #F5B942; letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 60px rgba(245,185,66,0.3); margin-bottom: 12px; }
.sc-b-days { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.sc-b-danger { display: inline-block; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.35); border-radius: 99px; padding: 6px 16px; font-size: 13px; font-weight: 700; color: #ff4d6d; margin-bottom: 18px; font-family: var(--font-mono); }
.sc-b-tags { font-family: var(--font-mono); font-size: 11px; color: rgba(79,142,247,.6); }
.sc-b-brand { margin-top: 12px; font-family: var(--font-display); font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.15); }

/* 日記 */
.diary-date-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.diary-date-label { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); }
.diary-nav-btn { background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: var(--text2); -webkit-tap-highlight-color: transparent; }
.diary-ai-card { background: linear-gradient(135deg, var(--accent-dim), var(--accent2-dim)); border: 1px solid rgba(245,185,66,0.18); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; }
.diary-ai-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.diary-ai-text { font-size: 15px; color: var(--text); line-height: 1.9; white-space: pre-wrap; min-height: 80px; }
.diary-memo-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 15px; padding: 14px 15px; outline: none; resize: none; min-height: 80px; transition: border-color .2s; }
[data-theme="light"] .diary-memo-input { background: rgba(0,0,0,.03); }
.diary-memo-input:focus { border-color: var(--accent); }
.btn-diary-gen { width: 100%; background: linear-gradient(135deg, var(--accent-dim), var(--accent2-dim)); border: 1px solid rgba(245,185,66,0.25); border-radius: var(--radius-sm); color: var(--accent); font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .06em; padding: 16px; cursor: pointer; margin-bottom: 10px; -webkit-tap-highlight-color: transparent; transition: opacity .15s; }
.btn-diary-gen:active { opacity: .75; }
.btn-diary-gen:disabled { opacity: .4; cursor: not-allowed; }

/* モーダル */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 200; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 480px; margin: auto; max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: slideUp .3s cubic-bezier(.23,1,.32,1); }
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:none;opacity:1} }
.modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: .04em; margin-bottom: 20px; color: var(--text); }
.theme-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); margin-bottom: 18px; }
.theme-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
.toggle { position: relative; width: 48px; height: 26px; background: var(--text3); border-radius: 99px; cursor: pointer; border: none; transition: background .2s; flex-shrink: 0; }
.toggle.on { background: var(--accent); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle.on::after { transform: translateX(22px); }

/* トースト */
.toast { position: fixed; bottom: calc(var(--nav-h) + 14px); left: 50%; transform: translateX(-50%) translateY(16px); background: var(--accent2); color: #000; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 10px 22px; border-radius: 99px; opacity: 0; transition: all .25s cubic-bezier(.23,1,.32,1); pointer-events: none; z-index: 300; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); color: #fff; }

.empty-state { text-align: center; padding: 22px 0; font-size: 13px; color: var(--text3); font-family: var(--font-mono); }

@keyframes spin { to{transform:rotate(360deg)} }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.2); border-top-color: #000; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
.btn-generate .spinner, .btn-diary-gen .spinner { border-color: rgba(255,255,255,.25); border-top-color: currentColor; }

input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.6); cursor: pointer; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8aaa' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
select.form-input option { background: #1e293b; }

@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.fu  { animation: fadeUp .4s ease both; }
.fu2 { animation: fadeUp .4s .08s ease both; }
.fu3 { animation: fadeUp .4s .16s ease both; }
.fu4 { animation: fadeUp .4s .24s ease both; }
.fu5 { animation: fadeUp .4s .32s ease both; }

/* ===== FABボタン ===== */
.fab-container {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 90;
}
.fab-main {
  width: 56px; height: 56px;
  background: var(--accent);
  border: none; border-radius: 50%;
  color: #000; font-size: 28px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(245,185,66,0.45);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
}
.fab-main:active { transform: scale(.92); box-shadow: 0 3px 12px rgba(245,185,66,0.3); }
.fab-sub {
  width: 44px; height: 44px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
  backdrop-filter: blur(12px);
}
.fab-sub:active { transform: scale(.92); }

/* ===== フィードバックカード ===== */
.feedback-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  margin-bottom: 8px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(8px);
}
.feedback-good   { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.2);  color: #22C55E; }
.feedback-warn   { background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.2); color: #fb923c; }
.feedback-danger { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.2);  color: #ef4444; }
.feedback-info   { background: rgba(79,142,247,.08);border: 1px solid rgba(79,142,247,.18);color: var(--accent3); }
.feedback-icon   { font-size: 16px; flex-shrink: 0; }

/* ===== 文字・コントラスト改善 ===== */
body { font-size: 16px; line-height: 1.6; }
.hero-sub { font-size: 14px; line-height: 1.6; color: var(--text2); }
.section-card p,
.card p { line-height: 1.7; }
.expense-place { font-size: 14px; }
.country-name  { font-size: 15px; }
.stat-chip-value { font-size: 22px; }

/* ダッシュボード余白さらに改善 */
.stats-row { margin-bottom: 16px; }
.hero-card { padding: 28px 22px 22px; }

/* ===== 旅行名ラベル ===== */
.trip-name-label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text2); letter-spacing: .06em;
  margin-bottom: 6px; min-height: 18px;
}

/* ===== SNSカード比率最適化 ===== */
.sc-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.sc-minimal,
.sc-emo,
.sc-buzz {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}

/* 4:5縦長モード */
.sc-wrap.portrait .sc-minimal,
.sc-wrap.portrait .sc-emo,
.sc-wrap.portrait .sc-buzz {
  aspect-ratio: 4 / 5;
}

/* ミニマル型：数字を主役・見やすさ優先 */
.sc-minimal { padding: 24px 20px; }
.sc-m-amount {
  font-size: clamp(20px, 6.5vw, 34px);
  line-height: 1.1;
  word-break: break-all;
  overflow-wrap: break-word;
}
.sc-m-days { font-size: 15px; margin-bottom: 0; }

/* エモ型：感情・旅情 */
.sc-emo { padding: 28px 24px; justify-content: center; gap: 0; }
.sc-e-quote { font-size: 17px; margin-bottom: 20px; }
.sc-e-amount { font-size: 30px; }

/* バズ特化型：インパクト最大 */
.sc-buzz { padding: 24px 20px; justify-content: center; gap: 6px; }
.sc-b-amount {
  font-size: clamp(22px, 7vw, 40px);
  line-height: 1.1;
  word-break: break-all;
  overflow-wrap: break-word;
}
.sc-b-days { font-size: 16px; margin-bottom: 8px; }

/* 比率切り替えボタン */
.sc-ratio-btns {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.sc-ratio-btn {
  background: rgba(255,255,255,.04); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
.sc-ratio-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ===== ヒーロー補足情報 ===== */
.hero-sub-info {
  font-size: 12px;
  color: var(--text3);
  margin-top: 6px;
  font-family: var(--font-mono);
}
.hero-sub-info strong { color: var(--text2); }

/* ===== 日記支出サマリ ===== */
.diary-expense-summary {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
}
.diary-summary-loc {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.diary-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diary-summary-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}
.diary-summary-amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.diary-summary-cats {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
  font-family: var(--font-mono);
}

/* ===== SNSカード役割差強化 ===== */

/* ミニマル：静かで整っている */
.sc-minimal {
  background: #0d1220;
  border: 1px solid rgba(255,255,255,0.08);
}
.sc-minimal .sc-m-amount { color: #f0f4ff; }
.sc-minimal .sc-m-days   { color: rgba(255,255,255,0.4); }
.sc-minimal .sc-m-tags   { color: rgba(255,255,255,0.25); }

/* エモ：旅情・引用主役 */
.sc-emo {
  background: linear-gradient(160deg, #0d1a2e 0%, #0a1220 100%);
  border: 1px solid rgba(34,197,94,0.2);
}
.sc-e-quote {
  color: #eef2ff;
  border-left: 2px solid rgba(34,197,94,0.5);
  padding-left: 12px;
}
.sc-e-amount { color: #F5B942; }

/* バズ特化：数字ドン・危機感ドン */
.sc-buzz {
  background: #060a10;
  border: 2px solid rgba(245,185,66,0.35);
}
.sc-b-label { letter-spacing: .25em; }
.sc-b-amount {
  color: #F5B942;
  text-shadow: 0 0 40px rgba(245,185,66,0.4);
}

/* ===== 旅切り替えセレクター ===== */
.trip-selector-label {
  font-size: 10px; color: var(--text3);
  font-family: var(--font-mono); letter-spacing: .08em;
  margin-bottom: 4px;
}
.trip-name-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  cursor: pointer;
  padding: 7px 12px;
  margin-bottom: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.trip-name-btn:active { background: rgba(255,255,255,.2); }
.trip-name-btn span:first-child {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: #ffffff; letter-spacing: .03em;
}
.trip-name-text {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: #ffffff !important; letter-spacing: .03em;
}
.trip-name-chevron {
  font-size: 10px; color: var(--text3);
  margin-left: 2px;
}
[data-theme="light"] .trip-name-btn {
  background: rgba(255,255,255,.9);
  border-color: rgba(180,140,100,.25);
}
[data-theme="light"] .trip-name-btn span:first-child { color: #2C1F14; }
[data-theme="light"] .trip-name-text { color: #2C1F14 !important; }

/* ===== ボトムシート ===== */
.sheet-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); z-index: 200;
  align-items: flex-end;
}
.sheet-overlay.open { display: flex; }
.sheet-box {
  background: var(--bg3); border: 1px solid var(--card-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 20px 32px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  animation: slideUp .3s cubic-bezier(.23,1,.32,1);
}
.sheet-handle {
  width: 36px; height: 4px; background: var(--text3);
  border-radius: 99px; margin: 0 auto 16px;
}
.sheet-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--text); margin-bottom: 16px; letter-spacing: .04em;
}

/* 旅カード */
.trip-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; transition: all .15s; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.trip-card.active {
  border-color: var(--accent2);
  background: var(--accent2-dim);
}
.trip-card:active { opacity: .8; }
.trip-card-header { display: flex; align-items: center; justify-content: space-between; }
.trip-card-name {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text);
}
.trip-card-active-badge {
  background: var(--accent2); color: #000;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; letter-spacing: .06em;
}
.trip-card-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  margin-top: 4px;
}
.trip-card-stats {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.trip-card-spent {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent);
}
.trip-card-budget { font-family: var(--font-mono); font-size: 11px; color: var(--text3); }
.trip-card-bar-outer {
  background: rgba(255,255,255,.06); border-radius: 99px;
  height: 4px; margin-top: 6px; overflow: hidden;
}
[data-theme="light"] .trip-card-bar-outer { background: rgba(0,0,0,.06); }
.trip-card-bar-inner {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width .6s ease;
}

/* ===== 日記編集 ===== */
.diary-ai-label-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.diary-saved-badge {
  font-size: 11px; color: var(--accent2);
  font-family: var(--font-mono); font-weight: 700;
}
.diary-edit-textarea {
  width: 100%; background: rgba(255,255,255,.04);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px; outline: none; resize: none; min-height: 160px;
  line-height: 1.8; margin-bottom: 8px;
}
[data-theme="light"] .diary-edit-textarea { background: rgba(0,0,0,.03); }
.diary-action-row { display: flex; gap: 8px; margin-top: 8px; }
.diary-edit-btn {
  background: rgba(255,255,255,.06); border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--text2);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  padding: 7px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.diary-save-btn {
  background: var(--accent2); border: none; border-radius: 8px; color: #000;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  padding: 7px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ===== 日記モードタブ ===== */
.diary-mode-tabs {
  display: flex; gap: 8px; margin: 0 16px 12px;
}
.diary-mode-tab {
  flex: 1; padding: 10px 0; border-radius: 10px;
  border: 1.5px solid var(--card-border);
  background: transparent; color: var(--text2);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.diary-mode-tab.active {
  background: var(--card-bg); border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .diary-mode-tab.active {
  background: #fff; border-color: var(--accent); color: var(--accent);
}

/* ===== 日記パネル ===== */
/* diary-panel は下部で定義 */
.diary-panel .diary-edit-textarea,
.diary-panel #diary-write-textarea {
  width: 100%; background: transparent;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  padding: 14px 15px; outline: none; resize: none; min-height: 180px;
  line-height: 1.8; margin-bottom: 10px; box-sizing: border-box;
  transition: border-color .2s;
}
.diary-panel #diary-write-textarea:focus { border-color: var(--accent); }
[data-theme="light"] .diary-panel #diary-write-textarea { background: rgba(0,0,0,.02); }

.diary-save-btn-main {
  width: 100%; background: var(--accent); border: none;
  border-radius: var(--radius-sm); color: #000;
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
  padding: 15px; cursor: pointer; margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s;
}
.diary-save-btn-main:active { opacity: .85; transform: scale(.98); }
.diary-save-btn-main:disabled { opacity: .4; cursor: not-allowed; }

/* ===== SNS完了メッセージ ===== */
.gen-complete-msg {
  text-align: center; font-family: var(--font-display); font-size: 13px;
  font-weight: 700; color: var(--accent2); padding: 6px 0 2px;
  letter-spacing: .04em;
}


/* ===== 日記カレンダー ===== */
.diary-date-label-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text); -webkit-tap-highlight-color: transparent;
  border-bottom: 1px dashed var(--text3); padding-bottom: 1px;
  transition: color .15s;
}
.diary-date-label-btn:active { color: var(--accent); }

.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month-label {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text);
}
.cal-nav-btn {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 8px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; color: var(--text2);
  -webkit-tap-highlight-color: transparent;
}

.cal-legend {
  display: flex; gap: 16px; margin-bottom: 12px;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text3); font-family: var(--font-mono);
}
.cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.cal-dot.diary   { background: var(--accent2); }
.cal-dot.expense { background: var(--accent); }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; margin-bottom: 6px;
}
.cal-weekdays span {
  font-size: 11px; color: var(--text3);
  font-family: var(--font-display); font-weight: 700;
  padding: 4px 0;
}
.cal-weekdays span:first-child { color: #f87171; }
.cal-weekdays span:last-child  { color: var(--accent3); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cal-day {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent; transition: all .15s;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--text2);
}
.cal-day:active { transform: scale(.9); }
.cal-day.empty  { cursor: default; }
.cal-day.today  { background: var(--accent-dim); color: var(--accent); }
.cal-day.selected { background: var(--accent); color: #000; font-weight: 800; }
.cal-day.has-diary {
  background: rgba(34,197,94,.15); color: var(--accent2);
  border: 1px solid rgba(34,197,94,.3);
}
.cal-day.has-diary.selected { background: var(--accent); color: #000; border-color: var(--accent); }
.cal-day.has-expense:not(.has-diary) {
  color: var(--accent);
}
.cal-day.sunday  { color: #f87171; }
.cal-day.sunday.has-diary { color: var(--accent2); }
.cal-day.saturday { color: var(--accent3); }
.cal-day.saturday.has-diary { color: var(--accent2); }
.cal-day.out-of-trip { opacity: .3; }

.cal-day-dot {
  position: absolute; bottom: 3px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent2);
}
.cal-day.has-expense:not(.has-diary) .cal-day-dot { background: var(--accent); }
/* ===================================================
   SOFT TRIP JOURNAL — ライトモード専用上書き
   =================================================== */

/* 背景の空気感 */
[data-theme="light"] #app { background: transparent; }

/* ナビ：温かみのあるボーダー */
[data-theme="light"] .bottom-nav {
  background: rgba(255,253,248,0.95);
  border-top: 1px solid rgba(180,140,100,0.15);
  box-shadow: 0 -2px 20px rgba(160,120,80,0.08);
}

/* カード：紙っぽい質感 */
[data-theme="light"] .card,
[data-theme="light"] .section-card,
[data-theme="light"] .input-card,
[data-theme="light"] .stat-chip {
  background: rgba(255,255,255,0.92);
  border-color: rgba(180,140,100,0.12);
  box-shadow: 0 2px 16px rgba(160,120,80,0.08), 0 0 0 0.5px rgba(180,140,100,0.1);
  backdrop-filter: none;
}

/* ヒーローカード：上質な紙感 */
[data-theme="light"] .hero-card {
  background: linear-gradient(145deg, #FFFEF9 0%, #FFF8F0 100%);
  border: 1px solid rgba(192,120,48,0.18);
  box-shadow: 0 4px 28px rgba(160,100,50,0.1);
}
[data-theme="light"] .hero-card::after {
  color: rgba(192,120,48,0.06);
}
[data-theme="light"] .hero-amount {
  text-shadow: none;
  color: var(--accent);
}
[data-theme="light"] .hero-sub-info { color: var(--text3); }

/* danger badge：柔らかいトーン */
[data-theme="light"] .danger-safe     { background: rgba(90,158,111,.1);  color: #3D8A56; border-color: rgba(90,158,111,.25); }
[data-theme="light"] .danger-caution  { background: rgba(200,160,60,.1);  color: #8A6A1A; border-color: rgba(200,160,60,.25); }
[data-theme="light"] .danger-warning  { background: rgba(200,120,60,.1);  color: #8A4A18; border-color: rgba(200,120,60,.25); }
[data-theme="light"] .danger-danger   { background: rgba(200,90,90,.1);   color: #8A2A2A; border-color: rgba(200,90,90,.25); }
[data-theme="light"] .danger-critical { background: rgba(200,90,90,.15);  color: #8A2A2A; border-color: rgba(200,90,90,.4); }

/* remaining-days-big：スケジュール感 */
[data-theme="light"] .remaining-days-big {
  background: rgba(90,158,111,.08);
  border-color: rgba(90,158,111,.2);
}
[data-theme="light"] .remaining-days-main { color: var(--accent2); }

/* フィードバック：やわらかいトーン */
[data-theme="light"] .feedback-good   { background: rgba(90,158,111,.08); border-color: rgba(90,158,111,.2); color: #3D8A56; }
[data-theme="light"] .feedback-warn   { background: rgba(200,140,60,.08); border-color: rgba(200,140,60,.2); color: #8A5A18; }
[data-theme="light"] .feedback-danger { background: rgba(200,80,80,.08);  border-color: rgba(200,80,80,.2);  color: #8A2A2A; }
[data-theme="light"] .feedback-info   { background: rgba(123,142,200,.08);border-color: rgba(123,142,200,.2);color: #4A5A9A; }

/* 今日の勝ち負け：柔らかく */
[data-theme="light"] .today-status-win  { background: rgba(90,158,111,.08); border-color: rgba(90,158,111,.2); }
[data-theme="light"] .today-status-ok   { background: rgba(123,142,200,.08);border-color: rgba(123,142,200,.2); }
[data-theme="light"] .today-status-over { background: rgba(200,140,60,.08); border-color: rgba(200,140,60,.2); }
[data-theme="light"] .today-status-fail { background: rgba(200,80,80,.08);  border-color: rgba(200,80,80,.2); }

/* メーター */
[data-theme="light"] .meter-track { background: rgba(180,140,100,.1); }

/* section title */
[data-theme="light"] .section-title { color: #B09A84; }

/* 入力フォーム */
[data-theme="light"] .form-input {
  background: rgba(255,253,248,0.8);
  border-color: rgba(180,140,100,.18);
}
[data-theme="light"] .form-input:focus {
  border-color: var(--accent);
  background: rgba(255,248,240,0.9);
}
[data-theme="light"] .form-input-amount { color: var(--accent); }

/* カテゴリピル */
[data-theme="light"] .cat-pill {
  background: rgba(255,248,240,0.8);
  border-color: rgba(180,140,100,.2);
  color: var(--text2);
}
[data-theme="light"] .cat-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ボタン */
[data-theme="light"] .btn-primary {
  box-shadow: 0 3px 16px rgba(192,120,48,.25);
}
[data-theme="light"] .btn-secondary {
  background: rgba(255,248,240,0.8);
  border-color: rgba(180,140,100,.2);
  color: var(--text2);
}
[data-theme="light"] .btn-generate {
  background: linear-gradient(135deg, #D4845A 0%, #C07830 100%);
  box-shadow: 0 4px 20px rgba(192,120,48,.28);
}

/* 日記画面：手帳感 */
[data-theme="light"] .diary-ai-card {
  background: linear-gradient(145deg, #FFFEF9 0%, #FFFAF3 100%);
  border: 1px solid rgba(180,140,100,.18);
  box-shadow: 0 2px 16px rgba(160,100,50,.08);
  position: relative;
}
[data-theme="light"] .diary-ai-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 3px 0 0 3px;
}
[data-theme="light"] .diary-ai-label { color: var(--accent); }
[data-theme="light"] .diary-ai-text  { color: var(--text); line-height: 2; }
[data-theme="light"] .diary-saved-badge { color: var(--accent2); }
[data-theme="light"] .diary-expense-summary {
  background: rgba(255,248,240,0.9);
  border-color: rgba(180,140,100,.18);
}
[data-theme="light"] .diary-summary-amount { color: var(--accent); }

/* 旅名ボタン（ライトモードは黒文字） */
[data-theme="light"] .trip-name-btn span:first-child { color: #2C1F14; }

/* Travel day badge */
[data-theme="light"] .travel-day-badge {
  background: rgba(192,120,48,.08);
  border-color: rgba(192,120,48,.18);
  color: var(--accent);
}

/* モーダル・シート */
[data-theme="light"] .sheet-box,
[data-theme="light"] .modal-box {
  background: #FFFDF8;
  border: 1px solid rgba(180,140,100,.15);
  box-shadow: 0 -4px 32px rgba(160,100,50,.12);
}
[data-theme="light"] .sheet-handle { background: rgba(180,140,100,.3); }

/* 旅カード */
[data-theme="light"] .trip-card {
  background: rgba(255,255,255,.9);
  border-color: rgba(180,140,100,.15);
}
[data-theme="light"] .trip-card.active {
  background: rgba(90,158,111,.08);
  border-color: rgba(90,158,111,.3);
}
[data-theme="light"] .trip-card-bar-outer { background: rgba(180,140,100,.1); }

/* SNS投稿モード */
[data-theme="light"] .mode-pill {
  background: rgba(255,248,240,.8);
  border-color: rgba(180,140,100,.18);
}
[data-theme="light"] .mode-pill.active {
  background: rgba(192,120,48,.1);
  border-color: var(--accent);
}
[data-theme="light"] .mode-pill.active .mode-label { color: var(--accent); }

/* カレンダー */
[data-theme="light"] .cal-nav-btn {
  background: rgba(255,248,240,.9);
  border-color: rgba(180,140,100,.18);
}
[data-theme="light"] .cal-day.has-diary {
  background: rgba(90,158,111,.12);
  border-color: rgba(90,158,111,.3);
}

/* トースト */
[data-theme="light"] .toast { background: var(--accent2); color: #fff; }
[data-theme="light"] .toast.error { background: var(--danger); color: #fff; }

/* ===================================================
   SNSカード 4枚目：journal（手帳風）
   =================================================== */

.sc-journal {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: #FFFDF8;
  border: 1px solid rgba(180,140,100,.2);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}
/* 手帳の罫線 */
.sc-journal::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 60px;
  height: 1px;
  background: rgba(180,140,100,.12);
  box-shadow: 0 -24px 0 rgba(180,140,100,.08), 0 -48px 0 rgba(180,140,100,.06);
}
/* サイドの色帯 */
.sc-journal::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #C07830, #5A9E6F);
}
.sc-j-header { display: flex; justify-content: space-between; align-items: flex-start; padding-left: 12px; }
.sc-j-day {
  font-size: 11px; color: #B09A84; letter-spacing: .1em;
  font-family: 'JetBrains Mono', monospace;
}
.sc-j-stamp {
  font-size: 20px; opacity: .7;
}
.sc-j-location {
  font-size: 16px; font-weight: 700; color: #2C1F14;
  padding-left: 12px; margin-top: 6px;
}
.sc-j-quote {
  font-size: 15px; color: #4A3525; line-height: 1.7;
  padding-left: 12px; font-style: italic; flex: 1;
  margin: 10px 0;
}
.sc-j-divider {
  height: 1px;
  background: rgba(180,140,100,.2);
  margin: 8px 0;
}
.sc-j-stats {
  display: flex; justify-content: space-between; padding-left: 12px;
  align-items: flex-end;
}
.sc-j-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: #C07830;
}
.sc-j-remain { font-size: 11px; color: #B09A84; text-align: right; }
.sc-j-remain-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #5A9E6F; }
.sc-j-tags {
  margin-top: 8px; padding-left: 12px;
  font-size: 10px; color: #B09A84;
  font-family: 'JetBrains Mono', monospace;
}
.sc-j-brand {
  text-align: right; font-size: 9px; color: rgba(180,140,100,.5);
  letter-spacing: .1em; font-family: 'Syne', sans-serif;
}

/* sc-wrap.portrait での4:5対応 */
.sc-wrap.portrait .sc-journal { aspect-ratio: 4 / 5; }

/* ===================================================
   資金追加ボタン（FAB拡張）
   =================================================== */
.fab-container-expanded {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 90;
}

/* 資金追加モーダル */
.fund-add-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.fund-add-label { font-size: 13px; color: var(--text2); font-weight: 600; flex: 1; }

/* 入力者ラベル */
.inputter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.inputter-pill {
  background: rgba(255,255,255,.04); border: 1px solid var(--card-border);
  border-radius: 99px; color: var(--text2);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 7px 14px; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .inputter-pill { background: rgba(255,248,240,.8); border-color: rgba(180,140,100,.2); }
.inputter-pill.active {
  background: var(--accent3); border-color: var(--accent3); color: #fff; font-weight: 800;
}

/* ===== 日記ボトムアクション ===== */
.diary-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.btn-diary-to-sns {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), #f5a623);
  border: none;
  border-radius: var(--radius-sm);
  color: #000;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: .05em;
  padding: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 18px rgba(245,185,66,.35);
}
.btn-diary-to-sns:active { opacity: .85; transform: scale(.98); }
[data-theme="light"] .btn-diary-to-sns {
  background: linear-gradient(135deg, var(--accent), #f5a623);
  color: #000;
}
.diary-copy-btn { margin-top: 0 !important; }

/* 保存完了メッセージ */
.diary-saved-msg {
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--accent2);
  padding: 4px 0 8px;
  letter-spacing: .04em;
}

/* 入力エリアラベル */
.diary-write-label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
  letter-spacing: .04em;
}

/* 入力エリアの視覚差：保存済みエリアと区別 */
.diary-panel {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 16px 12px;
}
[data-theme="light"] .diary-panel { background: #fff; }
/* ===== シェアカードアクション ===== */
.sc-actions {
  display: flex; gap: 10px; margin-top: 14px;
}
.sc-save-btn {
  flex: 2;
  background: var(--accent);
  border: none; border-radius: var(--radius-sm);
  color: #000; font-family: var(--font-display);
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  padding: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
  box-shadow: 0 4px 16px rgba(245,185,66,.3);
}
.sc-save-btn:active { opacity: .8; }
.sc-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.sc-save-btn .spinner { border-color: rgba(0,0,0,.2); border-top-color: #000; }
.sc-share-btn {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text2); font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  padding: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
.sc-share-btn:active { background: rgba(255,255,255,.1); }
[data-theme="light"] .sc-save-btn { color: #fff; }
[data-theme="light"] .sc-share-btn {
  background: rgba(255,248,240,.8);
  border-color: rgba(180,140,100,.2);
}

/* ===== softカード（🌸 やわらか） ===== */
.sc-soft {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: linear-gradient(145deg, #FFF8F2 0%, #FFF3E8 50%, #F8F0FF 100%);
  border: 1px solid rgba(220,180,150,.25);
  padding: 26px 24px;
  position: relative; overflow: hidden;
}
.sc-soft::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(200,160,220,.15) 0%, transparent 70%);
  pointer-events: none;
}
.sc-soft::after {
  content: '';
  position: absolute; bottom: -20px; left: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(180,220,180,.12) 0%, transparent 70%);
  pointer-events: none;
}
.sc-sf-day {
  font-size: 11px; color: rgba(160,120,90,.7);
  letter-spacing: .1em; font-family: var(--font-mono); margin-bottom: 4px;
}
.sc-sf-location {
  font-size: 18px; font-weight: 700; color: #3D2B1F; margin-bottom: 12px; line-height: 1.3;
}
.sc-sf-quote {
  font-size: 15px; color: #6B5240; line-height: 1.75;
  font-style: italic; flex: 1;
  border-left: 2px solid rgba(200,140,100,.3); padding-left: 12px;
}
.sc-sf-divider { height: 1px; background: rgba(180,140,100,.15); margin: 12px 0; }
.sc-sf-amount {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: #C07830; margin-bottom: 2px;
}
.sc-sf-sub { font-size: 11px; color: rgba(160,120,90,.7); }
.sc-sf-tags {
  margin-top: 8px; font-size: 10px; color: rgba(160,120,90,.6);
  font-family: var(--font-mono);
}
.sc-sf-brand {
  text-align: right; font-size: 9px; color: rgba(180,140,100,.4);
  letter-spacing: .1em; font-family: var(--font-display);
}
.sc-wrap.portrait .sc-soft { aspect-ratio: 4 / 5; }

/* ===== 初回導線（オンボーディング） ===== */
.onboarding-box {
  text-align: center;
  padding: 36px 24px 28px;
  max-width: 380px;
}
.onboarding-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
.onboarding-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--text); margin-bottom: 10px;
  letter-spacing: .04em;
}
.onboarding-desc {
  font-size: 14px; color: var(--text2);
  line-height: 1.7; margin-bottom: 6px;
}
.onboarding-sub {
  font-size: 13px; color: var(--accent);
  font-family: var(--font-display); font-weight: 700;
  margin-bottom: 20px; letter-spacing: .03em;
}
.onboarding-btn {
  font-size: 16px !important;
  padding: 16px !important;
  letter-spacing: .06em;
}
.onboarding-note {
  font-size: 11px; color: var(--text3);
  margin-top: 12px; font-family: var(--font-mono);
}
.onboarding-box .form-group { text-align: left; }

/* ライトモード */
[data-theme="light"] .onboarding-box { background: #FFFDF8; }
[data-theme="light"] .onboarding-sub { color: var(--accent); }
/* ===== 制限到達モーダル ===== */
.limit-box {
  text-align: center;
  padding: 32px 24px 28px;
}
.limit-icon {
  font-size: 44px; margin-bottom: 12px; line-height: 1;
}
.limit-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  color: var(--text); margin-bottom: 8px;
}
.limit-desc {
  font-size: 13px; color: var(--text2);
  line-height: 1.6; margin-bottom: 20px;
}
.limit-features {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 20px;
  text-align: left;
}
.limit-feature {
  font-size: 13px; color: var(--text2);
  padding: 5px 0; font-weight: 600;
}
.limit-btn {
  display: block; text-decoration: none;
  text-align: center;
  background: linear-gradient(135deg, #F5B942, #E8A030) !important;
  font-size: 16px !important; padding: 16px !important;
}
.limit-later {
  background: none; border: none;
  color: var(--text3); font-size: 12px;
  cursor: pointer; padding: 10px;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.limit-later:active { opacity: .7; }

/* 設定画面のライセンス行 */
.settings-license-row { margin-top: 16px; border-top: 1px solid var(--card-border); padding-top: 16px; }
.settings-license-status { font-size: 12px; color: var(--text2); margin-bottom: 4px; font-family: var(--font-mono); }

/* PROバッジ */
.pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F5B942, #E8A030);
  color: #000; font-family: var(--font-display);
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 99px;
  letter-spacing: .06em; vertical-align: middle;
  margin-left: 6px;
}
/* ===== 初回ガイドバナー ===== */
.onboarding-guide-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,185,66,.15), rgba(34,197,94,.1));
  border: 1px solid rgba(245,185,66,.3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  position: relative;
}
[data-theme="light"] .onboarding-guide-banner {
  background: linear-gradient(135deg, rgba(192,120,48,.08), rgba(90,158,111,.06));
  border-color: rgba(192,120,48,.25);
}
.guide-banner-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.guide-banner-text { flex: 1; }
.guide-banner-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.guide-banner-sub {
  font-size: 11px; color: var(--text2);
  font-family: var(--font-mono);
}
.guide-banner-close {
  background: none; border: none;
  color: var(--text3); font-size: 16px;
  cursor: pointer; padding: 4px;
  line-height: 1; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ===== 設定画面データ説明 ===== */
.settings-data-note {
  font-size: 11px; color: var(--text3);
  line-height: 1.6; margin-top: 10px;
  font-family: var(--font-mono);
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border: 1px solid var(--card-border);
}
[data-theme="light"] .settings-data-note {
  background: rgba(0,0,0,.03);
}

/* PROユーザーはデータノートを非表示 */
.pro-active .settings-data-note { display: none; }