@charset "utf-8";

/* Home page mobile/tablet — PC (≥1360px) untouched; scoped to body.home only */

@media (max-width: 1359px) {
  body.home {
    --layout-gutter: 24px;
    --layout-inset: 24px;
    --header-hamburger: 64px;
    --layout-max: 100%;
    overflow-x: hidden;
  }

  html:has(body.home) {
    overflow-x: hidden;
  }

  /* Remove desktop min-width shell that forces horizontal scroll */
  body.home #sh_hd,
  body.home #sh_section,
  body.home #sh_container,
  body.home #sh_ft {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Header */
  body.home #shGnb {
    height: var(--header-hamburger);
    padding-right: var(--header-hamburger);
  }

  body.home #shGnb .sh_nav,
  body.home #shGnb .sh_lnb_bg {
    display: none !important;
  }

  body.home #shGnb .sh_logo {
    padding-left: var(--layout-inset);
  }

  body.home #shGnb .sh_logo .site-logo {
    height: 40px;
  }

  body.home #pfBtn {
    width: var(--header-hamburger);
    height: var(--header-hamburger);
  }

  /* Hero */
  body.home #mainVisual ul li {
    min-height: max(640px, 100svh);
  }

  body.home #mainVisual .main_txt {
    left: var(--layout-inset);
    right: var(--layout-inset);
    top: 40%;
    max-width: none;
    width: calc(100% - (var(--layout-inset) * 2));
    box-sizing: border-box;
  }

  body.home #mainVisual .main_txt h1 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 1.14;
  }

  body.home #mainVisual .main_txt .txt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.6;
  }

  body.home #mainVisual .main_cta {
    margin-top: 28px;
    gap: 12px;
    font-size: 11px;
  }

  body.home #mainVisual .main_cta .cta-line {
    flex: 0 0 72px;
    width: 72px;
  }

  body.home #mainVisual .controls {
    right: var(--layout-inset);
    bottom: 28px;
  }

  body.home #mainVisual .controls span svg {
    width: 32px;
    height: 32px;
  }

  /* Section gutters — ensure inner blocks respect viewport */
  body.home #hqBusiness .section-inner,
  body.home #hqFeaturedBrands .brands-inner,
  body.home #inc02 .inc02-inner,
  body.home #globalNetwork .network-inner,
  body.home #hqMediaInsights .media-insights-inner,
  body.home #sh_ft .ft-inner {
    max-width: 100%;
    padding-left: var(--layout-gutter);
    padding-right: var(--layout-gutter);
    box-sizing: border-box;
  }

  /* Business slider peek without page overflow */
  body.home #hqBusiness .business-slider-wrap {
    overflow: hidden;
  }

  /* Featured brands carousel edge alignment */
  body.home #hqFeaturedBrands .brands-carousel {
    padding: 18px 44px 32px;
    overflow: hidden;
  }

  body.home #hqFeaturedBrands .brands-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }

  body.home #hqFeaturedBrands .brands-tabs::-webkit-scrollbar {
    display: none;
  }

  body.home #hqFeaturedBrands .brands-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.home #hqFeaturedBrands .brand-hero {
    width: 100%;
    min-height: 0;
    height: auto;
  }

  body.home #hqFeaturedBrands .brand-hero-stage {
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 3;
  }

  body.home #hqFeaturedBrands .scroll-hint {
    display: none;
  }
}

@media (max-width: 768px) {
  body.home {
    --layout-gutter: 20px;
    --layout-inset: 20px;
    --header-hamburger: 60px;
  }

  body.home #shGnb .sh_logo .site-logo {
    height: 36px;
  }

  body.home #mainVisual .main_txt h1 {
    font-size: clamp(30px, 8.2vw, 42px);
  }

  body.home #mainVisual .main_txt .txt {
    font-size: 15px;
  }

  body.home #hqFeaturedBrands .brands-carousel {
    padding: 16px 40px 30px;
  }

  body.home #hqFeaturedBrands .carousel-nav {
    width: 34px;
    height: 34px;
  }

  body.home #hqFeaturedBrands .carousel-prev {
    left: 8px;
  }

  body.home #hqFeaturedBrands .carousel-next {
    right: 8px;
  }

  body.home #hqFeaturedBrands .brand-hero-stage {
    min-height: 240px;
  }
}

/* Mobile typography — keep-all on all text (Korean natural line breaks) */
@media (max-width: 1024px) {
  body.home,
  body.home :is(
    p, li, span, div, a, h1, h2, h3, h4, h5, h6,
    dd, dt, td, th, label, strong, em, button,
    figcaption, blockquote, small, article, section,
    .description, .desc, .main_txt, .main_txt p
  ) {
    word-break: keep-all !important;
    overflow-wrap: break-word;
  }
}