/* ============================================================
   marker_top.css  —  a_place TOP(grade) 커스텀 박스 마커
   bot_map.php 에서 markerType === "top" 인 경우 적용
   ============================================================ */

/* ── 1. 전체 래퍼 ────────────────────────────────────────── */
.tspl-place-marker {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    /*
     * drop-shadow 를 쓰면 박스 + 화살표 전체에
     * 하나의 통합 그림자가 자연스럽게 적용됨
     */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.20));
    transition: filter 0.13s ease, transform 0.13s ease;
}

.tspl-place-marker:hover {
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.30));
    transform: translateY(-2px);
    z-index: 100;
}

.tspl-place-marker:active {
    transform: translateY(0);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.20));
}


/* ── 2. 박스 — 컴팩트 사이즈 ──────────────────────────── */
.tspl-place-marker__box {
    background: #ffffff;
    border: 1.5px solid #3d5a80;
    border-radius: 6px;
    padding: 4px 7px 5px;            /* 5px 10px 6px → 4px 7px 5px (좌우 -3px) */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;

    min-width: 48px;                 /* 54 → 48 */
    max-width: 130px;                /* 140 → 130 */
    box-sizing: border-box;
}


/* ── 3. type (작은 레이블, 위) ──────────────────────────── */
.tspl-place-marker__type {
    font-size: 9px;                  /* 9.5 → 9 */
    font-weight: 600;
    color: #3d5a80;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0.90;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ── 4. title (메인 텍스트, 아래) ───────────────────────── */
.tspl-place-marker__title {
    font-size: 11.5px;               /* 13 → 11.5 (업체명 글자 줄임) */
    font-weight: 800;
    color: #1a202c;
    letter-spacing: -0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 118px;                /* 128 → 118 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', '맑은 고딕',
                 'Noto Sans KR', sans-serif;
}


/* ── 5. 화살표 (외곽선과 자연스럽게 연결) ──────────────── */
/*
 * 원리: 이중 삼각형 기법
 *   - 바깥 삼각형(::arrow 자체): border 색상(#3d5a80)
 *   - 안쪽 삼각형(::after):      흰색(#fff), border-width(1.5px) 만큼 inset
 *   → 두 삼각형의 끝점이 정확히 일치해 박스 테두리와 이음새 없이 연결됨
 *
 * 수치 계산 (border-top 기준 하향 삼각형):
 *   outer  half-width = 8px, height = 8px
 *   inner  half-width = 6.5px, height = 6.5px  (각 1.5px 씩 inset)
 *   inner top offset  = +1.5px (inner base 를 1.5px 아래로 내리면
 *                        outer·inner 의 팁이 동일 좌표에 맞춰짐)
 */
.tspl-place-marker__arrow {
    width: 0;
    height: 0;
    border-left:  8px solid transparent;
    border-right: 8px solid transparent;
    border-top:   8px solid #3d5a80;

    margin-top: -1px;     /* box 하단 border 와 1px 겹쳐 이음새 제거 */
    align-self: center;
    position: relative;
    flex-shrink: 0;
}

.tspl-place-marker__arrow::after {
    content: '';
    position: absolute;
    top:  1.5px;  /* border-width 만큼 아래로 → 팁 좌표 일치 */
    left: 0;      /* 0 × 0 기준점 → 삼각형 자동 중앙 정렬    */
    border-left:  6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-top:   6.5px solid #ffffff;
}


/* ── 6. 선택(포커스) 상태 ──────────────────────────────── */
.tspl-place-marker:focus-visible {
    outline: none;
}

.tspl-place-marker:focus-visible .tspl-place-marker__box {
    border-color: #2563eb;
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}


/* ── 7. 활성(강조) 클래스 – JS 에서 .is-active 추가 시 ── */
.tspl-place-marker.is-active .tspl-place-marker__box {
    background: #3d5a80;
    border-color: #3d5a80;
}

.tspl-place-marker.is-active .tspl-place-marker__type {
    color: rgba(255, 255, 255, 0.75);
}

.tspl-place-marker.is-active .tspl-place-marker__title {
    color: #ffffff;
}

.tspl-place-marker.is-active .tspl-place-marker__arrow {
    border-top-color: #3d5a80;
}

.tspl-place-marker.is-active .tspl-place-marker__arrow::after {
     display: none;
}

.tspl-place-marker--massage .tspl-place-marker__box,
.tspl-place-marker.is-active.tspl-place-marker--massage .tspl-place-marker__box {
    background: linear-gradient(135deg, #C43D7D 0%, #A91F62 100%);
    border-color: #8E174F;
    color: #fff;
    box-shadow: 0 8px 22px rgba(169, 31, 98, 0.34);
}

.tspl-place-marker--massage .tspl-place-marker__type,
.tspl-place-marker.is-active.tspl-place-marker--massage .tspl-place-marker__type {
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 1px 5px;
}

.tspl-place-marker--massage .tspl-place-marker__title,
.tspl-place-marker.is-active.tspl-place-marker--massage .tspl-place-marker__title {
    color: #fff;
}

.tspl-place-marker--massage .tspl-place-marker__arrow,
.tspl-place-marker.is-active.tspl-place-marker--massage .tspl-place-marker__arrow {
    border-top-color: #8E174F;
}

.tspl-place-marker--massage .tspl-place-marker__arrow::after,
.tspl-place-marker.is-active.tspl-place-marker--massage .tspl-place-marker__arrow::after {
    display: none;
}