/* ── 페이지 래퍼 ── */
      .guidemap-wrap {
        display: flex;
        flex-direction: column;
            padding-bottom: 205px;
      }
      
      .guidemap-wrap.service .title{    max-width: 1280px;
    padding-left: 0;
    margin: 0 auto 50px;
    width: 100%;}

      /* ── 타이틀 영역 ── */
      .guidemap-header {
        padding: 100px 270px 50px;
        border-bottom: 1px solid #e6e6e6;
      }
      .guidemap-header h2 {
        font-size: 40px;
        font-weight: 500;
        margin-bottom: 10px;
        color: #1a1208;
      }
      .guidemap-header p {
        font-size: 18px;
        color: rgba(26,18,8,0.55);
        line-height: 1.6;
      }

      /* ── 본문 (지도 + 사이드) ── */
      .guidemap-body {
        display: flex;
        align-items: stretch;
            max-width: 1280px;
    margin: auto;
      }

      /* ── 좌측 지도 영역 ── */
      .guidemap-map {
        flex: 1;
        min-width: 0;
        position: relative;
        background: #f5f1ec;
        overflow: visible;
      }
      .guidemap-map__img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* ── 핀 오버레이 (inset:0 이미지에 정확히 매칭) ── */
      #gm-total{font-size:12px;}
      .guidemap-pins {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .gm-pin {
        position: absolute;
        transform: translate(-50%, -100%);
        pointer-events: all;
        cursor: pointer;
        z-index: 5;
      }
      .gm-pin__dot {
        width: 28px;
        height: 28px;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(0,0,0,0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        background: #f3efbb;
      }
      .gm-pin__dot::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(255,255,255,0.2);
        opacity: 0;
        transition: opacity 0.2s;
      }
      .gm-pin__emoji {
        transform: rotate(45deg);
        font-size: 13px;
        line-height: 1;
        display: block;
      }
      /* 카테고리별 핀 색상 */
      .gm-pin[data-cat="room"] .gm-pin__dot { background: #7cc437; }
      .gm-pin[data-cat="leisure"] .gm-pin__dot { background: #c0542a; }
      .gm-pin[data-cat="facility"].gm-pin__dot { background: #3a5a8a; }
      .gm-pin[data-cat="parking"] .gm-pin__dot { background: #f0c310; }
      /* 핀 호버 */
      .gm-pin:hover .gm-pin__dot,
      .gm-pin.active .gm-pin__dot {
        transform: rotate(-45deg) scale(1.25);
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
      }
      .gm-pin.active .gm-pin__dot::after { opacity: 1; }
      /* 핀 펄스 애니메이션 */
      .gm-pin.pulse::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 28px; height: 28px;
        border-radius: 50%;
        background: currentColor;
        transform: translate(-50%, -50%);
        animation: pinPulse 0.6s ease-out forwards;
        opacity: 0.5;
        z-index: -1;
      }
      .gm-pin[data-cat="room"].pulse::before    { color: #4a7c59; }
      .gm-pin[data-cat="leisure"].pulse::before { color: #c0542a; }
      .gm-pin[data-cat="facility"].pulse::before{ color: #3a5a8a; }
      .gm-pin[data-cat="parking"].pulse::before { color: #7a6a2a; }
      @keyframes pinPulse {
        0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.5; }
        100% { transform: translate(-50%,-50%) scale(3);  opacity: 0; }
      }

      /* ── 핀 툴팁 ── */
      .gm-pin__tooltip {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        background: #1a1208;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: 6px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        letter-spacing: 0.02em;
      }
      .gm-pin__tooltip::after {
        content: '';
        position: absolute;
        top: 100%; left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1a1208;
      }
      .gm-pin:hover .gm-pin__tooltip,
      .gm-pin.active .gm-pin__tooltip {
        opacity: 1;
      }

      /* ── 지도 플레이스홀더 ── */
      .guidemap-map__placeholder {
        width: 100%;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        color: rgba(26,18,8,0.3);
      }
      .guidemap-map__placeholder svg { opacity: 0.25; }
      .guidemap-map__placeholder p { font-size: 14px; letter-spacing: 0.04em; }

      /* ── 우측 사이드바 (sticky) ── */
      .guidemap-side {
        width: 450px;
        flex-shrink: 0;
        border: 1px solid #e6e6e6;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 80px;
        height: calc(100vh - 80px);
        max-height: 100%;
        overflow: hidden;
      }

      /* Overview 라벨 */
      .guidemap-overview {
        padding: 24px 28px 0;
        flex-shrink: 0;
      }
      .guidemap-overview__btn {
        display: inline-block;
        padding: 9px 22px;
        background: #2d1f14;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        border-radius: 4px;
        border: none;
        cursor: default;
      }

      /* 카테고리 필터 */
      .guidemap-filter {
        padding: 18px 28px 18px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
        border-bottom: 1px solid #e6e6e6;
      }
      .guidemap-filter__btn {
        padding: 6px 15px;
        border-radius: 999px;
        border: 1px solid #e0dbd4;
        background: #fff;
        font-size: 12px;
        font-weight: 500;
        color: rgba(26,18,8,0.5);
        cursor: pointer;
        transition: all 0.18s ease;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .guidemap-filter__btn .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(26,18,8,0.08);
        font-size: 11px;
        font-weight: 700;
        color: rgba(26,18,8,0.5);
        transition: all 0.18s;
      }
      .guidemap-filter__btn.active {
        background: #2d1f14;
        border-color: #2d1f14;
        color: #fff;
        font-weight: 600;
      }
      .guidemap-filter__btn.active .badge {
        background: rgba(255,255,255,0.2);
        color: #fff;
      }
      .guidemap-filter__btn:hover:not(.active) {
        border-color: #2d1f14;
        color: #2d1f14;
      }

      /* Total 카운트 */
      .guidemap-total {
        padding: 14px 28px 6px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(26,18,8,0.4);
        letter-spacing: 0.03em;
        flex-shrink: 0;
      }

      /* 시설 리스트 */
      .guidemap-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 16px 40px;
      }
      .guidemap-list::-webkit-scrollbar { width: 3px; }
      .guidemap-list::-webkit-scrollbar-track { background: transparent; }
      .guidemap-list::-webkit-scrollbar-thumb { background: rgba(26,18,8,0.12); border-radius: 2px; }

      .guidemap-item {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 12px;
        border-radius: 10px;
        border-bottom: 1px solid #f0ece6;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.15s ease;
        position: relative;
      }
      .guidemap-item:last-child { border-bottom: none; }
      .guidemap-item:hover {
        background: #faf8f5;
      }
      .guidemap-item.highlighted {
        background: #fdf5ec;
        border-color: transparent;
        box-shadow: 0 0 0 1.5px #c88a5c inset;
      }
      .guidemap-item.highlighted .guidemap-item__name {
        color: #7a3a10;
      }

      .guidemap-item__num {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #e8e1d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        color: rgba(26,18,8,0.5);
        transition: background 0.15s, color 0.15s;
      }
      .guidemap-item.highlighted .guidemap-item__num {
        background: #2d1f14;
        color: #fff;
      }

      .guidemap-item__icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 10px;
        background: #f0ece6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        transition: background 0.15s;
      }
      .guidemap-item.highlighted .guidemap-item__icon {
        background: #ede0d0;
      }

      .guidemap-item__info {
        flex: 1;
        min-width: 0;
      }
      .guidemap-item__name {
        font-size: 14px;
        font-weight: 600;
        color: #1a1208;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.15s;
      }
      .guidemap-item__desc {
        font-size: 11px;
        color: rgba(26,18,8,0.4);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .guidemap-item__arrow {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.15s, transform 0.15s;
        color: #c88a5c;
      }
      .guidemap-item__arrow svg { width: 100%; height: 100%; }
      .guidemap-item:hover .guidemap-item__arrow,
      .guidemap-item.highlighted .guidemap-item__arrow {
        opacity: 1;
        transform: translateX(2px);
      }

      /* 리스트 아이템 flash 애니메이션 */
      @keyframes itemFlash {
        0%   { background: #fcecd8; }
        50%  { background: #fdf5ec; }
        100% { background: #fdf5ec; }
      }
      .guidemap-item.flash {
        animation: itemFlash 0.5s ease forwards;
      }

      /* ── 범례 ── */
      .guidemap-legend {
        padding: 14px 28px 18px;
        border-top: 1px solid #e6e6e6;
        flex-shrink: 0;
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      .guidemap-legend__item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: rgba(26,18,8,0.38);
        cursor: pointer;
        padding: 5px 11px;
        border-radius: 999px;
        background: transparent;
        transition: color 0.18s ease, background 0.18s ease;
        user-select: none;
      }
      .guidemap-legend__item:hover {
        color: rgba(26,18,8,0.65);
        background: rgba(26,18,8,0.04);
      }
      .guidemap-legend__item.active {
        color: rgba(26,18,8,0.85);
        font-weight: 600;
        background: rgba(26,18,8,0.06);
      }
      .guidemap-legend__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        pointer-events: none;
        transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
        opacity: 0.55;
      }
      .guidemap-legend__item.active .guidemap-legend__dot {
        width: 10px;
        height: 10px;
        opacity: 1;
      }

      /* ── 반응형 ── */
     
      @media screen and (max-width: 1380px) {
      .guidemap-wrap {width:90%;margin:auto;}
      }
      @media screen and (max-width: 1200px) {
        .guidemap-header { padding: 80px 60px 50px; }
        .guidemap-side { width: 300px; }
      }
      @media screen and (max-width: 900px) {
      
        .guidemap-header { padding: 70px 24px 40px; }
        .guidemap-header h2 { font-size: 28px; }
        .guidemap-body { flex-direction: column; }
        .guidemap-map {
          width: 100%;
        }
        .guidemap-side {
          width: 100%;
          position: static;
          height: 700px;
          max-height: none;
          border-left: none;
          border-right: none;
          border-top: 1px solid #e6e6e6;
        }
        .guidemap-list { max-height: none; min-height: 0;         padding: 0 0 40px;}
        .guidemap-filter {padding: 18px 0px 18px;}
        .guidemap-overview {padding: 24px 0px 0;}
        .gm-pin__emoji{font-size:10px;}
        .gm-pin__dot {width: 20px;height: 20px;}
      }