/* ========= 旅する割り勘 — デザイン「駅のサイン」＋ポップ =========
 * 紺(駅名標) / 黄(点字ブロック) / 路線図の駅と線 に、ピンク・水色・ミントの差し色。
 * 縁取り＋ずらした影の「ステッカー」風。濃い紺の面は精算ボードだけ。
 */
:root{
  --ink:#16223D; --ink-2:#22325A; --yellow:#FFD11A; --yellow-d:#D9A900;
  --pink:#FF9EC0; --sky:#93D5FF; --mint:#8FE6C2; --pink-t:#FFE3EE; --sky-t:#E1F3FF; --mint-t:#DDF8EC;
  --field:#E9EEF3; --paper:#FFFFFF; --line:#D3DBE6; --line-2:#C0CAD9;
  --muted:#55627D; --text:#16223D;
  --ok:#157A4A; --ng:#C4381F; --ok-on:#6EDBA3; --ng-on:#FF9A84;
  --r-sheet:22px; --r-field:12px; --r-btn:14px;
  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
  --font-num:"Barlow Semi Condensed","Zen Maru Gothic","Hiragino Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  font-family:var(--font-jp); font-size:16px; line-height:1.75; color:var(--text);
  background-color:var(--field); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(22,34,61,.09) 1.6px, transparent 1.7px); background-size:20px 20px;
}
a{color:var(--ink); text-underline-offset:3px; word-break:break-word}
h1,h2,h3{margin:0; color:var(--ink); font-weight:700; line-height:1.35}
h2{font-size:1.125rem}
h3{font-size:.9375rem}
p{margin:0}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.mono{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.875rem} .nowrap{white-space:nowrap}
.ok{color:var(--ok)} .ng{color:var(--ng)}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.spacer{height:12px}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px; border-radius:4px}

/* ===== レイアウト ===== */
.wrap{max-width:1040px; margin:0 auto; padding:0 16px 40px}
.page-group .wrap{padding-bottom:104px}   /* 下固定の追加ボタン分 */
.grid{display:grid; gap:20px}
.grid > *,.admin-grid > *,.page-admin .wrap > *,.col-stack > *{min-width:0}
.grid-2{grid-template-columns:minmax(0,1fr)}
.col-stack{display:grid; gap:20px; align-content:start}
@media (min-width:900px){ .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ===== マストヘッド ===== */
.masthead{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 10px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.0625rem}
.brand svg{flex:none}
.brand:hover .brand-name{text-decoration:underline; text-underline-offset:4px}

/* ===== 通知 ===== */
.toast{margin:4px 0 10px; padding:12px 16px; border-radius:var(--r-field); font-size:.9375rem; font-weight:700; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink)}
.toast.error{background:var(--pink); color:var(--ink)}
.toast strong{font-weight:700; margin-right:.4em}

/* ===== シート（白い面） ===== */
.sheet,.card{background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-sheet); padding:20px; box-shadow:5px 5px 0 var(--sky)}
.pop-pink{box-shadow:5px 5px 0 var(--pink)} .pop-mint{box-shadow:5px 5px 0 var(--mint)} .pop-sky{box-shadow:5px 5px 0 var(--sky)} .pop-yellow{box-shadow:5px 5px 0 var(--yellow)}
.sheet-flush{padding:0; overflow:hidden}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:2px solid var(--ink); background:var(--pink-t)}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:12px}

/* ===== フォーム ===== */
label,legend{display:block; margin:0 0 6px; font-size:.875rem; font-weight:700; color:var(--ink); padding:0}
.field{margin-bottom:18px; border:0; padding:0; min-width:0}
.field:last-child{margin-bottom:0}
.hint{display:block; margin-top:6px; font-size:.8125rem; color:var(--muted); font-weight:400; line-height:1.55}
input,select,textarea{
  width:100%; max-width:100%; padding:12px 14px; min-height:48px; font:inherit; font-size:16px; color:var(--text);
  background:#fff; border:2px solid var(--line-2); border-radius:var(--r-field); outline:none; appearance:none; -webkit-appearance:none;
}
select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.500-5.500' fill='none' stroke='%2316223D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
textarea{resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--ink); box-shadow:0 0 0 4px var(--yellow)}
input:disabled,select:disabled,textarea:disabled{background:#EEF1F5; color:#8793A8; cursor:not-allowed}
input[type=checkbox]{width:auto; min-height:0}
::placeholder{color:#8A96AB}
.row{display:flex; gap:10px; align-items:center}
@media (max-width:600px){ .row{flex-direction:column; align-items:stretch} }

/* 金額 + 単位 */
.amount-field{position:relative}
.amount-field input{padding-right:64px; font-family:var(--font-num); font-size:1.25rem; font-weight:600}
.amount-field .unit{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; pointer-events:none}

/* 参加者チップ（チェックボックスをトグルに） */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; display:inline-flex; align-items:center; margin:0; font-weight:400; font-size:.9375rem; cursor:pointer}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; min-height:44px; border-radius:999px; border:2px solid var(--ink); background:#fff; color:var(--ink); font-weight:500; transition:background .12s}
.chip:hover span{background:var(--sky-t)}
.chip input:checked + span{background:var(--ink); border-color:var(--ink); color:#fff}
.chip input:checked + span::before{content:""; width:.5em; height:.9em; margin-right:2px; border:solid var(--yellow); border-width:0 3px 3px 0; transform:rotate(45deg) translate(-1px,-1px)}
.chip input:focus-visible + span{outline:3px solid var(--ink); outline-offset:2px}
.legend-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px}
.legend-row legend{margin:0}
.link-btn:hover,.link-btn:active{background:none; transform:none; box-shadow:none}
.link-btn{padding:6px 2px; min-height:0; background:none; border:0; box-shadow:none; color:var(--ink); font:inherit; font-size:.875rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ===== ボタン ===== */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px;
  font:inherit; font-size:1rem; font-weight:700; line-height:1.2; color:var(--ink); background:var(--yellow);
  border:2px solid var(--ink); border-radius:var(--r-btn); cursor:pointer; white-space:nowrap; text-decoration:none;
  box-shadow:0 4px 0 var(--ink); transition:transform .08s, box-shadow .08s, background .12s;
}
button:hover,.btn:hover{background:#FFDD55}
button:active,.btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--ink)}
button.secondary,.btn-ink{background:var(--ink); color:#fff; box-shadow:0 3px 0 #000}
button.secondary:hover,.btn-ink:hover{background:var(--ink-2)}
.btn-outline,.btn-line{background:#fff; color:var(--ink); box-shadow:none; border-color:var(--ink); font-weight:700}
.btn-outline:hover,.btn-line:hover{background:var(--sky-t)}
.btn-outline:active,.btn-line:active{transform:none}
.btn-sm{min-height:40px; padding:8px 14px; font-size:.875rem}
.btn-block{width:100%}
.btn-outline.disabled,.btn-line.disabled{opacity:.4; pointer-events:none}
button:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none}
.icon-btn{min-height:44px; min-width:44px; padding:0; border-radius:50%; background:#fff; box-shadow:none; border-color:var(--ink); font-size:1.125rem; line-height:1}
.icon-btn:hover{background:var(--pink-t)}
.icon-btn svg{display:block}
.modal-close{background:#fff; color:var(--ink); box-shadow:none; border-color:var(--ink); min-height:40px; padding:6px 14px; font-size:.875rem}
.mobile-only{display:none}
@media (max-width:900px){ .mobile-only{display:inline-flex} }

/* 送信中（連打防止）のボタン: くるくる回るアニメーション */
.spinner{display:inline-block; width:1.05em; height:1.05em; flex:none; border:3px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .75s linear infinite}
button.is-busy,button.is-busy:disabled{opacity:1; cursor:progress; pointer-events:none}
.btn-outline.is-busy,.btn-line.is-busy{background:var(--sky-t)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation:spin 1.8s linear infinite!important} }   /* 動きを減らす設定でも、処理中だと分かるようゆっくり回す */

/* ===== TOP: ヒーロー ===== */
.page-top .brand{display:none}
.page-top .masthead{justify-content:flex-end; padding-bottom:0}
.hero{padding:34px 0 8px}
.hero h1{font-size:clamp(2.125rem, 8.5vw, 3.375rem); letter-spacing:.02em; line-height:1.2; margin:6px 0 14px; font-weight:900}
.hero p{font-size:1rem; line-height:1.7}   /* 文の途中で早めに改行しない（文節まとめ・均等割り・幅の上限は使わず、画面の端まで文字を入れる） */
.hero .lead-2{color:var(--muted)}
.route{list-style:none; margin:26px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr 1fr; position:relative}
.route li{position:relative; padding-top:26px; font-size:.875rem; font-weight:700; color:var(--ink); line-height:1.45}
.route li::before{content:""; position:absolute; top:5px; left:0; width:18px; height:18px; border-radius:50%; background:var(--sky); border:3px solid var(--ink); z-index:1}
.route li:nth-child(2)::before{background:var(--pink)}
.route li:last-child::before{background:var(--yellow)}
.route li::after{content:""; position:absolute; top:12px; left:18px; right:0; height:4px; background:var(--ink)}
.route li:last-child::after{display:none}
.top-grid{margin-top:20px}
@media (max-width:899px){ .top-grid .recent{order:-1} }

/* TOP: 最近見たグループ・トークン行 */
.token-list{display:grid}
.token-item,.token-row{padding:14px 0; border-top:1px solid var(--line)}
.token-item:first-child,.token-row:first-child{border-top:0; padding-top:0}
.token-line1{display:flex; align-items:center; justify-content:space-between; gap:10px}
.token-text{font-family:var(--font-num); font-variant-numeric:tabular-nums; word-break:break-all; font-weight:600; letter-spacing:.04em}
.token-line2{color:var(--muted); display:flex; gap:4px 14px; flex-wrap:wrap; margin-top:4px; font-size:.875rem}
.token-line2 .group-name{font-weight:700; color:var(--ink)}
.token-meta{flex-direction:column; flex-wrap:nowrap; gap:2px; line-height:1.6}
.token-meta .token-text{font-weight:600; letter-spacing:.02em}
.token-line2 .date{white-space:nowrap}

/* ===== グループ画面 ===== */
.group-head{padding:14px 0 18px}
.group-head h1{font-size:clamp(1.5rem, 6vw, 2.125rem); letter-spacing:.01em; word-break:break-word; font-weight:900}
.group-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.group-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:8px; color:var(--muted); font-size:.875rem}
.cur-pill{display:inline-flex; align-items:center; gap:8px; padding:3px 14px; border-radius:999px; background:var(--pink); color:var(--ink); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); font-family:var(--font-num); font-weight:700; font-size:.9375rem; letter-spacing:.06em}
.cur-edit{padding:0; min-height:0; background:none; border:0; box-shadow:none; color:var(--ink); font-size:.875rem; font-weight:700; text-decoration:underline; text-underline-offset:3px}
.cur-edit:hover{background:none}

/* グループ画面: スマホは「立替一覧 → 精算 → カテゴリ別 → メンバー → 共有」の1列。PCは、左（立替一覧・カテゴリ別）と右（精算・メンバー・共有）の2列 */
.group-layout{display:grid; gap:20px; grid-template-columns:minmax(0,1fr)}
.col{display:contents}
.area-e{order:1} .area-s{order:2} .area-c{order:3} .area-m{order:4} .area-h{order:5}
@media (min-width:940px){
  .group-layout{grid-template-columns:minmax(0,1fr) 390px; align-items:start}
  .col{display:grid; gap:20px; align-content:start; min-width:0}
  .col > *{order:0}
}

/* カテゴリ別・日別の棒グラフ */
.cat{display:inline-block; margin-right:2px}
.bars{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:14px}
.bar-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:baseline}
.bar-label{font-weight:700; word-break:break-word}
.bar-val{font-weight:700; text-align:right; white-space:nowrap}
.bar-track{grid-column:1 / -1; height:12px; margin-top:3px; background:#fff; border:2px solid var(--ink); border-radius:999px; overflow:hidden}
.bar-track i{display:block; height:100%; background:var(--pink); border-right:2px solid var(--ink); min-width:3px}
.bar-none .bar-track i{background:var(--line-2)}
.bar-sub{grid-column:1 / -1; font-size:.75rem; color:var(--muted)}
.days{margin-top:16px; border-top:2px dotted var(--line-2); padding-top:10px}
.days summary{cursor:pointer; font-weight:700; font-size:.9375rem; padding:6px 0; list-style-position:inside}
.days .bars{margin-top:8px}

/* ----- 精算ボード（明るいレモン色。路線の線は紺） ----- */
.board{background:#FFF6C4; color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-sheet); padding:22px 20px 20px; box-shadow:5px 5px 0 var(--yellow)}
.board h2{color:var(--ink); font-size:1.125rem}
.board h3{color:var(--ink); font-size:.9375rem; font-weight:700; margin:22px 0 6px}
.board h3.first{margin-top:18px}
.board .fx{display:block; font-size:.8125rem; font-weight:400; color:var(--muted); font-family:var(--font-jp)}
.board-sub{margin:4px 0 0; font-size:.8125rem; color:var(--muted)}
.legs{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:18px}
.leg-names{display:flex; justify-content:space-between; gap:12px; font-weight:700; font-size:1.0625rem; line-height:1.4}
.leg-names .to{text-align:right}
.leg-track{display:grid; grid-template-columns:auto 1fr auto; align-items:center; margin:6px 0 4px}
.leg-track .dot{width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--ink)}
.leg-track .dot.end{background:var(--pink)}
.leg-track{margin:10px 0 8px}
.leg-track .rail{position:relative; height:16px; margin-right:16px; border:3px solid var(--ink); border-radius:999px; box-sizing:border-box;
  background:var(--pink);
  animation:draw 6.6s cubic-bezier(.3,.7,.2,1) infinite both; animation-delay:calc(var(--i, 0) * .12s + .1s)}   /* 約1.6秒で左から右へ伸び、右端で5秒止まって、また伸びる（6.6秒周期。スマホでスクロールして見ても、じきに動く） */
.leg-track .rail::before,.leg-track .rail::after{content:""; position:absolute; top:50%; transform:translateY(-50%); clip-path:polygon(0 0, 100% 50%, 0 100%); animation:nudge 6.6s ease-out infinite both; animation-delay:calc(var(--i, 0) * .12s + .1s)}
.leg-track .rail::after{right:-24px; width:24px; height:36px; background:var(--ink)}              /* 矢じりの縁 */
.leg-track .rail::before{right:-17px; width:14px; height:22px; background:var(--yellow); z-index:1} /* 矢じりの中身 */
.leg-fare{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0 8px; text-align:center}
.leg-fare .amt{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:1.625rem; font-weight:700; line-height:1.2}
.leg-fare .cur{font-family:var(--font-num); font-weight:600; color:var(--muted); letter-spacing:.06em}
.leg-fare .fx{display:inline; margin-left:2px}
.done{display:flex; align-items:center; gap:10px; margin-top:14px; font-weight:700; font-size:1.0625rem}
@keyframes draw{0%{clip-path:inset(-14px 100% -14px 0)} 24%,100%{clip-path:inset(-14px -26px -14px 0)}}
@keyframes nudge{0%,24%{translate:0 0} 29%{translate:6px 0} 34%,100%{translate:0 0}}
@media (prefers-reduced-motion:reduce){ .leg-track .rail{animation:none} }

.balances{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.bal{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 12px; align-items:baseline}
.bal .who{font-weight:700}
.bal .val{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; text-align:right; font-size:1.0625rem}
.bal .val.ok{color:var(--ok)} .bal .val.ng{color:var(--ng)}
.bal .fx{grid-column:2; grid-row:1; text-align:right; white-space:nowrap}
.bal .val{grid-column:3; grid-row:1}
.bal .bar{grid-column:1 / -1; grid-row:2; position:relative; height:6px; margin-top:4px; background:rgba(22,34,61,.12); border-radius:3px}
.bal .bar::before{content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--ink)}
.bal .bar i{position:absolute; top:0; bottom:0; border-radius:3px}
.bal .bar i.pos{left:50%; background:var(--ok)}
.bal .bar i.neg{right:50%; background:var(--ng)}
.board .note{margin-top:20px; padding-top:14px; border-top:2px dotted rgba(22,34,61,.3); font-size:.75rem; line-height:1.65; color:var(--muted)}
.board .note a{color:var(--ink)}

/* ----- 立替一覧（白い1枚のシート＋罫線の行） ----- */
.day{padding:8px 20px 6px; background:var(--sky-t); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); font-size:.8125rem; font-weight:700; color:var(--ink); letter-spacing:.02em}
.day:first-of-type{border-top:0}
.exp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:14px 20px; border-top:1px solid var(--line); cursor:pointer}
.day + .exp{border-top:0}
.exp:hover{background:#FFF8D6}
.exp:focus-visible{outline-offset:-3px; border-radius:0}
.exp .desc{font-weight:700; line-height:1.5; word-break:break-word}
.exp .amount{text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; font-size:1.1875rem; line-height:1.4; white-space:nowrap}
.exp .amount .cur{font-size:.8125rem; font-weight:600; color:var(--muted); letter-spacing:.06em; margin-left:3px}
.exp .fx{display:block; font-family:var(--font-jp); font-size:.75rem; font-weight:400; color:var(--muted)}
.exp .who{grid-column:1; font-size:.8125rem; color:var(--muted); line-height:1.7; display:flex; flex-wrap:wrap; gap:0 12px}
.exp .who b{color:var(--ink); font-weight:700}
.exp .at{grid-column:2; text-align:right; font-family:var(--font-num); font-size:.8125rem; color:var(--muted)}
.empty{padding:28px 20px; color:var(--muted)}
.pager{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; border-top:1px solid var(--line)}
.pager-info{font-size:.8125rem; color:var(--muted)}
#expenses{scroll-margin-top:12px} #settlement,#members{scroll-margin-top:12px}

/* ----- メンバー・共有 ----- */
.member-list{list-style:none; margin:12px 0 0; padding:0}
.member-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0; border-top:1px solid var(--line)}
.member-row:first-child{border-top:0}
.member-row .name{font-weight:700; word-break:break-word}
.member-row .icon-btn{border-color:transparent; color:var(--muted)}
.member-row .icon-btn:hover{border-color:var(--line-2); color:var(--ng)}
.add-member-form{margin-top:12px; display:flex; flex-direction:row; gap:10px; align-items:stretch}
.add-member-form input{flex:1 1 auto; min-width:0}
.add-member-form button{flex:0 0 auto}
.share-row{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.share-row button{flex:1 1 140px}
#shareurl{font-family:var(--font-num); font-size:.9375rem; overflow-wrap:anywhere; letter-spacing:.02em}

/* ----- 下固定の追加ボタン（モバイル） ----- */
.addbar{position:fixed; left:0; right:0; bottom:0; z-index:50; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--field) 70%, rgba(233,238,243,0))}
.addbar .btn-in{max-width:1040px; margin:0 auto}
.addbar button{width:100%; min-height:54px; font-size:1.0625rem}
.only-desktop{display:none}
@media (min-width:940px){ .addbar{display:none} .only-desktop{display:inline-flex} .page-group .wrap{padding-bottom:48px} }
.limit-note{font-size:.8125rem; color:var(--muted)}

/* ===== モーダル（モバイルは下からのシート） ===== */
.modal-backdrop{position:fixed; inset:0; background:rgba(22,34,61,.55); display:none; align-items:flex-end; justify-content:center; z-index:1000}
.modal{background:#fff; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; overflow:auto; border:2px solid var(--ink); border-bottom:0; border-radius:24px 24px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); animation:sheet-up .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:640px){ .modal-backdrop{align-items:center} .modal{border-bottom:2px solid var(--ink); border-radius:var(--r-sheet); padding-bottom:24px; animation:none; box-shadow:6px 6px 0 var(--pink)} }
.modal-header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px}
.modal-header h2{font-size:1.1875rem}
.countdown-badge{margin-left:8px; padding:3px 10px; border-radius:999px; background:#F1F4F8; border:1px solid var(--line); font-family:var(--font-num); font-size:.8125rem; font-weight:600; vertical-align:middle; white-space:nowrap}
/* スマホ・マレー語とタガログ語: 見出しが長いので、残り時間は次の行に置く。左端は、✏️の右隣の文字（日本語版の「立」にあたる位置）の真下（位置は assets/app.js が測って --cd-indent に入れる）。行間は詰める */
@media (max-width:640px){
  body.lang-ms .modal-header h2 .countdown-badge,
  body.lang-fil .modal-header h2 .countdown-badge{display:block; width:fit-content; margin:3px 0 0 var(--cd-indent,1.65em); line-height:1.35}
}
.countdown-expired{background:#FBE7E2; border-color:#F0B9AD; color:#7A1F10; font-family:var(--font-jp)}
@keyframes sheet-up{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}
.modal-note{margin-top:12px; font-size:.8125rem; color:var(--muted)}
.danger-zone{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}

/* ===== 管理画面 ===== */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%}
table{width:100%; border-collapse:collapse}
th,td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; text-align:left}
th{background:#F4F7FA; font-size:.8125rem; color:var(--muted)}
.right{text-align:right}
.currency-table td.name{word-break:keep-all; white-space:normal}
.currency-table td.code{width:80px}
.currency-table td.order{width:120px}
.currency-table td.actions{width:90px}
@media (max-width:720px){
  .currency-table thead{display:none}
  .currency-table tbody tr{display:grid; grid-template-columns:72px 1fr auto; row-gap:6px; align-items:center; padding:8px 0}
  .currency-table tbody tr + tr{border-top:1px solid var(--line)}
  .currency-table td{border-bottom:0; padding:6px 8px}
  .currency-table td.code{grid-column:1}
  .currency-table td.name{grid-column:2; word-break:normal; overflow-wrap:anywhere; min-width:0}
  .currency-table tbody tr{grid-template-columns:56px minmax(0,1fr) auto}
  .currency-table[data-type="major"] td.order,.currency-table[data-type="other"] td.order,.currency-table[data-type="other"] td.actions{grid-column:3; justify-self:end}
}
.admin-grid{display:grid; gap:20px; grid-template-columns:minmax(0,1fr); align-items:start}
@media (min-width:900px){ .admin-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.admin-grid .sheet h2,.admin-grid .card h2,.page-admin .card h2{margin-bottom:12px}
.page-admin form + form{margin-top:0}
.page-admin .card{margin-bottom:0}
.page-admin .wrap{display:grid; gap:20px; align-content:start; grid-template-columns:minmax(0,1fr)}

/* 管理画面: ボタン行・編集可能分数フォーム・通貨テーブルの操作ボタン */
.btn-row{display:flex; gap:8px; flex-wrap:nowrap; flex:none}
.limit-form{margin-top:10px; gap:8px; align-items:flex-end}
.limit-form > div:first-of-type{flex:1; min-width:0}
@media (max-width:600px){ .limit-form{align-items:stretch} }
.currency-table td.order{white-space:nowrap}
.currency-table td.order form{display:inline-block; margin:0 4px 0 0}
.currency-table .btn-sm{min-width:40px; padding-left:0; padding-right:0}
.currency-table td.actions .btn-sm{padding-left:12px; padding-right:12px}

.page-admin .section-title h1{font-size:1.5rem; white-space:nowrap}
.page-admin .section-title button{min-height:44px; padding:8px 16px}

.month-filter .row{gap:8px; align-items:center; flex-direction:row; flex-wrap:wrap}
.month-filter select{flex:1; min-width:0}
.month-filter .btn{white-space:nowrap}

/* ===== フッター ===== */
.site-footer{text-align:center; color:var(--muted); font-size:.8125rem; padding:28px 0 8px}
.site-footer a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.site-footer .admin-link{display:inline-block; margin-top:6px; color:#7B88A0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ===== 言語の選択 ===== */
.lang-btn{min-height:40px; padding:6px 14px; font-size:.875rem; background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--ink); gap:6px}
.lang-btn .lang-cur{max-width:9.5em; overflow:hidden; text-overflow:ellipsis}
.modal-sm{max-width:420px}
.lang-list{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px}
.lang-list a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:10px 18px; border:2px solid var(--ink); border-radius:var(--r-btn); background:#fff; color:var(--ink); font-size:1.0625rem; font-weight:700; text-decoration:none; box-shadow:0 3px 0 var(--ink)}
.lang-list a:hover{background:var(--sky-t)}
.lang-list a.on{background:var(--yellow)}
.lang-list a b{font-size:1.125rem}

/* ===== 言語ごとの書体（Google Fonts は lang_fonts_href() で言語ごとに読み込む） ===== */
body.lang-en,body.lang-fil,body.lang-ms{--font-jp:"Nunito","Hiragino Sans",system-ui,sans-serif; --font-num:"Barlow Semi Condensed","Nunito",system-ui,sans-serif}
body.lang-ko{--font-jp:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; --font-num:"Barlow Semi Condensed","Noto Sans KR",sans-serif}
body.lang-zh-hans{--font-jp:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --font-num:"Barlow Semi Condensed","Noto Sans SC",sans-serif}
body.lang-zh-hant{--font-jp:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; --font-num:"Barlow Semi Condensed","Noto Sans TC",sans-serif}
body:not(.lang-ja) .hero h1{letter-spacing:0}
@media (max-width:430px){
  .masthead{gap:8px}
  .brand{gap:6px; min-width:0}
  .brand svg{width:32px; height:13px}
  .brand-name{font-size:.875rem; white-space:nowrap}
  .lang-btn{padding:6px 10px; min-height:38px}
  .lang-btn .lang-cur{max-width:8em}
}

/* ===== 電卓（金額欄の下。ボタンで展開） ===== */
.calc-toggle{margin-top:8px; display:inline-block}
.calc{margin-top:10px; padding:12px; background:var(--sky-t); border:2px solid var(--ink); border-radius:var(--r-sheet); box-shadow:4px 4px 0 var(--sky)}
.calc[hidden]{display:none}
.calc-screen{padding:8px 14px; margin-bottom:10px; background:#fff; border:2px solid var(--ink); border-radius:var(--r-field); text-align:right; overflow:hidden}
.calc-expr{min-height:1.5em; font-size:1rem; color:var(--muted); word-break:break-all; line-height:1.4}
.calc-res{font-size:1.75rem; font-weight:700; line-height:1.3; word-break:break-all}
.calc-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.calc-key{min-height:50px; padding:0; font-size:1.25rem; font-family:var(--font-num); background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--ink)}
.calc-key.calc-op{background:var(--yellow)}
.calc-key.calc-clear{background:var(--pink)}
.calc-key.calc-eq{background:var(--ink); color:#fff; box-shadow:0 3px 0 #000}
.calc-key.calc-eq-tall{grid-row:span 2; min-height:0}
.calc-key.calc-zero{grid-column:span 2}
.calc-key:active{box-shadow:none}
.calc-close{display:block; margin:10px auto 0}

/* ===== NEWバッジ・写真アイコン ===== */
[hidden]{display:none!important}
.new-badge{display:inline-block; padding:0 8px; margin-right:2px; border-radius:999px; background:var(--pink); color:var(--ink); border:2px solid var(--ink); font-family:var(--font-num); font-size:.6875rem; font-weight:700; letter-spacing:.06em; line-height:1.5; vertical-align:.1em}
.clip{font-size:.875rem}
/* オフライン登録機能で登録した立替の印（立替名の次の行。NEWと同じ丸い枠） */
.exp .desc{grid-column:1; grid-row:1}
.exp .amount{grid-column:2; grid-row:1}
.exp .offline-tag{grid-column:1; grid-row:2; line-height:1.4; margin:0 0 2px}
/* 金額欄（円換算で2行になる）を、印の行にもまたがらせる。1行目だけが引き伸ばされて、立替名と印の間が空くのを防ぐ */
.exp.has-offline .amount{grid-row:1 / span 2; align-self:start}
.exp.has-offline .who,.exp.has-offline .at{grid-row:3}
.offline-badge{display:inline-block; max-width:100%; padding:1px 10px; border-radius:999px; background:var(--sky); color:var(--ink); border:2px solid var(--ink); font-size:.6875rem; font-weight:700; letter-spacing:.02em; line-height:1.5}

/* ===== 絞り込み ===== */
.filter{margin:0; padding:10px 20px; border-bottom:2px solid var(--ink); background:#fff}
.filter summary{cursor:pointer; font-weight:700; font-size:.9375rem; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:32px}
.filter summary::-webkit-details-marker{display:none}
.filter-on{padding:1px 10px; border-radius:999px; background:var(--yellow); border:2px solid var(--ink); font-size:.8125rem}
.filter-form{margin-top:10px; display:grid; gap:10px}
.filter-form .field{margin:0}
.filter-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.filter-actions{display:flex; gap:10px; align-items:center}
.filter-actions .btn,.filter-actions button{min-height:44px}

/* ===== 予算 ===== */
.budget{margin:14px 0 20px; padding:14px 18px; background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-sheet); box-shadow:5px 5px 0 var(--mint)}
.budget-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.budget-head b{font-size:1.0625rem}
.budget-track{height:16px; margin:8px 0 6px; background:#fff; border:2px solid var(--ink); border-radius:999px; overflow:hidden}
.budget-track i{display:block; height:100%; background:var(--mint); border-right:2px solid var(--ink); min-width:4px}
.budget-warn .budget-track i{background:var(--yellow)}
.budget-over{box-shadow:5px 5px 0 var(--pink)}
.budget-over .budget-track i{background:var(--ng-on); border-right:0}
.budget-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:700}
.budget-over .budget-left{color:var(--ng)}
.budget-daily{color:var(--muted); font-weight:600}

/* ===== レシート写真 ===== */
.photo-field{margin-top:4px}
.photo-current img,.photo-preview img{display:block; max-width:100%; max-height:200px; border:2px solid var(--ink); border-radius:var(--r-field); background:#fff; margin:6px 0}
.photo-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.photo-hint,.photo-locked{display:block}

/* ===== 未送信の立替（オフラインで入力したもの） ===== */
.pending{margin:0 0 16px; padding:14px 18px; background:var(--sky-t); border:2px dashed var(--ink); border-radius:var(--r-sheet)}
.pending-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pending p{margin:4px 0 8px}
.pending-row{display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; align-items:baseline; padding:8px 0; border-top:1px dashed var(--line-2)}
.pending-tag{padding:0 10px; border-radius:999px; background:var(--yellow); border:2px solid var(--ink); font-size:.75rem; font-weight:700; white-space:nowrap}
.pending-row.failed .pending-tag{background:var(--pink)}
.pending-desc{font-weight:700; word-break:break-word}
.pending-amt{font-weight:700}
.pending-who,.pending-err{grid-column:2 / -1}
.pending-err{color:var(--ng); font-weight:700}
.pending-row .link-btn{grid-column:2 / -1; justify-self:start}
.pending-row.editable{cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:var(--r-field)}
.pending-row.editable:hover{background:rgba(255,255,255,.55)}
.pending-row.editable:focus-visible{outline:3px solid var(--ink); outline-offset:-3px}
@media (max-width:520px){   /* スマホ: ラベルを1行目に置いて、立替の内容が横幅いっぱいに使えるようにする */
  .pending-row{grid-template-columns:1fr auto}
  .pending-tag{grid-column:1 / -1; justify-self:start; margin-bottom:2px}
  .pending-who,.pending-err,.pending-row .link-btn{grid-column:1 / -1}
}

/* ===== ホーム画面の案内（TOP） ===== */

/* ===== 管理画面: 写真の一覧 ===== */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:10px}
.photo-cell{margin:0; padding:8px; border:2px solid var(--ink); border-radius:var(--r-field); background:#fff; min-width:0}
.photo-cell img{display:block; width:100%; height:120px; object-fit:cover; border-radius:8px; background:var(--field)}
.photo-cell figcaption{margin:6px 0; word-break:break-all}

.form-error{margin:10px 0 0; padding:10px 14px; border:2px solid var(--ink); border-radius:var(--r-field); background:var(--pink-t); color:var(--ng); font-weight:700; font-size:.9375rem}
.budget-delete{margin-top:10px}

/* ===== レシート写真の拡大表示 ===== */
.photo-current img,.photo-preview img,.photo-cell img{cursor:zoom-in}
.viewer-backdrop{align-items:center; z-index:1100; background:rgba(22,34,61,.78)}
.viewer{position:relative; width:min(96vw,900px); max-height:94dvh; display:flex; flex-direction:column; gap:10px; padding:12px; background:#fff; border:2px solid var(--ink); border-radius:var(--r-sheet); box-shadow:6px 6px 0 var(--pink)}
.viewer-close{align-self:flex-end; flex:none}
.viewer-scroll{overflow:auto; border-radius:var(--r-field); background:var(--field); max-height:calc(94dvh - 90px); text-align:center}
.viewer-scroll img{display:inline-block; max-width:100%; max-height:calc(94dvh - 90px); object-fit:contain; cursor:zoom-in}
.viewer.actual .viewer-scroll img{max-width:none; max-height:none; cursor:zoom-out}

/* ===== 説明書ボタン（Languageの下）・説明書ページ ===== */
.mast-right{display:flex; flex-direction:column; align-items:stretch; gap:8px}
.manual-btn{display:inline-flex; align-items:center; text-decoration:none; justify-content:center}
.manual-toc ol{margin:8px 0 0; padding-left:1.4em; display:grid; gap:2px}
.manual-toc a{display:inline-block; padding:4px 0; font-weight:700; text-decoration:none}
.manual-toc a:hover{text-decoration:underline}
.manual-sec{margin-top:22px; scroll-margin-top:12px}
.manual-sec h2{margin-bottom:8px}
.manual-sec p,.manual-sec li{line-height:1.85}
.manual-sec ul,.manual-sec ol{margin:6px 0 10px; padding-left:1.4em; display:grid; gap:6px}
.manual-sec b.ui{display:inline; padding:1px 7px; border:2px solid var(--ink); border-radius:8px; background:var(--sky-t); font-weight:700; margin:0 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone}   /* 文章の流れに沿って折り返せる（枠が1つの塊になって、前後の文字を押し出さない） */
.m-tip,.m-warn{margin:8px 0; padding:10px 14px; border:2px solid var(--ink); border-radius:var(--r-field); font-weight:500}
.m-tip{background:var(--mint-t)}
.m-warn{background:var(--pink-t)}
.manual-back{margin:24px 0 8px; text-align:center}
.page-manual .brand{display:inline-flex}
@media (max-width:430px){ .mast-right{gap:6px} .manual-btn{padding:4px 10px; min-height:34px; font-size:.8125rem} }

/* ===== 説明書の画像 ===== */
.m-fig{margin:14px auto; max-width:360px; text-align:center}
.m-fig img{display:block; width:100%; height:auto; background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 var(--sky); cursor:zoom-in}
.m-fig figcaption{margin-top:8px; font-size:.8125rem; color:var(--muted); line-height:1.5}

@media (min-width:900px){   /* PC: 文章は章の幅いっぱいに。画面の画像は、文章の下に、中央に並べる（縦長の画像を文章の横に置くと、大きな空白ができるため） */
  .manual-sec{display:flex; flex-wrap:wrap; justify-content:center; column-gap:28px; row-gap:0; align-items:flex-start}
  .manual-sec > :not(.m-fig){flex:0 0 100%; order:1; min-width:0}
  .manual-sec > .m-fig{order:2; flex:0 0 260px; width:260px; max-width:none; margin:10px 0 4px}
}
.page-admin p,.page-admin .hint,.page-admin .small{overflow-wrap:anywhere}   /* 管理画面の長いパス・トークンは、行の途中でも折り返して、右端まで使う */

/* ===== オフライン表示: 通信できないときは、立替の追加以外を隠し、「追加のみ可能です」と出す（html に is-offline が付く。assets/app.js） ===== */
.offline-banner{display:none; margin:12px 0; padding:12px 16px; border:2px solid var(--ink); border-radius:var(--r-field); background:var(--yellow); box-shadow:3px 3px 0 var(--ink)}
.offline-banner span{display:block; margin-top:2px; font-weight:500; font-size:.9375rem}
html.is-offline .offline-banner{display:block}
html.is-offline .manual-btn,
html.is-offline .group-title-row .icon-btn,
html.is-offline .group-meta,
html.is-offline .offline-row,
html.is-offline #budget,
html.is-offline #expenses,
html.is-offline #stats,
html.is-offline .col-right,
html.is-offline .page-top .top-grid .pop-pink,
html.is-offline .page-top .top-grid .pop-sky{display:none!important}
html.is-offline .group-layout{display:block}
html.is-offline .addbar{display:block!important}
html.is-offline .page-group .wrap{padding-bottom:96px}

/* ===== グループ画面の上部: スマホは2行（1行目: 通貨・予算 / 2行目: 作成日・修正期限）。オフライン保存のボタン（スマホだけ） ===== */
.meta-break{display:none}
.offline-row{display:none}
@media (max-width:720px){
  .meta-break{display:block; flex-basis:100%; height:0}
  .offline-row{display:block; margin-top:10px}
  .offline-btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; padding:6px 14px; font-size:.8125rem; line-height:1.3; background:var(--yellow); box-shadow:0 3px 0 var(--ink); white-space:normal; text-align:center}
}
.pop-lead{margin:4px 0 8px; line-height:1.8}
.pop-steps{margin:10px 0; padding-left:1.4em; display:grid; gap:6px; line-height:1.8}
.pop-fig{max-width:260px}
.pop-more{margin:12px 0 0; text-align:center}

/* ===== スマホ・タブレット: ダブルタップ・ピンチで画面が拡大しないようにする（電卓のボタンを続けて押したときなど）。縦横のスクロールは、そのまま使える ===== */
html,body,button,a,input,select,textarea,label,summary,.chip,.modal,.calc{touch-action:manipulation}

/* ===== 通知（WebPush）のスイッチ（オフライン保存の画面の中） ===== */
.push-box{margin:16px 0; padding:14px 16px; background:var(--sky-t); border:2px solid var(--ink); border-radius:var(--r-field)}
.push-box p{margin:0 0 10px}
.switch{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .slider{position:relative; flex:none; width:52px; height:30px; border-radius:999px; background:#fff; border:2px solid var(--ink); transition:background .15s}
.switch .slider::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink); transition:transform .15s}
.switch input:checked + .slider{background:var(--mint)}
.switch input:checked + .slider::after{transform:translateX(22px)}
.switch input:focus-visible + .slider{outline:3px solid var(--ink); outline-offset:2px}
.switch input:disabled + .slider{opacity:.5}
.switch .switch-text{font-weight:700}
.push-note{margin:10px 0 0!important; font-weight:700}
.push-note.is-error{color:var(--ng)}
.pop-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.pop-jump .btn-sm{min-height:36px}
.pop-h{font-size:1.0625rem; margin:14px 0 6px}
.push-box .pop-h{margin-top:0}