/* 샵 화면 CSS — home 영역
 * 화면: index
 * :where(.pg-화면이름) 이 붙은 규칙은 그 화면에만 적용된다(우선순위는 그대로). 규칙: public/css/shop/README.md */


/* ───────── index ───────── */
/* resources/views/shop/index.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
        /* ===== 최신 리뷰 섹션 ===== */
.latest-review-section {
            padding: 64px 0;
            /*background: #f0fdf4;*/
}
.latest-review-inner {
            max-width: var(--gm-main-w);
            margin: 0 auto;
            padding: 0 20px;
}
.latest-review-head { margin-bottom: 48px; }
.latest-review-label {
            font-size: 14px;
            font-weight: 600;
            color: #dc2626;
            letter-spacing: 0.05em;
            text-transform: uppercase;
}
.latest-review-title {
            font-size: 32px;
            font-weight: 800;
            color: #0f172a;
            margin-top: 8px;
            line-height: 1.25;
            word-break: keep-all;
}
.latest-review-desc {
            font-size: 16px;
            color: #64748b;
            margin-top: 12px;
}
.latest-review-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
}
.lr-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
            border: 1px solid rgba(0,0,0,0.04);
            text-decoration: none;
            color: inherit;
            transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
}
.lr-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.1);
}
.lr-card-img {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
}
.lr-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.lr-card:hover .lr-card-img img { transform: scale(1.06); }
.lr-card-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 100px;
}
.lr-card-body {
            /* 제목·본문이 각각 두 줄 자리를 잡고 있어 20px 은 카드가 과하게 뜬다.
               아래만 조금 더 줘서 작성자 줄이 모서리에 붙지 않게 한다 */
            padding: 14px 16px 16px;
}
.lr-card-stars {
            margin-bottom: 8px;
            font-size: 14px;
            letter-spacing: 1px;
}
.lr-card-stars .star-on { color: #facc15; }
.lr-card-stars .star-off { color: #e2e8f0; }
.lr-card-title {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 6px;
            line-height: 1.4;
            word-break: keep-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
}
.lr-card-text {
            font-size: 14px;
            color: #64748b;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 12px;
            min-height: 3em;   /* 두 줄 고정 (line-height 1.5 × 2) */
}
.lr-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: var(--gm-text-muted, #6e6e6e);
}
.lr-card-author { font-weight: 600; color: #64748b; }
.latest-review-more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 14px 36px;
            border-radius: 100px;
            background: #16a34a;
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            border: none;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
            box-shadow: 0 4px 14px rgba(22,163,74,0.3);
}
.latest-review-more:hover {
            background: #15803d;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(22,163,74,0.35);
}
@media (max-width: 1024px) {
    .latest-review-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .latest-review-section { padding: 60px 0; }
    .latest-review-title { font-size: 26px; }
    .latest-review-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lr-card-img { aspect-ratio: 16/9; }
}

/* ===== 유튜브 영상 섹션 ===== */
        /* ===== 여행 이야기 섹션 (전기·토크·꿀팁) ===== */
        /* 카드 박스로 감싸면 안쪽 여백이 커서 빈 곳이 많아 보인다.
           구분선만 남기고 게시판 목록처럼 촘촘히 쌓는다. */
.story-section { padding: 64px 0; }
.story-inner {
            max-width: var(--gm-main-w);
            margin: 0 auto;
            padding: 0 20px;
}
/* 섹션 제목은 화면에서 숨긴다 — 열 제목만으로 충분해서.
           display:none 대신 읽기용으로만 남겨 문서 구조(h2)와 검색엔진에는 그대로 둔다. */
.story-head {
            position: absolute; width: 1px; height: 1px;
            margin: -1px; padding: 0; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap;
}
.story-label {
            font-size: 14px; font-weight: 600; color: var(--gm-red);
            letter-spacing: .05em; text-transform: uppercase;
}
.story-title {
            font-size: 32px; font-weight: 800; color: #0f172a;
            margin-top: 8px; line-height: 1.25; word-break: keep-all;
}
.story-desc { font-size: 16px; color: #64748b; margin-top: 12px; }
/* minmax(0,…) 가 없으면 칸의 최소폭이 '내용 크기'가 된다.
           제목을 한 줄로(nowrap) 두기 때문에 긴 제목이 칸을 밀어내 레이아웃이 터진다(실제로 터졌다). */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
/* 열마다 글 수와 행 높이가 다르다(제목 8줄 vs 썸네일 4장).
           행이 남는 높이를 나눠 갖게 해서 세 열의 아래를 맞춘다. */
.story-col { display: flex; flex-direction: column; min-width: 0; }
/* 열 제목 줄 전체가 그 게시판으로 가는 링크다.
           누를 수 있다는 걸 알리려고 제목 옆에 + 를 붙인다. */
.story-col-head {
            flex: 0 0 auto;
            display: flex; align-items: baseline; gap: 7px; text-decoration: none;
            padding-bottom: 12px; border-bottom: 2px solid #0f172a;
            transition: border-color .2s;
}
.story-col-plus { font-size: 17px; font-weight: 400; color: #64748b; line-height: 1; }
.story-col-head:hover { border-bottom-color: var(--gm-primary); }
.story-col-head:hover .story-col-name,
.story-col-head:hover .story-col-plus { color: var(--gm-primary); }
.story-col > .story-item,
.story-col > .story-tip { flex: 1 1 auto; }
.story-col-name { font-size: 17px; font-weight: 700; color: #0f172a; }
/* 전기·토크 — 제목 한 줄 + 날짜 */
.story-item {
            display: flex; align-items: center; gap: 12px;
            padding: 13px 2px; text-decoration: none; color: inherit;
            border-bottom: 1px solid rgba(0,0,0,.06);
}
.story-item-title {
            flex: 1; min-width: 0;
            font-size: 15px; color: #1e293b; line-height: 1.4;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.story-item:hover .story-item-title { color: var(--gm-primary); }
.story-item-date { font-size: 12px; color: #64748b; flex: 0 0 auto; }
/* 꿀팁 — 대표 사진이 늘 있으므로 썸네일을 살린다 */
.story-tip {
            display: flex; gap: 14px; align-items: center;
            padding: 12px 2px; text-decoration: none; color: inherit;
            border-bottom: 1px solid rgba(0,0,0,.06);
}
.story-tip-thumb {
            flex: 0 0 76px; width: 76px; height: 56px; border-radius: 8px;
            overflow: hidden; background: #f1f5f9;
}
.story-tip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-tip-body { min-width: 0; flex: 1; }
.story-tip-title {
            font-size: 15px; color: #1e293b; line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; word-break: break-word;
}
.story-tip:hover .story-tip-title { color: var(--gm-primary); }
.story-tip-date { margin-top: 5px; font-size: 12px; color: #64748b; }
/* 마지막 줄 밑에 선이 남으면 열이 끊긴 것처럼 보인다 */
.story-col > :last-child { border-bottom: 0; }
.story-empty { padding: 26px 0; font-size: 14px; color: #64748b; }
/* '가이드맨을 선택하는 이유' 섹션 숨김.
           마크업은 그대로 두었으니 이 한 줄만 지우면 다시 나온다. */
.why-section { display: none; }
@media (max-width: 900px) {
    .story-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

.yt-section {
            padding: 64px 0;
            background: #ffffff;
}
.yt-inner {
            max-width: var(--gm-main-w);
            margin: 0 auto;
            display: flex;
            gap: 48px;
            align-items: center;
            padding: 0 20px;
}
.yt-head { flex: 0 0 300px; }
.yt-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #dc2626;
            letter-spacing: 0.05em;
            text-transform: uppercase;
}
.yt-title {
            font-size: 32px;
            font-weight: 800;
            color: #0f172a;
            margin-top: 8px;
            line-height: 1.25;
            word-break: keep-all;
}
.yt-desc {
            font-size: 16px;
            color: #64748b;
            line-height: 1.6;
            margin-top: 16px;
            margin-bottom: 28px;
}
.yt-more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 14px 32px;
            border-radius: 100px;
            background: #dc2626;
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
            box-shadow: 0 4px 14px rgba(220,38,38,0.3);
}
.yt-more:hover {
            background: #b91c1c;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(220,38,38,0.35);
}
.yt-frame-wrap {
            flex: 1 1 auto;
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.10);
            background: #000;
}
.yt-frame-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
}
@media (max-width: 1024px) {
    .yt-inner { flex-direction: column; gap: 32px; align-items: stretch; }
    .yt-head { flex: 0 0 auto; text-align: center; }
}

@media (max-width: 768px) {
    .yt-section { padding: 60px 0; }
    .yt-title { font-size: 26px; }
}

/* ===== 실시간 견적요청 섹션 ===== */
.estimation-section {
            background: #fff;
            padding: 64px 0;
}
.estimation-inner {
            max-width: var(--gm-main-w);
            margin: 0 auto;
            display: flex;
            gap: 64px;
            align-items: flex-start;
            padding: 0 20px;
}
.estimation-cta { flex: 0 0 380px; }
.estimation-cta .cta-label {
            font-size: 14px;
            font-weight: 600;
            color: #dc2626;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 8px;
}
.estimation-cta .cta-title {
            font-size: 32px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 16px;
            line-height: 1.25;
            word-break: keep-all;
}
.estimation-cta .cta-desc {
            font-size: 16px;
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 32px;
}
.cta-select-wrap {
            position: relative;
            margin-bottom: 16px;
}
.cta-select-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gm-text-muted, #6e6e6e);
            font-size: 20px;
            pointer-events: none;
}
.cta-select-arrow {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gm-text-muted, #6e6e6e);
            pointer-events: none;
}
.cta-select {
            width: 100%;
            padding: 14px 44px 14px 44px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            font-size: 15px;
            appearance: none;
            background: #f8fafc;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
}
.cta-select:focus {
            border-color: #dc2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.cta-btns {
            display: flex;
            gap: 12px;
}
.cta-btns a,
.cta-btns button {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 0;
            font-weight: 600;
            font-size: 15px;
            border-radius: 16px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.btn-kakao-cta {
            background: #FEE500;
            color: #191919;
            box-shadow: 0 4px 14px rgba(254,229,0,0.25);
}
.btn-kakao-cta:hover { background: #F5DC00; transform: translateY(-2px); }
.btn-estimate-cta {
            background: #dc2626;
            color: #fff;
            box-shadow: 0 4px 14px rgba(220,38,38,0.3);
}
.btn-estimate-cta:hover { background: #b91c1c; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220,38,38,0.35); }
.estimation-table-wrap {
            flex: 1;
            background: #fff;
            border-radius: 20px;
            padding: 24px 32px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 12px 40px rgba(0,0,0,0.12);
            border: 1px solid rgba(0,0,0,0.06);
}
.estimation-table-wrap .table-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
}
.estimation-table-wrap .table-title {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            display: flex;
            align-items: center;
}
.estimation-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
}
.estimation-table thead tr { border-bottom: 2px solid #f1f5f9; }
.estimation-table th {
            padding: 12px 8px;
            color: var(--gm-text-muted, #6e6e6e);
            font-weight: 600;
            text-align: left;
}
.estimation-table th:nth-child(2) { text-align: center; }
.estimation-table th:last-child { text-align: right; }
.estimation-table td {
            padding: 14px 8px;
            border-bottom: 1px solid rgba(241,245,249,0.6);
            color: #334155;
            white-space: nowrap;
            text-align: left;
}
.estimation-table td:nth-child(2) { text-align: center; }
.estimation-table td:nth-child(3) { color: #0f172a; font-weight: 500; }
.estimation-table td:last-child { text-align: right; color: #64748b; }
.estimation-table tbody tr { transition: background-color 0.15s; }
.estimation-table tbody tr:hover { background-color: rgba(248,250,252,0.5); }
/* 배지는 반드시 td 안쪽 span 에만 건다.
           td 에 직접 display:inline-block 을 주면 셀이 테이블 레이아웃에서 빠져나가
           고정 열 너비(table-layout:fixed)를 따르지 않아 행마다 좌우로 어긋난다. */
.estimation-table .status-badge {
            display: inline-block;
            min-width: 68px;          /* 글자수가 달라도 배지 폭을 맞춰 세로줄이 흐트러지지 않게 */
            box-sizing: border-box;
            text-align: center;
            font-weight: 600;
            font-size: 13px;
            padding: 4px 12px;
            border-radius: 100px;
}
.estimation-table .status-done { color: #0891b2; background: #ecfeff; }
.estimation-table .status-ing { color: #ea580c; background: #fff7ed; }
/* ===== 실시간 공항 전광판 애니메이션 ===== */
.estimation-table { table-layout: fixed; }
.estimation-table thead { display: table; width: 100%; table-layout: fixed; }
.estimation-table tbody {
            display: block;
            height: 336px;
            overflow: hidden;
}
.estimation-table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: 44px;
}
@keyframes rowSlideIn {
            /* -44px 고정 대신 자기 높이(-100%) 기준 — 모바일에서 행 높이가 달라도 정확히 한 줄 위에서 내려온다 */
            0%   { opacity: 0; transform: translateY(-100%); background-color: #fffde7; }
            55%  { opacity: 1; transform: translateY(3px);   background-color: #fffde7; }
            100% { opacity: 1; transform: translateY(0);     background-color: transparent; }
}
.estimation-table tbody tr.row-in { animation: rowSlideIn 0.48s cubic-bezier(0.22,0.61,0.36,1) forwards; }
.live-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #ef4444;
            display: inline-block;
            margin-right: 8px;
            animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
            50%       { opacity: 0.6; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.more-link {
            font-size: 14px;
            color: var(--gm-text-muted, #6e6e6e);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
}
.more-link:hover { color: #dc2626; }
/* ===== 이벤트/지점소식 섹션 ===== */
.notice-area {
            max-width: 1200px;
            margin: 60px auto;
            display: flex;
            gap: 24px;
            padding: 0 20px;
}
.notice-area .box {
            flex: 1;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            padding: 24px;
            background: #fff;
}
.notice-area .box-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f0f0f0;
}
.notice-area .box-head .title {
            font-size: 18px;
            font-weight: 700;
            color: #111;
}
.notice-area .box-head .more-btn {
            font-size: 13px;
            color: var(--gm-text-sub,#555);
            text-decoration: none;
}
.notice-area .box-head .more-btn:hover { color: #0EADDD; }
.notice-area .box ul li {
            padding: 8px 0;
            border-bottom: 1px solid #f8f8f8;
            font-size: 16px;
            color: #444;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
}
.notice-area .box ul li:last-child { border-bottom: none; }
.notice-area .box ul li a {
            color: #444;
            text-decoration: none;
}
.notice-area .box ul li a:hover { color: #0EADDD; }
@media (max-width: 1024px) {
    .estimation-inner { flex-direction: column; gap: 40px; }
    .estimation-cta { flex: none; width: 100%; }
    .estimation-cta .cta-title { font-size: 30px; }
}

@media (max-width: 768px) {
    .estimation-section { padding: 60px 0; }
    .estimation-inner { max-width: 100%; }
    .estimation-cta .cta-title { font-size: 26px; }
    .estimation-cta .cta-desc { font-size: 14px; }
    .estimation-table-wrap { padding: 20px; border-radius: 16px; }
    .notice-area { max-width: 100%; }
    .notice-area .box { border-radius: 8px; }
    .estimation-table td { white-space: normal; }
    .estimation-table tbody { height: auto; overflow: visible; }
    #container,
    .latest-review-section,
    .story-section,
    .yt-section,
    .main-theme-section,
    .estimation-section,
    .ig-section,
    .why-section { padding: 44px 0; }
    .latest-review-title,
    .yt-title,
    .main-theme-title,
    .estimation-cta .cta-title,
    .ig-title,
    .why-title { font-size: 23px; line-height: 1.3; }
    .latest-review-label,
    .yt-label,
    .main-theme-label,
    .estimation-cta .cta-label,
    .ig-label,
    .why-label { font-size: 12px; }
    .latest-review-desc,
    .yt-desc,
    .main-theme-desc,
    .estimation-cta .cta-desc,
    .ig-desc,
    .why-desc { font-size: 14px; }
    .latest-review-head,
    .yt-head,
    .main-theme-head,
    .ig-head,
    .why-head { margin-bottom: 22px; }
    /* 가로 정렬 통일: 모든 섹션 콘텐츠 좌우 14px (ig는 .ig-section에서 처리) */
    .latest-review-inner,
    .story-inner,
    .yt-inner,
    .why-inner,
    .main-theme-section .main-theme-inner { padding-left: 14px; padding-right: 14px; }
    .main-theme-section .main-theme-head { padding-left: 0; padding-right: 0; }
    /* 가로 스크롤러라 padding-right는 쉬는 상태서 안 보임 → margin으로 스크롤 영역을 양옆에서 들여 대칭 여백 */
    .ig-head { padding-left: 0; padding-right: 0; }
    .lr-card { border-radius: 12px; }
    .lr-card-img { aspect-ratio: 4/3; }
    /* 16/9(작음) → 4/3 로 이미지 크게 */
    .lr-card-badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 9px; }
    .lr-card-body { padding: 9px 10px 10px; }
    /* 20px → 축소 */
    .lr-card-stars { display: none; }
    /* 별점 숨김 */
    .lr-card-title { font-size: 14px; margin-bottom: 3px; -webkit-line-clamp: 2; }
    .lr-card-text { font-size: 12px; -webkit-line-clamp: 2; margin-bottom: 7px; }
    .lr-card-footer { font-size: 11px; }
    .lr-card-author { font-size: 11px; }
    /* 견적 CTA: 모바일에선 회색 카드 배경/패딩 제거 → 다른 섹션과 동일하게 콘텐츠 흐름 */
    .estimation-cta { background: transparent; padding: 0; border-radius: 0; }
}


/* ───────── index-2 ───────── */
/* resources/views/shop/index.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.lightwidget-lightbox,
[class*="lightwidget"][class*="lightbox"],
[id*="lightwidget"][id*="lightbox"] { z-index: 999999 !important; }

/* ───────── partials/branch_map ───────── */
/* resources/views/shop/partials/branch_map.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
/* ── 메인 지점 지도 ─────────────────────────────────────────
   지도 그림은 <img>(브라우저가 캐시하고 페이지 HTML 이 무거워지지 않는다),
   핀은 그 위에 % 로 얹은 링크. 그림이 어떤 크기로 줄어도 핀은 제자리를 지킨다.

   지도를 가로로 늘려 화면을 채워봤더니 나라 모양이 심하게 퍼졌다.
   지도는 원래 비율대로 두고(오른쪽), 남는 가로 공간은 제목과 지점 목록이 채운다(왼쪽). */
.bmap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    grid-template-areas: "head map" "list map" "stats map";
    /* 제목·목록은 제 높이만. 남는 세로는 맨 아래 행이 받아 제목이 지도 위쪽에 맞춰 선다 */
    grid-template-rows: auto auto 1fr;
    column-gap: 56px; row-gap: 24px;
    align-content: start;
}
.bmap-canvas { grid-area: map; }
.bmap-head { grid-area: head; align-self: start; }
.bmap-side { grid-area: list; align-self: start; }
.bmap-canvas { position: relative; width: 100%; }
.bmap-img { display: block; width: 100%; height: 100%; border-radius: 16px; }
.bmap-pin { position: absolute; width: 0; height: 0; text-decoration: none; }
/* 눈에 보이는 핀은 작지만, 손가락이 닿는 영역은 넓게 잡는다 */
.bmap-hit {
    position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
    transform: translate(-50%, -50%); border-radius: 50%;
}
/* 물방울 핀. 뾰족한 끝이 실제 좌표를 가리킨다.
   transform-origin 을 그 끝(왼쪽 아래 모서리)에 두어, 돌리거나 키워도 끝이 안 움직인다. */
.bmap-dot {
    position: absolute; left: 50%; top: 50%;
    box-sizing: border-box;
    width: 17px; height: 17px;
    background: var(--gm-red);
    /* 나라 색이 밝고 다양해서 핀만으로는 묻힌다. 흰 테두리로 어느 색 위에서도 떨어져 보이게 한다 */
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform-origin: 0 100%;
    transform: translate(0, -100%) rotate(-45deg);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
    transition: transform .15s;
}
.bmap-dot::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: #fff; border-radius: 50%;
}
.bmap-pin:hover .bmap-dot,
.bmap-pin.is-on .bmap-dot { transform: translate(0, -100%) rotate(-45deg) scale(1.3); }
.bmap-name {
    position: absolute; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255,255,255,.92); color: #1e293b;
    font-size: 13px; line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
/* 지점명 붙는 방향 — 지도 가장자리 지점은 안쪽으로 돌려 잘리지 않게 한다.
   핀이 좌표 위로 솟아 있으므로 이름도 핀 머리 높이에 맞춰 올린다. */
/* --bm-lx/ly 는 그 지점만 이름을 더 밀어내는 값(config 의 label). 핀은 안 움직인다. */
.bmap-pin[data-dir="r"] .bmap-name { left: 11px;  top: 50%; transform: translate(var(--bm-lx, 0px), calc(-50% - 9px + var(--bm-ly, 0px))); }
.bmap-pin[data-dir="l"] .bmap-name { right: 11px; top: 50%; transform: translate(var(--bm-lx, 0px), calc(-50% - 9px + var(--bm-ly, 0px))); }
.bmap-pin[data-dir="t"] .bmap-name { left: 50%; bottom: 26px; transform: translate(calc(-50% + var(--bm-lx, 0px)), var(--bm-ly, 0px)); }
.bmap-pin[data-dir="b"] .bmap-name { left: 50%; top: 6px;     transform: translate(calc(-50% + var(--bm-lx, 0px)), var(--bm-ly, 0px)); }
.bmap-pin:hover .bmap-name,
.bmap-pin.is-on .bmap-name { background: var(--gm-red); color: #fff; }
/* 왼쪽 칸 — 섹션 제목과 지점 목록이 들어간다.
   흐린 글자색은 #64748b 아래로 내리지 않는다(그 아래는 흰 배경 대비 4.5:1 미달).

   지점명은 둥근 버튼(칩)으로 만들지 않는다. 나라별 한 줄에 지도와 같은 핀을 달아
   지도와 목록이 같은 표기를 쓰게 한다. */
.bmap-head { margin-bottom: 0; }
/* 설명 줄바꿈 — 좁은 화면에서는 흐름대로 접히게 둔다 */
.bmap-br { display: none; }
@media (min-width: 1024px) {
    .bmap-br { display: inline; }
}

/* 연차·나라 수·지점 수 — 지도가 말하는 '규모'를 숫자로 받쳐 준다 */
.bmap-stats { grid-area: stats; align-self: start; display: flex; gap: 30px; margin-top: 6px; }
.bmap-stat strong { font-size: 26px; font-weight: 800; color: var(--gm-red); line-height: 1; }
.bmap-stat span { font-size: 14px; color: var(--gm-red); margin-left: 1px; }
.bmap-stat em { display: block; font-style: normal; font-size: 13px; color: #64748b; margin-top: 5px; }
.bmap-row {
    display: flex; gap: 20px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid #eef2f6;
}
.bmap-side > .bmap-row:last-child { border-bottom: 0; }
.bmap-country {
    flex: 0 0 84px;
    font-size: 15px; font-weight: 700; color: #1e293b; margin: 0;
}
.bmap-places { display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.bmap-place {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 15px; color: #334155; text-decoration: none;
    transition: color .15s;
}
/* 지도의 핀과 같은 모양을 작게 */
.bmap-place-pin {
    flex: 0 0 auto; width: 9px; height: 9px;
    background: var(--gm-red);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}
.bmap-place:hover,
.bmap-place.is-on { color: var(--gm-red); }
@media (max-width: 1023px) {
    /* 좁아지면 제목 → 지도 → 목록 순으로 세운다.
       그리드째로 쓰면 gap 이 나라 이름과 지점명 사이까지 벌려 놓는다(실제로 그랬다).
       위아래 간격은 형제 셋 사이에만 준다.

       align-self 는 반드시 되돌린다. PC 그리드에서는 세로 정렬이지만
       세로 배치에서는 가로 정렬이 되어 제목이 오른쪽으로 밀린다(실제로 그랬다). */
    .bmap { display: flex; flex-direction: column; gap: 22px; }
    .bmap-head { order: 1; align-self: stretch; }
    .bmap-canvas { order: 2; max-width: 520px; margin: 0 auto; }
    .bmap-side { order: 3; align-self: stretch; }
    .bmap-stats { order: 4; margin-top: 0; }
}

@media (max-width: 767px) {
    /* #container 가 모바일에서 좌우 패딩이 없다. 지도는 화면 끝까지, 글자만 들여쓴다. */
    .bmap { gap: 18px; }
    .bmap-head,
    .bmap-side,
    .bmap-stats { padding-left: 14px; padding-right: 14px; }
    .bmap-stats { gap: 22px; }
    .bmap-stat strong { font-size: 22px; }
    .bmap-canvas { max-width: 100%; }
    .bmap-img { border-radius: 0; }
    .bmap-row { gap: 14px; padding: 12px 0; }
    .bmap-country { flex-basis: 68px; font-size: 14px; }
    .bmap-place { font-size: 14px; }
    .bmap-places { gap: 7px 16px; }
    /* 지도가 작아지는 만큼 지점명도 줄인다. 필리핀 쪽 네 곳이 가장 빡빡하다. */
    .bmap-dot { width: 14px; height: 14px; border-width: 1.5px; }
    .bmap-name { font-size: 11px; padding: 2px 7px; }
    .bmap-pin[data-dir="r"] .bmap-name { left: 9px;  transform: translate(var(--bm-lx, 0px), calc(-50% - 7px + var(--bm-ly, 0px))); }
    .bmap-pin[data-dir="l"] .bmap-name { right: 9px; transform: translate(var(--bm-lx, 0px), calc(-50% - 7px + var(--bm-ly, 0px))); }
    .bmap-pin[data-dir="t"] .bmap-name { bottom: 21px; }
    .bmap-pin[data-dir="b"] .bmap-name { top: 5px; }
}