/* ═══════════════════════════════════════════════════
   WEROLAKER — Solutions Pages Mobile Responsive
   Breakpoints: 768px (mobile), 480px (small)
═══════════════════════════════════════════════════ */

/* ── 가로 스크롤 전역 차단 ── */
html { overflow-x: clip; }

@media (max-width: 768px) {

  /* ── 가로 스크롤 차단 ── */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* ── Header ── */
  #hd { padding: 0 20px; height: 58px; }
  .hd-nav { display: none; }
  .hd-btn { font-size: 11px; padding: 7px 14px; }

  /* ── Hero text area ── */
  .hero-text-area { padding: calc(58px + 28px) 20px 28px; }

  /* !important 필수 — 인라인 <style>에 !important 재정의 있음 */
  .hero-mega {
    font-size: clamp(40px, 11vw, 56px) !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 0.92 !important;
    letter-spacing: -0.03em !important;
  }
  .hero-stroke-sub {
    font-size: clamp(13px, 4vw, 20px) !important;
    white-space: normal !important;
    overflow: visible !important;
    margin-top: 10px !important;
  }
  .hero-desc-row { flex-direction: column; gap: 0; padding-bottom: 28px; }
  .hero-desc { max-width: 100%; font-size: 14px; }
  .scroll-badge { display: none; }
  .pill-tags { flex-wrap: wrap; gap: 8px; }

  /* ── Hero Scroll Reveal (mobile) ──
     텍스트가 자연스럽게 위로 스크롤되면서 이미지가 드러나는 효과
     position: sticky 이미지 + absolute 텍스트 조합 (JS 불필요) */
  .page-hero {
    position: relative !important;
    height: 180svh !important;
    /* fallback for browsers without svh */
    height: 180vh;
    height: 180svh;
    overflow: visible !important;
  }

  .hero-text-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    z-index: 2 !important;
    background: inherit !important;
    padding: calc(58px + 28px) 20px 40px !important;
  }

  .hero-img-wrap {
    background-attachment: scroll !important;
    height: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: unset !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }

  /* ── Shared sections ── */
  .sec { padding: 60px 20px; }
  .sol-section { padding: 60px 20px; }
  .section-inner { padding: 0; }
  .container { padding: 0; }

  /* ── Mega header: 2-col → 1 col ── */
  .mega-hd,
  .wwd-sec .mega-hd {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .mega-hd-title { font-size: clamp(44px, 12vw, 68px); }
  .mega-hd-sub { font-size: 18px; }
  .mega-hd-desc { font-size: 14px; }

  /* Mac window cards — 인라인 440px !important 오버라이드 */
  .mac-cards { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; justify-content: flex-start !important; }
  .mac-card { width: 100% !important; max-width: 100% !important; flex-shrink: 1 !important; }
  .mac-card:nth-child(2),
  .mac-card:nth-child(3) { margin-top: 0 !important; margin-left: 0 !important; }

  /* ── Stats giant title ── */
  .stats-giant {
    font-size: clamp(48px, 13vw, 72px);
    margin-bottom: 28px;
    line-height: 0.92;
  }

  /* ── Stats row ── */
  .stats-row { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .stat-box { padding: 28px 16px; }
  .stat-item { padding: 28px 16px; }
  .stat-val { font-size: clamp(30px, 8vw, 44px); margin-bottom: 8px; }
  .stat-lbl { font-size: 12px; }
  .stat-num { font-size: clamp(30px, 8vw, 44px); }

  /* ── Stats V2 (image + 2×2 cards) ── */
  .stats-v2 { grid-template-columns: 1fr; }
  .stats-v2-img { min-height: 200px; max-height: 260px; }
  .stats-v2-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-v2-card { padding: 24px 16px; }
  .stats-v2-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,140,100,0.22);
  }
  .stats-v2-card .sv-num { font-size: clamp(28px, 8vw, 44px); }
  .stats-v2-card .sv-title { font-size: clamp(18px, 5vw, 24px); }

  /* ── What We Do rows ── */
  .wwd-row-num { min-width: 44px; font-size: 11px; padding-top: 24px; }
  .wwd-row-body { padding: 24px 18px; }
  .wwd-row-title { font-size: 17px; margin-bottom: 8px; }
  .wwd-row-desc { font-size: 13px; line-height: 1.7; }
  .wwd-row-img { display: none; }
  .wwd-row:hover .wwd-row-img,
  .wwd-sec .wwd-row:hover .wwd-row-img { display: none; width: 0; }

  /* What We Do grid */
  .wwd-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .wwd-item { padding: 24px 20px; }

  /* ── Approach circles — 2-per-row, circular ── */
  .circles-wrap { padding: 24px 0 32px; }
  .circles-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
  }
  .circ {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    padding: 20px 16px;
    flex-shrink: 0;
  }
  .circ:not(:first-child) { margin-left: 0; }
  .circ:hover { transform: translateY(-6px); z-index: 2; }
  .circ-num { font-size: 11px; margin-bottom: 10px; }
  .circ-title { font-size: 17px; margin-bottom: 8px; }
  .circ-desc { font-size: 12px; line-height: 1.5; }

  /* Approach steps grid */
  .approach-steps { grid-template-columns: 1fr; border-radius: 16px; margin-top: 28px; }
  .approach-steps .step-item,
  .approach-steps .approach-step {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .approach-steps .step-item:last-child,
  .approach-steps .approach-step:last-child { border-bottom: none; }
  .approach-step { padding: 24px 20px; }
  .step-item { padding: 28px 20px; }

  /* ── Client Benefits — accordion ── */
  .ben-list { margin-top: 28px; }
  .ben-btn { padding: 22px 0; }
  .ben-btn-title { font-size: clamp(16px, 4.5vw, 22px); }
  .ben-badge { width: 32px; height: 32px; font-size: 11px; }
  /* Expanded content: stack vertically */
  .ben-content { grid-template-columns: 1fr; }
  .ben-content-left { padding: 8px 0 20px 0; }
  .ben-content-desc { font-size: 13px; line-height: 1.75; }
  .ben-content-img { display: none; }
  .ben-item.open .ben-content { max-height: 240px; }
  /* Simple list style (legacy) */
  .ben-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 0;
  }
  .ben-title { font-size: 17px; }
  .ben-num { font-size: 12px; }

  /* Benefits grid */
  .benefits-grid { grid-template-columns: 1fr; border-radius: 16px; margin-top: 28px; }
  .benefit-item { padding: 28px 20px; gap: 16px; }
  .benefit-title { font-size: 16px; }
  .benefits-list { margin-top: 28px; border-radius: 16px; }

  /* ── Scroll Zoom Reveal ── */
  .szr-wrap { height: 180vh; }
  .szr-text-line { font-size: clamp(40px, 11vw, 64px); }

  /* ── FAQ ── */
  .faq-hd {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 28px;
  }
  .faq-hd-title { font-size: clamp(52px, 14vw, 80px); }
  .faq-hd-right { display: none; }
  .faq-list { border-radius: 16px; margin-top: 28px; }
  .faq-q { padding: 20px; gap: 14px; }
  .faq-q-text { font-size: 15px; line-height: 1.45; }
  .faq-a-inner { padding: 0 20px 20px; font-size: 13px; }
  .faq-a p { padding: 0 20px 20px; font-size: 13px; }

  /* ── CTA section ── */
  .cta-section { padding: 64px 20px; }
  .cta-label { font-size: 10px; }
  .cta-title { font-size: clamp(28px, 8vw, 48px); }
  .cta-desc { font-size: 14px; margin-bottom: 28px; }
  .cta-btn { padding: 14px 28px; font-size: 15px; }

  /* ── Other Solutions nav ── */
  .other-sol { padding: 56px 20px; }
  .other-sol-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .other-sol-card { padding: 20px 16px; gap: 8px; }
  .osc-icon { font-size: 20px; }
  .osc-title { font-size: 13px; }
  .osc-arrow { display: none; }

  /* ── Footer ── */
  .sol-footer { padding: 0 20px; }
  .sol-footer-grid { flex-direction: column; gap: 28px; padding: 32px 0 24px; }
  .sol-footer-left { max-width: 100%; }
  .sol-footer-logo-lg { font-size: 36px; margin-bottom: 14px; }
  .sol-footer-right { gap: 32px; }
  .sol-footer-bottom { flex-direction: column; gap: 4px; }
  .footer-inner { flex-direction: column; text-align: left; gap: 14px; }
  .footer-nav { flex-wrap: wrap; gap: 8px 18px; }
  .footer { padding: 36px 20px; }

  /* ── Sub top (portfolio-style pages) ── */
  .sub-top { padding: calc(58px + 24px) 20px 28px; }
  .sub-top-title,
  .sub-title { font-size: clamp(36px, 11vw, 60px); }

  /* Intro grid */
  .intro-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .key-values { grid-template-columns: 1fr; gap: 12px; }
  .kv-card { padding: 24px 20px; }
}

/* ══ Very small screens (≤ 480px) ══ */
@media (max-width: 480px) {
  .hero-mega { font-size: clamp(36px, 10vw, 48px) !important; }
  .stats-giant { font-size: clamp(40px, 11vw, 56px); }
  .faq-hd-title { font-size: clamp(44px, 12vw, 64px); }
  .stats-row,
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-val,
  .stat-num { font-size: clamp(24px, 7vw, 36px); }
  .other-sol-grid { grid-template-columns: 1fr 1fr; }
  .circ { width: 148px; height: 148px; padding: 18px 14px; }
  .circ-title { font-size: 15px; }
  .szr-text-line { font-size: clamp(36px, 10vw, 52px); }

  /* ── Biz footer ── */
  .biz-footer { padding: 28px 20px; }
  .biz-info { font-size: 11px; line-height: 1.9; }
  .biz-info .sep { margin: 0 5px; }
  .biz-disclaimer { font-size: 11px; }

}