@charset "utf-8";
/* CSS Document */

/* ------------------------------- */
/* Map */
/* ------------------------------- */

#map {
 height: 100vh;
 background-color: #dbdbdb;
}


/* ------------------------------- */
/* Genre Bar */
/* ------------------------------- */

.genre-bar {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 9999;
 padding: 10px 8px 5px;
 background: rgba(255,255,255,0.95);
 border-top: 1px solid #ddd;
}

/* 横スクロール本体 */
.genre-scroll {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 cursor: grab;
 user-select: none; /* ドラッグで文字選択されないように */

 /* スクロールを気持ちよく */
 -webkit-overflow-scrolling: touch;

 /* 端の余白 */
 padding: 10px 4px 8px;
}

/* スクロールバーを目立たせたくない場合（任意） */
.genre-scroll::-webkit-scrollbar {
 height: 6px;
}
.genre-scroll::-webkit-scrollbar-thumb {
 background: rgba(0,0,0,0.15);
 border-radius: 15px;
}

.genre-btn {
 position: relative;
 padding: 10px 14px;
 flex: 0 0 auto;          /* 重要：縮まない＝横に並ぶ */
 border: 2px solid #ddd;
 border-radius: 15px;
 background: #fff;
 cursor: pointer;
}

.genre-scroll.is-dragging {
 cursor: grabbing;
}

.genre-btn.is-active {
 border-color: #9b7cb6;
 font-weight: 700;
}

.genre-btn.is-active .count-badge {
 background: #9b7cb6;
 color: #fff;
}

.genre-btn[data-genre="washoku"].is-active,
.genre-btn[data-genre="sushi"].is-active {
 border-color: #8fc31f;
}

.genre-btn[data-genre="washoku"].is-active .count-badge,
.genre-btn[data-genre="sushi"].is-active .count-badge {
 background: #8fc31f;
}

.genre-btn[data-genre="udon"].is-active,
.genre-btn[data-genre="ramen"].is-active {
 border-color: #f18d02;
}

.genre-btn[data-genre="udon"].is-active .count-badge,
.genre-btn[data-genre="ramen"].is-active .count-badge {
 background: #f18d02;
}

.genre-btn[data-genre="yoshoku"].is-active,
.genre-btn[data-genre="italian"].is-active {
 border-color: #ffda01;
}

.genre-btn[data-genre="yoshoku"].is-active .count-badge,
.genre-btn[data-genre="italian"].is-active .count-badge {
 background: #ffda01;
}

.genre-btn[data-genre="chinese"].is-active,
.genre-btn[data-genre="curry"].is-active,
.genre-btn[data-genre="yakiniku"].is-active,
.genre-btn[data-genre="other-cuisine"].is-active {
 border-color: #e83828;
}

.genre-btn[data-genre="chinese"].is-active .count-badge,
.genre-btn[data-genre="curry"].is-active .count-badge,
.genre-btn[data-genre="yakiniku"].is-active .count-badge,
.genre-btn[data-genre="other-cuisine"].is-active .count-badge {
 background: #e83828;
}

.genre-btn[data-genre="cafe"].is-active,
.genre-btn[data-genre="family-restaurant"].is-active {
 border-color: #ed7a9b;
}

.genre-btn[data-genre="cafe"].is-active .count-badge,
.genre-btn[data-genre="family-restaurant"].is-active .count-badge {
 background: #ed7a9b;
}

.genre-btn[data-genre="izakaya"].is-active,
.genre-btn[data-genre="bar"].is-active {
 border-color: #c486b8;
}

.genre-btn[data-genre="izakaya"].is-active .count-badge,
.genre-btn[data-genre="bar"].is-active .count-badge {
 background: #c486b8;
}



/* 右上に飛び出すバッジ */
.count-badge {
 position: absolute;

 top: 0;
 right: 0;

 /* 見た目だけ右上に飛び出す（要素としては内側にいる） */
 transform: translate(30%, -30%);

 min-width: 20px;
 height: 20px;
 padding: 0 6px 2px;

 display: inline-flex;
 align-items: center;
 justify-content: center;

 font-size: 11px;
 line-height: 1;
 border-radius: 999px;

 background: #FFF;
 color: #333;

 box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* 0件はバッジ非表示 */
.count-badge.is-hidden{
 display: none;
}

/* 0件ジャンルは薄く＋クリック不可 */
.genre-btn.is-disabled{
 opacity: 0.35;
 cursor: default;
 pointer-events: none; /* ←重要：クリック不可（ドラッグは親に流れる） */
}


/* ------------------------------- */
/* Bottom Sheet */
/* ------------------------------- */

.sheet-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.35);
 z-index: 999;
}

.bottom-sheet {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 max-height: 60vh;
 padding-bottom: 95px;
 background: #fff;
 border-radius: 18px 18px 0 0;
 box-shadow: 0 -10px 30px rgba(0,0,0,0.18);

 transform: translateY(110%);
 transition: transform 220ms ease;
 z-index: 1000;

 display: flex;
 flex-direction: column;
}

.bottom-sheet.is-open {
 transform: translateY(0);
}

.sheet-handle {
 width: 44px;
 height: 5px;
 background: #ddd;
 border-radius: 999px;
 margin: 0 auto 6px;
}

.sheet-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 30px;
 border-bottom: 1px solid #eee;
}

.sheet-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.sheet-close {
  border: none;
  background: transparent;
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 10px;
}

.sheet-body {
  padding: 14px 30px;
  overflow: auto;
  line-height: 1.6;
}

.sheet-body img {
 margin-bottom: 20px;
}

.shop-table {
 width: 100%;
}

.shop-table th,
.shop-table td {
 padding: 5px 10px;
 border: 1px solid #cfcfcf;
}

.shop-table th {
 width: 165px;
}

.shop-table.washoku th {
 background-color: #ecf4e3;
}

.shop-table.sushi th {
 background-color: #ecf4e3;
}

.shop-table.udon th {
 background-color: #fef1e3;
}

.shop-table.ramen th {
 background-color: #fef1e3;
}

.shop-table.yoshoku th {
 background-color: #fff9d0;
}

.shop-table.italian th {
 background-color: #fff9d0;
}

.shop-table.chinese th {
 background-color: #fdede4;
}

.shop-table.curry th {
 background-color: #fdede4;
}

.shop-table.yakiniku th {
 background-color: #fdede4;
}

.shop-table.other-cuisine th {
 background-color: #fdede4;
}

.shop-table.cafe th {
 background-color: #fdf2f5;
}

.shop-table.family-restaurant th {
 background-color: #fdf2f5;
}

.shop-table.izakaya th {
 background-color: #edecf6;
}

.shop-table.bar th {
 background-color: #edecf6;
}


/* ------------------------------- */
/* Group Marker */
/* ------------------------------- */

.group-marker-wrap {
 background: transparent;
 border: none;
}

.group-marker {
 position: relative;
 width: 45px;
 height: 45px;
 border-radius: 50%;
 background: #e83828;
 border: 3px solid #fff;
 box-shadow: 0 4px 12px rgba(0,0,0,0.28);
 display: flex;
 align-items: center;
 justify-content: center;
}

.group-marker::after {
 content: "";
 position: absolute;
 bottom: -8px;
 width: 12px;
 height: 12px;
 background: #e83828;
 transform: translateX(-50%) rotate(45deg);
 border-right: 3px solid #fff;
 border-bottom: 3px solid #fff;
 box-sizing: border-box;
 transform: rotate(45deg) skew(20deg, 20deg);
}

.group-marker__count {
 position: relative;
 z-index: 1;
 color: #fff;
 font-size: 16px;
 font-weight: 700;
 text-align: center;
 line-height: 1;
}

.group-marker__count span {
 font-size: 10px;
 font-weight: normal;
}


/* ------------------------------- */
/* Facility Popup */
/* ------------------------------- */

.facility-popup {
 min-width: 360px;
}

.facility-popup__title {
 margin-bottom: 10px;
 font-size: 14px;
 font-weight: 700;
}

.facility-popup__list {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 8px;
}

.facility-shop-btn {
 width: 100%;
 padding: 8px 6px;
 border: 1px solid #ddd;
 border-radius: 12px;
 background: #fff;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 gap: 6px;
 cursor: pointer;
 text-align: center;
}

.facility-shop-btn:hover {
 background: #f8f8f8;
}

.facility-shop-btn__icon {
 width: 32px;
 height: 32px;
 object-fit: contain;
}

.facility-shop-btn__name {
 font-size: 11px;
 line-height: 1.35;
 color: #333;
 word-break: break-word;
}