/* ── Joure 아침 한 눈 코어 — PWA (앱 픽셀 정합판 2026-06-11) ──
   기준: joure-app 실렌더. 카드 = 무블러 반투명(+1px 보더), 독 버튼만 블러,
   타이포 = AppTypography × iOS 스케일 1.15 (아래 --t-* 토큰).
   토큰 출처: tokens.css(생성물) + 이 파일 상단의 앱 파생 토큰. */

* { box-sizing: border-box; }
/* hidden 속성은 어떤 display 선언보다 우선 — .fab 등의 display 가
   UA 의 [hidden]{display:none} 을 덮어써 로그인 화면에 새던 버그 방지 */
[hidden] { display: none !important; }

:root {
  /* ── 앱 타이포 파생 토큰 — AppTypography(mobile) × 1.15 (iOS 스케일) ──
     앱(joure-app/lib/design_system/tokens/typography.dart)과 1:1. */
  --t-header1: 41px;   /* 36 × 1.15 */
  --t-header4: 21px;   /* 18 × 1.15 — 브랜드·결정 한 줄 */
  --t-body2: 17px;     /* 15 × 1.15 — 일정 시각·일교차 */
  --t-body3: 16px;     /* 14 × 1.15 — 저녁 줄·온도 */
  --t-caption2: 14px;  /* 12 × 1.15 — 일정 제목·칩·날씨라벨 */
  --t-caption3: 12.5px;/* 11 × 1.15 — 비교 줄·배너 */
  --t-caption4: 11.5px;/* 10 × 1.15 — 더보기·현재·출발 스트립 */
  --t-moment: 11.5px;  /* momentLabel 10 × 1.15, ls 1.5 */
  --t-hero: 99px;      /* heroTemperature 86 × 1.15 */
  /* 앱 mutedInk = ink 72% — currentColor 기반 파생 */
  --muted-alpha: 0.72;
}

html, body { margin: 0; padding: 0; overflow-x: clip; height: 100%; }
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  color: var(--ambient-clear-morning-text, #fff);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.num { font-family: Inter, 'Pretendard Variable', sans-serif; font-variant-numeric: tabular-nums; }
.muted { opacity: var(--muted-alpha, 0.72); }

/* 날씨×시간 그라데이션 — 전체 배경 (데스크톱 5A: 콘텐츠 밖까지 확장) */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--theme-top, var(--ambient-clear-morning-top)) 0%, var(--theme-bottom, var(--ambient-clear-morning-bottom)) 100%);
  transition: background 600ms ease;
}

/* 콘텐츠 — 모바일 1열, 데스크톱 max 560px 중앙 (5A).
   앱과 동일: 상단 블록 거터 24(lg)는 블록별 패딩, 카드 거터 16(md). */
.app {
  max-width: 560px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 0 120px;
  min-height: 100%;
}
.head-pad { padding-left: var(--spacing-lg, 24px); padding-right: var(--spacing-lg, 24px); }

/* ── 세션 만료 배너 (앱 session_expired_banner 동일) ── */
.session-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: var(--spacing-xs, 4px) var(--spacing-md, 16px);
  background: color-mix(in srgb, var(--color-warning, #FF9800) 90%, transparent);
  color: var(--color-surface-light, #E7EEFB);
  border: none; font: inherit; font-size: var(--t-caption3); font-weight: 500;
  cursor: pointer; min-height: 32px;
}
.session-banner svg { width: 14px; height: 14px; flex: none; }

/* ── 상단바 (앱 moment_line: Joure header4 w700 + 톱니 18) ── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; padding: 10px var(--spacing-lg, 24px) 0;
}
.brand { font-size: var(--t-header4); font-weight: 700; letter-spacing: 0.01em; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: none; color: inherit; cursor: pointer;
  border-radius: 50%;
}
.topbar .icon-btn { width: 36px; height: 36px; opacity: var(--muted-alpha); margin-right: -6px; }
.topbar .icon-btn svg { width: 18px; height: 18px; }
.icon-btn svg { width: 20px; height: 20px; }

/* ── 결정 한 줄 (앱 statement_block: header4 w600 lh1.2 ls-0.4 + "날씨 ›") ── */
.head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: var(--spacing-md, 16px) 0 0; padding: 0 var(--spacing-lg, 24px);
}
.head-row .one-liner { flex: 1; min-width: 0; margin: 0; }
.one-liner {
  font-size: var(--t-header4);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
}
/* 더보기 진입 — caption4 + 꺾쇠 12 (앱과 동일한 절제) */
.more-link {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  background: none; border: none; color: inherit;
  font-size: var(--t-caption4); font-weight: 400; opacity: var(--muted-alpha);
  padding: 8px 0 8px 8px; min-height: 44px; cursor: pointer; white-space: nowrap;
}
.more-link:hover { opacity: 1; }

/* ── 히어로 온도 (앱 hero_temperature: 86pt w200 −2 + [글리프/현재] 세로) ── */
.current {
  display: flex; align-items: center; gap: var(--spacing-md, 16px);
  margin: 0; padding: 0 var(--spacing-lg, 24px);
}
.current .t { font-size: var(--t-hero); font-weight: 200; line-height: 1; letter-spacing: -2px; }
.current .d {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--t-caption4); opacity: var(--muted-alpha);
}
.current .d svg { width: 24px; height: 24px; }

/* ── 일교차 줄 (앱 daypart_range) ── */
.daypart {
  display: flex; align-items: center; gap: 2px;
  margin-top: var(--spacing-sm, 8px); padding: 0 var(--spacing-lg, 24px);
  font-size: var(--t-caption2);
}
.daypart .dp-range { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-body2); font-weight: 700; }
.daypart .dp-range svg { width: 16px; height: 16px; }
.daypart .dp-spacer { flex: 1; }
.daypart .dp-label { font-size: var(--t-caption4); opacity: var(--muted-alpha); margin-right: 2px; }
.daypart .dp-temp { font-weight: 600; }
.daypart .dp-dot { opacity: var(--muted-alpha); padding: 0 var(--spacing-xs, 4px); }

/* ── 준비물 칩 (앱 brief_chips: panel + 보더, 무블러) ── */
.chips {
  display: flex; gap: var(--spacing-sm, 8px); flex-wrap: wrap;
  margin-top: var(--spacing-md, 16px); padding: 0 var(--spacing-lg, 24px);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-xs, 4px);
  background: var(--theme-card, var(--ambient-clear-morning-card));
  border: 1px solid var(--theme-border, var(--ambient-clear-morning-border));
  border-radius: var(--radius-round, 9999px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: var(--t-caption2); font-weight: 500;
}
.chip svg { width: 18px; height: 18px; }

/* ── 보조 줄 (앱 brief_context_lines: 저녁 body3 + 비교·미세 caption3) ── */
.evening-line {
  font-size: var(--t-body3);
  line-height: 1.4;
  margin: var(--spacing-sm, 8px) 0 0; padding: 0 var(--spacing-lg, 24px);
  font-weight: 400;
}
.compare-line {
  font-size: var(--t-caption3); opacity: var(--muted-alpha); line-height: 1.4;
  margin: 2px 0 0; padding: 0 var(--spacing-lg, 24px);
  display: flex; align-items: center; gap: 6px;
}
.dust-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dust-좋음 { background: var(--color-dust-good); }
.dust-보통 { background: var(--color-dust-normal); }
.dust-나쁨 { background: var(--color-dust-bad); }
.dust-매우나쁨 { background: var(--color-dust-very-bad); }

/* ── 일정 섹션 헤더 (앱: "오늘 일정" momentLabel + "일정 ›" caption4) ── */
.timeline-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--spacing-xl, 32px); padding: 0 var(--spacing-md, 16px) 0;
}
.timeline-head .th-label {
  font-size: var(--t-moment); font-weight: 600; letter-spacing: 1.5px;
  opacity: var(--muted-alpha);
}

/* 동기화 시각 — 우하단 단순 텍스트 */
.sync-time { text-align: right; font-size: var(--t-caption4); opacity: 0.55; margin: 14px var(--spacing-md, 16px) 0; }

/* ── 타임라인 (앱 peek_brief_timeline) ── */
.now-line {
  display: flex; align-items: center; gap: var(--spacing-sm, 8px);
  font-size: var(--t-moment); letter-spacing: 1.5px; font-weight: 600;
  opacity: var(--muted-alpha);
  margin: 0; padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
}
.now-line::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.5; }

.timeline { list-style: none; margin: 0; padding: 0; }
.now-row { margin: 0; padding: 0; list-style: none; }
.event-li { margin: 0; list-style: none; }
.event-li.past { opacity: var(--state-past, 0.55); }
/* 일정 카드 — 무블러 반투명 + 1px 보더 (앱 _EventCard 동일) */
.event-row {
  display: grid; grid-template-columns: 52px 1fr auto; column-gap: var(--spacing-sm, 8px); row-gap: 3px; align-items: center;
  background: var(--theme-card, var(--ambient-clear-morning-card));
  border: 1px solid var(--theme-border, var(--ambient-clear-morning-border));
  border-radius: var(--radius-lg, 16px);
  padding: var(--spacing-md, 16px);
  margin: 0 var(--spacing-md, 16px) var(--spacing-sm, 8px);
  min-height: 44px;
  transition: background 200ms ease, opacity 200ms ease;
}
/* 워시 — 앱 동일 보간(Color.lerp 0.22/0.46/0.74). 비=rainy, 눈=snowy */
.event-row.wash-soft   { background: color-mix(in srgb, var(--color-weather-rainy) 22%, var(--theme-card)); }
.event-row.wash-medium { background: color-mix(in srgb, var(--color-weather-rainy) 46%, var(--theme-card)); }
.event-row.wash-strong { background: color-mix(in srgb, var(--color-weather-rainy) 74%, var(--theme-card)); }
.event-row.wash-snow.wash-soft   { background: color-mix(in srgb, var(--color-weather-snowy) 22%, var(--theme-card)); }
.event-row.wash-snow.wash-medium { background: color-mix(in srgb, var(--color-weather-snowy) 46%, var(--theme-card)); }
.event-row.wash-snow.wash-strong { background: color-mix(in srgb, var(--color-weather-snowy) 74%, var(--theme-card)); }
/* 출발 스트립 — 일정 카드 "위" 한 단계 낮은 계층 (앱 _TravelStrip: 무보더, 옅은 배경) */
.depart-strip {
  display: flex; align-items: center; gap: var(--spacing-xs, 4px); width: calc(100% - var(--spacing-md, 16px) * 2);
  margin: 0 var(--spacing-md, 16px) var(--spacing-xxs, 2px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  background: color-mix(in srgb, var(--theme-card) 50%, transparent);
  border: none; border-radius: var(--radius-md, 12px);
  color: inherit; font: inherit; font-size: var(--t-caption4); text-align: left;
  cursor: pointer; min-height: 32px; opacity: var(--muted-alpha);
}
.depart-strip svg { width: 14px; height: 14px; flex: none; }
.event-row.flash, .event-li.flash .event-row { animation: rowFlash 1.2s ease 2; }
@keyframes rowFlash {
  0%, 100% { border-color: var(--theme-border); }
  50% { border-color: var(--theme-card-selected, rgba(255,255,255,0.6)); background: var(--theme-card-selected); }
}

/* 행 구성 — 앱과 동일: 시간(52px, body2 w700) | 제목(caption2) | 글리프18+온도+라벨 */
/* 시작(주) 위 / 종료(보조·muted) 아래 — 앱 PeekBriefTimeline 좌측 열과 1:1 */
.event-row .e-time-lead { display: flex; flex-direction: column; }
.event-row .e-time-lead b { font-weight: 700; font-size: var(--t-body2); letter-spacing: -0.01em; }
.event-row .e-time-lead .e-time-end { font-weight: 500; font-size: var(--t-caption3); opacity: var(--muted-alpha); }
.event-row .e-title { font-weight: 400; font-size: var(--t-caption2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-row .e-subline { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--t-caption4); opacity: var(--muted-alpha); font-weight: 400; }
.event-row .e-sub-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-row .e-wx { display: flex; align-items: center; gap: var(--spacing-xs, 4px); font-size: var(--t-caption2); justify-content: flex-end; }
.event-row .e-wx b { font-weight: 600; font-size: var(--t-body3); }
.event-row .e-wx svg { width: 18px; height: 18px; flex: none; }
.event-row .e-wx .e-wx-lab { font-weight: 500; opacity: var(--muted-alpha); }

.conf-mark { font-size: var(--t-caption4); font-weight: 700; margin-left: 6px; }

/* 빈 상태 — 앱 동일: 카드 없이 한 줄 (등록은 + FAB) */
.empty {
  padding: 0 var(--spacing-md, 16px);
  font-size: var(--t-caption2); opacity: var(--muted-alpha);
}
.empty p { margin: 0; }

/* 판단 보류 모드 — 문장·칩 내림 */
.hold {
  padding: 24px var(--spacing-md, 16px); text-align: left;
  background: var(--theme-card); border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg, 16px); margin: var(--spacing-md, 16px);
}
.hold h2 { font-size: var(--t-header4); font-weight: 600; margin: 0 0 6px; }
.hold p { margin: 0; font-size: var(--t-caption2); opacity: 0.85; }
.hold .more-link { padding-left: 0; }

/* ── 스켈레톤 (실 레이아웃 동일 자리) ── */
.sk { border-radius: var(--radius-md, 12px); background: var(--theme-card); overflow: hidden; position: relative; margin-left: var(--spacing-lg, 24px); margin-right: var(--spacing-lg, 24px); }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
.sk-line { height: 24px; margin-top: 18px; margin-bottom: 8px; width: 70%; }
.sk-sub { height: 14px; width: 50%; margin-bottom: 16px; }
.sk-temp { height: 90px; width: 200px; margin-bottom: 22px; }
.sk-row { height: 56px; margin-top: 8px; margin-bottom: 0; border-radius: var(--radius-lg, 16px); }

/* ── 하단 글래스 독 + 등록 FAB (앱 glass_dock·register_fab 동일) ──
   좌: 홈(원형 글래스) / 우: 위로 챗(원형 글래스, ✨) + 아래 등록(+, 잉크 원형). */
.dock-btn {
  position: fixed; bottom: max(24px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--theme-card, rgba(255,255,255,0.3));
  border: 1px solid var(--theme-border, rgba(255,255,255,0.18)); color: inherit;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  cursor: pointer; display: grid; place-items: center;
}
.dock-btn svg { width: 22px; height: 22px; }
.dock-home { left: max(20px, env(safe-area-inset-left)); }
/* 등록 + — 잉크 원형 (앱 RegisterFab: bg=ink, elevation) */
.fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-ink, #15213A); color: var(--color-paper, #EAF1FA);
  border: none; font-size: 26px; font-weight: 300; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px var(--color-shadow-medium, rgba(0,0,0,0.2));
}
/* 챗 — 등록 위에 적재 (글래스 원형) */
.fab.fab-chat {
  background: var(--theme-card, rgba(255,255,255,0.3));
  border: 1px solid var(--theme-border, rgba(255,255,255,0.18)); color: inherit;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 56px + 12px);
  font-size: 0; box-shadow: none;
}
.fab.fab-chat svg { width: 22px; height: 22px; }

/* ── 로그인 · 온보딩 ── */
.gate { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 var(--spacing-lg, 24px); }
.gate h1 { font-size: clamp(24px, 6vw, 30px); font-weight: 300; line-height: 1.35; margin: 0; }
.gate h1 strong { font-weight: 650; }
.gate .sub { font-size: 14.5px; opacity: 0.85; margin: 0; }
/* 로그인 — 미니 랜딩: 브랜드 → 가치 → 기능 3줄 → 로그인 CTA → 안내 → 약관 */
.login-gate { min-height: calc(100vh - 120px); justify-content: flex-end; gap: 0; text-align: center; }
.login-gate .brand-hero { font-size: var(--t-header1); font-weight: 300; letter-spacing: 0.01em; margin: auto 0 var(--spacing-md, 16px); }
.login-gate .value-line { font-size: var(--t-body2); opacity: 0.9; margin: 0; }
/* 기능 3줄 — 카드 그리드 금지, 좌측 글리프 + 한 줄 (조용한 톤) */
.feature-list {
  list-style: none; margin: var(--spacing-lg, 24px) 0 auto; padding: 0;
  text-align: left; display: flex; flex-direction: column; gap: var(--spacing-sm, 8px);
}
.feature-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-caption2); line-height: 1.5; opacity: 0.92;
}
.feature-list li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; opacity: 0.85; }
.login-gate .btn { width: 100%; min-height: 54px; margin-top: var(--spacing-sm, 8px); font-size: 16px; font-weight: 500; }
.login-gate a.btn { text-decoration: none; }
.login-gate .btn svg { width: 18px; height: 18px; }
.login-gate .continuity { font-size: var(--t-caption2); opacity: 0.7; margin: var(--spacing-lg, 24px) 0 0; }
.login-gate .legal { font-size: var(--t-caption3); opacity: 0.65; margin: 10px 0 var(--spacing-md, 16px); }
.login-gate .legal a { color: inherit; text-underline-offset: 2px; }
.login-gate .login-note { font-size: 13px; opacity: 0.9; margin: 10px 0 0; }
.search-box { display: flex; gap: 8px; }
.search-box input {
  flex: 1; min-height: 48px; border-radius: var(--radius-md, 12px);
  border: 1px solid var(--theme-border); background: var(--theme-card);
  color: inherit; padding: 0 14px; font-size: 15px;
}
.search-box input::placeholder { color: inherit; opacity: 0.55; }
.cand-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cand-list button {
  width: 100%; text-align: left; min-height: 48px; margin: 6px 0;
  background: var(--theme-card); border: 1px solid var(--theme-border);
  border-radius: var(--radius-md, 12px); color: inherit; padding: 12px 14px;
  font-size: 14.5px; cursor: pointer;
}

/* ── 버튼 (앱 GlassButton: 무거운 블러 대신 blur 5 + 반투명) ── */
.btn {
  min-height: 48px; border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--theme-border, rgba(255,255,255,0.18)); cursor: pointer;
  font-size: 15px; font-weight: 500; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: inherit; background: var(--theme-card, rgba(255,255,255,0.2));
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: transform 100ms ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--theme-card-selected, rgba(255,255,255,0.5)); }
.btn.ghost { background: transparent; backdrop-filter: none; }
.btn[disabled] { opacity: var(--state-disabled, 0.38); pointer-events: none; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 바텀시트 (포커스 트랩 + 입력 보존) ── */
.sheet-backdrop { position: fixed; inset: 0; background: var(--color-barrier, rgba(0,0,0,0.6)); z-index: 40; }
.sheet {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 50;
  width: min(100%, 560px);
  background: var(--color-paper, #EAF1FA); color: var(--color-ink, #15213A);
  border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
  padding: 22px 20px max(22px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px var(--color-shadow-medium);
}
.sheet-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.field { display: block; margin: 10px 0; font-size: 13px; font-weight: 600; }
.field span { display: block; margin-bottom: 5px; }
.field input {
  width: 100%; min-height: 46px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.08));
  padding: 0 12px; font-size: 15px; background: #fff; color: inherit;
  font-family: inherit;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }
.form-error { color: var(--color-error, #F44336); font-size: 13px; margin: 8px 0 0; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sheet .btn { background: var(--color-surface-light); backdrop-filter: none; }
.sheet .btn.primary { background: var(--color-primary, #3B8DEB); color: #fff; border: none; }
.settings-body { font-size: 14px; }
.settings-body dt { font-weight: 700; margin-top: 10px; }
.settings-body dd { margin: 2px 0 0; opacity: 0.8; }
/* 이동수단 토글 — 세그먼트 컨트롤 */
.seg { display: inline-flex; border: 1px solid var(--theme-border, rgba(255,255,255,0.25)); border-radius: 10px; overflow: hidden; }
.seg button { min-height: 38px; padding: 0 16px; background: transparent; color: inherit; border: none; font-size: 13.5px; cursor: pointer; transition: background 150ms ease; }
.seg button.on { background: var(--theme-card-selected, rgba(255,255,255,0.22)); font-weight: 600; }
.seg-note { font-size: 11.5px; opacity: 0.6; margin: 6px 0 0; }

/* 모션 절제 — 아침엔 애니메이션을 기다릴 시간이 없다 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .event-row.flash, .event-li.flash .event-row { border-color: var(--theme-card-selected); } /* 점멸 대신 정적 강조 */
}

/* ── 챗 온보딩 ── */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 80vh; padding: 0 var(--spacing-md, 16px); }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 0; overflow-y: auto; }
.chat-log .bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: break-word;
  background: var(--theme-card, rgba(255,255,255,0.3)); border: 1px solid var(--theme-border, rgba(255,255,255,0.18));
}
.chat-log .bubble.bot { align-self: flex-start; border-bottom-left-radius: 6px; }
.chat-log .bubble.user { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--theme-card-selected, rgba(255,255,255,0.5)); }
.chat-composer { padding: 12px 0 16px; }
.chat-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row #chat-input {
  flex: 1; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.18));
  background: var(--theme-card, rgba(255,255,255,0.3)); color: inherit; font-size: 14.5px;
}
.chat-input-row .btn { flex: 0 0 auto; }

/* ── 상세 화면 (드릴다운) ── */
.detail-screen { min-height: 100vh; padding: 0 var(--spacing-md, 16px); }
.detail-top { display: flex; align-items: center; gap: 8px; padding: 8px 4px 14px; }
.detail-top .back-btn { font-size: 26px; line-height: 1; width: 36px; height: 36px; }
.detail-title { font-size: 18px; font-weight: 600; margin: 0; }
.detail-body { padding: 4px 2px 40px; }
.detail-placeholder { opacity: 0.6; font-size: 14px; padding: 40px 0; text-align: center; }

/* ── 날씨 상세 ── */
.wx-hero { text-align: center; padding: 18px 0 26px; }
.wx-hero-temp { font-size: 84px; font-weight: 200; line-height: 1; letter-spacing: -2px; }
.wx-hero-meta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; opacity: 0.8; }
.wx-hero-meta svg { width: 22px; height: 22px; }
.wx-hero.hold { padding: 30px 0; }

.wx-section-h { font-size: 13px; font-weight: 600; opacity: 0.55; margin: 22px 0 8px; }

.wx-48h .wx-curve { width: 100%; height: auto; display: block; }
.wx-curve-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx-curve-fill { fill: currentColor; opacity: 0.12; stroke: none; }
.wx-pin-stem { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.5; }
.wx-pin-dot { fill: currentColor; }
.wx-pin-label { font-size: 9px; fill: currentColor; filter: drop-shadow(0 0 2px rgba(0,0,0,0.35)); }
.wx-tick { font-size: 9px; fill: currentColor; opacity: 0.55; }

.wx-day-list { list-style: none; margin: 0; padding: 0; }
.wx-day { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--theme-border, rgba(0,0,0,0.08)); }
.wx-day:first-child { border-top: none; }
.wx-day-label { width: 32px; font-size: 13px; }
.wx-day-glyph { width: 22px; display: flex; }
.wx-day-glyph svg { width: 20px; height: 20px; opacity: 0.8; }
.wx-day-min { width: 34px; text-align: right; font-size: 13px; opacity: 0.6; }
.wx-day-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--theme-border, rgba(0,0,0,0.1)); }
.wx-day-bar i { position: absolute; top: 0; height: 5px; border-radius: 3px; background: currentColor; }
.wx-day-max { width: 34px; text-align: left; font-size: 13px; font-weight: 600; }

/* ── 일정 캘린더 ── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.cal-title { font-size: 16px; font-weight: 600; }
.cal-wd-row, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd { text-align: center; font-size: 11px; opacity: 0.55; padding: 4px 0; }
.cal-cell { position: relative; aspect-ratio: 1; border: none; background: none; color: inherit; font-size: 13px; cursor: pointer; border-radius: 10px; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.cal-cell.empty { pointer-events: none; }
.cal-cell .cal-dot { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0; }
.cal-cell.has .cal-dot { opacity: 0.7; }
.cal-cell.today { font-weight: 700; }
.cal-cell.sel { background: var(--theme-card, rgba(255,255,255,0.3)); }
.cal-sel-list { margin-top: 12px; }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-ev { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 6px 0; border: 1px solid var(--theme-border, rgba(255,255,255,0.18)); border-radius: var(--radius-md, 12px); cursor: pointer; background: var(--theme-card, rgba(255,255,255,0.18)); }
.cal-ev b { font-size: 14px; }
.cal-ev-title { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 선택 날짜에 일정 추가 — 리스트 아래 보조 버튼 */
.cal-add { margin-top: 10px; width: 100%; }

/* ── 일정 상세 ── */
.ev-detail { padding-top: 6px; }
.ev-hero { font-size: 40px; font-weight: 200; letter-spacing: -1px; }
.ev-title { font-size: 20px; font-weight: 600; margin: 6px 0 10px; }
.ev-loc { font-size: 14px; opacity: 0.75; margin: 0 0 10px; }
.ev-wx { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.ev-wx svg { width: 22px; height: 22px; }
.ev-wx-lab { font-size: 13px; opacity: 0.8; }
.ev-depart { font-size: 14px; opacity: 0.85; margin: 0 0 18px; }
.ev-actions { display: flex; gap: 10px; margin-top: 10px; }
.btn.ghost.danger { opacity: 0.85; }

/* ── 설정 화면 ── */
.settings-list { margin: 0; }
.settings-list dt { font-size: 12px; opacity: 0.6; margin: 18px 0 4px; }
.settings-list dd { margin: 0; font-size: 15px; }

/* ── 이동 상세 ── */
.trip-list { list-style: none; margin: 0; padding: 0; }
.trip { position: relative; border: 1px solid var(--theme-border, rgba(255,255,255,0.18)); border-radius: var(--radius-lg, 16px); background: var(--theme-card, rgba(255,255,255,0.18)); padding: 14px 16px; margin: 10px 0; }
.trip.next { border-color: color-mix(in srgb, currentColor 35%, var(--theme-border, transparent)); }
.trip-tag { display: inline-block; font-size: 11px; font-weight: 700; opacity: 0.85; margin-bottom: 6px; }
.trip-depart { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
.trip-mode { font-size: 13px; opacity: 0.8; margin-top: 2px; }
.trip-dest { font-size: 13px; opacity: 0.9; margin-top: 8px; }
.ev-depart[role="button"] { cursor: pointer; }

/* ── 챗봇 오버레이 (페이퍼 서피스 — 시트와 동일 배경) ── */
.chat-overlay[hidden] { display: none; }
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-paper, #EAF1FA);
  color: var(--color-ink, #15213A);
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 560px);
}

.chat-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.08));
  flex: none;
}

.chat-overlay-title { font-size: 17px; font-weight: 700; }

.chat-overlay-log {
  flex: 1; overflow-y: auto; padding: 16px 16px 8px;
  display: flex; flex-direction: column; gap: 10px;
}

.chat-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word;
}
.chat-bubble-user {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--color-primary, #3B8DEB); color: #fff;
}
.chat-bubble-assistant {
  align-self: flex-start; border-bottom-left-radius: 4px;
  background: var(--color-surface-light, rgba(21,33,58,0.06));
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.08));
}
.chat-tool-note { font-size: 12px; opacity: 0.6; font-style: italic; }

.chat-overlay-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 4px; flex: none; }
.chat-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-round, 999px);
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.12));
  background: var(--color-surface-light, rgba(21,33,58,0.06));
  color: var(--color-ink, #15213A);
  font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background 150ms ease;
}
.chat-chip:hover { background: var(--color-stroke-soft, rgba(21,33,58,0.1)); }

.chat-overlay-input-row {
  display: flex; gap: 8px;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.08));
  flex: none; background: var(--color-paper, #EAF1FA);
}
.chat-overlay-input-row #chat-input {
  flex: 1; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.12));
  background: #fff; color: var(--color-ink, #15213A);
  font-size: 15px; font-family: inherit;
}
.chat-overlay-input-row #chat-input::placeholder { opacity: 0.45; }
.chat-send-btn { flex: none; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md, 12px); min-height: 44px; }
.chat-send-btn svg { width: 18px; height: 18px; }

/* ── 챗봇 confirm (ask) 카드 ── */
.chat-ask-card {
  align-self: flex-start; max-width: 88%;
  background: var(--color-surface-light, rgba(21,33,58,0.06));
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.12));
  border-radius: 16px; border-bottom-left-radius: 4px;
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px;
}
.chat-ask-summary { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 0; color: var(--color-ink, #15213A); }
.chat-ask-impact { font-size: 12.5px; opacity: 0.65; margin: 0; line-height: 1.35; color: var(--color-ink, #15213A); }
.chat-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chat-ask-btn {
  min-height: 36px; padding: 0 16px; border-radius: var(--radius-round, 999px);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: opacity 150ms ease; border: 1.5px solid transparent;
}
.chat-ask-btn:disabled { cursor: default; opacity: 0.5; }
.chat-ask-btn-primary { background: var(--color-primary, #3B8DEB); color: #fff; border-color: var(--color-primary, #3B8DEB); }
.chat-ask-btn-danger { background: var(--color-error, #F44336); color: #fff; border-color: var(--color-error, #F44336); }
.chat-ask-btn-ghost { background: transparent; color: var(--color-ink, #15213A); border-color: var(--color-stroke-soft, rgba(21,33,58,0.2)); }
.chat-ask-btn-selected { opacity: 0.6; }

/* ── 폼 보강 + 설정 확장 ── */
.field textarea {
  width: 100%; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.08));
  padding: 10px 12px; font-size: 15px; background: #fff; color: inherit;
  font-family: inherit; resize: vertical;
}
.allday-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.allday-row input { width: 18px; height: 18px; accent-color: var(--color-primary, #3B8DEB); }

/* 장소 자동완성 — 입력 바로 아래 드롭 리스트 */
.loc-field { position: relative; }
.loc-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.12));
  border-radius: var(--radius-sm, 8px); box-shadow: 0 8px 24px rgba(21,33,58,0.14);
}
.loc-suggest button {
  display: block; width: 100%; min-height: 44px; padding: 0 10px;
  background: transparent; border: none; text-align: left;
  font-size: 14px; font-family: inherit; color: var(--color-ink, #15213A);
  border-radius: 6px; cursor: pointer;
}
.loc-suggest button:hover, .loc-suggest button:focus { background: rgba(59,141,235,0.10); }
.loc-sub { font-size: 12px; opacity: 0.6; margin-left: 6px; }

/* 일정 상세 — 메모 */
.ev-memo { margin: 8px 0 0; font-size: 14px; line-height: 1.5; opacity: 0.85; white-space: pre-wrap; }

/* 설정 확장 — 행 우측 버튼, 보조 노트, 알림 슬롯, 링크 */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-btn { min-height: 44px; padding: 0 12px; font-size: 13px; }
.set-dim { font-size: 12.5px; opacity: 0.6; }
.set-note { font-size: 12px; opacity: 0.7; margin: 6px 0 0; }
.set-links a { color: inherit; opacity: 0.8; text-underline-offset: 3px; }
.notify-grid { display: flex; gap: 12px; margin: 4px 0 8px; }
.notify-slot { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.notify-slot input {
  min-height: 44px; min-width: 120px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-stroke-soft, rgba(21,33,58,0.12));
  padding: 0 10px; font-size: 15px; background: #fff; color: var(--color-ink, #15213A);
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.settings-list .danger { color: var(--color-error, #F44336); }

/* 날씨 상세 — 위치 전환 버튼 */
.wx-loc-btn { min-height: 44px; padding: 0 14px; font-size: 13px; margin: 10px 0 4px; }

/* 설정 내 지역 재설정 시트 — 온보딩 이탈 없이 인라인 검색 */
.region-sheet-body .search-box { margin-top: 8px; }
.region-sheet-body .search-box input { background: #fff; border-color: var(--color-stroke-soft, rgba(21,33,58,0.12)); color: var(--color-ink, #15213A); }
.region-sheet-body .search-box .btn { background: var(--color-surface-light); backdrop-filter: none; }
.region-sheet-body .cand-list button { background: var(--color-surface-light); border-color: var(--color-stroke-soft, rgba(21,33,58,0.12)); color: var(--color-ink, #15213A); }
.region-sheet-body .cand-list { max-height: 40vh; overflow-y: auto; }