/* ══════════════════════════════════════════════════════════
   가치담다 — RESPONSIVE v1.0
   전용 반응형 오버라이드 파일
   Breakpoints:
     ≤1100px  태블릿 (landscape / large tablet)
     ≤768px   모바일 (portrait tablet / large phone)
     ≤480px   소형 스마트폰
     ≤360px   최소 사이즈 (Galaxy S 등)
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   0. 공통 유틸
   ──────────────────────────────────────── */
/* 모바일에서 커스텀 커서 비활성화 */
@media (max-width: 768px) {
  body { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }

  /* 터치 영역 최소 44px 확보 */
  a, button, [role="button"] { min-height: 44px; }

  /* 섹션 패딩 축소 */
  section { padding: 60px 0; }

  /* 컨테이너 패딩 */
  .container { padding: 0 16px; }
}

@media (max-width: 360px) {
  .container { padding: 0 12px; }
  section { padding: 48px 0; }
}

/* ────────────────────────────────────────
   1. NAV / DRAWER
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 768px) {
  .nav { padding: 0 16px; height: 60px; }
  :root { --nav-h: 60px; }

  .nav-logo-img  { height: 38px; }
  .drawer-logo-img { height: 44px; }

  /* 다크모드 토글 모바일 */
  .darkmode-toggle { width: 36px; height: 36px; font-size: .9rem; }
}

/* ────────────────────────────────────────
   2. HERO — 시네마틱
   ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-cinematic-inner {
    padding: var(--nav-h) 32px 72px;
    gap: 24px;
  }
  .hc--num { font-size: clamp(3.5rem, 8vw, 6rem); }
}

@media (max-width: 768px) {
  .hero-cinematic-inner {
    padding: calc(var(--nav-h) + 16px) 16px 80px;
    gap: 20px;
  }
  .hc--tag { font-size: .7rem; padding: 6px 14px; }
  .hc--pre { font-size: clamp(.9rem, 3vw, 1.1rem); }
  .hc--num {
    font-size: clamp(3rem, 14vw, 5rem);
    letter-spacing: -.04em;
  }
  .hc--main { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .hc--sub  { font-size: clamp(.85rem, 3.5vw, 1.1rem); }

  /* 히어로 CTA 버튼 풀 너비 */
  .hero-cin-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .btn-cin-main, .btn-cin-sub {
    width: 100%;
    justify-content: center;
    font-size: .9rem;
    padding: 14px 20px;
  }

  /* 히어로 통계 */
  .hero-cin-stats {
    width: 100%;
    justify-content: space-around;
    padding: 14px 8px;
    gap: 0;
    border-radius: 14px;
  }
  .hcs { padding: 0 8px; }
  .hcs-n { font-size: 1.5rem; }
  .hcs-l { font-size: .65rem; }
  .hcs-div { height: 28px; }
  .hero-scarcity { font-size: .72rem; }
}

@media (max-width: 480px) {
  .hc--num { font-size: clamp(2.8rem, 16vw, 4.5rem); }
  .hero-cin-stats { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .hcs-div { display: none; }
  .hcs { padding: 8px 12px; min-width: 80px; text-align: center; }
}

/* ────────────────────────────────────────
   3. MARQUEE (스크롤 띠)
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .marquee-wrap { padding: 10px 0; }
  .marquee-inner span { font-size: .72rem; padding: 0 14px; }
}

/* ────────────────────────────────────────
   4. PROBLEM 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .prob-intro { margin-bottom: 40px; }
  .prob-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-bottom: 32px;
  }
  .prob-card { padding: 24px 20px; }
  .prob-resolve {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 28px;
    border-radius: 20px;
  }
  .pob-title { font-size: 1.5rem; }
  .pob-list li { gap: 10px; }
}

/* ────────────────────────────────────────
   5. ABOUT 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .about-grid { gap: 28px; }
  .about-tag-list { gap: 8px; }
  .about-tag { font-size: .72rem; padding: 6px 12px; }
  .about-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .about-stat-item { padding: 18px 14px; }
  .astat-n { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .about-stat-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   6. SERVICES 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card { padding: 24px 20px; }
  .svc-card--photo .svc-photo-wrap { min-height: 220px; }
  .svc-tag { font-size: .72rem; }
}

/* ────────────────────────────────────────
   7. CEO 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .ceo-grid { grid-template-columns: 1fr; gap: 40px; }
  .ceo-photos { max-width: 480px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .ceo-photos { max-width: 100%; grid-template-columns: 1fr; }
  .ceo-photo-sub { display: none; }
  .ceo-text-body { gap: 20px; }
  .ceo-tags { gap: 8px; }
  .ceo-tag { font-size: .72rem; padding: 5px 12px; }
  .ceo-name { font-size: 1.5rem; }
  .ceo-title { font-size: .88rem; }
}

/* ────────────────────────────────────────
   8. PROCESS 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .proc-flow { grid-template-columns: 1fr; gap: 0; }
  .proc-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 28px;
    position: relative;
  }
  .proc-line { top: 40px; left: 36px; width: 2px; height: 100%; }
  .proc-body { text-align: left; padding: 6px 0 0; }
  .proc-arrow { display: none; }
}

@media (max-width: 768px) {
  .proc-icon-wrap { width: 52px; height: 52px; flex-shrink: 0; font-size: 1rem; }
  .proc-step-num { font-size: 1.5rem; }
  .proc-body h3 { font-size: 1rem; }
  .proc-body p  { font-size: .85rem; }
}

/* ────────────────────────────────────────
   9. RESULT / 성과 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .result-nums {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 16px;
    gap: 16px;
  }
  .rnum-div { display: none; }
  .rnum-n { font-size: 2rem; }
  .rnum-l { font-size: .7rem; }
  .review-cards { grid-template-columns: 1fr; gap: 16px; }
  .review-card { padding: 24px 18px; }
  .rv-text { font-size: .9rem; }
}

@media (max-width: 480px) {
  .result-nums { grid-template-columns: 1fr; gap: 12px; }
}

/* ────────────────────────────────────────
   10. AWARDS 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }
  .award-title { font-size: .9rem; }
  .award-desc  { font-size: .78rem; }
  .award-ribbon { padding: 16px 16px 12px; }
}

/* ────────────────────────────────────────
   11. PLANS 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .plans-cols { grid-template-columns: 1fr; gap: 14px; }
  .plan-col--featured { transform: none; }
}

@media (max-width: 768px) {
  .plan-col-head { padding: 24px 18px 16px; }
  .plan-col--featured .plan-col-head { padding-top: 36px; }
  .plan-items { padding: 12px 14px; }
  .plan-item { padding: 9px 6px; gap: 10px; }
  .pi-label { white-space: normal; font-size: .72rem; }
  .pi-val   { font-size: .78rem; }
  .plan-col-cta { padding: 12px 16px 20px; }
  .plans-bottom-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 18px;
  }
  .plans-bottom-btn { width: 100%; text-align: center; padding: 12px; }
}

/* ────────────────────────────────────────
   12. VIDEO SECTIONS
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .video-band { height: 240px; }
  .video-band--top { height: 220px; }
  .video-band__label { font-size: .62rem; }
  .video-feature--mid { min-height: 400px; }
  .vf-text-box { text-align: center; margin: 0 auto; max-width: 100%; padding: 0 16px; }
  .vf-hl { font-size: 1.7rem; }
  .vsr-wrap { height: 80vh; min-height: 440px; max-height: 600px; }
  .vsr-hl   { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .vsr-sub  { font-size: .88rem; margin-bottom: 24px; }
  .vsr-btn  { font-size: .88rem; padding: 13px 24px; width: 100%; justify-content: center; }
  .brand-video-sec .bv-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .brand-video-sec .bv-desc  { font-size: .88rem; }
}

@media (max-width: 480px) {
  .video-band { height: 180px; }
  .video-band--top { height: 160px; }
  .vsr-wrap { height: 75vh; min-height: 360px; }
}

/* ────────────────────────────────────────
   13. PARTNERS 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .partners-stats {
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 16px;
    gap: 0;
  }
  .pstat { min-width: 45%; padding: 10px 8px; }
  .pstat strong { font-size: 1.6rem; }
  .pstat-div:nth-child(4) { width: 100%; height: 1px; margin: 4px 0; }
  .logo-fade { width: 60px; }
  .pit-tags-wrap { gap: 8px; }
}

@media (max-width: 480px) {
  .partners-stats { gap: 8px; }
  .pstat { min-width: 40%; }
  .pstat strong { font-size: 1.4rem; }
}

/* ────────────────────────────────────────
   14. YOUTUBE 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .yt-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .yt-main-thumb { border-radius: 14px; }
  .yt-cards-sub  { grid-template-columns: 1fr; gap: 12px; }
  .yt-card-sub { flex-direction: row; gap: 12px; padding: 14px; }
  .yt-sub-thumb { width: 90px; height: 56px; flex-shrink: 0; border-radius: 8px; }
  .yt-sub-info  { flex: 1; }
  .yt-sub-title { font-size: .85rem; line-height: 1.3; -webkit-line-clamp: 2; }
}

/* ────────────────────────────────────────
   15. CONTACT / 폼 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .cform-wrap { padding: 20px 14px; border-radius: 16px; }
  .cf-row { grid-template-columns: 1fr !important; gap: 10px; }
  /* iOS 16px 미만 폰트는 자동 zoom 발생 → 강제 16px */
  .cform input[type="text"],
  .cform input[type="tel"],
  .cform input[type="email"],
  .cform select,
  .cform textarea {
    font-size: 16px !important;
    padding: 13px 14px;
  }
  .cform-trust-bar { flex-wrap: wrap; gap: 6px; font-size: .68rem; }
  .cform-steps span { font-size: .68rem; }
  .btn-orange.full {
    width: 100%;
    padding: 16px;
    font-size: .95rem;
    min-height: 52px;
  }
  /* 연락정보 */
  .con-info { gap: 16px; }
  .con-info li { gap: 12px; align-items: flex-start; }
  .con-icon { width: 40px; height: 40px; flex-shrink: 0; font-size: .85rem; }
  .con-info a { word-break: break-all; }
  /* SNS 버튼 */
  .con-sns { gap: 8px; flex-wrap: wrap; }
  .sns-btn { width: 40px; height: 40px; font-size: .9rem; }
  /* 카카오 CTA 버튼 */
  .btn-kakao { width: 100%; justify-content: center; min-height: 50px; font-size: .95rem; }
  /* 실시간 바 */
  .live-consult-bar { flex-direction: column; gap: 4px; padding: 10px 12px; }
  .live-consult-right { font-size: .72rem; }
}

/* ────────────────────────────────────────
   16. PHOTO PORTFOLIO 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .photo-pf-inner { gap: 40px; }
}

@media (max-width: 768px) {
  .photo-pf-bg { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .photo-pf-bg-cell:nth-child(n+5) { display: none; }
  .photo-pf-left { text-align: center; }
  .photo-pf-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .photo-pf-stat-n { font-size: 2rem; }
}

@media (max-width: 480px) {
  .photo-pf-bg { grid-template-columns: repeat(2, 1fr); }
  .photo-pf-stats { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   17. PORTFOLIO GRID
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .port-item--tall { grid-column: span 2; }
}

@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 12px; }
  .port-item--tall { grid-column: auto; }
  .port-item { border-radius: 14px; }
}

/* ────────────────────────────────────────
   17-B. LOCATION MAP 섹션
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .location-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .location-inner { flex-direction: column; gap: 24px; }
  .loc-title { font-size: 1.6rem; }
  .loc-address-card { padding: 18px 14px; gap: 14px; }
  .loc-addr-row { gap: 10px; align-items: flex-start; }
  .loc-addr-row > i { margin-top: 2px; font-size: .85rem; }
  .loc-btns { flex-direction: column; gap: 10px; }
  .btn-naver-map, .btn-kakao-map { width: 100%; justify-content: center; min-height: 48px; }
  .location-map-wrap { min-height: 200px; }
  .location-map-frame { min-height: 200px; }
  .lmp-name { font-size: 1.1rem; }
  .lmp-addr { font-size: .82rem; }
  .lmp-hint { font-size: .72rem; }
}

/* ────────────────────────────────────────
   18. FOOTER
   ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: 1fr; gap: 36px; }
  .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
  .ft-cols { grid-template-columns: 1fr; gap: 20px; }
  .ft-sns-row { gap: 8px; }
  .ft-sns-btn { padding: 9px 14px; font-size: .78rem; }
  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
  .footer-bottom p { font-size: .72rem; }
}

/* ────────────────────────────────────────
   19. KAKAO 채팅 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .kp-phone-wrap { grid-template-columns: 1fr; gap: 24px; }
  .kp-chat-list { gap: 8px; }
  .kp-chat-bubble { font-size: .85rem; padding: 10px 14px; }
  .kp-cta-btns { flex-direction: column; gap: 10px; }
  .kp-cta-btns a { width: 100%; justify-content: center; }
}

/* ────────────────────────────────────────
   20. 모바일 탭바 safe-area 처리
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-tabbar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* 탭바 항목 터치영역 */
  .mtb-item { min-height: 50px; padding: 6px 2px; }
  .mtb-item i { font-size: 1.15rem; }
  .mtb-item span { font-size: .56rem; }
}

/* ────────────────────────────────────────
   21. 플로팅 소셜 프루프 토스트 모바일
   ──────────────────────────────────────── */
@media (max-width: 640px) {
  .sp-toast {
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%) translateY(120px);
    max-width: calc(100vw - 24px);
    min-width: unset;
  }
  .sp-toast.show {
    transform: translateX(-50%) translateY(0);
  }
}

/* ────────────────────────────────────────
   22. 마케팅 부스트 — 비교 테이블
   ──────────────────────────────────────── */
@media (max-width: 900px) {
  .comp-table { font-size: .78rem; }
  .comp-table thead th { padding: 12px 8px; font-size: .72rem; }
  .comp-table tbody td { padding: 10px 8px; }
}

@media (max-width: 640px) {
  .comp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comp-table { min-width: 480px; }
}

/* ────────────────────────────────────────
   23. 마케팅 부스트 — 리뷰 캐러셀
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .review-carousel-track { gap: 12px; }
  .rc-card { min-width: min(280px, 80vw); padding: 20px 16px; }
  .rc-text { font-size: .88rem; }
  .rc-nav-btn { width: 36px; height: 36px; font-size: .8rem; }
}

/* ────────────────────────────────────────
   24. 마케팅 부스트 — FAQ 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-item { padding: 0; }
  .faq-question { padding: 16px 14px; font-size: .9rem; gap: 10px; }
  .faq-answer { font-size: .85rem; padding: 0 14px 16px; }
}

/* ────────────────────────────────────────
   25. 마케팅 부스트 — 긴급 배너
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .urgent-banner { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .ub-text { font-size: .78rem; }
  .ub-btn  { font-size: .72rem; padding: 6px 14px; white-space: nowrap; }
}

/* ────────────────────────────────────────
   26. 섹션 점 네비게이션 (.spd-nav)
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .spd-nav { right: 8px; gap: 8px; }
  .spd-dot { width: 7px; height: 7px; }
}

/* ────────────────────────────────────────
   27. SEC-HEAD (공통 섹션 타이틀)
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .sec-head { margin-bottom: 36px; }
  .sec-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .sec-desc  { font-size: .9rem; }
  .sec-eyebrow { font-size: .66rem; margin-bottom: 10px; }
}

/* ────────────────────────────────────────
   28. BTN 공통 — 모바일 탭 터치영역
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .btn-orange {
    padding: 14px 24px;
    font-size: .9rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 카카오 버튼 */
  .kakao-btn, .kakao-float-btn, [href*="open.kakao.com"] {
    min-height: 48px;
  }
}

/* ────────────────────────────────────────
   29. MEDIA COVERAGE 바
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .mcb-label { padding: 0 12px; font-size: .58rem; }
  .mcb-item  { padding: 10px 16px; }
  .mcb-name  { font-size: .72rem; }
}

/* ────────────────────────────────────────
   30. 이미지/영상 공통 안전처리
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-bg-video { object-position: center center; }
  .bv-video { object-position: center center; }
  .vf-player { object-position: center 30%; }
  .vsr-player { object-position: center 20%; }
  .video-band__player { object-position: center 30%; }
}

/* ────────────────────────────────────────
   31. 언어 버튼 모바일
   ──────────────────────────────────────── */
@media (max-width: 480px) {
  .lang-wrap { gap: 3px; }
  .lang-btn  { font-size: .68rem; padding: 3px 6px; min-height: unset; }
  .lang-sep  { font-size: .65rem; }
}

/* ────────────────────────────────────────
   32. Exit 팝업 모바일
   ──────────────────────────────────────── */
@media (max-width: 480px) {
  .exit-popup-overlay { padding: 16px; align-items: flex-end; }
  .ep-card {
    padding: 28px 20px 20px;
    border-radius: 20px 20px 0 0;
    max-width: 100%;
  }
  .ep-timer-unit span { font-size: 1.8rem; min-width: 38px; }
  .ep-title { font-size: 1.5rem; }
}

/* ────────────────────────────────────────
   33. BRAND VIDEO 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .bv-inner { min-height: 60vh; }
  .bv-content { padding: 24px 16px; gap: 14px; }
  .bv-eyebrow { font-size: .62rem; letter-spacing: .15em; }
  .bv-title { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.25; }
  .bv-desc  { font-size: .85rem; }
  .bv-cta   { font-size: .85rem; padding: 12px 20px; }
}

/* ────────────────────────────────────────
   34. 픽셀 최소화 — 360px 이하
   ──────────────────────────────────────── */
@media (max-width: 360px) {
  :root { --nav-h: 56px; }
  .sec-title { font-size: 1.5rem; }
  .hc--num   { font-size: 2.6rem; }
  .plan-col-title { font-size: 1.1rem; }
  .award-title    { font-size: .85rem; }
  .footer-bottom p { font-size: .68rem; }
  .btn-cin-main, .btn-cin-sub { padding: 13px 16px; font-size: .85rem; }
}

/* ────────────────────────────────────────
   34-B. 영상 폴백 — MP4 로드 실패 시 poster/배경 이미지 표시
   ──────────────────────────────────────── */

/* 히어로 배경 영상 — 없으면 poster 이미지 or 다크 배경 */
.hero-bg-video-wrap {
  background: #111 url('../images/svc-camera.jpg') center/cover no-repeat;
}
/* 영상 밴드 */
.video-band {
  background: #111 url('../images/pf-handdrip.jpg') center/cover no-repeat;
}
/* 브랜드 필름 섹션 */
.brand-video-sec,
.bv-inner {
  background: #111 url('../images/pf-handdrip.jpg') center/cover no-repeat;
}
/* 비디오 피처 섹션 (카메라를 직접 듭니다 — camera-work.mp4 폴백) */
.video-feature {
  background: #0a0806 url('../images/svc-camera.jpg') center/cover no-repeat;
}

/* ────────────────────────────────────────
   35. 스크롤 오버플로우 방지
   ──────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 768px) {
  .hero, .video-band, .logo-slider-wrap,
  .brand-video-sec, .video-feature { overflow: hidden; }
}

/* ────────────────────────────────────────
   36. iOS / Safari 특수 처리
   ──────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* iOS에서 autoplay 비디오 배경 처리 */
  .hero-bg-video,
  .bv-video,
  .vf-player,
  .vsr-player,
  .video-band__player {
    -webkit-playsinline: true;
  }

  /* iOS input zoom 방지 */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select, textarea {
    font-size: 16px !important;
  }
}

/* ────────────────────────────────────────
   37. ANCHOR PRICING / 가격 섹션
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .ap-grid { grid-template-columns: 1fr; gap: 12px; }
  .ap-card { padding: 20px 16px; }
  .ap-price-main { font-size: 2rem; }
  .ap-features { gap: 8px; }
}

/* ────────────────────────────────────────
   38. LIVE ACTIVITY BAR
   ──────────────────────────────────────── */
@media (max-width: 640px) {
  .live-bar { font-size: .72rem; padding: 7px 14px; gap: 8px; }
  .live-bar-dot { width: 6px; height: 6px; }
}

/* ────────────────────────────────────────
   39. MILESTONE PROGRESS
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .milestone-wrap { gap: 12px; }
  .milestone-item { gap: 10px; }
  .milestone-label { font-size: .8rem; }
  .milestone-num   { font-size: .88rem; }
}

/* ────────────────────────────────────────
   40. 홈페이지무료 페이지 (freeweb.html)
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .fw-hero { padding: calc(var(--nav-h) + 24px) 16px 60px; }
  .fw-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .fw-features { grid-template-columns: 1fr; gap: 14px; }
  .fw-feat-card { padding: 20px 16px; }
  .fw-cta-row { flex-direction: column; gap: 10px; }
  .fw-cta-row a { width: 100%; text-align: center; }
}

/* ────────────────────────────────────────
   41. SERVICES 페이지
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-hero-inner { padding: calc(var(--nav-h) + 20px) 16px 60px; }
  .svc-detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .svc-price-table th, .svc-price-table td { padding: 10px 8px; font-size: .82rem; }
}

/* ────────────────────────────────────────
   42. PORTFOLIO 페이지
   ──────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-hero-collage { gap: 3px; }
  .pf-collage-cell { min-height: 140px; }
  .pf-hero-title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pf-grid-item--wide { grid-column: auto; }
}

@media (max-width: 480px) {
  .pf-grid { grid-template-columns: 1fr; gap: 10px; }
  .pf-collage-cell { min-height: 120px; }
}