/* ═══════════════════════════════════════════════════════════════════════
   skin-f3.css — Family-03 "모던 미니멀 / 건축적"
   ───────────────────────────────────────────────────────────────────────
   아키텍처 핵심: 모든 선택자를 `.skin-f3` 하위로 스코프 → 다른 스킨과 무간섭.
   스펙 SPEC_SKIN_F3_20260623.md §1(토큰)·§2(트리트먼트) 구현.
   Stage 1 범위: 토큰 + reset/base + GNB + 히어로 + 푸터. 반응형 768/480.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §1 디자인 토큰 (루트 스코프) ─────────────────────────────────────── */
.skin-f3 {
  --f3-bg:        #f4f5f6;   /* 오프화이트, 쿨 */
  --f3-surface:   #ffffff;
  --f3-ink:       #1a1d21;   /* 차콜, 본문 */
  --f3-ink-soft:  #5b6066;
  --f3-line:      #e2e5e8;   /* 얇은 디바이더 */
  --f3-accent:    var(--a1, #2f3640);  /* 현장별 팔레트 포인트컬러 연동 */
  --f3-font-head: 'Pretendard', sans-serif;
  --f3-font-body: 'Pretendard', sans-serif;

  --f3-gnb-h:     68px;
  --f3-maxw:      1240px;
  --f3-pad:       40px;
  --f3-ease:      cubic-bezier(0.22, 1, 0.36, 1);

  /* 루트 기본 캔버스 */
  position: relative;
  background: var(--f3-bg);
  color: var(--f3-ink);
  font-family: var(--f3-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── reset/base (스코프 내부만) ──────────────────────────────────────── */
.skin-f3 *,
.skin-f3 *::before,
.skin-f3 *::after { box-sizing: border-box; }

.skin-f3 img { max-width: 100%; display: block; }
.skin-f3 a { color: inherit; text-decoration: none; }
.skin-f3 ul { list-style: none; margin: 0; padding: 0; }
.skin-f3 button { font-family: inherit; cursor: pointer; }

/* body 여백 제거: 스코프 유지를 위해 자손결합 대신 :has 로 f3 페이지에서만 적용.
   (전역 body 오염 방지 — f1/f2 페이지엔 영향 0) */
body:has(> .skin-f3) { margin: 0; background: #f4f5f6; }

/* ═══════════════ GNB ═══════════════ */
.skin-f3 .f3-gnb {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--f3-gnb-h);
  background: rgba(255, 255, 255, 0.0);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--f3-ease), border-color 0.35s var(--f3-ease);
}
.skin-f3 .f3-gnb.is-scroll {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--f3-line);
  backdrop-filter: saturate(150%) blur(6px);
}
.skin-f3 .f3-gnb-inner {
  max-width: var(--f3-maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--f3-pad);
  display: flex;
  align-items: center;
  gap: 32px;
}
.skin-f3 .f3-logo { flex-shrink: 0; }
.skin-f3 .f3-logo-img { height: 34px; width: auto; }
.skin-f3 .f3-logo-text {
  font-family: var(--f3-font-head);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.35s var(--f3-ease);
}
.skin-f3 .f3-gnb.is-scroll .f3-logo-text { color: var(--f3-ink); }

.skin-f3 .f3-nav { margin-left: auto; }
.skin-f3 .f3-nav-list { display: flex; gap: 4px; }
.skin-f3 .f3-nav-item { position: relative; }
.skin-f3 .f3-nav-link {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.35s var(--f3-ease);
}
.skin-f3 .f3-gnb.is-scroll .f3-nav-link { color: var(--f3-ink-soft); }
.skin-f3 .f3-nav-link:hover { color: var(--f3-accent); }
.skin-f3 .f3-gnb.is-scroll .f3-nav-link:hover { color: var(--f3-accent); }

/* 미니멀 드롭다운: 배경 흰색·그림자 절제 */
.skin-f3 .f3-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 168px;
  padding: 8px 0;
  background: var(--f3-surface);
  border: 1px solid var(--f3-line);
  box-shadow: 0 8px 28px rgba(26, 29, 33, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s var(--f3-ease), transform 0.22s var(--f3-ease), visibility 0.22s;
}
.skin-f3 .f3-nav-item:hover .f3-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.skin-f3 .f3-nav-sublink {
  display: block;
  padding: 9px 20px;
  font-size: 13.5px;
  color: var(--f3-ink-soft);
  transition: background 0.18s, color 0.18s;
}
.skin-f3 .f3-nav-sublink:hover {
  background: var(--f3-bg);
  color: var(--f3-accent);
}

.skin-f3 .f3-gnb-tel {
  flex-shrink: 0;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  transition: border-color 0.35s var(--f3-ease), color 0.35s var(--f3-ease), background 0.2s;
}
.skin-f3 .f3-gnb.is-scroll .f3-gnb-tel {
  border-color: var(--f3-accent);
  color: var(--f3-accent);
}
.skin-f3 .f3-gnb-tel:hover {
  background: var(--f3-accent);
  border-color: var(--f3-accent);
  color: #fff;
}

/* 모바일 햄버거 */
.skin-f3 .f3-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
}
.skin-f3 .f3-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  transition: background 0.35s var(--f3-ease), transform 0.3s var(--f3-ease), opacity 0.2s;
}
.skin-f3 .f3-gnb.is-scroll .f3-nav-toggle span { background: var(--f3-ink); }

/* ═══════════════ 히어로 ═══════════════ */
.skin-f3 .f3-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #d8dbe0;
}
.skin-f3 .f3-hero-swiper,
.skin-f3 .f3-hero-swiper .swiper-wrapper,
.skin-f3 .f3-hero-slide { height: 100%; }
.skin-f3 .f3-hero-slide {
  background-size: cover;
  background-position: center;
}
.skin-f3 .f3-hero-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d8dbe0 0%, #b7bcc4 60%, #9aa0a9 100%);
}
/* 절제된 좌하단 스크림 (가독 확보, 과하지 않게) */
.skin-f3 .f3-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    to top,
    rgba(20, 23, 28, 0.55) 0%,
    rgba(20, 23, 28, 0.18) 38%,
    rgba(20, 23, 28, 0.0) 62%
  );
}

.skin-f3 .f3-hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  max-width: var(--f3-maxw);
  margin: 0 auto;
  padding: 0 var(--f3-pad) 80px;
}
.skin-f3 .f3-hero-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.85);
}
.skin-f3 .f3-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.7);
}
/* 좌하단 대형 산세리프 타이틀 (절제) */
.skin-f3 .f3-hero-title {
  margin: 0;
  font-family: var(--f3-font-head);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
}
.skin-f3 .f3-hero-sub {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
}
.skin-f3 .f3-hero-cta {
  display: inline-block;
  margin-top: 34px;
  padding: 14px 32px;
  background: var(--f3-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: transform 0.25s var(--f3-ease), filter 0.25s var(--f3-ease);
}
.skin-f3 .f3-hero-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* 스크롤 힌트: 얇은 라인 */
.skin-f3 .f3-hero-scroll {
  position: absolute;
  bottom: 28px; right: var(--f3-pad);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.skin-f3 .f3-hero-scroll-txt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
  writing-mode: vertical-rl;
}
.skin-f3 .f3-hero-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  animation: f3ScrollLine 1.8s var(--f3-ease) infinite;
}
@keyframes f3ScrollLine {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  45%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* GSAP reveal 초기상태 (JS 활성 시에만 숨김 → no-js 폴백) */
.skin-f3.f3-js-ready .f3-hero-eyebrow,
.skin-f3.f3-js-ready .f3-hero-title,
.skin-f3.f3-js-ready .f3-hero-sub,
.skin-f3.f3-js-ready .f3-hero-cta { will-change: transform, opacity; }

/* ═══════════════ 빈 스텁 섹션 기본(Stage2~4에서 채움) ═══════════════ */
.skin-f3 .f3-section {
  max-width: var(--f3-maxw);
  margin: 0 auto;
  padding: 0 var(--f3-pad);
}

/* ═══════════════ 푸터 ═══════════════ */
.skin-f3 .f3-footer {
  border-top: 1px solid var(--f3-line);
  background: var(--f3-surface);
  padding: 56px 0 48px;
}
.skin-f3 .f3-footer-inner {
  max-width: var(--f3-maxw);
  margin: 0 auto;
  padding: 0 var(--f3-pad);
  text-align: center;
}
.skin-f3 .f3-footer-title {
  margin: 0 0 14px;
  font-family: var(--f3-font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--f3-ink);
}
.skin-f3 .f3-footer-tel {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--f3-accent);
}
.skin-f3 .f3-footer-copy {
  margin: 0;
  font-size: 12.5px;
  color: var(--f3-ink-soft);
  letter-spacing: 0.01em;
}

/* ═══════════════ 반응형 ═══════════════ */
@media (max-width: 768px) {
  .skin-f3 { --f3-pad: 20px; --f3-gnb-h: 60px; }

  .skin-f3 .f3-nav-toggle { display: flex; }
  .skin-f3 .f3-gnb-tel { display: none; }

  /* 모바일 메뉴: 토글 시 펼침 */
  .skin-f3 .f3-nav {
    position: fixed;
    top: var(--f3-gnb-h);
    left: 0; right: 0;
    margin-left: 0;
    background: var(--f3-surface);
    border-bottom: 1px solid var(--f3-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--f3-ease);
  }
  .skin-f3 .f3-gnb.is-nav-open .f3-nav { max-height: 80vh; overflow-y: auto; }
  .skin-f3 .f3-nav-list { flex-direction: column; gap: 0; padding: 8px 0; }
  .skin-f3 .f3-nav-link {
    color: var(--f3-ink);
    padding: 14px 20px;
    border-bottom: 1px solid var(--f3-line);
  }
  .skin-f3 .f3-nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 0;
    background: var(--f3-bg);
  }
  .skin-f3 .f3-nav-sublink { padding: 11px 32px; }

  /* 햄버거 → X (열림 상태) */
  .skin-f3 .f3-gnb.is-nav-open .f3-nav-toggle span { background: var(--f3-ink); }
  .skin-f3 .f3-gnb.is-nav-open .f3-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .skin-f3 .f3-gnb.is-nav-open .f3-nav-toggle span:nth-child(2) { opacity: 0; }
  .skin-f3 .f3-gnb.is-nav-open .f3-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .skin-f3 .f3-hero-content { padding-bottom: 56px; }
  .skin-f3 .f3-hero-scroll { display: none; }
}

@media (max-width: 480px) {
  .skin-f3 .f3-hero { min-height: 480px; }
  .skin-f3 .f3-hero-title { font-size: clamp(34px, 11vw, 56px); }
  .skin-f3 .f3-hero-eyebrow { letter-spacing: 0.2em; }
  .skin-f3 .f3-hero-cta { padding: 13px 26px; font-size: 14px; }
  .skin-f3 .f3-footer { padding: 44px 0 36px; }
}

/* ── 모션 저감 선호 대비 ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .skin-f3 .f3-hero-scroll-line { animation: none; }
  .skin-f3 *,
  .skin-f3 *::before,
  .skin-f3 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}