/* Kick DS — Display 폰트(Hanken Grotesk). 본문/한글은 Pretendard 유지 */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap");

/*
 * EventNext - Application Stylesheet
 * Uses Tailwind CSS via Propshaft (no preprocessing required)
 *
 * Tailwind utility classes are used directly in ERB templates.
 * This file is for custom properties and overrides only.
 */

/* Pretendard font family */
:root {
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;
}

html {
  font-family: var(--font-sans);
  touch-action: pan-x pan-y;
}

/* Smooth transitions for sidebar drawer */
[data-sidebar-target="drawer"] {
  transition: transform 200ms ease;
}

/* Turbo progress bar color */
.turbo-progress-bar {
  height: 3px;
  background-color: #1e70f7; /* Kick DS electric blue */
}

/* Ensure body doesn't show scrollbar when mobile sidebar is open */
body.sidebar-open {
  overflow: hidden;
}

/* iOS Safe Area Insets (notch / home indicator)
 * viewport-fit=cover must be set in meta viewport for these to work.
 * .safe-area-bottom adds bottom padding equal to the home indicator height.
 * .safe-area-x adds left/right padding for edge-to-edge screens.
 */
/* 네이티브 앱이 주입하는 --native-safe-area-bottom 을 우선 사용한다. 하단 탭바/토스트가
 * 쓰는 것과 같은 값이라, WebView 가 env() 를 0 으로 보고하는 상황에서도 어긋나지 않는다. */
.safe-area-bottom {
  padding-bottom: var(--native-safe-area-bottom, env(safe-area-inset-bottom));
}

.safe-area-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 기본 여백 + 홈 인디케이터 인셋을 "더한다"(가산). max() 로 하면 인셋이 큰 기기에서
 * 여백 전부를 인디케이터가 먹어 콘텐츠가 인디케이터에 딱 붙는다 — 탭바가 쓰는
 * 방식(자체 padding + 인셋)과 동일하게 맞춘다. */
.safe-area-bottom-4 {
  padding-bottom: calc(1rem + var(--native-safe-area-bottom, env(safe-area-inset-bottom)));
}

.safe-area-bottom-6 {
  padding-bottom: calc(1.5rem + var(--native-safe-area-bottom, env(safe-area-inset-bottom)));
}

/* iOS auto-zoom prevention: input font-size must be >= 16px */
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   모바일 가로 스크롤 백스톱 (2026-07-22) — 주 스크롤 컨테이너(#ek-main)는
   모바일에서 절대 옆으로 스크롤되지 않는다. 긴 unbroken 문자열(i18n 키·계정
   ID·URL·이메일 등)이 실수로 break 처리를 빠뜨려도 화면 전체가 좌우로
   흔들리는(콘텐츠가 좌우로 왔다갔다) 증상을 구조적으로 차단하는 안전망.
   정당한 가로 스크롤(테이블·대진표·필터칩·stat bar)은 각자 overflow-x-auto
   래퍼로 내부 스크롤하므로 영향 없음(전수 확인). 데스크톱은 여유가 있고
   래퍼 없는 와이드 요소가 있을 수 있어 미적용(모바일 한정).
   ⚠️ 이건 "증상 차단" 안전망일 뿐 — 긴 값 자체는 break-all/break-words로
   wrap 시켜 잘리지 않게 하는 게 우선(RULES LO-16). id 특이성으로 확정 적용. */
@media (max-width: 767px) {
  #ek-main {
    overflow-x: hidden;
  }
}

/* Flatpickr: disable adjacent-month date clicks (no built-in option exists) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  pointer-events: none;
}

/* Remove browser autofill blue/purple background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #111827 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
 * Kick DS — 헤드라인 디스플레이 폰트
 * h1~h4 + .font-display → Hanken Grotesk (지오메트릭, 굵게).
 * 한글은 라틴 전용 Hanken에 글리프가 없어 자동으로 Pretendard fallback.
 * locale이 ko일 때(html[lang=ko])는 헤드라인 전체를 Pretendard로 강제해
 * 한·영 혼용 시 글꼴 불일치를 방지한다.
 * ============================================================ */
h1, h2, h3, h4, .font-display {
  font-family: 'Hanken Grotesk', var(--font-sans);
  letter-spacing: -0.02em;
}

html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}