/* mobile.css — daehanpns-site 폰(≤767px) 전용 오버라이드.
 * site.css·reveal.css 뒤에서 로드한다. 이 프로젝트는 Tailwind 빌드가 없으므로
 * 신규 유틸 클래스는 금지 — 기존 className을 CSS 선택자로 오버라이드한다.
 * 모든 규칙은 @media 안에만 둔다(데스크톱 회귀 방지).
 * 생성 근거: docs/mobile-optimization-plan.md
 */

/* =================== 1. 전역: 네비 · 티커 · 드로어 · 푸터 =================== */
@media (max-width: 767px) {
  :root { --dhp-nav-h: 104px; }

  /* 상단 유틸바: "투자 유의사항"+구분선 숨기고 티커만 노출 */
  .dhp-nav > div:first-child .shrink-0 { display: none !important; }
  /* 햄버거 탭타깃 ≥44px */
  .dhp-nav button[aria-label="메뉴 토글"] { min-width: 44px; min-height: 44px; }
  /* 로고 축소(햄버거와 간섭 방지) */
  .dhp-nav a[href="/"] span { font-size: 16px; }
  .dhp-nav a[href="/"] > div { padding-left: 0; padding-right: 0; }
  /* 티커 간격 */
  .ticker-animation { gap: 20px !important; }
  /* 모바일 드로어 링크 탭타깃 */
  .dhp-nav + div nav.flex-col > a { min-height: 48px; display: flex; align-items: center; }

  /* 푸터 */
  footer.bg-\[\#f2f4f7\] { padding-top: 32px; padding-bottom: 32px; }
  footer .max-w-7xl.flex-col.gap-12 { gap: 32px !important; }
  footer .text-gray-400.text-sm,
  footer .text-gray-400.text-sm p { font-size: 11px; line-height: 1.6; word-break: keep-all; }
}

/* =================== 2. 홈 — Hero 슬라이더 =================== */
@media (max-width: 767px) {
  .dhpx-hero { height: 72vh; height: 72svh; min-height: 440px; }
  .dhpx-content { padding: 0 20px; }
  .dhpx-title { font-size: 24px; line-height: 1.25; }
  .dhpx-sub { font-size: 14px; margin-top: 14px; }
  /* 도트는 유일한 이동 수단 → S01 시트 리프트(-22px)에 가리지 않게 위로 */
  .dhpx-dots { bottom: 44px; gap: 6px; }
  /* 화살표가 모바일에서 숨겨지므로 도트가 유일 이동수단 → 44px 투명 히트박스 */
  .dhpx-dot { position: relative; }
  .dhpx-dot::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
  .dhpx-dot.is-active { width: 24px; }
  /* 줌 애니메이션 완화(발열/배터리) */
  .dhpx-slide.is-active .dhpx-bg.zoom-in,
  .dhpx-slide.is-active .dhpx-bg.zoom-out { animation: none; transform: scale(1.04); }
}

/* =================== 3. 홈 — S01 앱 히어로 =================== */
@media (max-width: 767px) {
  section.max-w-7xl > div.z-50 { padding: 40px 16px 64px; }
  section.max-w-7xl h1 { font-size: 34px; line-height: 1.12; margin-bottom: 16px; }
  section.max-w-7xl > video { height: 180px; bottom: 0; }
  /* CTA: 메인 전폭 + 스토어 2개 50:50 */
  section.max-w-7xl div.flex.flex-wrap { gap: 8px; margin-bottom: 32px; width: 100%; }
  section.max-w-7xl div.flex.flex-wrap > a,
  section.max-w-7xl div.flex.flex-wrap > button { padding: 12px 18px; flex: 1 1 auto; justify-content: center; min-height: 44px; }
  section.max-w-7xl div.flex.flex-wrap > a:first-child { flex-basis: 100%; }
}
@media (min-width: 400px) and (max-width: 480px) {
  section.max-w-7xl h1 { font-size: 42px; }
}

/* =================== 4. 홈 — S02 · S03 기능/CTA 카드 =================== */
@media (max-width: 767px) {
  /* 세로 카드: 고정 500px 해제 + 정보성 이미지 잘림 방지 */
  .grid-cols-1.md\:grid-cols-2 > .flex.flex-col.h-\[500px\] { height: auto !important; }
  .grid-cols-1.md\:grid-cols-2 > .flex.flex-col.h-\[500px\] > .flex-1:not(.relative) { flex: 0 0 auto !important; }
  .grid-cols-1.md\:grid-cols-2 > .flex.flex-col.h-\[500px\] > .relative.flex-1 { flex: 0 0 auto !important; aspect-ratio: 4 / 3; }
  .grid-cols-1.md\:grid-cols-2 .relative.flex-1 > a > img,
  .grid-cols-1.md\:grid-cols-2 .relative.flex-1 > img { object-fit: contain !important; height: auto !important; max-height: 42vh; }
  /* 텍스트 패널 패딩 / 상단 패딩 / 헤드라인 */
  section.bg-\[\#f2f4f7\] .p-10 { padding: 24px !important; }
  section.bg-\[\#f2f4f7\].pt-20 { padding-top: 40px !important; }
  section.bg-\[\#f2f4f7\] h2.text-2xl { font-size: 22px !important; line-height: 1.25 !important; }
  /* 가로형 카드 미디어 높이 안정화 (S02·S03·S05 공통) */
  section.bg-\[\#f2f4f7\] .flex.flex-col.md\:flex-row > .relative.flex-1 { flex: 0 0 auto !important; }
  section.bg-\[\#f2f4f7\] .flex.flex-col.md\:flex-row > .relative.flex-1 > video { height: auto !important; aspect-ratio: 16 / 10; object-fit: cover !important; }
  section.bg-\[\#f2f4f7\] .flex.flex-col.md\:flex-row > .relative.flex-1 > img { object-fit: contain !important; height: auto !important; max-height: 40vh; width: 100%; }
}

/* =================== 5. 홈 — S04 후기 마퀴 · S05 마무리 =================== */
@media (max-width: 767px) {
  /* hover 전용 공유버튼: 모바일 영구 숨김 */
  .dhp-marquee .group .opacity-0.group-hover\:opacity-100 { display: none !important; }
  /* 마퀴 카드 폭/패딩/제목 줄바꿈 */
  .dhp-marquee > .flex-shrink-0 { width: 78vw !important; max-width: 300px !important; padding: 1.5rem !important; border-radius: 1.75rem !important; }
  .dhp-marquee > .flex-shrink-0 h3 { white-space: normal !important; word-break: keep-all; font-size: 1rem !important; line-height: 1.4 !important; margin-bottom: 1.25rem !important; }
  /* S04 섹션 여백/헤더 */
  section.py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section.py-24 > .max-w-7xl.mb-12 { margin-bottom: 2rem !important; }
  section.py-24 h2 { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 1.25rem !important; }
  /* S05 음수마진 카드 겹침 방지(인라인 우선 → 속성 선택자) */
  section > div[style*="-18px"] { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* S05 텍스트 패널 패딩 / 라운드 */
  section .flex-1.p-10 { padding: 1.75rem !important; }
  section > div.rounded-\[24px\] { border-radius: 16px !important; }
}

/* =================== 6. 서브공통 — PageHero · Breadcrumb · SideMenuLayout =================== */
@media (max-width: 767px) {
  /* PageHero: 고정 높이 → 콘텐츠 기반(제목 잘림 방지). 배너를 키워 min-height 상향. */
  .dhp-hero { height: auto; min-height: 15.5rem; padding-top: 5rem; padding-bottom: 2rem; }
  .dhp-hero .container.pt-16 { padding-top: 0; }
  .dhp-hero h1.text-4xl { font-size: 1.625rem; line-height: 1.25; }
  .dhp-hero p.text-lg { font-size: 0.95rem; line-height: 1.4; }
  /* SideMenuLayout 본문 가로 overflow 예방 */
  .flex.flex-col.lg\:flex-row > * { min-width: 0; max-width: 100%; }
  /* 모바일 메뉴 토글 버튼 전폭 */
  .lg\:hidden > button[type="button"] { width: 100% !important; justify-content: center; min-height: 48px; }
  .lg\:hidden > button[type="button"] svg.ml-6 { margin-left: 0.5rem; }
  /* Breadcrumb */
  nav[aria-label="Breadcrumb"] > .flex.flex-wrap { row-gap: 0.25rem; }
  nav[aria-label="Breadcrumb"] { font-size: 0.8125rem; }
  nav[aria-label="Breadcrumb"] a { min-height: 40px; display: inline-flex; align-items: center; }
  .bg-gray-50.py-4 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* =================== 7. 전문가 — Best · List · Review · ExpertCard =================== */
@media (max-width: 767px) {
  /* best/review 3열 → 1열 */
  .grid.grid-cols-1.sm\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 1rem !important; }
  /* horizontal ExpertCard 세로 스택 + 버튼 전폭 */
  .bg-white.rounded-2xl.shadow-sm.p-6.flex.items-center.gap-4 { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; }
  .bg-white.rounded-2xl.shadow-sm.p-6.flex.items-center.gap-4 > .flex-shrink-0:last-child { width: 100%; }
  .bg-white.rounded-2xl.shadow-sm.p-6.flex.items-center.gap-4 > .flex-shrink-0:last-child > a { width: 100%; display: flex; justify-content: center; }
  /* 페이지 컨테이너/제목/리드 (전문가 3종 공통) */
  .pt-32.pb-24 { padding-top: 5rem !important; padding-bottom: 3rem !important; }
  h1.text-4xl.md\:text-6xl { font-size: 1.875rem; line-height: 1.2; }
  .pt-32.pb-24 p.text-lg { font-size: 1rem; line-height: 1.6; }
  /* ExpertCard 패딩/칩 */
  .bg-white.rounded-2xl.p-6 { padding: 1.25rem !important; }
  .bg-blue-50.text-blue-600.rounded-full.px-3.py-1 { padding-left: 0.625rem; padding-right: 0.625rem; }
}

/* =================== 8. 콘텐츠 — Company · Guide · Notice · Community · Subscription · Mypage · Disclaimers =================== */
@media (max-width: 767px) {
  /* Company: 데스크톱용 강제 <br> 제거 → 자연 줄바꿈 */
  .container br { display: none; }
  .container p { word-break: keep-all; }
  .min-h-\[400px\] { min-height: 0 !important; padding-bottom: 5rem; }
  .min-h-\[400px\] > .absolute.bottom-6.right-6 img { width: 88px !important; height: 88px !important; }
  .min-h-\[400px\] > .absolute.bottom-6.right-6 { bottom: 0.75rem; right: 0.75rem; opacity: 0.5; }
  .container .p-8 { padding: 1.25rem !important; }
  .container .space-x-2 > .flex-shrink-0 img.w-16.h-16 { width: 3rem !important; height: 3rem !important; }
  .container h3.text-xl { font-size: 1.0625rem; margin-bottom: 0.5rem; }
  .container p.text-gray-600.leading-relaxed { font-size: 0.9375rem; line-height: 1.55; }
  /* Guide/Subscription: 텍스트 박힌 단일 이미지 → 폭 맞춤(판독 한계는 마크업 재구성 백로그) */
  .container.px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .max-w-4xl > img.w-full,
  .max-w-4xl img { width: 100%; height: auto; object-fit: contain; }
  /* Disclaimers / Mypage 상단 여백 */
  main.max-w-3xl.pt-32 { padding: 6rem 1.25rem 3.5rem !important; }
  main.max-w-3xl .text-3xl { font-size: 1.5rem; }
  .pt-32.pb-24.max-w-7xl { padding-top: 6rem; padding-bottom: 3rem; }
  /* Notice / Community */
  .container h1.text-3xl,
  .container h2.text-3xl { font-size: 1.5rem; line-height: 1.3; }
  .container .p-6.rounded-2xl { padding: 1rem !important; }
  .container .p-6.rounded-2xl select.min-w-\[120px\] { min-width: 0 !important; width: 100% !important; }
  .container .p-6.rounded-2xl .relative.flex input[type="text"] { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .container .p-6.rounded-2xl button { min-width: 44px; min-height: 44px; }
  .divide-y > .grid.px-6.py-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .divide-y .col-span-12.font-bold { word-break: keep-all; line-height: 1.45; }
  /* Community 빈 상태 / 등록 버튼 */
  .flex-1 .py-24.flex.flex-col.items-center { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .flex.flex-col .bg-\[\#443FC3\].text-white.rounded-xl { min-height: 44px; }
}

/* =================== 9. 폼 — SupportInquiry · SupportFaq =================== */
@media (max-width: 767px) {
  /* 하단 버튼 세로 스택 전폭 (가로 overflow 해소) */
  form .flex.justify-center.space-x-4 { flex-direction: column; align-items: stretch; }
  form .flex.justify-center.space-x-4 > * { margin-inline-start: 0 !important; margin-inline-end: 0 !important; }
  form .flex.justify-center.space-x-4 > * + * { margin-top: 0.75rem; }
  form .flex.justify-center.space-x-4 > button { min-width: 0 !important; width: 100%; min-height: 48px; }
  /* 첨부 행 스택 */
  form .bg-gray-50 .flex.items-center.space-x-4 { flex-direction: column; align-items: flex-start; }
  form .bg-gray-50 .flex.items-center.space-x-4 > * { margin-inline-start: 0 !important; margin-inline-end: 0 !important; }
  form .bg-gray-50 .flex.items-center.space-x-4 > * + * { margin-top: 0.5rem; }
  /* 카드 패딩/간격/textarea */
  form > .bg-white.rounded-2xl.shadow-sm { padding: 1.25rem; }
  form > .bg-white.rounded-2xl.shadow-sm.space-y-10 > * + * { margin-top: 1.5rem; }
  form textarea { min-height: 9rem; height: 9rem; }
  /* iOS 포커스 줌 방지: 입력 16px */
  form input,
  form textarea { font-size: 16px; padding-left: 1rem; padding-right: 1rem; }
  /* FAQ 빈 상태 */
  .border-dashed.rounded-2xl { padding-top: 3rem; padding-bottom: 3rem; }
  .flex.justify-between.items-center.mb-8.pb-4 h1 { word-break: keep-all; }
}

/* =================== 11. 탭타깃·가독성 보정 (홈 슬라이더 화살표·티커) =================== */
@media (max-width: 767px) {
  /* 홈 히어로 좌우 화살표: 모바일은 도트가 이동수단 → 38px 중복 컨트롤 숨김 */
  [aria-label="이전 슬라이드"],
  [aria-label="다음 슬라이드"] { display: none !important; }
  /* 상단 티커 10px → 11px 가독성 */
  .ticker-animation .text-\[10px\],
  .ticker-animation { font-size: 11px; }
}

/* =================== 10. 태블릿 (768~1023px) — 필요한 보정만 =================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 전문가 best/review: sm:grid-cols-3가 이 구간에서 좁음 → 2열 */
  .grid.grid-cols-1.sm\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}