/* 통합 스타일 — 유키(예약 알리미)·관측소(숙소) 공통 뼈대 + theme 색분기.
   구조·치수는 여기 한 곳에만(중복 0). 색은 [data-theme] 변수로만 분기. */

/* ---------- 구조·공통 상태색 (theme 무관) ---------- */
:root {
  --radius: 16px;
  --radius-sm: 11px;
  --sh-btn: 0 2px 8px rgba(0, 0, 0, .08);
  --sh-card: 0 10px 28px rgba(46, 47, 51, .07);
  --sh-item: 0 2px 10px rgba(46, 47, 51, .05);
  --sidebar-w: 230px;
  --right-w: 340px;
  /* 예약(유키) 상태 의미색 */
  --open: #6FBF73;
  --closed: #9AA0A6;
  --broken: #E0A458;
  --blocked: #E0A458;
  /* 관측소 상태 의미색 */
  --reached: #1F7A4D;
  --watching: #A9631F;
  --priceup: #C0453F;
  /* 추이 그래프 4계열 — canvas 라 클래스로 못 칠하므로 JS가 이 변수를 읽어 쓴다.
     hue 거리: 시세 212° / 내 조건 31° / 목표가 152° / 기준선 무채색 → 색약·흑백에서도 구분.
     두 점선은 색 + 대시 패턴(긴 파선 vs 짧은 점선)으로 이중 구분. */
  --chart-line: #3D6FA8;                      /* 호텔 시세(공개) — 선 */
  --chart-line-fill: rgba(175, 203, 236, .3); /* 시세 선 아래 면 */
  --chart-mine: #E8963C;                      /* 내 조건 최저가 — 점(앰버 오렌지) */
  --chart-mine-fill: rgba(232, 150, 60, .25);
  --chart-base: #8A8F98;                      /* 평소 시세(호텔 기준) — 긴 파선(슬레이트그레이) */
  --chart-target: #1F7A4D;                    /* 목표가 — 짧은 점선 */
  --chart-tick: #6B7688;
  --chart-label: #2E3440;
  /* 적정가 사전 그래프(x축=체크인일) — 날짜 유형 3색. 위 4색과 별도 변수.
     hue 155/212/303° 로 분리하고 점 모양(원·삼각·사각)까지 병행해 색약·흑백에서도 구분. */
  --chart-kind-weekday: #5B9E7E;   /* 평일 — 세이지 그린 */
  --chart-kind-weekend: #3D6FA8;   /* 주말(금·토) — 스틸 블루 */
  --chart-kind-holiday: #8E5E8C;   /* 공휴일 — 플럼 */
  /* 판정선: 잘한 예약(25%) / 보통(50%) / 비싼 편(75%) — 색 + 대시 패턴 이중 구분 */
  --chart-good: #1F7A4D;
  --chart-mid: #8A8F98;
  --chart-high: #C0453F;
}

/* ---------- theme: 예약 알리미(핑크) ---------- */
[data-theme="yuki"] {
  --point: #F4B3C7;
  --bg: #FFF6F9;
  --bg-side: #FFF0F4;
  --card: #FFFFFF;
  --text: #2E2F33;
  --sub: #9AA0A6;
  --border: #EFD9E1;
  --accent: #D4537E;
  --btn-label: #FFFFFF;      /* 핑크 채움 버튼 위 흰 글자(유키 기존 유지) */
  --nav-arrow: #9AA0A6;      /* 캘린더 화살표=회색 */
  --run-on: #6FBF73;
  --run-off: #E8908F;
}

/* ---------- theme: 숙소 관측소(블루) ---------- */
[data-theme="stay"] {
  --point: #AFCBEC;
  --bg: #F2F7FE;
  --bg-side: #E9F1FB;
  --card: #FFFFFF;
  --text: #2E3440;
  --sub: #6B7688;
  --border: #DEEAF7;
  --accent: #3D6FA8;
  --btn-label: #1F4E79;      /* 파스텔블루 위 진블루 글자 */
  --nav-arrow: #6B7688;      /* 캘린더 화살표=회색(파랑 아님) */
  --run-on: #6FBF73;
  --run-off: #6B7688;
}

/* ---------- theme: 항공 관측소(세이지 그린) ----------
   변수 '이름'은 yuki·stay와 같아야 한다 — 공통 레이아웃 CSS가 var(--bg)·var(--accent)를 읽으므로
   항공용으로 새 접두를 만들면 이 페이지만 스타일이 안 먹는다. --chart-* 는 건드리지 않는다. */
[data-theme="flight"] {
  --point: #A9D8C0;
  --bg: #EAF5EF;
  --bg-side: #DFF0E7;
  --card: #FFFFFF;
  --text: #2E3440;
  --sub: #6B7688;
  --border: #D6E9DE;
  --accent: #4A9C7A;
  --btn-label: #1F5E45;      /* 파스텔 세이지 위 진초록 글자 */
  --nav-arrow: #6B7688;
  --run-on: #6FBF73;
  --run-off: #6B7688;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ---------- 레이아웃(공통) ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  grid-template-areas: "side main right";
  min-height: 100vh;
  /* 넓은 화면(2560px 등)에서 sidebar·right-panel 은 고정폭이라 남는 폭이 전부 main 으로 갔다.
     카드가 1,940px 까지 벌어지고 내부가 space-between 이라 좌우로 흩어져 읽기 어려웠다.
     1440px 이하에서는 이 값이 걸리지 않아 영향 0 — 1920px 에서 카드 1,080px, 2560px 에서 좌우 430px.
     양옆에 드러나는 body 배경(242,247,254)은 sidebar(233,241,251)와 거의 같아 이질감이 없다. */
  max-width: 1700px;
  margin: 0 auto;
}
.sidebar { grid-area: side; }
.main-content { grid-area: main; }
.right-panel { grid-area: right; }
.main-content, .right-panel { display: flex; flex-direction: column; gap: 20px; }
.main-content { background: var(--bg); padding: 26px 14px 26px 36px; }
.right-panel { background: var(--bg); padding: 26px 24px 26px 14px; }

/* ---------- 사이드바(공통 골격) ---------- */
.sidebar {
  background: var(--bg-side);
  box-shadow: 2px 0 10px rgba(46, 47, 51, .05);
  display: flex; flex-direction: column;
  padding: 22px 18px;
}
.sidebar-top { text-align: center; }
.brand-full { display: block; width: 82%; height: auto; margin: 0 auto 8px; }
.brand-sub { margin: 0; font-size: 12px; color: var(--sub); }

.nav-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600;
  transition: background .15s;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--point); color: var(--btn-label); }
.nav-icon { font-size: 16px; }

.sidebar-mascot { margin-top: auto; text-align: center; padding: 18px 6px; }
.mascot-img { width: 110px; height: auto; display: block; margin: 0 auto; }
.mascot-text { margin: 10px 0 0; font-size: 12px; color: var(--sub); line-height: 1.5; }

.sidebar-engine {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px 4px; border-top: 1px solid var(--border); margin-top: 14px;
}
.engine-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.engine-dot.on { background: var(--run-on); }
.engine-dot.off { background: var(--run-off); }
.engine-label { font-size: 13px; font-weight: 600; flex: 1; }
.engine-label.on { color: var(--run-on); }
.engine-label.off { color: var(--run-off); }
.switch {
  position: relative; width: 46px; height: 26px; flex-shrink: 0;
  border: none; border-radius: 999px; padding: 0; cursor: pointer;
  box-shadow: var(--sh-btn); transition: background .2s;
}
.switch.on { background: var(--run-on); }
.switch.off { background: var(--run-off); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s;
}
.switch.on .switch-knob { left: 23px; }

/* ---------- 카드 공통 ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--sh-card); }
.card h2 { margin: 0 0 12px; font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.section-head h2 { margin: 0; }
.muted { color: var(--sub); font-size: 13px; }
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--point); color: var(--btn-label); font-size: 12px; font-weight: 700;
}
.count-badge:empty { display: none; }
.head-actions { display: flex; gap: 8px; }
.list-updating { font-size: 12px; color: var(--sub); font-weight: 500; margin-left: 4px; }
.list-updating.hide { display: none; }

/* 관측 목록 탭 (가격알림 / 선호숙소) */
.tab-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* 등록폼 모드 선택 라디오 */
.mode-select { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mode-select .mode-label { font-size: 13px; color: var(--text); }
.mode-select .radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.mode-select .radio input { width: auto; }
/* 모드별 설명 한 줄(라디오 아래 전체 폭) */
.mode-select .mode-hint { flex-basis: 100%; margin: 0; }
/* 탭 상단 안내문(빈방 포착 등) */
.tab-note { margin: 0 0 12px; font-size: 13px; }

/* 반복(롤링) 날짜 조건 박스 */
.pattern-box { background: var(--bg); border-radius: 10px; padding: 12px; display: flex;
               flex-direction: column; gap: 10px; }
.pattern-box.hide, .single-date-row.hide { display: none; }
.single-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.wd-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wd-row .mode-label { margin-right: 6px; }
.wd { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer;
      padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); background: #fff; }
.add-form .wd input { width: auto; margin: 0; }
.pattern-box label.radio { flex-direction: row; align-items: center; gap: 6px; }
.pattern-box > label:not(.radio) { max-width: 130px; }
/* 롤링 카드: 최저가가 어느 날짜인지 */
.t-best-date { font-size: 11px; color: var(--sub); font-weight: 400; }
/* 최근 가격 변동: 비교 대상이 된 이전 관측 */
.t-prev-obs { font-size: 11px; color: var(--sub); }
/* 추이 그래프 하단 캡션(내 조건 vs 호텔 시세 차이 명시) */
.trend-caption { display: block; margin: 10px 2px 0; line-height: 1.6; }
.trend-caption.hide { display: none; }

/* ---------- 적정가 사전(선호 숙소 탭) ---------- */
.guide-box { background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.guide-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.guide-form input { flex: 1; min-width: 180px; padding: 9px 11px; border: none; border-radius: 10px;
                    font-size: 14px; font-family: inherit; color: var(--text); background: #fff;
                    box-shadow: inset 0 1px 3px rgba(46, 47, 51, .07); }
.guide-form select { padding: 9px 11px; border: none; border-radius: 10px; font-size: 14px;
                     font-family: inherit; color: var(--text); background: #fff; }
.guide-form input:focus, .guide-form select:focus { outline: none; box-shadow: 0 0 0 3px var(--point); }
.guide-box .hint { display: block; margin-top: 9px; }
.guide-result.hide { display: none; }
.guide-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.guide-head h3 { margin: 0; font-size: 16px; }
.guide-head .muted { font-size: 12px; }
.gstat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gstat { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.gstat-t { font-size: 12px; color: var(--sub); }
.gstat-mid { font-size: 19px; font-weight: 700; margin: 4px 0 6px; }
.gstat-sub { font-size: 11px; color: var(--sub); line-height: 1.5; }
.gstat-empty { font-size: 13px; color: var(--sub); margin-top: 8px; }
.guide-judge { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 4px;
               font-size: 13px; }
.guide-judge input { width: 130px; padding: 8px 10px; border: none; border-radius: 10px;
                     font-size: 14px; font-family: inherit; background: var(--bg); color: var(--text);
                     box-shadow: inset 0 1px 3px rgba(46, 47, 51, .07); }
.judge-out { font-weight: 700; font-size: 13px; }
.judge-out.good { color: var(--reached); }
.judge-out.normal { color: var(--sub); }
.judge-out.pricey { color: var(--priceup); }
/* 적정가 사전 날짜별 시세 그래프 */
.guide-chart-wrap { margin-top: 16px; }
.guide-chart-cap { display: block; margin: 8px 2px 0; line-height: 1.6; }
.gmonths { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.gmonth { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: var(--bg);
          border-radius: 9px; font-size: 12px; flex-wrap: wrap; }
.gm-ym { font-weight: 700; min-width: 62px; }
.gm-season { font-weight: 700; min-width: 46px; }
.gm-season.high { color: var(--priceup); }
.gm-season.low { color: var(--reached); }
.gm-detail { color: var(--sub); }
.guide-sep { margin-top: 20px; }

/* 좁은 화면: 그래프 눈금·범례가 겹치지 않게 높이를 늘리고 캡션을 줄바꿈 허용 */
@media (max-width: 1023px) {
  .guide-chart-wrap canvas, .trend-wrap canvas { min-height: 200px; }
}
@media (max-width: 767px) {
  .guide-chart-wrap canvas, .trend-wrap canvas { min-height: 240px; }
  .guide-chart-cap, .trend-caption { font-size: 10px; }
}

@media (max-width: 768px) {
  .gstat-grid { grid-template-columns: 1fr; }
}

/* 등록폼: 객실 유형 다중선택 + 유형별 목표가 (기존 .add-form label/input 규칙보다 스코프 높여 override) */
.room-type-section.hide { display: none; }
.room-type-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; max-height: 220px; overflow-y: auto; }
.add-form .rt-row { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.add-form .rt-row:hover { background: var(--bg); }
.room-type-list .rt-cb { width: auto; flex-shrink: 0; margin: 0; }
.rt-info { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rt-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-cur { font-size: 12px; color: var(--sub); flex-shrink: 0; }
.room-type-list .rt-target { width: 120px; flex-shrink: 0; }
.room-type-list .rt-target.hide { display: none; }
.room-type-list.watch-mode .rt-target { display: none; }   /* watch=목표가 없음 */
.rt-badge.soon { font-size: 11px; color: var(--broken); font-weight: 700; flex-shrink: 0; }

/* 항공: 왕복 묶음(trip_group). 편도 카드 2장을 한 테두리로 감싼다 —
   목표가는 편도별이므로 카드를 합치지 않고, 합계는 head 에 '참고'로만 적는다.
   선택자를 .trip-group 하위로 한정해 숙소·알리미 화면에는 닿지 않는다. */
.trip-group { border: 1px solid var(--border); border-radius: var(--radius-sm);
              padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.trip-group-head { margin: 0 0 2px; font-size: 12px; color: var(--sub); font-weight: 600; }
.trip-group .target-item { box-shadow: none; border: 1px solid var(--border); }

/* 항공 등록폼: 항공사 다중선택(체크박스 칩). 숙소 .rt-row 와 같은 톤, 가로 배치만 다름 */
.airline-list { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin: 6px 0 2px; }
.add-form .al-row { display: flex; flex-direction: row; align-items: center; gap: 5px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 13px; }
.add-form .al-row:hover { background: var(--bg); }
.airline-list .al-cb { width: auto; flex-shrink: 0; margin: 0; }

/* 목록 카드: 유형 요약 칩 */
.target-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rt-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-side); color: var(--sub); border: 1px solid var(--border);
}
.rt-chip.reached { background: rgba(31, 122, 77, .12); color: var(--reached); border-color: transparent; }
.rt-chip.soon { color: var(--broken); border-color: var(--broken); background: transparent; }

/* 삭제 버튼(위험) */
.mini-btn.danger { color: var(--priceup); }
.mini-btn.danger:hover { background: rgba(192, 69, 63, .1); }
/* 상세 = 글자만 세이지그린(배경·테두리는 기본 .mini-btn = 수정·삭제와 동일) */
.mini-btn.detail { color: #2E7D32; }
/* 예약 = 네이버 요금 페이지 바로가기. a 태그라 밑줄·높이 보정 필요 */
a.mini-btn { text-decoration: none; display: inline-block; line-height: 20px; }
a.mini-btn.book { color: var(--reached); font-weight: 600; }
/* 빈방 확인된 추격 대상은 채운 버튼으로 강조 */
a.mini-btn.book.hot { background: var(--reached); border-color: var(--reached); color: #fff; }
a.mini-btn.book.hot:hover { background: #1A6842; }

/* 인사 헤더 */
.greet-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.greet-text h1 { margin: 0; font-size: 20px; }
.greet-text .muted { margin: 4px 0 0; }
.engine-control { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- 버튼 공통 ---------- */
.btn {
  border: none; cursor: pointer; padding: 8px 15px; border-radius: var(--radius-sm);
  background: var(--point); color: var(--btn-label);
  font-size: 14px; font-weight: 600; box-shadow: var(--sh-btn);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46, 47, 51, .18); }
.btn:active { filter: brightness(1.04); transform: translateY(0); box-shadow: var(--sh-btn); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-ghost, .btn-danger { background: #fff; color: var(--text); }
.btn-ghost:hover, .btn-danger:hover { background: var(--bg); filter: none; }
.btn-final { background: #6E9CE0; color: #fff; }
.btn-final:hover { filter: brightness(1.12); box-shadow: 0 8px 20px rgba(110, 156, 224, .5); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.engine-control .btn { padding: 8px 16px; }
.icon-btn { border: none; background: transparent; cursor: pointer; font-size: 15px; color: var(--sub); border-radius: 8px; padding: 4px 9px; }
.icon-btn:hover { background: var(--bg); }

/* ==========================================================================
   예약 알리미(유키) 전용 본문 — watch 목록·로그
   ========================================================================== */
.watch-list { display: flex; flex-direction: column; gap: 10px; }
.watch-item {
  background: #fff; border-radius: var(--radius-sm); padding: 11px 15px; box-shadow: var(--sh-item);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.watch-item.paused { opacity: .5; }
.watch-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }  /* min-width:0 = 긴 이름이 flex를 밀어내지 않게(핵심) */
.watch-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  background: var(--bg); color: var(--point);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.watch-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }  /* 이름 wrap 위해 필요 */
.watch-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.watch-sub { font-size: 12px; color: var(--sub); }
/* 중복 감시 경고 — 같은 업체·날짜를 두 번 폴링하고 있다는 표시. 카드 구조는 그대로 두고
   .watch-main(flex column) 의 세 번째 줄로만 붙는다. */
.watch-dup { font-size: 11px; color: var(--broken); font-weight: 600; overflow-wrap: anywhere; }
/* 대상일 경과로 자동 종료된 감시 — 사용자가 직접 멈춘 것과 구분해 보여준다.
   경고(--broken)가 아니라 회색: 잘못된 상태가 아니라 정상적으로 끝난 것이다. */
.watch-expired { font-size: 11px; color: var(--sub); font-weight: 600; }
.watch-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.watch-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pill { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.pill.status-open { background: var(--open); }
.pill.status-closed { background: var(--closed); }
.pill.status-broken { background: var(--broken); }
.pill.status-blocked { background: var(--blocked); }
.pill.status-error { background: var(--blocked); }
.pill.status-none, .pill.status-null { background: var(--sub); }

/* 추가 폼 */
.add-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.add-form label { display: flex; flex-direction: column; font-size: 13px; gap: 5px; color: var(--text); }
.add-form .wide { grid-column: 1 / -1; }
.add-form label.hide { display: none; }
.add-form input, .add-form select, .add-form textarea {
  padding: 9px 11px; border: none; border-radius: 10px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--bg); box-shadow: inset 0 1px 3px rgba(46, 47, 51, .07);
}
.add-form input:focus, .add-form select:focus, .add-form textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--point); }
.add-form button { grid-column: 1 / -1; }
.add-form ::placeholder { color: var(--sub); opacity: 1; }
.hint { font-size: 11px; color: var(--sub); font-weight: 400; }
.hint.ok { color: var(--reached); font-weight: 600; }
.hint.fail { color: var(--priceup); font-weight: 600; }
.hint-warn { color: var(--broken); font-weight: 600; }

.advanced { background: var(--bg); border-radius: 10px; padding: 2px 12px; }
.advanced input, .advanced select, .advanced textarea { background: #fff; }
.advanced summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); padding: 9px 0; list-style: none; user-select: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: "▸ "; color: var(--sub); }
.advanced[open] summary::before { content: "▾ "; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0 12px; }
.adv-grid .wide { grid-column: 1 / -1; }

/* 마법사 */
.tab-content { display: none; margin-top: 14px; }
.tab-content.active { display: block; }
.wizard-body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.wizard-body label { display: flex; flex-direction: column; font-size: 13px; gap: 5px; color: var(--text); }
.wizard-body input:not([type="checkbox"]) {
  padding: 9px 11px; border: none; border-radius: 10px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--bg); box-shadow: inset 0 1px 3px rgba(46, 47, 51, .07);
}
.wizard-body input:focus { outline: none; box-shadow: 0 0 0 3px var(--point); }
.wizard-body ::placeholder { color: var(--sub); opacity: 1; }
.wiz-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.wiz-row label.wide { flex: 1 1 260px; min-width: 200px; }
.wizard-shot-wrap { position: relative; background: var(--bg); border-radius: 10px; overflow: hidden; width: 100%; aspect-ratio: 1280 / 800; display: flex; align-items: center; justify-content: center; }
.wizard-shot { width: 100%; height: 100%; object-fit: contain; cursor: pointer; display: block; }
.wiz-scroll-controls { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.wiz-slot-box { position: absolute; pointer-events: none; border-radius: 4px; box-sizing: border-box; }
.wiz-hover-box { border: 3px solid var(--open); background: rgba(111, 191, 115, .15); }
.wiz-selected-box { border: 3px solid var(--point); background: rgba(244, 179, 199, .18); }
.wiz-slot-box.hide { display: none; }
.wiz-candidates, .wiz-result, .wiz-naver { background: var(--bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.wiz-naver.hide { display: none; }
.wiz-naver-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.wiz-naver-list label.wiz-naver-slot { display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; background: #fff; border-radius: 8px; padding: 9px 12px; box-shadow: var(--sh-item); }
.wiz-naver-slot .ns-time { font-weight: 700; color: var(--text); min-width: 48px; }
.wiz-naver-slot .ns-avail { font-size: 12px; color: var(--sub); margin-left: auto; }
.wiz-naver-slot.soldout .ns-avail { color: var(--closed); font-weight: 600; }
.wiz-naver-slot input[type="radio"] { accent-color: var(--point); }
.wiz-slot-summary { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.wiz-confirm-btns { display: flex; gap: 8px; }
.wiz-save-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-save-form .wide { grid-column: 1 / -1; }
.wiz-stage.hide, .wiz-candidates.hide, .wiz-result.hide, .wiz-save-form.hide { display: none; }
#wizDateLabel.wiz-date-missing input#wizDate { box-shadow: 0 0 0 2px var(--broken); }
#wizDateMissingHint.hide { display: none; }
.wiz-closed-notice { background: var(--bg); border-radius: 10px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wiz-closed-notice.hide { display: none; }
.wizard-shot-wrap.hide, .wiz-scroll-controls.hide, #wizShotHint.hide { display: none; }
.wiz-step-guide { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; }
.wiz-step-guide.hide { display: none; }
.wiz-closed-notice p { margin: 0; font-size: 13px; color: var(--text); }

/* 로그 */
.log-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.log-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 7px 9px; border-radius: 8px; background: var(--bg); color: var(--text); }
.log-row .lv-error { color: var(--blocked); font-weight: 600; }
.log-row .lv-warn { color: var(--broken); font-weight: 600; }
.log-time { color: var(--sub); flex-shrink: 0; }
.log-src { flex-shrink: 0; font-weight: 600; }
.log-src.auto { color: var(--sub); }
.log-src.manual { color: var(--point); }
.log-wid { flex-shrink: 0; padding: 1px 7px; border-radius: 6px; font-weight: 600; color: #5a5157; }
.log-detail { color: var(--text); }
.wid-c0 { background: #FBE1C8; } .wid-c1 { background: #E7D9F2; } .wid-c2 { background: #D3E3F7; }
.wid-c3 { background: #D6EFCF; } .wid-c4 { background: #FAD5CD; } .wid-c5 { background: #FBF1C6; }
.wid-c6 { background: #CFEEE6; } .wid-c7 { background: #DEDBF3; } .wid-c8 { background: #D2ECF7; } .wid-c9 { background: #F7D0DA; }

/* ==========================================================================
   숙소 관측소(stay) 전용 본문 — 관측 목록·추세·빈상태
   ========================================================================== */
.target-list { display: flex; flex-direction: column; gap: 10px; }
.target-item { background: #fff; border-radius: var(--radius-sm); padding: 12px 15px; box-shadow: var(--sh-item); display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.target-item.paused { opacity: .5; }
/* 항공: 부분 결과(파트너 일부만 응답) — 완결본과 같은 무게로 보이면 오해가 생겨 흐리게 + 좌측 표시 */
.target-item.partial { opacity: .62; border-left: 3px solid var(--broken); }
.target-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }  /* min-width:0 = 긴 이름/유형칩 많아도 flex 밀어내지 않게(핵심) */
.target-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.target-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }  /* 이름/칩 wrap 위해 필요 */
.target-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.target-sub { font-size: 12px; color: var(--sub); }
.target-price-col { text-align: right; min-width: 120px; flex: 0 0 auto; }
.t-current { font-size: 16px; font-weight: 700; color: var(--text); }
.t-current .t-ota { font-size: 11px; color: var(--sub); font-weight: 400; margin-left: 4px; }
.t-target-line { font-size: 12px; color: var(--sub); margin-top: 2px; }
.t-diff { font-size: 11px; margin-top: 2px; }
.t-diff.down { color: var(--reached); }
.t-diff.up { color: var(--priceup); }
.t-diff.flat { color: var(--sub); }
.target-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.target-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill.reached { background: #E3F2EA; color: var(--reached); }
.pill.watching { background: #FBEEDD; color: var(--watching); }
.pill.off { background: #EEF0F3; color: var(--sub); }
.pill.error { background: #FBE4E3; color: var(--priceup); }
.price-edit { display: flex; gap: 6px; align-items: center; }
.price-edit input { width: 96px; padding: 5px 8px; border: 1px solid var(--point); border-radius: 8px; font-size: 13px; }
.mini-btn { border: 1px solid var(--border); background: #fff; color: var(--accent); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.mini-btn:hover { background: var(--bg); }
.empty-soon { text-align: center; padding: 26px 10px; color: var(--sub); }
.empty-soon p { margin: 0 0 8px; font-size: 13px; }
.soon-tag { display: inline-block; background: var(--bg); color: var(--accent); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.trend-wrap.hide { display: none; }
.resolve-row { display: flex; gap: 8px; align-items: center; }
.resolve-row input { flex: 1; }
.msg { grid-column: 1 / -1; font-size: 13px; }
.msg.error { color: var(--priceup); }
.msg.ok { color: var(--reached); }
canvas { max-width: 100%; }

/* ---------- 모달(공통) ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(46, 47, 51, .38); display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; overflow-y: auto; }
.modal.hide { display: none; }
.modal-card { background: #fff; border-radius: var(--radius); padding: 22px; width: 80vw; max-width: 1100px; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(46, 47, 51, .28); }
.modal-card.narrow { max-width: 620px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; }

/* ---------- 캘린더(공통) ---------- */
.calendar-card { padding: 18px 20px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 15px; font-weight: 700; }
.cal-nav { border: none; background: transparent; cursor: pointer; font-size: 13px; color: var(--nav-arrow); border-radius: 8px; padding: 4px 9px; }
.cal-nav:hover { background: var(--bg); }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays { font-size: 11px; color: var(--sub); text-align: center; padding-bottom: 6px; }
.cal-weekdays .wd-sat { color: #6E9CE0; }
.cal-weekdays .wd-sun { color: #E5737A; }
.cal-grid { row-gap: 2px; }
/* 셀 높이 고정 — 원·테두리가 들어가도 칸/줄 높이 불변(대상일 줄/없는 줄 동일) */
.cal-day { display: flex; align-items: center; justify-content: center; height: 34px; font-size: 12px; color: var(--text); }
.cal-day.other-month { color: var(--sub); opacity: .45; }
/* 모든 날짜 숫자를 동일 지름 원 박스로 → 오늘/대상 여부와 무관하게 크기 일정 */
.day-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; }
.cal-day.wd-sat .day-num { color: #6E9CE0; }
.cal-day.wd-sun .day-num { color: #E5737A; }
.cal-day.holiday .day-num { color: #E5737A; font-weight: 700; }
/* 오늘=채움 원 / 대상일=inset 링(border 아님 → 레이아웃 안 밀림). 둘 다 26px 동일 지름·셀 중앙 */
.cal-day.today .day-num { background: var(--point); color: var(--btn-label); font-weight: 700; }
.cal-day.target .day-num { box-shadow: inset 0 0 0 2px var(--open); font-weight: 700; }
.cal-day.today.target .day-num { background: var(--point); color: var(--btn-label); box-shadow: inset 0 0 0 2px var(--open); font-weight: 700; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-today { background: var(--point); }
.dot-target { background: transparent; border: 2px solid var(--open); }
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--sub); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-item .dot { width: 7px; height: 7px; }

/* ---------- 오늘의 요약(공통) ---------- */
.summary-box { display: flex; flex-direction: column; gap: 10px; }
.summary-row { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 12px; padding: 10px 13px; }
.summary-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #fff; color: var(--point); }
.summary-label { font-size: 12px; color: var(--sub); }
.summary-value { font-size: 15px; font-weight: 700; color: var(--text); }

/* ---------- 토스트(공통) ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 11px 19px; border-radius: 12px; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); z-index: 100; }
.toast.hide { display: none; }
.toast.err { background: var(--broken); }

/* ---------- 반응형(공통) ---------- */
@media (max-width: 1199px) {
  .layout { grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "side main" "side right"; }
  .right-panel { flex-direction: row; flex-wrap: wrap; padding-right: 16px; }
  .right-panel .card { flex: 1 1 260px; }
}
@media (max-width: 1023px) {
  .main-content, .right-panel { padding: 16px 12px; }
  .card { padding: 18px; }
}
@media (max-width: 767px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "side" "main" "right"; }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .nav-menu { flex-direction: row; margin-top: 0; }
  .sidebar-mascot { margin-top: 0; }
  .sidebar-engine { margin-top: 0; border-top: none; }
  .right-panel { flex-direction: column; }
  .add-form, .adv-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   항공 레이더(flight) 목록 카드 — 2행 grid (E-flight-ui-1)
   기존 셀렉터는 수정하지 않는다. 항공 카드에만 붙는 .flight-item 안에서만 재정의한다
   (.target-item / .mini-btn / .pill / .rt-chip 규칙 자체는 숙소·알리미가 계속 쓴다).
   구조:  [icon] [head   ] [price] [actions]
          [icon] [meta   ] [sub  ] [actions]
   ========================================================================== */
.flight-item {
  /* .target-item 의 flex 값 중 grid 에서도 살아 있는 것(gap·align-items·justify-content)은
     명시적으로 덮는다. flex-wrap 은 grid 에서 무시되므로 그대로 둔다. padding 은 상속(12px 15px). */
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "icon head price actions"
    "icon meta sub   actions";
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  justify-content: stretch;
}
.flight-item .fi-icon { grid-area: icon; align-self: start; margin-top: 1px; }
/* 배지가 3개 이상이면 줄바꿈된다. min-width:0 이 없으면 긴 별칭이 가격 열을 밀어낸다 */
.flight-item .fi-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center;
                        gap: 6px; min-width: 0; }
.flight-item .fi-price { grid-area: price; text-align: right; min-width: 110px; white-space: nowrap; }
/* 노선·항공편을 한 줄로 합쳤다. 1줄로 고정하면 1200~1500 구간에서 시각·후보편수·좌석이
   통째로 잘려나가므로(1440 실측 148px 잘림) 2줄까지 허용한다 — 구분자 '·' 에서 자연 줄바꿈된다.
   3줄 이상이 되는 극단 폭에서는 말줄임되고 전문은 title 로 확인한다. */
.flight-item .fi-meta { grid-area: meta; min-width: 0;
                        white-space: normal; overflow: hidden;
                        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                        line-height: 1.35; }
.flight-item .fi-sub { grid-area: sub; text-align: right; min-width: 110px; white-space: nowrap; }
.flight-item .fi-actions { grid-area: actions; display: flex; align-items: center; }
.flight-item .fi-sep { color: var(--sub); margin: 0 4px; }

@media (max-width: 1599px) {
  /* 버튼 4개를 2×2 로 접는다 — 1600 이하에서 actions 가 202px 를 쓰면 meta 가 잘린다.
     1199 였을 때 1320~1200 구간에 22~87px 잘림이 남아 있었다(이월 #30, 2026-08-14 해소).
     ⚠️ 위쪽 @media (max-width: 1199px) 블록은 공용 레이아웃(.layout/.right-panel)이라 별개다. */
  .flight-item .target-actions { flex-wrap: wrap; max-width: 120px; }
}
@media (max-width: 1023px) {
  /* 버튼을 아래 행 전체 폭으로 내린다 */
  .flight-item {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon head price"
      "icon meta sub"
      "actions actions actions";
  }
  .flight-item .fi-actions { justify-content: flex-end; }
  .flight-item .target-actions { max-width: none; }
}

/* 항공 카드 배지: 시간 조건 밖(win_hit=all) — E-flight-5b-2
   .soon(주황)을 쓰지 않는다. 주황은 '주의해서 봐라'인데 이 상태는 설정대로 동작하는 정상이다
   (원하는 시간에 편이 없을 뿐). 꺼진 상태를 뜻하는 .pill.off 와 같은 계열의 회색으로 둔다.
   기존 .rt-chip 규칙은 건드리지 않고 변형만 추가한다. */
.rt-chip.muted { background: #EEF0F3; color: var(--sub); border-color: transparent; }
/* 수정 진입점 — 버튼을 늘리지 않고 목표가/추이 줄을 눌러 연다(카드 높이 유지) */
.flight-item .t-target-line.editable { cursor: pointer; border-bottom: 1px dotted var(--sub); }
.flight-item .t-target-line.editable:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* 시간창 입력 그리드 — 등록·수정 모달 공용. 라벨 / from / ~ / to 4열 */
.win-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 8px;
            align-items: center; flex-basis: 100%; margin: 6px 0 2px; }
.win-row-label { font-size: 12px; color: var(--sub); white-space: nowrap; }
.win-tilde { color: var(--sub); text-align: center; }
.add-form .win-time { width: 100%; padding: 6px 8px; border: 1px solid var(--border);
                      border-radius: 8px; font-size: 13px; }
.win-actions { display: flex; gap: 6px; flex-basis: 100%; margin: 4px 0 2px; }
/* 왕복 짝 적용 체크 — 목표가에만 걸리는 옵션이라 목표가 바로 아래 둔다 */
.mate-box { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
            background: var(--bg); border-radius: var(--radius-sm); margin: 2px 0 4px; }
.mate-box.hide { display: none; }
.mate-check { display: flex; flex-direction: row; align-items: center; gap: 6px;
              font-size: 13px; cursor: pointer; }
.add-form .mate-check input { width: auto; margin: 0; flex-shrink: 0; }
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* 항공사 선택 모드 라디오 — '아무것도 안 고르면 전체'라는 규약을 화면에 드러낸다 (E-flight-5d) */
.air-mode { display: flex; gap: 14px; flex-basis: 100%; margin: 4px 0 2px; }
.add-form .air-mode-opt { display: flex; flex-direction: row; align-items: center; gap: 5px;
                          font-size: 13px; cursor: pointer; }
.add-form .air-mode-opt input { width: auto; margin: 0; flex-shrink: 0; }
/* '전체 항공사'일 때 목록을 흐리게 — 체크박스는 disabled 라 눌리지 않는다 */
.airline-list.disabled { opacity: .45; }
.airline-list.disabled .al-row { cursor: default; }

/* ---------- 로그인 화면 (E-nas-step4b) ----------
   3앱 공용 1개. base.html 을 안 쓰므로 레이아웃도 여기서 끝난다.
   폰에서 주로 쓰므로 좁은 화면을 기준으로 짜고 넓은 화면에서 카드 폭만 고정한다. */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; margin: 0; padding: 24px;
              background: var(--bg); color: var(--text);
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; }
.login-card { width: 100%; max-width: 360px; background: var(--card);
              border-radius: var(--radius); padding: 34px 26px 26px;
              box-shadow: var(--sh-card); text-align: center; }
.login-logo { width: 148px; max-width: 70%; height: auto; }
.login-sub { margin: 6px 0 26px; font-size: 12px; color: var(--sub); }
.login-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.login-label { font-size: 12px; color: var(--sub); font-weight: 600; }
.login-input { width: 100%; padding: 12px 13px; border: 1px solid var(--border);
               border-radius: var(--radius-sm); font-size: 16px; color: var(--text);
               background: #fff; }
/* font-size 16px 고정 — iOS 사파리는 16px 미만 입력란에 포커스하면 화면을 확대한다 */
.login-input:focus { outline: none; border-color: var(--accent); }
.login-error { margin: 2px 0 0; font-size: 13px; color: var(--priceup); font-weight: 600; }
.login-btn { margin-top: 10px; width: 100%; padding: 13px; font-size: 15px; justify-content: center; }
.login-foot { margin: 22px 0 0; font-size: 11px; color: var(--sub); }