/* ============================================================
   ポスター募集マップ 公開画面（スマホ主体）テーマ変数で集中管理
   ============================================================ */
:root{
  --canvas:#faf8f5; --card:#fff; --ink:#1c1510; --warm:#78716c; --ash:#a8a29e;
  --border:#e9e4dd; --border-strong:#d6d3d1;
  --ember:#e8622a; --ember-dark:#c9521f;
  --cyan:#2f6f9f; --cyan-wash:#eef5fa; --cyan-edge:#cfe0ec;
  --flag:#d93b3b; --road:#e8a24a;
  --radius:12px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);}
#map{position:absolute;inset:0;}

/* 上部キャプション */
.cap{position:absolute;top:0;left:0;right:0;z-index:40;text-align:center;
  font-size:12px;color:#6b6460;padding:7px;pointer-events:none;
  background:linear-gradient(#faf8f5ee,#faf8f500);}
.cap b{color:var(--ink);}

/* 検索バー */
.search{position:absolute;top:34px;left:12px;right:12px;z-index:35;
  background:#fff;border-radius:var(--radius);box-shadow:0 4px 14px rgba(0,0,0,.14);
  display:flex;align-items:center;gap:8px;padding:10px 12px;}
.search input{border:none;outline:none;flex:1;font-size:14px;font-family:var(--font);background:transparent;color:var(--ink);}
.search svg{flex:0 0 auto;}
.search-results{position:absolute;top:84px;left:12px;right:12px;z-index:36;
  background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.18);overflow:hidden;display:none;}
.search-results.on{display:block;}
.search-results button{display:block;width:100%;text-align:left;border:none;background:#fff;
  padding:11px 13px;font-size:13.5px;font-family:var(--font);color:var(--ink);border-bottom:1px solid var(--border);cursor:pointer;}
.search-results button:hover{background:var(--cyan-wash);}

/* 地図コントロール（＋/−・現在地）を検索バーの下へ。検索バーとの重なり防止 */
.maplibregl-ctrl-top-right{margin-top:84px;}

/* レイヤーチップ（右側はコントロール列を避ける） */
.chips{position:absolute;top:88px;left:12px;right:50px;z-index:33;display:flex;gap:7px;flex-wrap:wrap;}
.chip{background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:6px 11px;font-size:12px;font-weight:600;color:var(--warm);box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.chip.on.flag{background:var(--flag);border-color:var(--flag);}
.chip .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}

/* 凡例 */
.legend{position:absolute;left:12px;bottom:150px;z-index:20;background:rgba(255,255,255,.92);
  border-radius:10px;padding:9px 11px;font-size:11px;color:var(--warm);box-shadow:0 2px 8px rgba(0,0,0,.12);line-height:1.9;}
.legend b{display:block;color:var(--ink);font-size:11px;margin-bottom:3px;}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;font-style:normal;}

/* 下部CTA */
.cta{position:absolute;left:12px;right:12px;bottom:18px;z-index:38;}
.cta .btn{display:block;background:var(--ember);color:#fff;text-align:center;border:none;width:100%;
  font-weight:700;font-size:16px;padding:16px;border-radius:14px;cursor:pointer;font-family:var(--font);
  box-shadow:0 10px 24px rgba(232,98,42,.4);}
.cta .btn:disabled{background:#c9bcae;box-shadow:none;}
.cta .hint{text-align:center;font-size:11px;color:#6b6460;margin-top:7px;}
.cta .home{display:block;text-align:center;font-size:12px;color:#6b6460;margin-top:9px;text-decoration:none;}

/* ピン設置モードの十字 */
.crosshair{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-100%);
  pointer-events:none;display:none;}
.crosshair.on{display:block;}
.crosshair .dot{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--ember);border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3);}

/* 推薦シート（ボトムシート） */
.sheet-bg{position:absolute;inset:0;z-index:50;background:rgba(28,21,16,.4);display:none;}
.sheet-bg.on{display:block;}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:51;background:#fff;
  border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.2);
  padding:10px 18px 24px;max-height:88%;overflow:auto;transform:translateY(100%);transition:transform .2s;}
.sheet.on{transform:translateY(0);}
.grab{width:40px;height:4px;background:#ddd6cd;border-radius:3px;margin:4px auto 12px;}
.sheet h2{font-size:17px;margin:0 0 4px;}
.sheet .sub{font-size:12px;color:var(--warm);margin:0 0 14px;line-height:1.7;}
.member{background:var(--cyan-wash);border:1px solid var(--cyan);border-radius:12px;padding:14px 13px 4px;margin-bottom:14px;}
.member .mh{font-size:12px;font-weight:700;color:var(--cyan);margin:0 0 8px;}
.note-reg{font-size:11px;color:var(--warm);margin:-4px 0 6px;line-height:1.7;}
.note-reg a{color:var(--cyan);font-weight:700;}
.fld{margin-bottom:12px;}
.fld label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--border-strong);border-radius:9px;
  padding:11px;font-size:15px;font-family:var(--font);background:#fff;color:var(--ink);}
.req{color:var(--ember);font-size:10px;margin-left:3px;}
.opt{color:var(--ash);font-size:10px;margin-left:3px;}
.types{display:flex;gap:7px;}
.types label{flex:1;border:1.5px solid var(--border-strong);border-radius:9px;padding:9px 6px;text-align:center;
  font-size:11.5px;font-weight:600;color:var(--warm);cursor:pointer;}
.types label.sel{border-color:var(--ember);background:#fff5f0;color:var(--ink);}
.types small{display:block;font-weight:400;font-size:10px;color:var(--ash);margin-top:2px;}
.types input{position:absolute;left:-9999px;}
.note-elec{font-size:11px;color:var(--warm);margin:10px 0 2px;line-height:1.7;}
.submit{display:block;width:100%;background:var(--ember);color:#fff;border:none;
  font-weight:700;font-size:16px;padding:15px;border-radius:12px;margin-top:6px;font-family:var(--font);cursor:pointer;}
.ts{font-size:11px;color:var(--ash);text-align:center;margin-top:10px;}
.fr-error{background:#fdecea;color:#b42318;border-radius:9px;padding:10px 12px;font-size:13px;margin-bottom:10px;}
.minimap{height:110px;border-radius:12px;margin-bottom:14px;border:1px solid var(--border);overflow:hidden;}
.hp{position:absolute;left:-9999px;}

/* 完了・入会トースト */
.done{position:absolute;inset:0;z-index:60;background:var(--canvas);display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;}
.done.on{display:flex;}
.done .ic{width:64px;height:64px;border-radius:50%;background:var(--ember);color:#fff;
  font-size:34px;line-height:64px;margin-bottom:16px;}
.done h2{font-size:19px;margin:0 0 8px;}
.done p{font-size:14px;color:var(--warm);line-height:1.8;margin:0 0 18px;}
.done a{color:var(--ember);font-weight:700;text-decoration:none;}