@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* =========================================================
   :root — 공통 디자인 토큰
   ========================================================= */
:root {
    /* 색상 · 브랜드 */
    --color-primary: #0b5ed7;
    --color-primary-bg: #f3f8ff;
    --color-primary-soft: #e3f0ff;

    /* 색상 · 글자 */
    --color-text: #1f2124;
    --color-text-secondary: #484a4e;
    --color-text-sub: #68696f;
    --color-text-placeholder: #a9acb1;
    --color-text-inverse: #ffffff;

    /* 색상 · 아이콘 */
    --color-icon: #68696f;

    /* 색상 · 배경 */
    --color-bg: #ffffff;
    --color-bg-gray: #f5f6f7;
    --color-bg-tile: #eef0f3;
    --color-bg-page: #eef0f3;

    /* 색상 · 선 */
    --color-border: #e5e5e5;
    --color-border-strong: #d4d6da;
    --color-divider: #eef0f3;

    /* 색상 · 상태 */
    --color-success: #0b7a43;
    --color-success-icon: #1e7b3c;
    --color-success-bg: #e6f7ee;
    --color-danger: #c62828;
    --color-warning: #b54708;
    --color-warning-bg: #fff4e0;
    --color-error: #b42318;
    --color-error-bg: #fdecec;

    /* 색상 · 덮개 · 그림자 */
    --color-scrim: rgba(31, 33, 36, 0.5);
    --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-sheet: 0 -4px 16px rgba(0, 0, 0, 0.1);

    /* 글꼴 */
    --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* 글자 크기 배율 (보통 1 · 크게 · 아주 크게) */
    --font-scale: 1;

    /* 글자 크기 */
    --fs-11: calc(11px * var(--font-scale));
    --fs-12: calc(12px * var(--font-scale));
    --fs-13: calc(13px * var(--font-scale));
    --fs-14: calc(14px * var(--font-scale));
    --fs-15: calc(15px * var(--font-scale));
    --fs-16: calc(16px * var(--font-scale));
    --fs-17: calc(17px * var(--font-scale));
    --fs-18: calc(18px * var(--font-scale));
    --fs-20: calc(20px * var(--font-scale));
    --fs-22: calc(22px * var(--font-scale));
    --fs-24: calc(24px * var(--font-scale));

    /* 줄 높이 */
    --lh-17: calc(17px * var(--font-scale));
    --lh-18: calc(18px * var(--font-scale));
    --lh-20: calc(20px * var(--font-scale));
    --lh-21: calc(21px * var(--font-scale));
    --lh-22: calc(22px * var(--font-scale));
    --lh-24: calc(24px * var(--font-scale));
    --lh-26: calc(26px * var(--font-scale));
    --lh-28: calc(28px * var(--font-scale));
    --lh-32: calc(32px * var(--font-scale));

    /* 간격 */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;

    /* 모서리 */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-full: 999px;

    /* 크기 */
    --app-width: 480px;
    --page-padding: var(--space-20);
    --touch-size: 48px;
    --button-height-lg: 56px;
    --button-height-md: 44px;
    --icon-xs: 16px;
    --icon-sm: 20px;
    --icon-md: 24px;
}

:root[data-font-size="large"] { --font-scale: 1.15; }
:root[data-font-size="xlarge"] { --font-scale: 1.3; }

/* =========================================================
   Reset
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =========================================================
   앱 틀
   ========================================================= */
#wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--app-width);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--color-bg);
}

.content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-28);
    padding: var(--space-12) var(--page-padding) var(--space-24);
}

/* 탭바 */
.tab-bar {
    display: flex;
    padding: var(--space-8) 0 var(--space-6);
    border-top: 1px solid var(--color-divider);
    background: var(--color-bg);
}

.tab-bar__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-12);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text-sub);
}

.tab-bar__item.is-active {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* =========================================================
   아이콘 — /image 의 svg를 마스크로 써서 currentColor로 색 지정
   ========================================================= */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-size, var(--icon-md));
    height: var(--icon-size, var(--icon-md));
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.icon--xs { --icon-size: var(--icon-xs); }
.icon--sm { --icon-size: var(--icon-sm); }

.icon--home { --icon-url: url("../image/home.svg"); }
.icon--calendar { --icon-url: url("../image/calendar.svg"); }
.icon--time { --icon-url: url("../image/time.svg"); }
.icon--settings { --icon-url: url("../image/settings.svg"); }
.icon--microphone { --icon-url: url("../image/microphone.svg"); }
.icon--chevron-right { --icon-url: url("../image/chevron--right.svg"); }
.icon--checkmark { --icon-url: url("../image/checkmark.svg"); }
.icon--speak { --icon-url: url("../image/select-to-speak.svg"); }
.icon--chevron-left { --icon-url: url("../image/chevron--left.svg"); }
.icon--search { --icon-url: url("../image/search.svg"); }
.icon--microphone-01 { --icon-url: url("../image/microphone-01.svg"); }
.icon--map { --icon-url: url("../image/map.svg"); }
.icon--recently-viewed { --icon-url: url("../image/recently-viewed.svg"); }
.icon--location-current { --icon-url: url("../image/tabler_current-location.svg"); }
.icon--checkmark-outline { --icon-url: url("../image/checkmark--outline.svg"); }
.icon--location-star { --icon-url: url("../image/location--star.svg"); }
.icon--information { --icon-url: url("../image/information.svg"); }
.icon--arrow-left { --icon-url: url("../image/arrow--left.svg"); }
.icon--user { --icon-url: url("../image/user.svg"); }
.icon--current-location { --icon-url: url("../image/current-location.svg"); }
.icon--chevron-down { --icon-url: url("../image/chevron--down.svg"); }
.icon--notification { --icon-url: url("../image/notification.svg"); }
.icon--warning { --icon-url: url("../image/warning.svg"); }
.icon--send { --icon-url: url("../image/send--alt.svg"); }
.icon--location { --icon-url: url("../image/location.svg"); }
.icon--chat { --icon-url: url("../image/chat.svg"); }
.icon--phone { --icon-url: url("../image/phone.svg"); }
.icon--more { --icon-url: url("../image/overflow-menu--horizontal.svg"); }
.icon--hand { --icon-url: url("../image/hand.svg"); }

.icon--lg { --icon-size: 32px; }

/* =========================================================
   공통 컴포넌트
   ========================================================= */

/* 큰 버튼 */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    min-height: var(--button-height-lg);
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    font-size: var(--fs-17);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-24);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn--outline {
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
}

/* 글자만 있는 버튼 (나중에 할게요) */
.btn--text {
    min-height: var(--button-height-md);
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    color: var(--color-primary);
}

/* 작은 버튼 (등록 · 연결) */
.btn-sm {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: var(--touch-size);
    padding: 0 var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
}

/* 선택 칩 */
.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--touch-size);
    padding: 0 var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    white-space: nowrap;
}

.chip--md {
    height: var(--button-height-md);
    padding: 0 var(--space-14);
    font-size: var(--fs-15);
    line-height: var(--lh-21);
}

.chip[aria-pressed="true"] {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-bg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* 원형 아이콘 버튼 */
.btn-circle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--touch-size);
    height: var(--touch-size);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-sub);
}

/* 배지 */
.badge {
    display: inline-flex;
    flex-shrink: 0;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--fs-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-17);
}

.badge--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* 카드 */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

/* 섹션 */
.section {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.section__title {
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

/* 안내 줄 */
.notice {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-lg);
    background: var(--color-bg-gray);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-20);
}

.notice .icon {
    margin: 0 2px;
}

.notice--sub {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

/* =========================================================
   하위 화면 틀 (뒤로 + 제목 · 하단 주요 행동)
   ========================================================= */
.app-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--page-padding);
}

.app-header__back,
.app-header__blank {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--touch-size);
    height: var(--touch-size);
}

.app-header__title {
    flex: 1;
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-26);
    text-align: center;
}

.content--sub {
    gap: var(--space-24);
    padding-bottom: var(--space-32);
}

.page-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.page-title__heading {
    font-size: var(--fs-24);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-32);
}

.page-title__heading span { display: block; }

.page-title__desc {
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    color: var(--color-text-sub);
}

.bottom-action {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12) var(--page-padding) var(--space-8);
    background: var(--color-bg);
}

/* 구역 제목 (제목 + 보조 설명 한 줄) */
.field-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-8);
}

.field-title__main {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.field-title__sub {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

/* =========================================================
   선택 목록 (라디오 · 체크박스)
   ========================================================= */
.choice-list {
    padding: 0 var(--space-16);
}

.choice-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 13px 0;
    cursor: pointer;
}

.choice-list__item + .choice-list__item {
    border-top: 1px solid var(--color-divider);
}

.choice-list__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.choice-list__title {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.choice-list__desc {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.radio,
.checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--color-border-strong);
    background: var(--color-bg) center / 16px no-repeat;
    cursor: pointer;
    appearance: none;
}

.radio { border-radius: var(--radius-full); }
.radio:checked { border: 6px solid var(--color-primary); }

.checkbox { border-radius: var(--radius-xs); }

.checkbox:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("../image/checkmark--white.svg");
}

/* 이동 줄 (제목 + 설명 + 오른쪽 화살표) */
.link-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-14) var(--space-16);
}

[hidden] { display: none !important; }

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* =========================================================
   지도 화면 (지도 + 아래 시트)
   ========================================================= */
.map-view {
    position: relative;
    height: var(--map-height, 330px);
    overflow: hidden;
    background: var(--color-bg-tile);
}

/* 카카오 지도 키가 없을 때 보이는 정적 지도 */
.map-view__static {
    position: absolute;
    top: var(--map-img-top, -200px);
    left: -260px;
    width: 895px;
    max-width: none;
    height: 676px;
    object-fit: cover;
}

.map-view__canvas {
    position: absolute;
    inset: 0;
}

/* 정적 지도 위 요소는 디자인 좌표(--x, --y)로 배치, 카카오 지도에선 좌표로 배치 */
.map-view [data-static-pos] {
    position: absolute;
    left: var(--x);
    top: var(--y);
}

.map-view.is-kakao [data-static-pos] { position: static; }
.map-view.is-kakao .map-view__static,
.map-view.is-kakao .map-view__route { display: none; }

/* 지도 핀: 말풍선 + 막대 + 점 */
.map-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.map-pin__label {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-12) var(--space-6) var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--color-text);
    box-shadow: var(--shadow-float);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--color-text-inverse);
}

.map-pin__stem {
    width: 2px;
    height: 14px;
    margin-top: -2px;
    background: var(--color-text);
}

.map-pin__dot {
    width: 14px;
    height: 14px;
    margin-top: -3px;
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-full);
    background: var(--color-text);
}

.map-pin--destination .map-pin__label {
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    background: var(--color-danger);
}

.map-pin--destination .map-pin__stem,
.map-pin--destination .map-pin__dot { background: var(--color-danger); }

/* 내 위치 (방향 표시) */
.map-me {
    width: 72px;
    height: 72px;
    pointer-events: none;
}

.map-me img {
    width: 51px;
    height: 51px;
    margin: 10.5px;
    transform: rotate(var(--heading, 130deg));
}

/* 지도 위에 떠 있는 원형 버튼 */
.btn-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-size);
    height: var(--touch-size);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    box-shadow: var(--shadow-float);
    color: var(--color-text);
}

.btn-float--back {
    top: var(--space-8);
    left: var(--space-16);
}

.btn-float--locate {
    right: var(--space-20);
    bottom: calc(22px + var(--sheet-overlap, 16px));
    color: var(--color-text-secondary);
}

/* 지도 아래에서 올라온 시트 */
.sheet {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-14);
    margin-top: calc(var(--sheet-overlap, 16px) * -1);
    padding: var(--space-10) var(--page-padding) var(--space-12);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg);
    box-shadow: var(--shadow-sheet);
}

.sheet__grabber {
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--color-border-strong);
}

/* =========================================================
   모달 시트 (화면 위로 열리는 시트)
   ========================================================= */
.modal-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--color-scrim);
}

.modal-sheet__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    max-width: var(--app-width);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-10) var(--page-padding) var(--space-12);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg);
}

.modal-sheet__panel .sheet__grabber { background: var(--color-border-strong); }

.modal-sheet__title {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-28);
}

.modal-sheet__desc {
    margin-top: var(--space-4);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

body.is-modal-open { overflow: hidden; }

/* =========================================================
   앱 알림 카드 (잠금 화면 / 알림 센터 · 앱 위 배너)
   ========================================================= */
.push-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-14) var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-align: left;
}

.push-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-sub);
}

.push-card__app {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: var(--font-weight-medium);
}

.push-card__app img { width: 20px; height: 20px; }

.push-card__title {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.push-card__body {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
}

/* 앱 화면 위로 내려오는 알림 */
.push-banner {
    position: fixed;
    top: var(--space-12);
    left: 50%;
    z-index: 200;
    width: calc(100% - 24px);
    max-width: calc(var(--app-width) - 24px);
    transform: translateX(-50%);
    animation: push-in 0.3s ease-out;
}

@keyframes push-in {
    from { opacity: 0; transform: translate(-50%, -16px); }
}

@media (prefers-reduced-motion: reduce) {
    .push-banner { animation: none; }
}

/* =========================================================
   앱 안 짧은 안내 (common.js Toast) · 아래 / 위(상태가 바뀔 때)
   ========================================================= */
.app-toast {
    position: fixed;
    bottom: var(--space-24);
    left: 50%;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: max-content;
    max-width: calc(min(100vw, var(--app-width)) - 40px);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-md);
    background: rgba(31, 33, 36, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    font-size: var(--fs-15);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-22);
    color: var(--color-text-inverse);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.app-toast--top {
    top: var(--space-12);
    bottom: auto;
    background: var(--color-primary);
    font-weight: var(--font-weight-bold);
    transform: translate(-50%, -12px);
}

.app-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 화면이 다음 상태로 바뀔 때 부드럽게 겹쳐 바뀜 (지원하는 브라우저만) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    .app-toast { transition: none; }
    @view-transition { navigation: none; }
}

/* =========================================================
   바텀시트 끌기 손잡이 (common.js SheetDrag가 시트 맨 위에 넣음)
   ========================================================= */
.sheet__handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.sheet__handle:active { cursor: grabbing; }

/* 지도가 있는 화면: 화면 높이에 맞추고 페이지는 스크롤하지 않음
   (시트 안 내용만 스크롤 · 시트를 내리면 시트와 아래 버튼이 화면 밖으로 가려짐) */
.map-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* 처음엔 지도가 화면의 55% · 바텀시트는 반보다 조금 덜(약 45%) 보임
   (사용자가 손잡이를 끌어 올리거나 내리면 그 높이로 바뀜 · common.js SheetDrag) */
.map-page .map-view {
    flex: none;
    height: calc(55vh + var(--sheet-overlap, 16px));
    height: calc(55dvh + var(--sheet-overlap, 16px));
    /* 정적 지도(카카오 지도를 못 불러올 때): 디자인 높이보다 늘어난 만큼 그림·핀을 함께 내려 가운데 맞춤 */
    --static-shift: max(0px, calc((55dvh + var(--sheet-overlap, 16px) - var(--map-height, 330px)) / 2));
}

.map-page .map-view__static { top: calc(var(--map-img-top, -200px) + var(--static-shift)); }
.map-page .map-view:not(.is-kakao) [data-static-pos] { top: calc(var(--y) + var(--static-shift)); }

.map-page .sheet {
    min-height: 0;
    overflow-y: auto;
}

/* 시트 안 내용을 스크롤해도 그래버(끌기 손잡이)는 시트 맨 위에 그대로 보임
   (common.js SheetDrag가 넣는 손잡이 버튼이 그래버를 그림 · 원래 그래버는 숨김) */
.map-page .sheet > .sheet__grabber { display: none; }

.map-page .sheet > .sheet__handle {
    position: sticky;
    top: 0;
    flex: none;
    height: 24px;
    margin: calc(var(--space-10) * -1) calc(var(--page-padding) * -1) 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg);
}

.map-page .sheet > .sheet__handle::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--color-border-strong);
}

.map-page .bottom-action {
    position: relative;
    flex: none;
}

/* 시트를 끌면 지도·시트 높이가 바뀜 (끄는 동안은 바로, 놓으면 부드럽게) */
.map-view,
.map-page .sheet { transition: height 0.25s ease; }
.map-view.is-resizing,
.map-page .sheet.is-resizing { transition: none; }

.modal-sheet__panel {
    position: relative;
    transition: transform 0.2s ease;
}

/* =========================================================
   여러 줄 입력 (직접 쓰기 + 음성으로 입력 + 글자 수)
   ========================================================= */
.text-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.text-area__label {
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.text-area__box {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-14) var(--space-16) var(--space-12);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
}

.text-area__box:focus-within { border-color: var(--color-primary); }

.text-area__input {
    min-height: 62px;
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    font: inherit;
    font-size: var(--fs-16);
    line-height: var(--lh-22);
    color: var(--color-text);
}

.text-area__input::placeholder { color: var(--color-text-sub); }

.text-area__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-input {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 40px;
    padding: 0 var(--space-12) 0 var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
}

.text-area__count {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

.voice-input.is-listening { border-color: var(--color-primary); color: var(--color-primary); }

/* =========================================================
   가운데 팝업 (? 안내 등 · 짧은 설명)
   ========================================================= */
.popup {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-20);
    background: var(--color-scrim);
}

.popup__box {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-24) var(--space-20) var(--space-20);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    animation: popup-in 0.18s ease-out;
}

@keyframes popup-in {
    from { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .popup__box { animation: none; }
}

.popup__title {
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-26);
}

.popup__desc {
    font-size: var(--fs-15);
    line-height: var(--lh-22);
    color: var(--color-text-secondary);
}