/* ─────────────────────────────────────────────────────────────
   FPCOM design3 — Mobile Responsive Layer
   desktop-first: 기존 components.css / tokens.css 무변경.
   이 파일만 모바일 전용 오버라이드 담당.
   로드 순서: tokens.css → components.css → mobile.css (이 파일)
   ───────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
   P0-0  .fp-nav sticky 복구 — tokens.css body{overflow-x:hidden} 대응
   ─────────────────────────────────────────────────────────────
   tokens.css 에 `html, body { overflow-x: hidden }` 가 있음.
   body 에 overflow(-x) hidden 이 걸리면 브라우저가 body 를 새
   scroll container 로 취급 → .fp-nav sticky 가 viewport 가 아닌
   body 기준이 되어 모바일에서 동작하지 않음.
   해결: body 의 overflow-x 를 visible 로 풀고, 가로 잘림은
   html { overflow-x: clip } 으로 대체한다.
   clip 은 scroll container 를 생성하지 않으므로 sticky 를 죽이지 않음.
   tokens.css / components.css 는 무변경.
   ────────────────────────────────────────────────────────────── */
html  { overflow-x: clip; }     /* 가로 넘침 잘라냄 — scroll container 미생성, sticky 유지 */
body  { overflow-x: visible; }  /* tokens.css overflow-x:hidden 무력화 — sticky 복구 */

/* ──────────────────────────────────────────────────────────────
   전역 (미디어쿼리 밖) — 데스크톱 기본값 설정
   ────────────────────────────────────────────────────────────── */

/* 상표빅데이터 heading — 데스크톱에서 nowrap 유지 (blade에서 인라인 style 제거됨) */
.fp-bigdata-heading { white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────
   P0-2  container-pad  ≤1023px:24px / ≤767px:16px
   tokens.css의 --fp-container-pad(32px) 를 좁은 뷰포트에서만 오버라이드.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --fp-container-pad: var(--fp-space-6); } /* 24px */

  /* ── P1-1  4열/3열 → 태블릿 2열 ── */
  .fp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root { --fp-container-pad: var(--fp-space-4); } /* 16px */
}

/* ──────────────────────────────────────────────────────────────
   P0-1  햄버거 버튼 — 데스크톱에서 완전히 숨김
   ────────────────────────────────────────────────────────────── */
.fp-nav__hamburger { display: none; }

/* ──────────────────────────────────────────────────────────────
   P0-1  모바일 Drawer — 데스크톱 기본값: 완전 숨김
   @media(max-width:767px) 안에서 display:block 으로 복구됨.
   ────────────────────────────────────────────────────────────── */
.fp-mobile-nav { display: none; }

/* ──────────────────────────────────────────────────────────────
   P0-1  모바일 Drawer — ≤767px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 기존 nav 링크/CTA 숨김 */
  .fp-nav__links,
  .fp-nav__cta { display: none; }

  /* 햄버거 버튼 노출 */
  .fp-nav__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text-1);
    transition: background var(--fp-dur-1);
  }
  .fp-nav__hamburger:hover {
    background: var(--fp-surface-2);
  }

  /* 햄버거 아이콘 — 3줄 라인 (::before/::after/span) */
  .fp-nav__hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 22px;
  }
  .fp-nav__hamburger-icon::before,
  .fp-nav__hamburger-icon::after,
  .fp-nav__hamburger-icon span {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--fp-dur-2), opacity var(--fp-dur-2);
  }

  /* ── Mobile Nav Overlay ── */
  .fp-mobile-nav {
    display: block;        /* 데스크톱 기본값(display:none) 무력화 */
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
  }
  .fp-mobile-nav.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  /* 반투명 배경 */
  .fp-mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity var(--fp-dur-2);
  }
  .fp-mobile-nav.is-open .fp-mobile-nav__backdrop {
    opacity: 1;
  }

  /* 슬라이드 Drawer */
  .fp-mobile-nav__drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(280px, calc(100vw - 64px));
    height: 100dvh;
    background: color-mix(in oklab, var(--fp-bg) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform var(--fp-dur-3) var(--fp-easing-decel, cubic-bezier(.2,.8,.2,1));
    display: flex;
    flex-direction: column;
    padding: var(--fp-space-6);
    box-shadow: var(--fp-elev-4);
  }
  .fp-mobile-nav.is-open .fp-mobile-nav__drawer {
    transform: translateX(0);
  }

  /* Drawer 헤더 (로고 + 닫기 버튼) */
  .fp-mobile-nav__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--fp-space-8);
  }
  .fp-mobile-nav__logo {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-weight: 600;
    color: var(--fp-text-1);
    text-decoration: none;
  }
  .fp-mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text-2);
    transition: background var(--fp-dur-1);
  }
  .fp-mobile-nav__close:hover {
    background: var(--fp-surface-2);
  }

  /* Drawer 링크 목록 */
  .fp-mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-1);
    flex: 1;
  }
  .fp-mobile-nav__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 var(--fp-space-3);
    border-radius: var(--fp-radius-md);
    font-weight: 500;
    font-size: 15px;
    color: var(--fp-text-2);
    text-decoration: none;
    transition: background var(--fp-dur-1), color var(--fp-dur-1);
  }
  .fp-mobile-nav__links a:hover,
  .fp-mobile-nav__links a.fp-nav__link--active {
    background: var(--fp-surface-2);
    color: var(--fp-text-1);
  }

  /* Drawer CTA 영역 */
  .fp-mobile-nav__cta {
    padding-top: var(--fp-space-4);
    border-top: 1px solid var(--fp-line-1);
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
  }
  .fp-mobile-nav__cta .fp-btn {
    width: 100%;
    justify-content: center;
  }

  /* 드로어 열림 시 body 스크롤 잠금 */
  body.is-mobile-nav-open {
    overflow: hidden;
  }

  /* ── P0-3  Hero 1열 ── */
  .fp-grid-13 {
    grid-template-columns: 1fr;
    gap: var(--fp-space-8) !important;
  }
  .fp-hero {
    padding: var(--fp-space-16) 0 var(--fp-space-12);
  }
  /* 텍스트(첫 자식) → 위, 비주얼(두 번째 자식) → 아래 순서 보장 */
  .fp-hero-visual {
    order: 2;
  }

  /* ── P0-4  display-lg clamp ── */
  /* font shorthand 금지 — font-size 단독 선언, line-height 별도 */
  .fp-display-lg {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* ── P1-1  grid collapse (≤767px) ── */
  .fp-grid-4,
  .fp-grid-3,
  .fp-grid-2,
  .fp-grid-12,
  .fp-grid-21 { grid-template-columns: 1fr; }

  /* ── P1-2  section__head 2열 → 1열 ── */
  .fp-section__head { grid-template-columns: 1fr; gap: var(--fp-space-4); }

  /* ── P1-3  metrics 4-up → 2열 ── */
  .fp-metrics { grid-template-columns: repeat(2, 1fr); }
  .fp-metrics__cell:nth-child(2) { border-right: 0; }
  .fp-metrics__cell:nth-child(odd) { border-right: 1px solid var(--fp-line-1); }

  /* ── P1-4  section padding 축소 ── */
  .fp-section { padding: var(--fp-space-12) 0; }

  /* ── P1-5  display-md / display-sm clamp ── */
  /* font shorthand 금지 — font-size 단독 선언, line-height/letter-spacing 별도 */
  .fp-display-md {
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .fp-display-sm {
    font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.005em;
  }

  /* ── P1-6  h1/h2 보조 clamp ── */
  .fp-h1 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.2;
  }
  .fp-h2 {
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.25;
  }

  /* ── P1-7  Venn 원형 폰트/크기 축소 (모바일) ── */
  /* fp-venn 자체는 aspect-ratio 기반 → 컨테이너가 좁아지면 자동 축소됨 */
  /* 내부 텍스트는 px 고정이라 별도 clamp 필요 */
  .fp-venn__title {
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .fp-venn__sub {
    font-size: clamp(9px, 2.5vw, 13px);
    letter-spacing: 0.06em;
  }
  /* detail 패널 3열 → 1열 */
  .fp-venn__detail {
    grid-template-columns: 1fr;
    gap: var(--fp-space-3);
  }
  .fp-venn__detail-key {
    font-size: clamp(16px, 5vw, 22px);
  }
  /* chip 라벨 (교집합 chip) — 모바일에서 줄바꿈 허용 */
  .fp-venn__chip { white-space: normal; font-size: 11px; padding: 6px 10px; }

  /* ── P1-8  상표빅데이터 인라인 텍스트 (white-space nowrap 해제) ── */
  /* blade에서 style="white-space:nowrap" 제거 + fp-bigdata-heading 클래스 부여 완료 */
  .fp-bigdata-heading {
    font-size: clamp(18px, 5vw, 26px);
    white-space: normal;
    word-break: keep-all;
    line-height: 1.35;
  }

  /* ── P1-9  /technology: fp-flow (5 에이전트) + fp-list (체크리스트) ── */
  /* fp-grid-12 이미 P1-1에서 1열 처리됨 (fp-flow 우측) */
  /* fp-flow 자체는 flex column — 모바일에서 별도 조정 없이 자동 1열 */
  .fp-flow__step {
    padding: var(--fp-space-3) var(--fp-space-4);
  }
  .fp-flow__t { font-size: 13px; }
  .fp-flow__d { font-size: 12px; }

  /* fp-list (체크리스트) — 모바일 여백 최적화 */
  .fp-list__item { font-size: 14px; line-height: 1.5; }
}