/* ふえる帳 — styles.css
   モック（fueru-cho-app.html）の見た目をそのまま外だししたもの。
   日中モード固定（クリーム色の紙＋パステル）。ダークモード用のブロックは作らない。
   老眼配慮：本文15px以上／入力欄16px以上／12px以下は使わない。
   ------------------------------------------------------------------ */

/* ===== 1. 色とフォント ============================================= */
:root{
  --cream:#FAF3E3; --card:#FFFCF4; --card2:#F5EDD8;
  --ink:#33302A; --ink2:#6E6656; --ink3:#9A9080;
  --line:#E7DDC4; --line2:#D8CBAC;
  --mint:#4FAE81; --mint-bg:#DBF0E5;
  --sky:#5EA5D2;  --sky-bg:#DAEBF7;
  --coral:#E88374; --coral-bg:#FBE0DA;
  --lav:#9585D6;  --lav-bg:#E6E0F8;
  --sun:#E0A93C;  --sun-bg:#FAEDD0;
  --shade:#EFE6D0;
  --sans: system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",sans-serif;
  color-scheme: light;
}
/* 端末やビューアがダークでも見た目を変えない（日中モード固定） */
:root[data-theme="light"], :root[data-theme="dark"]{
  --cream:#FAF3E3; --card:#FFFCF4; --card2:#F5EDD8;
  --ink:#33302A; --ink2:#6E6656; --ink3:#9A9080;
  --line:#E7DDC4; --line2:#D8CBAC;
  --mint:#4FAE81; --mint-bg:#DBF0E5; --sky:#5EA5D2; --sky-bg:#DAEBF7;
  --coral:#E88374; --coral-bg:#FBE0DA; --lav:#9585D6; --lav-bg:#E6E0F8;
  --sun:#E0A93C; --sun-bg:#FAEDD0; --shade:#EFE6D0;
  color-scheme: light;
}

/* ===== 2. 土台 ==================================================== */
html,body{height:100%;}
body{
  margin:0;background:var(--shade);color:var(--ink);
  font-family:var(--sans);line-height:1.7;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
}

/* 画面まるごと1台のスマホ。広い画面では中央に寄せるだけ */
.device{
  max-width:430px;margin:0 auto;min-height:100dvh;background:var(--cream);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
@media (min-width:640px){ .device{box-shadow:0 0 60px -20px rgba(60,45,20,.5);} }

.scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 26px;
}

/* 画面（パネル）— 表示中だけ .on */
.panel{display:none;flex-direction:column;gap:12px;}
.panel.on{display:flex;}

/* ===== 3. 文字まわり ============================================== */
.titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:4px 4px 2px;}
.title{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:0;}

.lbl{font-size:12.5px;font-weight:700;letter-spacing:.07em;color:var(--ink3);}
.sm{font-size:13.5px;color:var(--ink2);}
.xs{font-size:12.5px;color:var(--ink3);line-height:1.6;}
.big{font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.yen{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* 数字の大きさ（用途別） */
.n24{font-size:24px;} .n26{font-size:26px;} .n28{font-size:28px;}
.n30{font-size:30px;} .n38{font-size:38px;} .n46{font-size:46px;}
.yen-lg{font-size:17px;} .yen-md{font-size:16px;}

/* 色・強調 */
.txt-mint{color:var(--mint);}  .txt-sky{color:var(--sky);}
.txt-coral{color:var(--coral);} .txt-lav{color:var(--lav);}
.txt-sun{color:var(--sun);}    .txt-ink{color:var(--ink);}
.strong{font-weight:800;color:var(--ink);}
.b800{font-weight:800;}
.center{text-align:center;}
.m0{margin:0;} .mt4{margin-top:4px;} .mt6{margin-top:6px;}
.mt7{margin-top:7px;} .mt8{margin-top:8px;}
.gap8{gap:8px;}
.grow{flex:1;}

/* ===== 4. カード ================================================== */
.c{
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.c-gap14{gap:14px;}
.c-mint{background:var(--mint-bg);border-color:transparent;}
.c-coral{background:var(--coral-bg);border-color:transparent;}
.c-warn{border-color:var(--sun);}
.c-focus{border-color:var(--mint);border-width:2px;}
hr.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ===== 5. タグ・ドット ============================================ */
.tag{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.t-mint{background:var(--mint-bg);color:var(--mint);}
.t-sky{background:var(--sky-bg);color:var(--sky);}
.t-coral{background:var(--coral-bg);color:var(--coral);}
.t-lav{background:var(--lav-bg);color:var(--lav);}
.t-sun{background:var(--sun-bg);color:var(--sun);}

.dot{width:10px;height:10px;border-radius:99px;flex:none;}
.d-mint{background:var(--mint);} .d-sky{background:var(--sky);}
.d-coral{background:var(--coral);} .d-lav{background:var(--lav);}
.d-sun{background:var(--sun);}   .d-ink3{background:var(--ink3);}

/* ===== 6. バー・グラフ ============================================ */
.bar{height:8px;border-radius:99px;background:var(--card2);overflow:hidden;}
.bar i{display:block;width:0;height:100%;border-radius:99px;transition:width .5s ease;}
.bar-soft{background:rgba(0,0,0,.06);}
.f-mint{background:var(--mint);} .f-sky{background:var(--sky);}
.f-coral{background:var(--coral);} .f-lav{background:var(--lav);}
.f-sun{background:var(--sun);}

.stack{display:flex;gap:5px;align-items:flex-end;}
.stack .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;}
.stack .col i{display:block;border-radius:4px;}
.stack-growth{height:62px;}
.stack-3m{height:86px;}
.stackx{display:flex;gap:5px;font-size:12.5px;color:var(--ink3);text-align:center;}
.stackx span{flex:1;}

.split{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--card2);}
.split i{display:block;}

.donut{
  width:196px;height:196px;border-radius:99px;margin:4px auto;
  display:grid;place-items:center;background:var(--card2);transition:background .5s ease;
}
.donut>div{
  width:132px;height:132px;border-radius:99px;background:var(--card);
  display:grid;place-items:center;text-align:center;
}

/* ===== 7. チップ ================================================== */
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{
  font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line2);color:var(--ink2);background:transparent;cursor:pointer;white-space:nowrap;
}
.chip.on{border-color:transparent;background:var(--ink);color:var(--cream);}
.chip.dashed{border-style:dashed;}

/* 選択中のチップは意味の色になる（JSで色を塗らなくてよい） */
[data-group="wallet"] .chip.on[data-v="biz"]{background:var(--lav);color:#fff;}
[data-group="wallet"] .chip.on[data-v="me"],
[data-group="wallet"] .chip.on[data-v="actual-me"]{background:var(--sun);color:#fff;}
[data-group="kind"] .chip.on[data-v="inv"]{background:var(--mint);color:#fff;}
[data-group="kind"] .chip.on[data-v="con"]{background:var(--sky);color:#fff;}
[data-group="kind"] .chip.on[data-v="was"]{background:var(--coral);color:#fff;}

/* いれる画面のモード切替（つかった／入ってきた）も同じ仕組みで色を持たせる */
#inMode .chip.on[data-m="out"]{background:var(--coral);color:#fff;}
#inMode .chip.on[data-m="in"]{background:var(--mint);color:#fff;}

/* ===== 8. ボタン ================================================== */
.btn{
  font-family:inherit;font-weight:700;font-size:15px;padding:15px 16px;border-radius:16px;
  border:0;cursor:pointer;color:var(--ink);background:var(--card2);width:100%;
}
.btn.primary{background:var(--mint);color:#fff;}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink2);font-size:13.5px;padding:12px;}
.btn.danger{background:var(--coral-bg);color:var(--coral);}
.btn3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.btn3 .btn{padding:15px 4px;font-size:13.5px;}
.btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
button:focus-visible,.chip:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px;}

/* ふりかえりの3択：選ぶと意味の色になる */
#verdict .btn[data-v="inv"].on{background:var(--mint-bg);color:var(--mint);}
#verdict .btn[data-v="con"].on{background:var(--sky-bg);color:var(--sky);}
#verdict .btn[data-v="was"].on{background:var(--coral-bg);color:var(--coral);}

/* ===== 9. 入力欄（すべて16px以上・iOSの自動ズーム防止） ============ */
.field{
  font-family:inherit;background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  padding:14px;font-size:16px;color:var(--ink);width:100%;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}
.field::placeholder{color:var(--ink3);}
.amt{
  font-family:inherit;background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  padding:12px 14px;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink);box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}
.w150{width:150px;}
.inputrow{display:flex;gap:8px;align-items:stretch;}
.inputrow .field{flex:1;min-width:0;}
.inputrow .btn{width:auto;flex:none;padding:14px 20px;}

/* 通貨などのプルダウン（16px以上・iOSの自動ズーム防止） */
.sel{
  font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);
  background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  padding:12px 34px 12px 14px;width:100%;box-sizing:border-box;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),
                   linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sel:focus-visible{outline:3px solid var(--mint);outline-offset:2px;}
/* 行の中に置く小さめのプルダウン。入力欄を押しつぶさないよう幅を抑える */
.sel-sm{width:auto;max-width:170px;padding:8px 30px 8px 11px;}

/* レートを手で直す欄（16px以上） */
.rate{
  font-family:inherit;background:var(--card2);border:1px solid var(--line2);border-radius:14px;
  padding:10px 12px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink);width:130px;flex:none;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}
.rate:focus-visible{outline:3px solid var(--mint);outline-offset:2px;}

/* 確認カードの外貨ブロック（円のときは hidden） */
.fx{display:flex;flex-direction:column;gap:9px;background:var(--card2);
    border-radius:14px;padding:12px;}
.fx[hidden]{display:none;}
.switch{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);}
.switch input{width:22px;height:22px;accent-color:var(--mint);flex:none;}
.filelabel{
  display:block;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink2);
  background:transparent;border:1px solid var(--line2);border-radius:16px;padding:12px;cursor:pointer;
}
.filelabel input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.filelabel:focus-within{outline:3px solid var(--mint);outline-offset:2px;}

/* ===== 10. 一覧の1行 ============================================== */
.item{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line);}
.item:last-child{border-bottom:0;padding-bottom:0;}
.item .nm{flex:1;font-size:14.5px;font-weight:600;line-height:1.35;}
.prov{
  font-size:12.5px;font-weight:700;border:1px dashed var(--line2);color:var(--ink3);
  padding:2px 7px;border-radius:7px;white-space:nowrap;
}
/* 「レート未確定」バッジ。「仮」（.prov＝点線・グレー）と見分けがつくよう
   実線＋注意色（--sun）で塗る */
.rateng{
  font-size:12.5px;font-weight:700;border:1px solid var(--sun);
  background:var(--sun-bg);color:var(--sun);
  padding:2px 7px;border-radius:7px;white-space:nowrap;
}
.empty{text-align:center;color:var(--ink3);font-size:13.5px;padding:22px 0;}

/* ===== 11. 下タブ ================================================= */
.nav{
  flex:none;display:flex;justify-content:space-around;gap:2px;background:var(--card);
  border-top:1px solid var(--line);padding:9px 4px calc(12px + env(safe-area-inset-bottom,0px));
}
.nav button{
  font-family:inherit;background:none;border:0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--ink3);padding:2px 6px;flex:1;
}
.nav button.on{color:var(--mint);}
.nav em{font-style:normal;font-size:21px;line-height:1;}

/* ===== 12. トースト =============================================== */
.toast{
  position:absolute;left:16px;right:16px;bottom:88px;background:var(--ink);color:var(--cream);
  padding:14px 18px;border-radius:16px;font-size:14px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .bar i,.donut,.toast{transition:none;}
}

/* ===== 13. 初期は隠しておくもの =====================================
   #confirm / #proof / #balForm / #rEmpty は hidden 属性で隠す。
   app.js は el.hidden=false でも el.style.display='flex' でも出せる。
   （この [hidden] は .c や .panel より後ろに置くことで効かせている） */
#proof{flex-direction:column;gap:9px;}
#proof:not([hidden]){display:flex;}
[hidden]{display:none;}