/*
 * chch-mobile.css — chch.kr Responsive & Mobile Utility System
 *
 * 모든 v4 스킨에서 공유하는 반응형/모바일 유틸리티.
 * 토큰(chch-tokens*.css) 뒤, 스킨 CSS 앞에 로드.
 *
 * 브레이크포인트:
 *   --bp-sm:  480px   (소형 모바일)
 *   --bp-md:  768px   (모바일/태블릿 기준)
 *   --bp-lg:  1024px  (태블릿/데스크톱)
 *   --bp-xl:  1280px  (데스크톱 좁은)
 */

/* ══════════════════════════════════════════════════════════════
   1. iOS / WebKit Form Reset
   iOS Safari에서 네이티브 폼 컨트롤 스타일 제거
   ══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 16px; /* iOS 확대 방지: 16px 이상 */
}

/* select 드롭다운 화살표 복원 */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb4cc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* iOS 입력 포커스 시 확대 방지 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   2. Touch Target — 최소 44px (Apple HIG / WCAG 2.5.5)
   opt-in 방식: .touch-target 클래스 또는 폼 요소에만 적용
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .touch-target,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. Dark Mode — 폼 요소 기본 다크
   각 스킨의 다크모드 전에 기본값 설정
   ══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color-scheme: dark;
  border-color: var(--chch-border, #2b425d);
  background: var(--chch-surface-soft, #13253a);
  color: var(--chch-text, #dbe7f7);
}

html[data-theme="dark"] ::placeholder {
  color: var(--chch-text-muted, #7d98b8);
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   4. Safe Area — iPhone X+ 노치/홈 인디케이터 대응
   각 스킨의 foot.php에서 개별 처리. 전역 강제 제거.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   5. Responsive Utilities
   ══════════════════════════════════════════════════════════════ */

/* 모바일 전용 표시/숨김 */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

/* 테블릿 이하 전용 */
.hide-tablet { display: block; }
.show-tablet { display: none; }

@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

/* 가로 스크롤 방지 — body만 적용 (html에 overflow 시 iOS fixed 깨짐) */
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 이미지 반응형 기본 */
img {
  max-width: 100%;
  height: auto;
}

/* 테이블 가로 스크롤 래퍼 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table-responsive table {
    min-width: 600px;
  }
}


/* ══════════════════════════════════════════════════════════════
   6. Typography — 모바일 폰트 크기 (opt-in)
   각 스킨에서 자체 조정하므로 전역 강제 제거.
   필요 시 .mobile-heading 클래스 사용.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   7. Scroll Behavior
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 터치 스크롤 성능 */
.mobile-app-panel,
.cafe-mobile-panel,
.blog-mobile-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ══════════════════════════════════════════════════════════════
   8. Print — 인쇄 시 불필요 요소 숨김
   ══════════════════════════════════════════════════════════════ */

@media print {
  .v4-scroll-controls,
  .mobile-app-nav,
  .cafe-v4-mobile-nav,
  .blog-v4-mobile-nav,
  nav,
  .chch-theme-toggle,
  .cafe-theme-toggle,
  .blog-theme-toggle,
  footer {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
  }

  a { color: #000 !important; text-decoration: underline !important; }
}