:root {
    --mobile-test-width-320: 320px;
    --mobile-test-width-360: 360px;
    --mobile-test-width-390: 390px;
    --mobile-test-width-430: 430px;
    --mobile-page-gutter: 16px;
    --mobile-section-gap: 16px;
    --mobile-card-gap: 12px;
    --mobile-card-radius: 20px;
    --mobile-bottom-nav-size: 76px;
    --mobile-bottom-clearance: calc(
        var(--mobile-bottom-nav-size) + 22px + env(safe-area-inset-bottom, 0px)
    );
}

@media (max-width: 767px) {
    html {
        inline-size: 100%;
        min-inline-size: 0;
    }

    body.mobile-app-shell {
        inline-size: 100%;
        min-inline-size: 0;
        margin: 0;
    }

    body.mobile-app-shell > header,
    body.mobile-app-shell > main,
    body.mobile-app-shell > footer {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    body.mobile-app-shell > main.app-content {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        margin: 0;
        padding-block: 14px var(--mobile-bottom-clearance);
        padding-inline:
            max(var(--mobile-page-gutter), env(safe-area-inset-left, 0px))
            max(var(--mobile-page-gutter), env(safe-area-inset-right, 0px));
    }

    [data-mobile-page] {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }

    [data-mobile-page],
    [data-mobile-page] *,
    [data-mobile-page] *::before,
    [data-mobile-page] *::after {
        box-sizing: border-box;
    }

    [data-mobile-page] > *,
    [data-mobile-page] .grid > *,
    [data-mobile-page] .flex > * {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    [data-mobile-page] img,
    [data-mobile-page] video,
    [data-mobile-page] canvas,
    [data-mobile-page] .leaflet-container {
        max-inline-size: 100%;
    }

    [data-mobile-page] input,
    [data-mobile-page] select,
    [data-mobile-page] textarea {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        font-size: 16px;
    }

    [data-mobile-page] button,
    [data-mobile-page] a[role="button"],
    [data-mobile-page] input,
    [data-mobile-page] select,
    [data-mobile-page] summary,
    [data-mobile-page] [role="button"] {
        min-block-size: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    [data-mobile-page] h1,
    [data-mobile-page] h2,
    [data-mobile-page] h3,
    [data-mobile-page] p,
    [data-mobile-page] button,
    [data-mobile-page] a {
        overflow-wrap: anywhere;
    }

    [data-mobile-page] .note-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    [data-mobile-page] .note-header > *,
    [data-mobile-page] .note-header .note-button {
        inline-size: 100%;
    }

    [data-mobile-page] .note-panel,
    [data-mobile-page] .page-intro,
    [data-mobile-page] .section-card,
    [data-mobile-page] .toolbar-shell,
    [data-mobile-page] .soft-panel,
    [data-mobile-page] .metric-tile {
        border-radius: var(--mobile-card-radius);
    }

    [data-mobile-page] .page-stack,
    [data-mobile-page].page-stack,
    [data-mobile-page].note-page {
        gap: var(--mobile-section-gap);
    }

    [data-mobile-page] .md\:grid-cols-2,
    [data-mobile-page] .md\:grid-cols-3,
    [data-mobile-page] .lg\:grid-cols-2,
    [data-mobile-page] .lg\:grid-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-mobile-page] .md\:flex-row,
    [data-mobile-page] .lg\:flex-row {
        align-items: stretch;
        flex-direction: column;
    }

    [data-mobile-page] .page-transition {
        animation: none;
        filter: none;
        transform: none;
    }

    #bottomNav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #mobileQuickSheet,
    #mobileMoreSheet {
        right: max(10px, env(safe-area-inset-right, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        max-inline-size: calc(
            100% - max(20px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))
        );
    }

    body.mobile-sheet-open {
        overscroll-behavior: none;
    }
}

@media (max-width: 359px) {
    :root {
        --mobile-page-gutter: 12px;
        --mobile-section-gap: 14px;
        --mobile-card-gap: 10px;
        --mobile-card-radius: 18px;
    }

    body.mobile-app-shell > main.app-content {
        padding-block-start: 10px;
    }

    [data-mobile-page] h1 {
        font-size: clamp(1.55rem, 8.5vw, 1.85rem);
        line-height: 1.18;
    }

    [data-mobile-page] .note-panel,
    [data-mobile-page] .page-intro,
    [data-mobile-page] .section-card,
    [data-mobile-page] .toolbar-shell {
        padding-inline: 12px;
    }
}

@media (max-width: 767px) {
    /* 홈: 캐러셀 대신 실제 한 열 최근 목록 */
    [data-mobile-page="home"] .home-mobile-hero {
        margin-block-end: 18px !important;
        padding: 20px 16px !important;
    }

    [data-mobile-page="home"] .home-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    [data-mobile-page="home"] .home-metrics .metric-tile {
        min-block-size: 112px;
        padding: 14px;
    }

    [data-mobile-page="home"] .home-recent-scroller {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none !important;
    }

    [data-mobile-page="home"] .home-recent-scroller > * {
        inline-size: 100% !important;
        max-inline-size: 100%;
        scroll-snap-align: none !important;
    }

    /* 내 맛집: 검색과 상태를 먼저, 목록과 지도는 화면 폭 전체 사용 */
    [data-mobile-page="restaurants"] > .note-panel:first-child {
        position: relative;
        top: auto;
        margin-block-end: 0;
        padding: 14px 12px;
    }

    [data-mobile-page="restaurants"] > .note-panel:first-child .note-header {
        margin-block-end: 14px;
    }

    [data-mobile-page="restaurants"] > .note-panel:first-child .note-header > div:last-child {
        display: grid;
        inline-size: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    [data-mobile-page="restaurants"] #restaurantGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    [data-mobile-page="restaurants"] #restaurantGrid > article,
    [data-mobile-page="restaurants"] #restaurantGrid > div {
        inline-size: 100%;
        padding: 16px;
    }

    [data-mobile-page="restaurants"] .pill-scroll {
        flex-wrap: wrap;
        overflow: visible;
        padding-block-end: 0;
    }

    [data-mobile-page="restaurants"] .map-head,
    [data-mobile-page="near-me"] .map-head,
    [data-mobile-page="rankings"] .map-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    [data-mobile-page="restaurants"] .map-head-actions,
    [data-mobile-page="near-me"] .map-head-actions,
    [data-mobile-page="rankings"] .map-head-actions {
        display: grid;
        inline-size: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-mobile-page="restaurants"] .map-feature-filters,
    [data-mobile-page="restaurants"] .restaurant-nearby-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-block: 4px 10px;
    }

    [data-mobile-page="restaurants"] .map-feature-filters button,
    [data-mobile-page="restaurants"] .restaurant-nearby-filters button {
        inline-size: 100%;
        white-space: normal;
    }

    [data-mobile-page="restaurants"] #mapContainer {
        height: clamp(360px, 56dvh, 520px) !important;
        border-radius: 20px;
    }

    [data-mobile-page="restaurants"] .restaurant-nearby-sheet {
        inset-inline: 0;
        inset-block-end: 0;
        inline-size: 100%;
        max-inline-size: 100%;
        max-block-size: min(62dvh, 560px);
        max-height: min(62dvh, 560px) !important;
        border-radius: 24px 24px 0 0;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    [data-mobile-page="restaurants"] .restaurant-nearby-sheet__primary-actions,
    [data-mobile-page="restaurants"] .restaurant-nearby-item__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-mobile-page="restaurants"] .restaurant-nearby-sheet__primary-actions > :last-child,
    [data-mobile-page="restaurants"] .restaurant-nearby-item__actions > :last-child {
        grid-column: 1 / -1;
    }

    /* 추천: 결과와 피드백을 안정된 2열 버튼으로 */
    [data-mobile-page="recommend"] {
        padding: 0;
    }

    [data-mobile-page="recommend"] .recommend-card {
        padding: 20px 14px;
        border-radius: 22px;
    }

    [data-mobile-page="recommend"] .recommend-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    [data-mobile-page="recommend"] .recommend-button {
        inline-size: 100%;
        min-inline-size: 0;
    }

    [data-mobile-page="recommend"] .result-main {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    [data-mobile-page="recommend"] .result-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    [data-mobile-page="recommend"] .result-action,
    [data-mobile-page="recommend"] .result-action:hover,
    [data-mobile-page="recommend"] .result-action:active {
        min-inline-size: 0;
        transform: none;
    }

    [data-mobile-page="recommend"] .recommend-lists {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 방문 기록 */
    [data-mobile-page="timeline"] .visit-feed-shell {
        inline-size: 100%;
        max-inline-size: 100%;
    }

    [data-mobile-page="timeline"] .visit-intro {
        padding: 18px 14px;
    }

    [data-mobile-page="timeline"] .visit-filter-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    [data-mobile-page="timeline"] .visit-filter-actions,
    [data-mobile-page="timeline"] .visit-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    [data-mobile-page="timeline"] .visit-card {
        padding: 14px;
        border-radius: 20px;
    }

    [data-mobile-page="timeline"] .visit-media {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }

    [data-mobile-page="timeline"] .visit-media-item {
        inline-size: 100%;
        min-inline-size: 0;
    }

    /* 커뮤니티: 부모 폭을 벗어나는 edge-to-edge 보정 제거 */
    [data-mobile-page^="community-"] {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    [data-mobile-page^="community-"] .community-header {
        margin: 0 0 12px;
    }

    [data-mobile-page^="community-"] .community-post {
        border: 1px solid #ebe8e1;
        border-radius: 20px;
    }

    [data-mobile-page^="community-"] .community-attachment-list {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        overflow: visible;
    }

    [data-mobile-page^="community-"] .community-attachment-card {
        inline-size: 100%;
    }

    [data-mobile-page^="community-"] .community-composer {
        inline-size: 100%;
        max-inline-size: 100%;
        block-size: 100dvh;
        max-block-size: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    /* 지도 화면 */
    [data-mobile-page="near-me"] #nearMeMap {
        height: clamp(360px, 56dvh, 520px) !important;
        border-radius: 20px;
    }

    [data-mobile-page="near-me"] #mapSection {
        padding: 10px;
    }

    [data-mobile-page="near-me"] > .page-intro .flex {
        align-items: stretch;
        flex-direction: column;
    }

    [data-mobile-page="rankings"] #rankingsMap {
        height: clamp(360px, 56dvh, 520px) !important;
        border-radius: 20px;
    }

    [data-mobile-page="rankings"] .pill-scroll {
        flex-wrap: wrap;
        overflow: visible;
        padding-block-end: 0;
    }

    [data-mobile-page="nearby-places"] .nearby-map-editor {
        height: clamp(320px, 46dvh, 420px) !important;
        border-radius: 18px;
    }

    [data-mobile-page="nearby-places"] .nearby-address-row,
    [data-mobile-page="nearby-places"] .nearby-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 등록/수정: 한 열 섹션과 하단 행동 */
    [data-mobile-page^="restaurant-"] #restaurantForm {
        display: grid;
        gap: 14px;
    }

    [data-mobile-page^="restaurant-"] #restaurantForm .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-mobile-page="restaurant-add"] #restaurantForm > div,
    [data-mobile-page="restaurant-edit"] #restaurantForm > div {
        min-inline-size: 0;
        max-inline-size: 100%;
        border-radius: 20px;
    }

    [data-mobile-page="restaurant-add"] [data-mobile-form-actions],
    [data-mobile-page="restaurant-edit"] [data-mobile-form-actions] {
        position: sticky;
        z-index: 20;
        bottom: calc(var(--mobile-bottom-nav-size) + 12px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        border: 1px solid #e5ebe8;
        border-radius: 20px;
        background: rgba(255, 255, 255, .96);
        padding: 10px;
        box-shadow: 0 18px 38px -24px rgba(15, 23, 42, .4);
        backdrop-filter: blur(14px);
    }

    .mobile-app-shell .quick-visit-dialog {
        inline-size: 100% !important;
        max-inline-size: 100%;
        max-height: 92dvh;
        border-radius: 24px 24px 0 0;
    }

    .mobile-app-shell .quick-visit-body {
        padding: 14px;
    }

    .mobile-app-shell .quick-visit-section {
        padding: 14px;
    }

    /* 상세, 컬렉션, 랭킹, 통계 */
    [data-mobile-page="restaurant-detail"] .note-panel,
    [data-mobile-page="collections"] .note-panel,
    [data-mobile-page="collection-detail"] .note-panel,
    [data-mobile-page="rankings"] .note-panel,
    [data-mobile-page="statistics"] .note-panel {
        padding-inline: 14px;
    }

    [data-mobile-page="statistics"] #reviewCards {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-mobile-page="statistics"] .mobile-calendar-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    [data-mobile-page="statistics"] .mobile-calendar-month {
        display: grid;
        min-block-size: 76px;
        align-content: space-between;
        gap: 6px;
        border: 1px solid #e5ebe8;
        border-radius: 14px;
        background: #f8fbf9;
        padding: 10px;
    }

    [data-mobile-page="statistics"] .mobile-calendar-month span {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
    }

    [data-mobile-page="statistics"] .mobile-calendar-month strong {
        color: #0f766e;
        font-size: 18px;
    }

    /* 인증 */
    [data-mobile-page="login"] .login-shell {
        inline-size: 100%;
        max-inline-size: 430px;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 22px;
    }

    [data-mobile-page="login"] .hero-panel {
        display: none;
    }

    [data-mobile-page="login"] .login-panel,
    [data-mobile-page="register"] .auth-card,
    [data-mobile-page="google-callback"] {
        inline-size: 100%;
        max-inline-size: 100%;
        border-radius: 20px;
        padding: 22px 16px;
    }

    body.mobile-app-shell [data-mobile-page="register"] {
        inline-size: 100%;
        max-inline-size: 430px;
        margin: 12px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mobile-app-shell *,
    body.mobile-app-shell *::before,
    body.mobile-app-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}