/* アトイクラ  ---------------------------------------------------- */

/* 配色：A案「生成り（きなり）」
   ライト＝素の :root ／ 端末に合わせる＝メディアクエリ ／ 手動でダーク＝[data-theme="dark"]
   の3通りを、すべて用意しておく必要がある */
:root{
  --ink:#1F2420;
  --ink-soft:#6E6A61;
  --ink-faint:#A39C90;
  --paper:#FAF6EA;
  --card:#FFFFFF;
  --chrome:#FDFBF5;
  --line:#E9E2D2;
  --line-soft:#F2ECDF;
  --track:rgba(31,36,32,.10);
  --food:#2F9E6B;
  --food-bg:#E8F1E9;
  --dine:#E4572E;
  --dine-bg:#FBEBE2;
  --warn:#B98204;
  --warn-bg:#F7EDD3;
  --over:#B8321F;
  --over-bg:#F7E1DC;
  --on-warn:#2B2109;
  --ikura-light:#F0A48E;
  --ikura:#E4572E;
  --ikura-dark:#96391E;
  --shadow:0 8px 24px rgba(31,36,32,.13);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDE9DF;
    --ink-soft:#A29A8C;
    --ink-faint:#726B5E;
    --paper:#17150F;
    --card:#221F19;
    --chrome:#2A2620;
    --line:#332F27;
    --line-soft:#292520;
    --track:rgba(255,255,255,.10);
    --food:#5AC492;
    --food-bg:#1E2C24;
    --dine:#FF8B54;
    --dine-bg:#33231A;
    --warn:#F0BC3C;
    --warn-bg:#332A11;
    --over:#F2664F;
    --over-bg:#32201B;
    --on-warn:#2B2109;
    --ikura-light:#FFC0A0;
  --ikura:#FF8B54;
  --ikura-dark:#B4441F;
  --shadow:0 8px 24px rgba(0,0,0,.45);
  }
}
/* 端末がライトのまま「ダーク」を選んだときのための指定 */
:root[data-theme="dark"]{
  --ink:#EDE9DF;
  --ink-soft:#A29A8C;
  --ink-faint:#726B5E;
  --paper:#17150F;
  --card:#221F19;
  --chrome:#2A2620;
  --line:#332F27;
  --line-soft:#292520;
  --track:rgba(255,255,255,.10);
  --food:#5AC492;
  --food-bg:#1E2C24;
  --dine:#FF8B54;
  --dine-bg:#33231A;
  --warn:#F0BC3C;
  --warn-bg:#332A11;
  --over:#F2664F;
  --over-bg:#32201B;
  --on-warn:#2B2109;
  --ikura-light:#FFC0A0;
  --ikura:#FF8B54;
  --ikura-dark:#B4441F;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
/* display を持つクラス（.receipt や .navbtn など）が hidden 属性に勝ってしまうのを防ぐ */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer}

/* 画面 ---------------------------------------------------------- */
.screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  background:var(--paper);
}
.screen[hidden]{display:none}
.screen.center{align-items:center;justify-content:center;gap:8px}
.screen.pad{
  padding:calc(env(safe-area-inset-top) + 26px) 22px calc(env(safe-area-inset-bottom) + 22px);
  gap:14px;overflow-y:auto;
}
.body{
  flex:1;overflow-y:auto;
  padding:6px 18px calc(env(safe-area-inset-bottom) + 96px);
  display:flex;flex-direction:column;gap:14px;
}
.body.pad{padding-bottom:calc(env(safe-area-inset-bottom) + 32px);gap:14px}

/* トップバー ---------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;
  background:var(--paper);
}
.topbar-title{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:16px;
}
/* 文字を添えて、アイコンだけでは伝わらない役割をはっきりさせる */
.navbtn{
  flex:none;border:none;border-radius:12px;padding:8px 12px;
  background:var(--card);color:var(--ink-soft);
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;line-height:1;
  min-width:74px;justify-content:center;
}
.navbtn svg{width:16px;height:16px;flex:none}
.navbtn.ghost{background:none;pointer-events:none}
.navbtn.danger{color:var(--over)}

/* 見出しまわり -------------------------------------------------- */
/* ロゴ：「アトイクラ」＋いくらの粒。寸法は em で持つので、文字サイズを変えれば比率のまま拡縮する */
.wordmark{
  display:inline-flex;align-items:flex-end;gap:.05em;
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
  letter-spacing:.02em;line-height:1;
}
.ikura{width:.30em;height:.30em;flex:none;margin-bottom:.06em}
.brand{font-size:40px}
.hello{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
  font-size:24px;line-height:1.4;margin:6px 0 0;text-wrap:balance;
}
.muted{color:var(--ink-soft);font-size:13px;margin:0}
.sectitle{
  font-size:12px;font-weight:700;color:var(--ink-faint);
  letter-spacing:.06em;margin:8px 2px -4px;
}
.secnote{font-size:11px;color:var(--ink-faint);margin:0 2px -6px;opacity:.8}
.mt-auto{margin-top:auto}
.stack{display:flex;flex-direction:column;gap:12px}

/* 月の切り替え -------------------------------------------------- */
.monthbar{display:flex;align-items:center;justify-content:space-between;padding:2px}
.monthbar .m{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:19px}
.arrow{
  width:34px;height:34px;border:none;border-radius:11px;
  background:var(--card);color:var(--ink-faint);font-size:16px;
}
.arrow:disabled{opacity:.35}

/* 予算カード ---------------------------------------------------- */
.bcard{
  border-radius:20px;padding:16px 17px 15px;
  display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line-soft);
}
.bcard.food{background:var(--food-bg)}
.bcard.dining{background:var(--dine-bg)}
.bcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bcard-label{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.pip{width:9px;height:9px;border-radius:3px;flex:none}
.food .pip{background:var(--food)}
.dining .pip{background:var(--dine)}
.chip{
  font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  font-family:"M PLUS Rounded 1c",sans-serif;background:var(--warn);color:var(--on-warn);
}
.chip.over{background:var(--over);color:#fff}

.amount{display:flex;align-items:baseline;gap:6px;font-family:"M PLUS Rounded 1c",sans-serif}
.amount .pre{font-size:12px;font-weight:700;color:var(--ink-soft)}
.amount .big{
  font-size:37px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.amount .yen{font-size:19px;font-weight:800}
.amount.minus .big,.amount.minus .yen{color:var(--over)}

.track{height:9px;border-radius:99px;background:var(--track);overflow:hidden}
.fill{height:100%;border-radius:99px;transition:width .45s ease}
.fill.ok{background:var(--food)}
.fill.near{background:var(--warn)}
.fill.over{background:var(--over)}
.sub{
  display:flex;justify-content:space-between;gap:8px;
  font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}

/* 一覧 ---------------------------------------------------------- */
.list{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:11px;padding:11px 4px;
  border-bottom:1px solid var(--line-soft);
  background:none;border-left:none;border-right:none;border-top:none;
  width:100%;text-align:left;
}
.row:last-child{border-bottom:none}
.rdate{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-size:11px;
  color:var(--ink-faint);width:44px;flex:none;text-align:center;line-height:1.3;
}
.rmain{flex:1;min-width:0}
.rshop{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwho{font-size:11px;color:var(--ink-faint);display:flex;align-items:center;gap:5px;margin-top:1px;min-width:0}
.rmemo{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:5px;border-left:1px solid var(--line);
}
.tag{
  font-size:10px;font-weight:700;padding:1px 7px;border-radius:5px;
  font-family:"M PLUS Rounded 1c",sans-serif;
}
.tag.food{background:var(--food-bg);color:var(--food)}
.tag.dining{background:var(--dine-bg);color:var(--dine)}
.ramt{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;flex:none;
}
.empty{
  text-align:center;color:var(--ink-faint);font-size:13px;
  padding:32px 10px;line-height:1.9;
}

.filters{display:flex;gap:7px}
.fl{
  font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink-faint);background:var(--card);
}
.fl.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.total{
  display:flex;justify-content:space-between;align-items:baseline;
  background:var(--card);border-radius:12px;padding:11px 14px;
}
.total span{font-size:12px;color:var(--ink-soft);font-weight:700}
.total b{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:18px;
  font-variant-numeric:tabular-nums;
}

/* 入力 ---------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:5px}
.flabel{
  font-size:11.5px;font-weight:700;color:var(--ink-faint);
  display:flex;align-items:center;gap:6px;
}
.ai{
  font-size:9.5px;font-weight:700;background:var(--ink);color:var(--paper);
  padding:1px 6px;border-radius:5px;font-style:normal;letter-spacing:.04em;
  font-family:"M PLUS Rounded 1c",sans-serif;
}
.input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);padding:12px 13px;font-size:16px;font-weight:500;
}
.input.num{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
  font-variant-numeric:tabular-nums;font-size:20px;
}
.input:focus{outline:2px solid var(--food);outline-offset:1px;border-color:transparent}
/* iOS の日付欄は既定の見た目のままだと幅が他の欄とそろわないため打ち消す */
.input[type="date"]{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;text-align:left;
  min-height:calc(1.7em + 26px);
}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick.three{grid-template-columns:repeat(3,1fr)}
.pick.three .pickbtn{font-size:12.5px;padding:12px 4px}
.pickbtn{
  border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  padding:13px 8px;text-align:center;font-weight:700;font-size:14px;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.pickbtn small{font-size:10.5px;font-weight:500;color:var(--ink-faint)}
.pickbtn.on{border-color:var(--food);background:var(--food-bg);color:var(--food)}
.pickbtn.on small{color:var(--food)}
.pickbtn.d.on{border-color:var(--dine);background:var(--dine-bg);color:var(--dine)}
.pickbtn.d.on small{color:var(--dine)}

.receipt{
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);
  padding:10px;display:flex;align-items:center;gap:12px;
  font-size:11.5px;color:var(--ink-faint);line-height:1.6;
}
.thumb{
  width:46px;height:58px;border-radius:6px;flex:none;
  object-fit:cover;background:var(--chrome);border:1px solid var(--line);
}
.linkish{
  background:none;border:none;padding:0;color:var(--dine);
  font-weight:700;font-size:11.5px;text-decoration:underline;
}

.callout{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.75;
}
.callout.warn{background:var(--warn-bg);border-color:transparent;color:var(--ink);white-space:pre-wrap;word-break:break-word}

.setrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 2px;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.setrow small{font-size:11.5px}
.setval{
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.toggle{
  width:46px;height:27px;border-radius:99px;border:none;flex:none;
  background:var(--line);position:relative;transition:background .2s;
}
.toggle::after{
  content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle[aria-checked="true"]{background:var(--food)}
.toggle[aria-checked="true"]::after{transform:translateX(19px)}

/* ボタン -------------------------------------------------------- */
.cta{
  display:block;width:100%;margin-top:6px;border:none;
  background:var(--ink);color:var(--paper);border-radius:15px;padding:15px;
  text-align:center;text-decoration:none;
  font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:15.5px;
}
.cta:disabled{opacity:.45}
.cta.soft{
  background:var(--card);color:var(--ink-soft);
  border:1.5px solid var(--line);font-size:13.5px;padding:13px;
}
.cta.soft.danger{color:var(--over)}
.cta.soft.on{border-color:var(--food);color:var(--food);background:var(--food-bg)}

.fab{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  width:64px;height:64px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:4px solid var(--paper);
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.fab svg{width:27px;height:27px}
.fab:active{transform:translateX(-50%) scale(.94)}

/* かぶせ表示 ---------------------------------------------------- */
.busy{
  position:fixed;inset:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  font-size:13.5px;color:var(--ink-soft);
}
.busy[hidden]{display:none}
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--dine);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:60;
  background:var(--ink);color:var(--paper);
  padding:11px 20px;border-radius:999px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow);max-width:88vw;text-align:center;
}
.toast[hidden]{display:none}
.toast.err{background:var(--over);color:#fff}

.lightbox{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.9);
  display:grid;place-items:center;padding:16px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px}

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