/* =========================================================
   クラリエMAP（Leaflet版） — style.css の共通スタイルに上乗せ
   - すべて cmap- プレフィックス / 変数は .cmap-root にスコープ（既存CSSと非衝突）
   - 色・フォントは style.css の Cralier デザイントークン（--c-*, --ff-*）に合わせる
   ========================================================= */
.cmap-root{
  /* 既存トークンにひも付け（Figma由来パレット） */
  --cmap-ink:      var(--c-text,#7C5B38);
  --cmap-ink-soft: var(--c-accent,#BDA58B);
  --cmap-accent:   #A47E52;                 /* 見出し強調（--c-text より少し濃い茶） */
  --cmap-panel:    var(--c-bg-soft,#F5EBE1);
  --cmap-white:    var(--c-white,#FFF7F2);
  --cmap-line:     var(--c-line,#e3d6c0);
  --cmap-pink-t:   var(--c-pink-text,#D28A92);  --cmap-pink-b:  var(--c-pink-bg,#F6DEDF);
  --cmap-green-t:  var(--c-green-text,#839E7C); --cmap-green-b: var(--c-green-bg,#DEE8E1);
  --cmap-blue-t:   var(--c-blue-text,#678DBB);  --cmap-blue-b:  var(--c-blue-bg,#D1E2E6);
  --cmap-radius:   14px;
  --cmap-shadow:   var(--shadow-card,0 4px 18px rgba(120,90,60,.08));
  color:var(--cmap-ink);
  font-family:var(--ff-jp,"Noto Sans JP",sans-serif);
  line-height:1.8;
}
.cmap-root *{box-sizing:border-box;}
.cmap-wrap{max-width:1080px;margin:0 auto;padding:0 22px;}

/* リード */
.cmap-lead{margin:22px 0 16px;}
.cmap-lead h1{font-family:var(--ff-body,"M PLUS 1p",sans-serif);font-weight:700;font-size:clamp(22px,4.5vw,30px);margin:0 0 8px;color:var(--cmap-ink);letter-spacing:.04em;}
.cmap-lead h1 .cmap-accent{color:var(--cmap-accent);}
.cmap-lead p{margin:0;color:var(--cmap-ink-soft);font-size:13.5px;max-width:36em;}

/* ビュー切替（リスト / 地図） */
.cmap-viewtoggle{display:inline-flex;background:var(--cmap-white);border:1px solid var(--cmap-line);border-radius:999px;padding:4px;gap:4px;margin-bottom:12px;}
.cmap-viewbtn{appearance:none;border:none;background:transparent;font-family:var(--ff-body,"M PLUS 1p",sans-serif);font-weight:700;font-size:13px;color:var(--cmap-ink-soft);padding:8px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em;}
.cmap-viewbtn[aria-selected="true"]{background:var(--cmap-accent);color:#fff;}
.cmap-viewbtn:focus-visible{outline:2px solid var(--cmap-accent);outline-offset:2px;}

/* フィルター・ソート */
.cmap-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.cmap-select{appearance:none;border:1px solid var(--cmap-line);background:var(--cmap-white)
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A47E52' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
   color:var(--cmap-ink);font-family:inherit;font-size:13px;font-weight:500;padding:9px 34px 9px 16px;border-radius:999px;cursor:pointer;}
.cmap-select:focus-visible{outline:2px solid var(--cmap-accent);outline-offset:1px;}
.cmap-search{flex:1;min-width:170px;max-width:300px;border:1px solid var(--cmap-line);background:var(--cmap-white);border-radius:999px;padding:9px 16px;font-family:inherit;font-size:13px;color:var(--cmap-ink);}
.cmap-search:focus-visible{outline:2px solid var(--cmap-accent);outline-offset:1px;}

/* マップ */
.cmap-stage{position:relative;border:1px solid var(--cmap-line);border-radius:var(--cmap-radius);overflow:hidden;box-shadow:var(--cmap-shadow);background:var(--cmap-white);}
.cmap-map{height:460px;width:100%;z-index:1;background:#e6ded0;}
.cmap-map.leaflet-container{font-family:inherit;}

/* 詳細パネル（PC=右スライド / SP=下シート）ビューに依らず表示できるよう fixed */
.cmap-detail{position:fixed;top:0;right:0;height:100%;width:360px;max-width:88%;background:var(--cmap-panel);border-left:1px solid var(--cmap-line);box-shadow:-8px 0 24px rgba(120,90,60,.18);transform:translateX(100%);transition:transform .28s ease;z-index:1200;display:flex;flex-direction:column;visibility:hidden;}
.cmap-detail.open{transform:translateX(0);visibility:visible;}
.cmap-detail-img{height:150px;background:linear-gradient(135deg,#efe7d8,#e3d6c0);display:grid;place-items:center;color:var(--cmap-ink-soft);font-size:12px;flex-shrink:0;}
.cmap-detail-img[hidden]{display:none;}
.cmap-detail-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cmap-detail-body{padding:18px 20px;overflow:auto;}
.cmap-detail-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--cmap-ink);font-size:16px;cursor:pointer;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.cmap-detail-close:focus-visible{outline:2px solid var(--cmap-accent);}
.cmap-detail .cmap-name{font-size:19px;margin:0 0 8px;}
.cmap-detail .cmap-desc{font-size:13.5px;margin:10px 0 14px;}
.cmap-overlay{position:fixed;inset:0;background:rgba(120,90,60,.28);opacity:0;visibility:hidden;transition:opacity .28s;z-index:1100;}
.cmap-overlay.open{opacity:1;visibility:visible;}

/* バッジ・タグ */
.cmap-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.cmap-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;font-family:var(--ff-body,"M PLUS 1p",sans-serif);padding:4px 11px 4px 9px;border-radius:6px 999px 999px 6px;}
.cmap-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;}
.cmap-badge.material{background:var(--cmap-green-b);color:var(--cmap-green-t);}
.cmap-badge.shop{background:var(--cmap-pink-b);color:var(--cmap-pink-t);}
.cmap-badge.event{background:var(--cmap-blue-b);color:var(--cmap-blue-t);}
.cmap-genre{font-size:11px;color:var(--cmap-ink-soft);background:var(--cmap-white);border:1px solid var(--cmap-line);border-radius:999px;padding:3px 9px;}
.cmap-name{font-family:var(--ff-body,"M PLUS 1p",sans-serif);font-weight:700;line-height:1.35;color:var(--cmap-ink);}
.cmap-where{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12px;color:var(--cmap-ink-soft);margin:6px 0;}
.cmap-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cmap-accent);margin-right:4px;}
.cmap-price{font-size:12px;color:var(--cmap-accent);font-weight:700;}
.cmap-shopinfo{margin:8px 0 0;display:flex;flex-direction:column;gap:3px;}
.cmap-si-row{font-size:12.5px;color:var(--cmap-ink);}
.cmap-si-label{color:var(--cmap-ink-soft);font-weight:700;}
.cmap-si-recruit{font-weight:700;color:var(--cmap-accent);}
.cmap-desc{font-size:13px;color:var(--cmap-ink);}
.cmap-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.cmap-link{font-size:12.5px;font-weight:700;color:var(--cmap-accent);text-decoration:none;border-bottom:1.5px solid transparent;}
.cmap-link:hover{border-bottom-color:var(--cmap-accent);}
.cmap-link:focus-visible{outline:2px solid var(--cmap-accent);outline-offset:2px;border-radius:2px;}

/* リスト */
.cmap-listhead{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 12px;}
.cmap-listhead h2{font-family:var(--ff-body,"M PLUS 1p",sans-serif);font-weight:700;font-size:18px;margin:0;color:var(--cmap-ink);}
.cmap-count{font-size:12.5px;color:var(--cmap-ink-soft);}
.cmap-count b{color:var(--cmap-accent);}
.cmap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.cmap-card{background:var(--cmap-panel);border:1px solid var(--cmap-line);border-radius:var(--cmap-radius);padding:16px;box-shadow:var(--cmap-shadow);display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .16s,box-shadow .16s;}
.cmap-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(120,90,60,.14);}
.cmap-card:focus-visible{outline:2px solid var(--cmap-accent);outline-offset:2px;}
.cmap-card .cmap-name{font-size:17px;margin:2px 0 0;}
.cmap-card .cmap-pinhint{font-size:11px;color:var(--cmap-accent);font-weight:700;}
.cmap-empty{grid-column:1/-1;text-align:center;color:var(--cmap-ink-soft);padding:40px;font-size:14px;}

/* 注記 */
.cmap-note{margin:22px 0 8px;background:var(--cmap-white);border:1px dashed var(--cmap-line);border-radius:14px;padding:14px 16px;font-size:11.5px;color:var(--cmap-ink-soft);line-height:1.9;}
.cmap-note b{color:var(--cmap-ink);}
.cmap-note a{color:var(--cmap-accent);font-weight:700;}

/* Leafletマーカー（ピン）の色分け＝ブランドパレット */
.cmap-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.cmap-pin.material{background:var(--cmap-green-t);}
.cmap-pin.shop{background:var(--cmap-pink-t);}
.cmap-pin.event{background:var(--cmap-blue-t);}

/* ビュー表示切替 */
.cmap-view[hidden]{display:none;}

/* リンク確認ページ用テーブル */
.cmap-tablewrap{margin:16px 0;border:1px solid var(--cmap-line);border-radius:var(--cmap-radius);overflow:hidden;box-shadow:var(--cmap-shadow);background:var(--cmap-white);}
table.cmap-table{width:100%;border-collapse:collapse;font-size:13px;}
.cmap-table thead th{background:var(--cmap-panel);text-align:left;font-family:var(--ff-body,"M PLUS 1p",sans-serif);font-weight:700;color:var(--cmap-accent);padding:11px 14px;border-bottom:1px solid var(--cmap-line);white-space:nowrap;font-size:12.5px;}
.cmap-table tbody td{padding:11px 14px;border-bottom:1px solid var(--cmap-line);vertical-align:top;}
.cmap-table tbody tr:last-child td{border-bottom:none;}
.cmap-table tbody tr:hover{background:var(--cmap-panel);}
.cmap-table .cmap-area{font-size:11.5px;color:var(--cmap-ink-soft);margin-top:2px;}
.cmap-none{font-size:11.5px;color:var(--cmap-ink-soft);}
.cmap-status{font-size:11px;font-weight:700;font-family:var(--ff-body,"M PLUS 1p",sans-serif);padding:3px 9px;border-radius:999px;white-space:nowrap;}
.cmap-status.verify{background:#fff4e6;color:#9a6a2f;border:1px solid #f0d9b5;}
.cmap-status.ok{background:var(--cmap-green-b);color:var(--cmap-green-t);border:1px solid #c8ddca;}
.cmap-summary{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;}
.cmap-chip{font-size:12.5px;font-weight:700;font-family:var(--ff-body,"M PLUS 1p",sans-serif);background:var(--cmap-white);border:1px solid var(--cmap-line);border-radius:999px;padding:6px 14px;}
.cmap-chip b{color:var(--cmap-accent);}
.cmap-chip.warn{background:#fff4e6;border-color:#f0d9b5;color:#9a6a2f;}
.cmap-chip.warn b{color:#9a6a2f;}

/* スマホ：詳細を下からのシートに */
@media(max-width:680px){
  .cmap-map{height:420px;}
  .cmap-detail{top:auto;bottom:0;right:0;width:100%;max-width:100%;height:auto;max-height:80%;
    border-left:none;border-top:1px solid var(--cmap-line);border-radius:18px 18px 0 0;
    transform:translateY(100%);box-shadow:0 -8px 24px rgba(120,90,60,.18);}
  .cmap-detail.open{transform:translateY(0);}
  .cmap-grid{grid-template-columns:1fr;}
  .cmap-search{max-width:100%;}
  .cmap-table{font-size:12px;}
  .cmap-table thead{display:none;}
  .cmap-table tbody td{display:block;border-bottom:none;padding:4px 14px;}
  .cmap-table tbody td:first-child{padding-top:14px;}
  .cmap-table tbody td:last-child{padding-bottom:14px;border-bottom:1px solid var(--cmap-line);}
  .cmap-table tbody td::before{content:attr(data-label);display:block;font-size:10.5px;color:var(--cmap-ink-soft);font-weight:700;margin-bottom:1px;}
  .cmap-table tbody td:first-child::before{content:none;}
}
@media (prefers-reduced-motion:reduce){.cmap-detail,.cmap-card,.cmap-overlay{transition:none;}}
