/* ============================================================
   MY WEDDING STORY — Breakpoint & Adaptive Layout Rules
   Breakpoint Policy (canonical):
     Mobile:        0 – 767px   → mobile/*-m.html files only
     Tablet:        768 – 1023px → desktop *.html (this file)
     Desktop:       1024 – 1439px → standard desktop layout
     Large Desktop: 1440px+      → same IA, wider breathing room
   ============================================================
   NOTE: This file must be included in every desktop HTML file.
   Mobile files (mobile/*-m.html) must NOT include this file.
   ============================================================ */


/* ============================================================
   §1 — LARGE DESKTOP (1440px+)
   Goal: prevent uncontrolled full-width stretching,
         add breathing room without changing IA or components.
   ============================================================ */
@media (min-width: 1440px) {

  /* ── Global containers ── */
  .utility-inner,
  .header-inner,
  .ia-nav-inner,
  .hero-banner-wrap,
  .main-container,
  .page-inner,
  .listing-wrap,
  .page-body,
  .content-wrap,
  .section-wrap,
  .footer-inner {
    max-width: 1320px;
  }

  /* ── Global section vertical rhythm ── */
  .main-body          { padding-top: 32px; padding-bottom: 56px; }
  .section-block      { padding: 28px 32px; }
  .hero-banner-wrap   { padding-top: 32px; }

  /* ── Hero carousel height ── */
  .hero-carousel      { height: 380px; }

  /* ── venue-detail / studio-detail hero ── */
  :root               { --hero-h: min(74vh, 640px); }

  /* ── Listing page sidebar ── */
  .listing-wrap       { padding: 36px 32px; }
  .filter-sidebar     { min-width: 280px; }

  /* ── My Page layout ── */
  .mp-layout,
  .mp-wrap            { padding: 36px 32px; }   /* §2 와 동일하게 .mp-wrap 포함 */
  .mp-sidenav         { min-width: 260px; }

  /* ── Right-column module ── */
  .col-right          { flex: 0 0 400px; width: 400px; }

  /* ── Venue / Studio detail side panel ── */
  .side-col,
  .booking-panel-wrap,
  .sticky-booking      { min-width: 360px; max-width: 400px; }

  /* ── Card grid spacing ── */
  .venue-card-grid,
  .studio-grid,
  .community-grid,
  .article-grid,
  .reviews-grid        { gap: 20px; }

  /* ── Section spacing ── */
  .doc-section,
  .page-section        { margin-bottom: 64px; }

  /* ── Typography: allow slight headline size increase ── */
  .hero-title          { font-size: 34px; }
  .page-h1             { font-size: clamp(26px, 2.4vw, 38px); }
}


/* ============================================================
   §2 — TABLET (768–1023px)
   Goal: desktop IA stays intact; reduce density, adapt grids,
         collapse sticky side panels, simplify forms.
   ============================================================ */
@media (max-width: 1023px) {

  /* ──────────────────────────────────────────────
     2-A  GLOBAL CONTAINERS
     Reduce side padding; allow full-width content.
  ────────────────────────────────────────────── */
  .utility-inner,
  .header-inner,
  .ia-nav-inner,
  .hero-banner-wrap,
  .main-container,
  .page-inner,
  .content-wrap,
  .section-wrap,
  .footer-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ──────────────────────────────────────────────
     2-B  UTILITY BAR
     Hide lower-priority utility links; keep brand tag.
  ────────────────────────────────────────────── */
  .util-divider       { display: none; }
  .utility-bar        { height: 32px; }

  /* ──────────────────────────────────────────────
     2-C  HEADER
     Collapse to 3-column → auto grid; shrink logo.
  ────────────────────────────────────────────── */
  .header-inner {
    grid-template-columns: 180px 1fr auto;
    gap: 16px;
    padding-bottom: 14px;
  }
  .header__logo-img   { height: 36px !important; }
  .logo-main          { font-size: 15px; }

  /* Hide keyword chips row on tablet (saves vertical space) */
  .keyword-row        { display: none; }

  /* Compact header action buttons */
  .header-mybox-link span,
  .header-cart-link span,
  .header-notification-btn span { font-size: 10px; }

  /* ──────────────────────────────────────────────
     2-D  IA / GNB NAVIGATION
     Reduce padding; allow overflow scroll if needed.
  ────────────────────────────────────────────── */
  .ia-nav-inner       { overflow-x: auto; }
  .ia-menu            { justify-content: flex-start; }
  .ia-link            { padding: 12px 14px; font-size: 13px; }
  .ia-link i          { display: none; }

  /* ──────────────────────────────────────────────
     2-E  HERO BANNER (index.html)
  ────────────────────────────────────────────── */
  .hero-carousel      { height: 260px; }
  .hero-title         { font-size: 22px; }
  .hero-visual        { display: none; }
  .hero-cta           { padding: 10px 18px; font-size: 13px; }

  /* ──────────────────────────────────────────────
     2-F  INDEX PAGE: TWO-COLUMN → SINGLE COLUMN
     .col-left / .col-right stack vertically.
  ────────────────────────────────────────────── */
  .main-container     { flex-direction: column; }
  .col-left           { flex: none; width: 100%; }
  .col-right          { flex: none; width: 100%; align-self: auto; }

  /* Right-column right-module stacking */
  .right-module       { width: 100%; }

  /* Index page review grid: 3-col → 2-col */
  .review-grid        { grid-template-columns: repeat(2, 1fr); }
  .review-grid .review-card:last-child { display: none; }

  /* Index page news: side-by-side → stacked */
  .news-content       { grid-template-columns: 1fr; }
  .news-featured-card { display: none; }

  /* Index page shop split → stack */
  .shop-split         { grid-template-columns: 1fr; }

  /* ──────────────────────────────────────────────
     2-G  VENUE / STUDIO LISTING PAGES
     Filter sidebar: collapse from 268px fixed to hidden;
     show filter toggle button instead.
     Card grid: 3–4 col → 2 col.
  ────────────────────────────────────────────── */

  /* listing-wrap: side-by-side → single column */
  .listing-wrap       {
    grid-template-columns: 1fr !important;
    padding: 20px 20px;
    gap: 16px;
  }

  /* Filter sidebar: collapse on tablet */
  .filter-sidebar     {
    position: static !important;
    width: 100% !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .filter-sidebar.filter-open {
    max-height: 2000px;
  }

  /* Filter toggle pill — show on tablet */
  .filter-toggle-btn  { display: inline-flex !important; }

  /* Card grid: dense multi-col → 2 col */
  .venue-card-grid,
  .card-grid-3,
  .card-grid-4        { grid-template-columns: repeat(2, 1fr) !important; }

  /* Studio grid */
  .studio-grid        { grid-template-columns: repeat(2, 1fr) !important; }

  /* Wedding dress grid */
  .dress-grid,
  .dress-card-grid    { grid-template-columns: repeat(2, 1fr) !important; }

  /* Venue category listing: separate layout */
  .map-layout         { grid-template-columns: 1fr !important; }
  .map-panel          { display: none; }

  /* Sort/view bar: reduce gap */
  .sort-bar           { gap: 8px; }
  .sort-bar .view-btns { display: none; }

  /* ──────────────────────────────────────────────
     2-H  DETAIL PAGES (venue-detail, studio-detail)
     Collapse right sticky panel to inline summary
     or bottom sticky CTA.
  ────────────────────────────────────────────── */

  /* page-body: two-col (content + sticky panel) → single col */
  .page-body          {
    grid-template-columns: 1fr !important;
    padding: 0 20px 80px !important;
    gap: 24px;
  }

  /* Side column: un-stick, move inline after main content */
  .side-col           {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    order: 2;
  }

  /* Booking / CTA panel on detail pages: convert to bottom sticky */
  .booking-panel-wrap,
  .sticky-booking     {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    top: auto !important;
    z-index: 300;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    max-height: 72px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
    padding: 12px 20px;
  }
  .booking-panel-wrap.panel-expanded,
  .sticky-booking.panel-expanded {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Detail page: strength grid 3 → 2 */
  .strength-grid      { grid-template-columns: repeat(2, 1fr) !important; }

  /* Detail hall grid */
  .hall-grid          { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }

  /* Section nav: allow horizontal scroll */
  .section-nav        { overflow-x: auto; scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }

  /* ──────────────────────────────────────────────
     2-I  VENUE SPECIAL OFFERS / REVIEWS PAGES
  ────────────────────────────────────────────── */
  .offers-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid       { grid-template-columns: repeat(2, 1fr) !important; }

  /* ──────────────────────────────────────────────
     2-J  COMMUNITY PAGES
     Hub grid, card grids → 2 col.
     Write/detail pages: full-width.
  ────────────────────────────────────────────── */
  .community-hub-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .community-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .community-layout,
  .qa-layout,
  .talk-grid,
  .rr-grid,
  .main-layout        { grid-template-columns: 1fr !important; }
  .community-sidebar,
  .talk-sidebar,
  .rr-sidebar,
  .sidebar            {
    position: static !important;
    width: 100% !important;
    display: none;        /* hide on tablet; can be toggled */
  }
  .post-layout        { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-K  WEDDING MAGAZINE
  ────────────────────────────────────────────── */
  .magazine-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  .magazine-layout    { grid-template-columns: 1fr !important; }
  .magazine-sidebar   { display: none; }
  .featured-article   { grid-template-columns: 1fr !important; }
  .article-grid       { grid-template-columns: repeat(2, 1fr) !important; }

  /* ──────────────────────────────────────────────
     2-L  REVIEWS PAGES
  ────────────────────────────────────────────── */
  .review-list-layout,
  .rr-grid            { grid-template-columns: 1fr !important; }
  .review-write-wrap  { max-width: 100%; padding: 20px; }

  /* ──────────────────────────────────────────────
     2-M  BRIDE PLANNER / FAMILY SUPPORT
  ────────────────────────────────────────────── */
  .planner-grid,
  .service-grid,
  .why-grid,
  .process-grid,
  .rec-grid,
  .trust-grid         { grid-template-columns: repeat(2, 1fr) !important; }
  .service-grid       { grid-template-columns: 1fr !important; } /* 서비스 그리드는 단일 컬럼 */
  .planner-layout,
  .content-grid,
  .page-layout        { grid-template-columns: 1fr !important; }
  .planner-sidebar    { display: none; }
  .support-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .support-layout     { grid-template-columns: 1fr !important; }
  .policy-cards       { grid-template-columns: repeat(2, 1fr) !important; }

  /* ──────────────────────────────────────────────
     2-N  MY PAGE (mypage-home, mypage-scheduler,
          mypage-likes, mypage-consultations, etc.)
     Keep desktop IA; collapse fixed left sidebar
     to top horizontal nav or hidden nav.
  ────────────────────────────────────────────── */

  /* Page layout: sidebar + content → stacked */
  .mp-wrap,
  .mp-layout          {
    grid-template-columns: 1fr !important;
    padding: 20px 20px;
    gap: 16px;
  }

  /* Side navigation: sticky → top inline strip */
  .mp-sidenav         {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 0 0 12px;
    scrollbar-width: none;
    border-bottom: 1px solid #eaecef;
    margin-bottom: 8px;
  }
  .mp-sidenav::-webkit-scrollbar { display: none; }

  /* Side nav items → compact horizontal tabs */
  .mp-nav-item        {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
  }
  .mp-nav-section-label { display: none; }

  /* KPI row: 4 → 2 per row */
  .kpi-row            { grid-template-columns: repeat(2, 1fr) !important; }

  /* Dashboard secondary grid */
  .dash-grid          { grid-template-columns: 1fr !important; }
  .content-grid       { grid-template-columns: 1fr !important; }

  /* Favourites grid */
  .fav-row            { grid-template-columns: repeat(2, 1fr) !important; }
  .col-side .fav-row  { grid-template-columns: repeat(2, 1fr) !important; }

  /* AI card row: 2-col stays readable on tablet */
  .ai-card-row        { grid-template-columns: 1fr 1fr; }

  /* Timeline phases: 6 → 3 */
  .tl-phases,
  .timeline-phases-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Scheduler body: side-by-side tasks → stack */
  .sch-body           { grid-template-columns: 1fr !important; }

  /* Consultation list */
  .consultation-grid  { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-O  PARTNER LANDING / PARTNER SIGNUP
  ────────────────────────────────────────────── */
  .partner-hero-inner { flex-direction: column !important; }
  .partner-plan-grid  { grid-template-columns: 1fr !important; }
  .partner-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .signup-cols        { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-P  RESERVATION / FORMS
     Prefer 1-column flow; keep 2-col only if
     clearly readable (short label-input pairs).
  ────────────────────────────────────────────── */
  .reservation-layout { grid-template-columns: 1fr !important; }
  .reservation-sidebar {
    position: static !important;
    width: 100% !important;
  }
  .form-2col          { grid-template-columns: 1fr !important; }
  .form-row-split     { flex-direction: column !important; }

  /* Reservation step summary: sticky → inline */
  .booking-summary    {
    position: static !important;
    width: 100% !important;
    margin-top: 20px;
  }

  /* ──────────────────────────────────────────────
     2-Q  SEARCH PAGE
  ────────────────────────────────────────────── */
  .search-layout      { grid-template-columns: 1fr !important; }
  .search-filters     {
    position: static !important;
    width: 100% !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .search-filters.filter-open { max-height: 2000px; }
  .search-results-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ──────────────────────────────────────────────
     2-R  AUTH / SIGNUP PAGES
     Keep single column centered; limit max-width.
  ────────────────────────────────────────────── */
  .auth-wrap          { max-width: 520px; padding: 32px 24px; }
  .auth-cols          { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-S  WEDDING DRESS PAGES
  ────────────────────────────────────────────── */
  .dress-detail-layout { grid-template-columns: 1fr !important; }
  .dress-side-col      {
    position: static !important;
    width: 100% !important;
  }
  .dress-gallery-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .consult-grid        { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-T  NOTIFICATION PAGE
  ────────────────────────────────────────────── */
  .notification-layout { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────
     2-U  FOOTER
  ────────────────────────────────────────────── */
  .footer-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
  .footer-inner       { padding: 32px 20px 24px; }

  /* ──────────────────────────────────────────────
     2-V  PLACE HOME (place-home.html)
  ────────────────────────────────────────────── */
  .place-home-grid    { grid-template-columns: 1fr !important; }
  .place-home-sidebar { display: none; }
  .category-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .place-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ──────────────────────────────────────────────
     2-W  SECTION SPACING NORMALISATION
     Remove oversized desktop top/bottom padding
     that creates awkward empty areas on tablet.
  ────────────────────────────────────────────── */
  .section-block      { padding: 20px; margin-bottom: 16px; }
  .main-body          { padding-top: 16px; padding-bottom: 32px; }
  .hero-banner-wrap   { padding-top: 16px; }

  /* ──────────────────────────────────────────────
     2-X  TOUCH TARGET MINIMUM (44×44px)
     Ensure tappable elements meet accessibility
     minimum on tablet touch screens.
  ────────────────────────────────────────────── */
  .ia-link,
  .util-link,
  .more-link,
  .keyword-chip,
  .chip,
  .filter-chip,
  .tab-link,
  .sort-btn           { min-height: 40px; display: inline-flex; align-items: center; }

  /* Buttons: ensure minimum touch target */
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-pill,
  .btn-hero-primary,
  .btn-hero-secondary { min-height: 44px; }

  /* SSOT 컴포넌트 터치 타겟 (mws-layout.css — 2026-05) */
  .tab-btn            { min-height: 40px; }
  .mp-nav-tab         { min-height: 44px; }
  .g-toast-wrap       { z-index: 9999; } /* z-index 스택 보장 */

  /* ──────────────────────────────────────────────
     2-Y  VENUE CATEGORY SPECIFIC OVERRIDES
     (venue-general, hotel, chapel, house, etc.)
  ────────────────────────────────────────────── */
  .place-subnav       { overflow-x: auto; scrollbar-width: none; }
  .place-subnav::-webkit-scrollbar { display: none; }
  .filter-strip       { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .filter-strip::-webkit-scrollbar { display: none; }

  /* Venue sub-nav tabs: horizontal scroll on tablet */
  .vsn-inner          { overflow-x: auto; justify-content: flex-start; }

  /* ──────────────────────────────────────────────
     2-Z  MISC COMPACT ADJUSTMENTS
  ────────────────────────────────────────────── */
  /* Compare fields panel */
  .cf-pkg-grid        { grid-template-columns: 1fr 1fr !important; }

  /* My page stats bar */
  .mybox-stats        { grid-template-columns: repeat(2, 1fr); }

  /* Skeleton wrapper */
  .skeleton-wrapper   { grid-template-columns: 1fr !important; }

  /* News skeleton */
  .news-content       { grid-template-columns: 1fr; }

}


/* ============================================================
   §3 — TABLET LOWER BOUND FINE-TUNING (768–880px)
   Extra density reduction for the narrowest tablet widths.
   ============================================================ */
@media (max-width: 880px) {

  /* Header: shrink further */
  .header-inner       { grid-template-columns: 160px 1fr auto; gap: 12px; }
  .header__logo-img   { height: 32px !important; }

  /* GNB: tighter */
  .ia-link            { padding: 10px 10px; font-size: 12px; }

  /* Index hero */
  .hero-carousel      { height: 220px; }
  .hero-title         { font-size: 20px; }

  /* 2-col card grid → maintain 2 col but reduce gap */
  .venue-card-grid,
  .studio-grid,
  .dress-grid,
  .offers-grid,
  .reviews-grid,
  .community-grid,
  .article-grid       { gap: 12px !important; }

  /* Partner plan cards: stay single col */
  .partner-plan-grid  { grid-template-columns: 1fr !important; }

  /* KPI row stays 2 col */
  .kpi-row            { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: single col */
  .footer-grid        { grid-template-columns: 1fr !important; gap: 20px; }
}


/* ============================================================
   §4 — LARGE DESKTOP CONTENT WIDTH GUARD (1600px+)
   Prevent extreme whitespace on very wide displays.
   Content stays centered, readable, not stretched.
   ============================================================ */
@media (min-width: 1600px) {

  .utility-inner,
  .header-inner,
  .ia-nav-inner,
  .hero-banner-wrap,
  .main-container,
  .page-inner,
  .listing-wrap,
  .page-body,
  .content-wrap,
  .section-wrap,
  .footer-inner       { max-width: 1400px; }

  /* Ensure body background fills but content stays centered */
  body                { background-attachment: fixed; }
}