@charset "utf-8";
/*
 * 地図から探す(/store/map)。前アプリの「近くのお店」画面準拠。
 * 置き場所: public/common/css/store-map.css
 * スマホ: 地図を画面いっぱい(下のメニューの上まで)+ 下から引き出すシート
 * PC   : ヘッダーの下に地図、左側に店舗一覧
 */

.page-storeMap {
    --sm-primary: #F24822;
    --sm-text: #333;
    --sm-sub: #666;
    --sm-mute: #999;
    --sm-line: #eee;
    --sm-bg: #f5f5f5;
}

.smWrap {
    position: relative;
    height: calc(100vh - 140px);
    min-height: 560px;
    overflow: hidden;
    background: #e5e3df;
}
.smMap {
    position: absolute;
    inset: 0;
}

/* ---------- 店舗独自のアイコン(ベースのピン画像の上に、丸いアイコンを載せる) ---------- */
/* ベース: map-pin-base.svg(53x64、先端が下中央)。先端が店舗の位置 */
.smIconPin {
    position: absolute;
    box-sizing: border-box;
    width: 40px;
    height: 48px;
    transform: translate(-50%, -100%);
    background: url('/common/img/app/map-pin-base.svg') no-repeat center / 100% 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
    cursor: pointer;
    transition: width .15s, height .15s;
}
.smIconPin img {
    position: absolute;
    left: 14%;
    top: 11.5%;
    width: 72%;
    aspect-ratio: 1 / 1;
    height: auto;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.smIconPin.is-selected {
    width: 53px;
    height: 64px;
}

/* 広告ブースト中: 上に「PR 2倍」の帯が付いた 62x93 のピン。丸い部分の中心は (30.5, 55.5) */
.smIconPin.is-boost {
    width: 47px;
    height: 70px;
    background-image: url('/common/img/app/map-pin-boost-base.svg');
}
.smIconPin.is-boost img {
    left: 18.5%;
    top: 39.2%;
    width: 61.3%;
}
.smIconPin.is-boost.is-selected {
    width: 62px;
    height: 93px;
}

/* ---------- 密集した場所のまとめ表示(件数入りの丸) ---------- */
.smCluster {
    position: absolute;
    z-index: 20;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--sm-primary);
    box-shadow: 0 0 0 5px rgba(242, 72, 34, .25), 0 2px 4px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.smCluster.is-m {
    width: 44px;
    height: 44px;
    font-size: 15px;
}
.smCluster.is-l {
    width: 52px;
    height: 52px;
    font-size: 14px;
    box-shadow: 0 0 0 7px rgba(242, 72, 34, .25), 0 2px 4px rgba(0, 0, 0, .3);
}

/* ---------- 現在地ボタン ---------- */
.smLocate {
    position: absolute;
    right: 12px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: bottom .25s ease;
}
.smLocate:active {
    opacity: .7;
}

/* ---------- お知らせ ---------- */
.smToast {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 6;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    transform: translateX(-50%);
}
.smToast[hidden] {
    display: none;
}

/* ---------- シート(PC: 左の一覧) ---------- */
.smSheet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 380px;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .1);
}
.smSheet-handle {
    display: none;
}
.smSheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 24px;
}
.smSheet.is-loading .smSheet-body {
    opacity: .6;
}

/* 並び替え・ジャンルのチップ */
.smChips {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--sm-line);
    touch-action: pan-x;
}
.smChips::-webkit-scrollbar {
    display: none;
}
.smChip {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1.5px solid #ccc;
    border-radius: 50px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--sm-text);
}
.smChip.is-active {
    border-color: var(--sm-primary);
    background: var(--sm-primary);
    color: #fff;
}
.smChip--sort {
    border-color: var(--sm-text);
}
.smChip--sort span {
    font-size: 9px;
    vertical-align: 1px;
}

/* 見出し */
.smSection {
    padding-top: 16px;
}
.smSection-title {
    margin: 0 16px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sm-text);
}
.smSection-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--sm-mute);
}

/* バッジ・ハート共通 */
.smBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.smBadges:empty {
    display: none;
}
.smBadge {
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--sm-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.smBadge--support {
    background: #14AE5C;
}
.smHeart {
    flex-shrink: 0;
    padding: 4px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--sm-primary);
    position: static;
}
.smHeart .bi-heart {
    color: #bbb;
}
.smHeart .bi-heart-fill {
    color: var(--sm-primary);
}
.smDouble {
    position: absolute;
    left: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 3px;
    border-radius: 20px;
    background: var(--sm-primary);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.smDouble b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--sm-primary);
    font-size: 10px;
}

/* ---------- 選んだ店舗のカード ---------- */
.smCard {
    margin: 16px 16px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
}
.smCard-img {
    position: relative;
    height: 150px;
    background: #e0e0e0;
}
.smCard-img img,
.smMini-img img,
.smItem-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.smCard-body {
    padding: 10px 12px 12px;
}
.smCard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 8px;
}
.smCard-top .smHeart {
    margin: -4px -4px 0 auto;
}
.smCard-name {
    margin: 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--sm-text);
}
.smCard-text {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--sm-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smTags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--sm-sub);
}
.smTags span:first-child:not(:empty) {
    padding: 2px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: var(--sm-bg);
}
.smDistance {
    font-weight: 700;
}
.smPoint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.smPoint-label {
    font-size: 12px;
    color: var(--sm-sub);
}
.smPoint-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--sm-text);
}
.smPoint-value b {
    font-size: 24px;
    color: var(--sm-primary);
}
.smGo {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 10px;
    border: 0;
    border-radius: 30px;
    background: var(--sm-primary);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.smGo:active {
    opacity: .8;
}

/* ---------- おすすめ(横スクロール) ---------- */
.smCarousel {
    display: flex;
    gap: 12px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.smCarousel::-webkit-scrollbar {
    display: none;
}
.smMini {
    position: relative;
    flex: 0 0 150px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    cursor: pointer;
}
.smMini-img {
    position: relative;
    height: 90px;
    background: #e0e0e0;
}
.smMini-img .smDouble {
    left: 4px;
    top: 4px;
    font-size: 10px;
}
.smMini-pr {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
}
.smMini-body {
    padding: 8px;
}
.smMini-name {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smMini-meta {
    margin: 0;
    font-size: 11px;
    color: var(--sm-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smMini-point {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--sm-sub);
}
.smMini-point b {
    font-size: 15px;
    color: var(--sm-primary);
}

/* ---------- すべての店舗(縦の一覧) ---------- */
.smList {
    border-top: 1px solid var(--sm-line);
}
.smItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sm-line);
    cursor: pointer;
}
.smItem.is-selected {
    background: #fff4f1;
}
.smItem-img {
    position: relative;
    flex: 0 0 88px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    background: #e0e0e0;
}
.smItem-img .smDouble {
    display: none;
}
.smItem-body {
    flex: 1;
    min-width: 0;
}
.smItem-name {
    margin: 2px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smItem-meta {
    margin: 0;
    font-size: 12px;
    color: var(--sm-mute);
}
.smItem-point {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--sm-sub);
}
.smItem-point b {
    font-size: 16px;
    color: var(--sm-primary);
}
.smMore {
    margin: 12px 16px 0;
    font-size: 12px;
    color: var(--sm-mute);
}

/* ---------- 0件・エラー ---------- */
.smEmpty {
    padding: 40px 16px;
    text-align: center;
}
.smEmpty-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sm-sub);
}
.smEmpty-text {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sm-mute);
}
.smEmpty-btn {
    margin-top: 16px;
    padding: 0 24px;
    height: 40px;
    border: 1.5px solid var(--sm-primary);
    border-radius: 30px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--sm-primary);
}

/* =================================================================== PC・タブレット(481px 以上) */
@media (min-width: 481px) {
    /* 高さは JS がヘッダーの下から画面の下までに合わせる(ここは JS が動く前の仮の値) */
    .smWrap {
        border-top: 1px solid var(--sm-line);
    }
    /* チップはマウスで横スクロールしにくいので折り返す */
    .smChips {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    /* 地図の右下のズームボタンと重ならないように、現在地ボタンを左に寄せる */
    .smLocate {
        right: 60px;
        bottom: 24px;
    }
    .smItem:hover,
    .smMini:hover {
        background: #fafafa;
    }
    .smToast {
        left: calc(50% + 190px); /* 一覧の分だけ右へ(地図の真ん中) */
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .smSheet {
        width: 320px;
    }
    .smToast {
        left: calc(50% + 160px);
    }
}

/* =================================================================== スマホ */
@media (max-width: 480px) {
    .page-storeMap > header {
        display: none;
    }
    /* 地図はステータスバーの下から、下のメニューの上まで */
    .smWrap {
        position: fixed;
        left: 0;
        right: 0;
        top: env(safe-area-inset-top);
        bottom: calc(var(--naviBottom-height, 56px) + max(6px, env(safe-area-inset-bottom)));
        height: auto;
        min-height: 0;
    }
    /* シートは地図エリアの 90% の高さ。JS が translateY で 18% / 50% / 90% の位置に動かす */
    .smSheet {
        top: auto;
        right: 0;
        bottom: 0;
        width: auto;
        height: 90%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .15);
        transition: transform .25s ease;
        will-change: transform;
    }
    .smSheet-grip {
        flex-shrink: 0;
        touch-action: none;
    }
    .smSheet-grip .smChips {
        touch-action: pan-x;
    }
    .smSheet-handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        padding: 6px 0;
        background: #ddd content-box;
        border-radius: 2px;
        box-sizing: content-box;
    }
    .smChips {
        padding-top: 8px;
    }
    /* 中央の QR ボタンがシートに被るので、一番下に余白 */
    .smSheet-body {
        padding-bottom: 40px;
    }
}