:root{--paper:#f6f1e4;--ink:#24211c;--sub:#73695b;--line:#cfc4ad;--red:#b8412c;--green:#2f6b4a;--white:#fffdf8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 "Zen Kaku Gothic New",sans-serif;overflow-x:hidden}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
input,select,button,textarea{font:inherit;color:inherit}
button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:6px 14px;cursor:pointer;border-radius:0;min-height:36px}
button.ghost{background:transparent;color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--red);outline-offset:1px}
input[type=text],select{border:0;border-bottom:1px solid var(--line);background:transparent;padding:4px 2px;min-width:0;border-radius:0}
input[type=text]:focus,select:focus{outline:none;border-bottom-color:var(--ink)}
.hint{font-size:12px;color:var(--sub);margin:6px 0 0}

/* 見出し */
.top{display:flex;align-items:center;gap:10px;padding:14px 0 10px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.top h1{font-size:18px;margin:0;letter-spacing:.08em;white-space:nowrap}
.trip-name{flex:1;min-width:8em;font-weight:700}
h2{font-size:14px;margin:22px 0 8px;padding-bottom:3px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
h2 .no{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:var(--ink);color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:12px}
.h-sub{margin-left:auto;font-weight:500;color:var(--sub);font-size:12px}

.demo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:8px 12px;border:1px dashed var(--red);color:var(--red);font-size:14px}
.demo button{background:var(--red);border-color:var(--red)}

.grid{display:grid;gap:8px 28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}

/* メンバー */
.people{display:flex;flex-wrap:wrap;gap:6px}
.person{display:inline-flex;align-items:center;border:1px solid var(--ink);background:var(--white)}
.person span{padding:3px 4px 3px 10px}
.person button{background:none;border:0;color:var(--sub);padding:0 8px;min-height:32px;font-size:16px}
.person button:hover{color:var(--red)}
.addp{display:flex;gap:6px;margin-top:8px}
.addp input{flex:1}

/* 立て替え */
.exp{border-bottom:1px dashed var(--line);padding:10px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 6px}
.exp.bad{border-left:3px solid var(--red);padding-left:8px}
.exp .row1{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.exp .memo{width:7.5em;flex:1 1 6em}
.exp .amt{width:6.5em;text-align:right}
.exp .ga{color:var(--sub)}
.exp .del{grid-row:1;grid-column:2;align-self:start;border:0;background:none;color:var(--sub);font-size:20px;padding:0 6px;min-height:32px}
.exp .del:hover{color:var(--red)}
.for{grid-column:1/3;display:flex;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--sub);align-items:center}
.for button{background:transparent;color:var(--sub);border:1px solid var(--line);padding:1px 8px;min-height:28px;font-size:13px}
.for button.on{border-color:var(--ink);color:var(--ink);background:var(--white)}
.for button.all{font-weight:700}
.for button.all.on{background:var(--ink);color:var(--paper)}
.for .warn{color:var(--red)}
.add{margin-top:12px}
.empty{color:var(--sub);font-size:14px;margin:8px 0}

/* 精算案（伝票） */
.slip{background:var(--white);border:1px solid var(--ink);padding:4px 16px 16px;align-self:start;margin-top:14px;scroll-margin-top:12px}
@media(min-width:820px){.slip{position:sticky;top:12px}}
.slip h2{margin-top:12px}
.before{color:var(--sub);font-size:13px}
.before s{color:var(--red);font-size:15px}
.big{font-size:20px;font-weight:700;margin:2px 0 8px}
.big .num{font-size:34px;line-height:1.1;color:var(--red)}
.trs{border-top:2px solid var(--ink)}
.tr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;min-height:46px}
.tr:hover{background:var(--paper)}
.tr .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.tr .arrow{color:var(--sub)}
.tr .money{font-family:"IBM Plex Mono",monospace;font-size:18px;text-align:right}
.tr.done{color:var(--sub)}
.tr.done .who,.tr.done .money{text-decoration:line-through;font-weight:400}
.tr.done .money::after{content:" 済";font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;color:var(--green)}
.copyrow{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.copyrow button{flex:1 1 auto}
.copied{font-size:13px;color:var(--green)}
.copy-fallback{width:100%;height:8em;margin-top:8px;border:1px solid var(--line);background:var(--paper);font-size:13px;padding:6px}
.round{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:14px}
.round .lbl{color:var(--sub)}
.seg{display:inline-flex}
.seg button{background:transparent;color:var(--ink);padding:3px 10px;min-height:32px;font-size:13px}
.seg button+button{border-left:0}
.seg button.on{background:var(--ink);color:var(--paper)}
.org select{margin-left:4px}
.bal{width:100%;border-collapse:collapse;font-size:13px;margin-top:14px}
.bal th{font-weight:400;color:var(--sub);text-align:right;padding:2px 4px;border-bottom:1px solid var(--line)}
.bal th:first-child,.bal td:first-child{text-align:left}
.bal td{padding:3px 4px;text-align:right;border-bottom:1px dotted var(--line)}
.bal td:first-child{max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal .p{color:var(--green)} .bal .m{color:var(--red)}
.share{margin-top:16px;padding-top:10px;border-top:1px dashed var(--line)}
.share .shell-share button{border-radius:0;border:1px solid var(--ink);color:var(--ink);background:transparent;font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;padding:4px 10px;min-height:32px}
.share .shell-share button:hover{background:var(--ink);color:var(--paper)}

/* 旅の一覧 */
.list-head{display:flex;align-items:center;gap:10px;margin-top:10px}
.list-head h2{flex:1;margin:12px 0 0}
.trips{list-style:none;padding:0;margin:8px 0}
.trips li{display:flex;align-items:center;gap:8px;border-bottom:1px dashed var(--line)}
.trips .open{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;text-align:left;background:none;border:0;color:var(--ink);padding:10px 2px}
.trips .open:hover{background:var(--white)}
.trips .open.cur{border-left:4px solid var(--red);padding-left:8px}
.trips .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trips .meta{grid-column:1/3;font-size:12px;color:var(--sub)}
.trips .tot{font-family:"IBM Plex Mono",monospace}
.trips .rm{background:none;border:0;color:var(--sub);padding:0 8px}
.trips .rm:hover{color:var(--red)}

/* 使い方 */
.howto{margin-top:40px;padding-top:4px;border-top:2px solid var(--ink);font-size:14px;padding-bottom:40px}
.howto h2{font-size:16px;border:0}
.howto h3{font-size:14px;margin:20px 0 4px}
.howto ol{padding-left:1.4em}
.howto li{margin:4px 0}
.howto p{margin:4px 0;color:#3a352d}

/* スマホの下部バー */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;border:0;border-top:2px solid var(--ink);background:var(--white);color:var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));font-size:15px;text-align:left;display:flex;align-items:center;gap:8px}
.dock b{font-family:"IBM Plex Mono",monospace;font-size:20px;color:var(--red)}
.dock .go{margin-left:auto;color:var(--sub);font-size:13px}
@media(min-width:820px){.dock{display:none!important}}
@media(max-width:819px){body{padding-bottom:64px}}
.dock[hidden]{display:none}