/* ==========================================================================
   지금 택시비 얼마? — 스타일시트
   - 모바일 우선 (360~430px)
   - 다크 모드 기본 (심야 사용 다수) + prefers-color-scheme: light 대응
   - WCAG AAA 명도 대비 (7:1 이상) 목표
   - 터치 타겟 48x48px 이상
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. 디자인 토큰                                                              */
/* -------------------------------------------------------------------------- */
:root {
  /* 색상 — 다크 모드 기본
     술 취한 사용자 배려: 채도 높은 원색 지양, 부드러운 톤. */
  --color-bg: #0e1116;
  --color-bg-elevated: #1a1f27;
  --color-bg-input: #232a34;

  --color-text: #f5f7fa;          /* 배경 #0e1116 대비 약 16:1 (AAA 통과) */
  --color-text-muted: #b8c0cc;    /* 배경 대비 약 9:1 (AAA 통과) */
  --color-text-dim: #7a8493;

  --color-border: #2c333f;
  --color-border-strong: #3a4250;

  /* 브랜드 — 부드러운 앰버(택시 노란색 유래, 진한 원색 대신 살짝 톤다운) */
  --color-primary: #ffc857;
  --color-primary-strong: #ffd775;
  --color-primary-on: #1a1200;    /* 프라이머리 위 텍스트 */

  /* 상태 색 — 채도 낮게 */
  --color-success: #7ed3a4;
  --color-warning: #ffb26b;
  --color-danger:  #ff8a8a;

  /* 폰트 크기 — body 최소 16px, 총요금 초대형 */
  --font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Segoe UI", "Malgun Gothic", sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-base: 16px;         /* body 최소 */
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-display: 56px;      /* 총 예상요금 */

  /* 간격 (8pt 리듬) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* 반경 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* 터치 타겟 최소 */
  --touch-min: 48px;
  --touch-comfortable: 56px;

  /* 컨테이너 폭 */
  --container-max: 480px;

  /* 트랜지션 — 짧고 얌전하게 (멀미 방지) */
  --transition-fast: 120ms ease-out;

  /* 그림자 (다크에서는 살짝만) */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 라이트 모드 오버라이드 */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f6f7fa;
    --color-bg-elevated: #ffffff;
    --color-bg-input: #eef1f6;

    --color-text: #10151d;         /* 배경 대비 약 16:1 (AAA) */
    --color-text-muted: #3f4a5c;   /* 약 9:1 */
    --color-text-dim: #6b7280;

    --color-border: #dfe4ed;
    --color-border-strong: #c4ccd8;

    --color-primary: #ff9500;       /* 라이트에선 살짝 진하게 */
    --color-primary-strong: #ff7a00;
    --color-primary-on: #1a1200;

    --shadow-card: 0 1px 2px rgba(20, 30, 50, 0.06),
      0 6px 16px rgba(20, 30, 50, 0.08);
  }
}

/* -------------------------------------------------------------------------- */
/* 2. 리셋 & 기본                                                              */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  /* 사용자 브라우저 폰트 크기 존중 (16px 기준) */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS safe area (홈 인디케이터) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 포커스 상태 — 매우 잘 보이게 (술 취한 사용자 배려) */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 3. 레이아웃                                                                  */
/* -------------------------------------------------------------------------- */
.app {
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4) var(--space-4) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-header {
  padding: var(--space-5) var(--space-1) var(--space-2);
  text-align: left;
}

.app-header__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-header__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* 4. 카드                                                                     */
/* -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
}

/* -------------------------------------------------------------------------- */
/* 5. 폼 필드                                                                  */
/* -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field--grow {
  flex: 1 1 auto;
  min-width: 0;
}

.field__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.field__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-input);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.field__input::placeholder {
  color: var(--color-text-dim);
}

.field__input:hover {
  border-color: var(--color-border-strong);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-elevated);
}

/* -------------------------------------------------------------------------- */
/* 6. 라우트 (출발/도착 + 스왑)                                                 */
/* -------------------------------------------------------------------------- */
.route {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.route__fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.route__swap {
  align-self: center;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------- */
/* 7. 버튼                                                                     */
/* -------------------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--color-primary-on);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-fast),
    background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn:hover {
  background: var(--color-primary-strong);
}

.btn:active {
  transform: scale(0.98);
}

.btn--secondary {
  background: var(--color-bg-input);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  background: var(--color-border);
}

.btn--icon {
  width: var(--touch-comfortable);
  height: var(--touch-comfortable);
  padding: 0;
  font-size: 24px;
  border-radius: var(--radius-md);
}

.btn--tall {
  /* 시각 정렬용 — datetime-local 옆에 놓을 때 높이 맞춤 */
  min-height: var(--touch-comfortable);
  align-self: end;
}

/* -------------------------------------------------------------------------- */
/* 8. 프리셋 칩                                                                */
/* -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chips__placeholder {
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
}

.chip {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-input);
  color: var(--color-text);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.chip:hover {
  border-color: var(--color-primary);
}

.chip[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-on);
  border-color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* 9. 인포바 (거리·시간 자동 계산 결과 1줄 요약)                                */
/* -------------------------------------------------------------------------- */
/*
  슬라이더 카드를 대체하는 경량 표시줄.
  출발지·도착지 좌표가 모두 확정된 경우에만 JS가 hidden 속성을 제거함.
  배경/보더를 의도적으로 낮은 채도로 설정 — 결과 카드보다 시각 우선순위 낮게.
*/
.route-info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.route-info-bar__text {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* 장소명이 길어도 줄바꿈 허용, 단어 단위로 */
  overflow-wrap: break-word;
  word-break: keep-all;
}

.route-info-bar__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: rgba(126, 211, 164, 0.12);
  color: var(--color-success);
  border: 1px solid rgba(126, 211, 164, 0.35);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* 10. 힌트/보조 문구                                                          */
/* -------------------------------------------------------------------------- */
.hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------------------- */
/* 11. 시각 카드                                                               */
/* -------------------------------------------------------------------------- */
.time-row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

/* datetime-local input은 브라우저 기본 UI가 커서 별도 스타일 최소화 */
input[type="datetime-local"].field__input {
  min-height: var(--touch-comfortable);
  /* iOS Safari에서 datetime-local의 색상 지정 대응 */
  color-scheme: dark light;
}

/* -------------------------------------------------------------------------- */
/* 12. 토글 스위치 (큰 사이즈)                                                  */
/* -------------------------------------------------------------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-min);
}

.toggle-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toggle-row__label {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
}

.toggle-row__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 36px;
  flex: 0 0 auto;
}

.switch__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  /* 실제 히트 영역은 부모 라벨 */
}

.switch__slider {
  position: absolute;
  inset: 0;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast);
}

.switch__slider::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: transform var(--transition-fast),
    background-color var(--transition-fast);
}

.switch__input:checked + .switch__slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.switch__input:checked + .switch__slider::before {
  transform: translate(28px, -50%);
  background: var(--color-primary-on);
}

.switch__input:focus-visible + .switch__slider {
  box-shadow: 0 0 0 3px rgba(255, 200, 87, 0.4);
}

/* 히트 영역 확대 (라벨 전체 클릭 가능) */
.switch {
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* 13. 결과 영역                                                                */
/* -------------------------------------------------------------------------- */
.result {
  background: linear-gradient(
    180deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-elevated) 100%
  );
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.result__eyebrow {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.result__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.result__total {
  font-size: var(--font-size-display);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.result__unit {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  font-weight: 700;
}

.result__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.result__details {
  text-align: left;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.result__summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-2) 0;
  list-style: none;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.result__summary::-webkit-details-marker {
  display: none;
}

.result__summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.result__details[open] .result__summary::after {
  transform: rotate(180deg);
}

.breakdown {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}

.breakdown__row:last-child {
  border-bottom: none;
}

.breakdown dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0;
}

.breakdown dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 뱃지 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: var(--color-bg-input);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.badge--surcharge {
  background: rgba(255, 178, 107, 0.15);
  color: var(--color-warning);
  border-color: rgba(255, 178, 107, 0.4);
}

.badge--extra {
  background: rgba(126, 211, 164, 0.15);
  color: var(--color-success);
  border-color: rgba(126, 211, 164, 0.4);
}

/* -------------------------------------------------------------------------- */
/* 14. 비교 영역                                                                */
/* -------------------------------------------------------------------------- */
.compare {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compare__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
}

.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.compare__cell {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.compare__cell--later {
  border-color: var(--color-primary);
}

.compare__eyebrow {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.compare__amount {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.compare__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* 15. 면책 문구 / 광고                                                        */
/* -------------------------------------------------------------------------- */
.disclaimer {
  padding: var(--space-4) var(--space-2);
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  text-align: center;
}

.disclaimer p {
  margin: 0;
}

.footer-links {
  margin-top: var(--space-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: var(--font-size-xs);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.ad-slot {
  min-height: 100px;
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
}

.ad-slot::before {
  content: "광고 영역";
}

/* -------------------------------------------------------------------------- */
/* 16. 요금 안내 (100원 단위 · 조용한 톤)                                        */
/* -------------------------------------------------------------------------- */
/*
   결과 영역 내부의 부가 안내. 경고/에러 아님.
   총액과 상세 접기 사이에 배치해 시각적 완충 역할.
   WHY 색상: 배경 카드 대비 최소 4.5:1(AA)은 유지하되 --color-text와 확실히 구분.
*/
.fare-note {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------- */
/* 17. 주소 자동완성 드롭다운                                                   */
/* (구 18번 — 소스 뱃지 섹션 삭제로 번호 당겨짐)                                */
/* -------------------------------------------------------------------------- */
/*
   .field--autocomplete: 부모 label에 position:relative를 부여해서
   드롭다운을 input 바로 아래에 절대배치.
*/
.field--autocomplete {
  position: relative;
}

.autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.autocomplete__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-3);
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.autocomplete__item:hover,
.autocomplete__item--active {
  background: var(--color-bg-input);
}

.autocomplete__name {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: 700;
}

.autocomplete__address {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* -------------------------------------------------------------------------- */
/* 19. 지도 미리보기                                                            */
/* -------------------------------------------------------------------------- */
.map-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.map-preview__canvas {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
}

.map-preview__note {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 12px;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* 20. SDK 상태 배너 (실패 시 조용한 안내)                                       */
/* -------------------------------------------------------------------------- */
.sdk-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* 21. 데스크톱 대응 (컨테이너만 고정)                                          */
/* -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .app {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
  }
}