/* ============================================================
   Hans Travel — Mobile & Tablet refinements
   ------------------------------------------------------------
   Loaded LAST (end of <body> in _SiteLayout) so these rules win
   over the per-section inline <style> blocks by source order.

   HARD RULE: every layout selector lives inside a `max-width`
   media query, so desktop (>= 1025px) never sees them and its
   layout is guaranteed unchanged. The only base-level rules are
   the two that HIDE the mobile-only bottom-bar toggle on desktop.
   ============================================================ */

/* The bottom-bar toggle exists in the DOM on every page but is inert on desktop:
   the checkbox is state-only and the handle is not displayed, so the floating
   stack renders exactly as before at >=1025px. */
.ht-bar-toggle { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ht-bar-handle { display: none; }

/* ───────────────────────── Tablet (≤1024px) ───────────────────────── */
@media (max-width: 1024px) {
    /* 홍보 팝업(.ht-promo) — 예전엔 여기서 통째로 숨겼다("좌측 레일 자리 없음").
       그 결과 태블릿·모바일 방문자에게는 홍보가 아예 도달하지 않았다. 지금은
       _PromoPopup.cshtml 이 ≤1024px 에서 좌측 레일 대신 중앙 모달로 전환하므로
       여기서 숨기지 않는다. (이 파일이 마지막에 로드돼 인라인 스타일을 이기므로
       display 규칙을 되살리면 그쪽 미디어쿼리가 무력화된다.) */
    .section { padding: 76px 0; }
    .hans-teams { padding: 40px 0 !important; }
}

/* ───────────────────────── Mobile (≤768px) ───────────────────────── */
@media (max-width: 768px) {

    /* ── Header — always a SOLID, visible, sticky bar on mobile ──────────────
       The transparent-over-hero treatment made the white logo + hamburger
       vanish over bright hero images and depended on a JS "scrolled" class for
       its background (fragile on mobile → header read as "not sticky"). A solid
       fixed bar is robust and matches the sub-page header the client preferred.
       `overflow-x:clip` blocks horizontal scroll without creating a scroll
       container, which keeps position:fixed reliable on mobile browsers. */
    html, body { overflow-x: clip; }
    .header,
    .header.header--transparent,
    .header.header--transparent:not(.scrolled),
    .header.scrolled {
        /* top:0 을 강제하면 JS 가 넣는 배너 오프셋(header.style.top)이 덮여
           헤더가 배너와 겹친다. --header-top 변수를 쓰면 배너 아래로 내려간다. */
        position: fixed !important; top: var(--header-top, 0px) !important;
        background: #fff !important;
        border-bottom: 1px solid var(--border, #e5e7eb) !important;
        box-shadow: 0 1px 0 rgba(20, 23, 40, .04);
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    /* Full-colour logo on the white bar (undo the white-invert filter). */
    .header .logo-img,
    .header--transparent:not(.scrolled) .logo-img { filter: none !important; }

    .header-inner,
    .header--solid .header-inner { height: 58px; }
    .logo-img,
    .header--solid .logo-img { height: 40px !important; }
    .nav { top: 58px !important; }

    /* Hamburger: always shown, dark on the white bar so it's clearly visible. */
    .mobile-toggle,
    .header--transparent:not(.scrolled) .mobile-toggle {
        display: block !important;
        color: var(--text, #14233a) !important;
        background: transparent !important;
        font-size: 24px; padding: 6px 8px;
    }

    /* ── Mobile hamburger menu (the dropdown panel) ──────────────────────────
       The transparent-header rule paints nav links white, which made them
       invisible on the white panel. Force dark text, lay items out as
       full-width divided rows, and turn the hover-only "[v]" submenu into a
       tap-to-expand accordion (driven by .nav-item.open from the JS above). */
    .nav {
        top: 58px !important; left: 0; right: 0;
        background: #fff;
        padding: 4px 0 14px !important;
        gap: 0 !important;
        max-height: calc(100vh - 58px); overflow-y: auto;
        box-shadow: 0 16px 34px rgba(20, 23, 40, .14);
        border-top: 1px solid var(--border, #e5e7eb);
    }
    /* Dark, visible text for every link in the menu. */
    .header .nav a,
    .header .nav .nav-mega-trigger,
    .header .nav .nav-simple-trigger,
    .header--transparent:not(.scrolled) .nav > a,
    .header--transparent:not(.scrolled) .nav > .nav-item > .nav-mega-trigger,
    .header--transparent:not(.scrolled) .nav > .nav-item > .nav-simple-trigger {
        color: var(--text, #14233a) !important;
    }
    /* Top-level rows: full width, divided, even padding; no hover underline. */
    .nav > a,
    .nav > .nav-item { display: block; width: 100%; border-bottom: 1px solid var(--border, #e5e7eb); }
    .nav > a,
    .nav .nav-mega-trigger,
    .nav .nav-simple-trigger {
        padding: 15px 20px !important;
        font-size: 16px !important; font-weight: 600;
        border-bottom: none !important;
    }
    .nav a::after { display: none !important; }
    .nav-simple-wrap, .nav-mega-wrap { position: static; }

    /* "[v]" disclosure caret on 한스 이야기 + 여행지 — rotates when expanded. */
    .nav .nav-simple-trigger,
    .nav .nav-mega-trigger { display: flex !important; align-items: center; justify-content: space-between; }
    .nav .nav-simple-trigger .nav-caret,
    .nav .nav-mega-trigger .nav-caret { display: inline-block; font-size: 22px; opacity: .5; transition: transform .2s ease; }
    .nav-item.open .nav-simple-trigger .nav-caret,
    .nav-item.open .nav-mega-trigger .nav-caret { transform: rotate(180deg); opacity: .8; }

    /* ── 여행지 2단 아코디언 ──────────────────────────────────────────────
       데스크톱 .mega-inner(2-pane, hover 전용)는 감추고, 같은 데이터로 그린
       목록형 .mega-mobile 을 쓴다. 예전엔 여행지 행이 바로 /tours 로 가서
       모바일에서는 지역·국가를 고를 방법이 아예 없었다. */
    .mega-dropdown {
        position: static !important; transform: none !important;
        width: 100% !important; min-width: 0 !important; max-width: none !important;
        background: #F7F8FB; border: none !important; border-radius: 0 !important;
        box-shadow: none !important; padding: 0 !important;
        opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
        display: none;
    }
    .mega-dropdown::before { display: none !important; }
    .nav-item.open > .mega-dropdown { display: block !important; }
    /* 목록형(.mega-mobile)만 쓰고 데스크톱 2-pane 은 감춘다. .mm-* 의 생김새는
       _SiteLayout 의 공통 스타일에 있다 — 터치 태블릿(hover:none)도 같은 목록을
       쓰기 때문에 한 곳에서만 관리한다. */
    .mega-inner { display: none !important; }
    .mega-mobile { display: block; }

    /* Submenu becomes an inline accordion panel (collapsed unless .open). */
    .nav-simple-dropdown {
        position: static !important; transform: none !important;
        min-width: 0 !important; width: 100% !important; max-width: none !important;
        background: #F7F8FB; border: none !important; border-radius: 0 !important;
        box-shadow: none !important; padding: 2px 0 6px !important;
        opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    }
    .nav-item.open > .nav-simple-dropdown { display: block !important; }
    .header .nav-simple-dropdown a { padding: 12px 20px 12px 38px !important; font-size: 15px; font-weight: 500; }
    .header .nav-simple-dropdown a span { margin-left: auto; opacity: .6; }

    /* 상담 예약 → brand button inside the menu. */
    .nav .nav-cta {
        margin: 14px 20px 2px !important;
        background: var(--accent, #31349C) !important; color: #fff !important;
        justify-content: center; border-radius: 8px;
    }
    .nav .nav-cta::after { display: none !important; }

    /* ── Typography — the global 3-tier system forces h2 → 30px at all widths,
       which clips long Korean headings on a phone. ──────────────────────────── */
    body h2,
    body .section-title,
    body [class*="section-title"],
    body h2 * { font-size: 24px !important; line-height: 1.32 !important; }
    .section-subtitle { font-size: 16px; }
    .section-header { margin-bottom: 32px; }

    /* ── Hero — full-width, stacked CTAs make better thumb targets. ─────────── */
    .hero-content { padding-left: 20px; padding-right: 20px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { width: 100%; }

    /* ── Floating menu → compact 2-row app bar (with hide/show toggle) ───────── */
    .float-cta {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 -3px 14px rgba(20, 23, 40, .10);
        padding: 4px 2px;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        z-index: 1000;
        transition: transform .25s ease;
    }
    .float-btn {
        width: auto; height: auto; min-height: 0;
        flex-direction: column; gap: 3px;
        padding: 5px 2px; border-radius: 8px;
        background: transparent !important;
        color: var(--text, #14233a) !important;
        border: none !important; box-shadow: none !important;
    }
    .float-btn:active { background: var(--accent-light, rgba(49,52,156,.08)) !important; }
    /* Keep the desktop colored icon badge on mobile too (just smaller). Only the
       logo carries the brand color; the button + label stay uniform on the white
       bar. Shape/background/glyph-color inherit from the desktop .float-btn i and
       either the per-button badge rule (.float-phone i) or the admin-managed
       --fab-badge-bg/fg custom props (카톡 상담, 유튜브, etc.) — we override only
       the SIZE here, and must NOT re-set background/color or the badge flattens
       / loses its per-button color. */
    .float-btn i { width: 30px; height: 30px; font-size: 16px; line-height: 1; }
    .float-btn .float-label { display: inline-block; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
    .float-top { opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: transparent !important; }

    /* Toggle handle — round button pinned to the bottom-right corner. OPEN state
       shows the ✕ (close) in a neutral gray so it stands apart from the colorful
       grid buttons and sits at the very bottom (no collision); CLOSED state is the
       brand-colored apps button that brings the bar back. */
    .ht-bar-handle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 12px; bottom: 12px; z-index: 1002;
        width: 42px; height: 42px; border-radius: 50%;
        background: #4B5563; color: #fff; font-size: 22px;
        box-shadow: 0 6px 16px rgba(20, 23, 40, .28); cursor: pointer;
        transition: bottom .25s ease, transform .15s ease, background .15s ease;
    }
    .ht-bar-handle:active { transform: scale(.93); }
    .ht-bar-handle .ht-bar-ic-show { display: none; }

    /* Hidden state — slide the bar off-screen; handle becomes the brand apps button. */
    .ht-bar-toggle:checked ~ .float-cta { transform: translateY(110%); }
    .ht-bar-toggle:checked ~ .ht-bar-handle { bottom: 16px; background: var(--brand, #31349C); }
    .ht-bar-toggle:checked ~ .ht-bar-handle .ht-bar-ic-hide { display: none; }
    .ht-bar-toggle:checked ~ .ht-bar-handle .ht-bar-ic-show { display: inline; }

    /* Keep content/footer clear of the app bar. --ht-appbar-h / --ht-bookingbar-h
       are measured at runtime (script in _SiteLayout) so the reserved space always
       matches the ACTUAL bar height, however many floating icons the admin adds.
       When the bar is hidden we reclaim the space so content uses the full height. */
    body { padding-bottom: var(--ht-appbar-h, 160px); }
    body:has(.ht-bar-toggle:checked) { padding-bottom: 0; }

    /* Tour-detail booking bar stacks ABOVE the app bar (both fully visible — no
       overlap); when the app bar is hidden it drops to the bottom and only its own
       height is reserved, so the content expands to ~full height. */
    body:has(.mobile-cta) { padding-bottom: calc(var(--ht-appbar-h, 160px) + var(--ht-bookingbar-h, 66px)); }
    /* 앱바가 접히거나(수동) 스크롤로 숨을 때 예약바가 같이 내려온다 —
       뚝 끊기지 않게 앱바와 같은 속도로 움직인다. */
    body:has(.mobile-cta) .mobile-cta { bottom: var(--ht-appbar-h, 160px); transition: bottom .25s ease; }
    body:has(.mobile-cta):has(.ht-bar-toggle:checked) { padding-bottom: var(--ht-bookingbar-h, 66px); }
    body:has(.mobile-cta):has(.ht-bar-toggle:checked) .mobile-cta { bottom: 0; }

    /* 앱바를 닫으면 예약바가 화면 맨 아래로 내려오는데, 토글 핸들도 같은 자리라
       '예약 신청' 버튼 오른쪽을 34x42px 가렸다(핸들 z-index 1002 > 예약바 999).
       보이지 않는 것뿐 아니라 그 부분을 눌러도 예약이 아니라 핸들이 눌린다 —
       결제 직전 단계의 주 전환 버튼이라 그대로 둘 수 없다.
       예약바가 있는 화면에서는 핸들을 예약바 위로 올린다.
       (앱바가 열린 상태에서는 예약바가 앱바 위에 있고 핸들은 그 아래라 겹치지
       않는다 — 그때는 기존 bottom:12px 그대로.) */
    body:has(.mobile-cta):has(.ht-bar-toggle:checked) .ht-bar-handle {
        bottom: calc(var(--ht-bookingbar-h, 66px) + 12px);
    }

    /* ── 스크롤 자동 숨김/표시 ────────────────────────────────────────────
       앱바가 179px, 화면의 22% 를 상시 점유한다. 읽는 동안에는 비켜주고
       위로 올리면 돌아오게 한다(Material bottom app bar · iOS Safari 툴바와
       같은 패턴). 사용자가 버튼을 눌러 여닫을 필요 자체를 줄인다.

       일시 상태라 저장하지 않는다. 수동으로 닫아둔 경우(:checked)에는
       스크롤이 개입하지 않는다 — 명시적 선택이 우선이다.
       핸들도 같이 숨긴다. 바는 사라졌는데 핸들만 X(닫기) 아이콘으로 남으면
       상태가 어긋나 보인다.
       본문 여백(--ht-appbar-h)은 건드리지 않는다. 스크롤마다 바뀌면 화면이 튄다. */
    body[data-bar-scroll="hidden"] .float-cta { transform: translateY(110%); }
    body[data-bar-scroll="hidden"] .ht-bar-handle { transform: translateY(160%); }
    /* 앱바만 사라지면 예약바 아래에 빈 공간이 남는다 — 수동으로 닫았을 때와
       똑같이 바닥으로 내린다. */
    body[data-bar-scroll="hidden"]:has(.mobile-cta) .mobile-cta { bottom: 0; }
}

/* ───────────────────────── Small phones (≤480px) ───────────────────────── */
@media (max-width: 480px) {
    body h2,
    body .section-title,
    body [class*="section-title"],
    body h2 * { font-size: 22px !important; }
    .container { padding-left: 16px; padding-right: 16px; }
    .float-btn i { width: 28px; height: 28px; font-size: 15px; }
    .float-btn .float-label { font-size: 9px; }
}
