/*
 * si-rail.css — ERP AI 통합 연결 레이어 스타일 (Phase 4)
 * 서빙: https://si.hott.kr/shared/si-rail.css (repo: frontend/shared/)
 * 규약:
 *  - 네임스페이스 si-rail-* 전용. 전역 태그 셀렉터 금지(기존 화면 CSS 오염 방지).
 *  - 토큰(2026-07-18 확정 스펙 §2 — 토스풍): 아래 --si-rail-* 커스텀 프로퍼티가 정본.
 *    도구 화면은 셸 tokens.css 를 읽지 않으므로 이 파일 하나로 자체 완결한다.
 *  - 8px 그리드, 라운드 12px(버튼·칩)/16px(카드), 터치 44px+, 숫자 tabular.
 *    폰트는 선언만(외부 로드 0). 그림자 최소: 0 1px 4px rgba(25,31,40,.04).
 *  - 상태 배지 3종(§5.5): 시작전 ○ 회색 / 완료 ● 초록 / 개발중 ◦ 점선.
 *    (진행중 배지는 2026-07-21 지시로 무표시 — --in-progress 규칙은 죽은 규칙으로 잔존.)
 *  - 하단 CTA 바는 완전 제거됐다(2026-07-18 C4) — 이동 동선은 컨텍스트 헤더가 담당.
 */

/* ── 디자인 토큰 (하위 전체 상속) ───────────────────────────────── */
#si-rail-root {
  --si-rail-ink: #191f28;        /* 본문 잉크 */
  --si-rail-sub: #4e5968;        /* 보조 텍스트 */
  --si-rail-muted: #8b95a1;      /* 뮤트/비활성 */
  --si-rail-brand: #3182f6;      /* 브랜드 파랑 */
  --si-rail-brand-hover: #1b64da;
  --si-rail-brand-tint: #ebf3ff; /* 브랜드 틴트 배경 */
  --si-rail-line: #e5e8eb;       /* 구분선 */
  --si-rail-section: #f2f4f6;    /* 섹션 배경 */
  --si-rail-success: #00c471;
  --si-rail-danger: #f04452;
  --si-rail-bg: #ffffff;
  --si-rail-radius: 12px;        /* 버튼·칩 */
  --si-rail-shadow: 0 1px 4px rgba(25, 31, 40, 0.04);
}

/* ── 컨테이너 공통 리셋 (하위 한정) ─────────────────────────────── */
#si-rail-root,
#si-rail-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* 리셋(`#id *`, 특이도 1-0-0+)이 클래스 규칙의 `margin: 0 auto`를 항상 눌러
   컨테이너가 화면 왼쪽 [0,1280]에 고정되던 근본 결함(2026-07-17 실측 —
   와이드 모니터일수록 '왼쪽 쏠림'이 심했다). ID 스코프로 중앙 마진을 복원한다. */
#si-rail-root .si-rail-inner,
#si-rail-root .si-rail-login,
#si-rail-root .si-rail-context {
  margin-left: auto;
  margin-right: auto;
}

/* 패딩도 같은 결함 — 리셋(`#id *`)이 `.si-rail-context{padding}` 을 눌러 위아래
   패딩이 0 이 되던 실사고(2026-07-18 "패딩 적용 안 됐어"). ID 스코프로 명시한다. */
#si-rail-root .si-rail-context {
  padding: 18px 20px;
}

/* ── 상단 공통 컨테이너 (셸 레일·도구 컨텍스트 헤더 겸용) ─────────── */
#si-rail-root {
  position: sticky;
  top: 0;
  z-index: 900; /* 기존 화면 모달(통상 1000+)보다 낮게 */
  width: 100%;
  background: var(--si-rail-bg);
  border-bottom: 1px solid var(--si-rail-line);
  box-shadow: 0 2px 10px rgba(25, 31, 40, 0.06);
  color: var(--si-rail-ink);
  font-size: 13px;
}

.si-rail-inner {
  /* 3열 그리드 — 스텝 무리를 브랜드 폭과 무관하게 '화면 절대 중앙'에 둔다
     (2026-07-17 "왼쪽에 쏠려 보여" 재수리: flex 잔여폭 중앙은 우측 편향이었다). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 48px;
}

.si-rail-brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: var(--si-rail-radius);
  color: var(--si-rail-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.si-rail-brand:hover {
  background: var(--si-rail-section);
  text-decoration: none;
}
.si-rail-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--si-rail-brand);
}

.si-rail-steps {
  grid-column: 2;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto; /* 좁은 화면: 스텝 무리만 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
}

.si-rail-step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* 노드 사이 연결선 */
.si-rail-step + .si-rail-step::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--si-rail-line);
  margin: 0 8px 0 0;
}

.si-rail-step-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: var(--si-rail-radius);
  color: var(--si-rail-sub);
  text-decoration: none;
  cursor: pointer;
}
.si-rail-step-link:hover {
  background: var(--si-rail-section);
  text-decoration: none;
}
.si-rail-step-link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* 원형 스텝 노드 (숫자) */
.si-rail-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d1d6db;
  background: var(--si-rail-bg);
  color: var(--si-rail-muted);
  font-size: 13px;
  font-weight: 700;
}

.si-rail-step-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--si-rail-sub);
}

/* 상태 텍스트 배지 — 색+아이콘+텍스트 3중 표기(§5.2)의 텍스트 축 */
.si-rail-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--si-rail-radius);
  font-size: 12px;
  font-weight: 500;
  background: var(--si-rail-section);
  color: var(--si-rail-muted);
}
.si-rail-badge-icon {
  font-size: 11px;
  line-height: 1;
}

/* 상태별 변주 */
.si-rail-step--done .si-rail-node {
  border-color: var(--si-rail-success);
  background: var(--si-rail-success);
  color: #ffffff;
}
.si-rail-step--done .si-rail-badge {
  background: rgba(0, 196, 113, 0.08);
  color: var(--si-rail-success);
}

.si-rail-step--in-progress .si-rail-node {
  border-color: var(--si-rail-brand);
  background: var(--si-rail-brand);
  color: #ffffff;
}
.si-rail-step--in-progress .si-rail-badge {
  background: rgba(49, 130, 246, 0.08);
  color: var(--si-rail-brand);
}

.si-rail-step--in-development .si-rail-node {
  border-style: dashed;
  color: var(--si-rail-muted);
}
.si-rail-step--in-development .si-rail-step-title,
.si-rail-step--in-development .si-rail-badge {
  color: var(--si-rail-muted);
}

/* 현재 화면 스텝 — 브랜드 틴트 알약 + 채운 노드 + 하단 인디케이터(2026-07-17 강화:
   "현재 보는 게 어떤 단계인지 모르겠다" → 색·형태·위치 3중 표기) */
.si-rail-step--current .si-rail-node {
  border-color: var(--si-rail-brand);
  background: var(--si-rail-brand);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.24);
}
.si-rail-step--current .si-rail-step-title {
  color: var(--si-rail-brand-hover);
  font-weight: 700;
}
.si-rail-step--current .si-rail-step-link {
  position: relative;
  background: var(--si-rail-brand-tint);
}
.si-rail-step--current .si-rail-step-link::after {
  /* 알약 내부 하단 인디케이터 — 컨테이너(overflow-x:auto) 밖으로 넘치면
     세로 스크롤바가 생기므로 반드시 내부에 둔다(2026-07-17 헤드리스 실측). */
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--si-rail-brand);
}

/* ── 도구 화면 컨텍스트 헤더 (2026-07-18 다이어트 — 브랜드+메뉴 라벨 한 줄뿐) ──
   스텝 칩·상품 명찰·guide·이전/다음 버튼은 전부 폐기했다("헤더에 다 구겨 넣지 말 것").
   할 일 안내와 상품 컨텍스트는 각 도구 화면 본문이, 스텝 이동은 스텝맵이 담당한다. */
.si-rail-context {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px;
  min-width: 0;
}

/* 진입 메뉴 라벨 — 지금 어떤 메뉴에 있는지, 그 한 가지만 말한다 */
.si-rail-context-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--si-rail-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 미로그인 유도 바 (레일 자리 대체 — 클라이언트 보조, 정본 게이트는 서버) ── */
.si-rail-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 48px;
}
.si-rail-login-text {
  font-size: 13px;
  color: var(--si-rail-sub);
}
.si-rail-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 16px;
  border-radius: var(--si-rail-radius);
  background: var(--si-rail-brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.si-rail-login-btn:hover {
  background: var(--si-rail-brand-hover);
  color: #ffffff;
  text-decoration: none;
}

/* ── 하단 CTA 바 잔재 차단 — 배포 캐시 스큐 호환 ─────────────────── */
/* CTA 바는 2026-07-18 완전 제거됐다. 브라우저가 구 si-rail.js 를 캐시한 채
   새 CSS 만 받는 짧은 스큐 동안 스타일 잃은 바가 하단에 남지 않게 통째로 숨긴다. */
#si-rail-cta-root {
  display: none;
}

/* ── 반응형: 좁은 화면 (720px 이하 — 안내문 말줄임·명찰 축소) ────── */
@media (max-width: 720px) {
  .si-rail-badge {
    display: none;
  }
  .si-rail-step-title {
    font-size: 12px;
  }
  .si-rail-brand-label {
    display: none;
  }
  .si-rail-context {
    padding: 10px 12px;
    gap: 10px;
  }
  .si-rail-context-title {
    font-size: 15px;
  }
}