/* ============================================================
   RESPONSIVE — all media queries (1920 / 1680 / 1440 / 1280 /
                1024 / 960 / 768 / 600 / 360 / 320 + landscape)
   ============================================================ */

/* =================================================
   RESPONSIVE — 1920 / 1680 / 1440 / 1280 / 1024 / 960 / 768 / 360 / 320
   + Galaxy Fold (folded ~360 / unfolded ~768)
   ================================================= */

/* ---- ≥1920 : ultra-wide, generous spacing ---- */
@media (min-width: 1920px) {
    .header { padding: 36px 56px 60px; }
    .gallery { padding: 36px 56px 100px; }
    .header-topbar { margin-bottom: 68px; }
    .profile-hero { margin-bottom: 68px; }
    .profile-strip { padding-top: 40px; }
}

/* ---- ≤1680 : large desktop ---- */
@media (max-width: 1680px) {
    .header { padding: 26px 44px 52px; }
    .gallery { padding: 30px 44px 84px; }
}

/* ---- ≤1440 : standard desktop (user default) ---- */
@media (max-width: 1440px) {
    .header { padding: 24px 40px 48px; }
    .gallery { padding: 28px 40px 80px; }
    .header-topbar { margin-bottom: 52px; }
    .profile-hero { margin-bottom: 52px; }
}

/* ---- ≤1280 : small desktop / laptop ---- */
@media (max-width: 1280px) {
    .header { padding: 22px 32px 44px; }
    .gallery { padding: 24px 32px 70px; }
    .header-topbar { margin-bottom: 44px; }
    .profile-hero { margin-bottom: 44px; }
    .profile-avatar { width: 80px; height: 80px; font-size: 30px; }
}

/* ---- ≤1024 : tablet landscape ---- */
@media (max-width: 1024px) {
    .header { padding: 20px 28px 40px; }
    .gallery { padding: 22px 28px 60px; }
    .header-topbar { margin-bottom: 38px; }
    .profile-hero { margin-bottom: 38px; }
    .grid[data-cols="5"] { grid-template-columns: repeat(4, 1fr); }
}

/* ---- ≤960 : small tablet / large phone landscape ---- */
@media (max-width: 960px) {
    .header { padding: 18px 24px 36px; }
    .header-topbar { margin-bottom: 32px; flex-wrap: wrap; gap: 14px; }
    .profile-hero { margin-bottom: 32px; }
    .profile-strip {
        grid-template-columns: auto 1fr;
        gap: 22px;
        row-gap: 20px;
        padding-top: 24px;
    }
    .social-links { grid-column: 1 / -1; }
    .profile-avatar { width: 72px; height: 72px; font-size: 28px; }
    .gallery { padding: 20px 24px 56px; }
    .grid[data-cols="5"] { grid-template-columns: repeat(4, 1fr); }
    .grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* ---- ≤768 : tablet portrait / Galaxy Fold UNFOLDED
     → hide sidebar, use hamburger + bottom sheet
     → reorder profile: hero → divider → handle → actions → strip ---- */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .mobile-menu-btn { display: flex; }
    .bottom-sheet { display: block; }
    .contact-tab { display: none; }
    .contact-fab { display: flex; }

    /* Subpage full width on mobile */
    .subpage-panel {
        width: 100%;
        max-width: 100vw;
        border-left: none;
    }
    .subpage-head { padding: 18px 18px; }
    .subpage-title { font-size: 22px; }
    .subpage-body { padding: 20px 18px 28px; }
    .upload-area { padding: 32px 16px; }

    /* Contact panel mobile adjustments — allow vertical scroll (form 포함) */
    .contact-panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .contact-wrap {
        padding: 36px 16px 24px;
        gap: 12px;
        max-width: 100%;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        justify-content: flex-start;
    }
    .contact-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 14px; }
    .contact-tagline { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.2em; }
    .tagline-line { width: 16px; }
    .contact-hgroup { gap: 8px; flex-direction: column; align-items: center; }
    .contact-title { font-size: clamp(30px, 7vw, 44px); }
    .contact-sub {
        font-size: 11.5px;
        line-height: 1.5;
        white-space: normal;
        text-align: center;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .contact-col { padding: 14px; border-radius: 12px; }
    .col-map-card { padding: 12px; }
    .col-label { margin-bottom: 8px; font-size: 9px; letter-spacing: 0.18em; }
    .col-title { font-size: 19px; margin-bottom: 5px; }
    .col-text {
        font-size: 11.5px;
        line-height: 1.5;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .col-tail { padding-top: 8px; font-size: 8.5px; }
    .col-map { min-height: 110px; margin-top: 8px; }
    .col-info { row-gap: 4px; }
    .col-info .info-row {
        grid-template-columns: 46px 1fr;
        font-size: 11px;
        gap: 10px;
        padding-bottom: 4px;
    }
    .col-info dt { font-size: 8.5px; }

    /* Info chats on mobile — smaller circles */
    .info-chats { gap: 8px; margin: 10px 0 12px; }
    .info-chat { width: 36px; height: 36px; font-size: 15px; }
    .info-chat svg { width: 15px; height: 15px; }

    .contact-foot { font-size: 10px; }

    .main {
        margin-left: 0;
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    }

    /* sp-page (write/mypage) 모바일 좌우 여백 축소 */
    .sp-page { padding: 20px 18px 64px; }
    .sp-page-bar { margin-bottom: 22px; padding-bottom: 14px; gap: 12px; }
    .sp-write-title { font-size: clamp(24px, 6vw, 38px) !important; }

    .header {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 36px;
    }
    .profile-hero   { order: 1; margin-bottom: 0; }
    .header-topbar  { order: 2; }
    .profile-strip  { order: 3; }

    /* Topbar: column centered, divider line on top */
    .header-topbar {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin: 24px 0 32px;
        text-align: center;
    }
    .header-topbar::before {
        content: '';
        display: block;
        width: 40px;
        height: 1px;
        background: var(--border);
        margin-bottom: 4px;
    }
    .handle-top {
        font-size: 10.5px;
        letter-spacing: 0.25em;
    }
    .header-actions {
        gap: 10px;
        justify-content: center;
    }
    .btn { padding: 9px 18px; font-size: 12.5px; }

    /* Hero */
    .hero-tagline { font-size: 9.5px; letter-spacing: 0.2em; gap: 12px; margin-bottom: 18px; }
    .hero-line { width: 28px; }
    .profile-name { font-size: clamp(38px, 7.5vw, 56px); }

    .gallery { padding: 18px 20px 44px; }
    .grid[data-cols="5"],
    .grid[data-cols="4"],
    .grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); gap: 3px; }

    .share-menu { min-width: 200px; }
}

/* ---- ≤600 : phone landscape edge / larger phones portrait ---- */
@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 3px !important; }
    .profile-strip { grid-template-columns: 1fr; gap: 16px; justify-items: start; }
    .gallery-header { flex-wrap: wrap; gap: 8px; }
    .modal-prev { left: 8px; }
    .modal-next { right: 8px; }
}

/* ---- ≤360 : Galaxy Fold FOLDED / small phones ---- */
@media (max-width: 360px) {
    .header { padding: 16px 14px 26px; }
    .header-topbar { margin: 20px 0 22px; gap: 12px; }
    .profile-name { font-size: clamp(30px, 9vw, 40px); }
    .hero-tagline { letter-spacing: 0.15em; gap: 8px; font-size: 9px; }
    .hero-line { width: 20px; }
    .profile-avatar { width: 58px; height: 58px; font-size: 22px; }
    .profile-strip { padding-top: 18px; }
    .header-actions { flex-wrap: wrap; }

    .gallery { padding: 14px 14px 28px; }
    .gallery-count { font-size: 11.5px; }

    .btn { padding: 8px 14px; font-size: 12px; gap: 6px; }
    .share-menu { min-width: 180px; right: -6px; }

    .mobile-menu-btn { width: 52px; height: 52px; font-size: 18px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .contact-fab { width: 52px; height: 52px; font-size: 18px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 14px; }
    .sheet-panel { padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .sheet-btn { padding: 10px 2px; min-height: 58px; font-size: 10.5px; }
    .sheet-cats { gap: 6px; }

    .contact-wrap { padding: 36px 12px 12px; gap: 10px; }
    .contact-title { font-size: clamp(26px, 8.5vw, 38px); }
    .contact-sub { font-size: 11.5px; }
    .contact-col { padding: 13px; }
    .col-map-card { padding: 12px; }
    .col-title { font-size: 19px; }
    .col-text { font-size: 11.5px; }
    .col-map { min-height: 110px; }
    .info-chats { gap: 6px; margin: 10px 0 12px; }
    .info-chat { width: 36px; height: 36px; font-size: 15px; }
    .info-chat svg { width: 15px; height: 15px; }
}

/* ---- ≤320 : smallest phones (iPhone SE 1st gen etc.) ---- */
@media (max-width: 320px) {
    .header { padding: 14px 12px 22px; }
    .profile-name { font-size: clamp(26px, 9vw, 34px); }
    .profile-avatar { width: 52px; height: 52px; font-size: 20px; }
    .profile-bio { font-size: 12.5px; line-height: 1.7; }

    .gallery { padding: 12px 10px 22px; }
    .grid { gap: 2px !important; }

    .btn { padding: 7px 12px; font-size: 11.5px; }
    .social-link { width: 34px; height: 34px; font-size: 13px; }

    .mobile-menu-btn { width: 48px; height: 48px; font-size: 17px; }
    .contact-fab { width: 48px; height: 48px; font-size: 17px; right: 12px; }
    .sheet-btn { min-height: 54px; padding: 9px 2px; font-size: 10px; }
    .sheet-cats { gap: 5px; }

    .contact-wrap { padding: 32px 10px 10px; gap: 8px; }
    .contact-title { font-size: clamp(22px, 8.5vw, 30px); }
    .col-title { font-size: 17px; }
    .col-map { min-height: 96px; }
    .info-chat { width: 34px; height: 34px; font-size: 14px; }
    .info-chat svg { width: 14px; height: 14px; }
}

/* ---- Landscape orientation override for short viewports (phone landscape) ---- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 960px) {
    .profile-hero { margin-bottom: 20px; }
    .header-topbar { margin-bottom: 20px; }
    .header { padding-top: 12px; padding-bottom: 24px; }
}