/* ============================================================
   mobile.css — 모바일 반응형 (768px / 480px 이하)
   ★ 처음부터 재설계: 햄버거, 우측 메뉴, 본문 잘림 모두 해결
   ============================================================ */

/* ============================================================
   [768px 이하] 일반 모바일 / 작은 태블릿
   ============================================================ */
@media (max-width: 768px) {

    /* ── 모든 텍스트 강제 줄바꿈 (한국어 잘림 방지) ── */
    body {
        overflow-x: hidden;       /* 가로 스크롤 차단 */
    }
    .content,
    .card,
    .post-content,
    .post-summary,
    .post-list .title,
    .post-list .meta,
    .post-detail .meta,
    .comment-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* ── 상단바: 햄버거 자리 확보 + 메뉴 안전 표시 ── */
    .topbar-inner {
        padding: 10px 12px 10px 56px;
        gap: 6px;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .brand-en {
        font-size: 16px;
    }
    .brand-tag {
        font-size: 13px;
    }
    .topnav {
        margin-left: auto;
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    .user-badge {
        font-size: 12px;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topnav-link {
        font-size: 12px;
        padding: 4px 8px;
    }
    .topnav-link.primary {
        padding: 5px 10px;
    }

    /* ── 메인 레이아웃: flex 해제 → 본문 풀폭 ── */
    .main-layout {
        display: block;
    }

    /* ── 사이드바: 기본 숨김 + 슬라이드인 ── */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        max-height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        border-right: 1px solid var(--color-border);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-inner {
        padding: 50px 14px 60px;       /* 상단 ✕ 버튼 자리 + 하단 안전 여백 */
    }

    /* ── 햄버거 + 오버레이 + 닫기 버튼 활성화 ── */
    .sidebar-toggle,
    .sidebar-overlay,
    .sidebar-close {
        display: block;
    }
    .sidebar-toggle {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1100;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 8px;
        background: white;
        border: 1px solid #d1d5db;
        font-size: 20px;
        line-height: 36px;           /* ★ 핵심: ☰ 글자 세로 중앙 */
        text-align: center;
        color: #374151;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    .sidebar-toggle:active {
        background: #f3f4f6;
    }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
    .sidebar-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: #f3f4f6;
        font-size: 16px;
        line-height: 32px;
        text-align: center;
        color: #4b5563;
        cursor: pointer;
        z-index: 10;
    }
    .sidebar-close:hover,
    .sidebar-close:active {
        background: #e5e7eb;
    }

    /* ── 메인 영역 ── */
    .main-area {
        width: 100%;
    }
    .content {
        padding: 14px 14px;
    }

    /* ── 카드 (인기글, 최신글, 검색 등) ── */
    .card {
        padding: 16px 14px;
        margin-bottom: 14px;
        border-radius: 10px;
    }
    .card h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .card h3 {
        font-size: 15px;
    }

    /* ── 2열 → 1열 ── */
    .two-col {
        display: block;
    }
    .two-col .card {
        margin-bottom: 14px;
    }

    /* ── 게시글 목록: 가로 → 세로 배치 ── */
    .post-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 0;
    }
    .post-list .badge {
        align-self: flex-start;
        font-size: 11px;
    }
    .post-list .post-body {
        width: 100%;
    }
    .post-list .title {
        font-size: 15px;
        line-height: 1.45;
        white-space: normal;          /* 줄바꿈 허용 */
    }
    .post-list .meta {
        font-size: 12px;
        line-height: 1.55;
    }

    /* ── 게시글 상세 ── */
    .post-detail {
        padding: 18px 14px;
        border-radius: 10px;
    }
    .post-detail h1 {
        font-size: 20px;
        line-height: 1.4;
    }
    .post-detail .meta {
        font-size: 12px;
        line-height: 1.7;
    }
    .post-content {
        font-size: 15px;
        line-height: 1.75;
    }
    .post-summary {
        font-size: 14px;
        padding: 12px 14px;
    }

    /* 모바일 이미지 */
    .post-hero-image,
    .post-mid-image {
        max-width: 100%;
        margin: 14px auto 18px;
    }
    .post-hero-image img,
    .post-mid-image img {
        max-height: 240px;
        border-radius: 6px;
    }

    /* ── 국가 정보 카드 (모바일 압축) ── */
    .country-info {
        padding: 16px 14px;
    }
    .country-info-header {
        gap: 12px;
        margin-bottom: 12px;
    }
    .country-info-flag {
        font-size: 42px;
    }
    .country-info-name-ko {
        font-size: 22px;
    }
    .country-info-grid {
        grid-template-columns: 1fr 1fr;        /* 2열 고정 */
        gap: 8px;
    }
    .country-info-item {
        padding: 8px 10px;
    }

    /* ── 폼 (모바일 입력 편의) ── */
    .field input,
    .field select,
    .field textarea {
        font-size: 16px;              /* ★ iOS 자동확대 방지 */
        padding: 11px 12px;
    }
    .btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* ── 푸터 ── */
    .footer {
        padding: 16px 14px;
        font-size: 12px;
    }
}

/* ============================================================
   [480px 이하] 작은 모바일 (Galaxy S, iPhone Mini 등)
   ============================================================ */
@media (max-width: 480px) {

    .topbar-inner {
        padding: 8px 10px 8px 54px;
        gap: 4px;
    }
    .brand-en {
        font-size: 15px;
    }
    .brand-tag {
        display: none;                /* 너무 좁으면 Trend 태그 숨김 */
    }
    .user-badge {
        max-width: 70px;
        font-size: 11px;
    }
    .topnav-link {
        font-size: 11px;
        padding: 3px 6px;
    }
    .topnav-link.primary {
        padding: 4px 8px;
    }

    .content {
        padding: 12px 10px;
    }
    .card {
        padding: 14px 12px;
    }

    .post-detail {
        padding: 14px 12px;
    }
    .post-detail h1 {
        font-size: 18px;
    }
    .post-content {
        font-size: 14.5px;
        line-height: 1.75;
    }
    .post-summary {
        font-size: 13.5px;
        padding: 10px 12px;
    }

    /* 국가 정보 — 더 작게 */
    .country-info {
        padding: 14px 12px;
    }
    .country-info-flag {
        font-size: 36px;
    }
    .country-info-name-ko {
        font-size: 20px;
    }
    .country-info-grid {
        grid-template-columns: 1fr;            /* 1열로 */
    }
}
/* =========================================
   검색 히어로 - 모바일 반응형
   ========================================= */
@media (max-width: 768px) {
    .search-hero {
        padding: 28px 16px 24px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .search-hero-title {
        font-size: 22px;
    }

    .search-hero-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .search-hero-box {
        padding: 4px 4px 4px 14px;
        border-radius: 24px;
    }

    .search-hero-icon {
        font-size: 16px;
        margin-right: 8px;
    }

    .search-hero-input {
        font-size: 16px;  /* ★iOS 자동확대 방지 - 16px 이상 유지 */
        padding: 10px 4px;
    }

    .search-hero-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .search-hero-suggest {
        font-size: 12px;
    }

    .search-hero-chip {
        padding: 4px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .search-hero {
        padding: 22px 12px 18px;
    }

    .search-hero-title {
        font-size: 18px;
    }

    .search-hero-subtitle {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .search-hero-box {
        padding: 3px 3px 3px 12px;
    }

    .search-hero-btn {
        padding: 7px 14px;
        font-size: 12px;
    }
}
/* =========================================
   회원가입 폼 - 모바일 반응형
   ========================================= */
@media (max-width: 480px) {
    .birth-row {
        /* 년/월/일은 좁아도 가로 유지 (한 줄에 다 들어감) */
        gap: 6px;
    }
    .birth-row select {
        font-size: 14px;
        padding: 8px 6px;
    }

    .phone-row {
        /* 모바일에서는 세로 배치 (좁은 화면) */
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .profile-section {
        padding: 12px;
    }
}