:root{
  --ink:#1a1a1a; --sub:#6b6b6b; --mute:#767676; --line:#e6e6e6; --fill:#f3f3f3;
  --bg:#fff; --accent:#d1401f; --tab-h:64px; --here:#2f6fe0;
  --jp:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --num:Inter,var(--jp);
}
*{box-sizing:border-box;margin:0;padding:0}
/* 2回タップしても拡大しない（利用者の要望）。スクロール・地図の指2本の操作はそのまま使える */
*{touch-action:manipulation}
html,body{height:100%}
/* iPhone で画面全体が上下に弾まないようにする（見出しなど、止めておく部分が動かないように）。スクロールは各画面の欄の中だけで行う */
html,body{overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%}
body{font-family:var(--jp);font-weight:400;line-height:1.6;color:var(--ink);background:#e9e9e9;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.num{font-family:var(--num);letter-spacing:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:left}
a{color:inherit}
#app{position:relative;max-width:430px;height:100dvh;margin:0 auto;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:600px){
  #app{height:min(900px,calc(100dvh - 40px));margin:20px auto;border-radius:36px;border:1.5px solid var(--ink)}
}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
#screen{flex:1;padding:0 20px 120px;overscroll-behavior-y:contain}
/* さがす：下に引っぱって更新（引いた分だけ開く）と、並び順・更新時刻の行 */
.ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;font-size:12px;color:var(--sub);transition:height .15s}
.ptr.busy{height:32px}
.find-info{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-top:6px}
.find-info .link{min-height:44px;padding:0 4px}
/* マップ：上（見出し・地図・凡例）は止め、一覧だけをスクロール。一覧の下は、追加ボタンに隠れないだけあける */
#screen.pane{overflow:hidden;display:flex;flex-direction:column;padding-bottom:0}
#screen.pane > *{flex:none}
/* さがす・登録も同じ：見出し・検索欄・絞り込みは止め、一覧（.pane-list）だけをスクロール。data-live の入れ物は並びに参加させる */
#screen.pane [data-live]{display:contents}
#screen.pane [data-live] > *{flex:none}
#screen.pane .pane-list.scroll{flex:1 1 auto;min-height:160px;margin:8px -20px 0;padding:0 20px 32px;overscroll-behavior:contain}
#screen.pane .maplist.pane-list{margin-top:16px;padding-bottom:96px}
/* 店の詳細：店名〜Google の店舗情報（写真・評価・営業時間・ボタン）は止め、クチコミから下だけをスクロール */
.stack.pane{overflow:hidden;display:flex;flex-direction:column;padding-bottom:0}
.stack.pane > *{flex:none}
.stack.pane > .pane-list.scroll{flex:1 1 auto;min-height:160px;margin:12px -20px 0;padding:0 20px 40px;overscroll-behavior:contain;border-top:1px solid var(--line)}.maplist .maptabs{position:sticky;top:0;z-index:2;background:var(--bg);margin-top:0}
.top{padding-top:28px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eyebrow{font-size:13px;color:var(--sub);font-family:var(--num)}
h1{font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1.3}
.lead{font-size:13px;color:var(--sub);margin-top:4px;font-weight:400}
.round{width:44px;height:44px;border-radius:50%;border:1px solid #cfcfcf;display:grid;place-items:center;flex:none}
.round svg{width:20px;height:20px}
.sec{font-size:13px;color:var(--sub);margin:28px 0 4px}

/* tabbar */
#tabbar{height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;border-top:1.5px solid var(--ink);background:var(--bg);flex:none}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--mute);position:relative}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--ink);font-weight:700}
.tab .dot{position:absolute;top:10px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* search */
.search{display:block;width:100%;height:48px;border-radius:24px;border:1px solid #bdbdbd;background:var(--fill);padding:0 20px;font-size:16px;margin-top:20px;outline:none}
.search:focus{border-color:var(--ink);background:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chips.line{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:4px 20px}
.chips.line::-webkit-scrollbar{display:none}
.chips.fit .chip{padding:0 11px;font-size:12.5px}
.chip{position:relative;height:36px;padding:0 12px;border-radius:18px;border:1px solid #bdbdbd;font-size:13px;display:inline-flex;align-items:center;white-space:nowrap;background:#fff}
.chip::before{content:"";position:absolute;inset:-4px 0}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .n{font-family:var(--num);margin-left:5px;letter-spacing:0}

/* rows */
.row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);min-height:76px;padding:12px 0}
.row-main{flex:1;min-width:0;min-height:44px;display:block}
.t{font-size:15px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m{font-size:13px;color:var(--sub);margin-top:3px;font-weight:400;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m b{color:var(--ink)}
.soro{color:var(--accent)!important;font-weight:700}
.min{font-family:var(--num);font-size:20px;font-weight:700;white-space:nowrap}
.min small{font-size:14px;font-weight:700;font-family:var(--jp)}
.chev{color:var(--sub);font-size:18px;flex:none}
.row-act{display:flex;gap:8px;flex:none}
.pill{height:44px;min-width:72px;padding:0 16px;border-radius:22px;border:1.5px solid var(--ink);font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;background:#fff;white-space:nowrap}
.pill.solid{background:var(--ink);color:#fff}
.pill.sm{height:36px;min-width:0;padding:0 12px;font-size:12px;position:relative}
.pill.sm::before{content:"";position:absolute;inset:-4px 0}
.btn{display:flex;width:100%;height:52px;border-radius:26px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;align-items:center;justify-content:center;margin-top:12px;text-decoration:none}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn[disabled]{opacity:.4}
.link{text-decoration:underline;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.ico{width:52px;height:52px;border-radius:50%;background:var(--fill);border:1px solid #cfcfcf;display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px}
.note{font-size:12px;color:var(--sub);line-height:1.7;font-weight:400}
.empty{padding:28px 0;text-align:center;color:var(--sub);font-size:14px;line-height:1.7}

/* map */
.map{position:relative;margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid #cfcfcf;aspect-ratio:1/1;background:#f1f1f1}   /* 正方形（利用者の要望で大きく見やすく。5：4→3：2→1：1） */
.map[data-pan]{touch-action:none;cursor:grab}
.map[data-pan]:active{cursor:grabbing}
.map-layer{position:absolute;inset:0;will-change:transform}
.gmap-canvas{position:absolute;inset:0}
/* 地図の上に重ねる「自分の店」「みんなの店」の切り替え（同じ幅・白い台に控えめな影。選んでいる方は黒地に白文字） */
.mapseg{position:absolute;top:8px;left:8px;right:60px;z-index:7;display:flex;gap:4px;padding:4px;background:#fff;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.16);border:1px solid #e2e2e2}
.mapseg button{flex:1 1 0;min-width:0;height:38px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);background:#fff;white-space:nowrap;text-align:center}
.mapseg button.on{background:var(--ink);color:#fff}
/* マップ画面の地図（Google マップ）：横幅いっぱい・縦長。画面に収まらないぶんは fitPane で高さだけ詰める */
.map.main{aspect-ratio:auto;height:calc(min(100vw, 430px) - 40px + 110px)}
/* 地図の下の方に重ねる すべて／ランチ／ディナー・絞り込み（Google のロゴ・地図データの表示の上） */
.meal-row.mapbar{position:absolute;left:8px;right:8px;bottom:30px;z-index:7;margin-top:0}
.meal-row.mapbar .chip{box-shadow:0 2px 6px rgba(0,0,0,.16);border-color:#d6d6d6}
.meal-row.mapbar .chip.on{border-color:var(--ink)}
#screen[data-scroll="screen-map"] > :first-child{margin-top:max(10px, env(safe-area-inset-top))}   /* タイトルの行をなくしたぶん、上の余白は小さく */
.map-recenter{position:absolute;top:8px;right:8px;z-index:6;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #cfcfcf;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.map-recenter svg{width:20px;height:20px}
.gcard{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px;overflow:hidden}
/* 写真は横にスクロールさせない（利用者の要望）：3枚まで。1枚目を大きく、2・3枚目をその下に並べる */
.gphotos{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:-12px -12px 6px;padding:0}
.gph{position:relative;margin:0;min-width:0}
.gph img{width:100%;height:96px;display:block;object-fit:cover;background:var(--fill)}
.gph:first-child{grid-column:1 / -1}
.gph:first-child img{height:170px}
.gphotos.n2 .gph:nth-child(2){grid-column:1 / -1}
.gph figcaption{position:absolute;left:0;right:0;bottom:0;font-size:10px;line-height:1.4;padding:10px 6px 3px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gph figcaption a{color:#fff}
.ginfo{font-size:14px;margin-top:6px}
.ginfo .stars{font-family:var(--num);font-weight:700}
.gsum{font-size:13px;line-height:1.7;margin-top:6px}
.ghours{font-size:13px;margin-top:8px;color:var(--sub)}
.ghours summary{cursor:pointer;min-height:32px;display:flex;align-items:center;color:var(--ink)}
.ghours div{padding:2px 0}
.map.embed{aspect-ratio:4/3}
.map.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.navline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.navline line{stroke:#1a1a1a;stroke-width:3;stroke-dasharray:6 6;stroke-linecap:round}
.navbar{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:14px;padding:10px 12px;margin-top:14px;background:#fff}
.navbar .pill{flex:none}
.navbar .link{min-height:32px;font-size:12px}
.nav-on{border-width:2px}
.nav-step{font-size:17px;font-weight:700;line-height:1.45}
.crosshair{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;z-index:5;pointer-events:none;border:3px solid var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.crosshair::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent)}
.tiles{position:absolute;inset:0}
/* 地図は背景として淡く（白地・黒文字のモノトーン。ピンを主役にする） */
.tile{position:absolute;max-width:none;filter:grayscale(1) contrast(.5) brightness(1.2);opacity:.6;pointer-events:none;user-select:none}
.map-attr{position:absolute;right:4px;bottom:3px;z-index:4;font-size:9px;line-height:1.4;color:#555;background:rgba(255,255,255,.8);padding:0 4px;border-radius:3px}
.map-attr a{color:inherit}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2}
/* ピンの配色：大人っぽい落ち着いた色（利用者の要望）。行きたい＝チャコール、行った！は回数のランクが上がるほど上質な色に */
.pin.lbl{background:#2b2a28;color:#f4efe6;font-size:11px;font-weight:500;padding:4px 9px 4px 8px;border-radius:12px;display:flex;align-items:center;gap:5px;white-space:nowrap;min-height:26px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pin.lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:#c8a96a}
.pin.lbl .sd{color:#fff;font-weight:700;display:flex;align-items:center;gap:4px}
.pin.lbl .sd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pin.lbl.due{box-shadow:0 0 0 2px var(--accent)}
/* 行った！：行った（1回・モカ）→ リピート（2〜4回・グレージュシルバー）→ 常連（5〜9回・シャンパンゴールド）→ 行きつけ（10回〜・ボルドー×ゴールド・王冠）
   文字と背景のコントラストはどれも4.5:1以上 */
.pin.lbl.v1,.lg.v1,.vbadge.v1{background:#e8dccb;color:#3b2f24;border:1px solid #b59a7a}
.pin.lbl.v2,.lg.v2,.vbadge.v2{background:linear-gradient(135deg,#f4f3f0,#d3d0ca);color:#2b2b2b;border:1px solid #9d978e}
.pin.lbl.v3,.lg.v3,.vbadge.v3{background:linear-gradient(135deg,#f5e9c9,#d4b475);color:#2e2412;border:1px solid #a8874c}
.pin.lbl.v4,.lg.v4,.vbadge.v4{background:linear-gradient(135deg,#5e2636,#38131e);color:#f0dca8;border:1px solid #c9a96e;box-shadow:0 2px 6px rgba(56,19,30,.35)}
.pin.lbl.v1::before{background:#8a6a4a}
.pin.lbl.v2::before{background:#6f6a63}
.pin.lbl.v3::before{background:#8a6a2e}
.pin.lbl.v4::before{display:none}
.pin.lbl .crown{width:13px;height:13px;flex:none}
.pin.lbl.v4{font-weight:700;letter-spacing:.02em}
/* 「もう一度行きたい」にした店：回数とランクの色はそのまま、「また」の印 */
.pin.lbl .again{font-size:9px;font-weight:700;padding:0 4px;border-radius:6px;background:rgba(0,0,0,.1);line-height:1.6}
.pin.lbl.v4 .again{background:rgba(240,220,168,.2)}
.pin.lbl.lapsed-ring{box-shadow:0 0 0 2px #a33a3a}
/* 行けてない（2か月以上）：白地にワインレッドの文字・枠 */
.pin.lbl.lapsed{background:#fff;color:#a33a3a;border:1.5px solid #a33a3a;font-weight:700}
.pin.lbl.lapsed::before{background:#a33a3a}
.lg.lapsed{background:#fff;border:1.5px solid #a33a3a}
.lapsed-text{color:#a33a3a !important;font-weight:700}
.maptabs button.lapsed-tab{color:#a33a3a}
.maptabs button.lapsed-tab.on{border-color:#a33a3a}
.pin.lbl .cnt{font-family:var(--num);font-weight:700;margin-left:2px}
.vbadge{display:inline-block;font-family:var(--num);font-weight:700;font-size:12px;border-radius:10px;padding:1px 8px;line-height:1.6}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11px;color:var(--sub)}
.legend span{display:inline-flex;align-items:center;gap:4px}
.lg{width:12px;height:12px;border-radius:4px;display:inline-block}
.lg.want{background:#2b2a28}
.pin.lbl.gray{background:#fff;color:var(--ink);border:1px solid #9a9a9a}
.pin.lbl.gray::before{background:#9a9a9a}
.pin.dot{width:10px;height:10px;border-radius:50%;background:#9a9a9a;border:2px solid #fff;z-index:1}
.pin.dot.blk{background:var(--ink)}
.pin.dot.big{width:16px;height:16px;background:#8a8a8a;border-width:3px;box-shadow:0 0 0 1px #8a8a8a}
/* 見た目は小さいまま、押せる範囲を44px以上にする */
.pin.dot::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.pin.lbl::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* 現在地：店のピン（チャコール・クリーム・金・ワイン・赤）にない青の点＋白いふち。ピンより手前に描き、ゆっくり広がる輪で場所を知らせる
   動きを減らす設定のときは輪を止める（薄い輪だけ残す） */
.pin.me{width:16px;height:16px;border-radius:50%;background:var(--here);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.3),0 0 0 0 rgba(47,111,224,.35);z-index:4;animation:here 2.4s ease-out infinite}
@keyframes here{0%{box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.3),0 0 0 0 rgba(47,111,224,.4)}100%{box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.3),0 0 0 16px rgba(47,111,224,0)}}
@media (prefers-reduced-motion:reduce){.pin.me{animation:none;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.3),0 0 0 8px rgba(47,111,224,.15)}}
.lg.here{background:var(--here);border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.12)}
.maptabs{display:flex;gap:24px;border-bottom:1.5px solid var(--line);margin-top:16px}
.maptabs button{height:44px;font-size:14px;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1.5px}
.maptabs button.on{color:var(--ink);font-weight:700;border-color:var(--ink)}
.fab{position:absolute;right:20px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 20px);width:60px;height:60px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.fab svg{width:28px;height:28px}
.callout{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px;font-size:14px;line-height:1.7}

/* stack screens */
/* 店の詳細などの重ねた画面は、下のタブの上までにして、タブを常に見せる（利用者の要望） */
.stack{position:absolute;inset:0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0;background:var(--bg);z-index:20;padding:0 20px 60px;animation:slide .22s ease-out;overflow-x:hidden;overflow-wrap:anywhere}
/* 横にはスクロールさせない。長い店名・URL・営業時間は折り返す */
.stack .pane-list{overflow-x:hidden}
.stack .acts{flex-wrap:wrap}
.stack .ghours div{overflow-wrap:anywhere}
@keyframes slide{from{transform:translateX(24px);opacity:.6}}
.back{height:44px;width:44px;margin-left:-12px;margin-top:12px;display:grid;place-items:center;font-size:24px}
.stack h1{margin-top:4px}
.field{border-bottom:1px solid var(--line);padding:10px 0 4px;position:relative}
.field label,.field .lab{display:block;font-size:12px;color:var(--sub);margin-bottom:0}
/* 「見出し＋値 ›」の行（ワイヤーフレーム S04） */
.frow{display:flex;align-items:center;width:100%;text-align:left;padding-bottom:8px}
.frow .val{font-size:15px;min-height:32px;display:flex;align-items:center}
.frow .val.none{color:#767676}
.frow-btn{display:flex;flex:1;align-items:center;text-align:left}
.frow .over{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.frow .hide{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.field input[type=text],.field input[type=password],.field input[type=date],.field input[type=time],.field textarea,.field select{width:100%;border:0;background:transparent;font-size:15px;outline:none;min-height:44px}
.field textarea{resize:none;min-height:44px;line-height:1.6;padding-top:10px;field-sizing:content}
.field input::placeholder,.field textarea::placeholder{color:#767676}
.search::placeholder,.input::placeholder{color:#6b6b6b}
.btnrow{display:flex;gap:12px;margin-top:20px}
.btnrow .btn{margin-top:0}
.foot{display:flex;justify-content:space-between;margin-top:24px}
.foot button{font-size:13px;color:var(--sub);min-height:44px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid #cfcfcf;border-radius:12px;padding:3px 10px;margin-top:10px}
.radio{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);width:100%;min-height:72px}
.radio .r{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);flex:none;display:grid;place-items:center}
.radio.on .r::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}
.avs{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.av{width:56px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}
.av i{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:16px;background:#fff}
.av.on i{background:var(--ink);color:#fff}
.av.add i{border-style:dashed;color:var(--sub);border-color:#9a9a9a;font-weight:400;font-size:22px}
/* 友だち・プロフィール：色や写真のアイコン。選んだ人は輪とチェックで示す（色だけに頼らない） */
.av i{flex:none}
.av i.ph{background-size:cover;background-position:center}
.av.on{position:relative}
.av.on i[style]{color:var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.av.on::after{content:"✓";position:absolute;top:-2px;right:0;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;display:grid;place-items:center}
.av small{font-size:10px;color:var(--sub);margin-top:-4px}
/* 地図の凡例の .lg（12px）と名前が重なるので、大きいアイコンでは高さ・形を戻す（C29） */
.av.lg{width:auto;height:auto;border-radius:0;flex:none}.av.lg i{width:64px;height:64px;font-size:22px}
.av.xs{width:auto;display:inline-flex;flex:none}.av.xs i{width:28px;height:28px;font-size:12px;border-width:1px}
.me-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:16px 0}
.me-card .t{font-size:17px;font-weight:700}.me-card .m{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.6}
.pf-av{display:flex;align-items:center;gap:16px;margin-top:16px;margin-bottom:8px}
.pf-av-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-av-acts .pill:focus-visible,.pf-av-acts .link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pf-head{display:flex;align-items:center;gap:16px;margin-top:8px}
.swatch{width:36px;height:36px;border-radius:50%;border:1.5px solid #bdbdbd;position:relative}
.swatch::before{content:"";position:absolute;inset:-4px}
.swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink);border-color:var(--ink)}
.fwant{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:13px;font-weight:500}
.fwant span:last-child{margin-left:4px}
.btn.line{background:#00873c;color:#fff}   /* LINE の緑を、白い文字が読める濃さにした */
.qr{text-align:center;margin-top:12px}
.notif .nb .m{display:block;white-space:normal;overflow:visible;font-size:13px;font-weight:400;color:var(--sub);margin-top:2px}
.toggle{width:52px;height:32px;border-radius:16px;background:#cfcfcf;position:relative;flex:none;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on{background:var(--ink)}
.toggle.on::after{left:23px}

/* notifications */
.notif{background:var(--fill);border:1px solid #cfcfcf;border-radius:14px;padding:16px;margin-top:12px}
.notif .nt{font-size:12px;color:var(--sub);font-family:var(--num)}
.notif .nb{font-size:16px;font-weight:700;line-height:1.6;margin-top:6px}
.notif .done{font-size:12px;color:var(--sub);margin-top:8px}
/* お誘い・募集のカードは、お知らせ（灰色）と見分けられるよう白地・黒枠にし、種類と状態の札を付ける */
.notif.inv{background:#fff;border:1.5px solid var(--ink)}
.inv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-h .kind{font-size:11px;font-weight:700;background:var(--ink);color:#fff;border-radius:10px;padding:2px 8px}
.inv-h .tag{margin-left:auto;font-size:11px;color:var(--sub);border:1px solid #bdbdbd;border-radius:10px;padding:1px 8px}
.inv-h .tag.hot{color:var(--ink);border-color:var(--ink);font-weight:700}
.inv-f{display:flex;justify-content:space-between;align-items:center}
.inv-f .sub{color:var(--sub)}
/* お知らせの「消す」は右上。日時の行と重ならないよう、日時の行の右をあける */
.notif{position:relative}
.notif-x{position:absolute;top:4px;right:6px;min-width:44px;height:44px;padding:0 8px;font-size:12px;color:var(--sub);text-decoration:underline;background:none;border:0}
.notif:has(.notif-x) .nt{padding-right:52px}
.quote{font-size:13px;color:var(--sub);margin-top:4px;line-height:1.6}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* sheet */
#sheet-root{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;justify-content:flex-end}
#sheet-root.open{display:flex}
.backdrop{position:absolute;inset:0;background:rgba(20,20,20,.4)}
.received{position:relative;margin:0 20px 14px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:10px;max-height:30%;}
.received img{width:56px;height:74px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none}
.received .rb{width:56px;height:56px;border-radius:8px;background:var(--fill);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.received .rt{font-size:12px;color:var(--sub);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.received .rl{font-size:11px;color:var(--mute);margin-bottom:2px}
.sheet{position:relative;background:#fff;border-radius:22px 22px 0 0;max-height:88%;padding:8px 20px calc(24px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.5}}
.sheet:focus,.stack h1:focus{outline:none}
.handle{width:40px;height:4px;border-radius:2px;background:#cfcfcf;margin:4px auto 14px}
.sheet h2{font-size:22px;font-weight:700;margin-bottom:4px}
.card{display:flex;gap:14px;align-items:center;margin-top:14px}
.thumbmap{width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid #cfcfcf;flex:none;position:relative;background:#f1f1f1}
.attr{font-size:11px;color:var(--mute);margin-top:3px}
/* マップのランチ・ディナーの絞り込み（凡例と一覧の切り替えの間） */
/* ジャンル色のピン（文字なし）。先端を店の位置に合わせる。押せる範囲は44px四方 */
.pin.gp{transform:translate(-50%,-100%);width:24px;height:40px;padding:0;background:none;border:0;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.pin.gp svg{display:block;width:100%;height:100%;overflow:visible}
.pin.gp::after{content:"";position:absolute;left:50%;top:62%;width:44px;height:44px;transform:translate(-50%,-50%)}
.pin.gp.t3{z-index:3}
.gmini{display:inline-block;width:12px;height:20px;vertical-align:-5px;margin-right:6px;flex:none}
.gmini svg{display:block;width:100%;height:100%;overflow:visible}
.gdot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none}
/* 凡例は2行に収める：文字10.5px・間隔7px・色の丸9px（375px幅で1行目約300px／2行目約320px） */
.legend{font-size:10.5px;column-gap:7px;margin-top:6px}
.legend span{gap:3px}
.legend .gdot{width:9px;height:9px}
.legend .lg.here{width:9px;height:9px}
.legend.tiers{margin-top:3px}
.legend.tiers .gmini{width:9px;height:15px;margin-right:1px;vertical-align:-3px}
.lsep{width:1px;height:12px;background:#cfcfcf;flex:none;align-self:center}
/* 一覧の回数の札は、ジャンル色と競わない落ち着いた色に（色の意味はピンで見せる） */
.vbadge.v1,.vbadge.v2,.vbadge.v3,.vbadge.v4{background:#f3f3f3;color:var(--ink);border:1px solid #d0d0d0;box-shadow:none}
.chip.gchip{gap:6px}
.chip.gchip small{font-size:10px;opacity:.8}
.chip.gchip.on .gdot{box-shadow:0 0 0 1.5px #fff}
.check{display:flex;gap:8px;align-items:center;font-size:13px;padding:10px 0;min-height:44px}
.check input{width:18px;height:18px;flex:none}
.gprev{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--sub);margin:10px 0 4px}
.meal-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.meal-row .chips.meal-f{margin-top:0}
.meal-row .filt{margin-left:auto;height:32px;font-size:12.5px;padding:0 12px}
.chips.meal-f{margin-top:10px;gap:6px}
.chips.meal-f .chip{height:32px;padding:0 14px;font-size:12.5px}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);min-height:56px;padding:6px 0}
.optrow .lab{font-size:14px;flex:none}
.optrow .chips{margin-top:0;justify-content:flex-end}
.optrow .val{font-size:13px;color:var(--sub);min-height:44px;display:flex;align-items:center}
.input{width:100%;height:48px;border:1px solid #bdbdbd;border-radius:12px;padding:0 14px;font-size:16px;outline:none;background:#fff}
.input:focus{border-color:var(--ink)}
textarea.input{height:72px;padding:12px 14px;resize:none}
.warn{background:var(--fill);border-radius:10px;padding:12px;font-size:13px;line-height:1.6;margin-top:12px}
/* 日にち 11/2(火)：土曜は青、日曜・祝日は赤。白黒のデザインに合わせて、鮮やかすぎない色にする（黒地のボタンでは明るめ） */
.dl{font-family:var(--num);white-space:nowrap}
.dl.sat{color:#3c5f8f}
.dl.sun{color:#b04a42}
.chip.on .dl.sat,.btn:not(.ghost) .dl.sat,.pill.solid .dl.sat{color:#a9c3e8}
.chip.on .dl.sun,.btn:not(.ghost) .dl.sun,.pill.solid .dl.sun{color:#f0a59c}
/* お誘い・募集：時間は大きく太く。押すと時間を選ぶ（中の時間の欄を全面に重ねて、押せば端末の時間選びが開く） */
.timebig{position:relative;margin-top:6px;border:1px solid var(--line);border-radius:14px}
.timebig label{display:flex;align-items:baseline;gap:12px;padding:10px 16px;cursor:pointer}
.timebig .tv{font-family:var(--num);font-size:38px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.timebig.tbd .tv{font-size:24px;color:var(--sub)}
.timebig .th{font-size:12px;color:var(--sub)}
.timebig input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.chips.modes .chip{flex:1;justify-content:center}
/* アプリの中の月のカレンダー（候補日を押して選ぶ） */
.cal{margin-top:8px;border:1px solid var(--line);border-radius:14px;padding:8px 10px 10px}
.cal-h{display:flex;align-items:center;justify-content:space-between}
.cal-h b{font-size:15px}
.cal-nav{width:44px;height:44px;font-size:24px;line-height:1;display:grid;place-items:center;border-radius:50%}
.cal-nav:disabled{color:#c8c8c8}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-w{font-size:11px;color:var(--sub);padding:4px 0}
.cal-d{height:40px;display:grid;place-items:center;border-radius:50%;font-family:var(--num);font-size:15px;margin:0 auto;width:40px}
.cal-d.past{color:#c8c8c8}
.cal-d.today{box-shadow:inset 0 0 0 1px var(--line)}
.cal-d.on{background:var(--ink);color:#fff}
.cal-w.sat,.cal-d.sat{color:#3c5f8f}
.cal-w.sun,.cal-d.sun{color:#b04a42}
.cal-d.mark{position:relative}
.cal-d.mark::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;opacity:.6}   /* 締め切りのカレンダーで、候補日に点 */
.dlbig .dl-show{display:flex;align-items:baseline;gap:10px;padding:10px 16px;flex-wrap:wrap}
.dlbig .tv{font-size:28px}
.cal-d.on.sat{color:#a9c3e8}
.cal-d.on.sun{color:#f0a59c}
/* 送るボタンは、長い入力でも押しやすいよう、シートの下に止めておく */
.sheet-foot{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));margin:16px -20px 0;padding:12px 20px calc(12px + 24px + env(safe-area-inset-bottom));margin-bottom:calc(-24px - env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:3}   /* シートの下の余白まで覆う */
.sheet-foot .warn{margin:0 0 10px}
.sheet-foot .btn{margin-top:0}
/* 候補日ごとの人数（横棒）。いちばん多い日を強調 */
.tally{margin-top:8px}
.tally .trow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.tally .trow.sel{background:var(--fill);border-radius:10px;padding:10px 8px}
.tally .bar{height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.tally .bar i{display:block;height:100%;background:#9a9a9a;border-radius:4px}
.tally .trow.top .bar i{background:var(--ink)}
.tally .cnt{font-family:var(--num);font-size:14px;white-space:nowrap}
.tally .trow.top .cnt{font-weight:700}
.tally .who{grid-column:1 / -1;font-size:13px;color:var(--sub);padding-top:2px}
.tag.best{background:var(--ink);color:#fff;border-color:var(--ink)}
.invstat{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--sub)}
.invstat b{color:var(--ink);font-family:var(--num);font-size:16px}
/* 友だち追加のコード（読み上げ・書き写ししやすく大きく） */
.addcode{font-size:30px;font-weight:700;letter-spacing:.12em;text-align:center;font-variant-numeric:tabular-nums;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:var(--fill);border-radius:12px;padding:14px 0;margin:6px 0 8px}
/* ホーム画面に追加の手順 */
.steps{margin:14px 0 4px;padding-left:22px;font-size:15px;line-height:1.7}
.steps li{margin-bottom:8px}
.loading{display:flex;align-items:center;gap:12px;padding:20px 0;font-size:15px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sharebox{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.urlbox{font-family:var(--num);letter-spacing:0;font-size:13px;background:var(--fill);border-radius:8px;padding:10px;margin-top:10px;word-break:break-all}
.samples{display:flex;gap:10px;margin-top:10px}
.samples button{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--sub);text-align:center}
.samples img{width:100%;aspect-ratio:3/4;border-radius:8px;border:1px solid var(--line);object-fit:cover}

/* toast */
#toast{position:absolute;left:16px;right:16px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);z-index:40;display:none}
#toast.open{display:flex}
#toast .in{flex:1;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;box-shadow:0 8px 20px rgba(0,0,0,.2);animation:up .2s ease-out}
#toast .in span{flex:1}
#toast button{color:#fff;text-decoration:underline;font-size:13px;min-height:44px;min-width:44px;white-space:nowrap}
.sheet-x{position:absolute;top:4px;right:8px;width:44px;height:44px;display:grid;place-items:center;font-size:0;color:var(--sub)}
.sheet-x::before{content:"×";font-size:26px;line-height:1}   /* 見た目は ×、読み上げは「閉じる」 */
.demo{background:var(--fill);border-radius:14px;padding:4px 16px;margin-top:12px}
.demo .row{min-height:56px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ログイン前の画面 */
.login{padding-top:12vh}
.login h1{font-size:34px;letter-spacing:.04em}
.login .btn{margin-top:24px}
.login a{color:inherit}
.login .warn + .btn{margin-top:10px}
/* ホーム画面のアプリ：メールアドレスとパスワードを求められたときの説明（押すと開く） */
.loginhelp{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:4px 14px 14px}
.loginhelp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:700}
.loginhelp ul{margin:6px 0 0 18px}
.loginhelp .btn{margin-top:10px}