@charset "utf-8";

/* ========================================
   홈 — 세계지도
   상세 디자인 확정 전, 기능 동작에 필요한 골격 스타일.
======================================== */

/* 지도 페이지는 화면을 꽉 채우는 앱형 레이아웃 — 페이지 스크롤을 잠그고
   지도 뷰포트(.map-viewport)만 스크롤(팬)되게 한다. */
html,
body {
    height: 100dvh;
}

body {
    overflow: hidden;
}

#wrap {
    flex: 1 1 auto;   /* layout.css의 1 0 auto는 내용만큼 늘어나므로 축소 허용으로 덮어쓴다 */
    min-height: 0;
}

/* ── 헤더 광고 자리를 50px로 못박는다 (지도 페이지 전용) ──
   이 페이지는 100dvh 고정 높이 앱 셸이라, 광고 높이가 흔들리면 그만큼 지도가 잘린다.
   body의 flex item은 .ads_wrap 이 아니라 이 section 이므로 여기에 걸어야 한다.
   flex-basis로 못박으면 애드센스가 광고를 어떤 크기로 부풀리든 지도 높이가 항상 같다.
   높이 값은 config/reset_head_config.php 의 ad_slot_heights['main_sm'] = 50 과 짝이다.

   overflow:hidden 은 일부러 쓰지 않았다 — 광고를 잘라내는 건 애드센스 정책 위반이다.
   애드센스가 50px보다 큰 광고를 내리면 지도 위로 넘쳐 보이는데, 그건 콘솔에서
   광고 크기를 잡으라는 신호지 CSS로 덮어서 숨길 문제가 아니다. */
.header-ad-sec {
    flex: 0 0 5rem;
    /* flex item 기본값 min-height:auto 는 콘텐츠(광고) 크기 아래로 못 줄어들게 막아
       flex-basis를 무력화한다. 0으로 풀어야 50px이 실제로 지켜진다. */
    min-height: 0;
}

.main-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.map-sec {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── 지도 뷰포트 (스와이프/드래그 팬 = 스크롤) ── */
.map-viewport {
    flex: 1;
    /* 하한을 두면 공간이 모자랄 때 지도가 뷰포트를 넘어 탭바를 덮는다(측정: 광고 375px에서 135px 침범).
       광고 자리가 위에서 50px로 고정됐으므로 하한 없이 남는 공간을 그대로 쓰는 게 안전하다. */
    min-height: 0;
    overflow: auto;
    background: #0A193A; /* 지도 이미지 바탕색 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.map-viewport::-webkit-scrollbar {
    display: none;
}

.map-viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* 캔버스 배율: Figma 기준 뷰포트 720px에서 원본(4096px) 배율 1.
   width = 4096/720 × 100vw, 상한은 768px 뷰포트 배율(4096×768/720). */
.map-canvas {
    position: relative;
    width: min(568.8889vw, 436.9rem);
}

.map-canvas__img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── 국기 핀 ── */
.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--size-pin);
    height: var(--size-pin);
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #C9C9C9;
    box-shadow: var(--shadow-pin);
    cursor: pointer;
    overflow: visible;
}

.map-pin img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}

/* 선택된 핀 — 붉은 섀도우 active 효과 */
.map-pin.is-active {
    z-index: 2;
    border: 4px solid transparent;
    box-sizing: content-box;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            138.3deg,
            #de668d 2.57%,
            #a060d6 97.43%
        ) border-box;
    box-shadow:
        0 0 18px 6px rgba(255, 107, 107, 0.55);
    overflow: hidden;
}

.map-pin.is-active::before {
    content: "";
    position: absolute;
    inset: -55%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.5) 0%, rgba(255, 107, 107, 0) 70%);
    animation: map-pin-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes map-pin-pulse {
    0%, 100% { opacity: 0.7; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* ── 지도 위 오버레이 (날짜 + 타이틀 + 검색) ──
   지도(.map-viewport) 위에 절대배치. 상단 그라디언트로 글자 가독성 확보.
   빈 영역은 pointer-events: none 으로 지도 팬을 막지 않고, 검색만 auto 로 되살린다. */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding-top: calc(var(--safe-top) + clamp(3.6854rem, 15.1042vw, 11.6rem));
    padding-bottom: var(--space-50);
    background: var(--gradient-map-overlay);
    pointer-events: none;
}

.map-overlay__inner {
    max-width: var(--inner-max-width);
    margin-inline: auto;
    padding-inline: max(var(--inner-padding-x), var(--safe-left));
    display: flex;
    flex-direction: column;
    gap: var(--space-33);
}

/* 날짜 eyebrow + 타이틀 */
.map-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
}

.map-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-10);
    font-size: var(--fs-19);
    line-height: 1;
}

.map-header__date {
    font-weight: 800;
    color: #FFFFFF;
}

.map-header__desc {
    font-weight: 400;
    color: var(--color-text-on-image);
}

.map-header__star {
    flex: 0 0 auto;
    width: clamp(1.2rem, calc(0.9672rem + 0.9542vw), 1.7rem);
    height: auto;
}

.map-header__title {
    font-size: var(--fs-40);
    font-weight: 800;
    line-height: var(--lh-base);
    color: #FFFFFF;
}

.map-search-group {
    pointer-events: auto;
}

.map-search {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-15) var(--space-20);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-20);
    background: var(--color-glass);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.map-search__submit,
.map-search__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon);
    height: var(--size-icon);
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: var(--fs-25);
    line-height: 1;
    cursor: pointer;
    width: var(--space-33);
    height: var(--space-33);
}

.map-search__submit span,
.map-search__clear span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-search__submit span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-search__clear {
    background: rgba(255, 255, 255, 0.35);
}

/* 검색어가 없을 때는 JS의 hidden 상태가 display 규칙보다 우선한다. */
.map-search__clear[hidden] {
    display: none !important;
}

.map-search__clear span {
    color: #fff;
}

.map-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: var(--fs-21);
    outline: none;
    font-family: 'Tmoney RoundWind';
    font-size: var(--fs-20);
}

.map-search__input::placeholder {
    color: var(--color-text-on-image);
}

.map-search__input::-webkit-search-cancel-button {
    display: none; /* 기본 × 대신 커스텀 clear 버튼 사용 */
}

/* 검색 결과 없음 안내 카드 */
.map-no-result {
    display: flex;
    align-items: center;
    gap: var(--space-14);
    margin-top: var(--space-19);
    padding: var(--space-25) var(--space-22);
    border-radius: var(--radius-20);
    background: var(--color-bg);
    box-shadow: var(--shadow-card);
    pointer-events: auto;
    display: none;
}
.map-no-result.show {
    display: flex;
}

.map-no-result__icon {
    width: var(--space-27);
    height: var(--space-27);
    flex-shrink: 0
}

.map-no-result__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.map-no-result__title {
    display: block;
    font-size: var(--fs-21);
    font-weight: 800;
    color: var(--color-text);
}

.map-no-result__desc {
    margin-top: var(--space-10);
    font-weight: 400;
    font-size: var(--fs-19);
    color: var(--color-text-sub);
}

/* ── 하단 힌트 문구 ── */
.map-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-25);
    z-index: 4;
    text-align: center;
    font-size: var(--fs-19);
    color: var(--color-text-on-image);
    pointer-events: none;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.map-hint .icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--space-100);
    height: var(--space-100);
    border-radius: var(--space-27);
    background: linear-gradient(138.02deg, #E86883 2.37%, #955FE2 97.63%);
    box-shadow: 0px 14px 42px 0px #FF6B6B5C;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-20);
    font-weight: 400;
    transform: translateX(calc(100% + 1rem));
    animation: bobbing 2s ease-in-out infinite;
    will-change: transform;
    border: 0;
    outline: 0;
    /* .map-hint의 pointer-events: none을 해제해 룰렛 버튼은 클릭 가능하게 한다. */
    pointer-events: auto;
    gap: 0.4rem
}   

.map-hint .icon img {
    width: var(--space-40);
    height: var(--space-40);
    object-fit: cover;
}

@media (max-width: 450px) {
    .map-hint {
        font-size: 12px
    }

    .map-hint .icon {
        width: var(--space-60);
        height: var(--space-60);
        border-radius: var(--space-19);
        font-size: 10px;
        gap: 0.1rem
    }

    .map-hint .icon img {
        width: 2rem;
        height: 2rem
    }
}

@keyframes bobbing {
    0%,
    100% {
        transform: translateY(0) translateX(calc(100% + 1rem));
    }

    50% {
        transform: translateY(-4px) translateX(calc(100% + 1rem));
    }
}