/* グルメアプリ：配色は、生成りの地に、朱色（行きたい）と深緑（行った）。モックの見た目に合わせる。 */
:root{
  --bg:#EDE8DE; --paper:#F7F3EC; --card:#FFFFFF; --ink:#211C17; --sub:#6B6258; --line:#E4DCCF;
  --accent:#B8381F; --go:#2D6A4F; --pin:#2F6FD0; --track:#E4DCCF; --thumb:#8F8678;
  --f-body:'Noto Sans JP',system-ui,-apple-system,'Hiragino Sans','Yu Gothic',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;overscroll-behavior:none}
#app{position:relative;height:100%;max-width:520px;margin:0 auto;background:var(--paper);overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--pin);outline-offset:2px}
[hidden]{display:none!important}

.scr{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.hs{overflow-x:scroll;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--thumb) var(--track)}
.hs::-webkit-scrollbar{height:8px}.hs::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:4px}.hs::-webkit-scrollbar-track{background:var(--track);border-radius:4px}
.hs>*{flex:none}
.vs{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--thumb) var(--track);-webkit-overflow-scrolling:touch}
.sub{font-size:13px;color:var(--sub)}.sub b,.ink{color:var(--ink);font-weight:500}.sub.big{font-size:14px;margin-top:4px}.sub.sm{font-size:12px}
.warn{font-size:12px;color:var(--accent);font-weight:700}
.empty{padding:40px 24px;text-align:center;color:var(--sub)}
.h1{font-size:22px;font-weight:700;line-height:1.35}
.ok{color:var(--go);font-weight:700}

/* ログイン */
.login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:24px;text-align:center}
.login h1{margin:0;font-size:26px}.login .go-btn{max-width:320px}

/* 共通のバー・タブ */
.hd{flex:none;padding:12px 12px 8px;display:flex;align-items:center;gap:6px}
.pill{flex:1;min-width:0;height:44px;border:1px solid var(--line);background:var(--card);border-radius:22px;padding:0 14px;display:flex;align-items:center;gap:8px;text-align:left}
.pill .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ib{flex:none;width:44px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:22px;display:flex;align-items:center;justify-content:center}
.selbtn{flex:none;height:44px;padding:0 12px;border:1px solid var(--line);background:var(--card);border-radius:22px;font-size:13px;font-weight:700;white-space:nowrap}
.selbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips{flex:none;display:flex;gap:8px;padding:0 12px 8px;white-space:nowrap}
.chip{height:32px;padding:0 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-size:13px;display:inline-flex;align-items:center;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.chip.ok{background:var(--go);border-color:var(--go);color:#fff}
.chip.warnc{border-color:var(--accent);color:var(--accent);font-weight:700}
.chips2{display:flex;gap:6px;flex-wrap:wrap}
.count{flex:none;padding:0 16px 6px;font-size:12px;color:var(--sub)}
.list{flex:1;min-height:0;padding:0 12px;display:flex;flex-direction:column;gap:10px}
.tabs{flex:none;display:flex;border-top:1px solid var(--line);background:var(--card);height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.scr.abs .tabs{position:absolute;left:0;right:0;bottom:0;z-index:4}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--sub);font-size:11px}
.tab.on{color:var(--accent);font-weight:700}
.topbar{flex:none;height:56px;display:flex;align-items:center;padding:0 8px;border-bottom:1px solid var(--line)}
.topbar .back{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.topbar .ttl{flex:1;font-size:15px;font-weight:700}
.pagehead{flex:none;padding:16px 16px 4px}.pagehead .sub{margin-top:4px}

/* カード（S1） */
.card{flex:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.card.picked{border:2px solid var(--accent);padding:11px}
.r1{display:flex;align-items:flex-start;gap:8px}
.nm{flex:1;min-width:0;text-align:left;font-size:16px;font-weight:700;line-height:1.4}
.tag{height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;white-space:nowrap}
.tag.go{background:var(--go);color:#fff}.tag.want{background:var(--card);color:var(--accent);border:1px solid var(--accent)}.tag.mine{background:var(--accent);color:#fff;height:22px;font-size:11px}
.cb{display:flex;align-items:center;gap:8px}
.info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rate{font-size:12px;color:var(--sub);display:flex;gap:12px;flex-wrap:wrap}
.ra{flex:none;display:flex;flex-direction:column;gap:4px}
.ra .m,.ra .x{width:40px;height:34px;border:1.5px solid var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--card)}
.ra .m{flex-direction:column;gap:0;padding-top:1px;background:var(--accent);border-color:var(--accent);color:#fff}
.ra .m span{font-size:7px;line-height:1;margin-top:-1px}
.ra .x.off{border-color:var(--line)}
.cks{display:none;align-items:center;justify-content:center;width:28px;height:28px;flex:none;margin-top:-2px}
.cks input{width:22px;height:22px;accent-color:var(--accent);margin:0}
.selmode .cks{display:flex}
.selbar{flex:none;padding:10px 12px;background:var(--card);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.selbar .t{font-size:12px;color:var(--sub)}.selbar .rw{display:flex;gap:6px}
.selbar button{flex:1;height:44px;border:1.5px solid var(--ink);border-radius:10px;font-size:12px;font-weight:700;background:var(--card);padding:0 6px;white-space:nowrap}
.selbar .pm{flex:1.6;background:var(--accent);border-color:var(--accent);color:#fff}
.selbar button:disabled{opacity:.4}
.add{flex:none;padding:10px 12px}
.dash{width:100%;height:48px;border:1.5px dashed var(--accent);border-radius:12px;background:var(--card);color:var(--accent);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}

/* 地図（S2） */
.mapbox{position:absolute;left:0;right:0;top:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));background:#EBE6DA}
.maptop{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex}
.maptop .pill{box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mapban{position:absolute;left:12px;right:12px;top:64px;z-index:2;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:13px}
.mapban button{margin-left:auto;color:#fff;border:1px solid #fff;border-radius:14px;padding:4px 10px;font-size:12px}
.mapcount{position:absolute;left:14px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:2;background:var(--card);border-radius:12px;padding:2px 10px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mapcard{position:absolute;left:12px;right:12px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:3;box-shadow:0 4px 16px rgba(0,0,0,.25)}

/* 詳細（S3） */
.body{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.box .lb,.lb{font-size:13px;color:var(--sub)}.lb.b{font-weight:700;color:var(--ink)}.w64{width:64px}.w84{width:84px}
.row{display:flex;align-items:center;gap:8px}.grow{flex:1;min-width:0}
.hr{height:1px;background:var(--line)}
.st3{display:flex}
.st3 button{flex:1;height:44px;font-size:14px;background:var(--card);border:1px solid var(--line)}
.st3 button:first-child{border-radius:22px 0 0 22px}.st3 button:last-child{border-radius:0 22px 22px 0}
.st3 .on{background:var(--go);border-color:var(--go);color:#fff;font-weight:700}
.stars{display:flex;gap:0}.star{width:34px;height:40px;display:flex;align-items:center;justify-content:center}
.rrow{display:flex;align-items:baseline;gap:8px;font-size:13px}
.rrow .s{width:92px;font-weight:500}.rrow .v{width:44px;font-size:16px;font-weight:700}.rrow .n{flex:1;font-size:12px;color:var(--sub)}
.x2{width:32px;height:32px;font-size:20px;line-height:1;color:var(--sub);flex:none}
.dashbtn{height:40px;border:1px dashed var(--sub);border-radius:10px;background:var(--card);font-size:13px}
.dangerbtn{height:44px;border:1px solid var(--accent);border-radius:10px;background:var(--card);color:var(--accent);font-size:13px;font-weight:700;margin-bottom:8px}
.action{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--card)}
.action .main{flex:2;height:48px;border-radius:12px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.action .sq{width:48px;height:48px;border:1px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--card)}
.action .sq.off{border-color:var(--line)}
textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;line-height:1.6;background:#FBFAF6;resize:vertical}

/* 検索・取り込み・候補・遠征 */
.searchhead{flex:none;padding:12px 12px 4px;display:flex;flex-direction:column;gap:8px}
.qform{display:flex;gap:6px}.qform input{flex:1;min-width:0;height:44px;border:1px solid var(--line);background:#fff;border-radius:22px;padding:0 14px}
.qbtn{flex:none;height:44px;padding:0 16px;border-radius:22px;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;gap:6px}
.res{flex:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer}
.res.reg{background:#EFEAE0;cursor:default;align-items:center}
.res.col{flex-direction:column;gap:4px;cursor:default}.res.warnbox{border:1.5px solid var(--accent)}
.res input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent);margin:0;flex:none}
.res .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.n1{font-size:15px;font-weight:700}.n2{font-size:12px;color:var(--sub)}
.regmark{width:24px;height:24px;border-radius:12px;background:var(--go);display:flex;align-items:center;justify-content:center;flex:none}.regmark.gray{background:var(--sub)}
.done{font-size:12px;color:var(--go);font-weight:700;white-space:nowrap}
.link{font-size:12px;color:var(--accent);font-weight:700;min-height:44px}
.radio{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}.radio input{width:20px;height:20px;accent-color:var(--accent)}
.opt{flex:none;min-height:64px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:12px;text-align:left}
.opt.sel2{border:2px solid var(--accent)}.opt.dis{opacity:.55}
.opt .ic{width:40px;height:40px;border-radius:10px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.opt .tx{flex:1}.opt .tx b{display:block;font-size:15px}.opt .tx span{font-size:12px;color:var(--sub)}
.tripsbody{flex:none;padding:8px 12px 0;display:flex;flex-direction:column;gap:8px}
.pick{flex:none;background:var(--card);border-top:1px solid var(--line);padding:10px 12px calc(10px + 0px);display:flex;flex-direction:column;gap:8px}
.row1{display:flex;align-items:center;gap:8px;font-size:13px}
.selinp{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.selinp.wide{width:100%;flex:none}
.go-btn{width:100%;min-height:48px;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.go-btn:disabled{opacity:.4}
.ghost{flex:1;height:48px;border:1px solid var(--ink);border-radius:12px;font-weight:700}.danger{flex:1;height:48px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700}
.btnrow{display:flex;gap:8px;margin-top:12px}

/* モーダル・通知 */
.modal{position:fixed;inset:0;z-index:20;background:rgba(33,28,23,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:88%;overflow-y:auto;background:var(--paper);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px}
.sheethd{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.fld span{font-size:12px;color:var(--sub)}
.fld input,.fld select{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}
.chk{display:flex;align-items:center;gap:8px;margin:4px 0 12px}.chk input{width:22px;height:22px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;max-width:90%;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;text-align:center}