/* ==========================================================================
   Crew-cal 스타일
   간격·모서리·글자 크기는 iOS 값을 따르되, 색은 채도를 낮춘 따뜻한 계열로 쓴다.
   쨍한 시스템 색을 옅게 깔면 파스텔이 튀어 촌스러워 보인다는 이야기가 있었다.
   토큰은 :root 에 모아 두고, 다크 모드는 토큰만 바꿔 끼운다.
   ========================================================================== */

[hidden] { display: none !important; }

/* 다른 화면으로 가는 링크. 옆의 작은 버튼들과 같은 모양으로 맞춘다. */
a.ghost {
  display: inline-flex;
  align-items: center;
  background: var(--fill);
  border-radius: var(--r-control);
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.ghost:active { opacity: 0.6; }
a.ghost.small { padding: 8px 13px; font-size: 14px; border-radius: 10px; }

:root {
  color-scheme: light;

  /* 바탕과 면 */
  --bg: #f7f5f1;                        /* 따뜻한 흰색 */
  --surface: #ffffff;                   /* secondarySystemGroupedBackground */
  --surface-alt: #f7f5f1;               /* 카드 안의 한 단계 아래 면 */
  --fill: rgba(122, 112, 94, 0.10);    /* secondarySystemFill */
  --fill-strong: rgba(122, 112, 94, 0.18);
  --input-bg: rgba(122, 112, 94, 0.10);
  --separator: rgba(72, 66, 54, 0.20);
  --line: rgba(72, 66, 54, 0.15);

  /* 글자 */
  --text: #221f1a;
  --muted: rgba(72, 66, 54, 0.62);       /* secondaryLabel */
  --faint: rgba(72, 66, 54, 0.34);       /* tertiaryLabel */
  --cal-sub: rgba(46, 42, 35, 0.86);    /* 달력 칸의 도시·시각 — 작아서 진하게 쓴다 */

  /* 강조 */
  --accent: #33456e;                    /* 차분한 남색 */
  --accent-ink: #ffffff;
  --accent-soft: rgba(51, 69, 110, 0.10);
  --accent-weak: rgba(122, 112, 94, 0.14);
  --accent-weak-ink: rgba(72, 66, 54, 0.35);

  --danger: #a2554a;
  --danger-soft: rgba(176, 82, 74, 0.11);
  --sun: #a2554a;
  --sat: #33456e;
  --ok: #6f7a55;

  --warn-bg: rgba(161, 121, 74, 0.13);
  --warn-line: rgba(161, 121, 74, 0.26);
  --warn-text: #8a6338;
  --unknown-row: rgba(168, 90, 74, 0.07);

  --toast-bg: rgba(40, 36, 30, 0.93);
  --toast-ink: #ffffff;

  /* 근무 분류 — 채도를 낮춘 색. 비행·체류는 남색, 쉬는 날은 세이지, 대기는 카라멜 */
  --cat-flight: #33456e;      /* 네이비 — 비행·체류 */
  --cat-layover: #33456e;     /* 비행과 한 색 */
  --cat-standby: #b18a3a;     /* 머스타드 — 대기 */
  --cat-off: #8d8067;         /* 에토프 베이지 — 휴무 */
  --cat-vacation: #6b7a45;    /* 올리브 — 휴가 */
  --cat-training: #a2603f;    /* 테라코타 — 교육 */
  --cat-other: #97907f;
  --cat-unknown: #8f3f3a;     /* 딥 브릭 — 미확인 */
  --chip-tint: 0.16;                    /* 칩 배경에 쓰는 색의 농도 */

  /* 모서리 */
  --r-card: 16px;
  --r-control: 12px;
  --r-chip: 7px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #141310;
    --surface: #201d18;
    --surface-alt: #2b2822;
    --fill: rgba(168, 156, 134, 0.15);
    --fill-strong: rgba(168, 156, 134, 0.25);
    --input-bg: rgba(168, 156, 134, 0.15);
    --separator: rgba(160, 148, 126, 0.28);
    --line: rgba(160, 148, 126, 0.20);

    --text: #f2eee6;
    --muted: rgba(242, 236, 224, 0.62);
    --faint: rgba(242, 236, 224, 0.32);
    --cal-sub: rgba(242, 236, 224, 0.86);

    --accent: #94a6cf;
    --accent-ink: #ffffff;
    --accent-soft: rgba(148, 166, 207, 0.20);
    --accent-weak: rgba(168, 156, 134, 0.15);
    --accent-weak-ink: rgba(242, 236, 224, 0.32);

    --danger: #e0877a;
    --danger-soft: rgba(224, 135, 122, 0.20);
    --sun: #e0877a;
    --sat: #94a6cf;
    --ok: #a3b083;

    --warn-bg: rgba(215, 171, 114, 0.16);
    --warn-line: rgba(215, 171, 114, 0.30);
    --warn-text: #e6c489;
    --unknown-row: rgba(224, 135, 122, 0.12);

    --toast-bg: rgba(48, 44, 38, 0.94);
    --toast-ink: #ffffff;

    --cat-flight: #94a6cf;
    --cat-layover: #94a6cf;
    --cat-standby: #d3b06a;
    --cat-off: #b0a99b;
    --cat-vacation: #a8b57e;
    --cat-training: #cf9370;
    --cat-other: #a59d8e;
    --cat-unknown: #d98a7f;
    --chip-tint: 0.26;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #141310;
  --surface: #201d18;
  --surface-alt: #2b2822;
  --fill: rgba(168, 156, 134, 0.15);
  --fill-strong: rgba(168, 156, 134, 0.25);
  --input-bg: rgba(168, 156, 134, 0.15);
  --separator: rgba(160, 148, 126, 0.28);
  --line: rgba(160, 148, 126, 0.20);

  --text: #f2eee6;
  --muted: rgba(242, 236, 224, 0.62);
  --faint: rgba(242, 236, 224, 0.32);
  --cal-sub: rgba(242, 236, 224, 0.86);

  --accent: #94a6cf;
  --accent-ink: #ffffff;
  --accent-soft: rgba(148, 166, 207, 0.20);
  --accent-weak: rgba(168, 156, 134, 0.15);
  --accent-weak-ink: rgba(242, 236, 224, 0.32);

  --danger: #e0877a;
  --danger-soft: rgba(224, 135, 122, 0.20);
  --sun: #e0877a;
  --sat: #94a6cf;
  --ok: #a3b083;

  --warn-bg: rgba(215, 171, 114, 0.16);
  --warn-line: rgba(215, 171, 114, 0.30);
  --warn-text: #e6c489;
  --unknown-row: rgba(224, 135, 122, 0.12);

  --toast-bg: rgba(48, 44, 38, 0.94);
  --toast-ink: #ffffff;

  --cat-flight: #94a6cf;
  --cat-layover: #94a6cf;
  --cat-standby: #d3b06a;
  --cat-off: #b0a99b;
  --cat-vacation: #a8b57e;
  --cat-training: #cf9370;
  --cat-other: #a59d8e;
  --cat-unknown: #d98a7f;
  --chip-tint: 0.26;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ---------- 헤더 ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 0;
}

.month-nav { display: flex; align-items: center; gap: 4px; }
.month-nav span {
  min-width: 116px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.month-nav button {
  border: none;
  background: transparent;
  color: var(--accent);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.month-nav button.ghost {
  width: auto;
  padding: 0 12px;
  height: 32px;
  font-size: 15px;
  font-weight: 500;
  background: var(--fill);
  border-radius: 16px;
}
.month-nav button:active { opacity: 0.5; }

/* ---------- 레이아웃 ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
  gap: 18px;
  padding: 18px 20px 56px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.layout > .card { min-width: 0; }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 16px;
}

/* ---------- 달력 ---------- */
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { margin-bottom: 4px; }
.cal-head-cell {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
  padding: 4px 0;
}
.cal-head-cell.sun { color: var(--sun); }
.cal-head-cell.sat { color: var(--sat); }

.cal-cell {
  min-height: 88px;
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 4px 3px 6px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cal-cell.blank { pointer-events: none; min-height: 0; }
/* 앞뒤 달 날짜. 크루넷처럼 함께 보여주되 이 달과 구분되게 흐리게 둔다. */
.cal-cell.outside .cal-day { color: var(--faint); font-weight: 500; }
.cal-cell.outside .chip, .cal-cell.outside .cal-place, .cal-cell.outside .cal-time { opacity: 0.85; }
/* 고른 날은 칸 전체가 아니라 날짜 숫자에만 표시한다(칸을 채우면 줄 높이만큼 늘어난다). */
.cal-cell.selected .cal-day { background: var(--fill-strong); }
.cal-cell.today.selected .cal-day { background: var(--accent); color: #fff; }
.cal-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 1px;
  flex: none;
}
.cal-cell.sun .cal-day { color: var(--sun); }
/* 공휴일은 일요일과 같은 빨강으로. 이름은 날짜 아래 작게 적는다 */
.cal-cell.holiday .cal-day { color: var(--sun); }
.cal-holiday {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sun);
  text-align: center;
  word-break: keep-all;
  margin-bottom: 1px;
}
.cal-cell.sat .cal-day { color: var(--sat); }
.cal-cell.today .cal-day {
  background: var(--accent);
  color: #fff;
}

/* 훑어봤을 때 쉬는 날과 비행 날이 바로 갈리도록 칸 전체를 옅게 칠한다.
   칩만으로는 크기가 다 비슷해 한눈에 구분되지 않는다는 이야기가 있었다. */
.cal-cell.day-flight, .cal-cell.day-layover { background: color-mix(in srgb, var(--cat-flight) 13%, transparent); }
.cal-cell.day-standby { background: color-mix(in srgb, var(--cat-standby) 17%, transparent); }
.cal-cell.day-training { background: color-mix(in srgb, var(--cat-training) 16%, transparent); }
.cal-cell.day-vacation { background: color-mix(in srgb, var(--cat-vacation) 18%, transparent); }
.cal-cell.day-off { background: color-mix(in srgb, var(--cat-off) 17%, transparent); }
.cal-cell.day-unknown { background: color-mix(in srgb, var(--cat-unknown) 13%, transparent); }
.cal-cell.outside { opacity: 0.7; }
/* 코드가 없는 날도 이 달이면 칸을 그린다. 테두리만으로도 앞뒤 달과 갈린다. */
.cal-cell.in-month { box-shadow: inset 0 0 0 1px var(--line); }
.cal-cell.in-month:not([class*="day-"]) { background: color-mix(in srgb, var(--fill) 55%, transparent); }
/* 읽은 코드가 아니라 넘겨짚은 휴무. 흐리게 두어 추정임을 드러낸다. */
.cal-cell.assumed { background: color-mix(in srgb, var(--cat-off) 8%, transparent); }
.cal-item.assumed { opacity: 0.45; }
.cal-item.assumed .cal-title { font-weight: 500; }
/* 어디 가는 편인지 모르는 비행. 눌러서 넣어 달라는 표시. */
.cal-badge {
  align-self: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  padding: 1px 4px;
  border-radius: 999px;
  color: var(--cat-unknown);
  background: color-mix(in srgb, var(--cat-unknown) 18%, transparent);
  white-space: nowrap;
}
.cal-cell.needs-route { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-unknown) 55%, transparent); }
/* 읽기는 했는데 칸에 못 그린 날. 조용히 넘어가지 않고 눈에 띄게 둔다. */
.cal-badge.cal-failed, .cal-badge.cal-check {
  color: var(--cat-unknown);
  background: color-mix(in srgb, var(--cat-unknown) 20%, transparent);
}
.cal-cell.parse-failed { box-shadow: inset 0 0 0 2px var(--cat-unknown); }
.cal-cell.needs-check { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-unknown) 45%, transparent); }
.cal-more { font-size: 10px; font-weight: 700; color: var(--muted); align-self: center; }
/* 시간표에 없어 편명 규칙으로 짐작한 구간 */
.cal-guess {
  align-self: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0 3px;
  border-radius: 3px;
  color: var(--muted);
  background: var(--fill);
}
.entry-guess { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 5px; }
button.cal-badge, button.entry-badge {
  border: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.entry-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  color: var(--cat-unknown);
  background: color-mix(in srgb, var(--cat-unknown) 18%, transparent);
  white-space: nowrap;
}

.cal-chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-cell { min-height: 96px; }

.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 2px 5px;
  border-radius: var(--r-chip);
  color: var(--cat-other);
  background: color-mix(in srgb, var(--cat-other) calc(var(--chip-tint) * 100%), transparent);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.chip.more { background: transparent; color: var(--faint); padding-left: 2px; }
.cat-flight { color: var(--cat-flight); background: color-mix(in srgb, var(--cat-flight) calc(var(--chip-tint) * 100%), transparent); }
.cat-layover { color: var(--cat-layover); background: color-mix(in srgb, var(--cat-layover) calc(var(--chip-tint) * 100%), transparent); }
.cat-standby { color: var(--cat-standby); background: color-mix(in srgb, var(--cat-standby) calc(var(--chip-tint) * 100%), transparent); }
.cat-off { color: var(--cat-off); background: color-mix(in srgb, var(--cat-off) calc(var(--chip-tint) * 100%), transparent); }
.cat-training { color: var(--cat-training); background: color-mix(in srgb, var(--cat-training) calc(var(--chip-tint) * 100%), transparent); }
.cat-vacation { color: var(--cat-vacation); background: color-mix(in srgb, var(--cat-vacation) calc(var(--chip-tint) * 100%), transparent); }
.cat-other { color: var(--cat-other); background: color-mix(in srgb, var(--cat-other) calc(var(--chip-tint) * 100%), transparent); }
.cat-unknown { color: var(--cat-unknown); background: color-mix(in srgb, var(--cat-unknown) calc(var(--chip-tint) * 100%), transparent); }

.cal-cell .chip { text-align: center; }
.cal-flag { font-size: 12px; line-height: 1.25; text-align: center; letter-spacing: -0.5px; }
.cal-city, .cal-title {
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  color: var(--cat-other);
}
.cal-city.cat-flight, .cal-city.cat-layover, .cal-title.cat-flight, .cal-title.cat-layover { color: var(--cat-flight); }
.cal-title.cat-off { color: var(--cat-off); }
.cal-title.cat-standby { color: var(--cat-standby); }
.cal-title.cat-training { color: var(--cat-training); }
.cal-title.cat-vacation { color: var(--cat-vacation); }
.cal-title.cat-unknown { color: var(--cat-unknown); }
.cal-time {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cal-sub);
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.cal-code {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  word-break: keep-all;
}
.cal-more { font-size: 10px; color: var(--faint); text-align: center; }


.month-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--separator);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.month-summary b { color: var(--text); font-weight: 600; }
.month-summary .sum-item { white-space: nowrap; }

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0 0;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.cat-flight { background: var(--cat-flight); }
.dot.cat-layover { background: var(--cat-layover); }
.dot.cat-standby { background: var(--cat-standby); }
.dot.cat-off { background: var(--cat-off); }
.dot.cat-training { background: var(--cat-training); }
.dot.cat-vacation { background: var(--cat-vacation); }
.dot.cat-unknown { background: var(--cat-unknown); }

/* ---------- 세그먼티드 컨트롤 ---------- */
.card-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.seg {
  display: inline-flex;
  background: var(--fill);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 5px 16px;
  border-radius: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seg-btn.active {
  background: var(--surface);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

/* ---------- 목록 보기 ---------- */
.list-view { display: flex; flex-direction: column; }
.list-empty { color: var(--muted); font-size: 15px; padding: 28px 4px; margin: 0; text-align: center; }
.agenda-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--separator);
  padding: 11px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agenda-row:last-child { border-bottom: none; }
/* 목록에서도 그날의 성격을 왼쪽 띠로 세워 둔다 (색은 달력 칸과 같다) */
.agenda-row { border-left: 3px solid transparent; padding-left: 9px; }
.agenda-row.day-flight { border-left-color: var(--cat-flight); }
.agenda-row.day-layover { border-left-color: var(--cat-flight); }
.agenda-row.day-standby { border-left-color: var(--cat-standby); }
.agenda-row.day-training { border-left-color: var(--cat-training); }
.agenda-row.day-vacation { border-left-color: var(--cat-vacation); }
.agenda-row.day-off { border-left-color: var(--cat-off); }
.agenda-row.day-unknown { border-left-color: var(--cat-unknown); }
.agenda-row.selected { background: var(--fill); border-radius: 10px; }
.agenda-row.outside .agenda-date b { color: var(--faint); font-weight: 500; }
.agenda-row.outside .chip, .agenda-row.outside .agenda-text { opacity: 0.75; }
.agenda-date .cal-month { font-size: 10px; color: var(--faint); margin-right: 1px; }
.agenda-date {
  display: flex;
  align-items: baseline;
  gap: 3px;
  width: 62px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.agenda-date b { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.agenda-date small { font-size: 12px; color: var(--muted); }
.agenda-row.sun .agenda-date b, .agenda-row.sun .agenda-date small { color: var(--sun); }
.agenda-row.sat .agenda-date b, .agenda-row.sat .agenda-date small { color: var(--sat); }
.agenda-row.today .agenda-date b { color: var(--accent); }
.agenda-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.agenda-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agenda-item .chip { flex: none; font-size: 12px; padding: 3px 7px; }
.agenda-text {
  font-size: 14px;
  color: var(--cal-sub);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 탭 ---------- */
.tabs {
  display: flex;
  background: var(--fill);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  margin-bottom: 18px;
}
.tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  border-radius: 7px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tab.active {
  background: var(--surface);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.panel { display: none; }
.panel.active { display: block; }

/* ---------- 폼 ---------- */
.form-grid { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding-left: 2px;
}
.field em { font-style: normal; font-weight: 400; color: var(--faint); }
.field input, .field select, textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: var(--input-bg);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field input[type="date"], .field input[type="time"], .field input[type="month"] {
  -webkit-appearance: none;
  min-height: 44px;
}
.field input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row { display: flex; gap: 12px; }

textarea {
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.check-field input { width: auto; accent-color: var(--accent); transform: scale(1.15); }
.check-field em { font-style: normal; font-size: 13px; color: var(--muted); }
.check-field input:disabled + span { color: var(--faint); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-control);
  padding: 13px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.primary:active { opacity: 0.75; }
button.primary:disabled { background: var(--accent-weak); color: var(--accent-weak-ink); cursor: not-allowed; }
button.ghost {
  background: var(--fill);
  border: none;
  border-radius: var(--r-control);
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.ghost:active { opacity: 0.6; }
button.ghost.small { padding: 8px 13px; font-size: 14px; border-radius: 10px; }
button.ghost.danger { color: var(--danger); }

.hint { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }

/* ---------- 날짜 상세 ---------- */
.day-detail { margin-top: 22px; border-top: 0.5px solid var(--separator); padding-top: 16px; }
.day-detail h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.2px; }
.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.entry-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 0.5px solid var(--separator);
  padding: 10px 2px;
  font-size: 15px;
}
.entry-list li:last-child { border-bottom: none; }
.entry-list .entry-main { flex: 1; min-width: 0; }
.entry-list .entry-sub { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.entry-list .empty { color: var(--muted); border: none; padding: 6px 2px; font-size: 15px; }
.icon-btn {
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover, .icon-btn:active { color: var(--danger); background: var(--danger-soft); }

/* ---------- 미리보기 ---------- */
.preview { margin-top: 20px; border-top: 0.5px solid var(--separator); padding-top: 16px; }
.preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.preview-head h3 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.3px; }
.summary { font-size: 13px; color: var(--muted); margin: 0; }

.memo, .warnings {
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}
.memo { background: var(--accent-soft); color: var(--text); }
.warnings { background: var(--warn-bg); color: var(--warn-text); }
.warnings ul { margin: 6px 0 0; padding-left: 18px; }

.preview-table-wrap {
  max-height: 340px;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--surface-alt);
  margin-top: 12px;
  -webkit-overflow-scrolling: touch;
}
.preview-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.preview-table th, .preview-table td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--separator);
  text-align: left;
  vertical-align: middle;
}
.preview-table tr:last-child td { border-bottom: none; }
.preview-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-alt);
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.preview-table tr.unknown-row { background: var(--unknown-row); }
.preview-table .col-check { width: 36px; }
.preview-table input[type="checkbox"] { accent-color: var(--accent); transform: scale(1.1); }
.preview-table td:nth-child(n+2):nth-child(-n+7) { white-space: nowrap; }
.preview-table td:nth-child(6), .preview-table td:nth-child(7) { font-variant-numeric: tabular-nums; }
.preview-table td.auto-filled { text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
.preview-table .src { color: var(--faint); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.apply-mode {
  border: none;
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 10px 14px 12px;
  margin: 14px 0 0;
  font-size: 15px;
}
.apply-mode legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.apply-mode label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.apply-mode input { accent-color: var(--accent); transform: scale(1.15); }

.preview .actions { margin-top: 16px; }

.skipped {
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 10px 13px;
  margin-top: 10px;
  font-size: 13px;
}
.skipped summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.skipped ul {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 160px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- 스크린샷 ---------- */
.drop-zone {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-alt);
  -webkit-tap-highlight-color: transparent;
}
.drop-zone p { margin: 3px 0; font-size: 14px; }
.drop-zone .muted { font-size: 12px; }
.drop-zone.dragover, .drop-zone:focus {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }

.image-preview { margin-top: 14px; }
.image-preview img { max-width: 100%; border-radius: 12px; display: block; }
.image-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.status { font-size: 14px; margin: 12px 0 0; min-height: 20px; line-height: 1.5; color: var(--muted); }
.status.error { color: var(--danger); }
.status.ok { color: var(--ok); }

.api-config, .flight-book, .fallback {
  background: var(--surface-alt);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 16px;
}
.api-config summary, .flight-book summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  -webkit-tap-highlight-color: transparent;
}
.api-config .field, .flight-book .field { margin-top: 10px; }
.api-config code {
  background: var(--fill);
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.flight-book .muted { margin: 10px 0; }
.flight-book .entry-list { margin-top: 12px; }
.flight-book textarea { font-size: 13px; background: var(--surface); }

.fallback h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.fallback ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.fallback li { font-size: 14px; line-height: 1.55; }
.fallback p { margin: 12px 0 0; font-size: 12px; }

.data-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  border-top: 0.5px solid var(--separator);
  padding-top: 16px;
}

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--toast-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--toast-ink);
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
  max-width: calc(100vw - 40px);
  text-align: center;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 처음 온 사람에게 보여줄 안내 ---------- */
.welcome-card {
  grid-column: 1 / -1;
  border: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 58%);
  position: relative;
  padding: 20px;
}
.welcome-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.welcome-steps {
  margin: 0 0 12px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
}
.welcome-steps b { font-weight: 600; }
.welcome-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.welcome-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.welcome-close:hover { background: var(--fill-strong); }
.ios-only { display: none; }
.is-ios .ios-only { display: inline; }

.sum-cities { flex-basis: 100%; margin-top: 6px; font-size: 13px; color: var(--cal-sub); }

/* ---------- 연간 보기 ---------- */
.year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.year-month { min-width: 0; }
.ym-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ym-stat { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: auto; }
.ym-head, .ym-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ym-head {
  font-size: 9px;
  color: var(--faint);
  text-align: center;
  margin-bottom: 2px;
}
.ym-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--muted);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.ym-day.has {
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
  background: var(--cat-other);
}
.ym-day.has.cat-flight { background: var(--cat-flight); }
.ym-day.has.cat-layover { background: var(--cat-layover); }
.ym-day.has.cat-standby { background: var(--cat-standby); }
.ym-day.has.cat-off { background: var(--cat-off); }
.ym-day.has.cat-training { background: var(--cat-training); }
.ym-day.has.cat-unknown { background: var(--cat-unknown); }
.ym-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 900px) { .year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ym-title { font-size: 12px; }
  .ym-stat { display: none; }
  .ym-head { font-size: 8px; }
  .ym-day { font-size: 9px; border-radius: 4px; }
}

/* ---------- 지난 일정 찾기 ---------- */
.search-bar { position: relative; margin-bottom: 12px; }
.search-bar input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--input-bg);
  border: 0;
  border-radius: var(--r-control);
  padding: 12px 42px 12px 40px;
  min-height: 46px;
  -webkit-appearance: none;
  appearance: none;
}
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-bar input::placeholder { color: var(--muted); }
.search-bar input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
#searchClear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--fill-strong);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-results {
  margin-bottom: 12px;
  border-radius: var(--r-card);
  background: var(--surface-alt);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.search-results .sr-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.search-results .sr-count { padding: 8px 10px 4px; color: var(--muted); font-size: 12px; }
.sr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--r-control);
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.sr-item:hover { background: var(--fill); }
.sr-item .sr-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sr-item .sr-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* ---------- 다음 근무 띠 ---------- */
.next-duty {
  max-width: 1280px;
  margin: 14px auto 0;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--r-card);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  font-size: 15px;
}
.next-duty:hover { background: var(--surface-alt); }
.next-duty .nd-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-chip);
  padding: 3px 8px;
}
.next-duty .nd-when { font-weight: 600; }
.next-duty .nd-what { color: var(--cal-sub); }
.next-duty .nd-away { margin-left: auto; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .next-duty { margin: 12px 16px 0; } }

/* ---------- 체류지 시차 배너 ---------- */
.tz-banner {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.tz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#tzPlace { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.tz-gap { font-size: 13px; color: var(--muted); }
.tz-row { display: flex; align-items: center; gap: 12px; }
.tz-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tz-label { font-size: 12px; color: var(--muted); }
.tz-time {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tz-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tz-sep { width: 1px; align-self: stretch; background: var(--separator); flex: none; }

/* ---------- 아래에서 올라오는 창 (의견 보내기) ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.sheet-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
  animation: sheet-up 0.24s ease;
}
@keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.4px; }
.sheet-head .welcome-close { position: static; }
.sheet-panel .hint { margin-bottom: 14px; }
.sheet-panel select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 0;
  border-radius: var(--r-control);
  padding: 11px 12px;
}
.small-note { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
@media (min-width: 641px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 20px; }
}

/* ---------- 바닥글 ---------- */
.app-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.6;
}
.app-footer p { margin: 2px 0; }
.linky {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 반응형 ---------- */
/* 기본 규칙을 덮어써야 하므로 반응형 블록은 항상 파일 끝에 둔다. */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
}

@media (max-width: 640px) {
  .app-header { padding: 10px 16px; }
  .app-header h1 { font-size: 24px; }
  .layout { padding: 10px; gap: 12px; }
  .card { padding: 12px 10px; border-radius: 14px; }
  .cal-head, .cal-grid { gap: 3px; }
  .cal-cell { padding: 3px 2px 5px; }
  .cal-city, .cal-title { font-size: 12px; }
  .cal-time { font-size: 10px; }
  .cal-code { font-size: 9.5px; }
}

@media (max-width: 640px) {
  .welcome-card { padding: 16px; }
  .welcome-card h2 { font-size: 18px; }
  .welcome-steps { padding-left: 20px; font-size: 14px; }
}

@media (max-width: 560px) {
  .cal-cell { min-height: 74px; }
  .month-nav span { min-width: 96px; font-size: 16px; }
}

@media (max-width: 460px) {
  .card { padding: 10px 6px; }
  .input-card { padding: 14px 14px 16px; }
  .cal-head, .cal-grid { gap: 2px; }
  .cal-cell { padding: 3px 1px 4px; }
  .cal-chips { gap: 3px; }
  .cal-city, .cal-title { font-size: 11px; letter-spacing: -0.5px; }
  .cal-time { font-size: 9.5px; }
  .cal-code { font-size: 9px; }
  .cal-day { font-size: 12px; width: 20px; height: 20px; line-height: 20px; }
  .legend { gap: 9px; font-size: 11px; }
  .tab { font-size: 13px; padding: 7px 4px; }
}

/* 새 버전 알림 띠. 담아둔 옛 화면을 그대로 보고 있으면 알려준다. */
.update-bar {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  color: var(--text);
}

.update-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.update-bar button.primary.small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }

.app-version { color: var(--faint); font-size: 12px; }

/* 노선 등록 창: 출발·도착을 나란히 */
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .route-grid { grid-template-columns: 1fr; } }

/* 파싱 검증 (개발용) */
.verify-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--fill);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.verify-panel h2 { font-size: 15px; margin: 0; }
.verify-panel h2 em { font-size: 12px; font-weight: 500; color: var(--muted); font-style: normal; }
.verify-table { overflow-x: auto; }
.verify-table table { border-collapse: collapse; width: 100%; font-size: 12px; }
.verify-table th, .verify-table td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.verify-table th { font-weight: 600; color: var(--muted); }
.verify-table td:first-child { font-weight: 600; }
.verify-table tr.bad td { background: color-mix(in srgb, var(--cat-unknown) 18%, transparent); }
.verify-table tr.bad td:first-child { color: var(--cat-unknown); }

/* 미등록 편명 일괄 등록 */
.bulk-list { display: flex; flex-direction: column; gap: 6px; }
.bulk-row { display: grid; grid-template-columns: 72px 34px 1fr; gap: 6px; align-items: center; }
.bulk-code { font-weight: 700; font-size: 13px; }
.bulk-when { font-size: 11px; color: var(--muted); }
.bulk-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  min-width: 0;
}
.bulk-input.suggested { border-color: var(--accent); }
.bulk-where { grid-column: 3; font-size: 11px; line-height: 1.3; }
.bulk-where.warn { color: var(--cat-unknown); }
@media (max-width: 380px) { .bulk-row { grid-template-columns: 64px 30px 1fr; } }

/* 날을 넘겨 나는 중인 날. 도시 대신 '기내'. */
.cal-city.enroute { opacity: 0.85; font-style: normal; }
/* 손님으로 타고 가는 편(TVL) */
.cal-deadhead {
  align-self: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--fill-strong);
  white-space: nowrap;
}

/* 자동으로 찾아 채운 노선 */
.cal-lookup {
  align-self: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--cat-training);
  background: color-mix(in srgb, var(--cat-training) 18%, transparent);
  white-space: nowrap;
}
.cal-lookup.pending { color: var(--muted); background: var(--fill); }
.entry-lookup { font-size: 10px; font-weight: 700; color: var(--cat-training); margin-left: 5px; }

/* 노선 캐시 목록 */
.route-cache { display: flex; flex-direction: column; gap: 6px; }
.route-row { display: grid; grid-template-columns: 74px 1fr auto auto; gap: 6px; align-items: center; }
.route-row .code { font-weight: 700; font-size: 13px; }
.route-row input {
  font: inherit; font-size: 13px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); min-width: 0;
}
.route-row .tag { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.route-row .tag.fail { color: var(--cat-unknown); }

/* 읽기에 실패한 날이 있을 때 */
.danger-note {
  color: var(--cat-unknown);
  background: color-mix(in srgb, var(--cat-unknown) 12%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 600;
}
button.primary[disabled] { opacity: 0.45; cursor: not-allowed; }