/* CityFlow — 셸(좌측 레일·토스트)과 공통 컴포넌트
   공용 파일: 화면 워커 수정 금지 */

/* ── 레이아웃 ──────────────────────────────────────────────── */
body {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-rail) var(--ease-enter);
}

/* 펼침 상태 — --rail-w만 바꾸면 화면 grid가 자동으로 따라온다 */
[data-rail="wide"] { --rail-w: 200px; }

#screen {
  position: relative;
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

/* ── 좌측 레일 ─────────────────────────────────────────────── */
#rail {
  position: relative;
  z-index: var(--z-rail);
  width: var(--rail-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
}

.rail-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  color: var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: var(--glow-accent-soft);
}
.rail-logo svg { width: 24px; height: 24px; }

.rail-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.rail-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--text-dim);
  transition: color var(--t-micro), background-color var(--t-micro);
}
.rail-item svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-item:hover { color: var(--text); background: var(--surface-2); }

/* 활성 표시 — 액센트 좌측 바 + 아이콘 색 */
.rail-item.is-active { color: var(--accent); background: var(--accent-soft); }
.rail-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 50%;
  width: 3px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--glow-accent-soft);
}

/* hover 툴팁 */
.rail-tip {
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-micro), transform var(--t-micro);
}
.rail-item:hover .rail-tip,
.rail-item:focus-visible .rail-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail-spacer { flex: 1 1 auto; }

/* 레일 하단 블록 — 아바타 + 버전 (64px 폭 유지) */
.rail-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  width: 32px;
}

.rail-user {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: color var(--t-micro), border-color var(--t-micro);
}
.rail-user:hover { color: var(--text); border-color: var(--border-strong); }
.rail-user:hover .rail-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail-ver {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-faint);
}

.rail-ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: color var(--t-micro), border-color var(--t-micro);
}
.rail-btn svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { color: var(--text); border-color: var(--border-strong); }
.rail-btn:hover .rail-tip,
.rail-btn:focus-visible .rail-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* 토글 방향 — 펼침 상태에서는 접기(왼쪽)를 가리킨다 */
.rail-toggle svg { transition: transform var(--dur-rail) var(--ease-enter); }
[data-rail="wide"] .rail-toggle svg { transform: rotate(180deg); }
/* RTL(아랍어, R10) — body 그리드가 방향을 따라 레일이 우측으로 가므로 펼침 방향(안쪽)이 반대가 된다 */
/* 툴팁 진입 오프셋도 안쪽(inline-start 반대)에서 들어오게 부호를 뒤집는다 */

/* 현재 시안의 액센트 스와치 — 5종 순환에서 어떤 테마인지 즉시 구분 */
.rail-theme::after {
  content: "";
  position: absolute;
  inset-inline-end: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent-soft);
  transition: background-color var(--t-micro);
}

/* 언어 전환 — 버튼은 rail-btn 패턴 그대로, wrap은 팝오버 앵커 전용(레이아웃에 영향 없음) */
.rail-lang-wrap {
  position: relative;
  display: inline-flex;
}

.rail-popover {
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  padding: 5px;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px var(--overlay-scrim);
  backdrop-filter: blur(14px);
  animation: rail-pop-rise 160ms var(--ease-enter) both;
}
.rail-popover[hidden] { display: none; }

@keyframes rail-pop-rise {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.rail-popover__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 34px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-body);
  color: var(--text-dim);
  text-align: start;
  border-radius: var(--radius-sm);
  transition: color var(--t-micro), background-color var(--t-micro);
}
.rail-popover__item:hover,
.rail-popover__item:focus-visible { color: var(--text); background: var(--surface-2); }
.rail-popover__item.is-active { color: var(--accent); }

.rail-popover__check {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0;
  color: var(--accent);
}
.rail-popover__item.is-active .rail-popover__check { opacity: 1; }
.rail-popover__check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-popover__label { flex: 1 1 auto; white-space: nowrap; }

/* ── 레일 펼침 상태 (data-rail="wide") ────────────────────────
   접힘이 기본이며 무스크롤 판정도 접힘 기준이다.
   펼침에서는 라벨을 노출하고 툴팁을 숨긴다. */
.rail-label,
.rail-brand { display: none; }

[data-rail="wide"] #rail {
  align-items: stretch;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}

[data-rail="wide"] .rail-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: 0 10px;
  background: none;
  box-shadow: none;
}
[data-rail="wide"] .rail-brand {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

[data-rail="wide"] .rail-menu { align-items: stretch; }

[data-rail="wide"] .rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  width: 100%;
  height: 42px;
  padding: 0 10px;
}
[data-rail="wide"] .rail-item svg { flex: 0 0 auto; }
[data-rail="wide"] .rail-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-rail="wide"] .rail-item.is-active::before { inset-inline-start: -6px; }

/* 펼침에서는 라벨이 이미 보이므로 툴팁을 띄우지 않는다 */
[data-rail="wide"] .rail-tip { display: none; }

[data-rail="wide"] .rail-foot {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) 10px 0;
}
[data-rail="wide"] .rail-ctl { flex-direction: row; }

/* ── 토스트 ────────────────────────────────────────────────── */
#toast-host {
  position: fixed;
  inset-inline-end: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  pointer-events: none;
}

.cf-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 220px;
  max-width: 380px;
  padding: 12px 16px;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  animation: cf-toast-in var(--dur-enter) var(--ease-enter) both;
}
.cf-toast.is-out { animation: cf-toast-out var(--dur-micro) var(--ease-micro) both; }
.cf-toast::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-accent-soft);
}
.cf-toast[data-type="success"]::before { background: var(--st-running); box-shadow: var(--glow-running); }
.cf-toast[data-type="error"]::before { background: var(--st-error); box-shadow: var(--glow-error); }
.cf-toast[data-type="warn"]::before { background: var(--st-warn); box-shadow: var(--glow-warn); }

@keyframes cf-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cf-toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* ── 공통 컴포넌트 ─────────────────────────────────────────── */

/* 버튼 */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 16px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-micro), border-color var(--t-micro), transform var(--t-micro), box-shadow var(--t-micro);
}
.cf-btn:hover { border-color: var(--border-strong); background: var(--surface); }
.cf-btn:active { transform: translateY(1px); }
.cf-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cf-btn--primary {
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: transparent;
}
.cf-btn--primary:hover { background: var(--accent); box-shadow: var(--glow-accent); }

.cf-btn--ghost { background: transparent; }
.cf-btn--ghost:hover { background: var(--surface-2); }

.cf-btn--lg { height: 46px; padding: 0 22px; font-size: var(--fs-h3); }
.cf-btn--sm { height: 30px; padding: 0 11px; font-size: var(--fs-sm); }

.cf-btn[disabled],
.cf-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* 카드 (글래스 서피스 + 1px 하이라이트 보더) */
.cf-card {
  padding: var(--sp-5);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  transition: border-color var(--t-micro), box-shadow var(--t-micro), transform var(--t-micro);
}
.cf-card--hover:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cf-card--selected { border-color: var(--border-accent); box-shadow: var(--glow-accent); }

.cf-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cf-card__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* 칩 */
.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: color var(--t-micro), border-color var(--t-micro), background-color var(--t-micro);
}
.cf-chip:hover { color: var(--text); border-color: var(--border-strong); }
.cf-chip.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--border-accent);
}
/* 카테고리 칩 — 색은 --cf-color(카테고리 cssVar)로 주입 */
.cf-chip--cat { color: var(--cf-color, var(--text-dim)); }
.cf-chip--cat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cf-color, var(--text-dim));
}

/* 상태 dot */
.cf-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-paused);
}
.cf-dot[data-status="running"] { background: var(--st-running); box-shadow: var(--glow-running); animation: cf-pulse 2.4s var(--ease-micro) infinite; }
.cf-dot[data-status="paused"] { background: var(--st-paused); }
.cf-dot[data-status="error"] { background: var(--st-error); box-shadow: var(--glow-error); animation: cf-pulse 1.2s var(--ease-micro) infinite; }
.cf-dot[data-status="warn"] { background: var(--st-warn); box-shadow: var(--glow-warn); }

@keyframes cf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 상태 라벨 (dot + 텍스트) */
.cf-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* 수치 표기 */
.cf-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* 구분선 */
.cf-divider { height: 1px; background: var(--border); border: 0; }

/* 스크린리더 전용 */
.cf-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 모션 저감 — 무한 애니 정지 */
@media (prefers-reduced-motion: reduce) {
  .cf-dot[data-status="running"],
  .cf-dot[data-status="error"] { animation: none; }
  .cf-toast { animation: none; }
  .rail-popover { animation: none; }
}

/* ── v3.0 레일 7항목 — 낮은 세로 해상도 압축 ──────────────────
   레일은 #rail{height:100vh}에 overflow 가 없다. 슬림 기준 높이는
   32(padding) + 56(logo) + [44N + 8(N-1)](menu) + 70(foot) + 136(ctl) + 32(gap)
   = 318 + 52N 이다. N=6 이면 630px, N=7 이면 682px.
   1366x768 창모드의 실가용 세로는 약 641px(브라우저 크롬·작업표시줄 제외)이라
   7항목에서 하단 .rail-ctl(테마·언어 버튼)이 화면 밖으로 밀린다.

   .rail-menu{overflow-y:auto} 로는 못 고친다 — .rail-tip(inset-inline-start:
   calc(100% + 10px))과 .rail-item.is-active::before(inset-inline-start:-10px)가
   메뉴 박스 밖에 놓여 스크롤 컨테이너가 되는 순간 함께 잘린다.
   그래서 치수를 조인다: 318 + 52*7 -> 24 + 52 + 304 + 70 + 128 + 32 = 610px.

   720px 를 경계로 둔 이유: 720px 이면 압축 없이도 682px 가 들어가므로
   1080p 전체화면 시연 화질에는 한 픽셀도 영향을 주지 않는다. */
@media (max-height: 719px) {
  #rail { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .rail-logo { margin-bottom: var(--sp-3); }
  .rail-menu { gap: var(--sp-1); }
  .rail-item { height: 40px; }
  .rail-ctl { gap: var(--sp-1); }
}

/* FACTORY PULSE v2 — 아직 없는 화면(파이프라인·설정)은 흐리게. 링크 없음 */
.rail-item.is-off { opacity: 0.34; cursor: not-allowed; }
.rail-item.is-off:hover { background: transparent; color: inherit; }