/* ポケふた紀行
   色と書体は動画のテロップ・サムネイル（telop.py / make_thumbs.py）から。
   新しく作っていない。動画で見た人が同じシリーズだと分かることを優先している。 */

:root{
  --ink:#101A26; --deep:#07101A; --paper:#FBFAF7; --card:#FFFFFF;
  --blue:#1F96C8; --blue-d:#16708F; --blue-bg:#E6F3F8;
  --green:#3F6E19; --green-bg:#EFF6E6;
  --amber:#8A5A00; --amber-bg:#FBF2DF;
  --muted:#5C6B7A; --faint:#97A3AE; --rule:#E4E1DA; --rule-2:#EFEDE8;
  --line:#D8DEE4; --sub:#D6E4F0; --cream:#FFFCF0; --hi:#FFEC96;
  --pad:20px;
}

/* hidden は必ず効かせる。
   .notyet や .stats のように display を指定したものは、
   ブラウザ既定の [hidden]{display:none} に打ち勝ってしまう。
   JS で出し入れする箇所（登録が0件のときの案内など）が
   ずっと出たままになっていた。 */
[hidden]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP","Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
.mincho,h1,h2,.name{font-family:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho",serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.wrap{max-width:560px;margin:0 auto;background:var(--paper);min-height:100vh}
.pad{padding-left:var(--pad);padding-right:var(--pad)}

/* --- ヘッダー・フッター --- */
.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px var(--pad);background:var(--deep)}
.hd a{color:var(--cream)}
.hd .brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:.04em;
  /* 英語のサイト名は長い。折り返さず、入らなければ小さくする */
  white-space:nowrap;min-width:0}
.lang{display:flex;gap:2px;align-items:center;flex-shrink:0}
.lang a,.lang span{font-size:11.5px;padding:6px 7px;border-radius:3px;color:#8A9AA8;min-height:32px;
                   display:inline-flex;align-items:center;white-space:nowrap}
.lang .on{font-weight:700;color:var(--deep);background:var(--cream)}
.ft{margin-top:34px;padding:22px var(--pad) 28px;background:var(--deep)}
.ft .brand{font-size:15px;font-weight:700;color:var(--cream)}
.ft nav{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12.5px}
.ft nav a{color:#9FB4C4}
.ft p{font-size:11px;line-height:1.85;color:#7C8D9C;margin:16px 0 0;text-wrap:pretty}

/* --- 見出し --- */
h1{font-size:26px;font-weight:700;line-height:1.4;margin:8px 0 0;text-wrap:pretty}
h2{font-size:19px;font-weight:700;line-height:1.5;margin:0}
.cap{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.cap-m{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.crumb{font-size:12px;color:var(--muted)}
.count{font-size:12px;color:var(--muted)}
/* 見出しの右に件数と入口を並べる（2026-09-23） */
.secr{display:flex;align-items:baseline;gap:12px}
.secr a{font-size:12px;font-weight:700;white-space:nowrap}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px}

/* --- 動画（ファサード）--- */
.hero{position:relative;width:100%;overflow:hidden;background:var(--deep)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;
  /* サムネイル側にタイトルが入っているので、上は覆わない。下だけ足元の文字用に暗くする */
  background:linear-gradient(180deg,rgba(7,16,26,0) 58%,rgba(7,16,26,.72) 100%)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;background:rgba(7,16,26,.4);
  box-shadow:0 2px 16px rgba(0,0,0,.4);
  border:2px solid rgba(255,252,240,.9);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.hero .foot{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hero .foot .len{font-size:12.5px;color:var(--sub)}
.hero .yt{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11.5px;font-weight:700;
  color:var(--cream);border:1px solid rgba(255,252,240,.55);padding:8px 10px;border-radius:3px}
.hero iframe{width:100%;height:100%;border:0;display:block}
.badge-city{display:inline-block;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--deep);background:var(--hi);padding:4px 8px;border-radius:2px}
.hero h2{font-size:25px;color:var(--cream);margin-top:10px}
.hero .who{font-size:13px;color:var(--sub);margin-top:8px}

/* --- ポケモンのチップ --- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.chip{font-size:12.5px;font-weight:700;color:var(--blue-d);background:var(--blue-bg);
  border-radius:100px;padding:7px 13px;min-height:32px;display:inline-flex;align-items:center}

/* --- 行き方の表 --- */
.access{margin-top:22px;border:1px solid var(--line);border-radius:5px;background:var(--card);overflow:hidden}
.access .ttl{display:flex;align-items:center;gap:8px;padding:12px 15px;background:#F2F5F7;
  border-bottom:1px solid var(--rule);font-size:14.5px;font-weight:700;letter-spacing:.03em}
.access .r{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:13px 15px;border-bottom:1px solid var(--rule-2)}
.access .r:last-child{border-bottom:0}
.access .k{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);padding-top:2px;flex-shrink:0}
.access .v{font-size:14px;font-weight:700;text-align:right}
.access .v.good{color:var(--green)}
.access .v.warn{color:var(--amber)}
.access .v.muted{color:#7A8794}
.access .v .ico{display:inline-flex;align-items:center;gap:6px}
.access .note{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:5px;line-height:1.7}
.body-txt{font-size:15px;line-height:1.95;margin:18px 0 0;text-wrap:pretty}
.caution{display:flex;gap:9px;margin-top:14px;padding:12px 13px;background:#F2F1EC;border-radius:4px}
.caution p{margin:0;font-size:12.5px;line-height:1.8;color:#6B7883;text-wrap:pretty}

/* --- 汎用ブロック --- */
.block{margin-top:24px;border-top:1px solid var(--rule);padding-top:20px}
.k{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.addr{font-size:14.5px;line-height:1.75;margin-top:7px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);
  border-radius:5px;padding:14px;background:var(--card);font-size:13.5px;font-weight:700;color:var(--blue);
  min-height:48px;margin-top:12px}
.btn.wide{width:100%}
/* アカウント画面の大きな入口ボタン（スタンプ帳・フレンド募集）。アイコンは同じ枠にそろえる */
.btn.bigbtn{width:100%;min-height:76px;padding:12px 18px;gap:14px;font-size:17px;font-weight:700}
.bigico{width:48px;height:48px;object-fit:contain;flex-shrink:0}
/* 公開された写真。長押し・ドラッグでの保存を抑える（2026-09-26 岩佐さん指示）。
   **完全には防げない。** 画面を撮れば残る */
.pub img,.phero img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* ふつうのボタンに置くアイコン（個別ページのフレンド募集）*/
.smico{width:24px;height:24px;object-fit:contain;flex-shrink:0}
/* トップのマイスタンプ帳のボタン。アイコンは 48px（2026-09-14 岩佐さん指示で 24px から縦横2倍）。
   ボタンはアイコンに合わせて高くし、上下の余白を 12px にそろえる（高さ 74px） */
.btn.iconbtn{padding:12px 14px;gap:10px}
/* トップのマイスタンプ帳だけ色を付ける（2026-09-19 岩佐さん指示）。
   **1ページに色付きの入口は1つだけ。** 増やすと、どれも目立たなくなる */
.btn.cta{justify-content:flex-start;background:var(--blue);border-color:var(--blue);color:#FFFFFF;
  box-shadow:0 2px 8px rgba(31,150,200,.28)}
.btn.cta:hover{background:var(--blue-d);border-color:var(--blue-d);color:#FFFFFF}
.btn.cta .cta-t{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.btn.cta .lb{font-size:15px;font-weight:700}
.btn.cta .pg{display:flex;align-items:center;gap:9px;width:100%}
.btn.cta .pg .n{font-family:Consolas,"SF Mono",monospace;font-size:12.5px;font-weight:700;white-space:nowrap}
.btn.cta .pg .bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.38);overflow:hidden}
.btn.cta .pg .bar i{display:block;height:100%;width:0;background:#FFFFFF;border-radius:3px}
/* 未ログインのときは進み具合が出ないので、文字を中央にそろえる（2026-09-23 岩佐さん指示）。
   ログイン中は進み具合のバーが幅いっぱいに要るので、左そろえのまま */
.btn.cta.guest{justify-content:center}
.btn.cta.guest .cta-t{flex:0 1 auto;align-items:center}
.btnico{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.row-link{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--rule);color:inherit;min-height:48px}
.row-link .name{font-size:15.5px;font-weight:700}
.row-link .sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.6}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:4px 8px;border-radius:2px;white-space:nowrap;flex-shrink:0}
.tag.video{color:var(--blue-d);background:var(--blue-bg)}
.tag.none{color:var(--faint)}
.tag.good{color:var(--green);background:var(--green-bg)}
.tag.warn{color:var(--amber);background:var(--amber-bg)}

/* --- カード（トップ）--- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.card{color:inherit}
.card .thumb{position:relative;border-radius:4px;overflow:hidden;background:var(--deep);aspect-ratio:3/4}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .p{position:absolute;right:7px;bottom:7px;width:26px;height:26px;border-radius:50%;
  background:rgba(7,16,26,.6);border:1.5px solid rgba(255,252,240,.85);
  display:flex;align-items:center;justify-content:center}
.card .name{font-size:15px;font-weight:700;margin-top:8px}
.card .sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.pref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.pref-card{border:1px solid var(--rule);border-radius:4px;padding:14px;background:var(--card);color:inherit}
.pref-card .name{font-size:18px;font-weight:700}
.pref-card .sub{font-size:12px;color:var(--muted);margin-top:6px}

/* --- 県のテーマ --- */
.theme{padding:26px var(--pad);background:var(--deep);color:var(--cream)}
.theme .cap{color:#7FC3DE}
.theme h1{font-size:29px;color:var(--cream);margin-top:10px}
.theme p{font-size:13.5px;line-height:1.9;color:var(--sub);margin:12px 0 0;text-wrap:pretty}
.stats{display:flex;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,252,240,.18)}
.stats b{font-family:"BIZ UDPMincho",serif;font-size:23px;font-weight:700;display:block}
.stats span{font-size:11px;color:#9FB4C4}

/* --- 未撮影の告知 --- */
.notyet{display:flex;align-items:flex-start;gap:11px;padding:26px var(--pad);
  background:#F2F1EC;border-bottom:1px solid var(--rule)}
.notyet .t{font-size:15px;font-weight:700;line-height:1.6}
.notyet .b{font-size:13px;line-height:1.85;color:var(--muted);margin-top:7px;text-wrap:pretty}

/* --- 地図（Phase 0 は静的な絵＋リンク）--- */
.map{position:relative;margin-top:12px;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);background:#EDEFE9}
.map .open{position:absolute;right:9px;bottom:9px;font-size:11.5px;font-weight:700;color:var(--ink);
  background:rgba(255,252,240,.94);border:1px solid var(--line);padding:8px 10px;border-radius:3px}

/* --- 通常版（折りたたみ）--- */
details.normal{margin-top:22px;border:1px solid var(--line);border-radius:5px;background:var(--card)}
details.normal summary{display:flex;align-items:center;gap:12px;padding:12px 14px;
  cursor:pointer;list-style:none;min-height:48px}
details.normal summary::-webkit-details-marker{display:none}
details.normal .th{width:92px;height:52px;object-fit:cover;border-radius:3px;flex-shrink:0}
details.normal .t{font-size:13.5px;font-weight:700;line-height:1.5}
details.normal .len{font-size:11.5px;color:var(--muted);margin-top:4px}
details.normal .body{padding:0 14px 14px}

.list{margin-top:12px;border-top:1px solid var(--rule)}
.lead{font-size:13.5px;line-height:1.85;color:var(--muted);margin-top:12px;text-wrap:pretty}
.prose{font-size:14.5px;line-height:1.95}
.prose h2{margin-top:28px}
.prose p{text-wrap:pretty}
.prose ul{padding-left:1.2em}
.prose li{margin:6px 0}

@media (min-width:560px){ :root{--pad:28px} }

/* --- ロゴ --- */
.hd .mark{width:26px;height:26px;border-radius:6px;flex-shrink:0}
.ft .brand{display:flex;align-items:center;gap:9px}
.ft .mark{width:24px;height:24px;border-radius:6px;flex-shrink:0}
.ft .what{font-size:12px;color:#9FB4C4;margin-top:8px}

/* --- 何のサイトかを最初の画面で言う帯 --- */
.ident{display:flex;align-items:center;gap:14px;padding:16px var(--pad);
  background:var(--card);border-bottom:1px solid var(--rule)}
.ident .logo{width:54px;height:54px;border-radius:12px;flex-shrink:0}
.ident .nm{font-size:21px;font-weight:700;line-height:1.35}
.ident .wh{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6;text-wrap:pretty}

/* 英語・繁体中文はサイト名が長い。狭い画面ではヘッダーの文字を少し詰める */
@media (max-width:400px){
  .hd .brand{font-size:14.5px;gap:7px}
  .hd .mark{width:24px;height:24px}
}

/* --- 地図 --- */
.mapwrap{position:relative;margin-top:16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#map{height:min(70vh,560px);background:#EDEFE9}
.maphint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:400;
  font-size:11.5px;font-weight:700;color:var(--cream);background:rgba(7,16,26,.78);
  padding:7px 12px;border-radius:100px;pointer-events:none}
.fchip{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 15px;
  min-height:36px;cursor:pointer}
.fchip.on{color:#FFFFFF;background:var(--blue);border-color:var(--blue)}
.maplegend{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.maplegend span{display:inline-flex;align-items:center;gap:7px}
.maplegend .dot{width:13px;height:13px;border-radius:50%;border:2px solid #8A97A3;background:#FFF}
.maplegend .dot.on{border-color:var(--blue-d);background:var(--blue)}
/* みんなの登録マップの凡例。大きさで多い少ないを表す */
.maplegend .dot.sm{width:8px;height:8px;border-width:1.5px}
.maplegend .dot.lg{width:19px;height:19px}
/* 区切りと、ボタンに見せないリンク */
.sep{border:0;border-top:1px solid var(--rule);margin:26px 0 20px}
.linkish{display:block;width:100%;margin-top:12px;padding:10px;background:none;border:0;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--blue);text-align:center;
  text-decoration:underline;min-height:44px}
/* チャンネルへの導線。件数を添えて、まだ先があると分かるようにする */
.btn.yt .n{font-weight:400;font-size:12px;color:var(--muted);margin-left:2px}

/* 県別ページの地図。一覧が主役なので、全画面の地図より低くする */
.pref-map{height:260px}
.pref-map #map{height:100%}

/* トップのログイン表示。目立たせすぎない。主役は動画とポケふた */
.mebar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:10px 0 0}
.mebar .who{font-size:12.5px;font-weight:700;color:var(--muted)}
.mebar .acts{display:flex;gap:14px;align-items:center}
.mebar .acts a{font-size:12.5px;font-weight:700;color:var(--blue);
  padding:8px 0;min-height:40px;display:inline-flex;align-items:center}
.mebar .acts a.pri{color:#FFFFFF;background:var(--blue);border-radius:4px;padding:8px 16px}
/* フレンド申請の知らせ（2026-09-23 岩佐さん指示。案3）。届いているときだけ出す。
   赤はサイトで唯一「未対応」を表す色として使う */
.mebar .acts a.bell{position:relative;padding:8px 2px}
.mebar .acts a.bell .dot{position:absolute;top:5px;right:-1px;width:8px;height:8px;
  border-radius:50%;background:#C8453A;border:1.5px solid var(--paper)}

/* 問い合わせ先。押せるものだと分かる大きさにする */
.contact{margin-top:10px}
.contact a{display:inline-block;font-weight:700;font-size:15px;padding:9px 0;
  min-height:44px;line-height:26px;word-break:break-all}

/* プライバシーポリシーなどの表。狭い画面でも読めるよう縦に積む */
.tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;line-height:1.8}
.tbl th,.tbl td{display:block;text-align:left;padding:0}
.tbl th{font-weight:700;padding-top:12px;border-top:1px solid var(--rule)}
.tbl td{color:var(--muted);padding-bottom:2px}
@media (min-width:560px){
  .tbl th,.tbl td{display:table-cell;padding:11px 0;vertical-align:top;
    border-top:1px solid var(--rule)}
  .tbl th{width:34%;padding-right:16px}
}

/* 管理画面。数を並べて見るだけなので、飾らない */
.ad-acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.ad-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.ad-foot .k{margin-bottom:2px}
.ad-list{margin-top:14px}
.ad-row{display:flex;align-items:center;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.ad-main{flex:1;min-width:0}
.ad-t{font-size:14.5px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.ad-t .tag{margin-left:7px}
.ad-s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6;overflow-wrap:anywhere}
.ad-th{border-radius:4px;object-fit:cover;background:var(--rule-2);flex-shrink:0}
.ad-btn{margin-top:0;padding:9px 12px;font-size:12px;flex-shrink:0;min-height:40px}
/* まとめて登録する帯。**押す前に何件選んだか**が見えるようにする */
.ad-bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px;padding:11px 13px;border-radius:5px;
  border:1px solid var(--rule);background:var(--card)}
.ad-bulk .btn{margin-top:0;padding:9px 14px;font-size:12.5px;min-height:40px}
.ad-bulk .btn:disabled{opacity:.45}
/* 指で押せる大きさにする。小さいチェックは押し損なう */
.ad-ck{width:22px;height:22px;flex-shrink:0;accent-color:var(--blue);margin:0}
/* 写真の列。**まず絵が見える**こと。文字は絵の下に小さく添える */
.ad-grid{margin-top:14px;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ad-ph{border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--card)}
.ad-ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  background:var(--rule-2)}
.ad-ph .m{padding:8px 9px 10px}
.ad-ph .d{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.ad-ph .n{font-size:12.5px;font-weight:700;margin-top:3px;overflow-wrap:anywhere}
.ad-ph .p{font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.ad-ph .btn{margin-top:8px;padding:7px 10px;font-size:11.5px;min-height:0;width:100%}
/* 確認待ちのスタンプ。まだ自分のものになっていないと分かる見た目にする */
.stamp.wait{position:relative}
.stamp.wait img{opacity:.45}
.stamp .wtag{position:absolute;top:7px;left:7px;font-size:10.5px;font-weight:700;
  color:#8A5A00;background:var(--amber-bg);padding:3px 7px;border-radius:2px}
.btnrow{display:flex;gap:10px;margin-top:20px}
.btnrow .btn{flex:1;margin-top:0}
.leaflet-container{font-family:inherit}

/* --- フォーム --- */
.form{margin-top:20px}
.fld{display:block;margin-top:16px}
.fld .lb{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.fld input,.card2 textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:5px;padding:12px 13px;
  margin-top:7px;min-height:48px}
.fld input:focus,.card2 textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.card2 textarea{resize:vertical;min-height:84px;line-height:1.7}
.hint{font-size:11.5px;line-height:1.75;color:var(--muted);margin:6px 0 0;text-wrap:pretty}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.btn.primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.card2{border:1px solid var(--rule);border-radius:5px;background:var(--card);padding:16px}
.card2 .k{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.row2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.note{font-size:13px;line-height:1.75;margin:14px 0 0;padding:11px 13px;border-radius:5px;text-wrap:pretty}
.note.good{color:#2F5C12;background:var(--green-bg)}
.note.bad{color:#8E3A30;background:#FBECEA}
.switch{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:700;min-height:44px}
.switch input{width:20px;height:20px;accent-color:var(--blue)}
.lnk{font-family:inherit;font-size:11.5px;font-weight:700;color:var(--blue);background:none;
  border:0;padding:6px 2px;cursor:pointer;min-height:32px}
.lnk.warn{color:#B0453A}

/* --- スタンプ帳 --- */
.prog{margin-top:18px}
.prog .pnum{font-size:24px;font-weight:700}
.pbar{height:8px;border-radius:100px;background:var(--rule);overflow:hidden;margin-top:9px}
.pbar i{display:block;height:100%;background:var(--blue);border-radius:100px;transition:width .4s}
.stamps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.stamp img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:var(--deep)}
.stamp .nm{font-family:"BIZ UDPMincho",serif;font-size:14.5px;font-weight:700;margin-top:7px}
.stamp .dy{font-size:11px;color:var(--muted);margin-top:3px}
.cands{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cand{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  font-family:inherit;text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:12px 13px;min-height:48px;cursor:pointer}
.cand:hover{border-color:var(--blue)}
.cand .nm{font-size:14px;font-weight:700}
.cand .mt{font-size:11.5px;color:var(--muted)}
/* 「すべてから探す」の県名（2026-09-23）。検索欄だけだと手がかりが無い */
#st-prefs{margin:10px 0 2px}
#st-search{width:100%;font-family:inherit;font-size:16px;border:1px solid var(--line);
  border-radius:5px;padding:12px 13px;min-height:48px}
#st-hits{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* --- 掲示板 --- */
.posts{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.post{border:1px solid var(--rule);border-radius:5px;background:var(--card);padding:14px}
.post.mine{border-color:var(--blue)}
.post .hd2{display:flex;align-items:center;gap:8px}
.post .nick{font-size:13.5px;font-weight:700}
.post .me{font-size:10.5px;font-weight:700;color:var(--blue-d);background:var(--blue-bg);
  border-radius:100px;padding:2px 8px}
.post .tag2{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:2px 8px;white-space:nowrap}
.post .code{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;background:#F4F7F9;border-radius:4px;padding:9px 12px}
.post .code .c{font-family:Consolas,"SF Mono",monospace;font-size:17px;font-weight:700;letter-spacing:.06em}
.post .msg{font-size:13.5px;line-height:1.8;margin-top:10px;text-wrap:pretty;word-break:break-word}
.post .mt2{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--rule-2)}
.post .day{font-size:11px;color:var(--faint)}
/* 掲示板からのフレンド申請（2026-09-23）。すでにフレンドのときの表示 */
.post .fr-ok{font-size:11.5px;font-weight:700;color:var(--green)}

/* --- 訪問一覧 --- */
.visits{margin-top:12px;border-top:1px solid var(--rule)}
/* 並びは 日付・トレーナー名・ポケふた名。日付は幅を揃えて縦に読めるようにする */
.visits .v{display:flex;align-items:baseline;gap:9px;
  padding:11px 0;border-bottom:1px solid var(--rule-2)}
.visits .day{font-size:11.5px;color:var(--faint);white-space:nowrap;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.visits .nick{font-size:13.5px;font-weight:700;white-space:nowrap;flex-shrink:0;
  max-width:38%;overflow:hidden;text-overflow:ellipsis}
.visits .act{font-size:13px;color:#3E4C59;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- 公式の新着。訪問一覧と同じ並びにする（日付が先） --- */
.news{margin-top:12px;border-top:1px solid var(--rule)}
.news .n{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:inherit;
  padding:11px 0;border-bottom:1px solid var(--rule-2)}
.news .day{font-size:11.5px;color:var(--faint);white-space:nowrap;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.news .pl{font-size:13.5px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news .ac{font-size:13px;color:#3E4C59;white-space:nowrap;flex-shrink:0}

/* --- 動画の代わりに出す写真（2026-09-23）。動画のある場所の見た目に合わせる --- */
.phero{margin:0;background:var(--deep)}
.phero img{display:block;width:100%;max-height:420px;object-fit:contain;background:var(--deep)}
.phero figcaption{padding:8px var(--pad) 10px;font-size:11.5px;color:var(--cream);opacity:.85}

/* --- みんなの写真（2026-09-23）。1か所につき最新3枚まで --- */
.pubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.pub{margin:0}
.pub img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:var(--deep)}
.pub figcaption{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5;overflow-wrap:anywhere}
.lnk.on{color:var(--green)}

/* --- 詳細ページのURL（SNSに貼る用。2026-09-23）--- */
.surl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.surl a{font-family:Consolas,"SF Mono",monospace;font-size:11px;color:var(--blue);
  overflow-wrap:anywhere;line-height:1.5}

/* --- 「登録完了」のポップアップ（2026-09-23）--- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(7,16,26,.55)}
.modal[hidden]{display:none}   /* display:flex が hidden より強いので、明示して隠す */
.modal .mbox{width:100%;max-width:360px;background:var(--card);border-radius:6px;padding:22px 20px}
.modal .mt{font-size:18px;font-weight:700;text-align:center}
.modal .mp{font-family:"BIZ UDPMincho",serif;font-size:16px;font-weight:700;text-align:center;margin-top:8px}
.modal .mb{font-size:12px;line-height:1.75;color:var(--muted);margin:14px 0 0}

/* --- ポケふたのプレゼント（2026-09-17）。受け取ったものは金色の縁 --- */
.stamp.gift{position:relative}
.stamp.gift img{outline:3px solid #D9A23B;outline-offset:-3px}
.stamp .gtag{background:#D9A23B;color:#FFFFFF}
.stamp .gbtn{width:100%;margin-top:6px;min-height:36px;padding:6px 8px;font-size:12px}

/* --- 管理画面：閲覧数 --- */
.pv-row{cursor:pointer}
.pv-bar{height:6px;margin-top:7px;border-radius:3px;background:var(--rule-2);overflow:hidden}
.pv-bar i{display:block;height:100%;background:var(--blue)}
.pv-n{font-family:Consolas,"SF Mono",monospace;font-size:15px;font-weight:700;min-width:64px;text-align:right;flex-shrink:0}
.pv-pages{padding:6px 0 12px 12px;border-bottom:1px solid var(--rule-2)}
.pv-pages .pp{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;line-height:1.6;padding:3px 0}
.pv-pages .pp a{color:var(--blue);overflow-wrap:anywhere}

/* --- フレンド申請（PL02100〜PL02300）--- */
.frlist{margin-top:12px;border-top:1px solid var(--rule)}
.frlist .fr{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-2)}
.frlist .fr-m{flex:1;min-width:0}
.frlist .nm{font-size:14.5px;font-weight:700;overflow-wrap:anywhere}
.frlist .cd{font-family:Consolas,"SF Mono",monospace;font-size:17px;font-weight:700;letter-spacing:.06em;margin-top:3px}
.frlist .cd.sm{font-size:13px;color:var(--muted)}
.frlist .dy{font-size:11px;color:var(--faint);margin-top:2px}
.frlist .acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.frlist .acts.col{flex-direction:column;align-items:flex-end;gap:10px}
.frlist .acts .btn{margin-top:0;min-height:40px;padding:8px 16px}
.frn{display:inline-block;min-width:20px;margin-left:8px;padding:1px 6px;border-radius:10px;
  background:#C8453A;color:#FFFFFF;font-size:11.5px;line-height:18px;text-align:center}

/* --- 断られたスタンプ。理由が主役なので、写真は小さく --- */
.refused{margin-top:12px;border-top:1px solid var(--rule)}
.refused .rf{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-2)}
.refused img{width:64px;height:64px;border-radius:4px;object-fit:cover;flex-shrink:0;
  background:var(--rule-2)}
.refused .rf-m{flex:1;min-width:0}
.refused .nm{font-size:14px;font-weight:700}
.refused .st{font-size:12px;color:var(--amber);margin-top:2px}
.refused .why{font-size:13px;line-height:1.7;margin-top:6px;overflow-wrap:anywhere}
.refused .why.none{color:var(--faint)}
.refused .lnk{margin-top:6px}

/* --- 利用規約。改定の帯は知らせるだけなら青、同意が要るなら琥珀 --- */
.termsbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:12px var(--pad) 0;padding:10px 13px;border-radius:5px;
  background:var(--blue-bg);border:1px solid #BFE0EE;font-size:13px;line-height:1.6}
.termsbar a{font-weight:700;white-space:nowrap}
.termsbar.hard{background:var(--amber-bg);border-color:#EBD7A8;color:var(--amber)}
.terms-ver{color:var(--muted);font-size:13px}
.terms-hist{padding-left:0;list-style:none}
.terms-hist .d{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:10px}
.agree a{text-decoration:underline}

/* --- 画面ID。運用で画面を特定するためのもの。控えめに右下へ --- */
.scr{margin-top:16px;text-align:right;font-family:Consolas,"SF Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;color:#5A6875;line-height:1.7}

/* --- 地方の一覧 --- */
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.area{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  border:1px solid var(--rule);border-radius:4px;padding:14px;background:var(--card);
  color:inherit;min-height:96px}
.area .nm{font-size:18px;font-weight:700;line-height:1.3}
.area .ct{font-size:12px;color:var(--muted)}
.area.empty{background:#F7F6F3;border-style:dashed}
.area.empty .nm{color:#7A8794}
.prefs-flat{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.prefs-flat .pf{font-size:12.5px;color:var(--muted);border:1px solid var(--rule);
  border-radius:100px;padding:5px 12px}