/* =========================================================
   高崎駅前便利マップ
   紙の観光案内図 × いまのUI。地は温白の紙、色はジャンルの点だけ。
   ========================================================= */

:root{
  /* 地と文字 */
  --paper:      #F2EDE3;
  --paper-2:    #FBF7EF;
  --paper-3:    #FFFDF8;
  --ink:        #2B2721;
  --ink-2:      rgba(43,39,33,.64);
  --ink-3:      rgba(43,39,33,.40);
  --rule:       rgba(43,39,33,.11);
  --rule-2:     rgba(43,39,33,.20);
  --accent:     #C2412F;          /* 高崎だるまの朱。点でしか使わない */
  --accent-soft:rgba(194,65,47,.10);

  /* かたち */
  --r-lg: 28px;
  --r:    18px;
  --r-sm: 12px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(72,54,30,.05), 0 10px 26px -14px rgba(72,54,30,.24);
  --sh-2: 0 2px 6px rgba(72,54,30,.07), 0 26px 56px -22px rgba(72,54,30,.34);
  --sh-3: 0 3px 10px rgba(72,54,30,.09), 0 40px 80px -28px rgba(72,54,30,.42);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.33,.8,.3,1);

  /* 文字 */
  --t-body:  clamp(14px, .5vw + 12.4px, 15.5px);
  --t-small: clamp(11.5px, .3vw + 10.4px, 13px);
  --t-name:  clamp(16px, .7vw + 13.6px, 19px);
  --t-h1:    clamp(21px, 1.1vw + 17px, 27px);

  --panel-w: 396px;
  --pad: 22px;
  --peek: 0px;            /* スマホのシートが閉じているときに見えている高さ */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  font-size:var(--t-body); line-height:1.85; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
h1,h2,h3,p,ul,li{ margin:0; padding:0 }
ul{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
.icon{ display:block; flex:none }

.en{ font-family:'Fraunces', Georgia, serif; font-optical-sizing:auto }

/* ---------- 全体レイアウト ---------- */
.app{ position:fixed; inset:0; display:grid; grid-template-columns:var(--panel-w) 1fr; grid-template-rows:100% }
.stage{ position:relative; grid-column:2; grid-row:1; overflow:hidden }
.map{ position:absolute; inset:0 }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo{ display:none !important }
.maplibregl-canvas{ outline:none }

/* 地図にごく薄い粒子を1枚。紙の上に刷った感じにする */
.map-grain{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.30;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 一覧パネル ---------- */
.panel{
  position:relative; grid-column:1; grid-row:1; z-index:5;
  display:flex; flex-direction:column; min-height:0;
  background:var(--paper-2);
  box-shadow:14px 0 44px -30px rgba(72,54,30,.55);
  border-right:1px solid var(--rule);
}
.panel::after{ /* 紙のきめ */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.panel__grip{ display:none }

.panel__head{ position:relative; z-index:1; padding:26px var(--pad) 14px }

.brand__ja{
  font-size:var(--t-h1); font-weight:700; line-height:1.32; letter-spacing:.04em;
}
.brand__ja em{ font-style:normal; color:var(--accent) }
.brand__en{
  margin-top:5px; font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}
.brand__lead{ margin-top:12px; font-size:var(--t-small); color:var(--ink-2); line-height:1.8 }

/* 検索 */
.search{
  position:relative; display:flex; align-items:center; gap:9px; margin-top:16px;
  background:var(--paper-3); border:1px solid var(--rule-2); border-radius:var(--r-pill);
  padding:9px 14px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search:focus-within{ border-color:rgba(194,65,47,.45); box-shadow:0 0 0 4px var(--accent-soft) }
.search__ico{ color:var(--ink-3); display:flex }
.search__input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:14px; color:var(--ink);
  padding:0; outline:none;
}
.search__input::placeholder{ color:var(--ink-3) }
.search__input::-webkit-search-cancel-button{ display:none }
.search__clear{ display:flex; color:var(--ink-3); padding:2px; border-radius:50% }
.search__clear:hover{ color:var(--ink) }

/* ジャンルのチップ */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 10px; border-radius:var(--r-pill);
  background:var(--paper-3); border:1px solid var(--rule-2);
  font-size:12.5px; letter-spacing:.03em; line-height:1.5; color:var(--ink-2);
  transition:transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.chip:hover{ transform:translateY(-1px); border-color:var(--rule-2); color:var(--ink) }
.chip__dot{
  width:9px; height:9px; border-radius:50%; background:var(--c); flex:none;
  transition:transform .35s var(--ease), box-shadow .3s;
}
.chip[aria-pressed="true"]{
  background:var(--c); border-color:var(--c); color:#fff; font-weight:500;
  box-shadow:0 6px 16px -8px var(--c);
}
.chip[aria-pressed="true"] .chip__dot{ background:rgba(255,255,255,.92); transform:scale(.8) }
.chip--all{ font-weight:500 }
.chip--all[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); box-shadow:none }

/* 一覧 */
.panel__body{
  position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:6px var(--pad) 30px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
.count{
  font-family:'Fraunces', Georgia, serif; font-size:11.5px; letter-spacing:.18em;
  color:var(--ink-3); text-transform:uppercase; padding:10px 2px 12px;
}
.count b{ font-weight:600; color:var(--ink-2); font-size:13px }
.legend{
  display:flex; align-items:center; gap:8px; padding:0 2px 14px;
  font-size:11px; color:var(--ink-3); letter-spacing:.02em;
}
.legend__ring{
  width:22px; height:0; flex:none; border-top:1px dashed #B9AB90;
}
.note{ margin-top:22px; font-size:11px; line-height:1.75; color:var(--ink-3) }
.byline{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:11.5px; letter-spacing:.04em; color:var(--ink-3);
}
.byline a{
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid rgba(194,65,47,.45); padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
.byline a:hover{ color:var(--accent); border-color:var(--accent) }
.empty{ padding:26px 6px; font-size:13px; line-height:1.9; color:var(--ink-2) }

/* ---------- カード ---------- */
.cards{ display:flex; flex-direction:column; gap:9px }
.card{
  position:relative; display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start;
  width:100%; text-align:left; padding:14px 14px 15px 12px;
  background:var(--paper-3); border:1px solid var(--rule); border-radius:var(--r);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card::before{ /* ジャンル色のごく細い帯。左端に1本だけ */
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:var(--c); opacity:0;
  transition:opacity .3s var(--ease), top .4s var(--ease), bottom .4s var(--ease);
}
.card:hover, .card.is-active{ transform:translateY(-2px); box-shadow:var(--sh-1); border-color:var(--rule-2) }
.card:hover::before, .card.is-active::before{ opacity:1; top:8px; bottom:8px }
.card.is-active{ background:#fff }

.card__mark{
  width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 13%, #fff); color:var(--c);
  transition:transform .45s var(--ease);
}
.card:hover .card__mark{ transform:rotate(-6deg) scale(1.05) }
.card__name{ font-size:var(--t-name); font-weight:700; line-height:1.4; letter-spacing:.01em }
.card__sub{ font-size:11px; letter-spacing:.08em; color:var(--ink-3); margin-top:2px;
            font-family:'Fraunces','Zen Kaku Gothic New',Georgia,serif }
.card__lead{ margin-top:7px; font-size:13px; line-height:1.75; color:var(--ink-2) }
.card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:9px; font-size:11.5px; color:var(--ink-3) }
.card__cat{ color:var(--c); font-weight:500 }
.card__dist{ font-variant-numeric:tabular-nums }
.badge-todo{
  display:inline-block; padding:1px 8px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent); font-size:10.5px; font-weight:500; letter-spacing:.04em;
}

/* ---------- 詳細 ---------- */
.detail{
  position:absolute; z-index:20; left:0; top:0; width:var(--panel-w); height:100%;
  display:flex; flex-direction:column; background:var(--paper-3);
  box-shadow:var(--sh-3); border-right:1px solid var(--rule);
}
.detail[hidden]{ display:none }
.detail__grip{ display:none }
.detail.is-in{ animation:slideIn .5s var(--ease) both }
@keyframes slideIn{ from{ transform:translateX(-14px); opacity:0 } to{ transform:none; opacity:1 } }

.detail__top{
  position:relative; overflow:hidden; padding:20px var(--pad) 18px;
  background:color-mix(in srgb, var(--c) 9%, var(--paper-3));
  border-bottom:1px solid var(--rule);
}
.detail__nav{ position:relative; z-index:1; margin-bottom:16px }
.detail__watermark{
  position:absolute; right:-18px; top:-22px; color:var(--c); opacity:.13;
  pointer-events:none; transform:rotate(-8deg);
}
.detail__watermark .icon{ width:130px; height:130px; stroke-width:1.1 }
.detail__back{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2);
  padding:5px 12px 5px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.7);
  border:1px solid var(--rule);
  transition:transform .3s var(--ease), background-color .25s;
}
.detail__back:hover{ transform:translateX(-2px); background:#fff }
.detail__cat{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500;
  color:#fff; background:var(--c); padding:4px 11px 4px 9px; border-radius:var(--r-pill);
}
.detail__name{ position:relative; z-index:1; margin-top:11px; font-size:clamp(22px,1.6vw,27px); font-weight:700; line-height:1.35 }
.detail__sub{ margin-top:3px; font-family:'Fraunces','Zen Kaku Gothic New',Georgia,serif; font-size:12px; letter-spacing:.1em; color:var(--ink-3) }
.detail__lead{ position:relative; z-index:1; margin-top:12px; font-size:14px; line-height:1.8; color:var(--ink) }

.detail__body{ flex:1; min-height:0; overflow-y:auto; padding:20px var(--pad) 34px }
.detail__desc{ font-size:13.5px; line-height:1.95; color:var(--ink-2) }

.facts{ margin-top:20px; display:flex; flex-direction:column; gap:0 }
.fact{ display:grid; grid-template-columns:68px 1fr; gap:12px; padding:11px 0; border-top:1px solid var(--rule); font-size:13px }
.fact:last-child{ border-bottom:1px solid var(--rule) }
.fact dt{ color:var(--ink-3); font-size:11.5px; letter-spacing:.08em; padding-top:3px }
.fact dd{ margin:0; line-height:1.75 }
.fact__sub{ display:block; font-size:11px; color:var(--ink-3) }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px }
.tag{ font-size:11.5px; color:var(--ink-2); background:color-mix(in srgb, var(--c) 10%, transparent);
      padding:3px 10px; border-radius:var(--r-pill) }

.links{ display:flex; flex-direction:column; gap:8px; margin-top:20px }
.link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px 12px 16px; border-radius:var(--r); border:1px solid var(--rule-2);
  background:var(--paper-2); font-size:13px; text-decoration:none;
  transition:transform .35s var(--ease), background-color .25s, border-color .25s;
}
.link:hover{ transform:translateY(-1px); background:#fff; border-color:var(--c) }
.link--primary{ background:var(--c); border-color:var(--c); color:#fff; font-weight:500; box-shadow:0 10px 22px -14px var(--c) }
.link--primary:hover{ background:var(--c); filter:brightness(1.06) }

/* ---------- 地図の上のUI ---------- */
.mapui{ position:absolute; right:16px; bottom:44px; z-index:6; display:flex; flex-direction:column; gap:8px }
.mapui__btn{
  width:42px; height:42px; border-radius:15px; display:grid; place-items:center;
  background:rgba(255,253,248,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--rule-2); color:var(--ink-2); box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), color .25s, background-color .25s;
}
.mapui__btn:hover{ transform:translateY(-2px); color:var(--accent); background:#fff }
.mapui__group{
  display:flex; flex-direction:column; border-radius:15px; overflow:hidden;
  border:1px solid var(--rule-2); box-shadow:var(--sh-1); background:rgba(255,253,248,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.mapui__group .mapui__btn{ border:0; border-radius:0; box-shadow:none; background:none; height:38px }
.mapui__group .mapui__btn:hover{ transform:none; background:rgba(194,65,47,.08) }
.mapui__group .mapui__btn + .mapui__btn{ border-top:1px solid var(--rule) }
.mapui__btn.is-on{ color:var(--accent) }

.credit{
  position:absolute; left:14px; bottom:10px; z-index:6;
  font-size:10px; color:var(--ink-3); letter-spacing:.02em;
  background:rgba(242,237,227,.72); padding:2px 8px; border-radius:var(--r-pill);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.credit a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule-2) }

/* ---------- 地図上の吹き出し ---------- */
.maplibregl-popup-content{
  padding:0; background:none; box-shadow:none; border-radius:0;
}
.maplibregl-popup-tip{ display:none }
.bubble{
  min-width:184px; max-width:250px; background:var(--paper-3); border:1px solid var(--rule-2);
  border-radius:var(--r); box-shadow:var(--sh-2); padding:13px 15px 14px; text-align:left;
  animation:pop .42s var(--ease) both;
}
@keyframes pop{ from{ transform:translateY(6px) scale(.94); opacity:0 } to{ transform:none; opacity:1 } }
.bubble__cat{ font-size:10.5px; font-weight:500; color:var(--c); letter-spacing:.08em }
.bubble__name{ font-size:15.5px; font-weight:700; line-height:1.4; margin-top:2px }
.bubble__lead{ font-size:12px; line-height:1.7; color:var(--ink-2); margin-top:5px }
.bubble__more{
  display:inline-flex; align-items:center; gap:4px; margin-top:10px;
  font-size:11.5px; font-weight:500; color:var(--c);
}

/* ---------- スマホの見出し（地図の上に浮く） ---------- */
.topbrand{ display:none }

/* ---------- 現在地 ---------- */
.me{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #fff;
     box-shadow:0 0 0 1px rgba(194,65,47,.35), 0 4px 12px -3px rgba(194,65,47,.6) }
.me::after{ content:''; position:absolute; inset:-11px; border-radius:50%; border:1px solid rgba(194,65,47,.4);
            animation:ping 2.6s var(--ease-soft) infinite }
@keyframes ping{ 0%{ transform:scale(.5); opacity:.9 } 70%,100%{ transform:scale(1.25); opacity:0 } }

/* =========================================================
   スマホ・タブレット
   ========================================================= */
@media (max-width: 940px){
  :root{ --pad:18px }

  .app{ grid-template-columns:1fr }
  .stage{ grid-column:1; grid-row:1 }

  .topbrand{
    display:flex; align-items:baseline; gap:8px; position:absolute; z-index:6;
    left:12px; top:calc(12px + env(safe-area-inset-top)); padding:8px 15px;
    background:rgba(251,247,239,.90); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--rule-2); border-radius:var(--r-pill); box-shadow:var(--sh-1);
  }
  .topbrand__ja{ font-size:14px; font-weight:700; letter-spacing:.03em; line-height:1 }
  .topbrand__ja em{ font-style:normal; color:var(--accent) }
  .topbrand__en{ font-family:'Fraunces',Georgia,serif; font-size:9px; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--ink-3) }

  .mapui{ right:12px; bottom:calc(var(--peek) + 16px); transition:bottom .5s var(--ease) }
  .credit{ left:12px; bottom:calc(var(--peek) + 8px); transition:bottom .5s var(--ease) }

  /* 下からのシート */
  .app{ --peek:180px }
  .panel{
    position:fixed; left:0; right:0; bottom:0; z-index:10; grid-column:1;
    height:min(86svh, 720px);
    border-right:0; border-top:1px solid var(--rule-2);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -8px 40px -18px rgba(72,54,30,.5);
    transform:translateY(calc(100% - var(--peek)));
    transition:transform .55s var(--ease);
    touch-action:none;
  }
  .panel::after{ border-radius:var(--r-lg) var(--r-lg) 0 0 }
  .panel.is-open{ transform:translateY(0) }
  .panel.is-dragging{ transition:none }

  .panel__grip{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:9px 0 3px; position:relative; z-index:2; flex:none;
  }
  .panel__grip-bar{ width:42px; height:4px; border-radius:2px; background:var(--rule-2) }
  .panel__grip-label{ font-size:10.5px; letter-spacing:.14em; color:var(--ink-3) }

  .panel__head{ padding:4px var(--pad) 12px; flex:none; touch-action:auto }
  .brand, .brand__lead{ display:none }
  .search{ margin-top:6px }
  .chips{
    margin-top:11px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-bottom:2px; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);
  }
  .chips::-webkit-scrollbar{ display:none }
  /* 横に続いていることを端のぼかしで示す */
  .chips{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
            mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  .chip{ flex:none }

  .panel__body{ padding-bottom:calc(28px + env(safe-area-inset-bottom)); touch-action:auto }
  .count{ padding-top:4px }

  /* 詳細もシート */
  .detail{
    position:fixed; inset:auto 0 0 0; width:auto; height:min(78svh, 690px);
    border-right:0; border-radius:var(--r-lg) var(--r-lg) 0 0; z-index:30;
    touch-action:none;
  }
  .detail__grip{
    display:block; position:absolute; left:50%; top:9px; z-index:3;
    width:42px; height:4px; margin-left:-21px; border-radius:2px;
    background:rgba(43,39,33,.22);
  }
  .detail__top{ padding-top:26px }
  .detail__body{ touch-action:auto }
  .detail.is-in{ animation:sheetUp .5s var(--ease) both }
  @keyframes sheetUp{ from{ transform:translateY(16px); opacity:0 } to{ transform:none; opacity:1 } }
  .detail__top{ border-radius:var(--r-lg) var(--r-lg) 0 0 }
  .detail__body{ padding-bottom:calc(34px + env(safe-area-inset-bottom)) }
}

@media (max-width: 420px){
  .topbrand__en{ display:none }
}

/* PCでは掴み手を出さない */
@media (min-width: 941px){
  .app{ --peek:0px }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important }
}

/* ---------- 細部 ---------- */
.card__txt{ display:block; min-width:0 }
.card__name, .card__sub, .card__lead, .card__meta{ display:block }
.card__meta{ display:flex }
.chip[data-empty="1"]{ opacity:.42 }
.chip[data-empty="1"][aria-pressed="true"]{ opacity:1 }
.detail__cat .icon{ margin-right:1px }
.detail__back .icon{ margin-right:-1px }
.link .icon{ opacity:.55; flex:none }
.link--primary .icon{ opacity:.9 }
.fact dd a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-2) }
.detail__body .note{ margin-top:18px }
.detail__body > .facts:first-child{ margin-top:0 }