:root{
  --accent:#F26A21;
  --accent-press:#D9560F;
  --accent-tint:#FCEEE4;
  --ink:#1E232B;
  --muted:#8B919B;
  --line:#ECEAE6;
  --page:#F5F3F0;
  --card:#FFFFFF;
  --map-base:#E9E4DB;
  --map-block:#DED7CC;
  --river:#BBD9E8;
  --road:#FFFFFF;
  --geo:#2B7FFF;
  --shadow:0 6px 20px rgba(30,35,43,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  background:#E5E2DD;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* phone shell */
.app{
  max-width:480px;margin:0 auto;height:100dvh;
  display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--page);
}
@media(min-width:540px){
  body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
  .app{height:min(920px,calc(100vh - 48px));border-radius:42px;box-shadow:0 24px 70px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.06);}
}

/* status bar */
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 4px;font-size:15px;font-weight:600;flex:0 0 auto;}
.statusbar .icons{display:flex;align-items:center;gap:7px;}
.statusbar svg{display:block;}

/* header */
.header{display:flex;align-items:center;gap:12px;padding:8px 20px 12px;flex:0 0 auto;}
.logo{display:flex;align-items:center;gap:8px;}
.logo .mark{width:40px;height:40px;flex:0 0 auto;}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand .name{font-size:30px;font-weight:800;color:var(--accent);letter-spacing:.5px;}
.brand .sub{font-size:14px;color:var(--muted);margin-top:6px;font-weight:500;}
.avatar{margin-left:auto;width:46px;height:46px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* segmented control */
.segments{display:flex;margin:0 18px 14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:5px;gap:2px;flex:0 0 auto;box-shadow:var(--shadow);}
.seg{flex:1;border:none;background:transparent;font:inherit;font-size:16px;font-weight:700;color:#52585F;padding:12px 0;border-radius:13px;cursor:pointer;transition:background .18s,color .18s;}
.seg[aria-pressed="true"]{background:var(--accent);color:#fff;}
.seg:focus-visible{outline:3px solid rgba(242,106,33,.4);outline-offset:1px;}

/* map */
.map{position:relative;height:33%;min-height:240px;flex:0 0 auto;overflow:hidden;}
.map svg.base{position:absolute;inset:0;width:100%;height:100%;}
/* 擬似マップであることを示す控えめなラベル（右上） */
.map-note{position:absolute;top:10px;right:10px;z-index:2;pointer-events:none;font-size:11px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:8px;padding:3px 8px;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.pin{position:absolute;transform:translate(-50%,-100%);width:34px;height:44px;cursor:pointer;transition:transform .15s;}
.pin:hover{transform:translate(-50%,-100%) scale(1.08);}
.pin.flash{animation:bounce .6s ease;}
@keyframes bounce{0%,100%{transform:translate(-50%,-100%) scale(1);}30%{transform:translate(-50%,-120%) scale(1.18);}}
.geo{position:absolute;left:48%;top:47%;transform:translate(-50%,-50%);width:22px;height:22px;}
.geo .dot{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;background:var(--geo);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.geo .halo{position:absolute;inset:-16px;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(43,127,255,.18);animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{transform:scale(.5);opacity:.7;}100%{transform:scale(1.25);opacity:0;}}
.fab{position:absolute;right:16px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#fff;border:none;box-shadow:0 4px 14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.fab:active{transform:scale(.94);}
.fab:focus-visible{outline:3px solid rgba(242,106,33,.5);}

/* card sheet */
.sheet{flex:1 1 auto;overflow-y:auto;background:var(--page);border-radius:22px 22px 0 0;margin-top:-18px;position:relative;z-index:2;padding:16px 16px 28px;box-shadow:0 -8px 24px rgba(0,0,0,.06);-webkit-overflow-scrolling:touch;}
.count{font-size:13px;color:var(--muted);font-weight:600;margin:2px 6px 12px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:96px 1fr;gap:14px;animation:rise .35s ease both;}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.thumb{width:96px;height:96px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:46px;background:radial-gradient(120% 120% at 30% 25%,#FFF3E7,#F6E2CE);grid-row:1 / span 2;overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.info{min-width:0;}
.info h3{margin:0;font-size:21px;font-weight:800;letter-spacing:.2px;line-height:1.25;}
.meta{color:var(--muted);font-size:14.5px;font-weight:600;margin-top:5px;line-height:1.5;}
.actions{grid-column:1 / -1;display:flex;gap:10px;margin-top:2px;}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:12px 8px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;border:1.5px solid var(--accent);transition:transform .1s,background .15s;}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:3px solid rgba(242,106,33,.4);outline-offset:1px;}
.btn.ghost{background:#fff;color:var(--accent);}
.btn.solid{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn svg{flex:0 0 auto;}

/* bottom sheet (AI prompt) */
.overlay{position:absolute;inset:0;background:rgba(20,22,26,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20;}
.overlay.open{opacity:1;pointer-events:auto;}
.modal{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);z-index:21;max-height:84%;display:flex;flex-direction:column;}
.modal.open{transform:none;}
.handle{width:42px;height:5px;border-radius:3px;background:#E2DED7;margin:10px auto 4px;}
.modal header{padding:6px 22px 10px;display:flex;align-items:flex-start;gap:10px;}
.modal header .t{font-size:18px;font-weight:800;}
.modal header .s{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600;}
.modal .close{margin-left:auto;border:none;background:#F2EFEA;width:34px;height:34px;border-radius:50%;font-size:18px;color:#6B7178;cursor:pointer;flex:0 0 auto;}
.modal .body{padding:0 22px 22px;overflow-y:auto;}
.promptbox{width:100%;border:1px solid var(--line);background:#FAF8F5;border-radius:14px;padding:14px;font:inherit;font-size:14px;line-height:1.6;color:#2D333B;resize:none;min-height:182px;}
.copybtn{width:100%;margin-top:14px;border:none;background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:800;padding:15px;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.copybtn:active{background:var(--accent-press);}
.open-row{margin-top:16px;}
.open-row .lbl{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.chips{display:flex;gap:9px;}
.chip{flex:1;text-align:center;text-decoration:none;border:1px solid var(--line);border-radius:11px;padding:11px 6px;font-size:14px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer;}
.chip:active{background:#F6F4F0;}

/* state panel (ローディング/0件/エラー/位置拒否) */
.state{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 22px;text-align:center;box-shadow:var(--shadow);animation:rise .35s ease both;}
.state-icon{font-size:36px;line-height:1;margin-bottom:12px;}
.state-icon .spinner{display:block;margin:0 auto;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.state-title{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.45;}
.state-desc{font-size:14px;font-weight:600;color:var(--muted);margin-top:8px;line-height:1.6;}
.state-btn{display:inline-flex;flex:0 0 auto;margin-top:18px;padding:13px 26px;}

/* skeleton (ローディング) */
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:96px 1fr;gap:14px;}
.skel-info{min-width:0;}
.skel-actions{grid-column:1 / -1;display:flex;gap:10px;}
.skel{background:#ECE8E2;border-radius:8px;position:relative;overflow:hidden;}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.3s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.skel-thumb{width:96px;height:96px;border-radius:13px;grid-row:1 / span 2;}
.skel-line.lg{height:18px;width:72%;margin-top:4px;margin-bottom:11px;}
.skel-line.md{height:14px;width:52%;margin-bottom:9px;}
.skel-line.sm{height:14px;width:38%;}
.skel-btn{flex:1;height:44px;border-radius:12px;}

/* credit (規約上の必須クレジット表記) */
.credit{margin:10px 6px 2px;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.6;}
.credit a{color:var(--muted);text-decoration:underline;}
.credit a:active{color:var(--accent);}

/* toast */
.toast{position:absolute;left:50%;bottom:26px;transform:transl(-50%,20px);translate:-50% 0;background:#1E232B;color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:40;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%);}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}