/*
 * 🚦 설치 화면 (2026-08-25).
 *
 * ⚠️ 색은 역할 토큰(--ds-*)만 쓴다 — hex 와 var() 폴백은 ds-audit 이 잡는다.
 * ⚠️ 여백은 척도(--ds-sp-1..6)에서 고른다 — 즉석에서 숫자를 정하면 이웃과 안 맞는다.
 * 🔑 화면이 없는 상태에서도 뜨는 화면이라 `setup-standalone`(초기 설정 화면 규격)을 그대로 쓴다.
 *    그 클래스는 `Setup.css` 가 정의한다 — 여기에 사본을 만들지 말 것.
 */

/* ── 사전 점검 사실표 ────────────────────────────────────────────────────────
   🔑 항목명 / 값의 두 층은 상세 화면 항목 그리드와 **같은 규격**(항목명이 먼저 눈에 들어온다). */
.install-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ds-sp-2) var(--ds-sp-5);
    margin: 0;
}

.install-facts dt {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--ds-text-label);
}

.install-facts dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ds-text-strong);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ── 관문 목록 ──────────────────────────────────────────────────────────────
   🔑 세로로 서고 줄마다 상태·소요시간·세부 진행이 보인다(사장님 요구). */
.install-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-5);
}

.install-step {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
    padding-left: var(--ds-sp-5);
    border-left: 3px solid var(--ds-line-soft);
}

.install-step.is-running  { border-left-color: var(--ds-primary); }
.install-step.is-done     { border-left-color: var(--ds-success); }
.install-step.is-skipped  { border-left-color: var(--ds-line); }
.install-step.is-failed   { border-left-color: var(--ds-danger); }

.install-step-head {
    display: flex;
    align-items: center;
    /* 🔑 벌림은 margin 이 아니라 gap 이다 — margin 이면 줄이 접힐 때 앞에 들여쓰기가 남는다. */
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}

.install-step-icon { color: var(--ds-text-faint); }
.install-step.is-done    .install-step-icon { color: var(--ds-success); }
.install-step.is-failed  .install-step-icon { color: var(--ds-danger); }
.install-step.is-running .install-step-icon { color: var(--ds-primary); }

.install-step-name {
    font-weight: 600;
    color: var(--ds-text-strong);
}

.install-step-state {
    font-size: .875rem;
    color: var(--ds-text-label);
}

.install-step-elapsed {
    /* 🔑 소요시간은 값이 아니라 곁다리다 — 오른쪽 끝으로 밀어 이름과 섞이지 않게 한다. */
    margin-left: auto;
    font-size: .8rem;
    color: var(--ds-text-faint);
    font-variant-numeric: tabular-nums;
}

.install-step-desc {
    font-size: .8rem;
    color: var(--ds-text-faint);
}

/* ── 관문 안의 항목(스크립트 하나) ──────────────────────────────────────────
   🔑 「건너뜀(이미 적용)」도 숨기지 않는다 — 무엇을 안 했는지가 무엇을 했는지만큼 중요하다. */
.install-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-1);
}

.install-items li {
    display: flex;
    align-items: baseline;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
    font-size: .875rem;
    color: var(--ds-text-label);
}

.install-item-id {
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-strong);
}

.install-items li.is-skipped .install-item-id,
.install-items li.is-pending .install-item-id { color: var(--ds-text-faint); }
.install-items li.is-failed  .install-item-state { color: var(--ds-danger); }
.install-items li.is-done    .install-item-state { color: var(--ds-success); }

.install-item-detail {
    color: var(--ds-text-faint);
    overflow-wrap: anywhere;
}

/* ── 실패 원문 · 수동 SQL ───────────────────────────────────────────────────
   🔴 오류 원문을 가공하지 않는다 — 무엇을 고쳐야 하는지가 그 문장에 들어 있다.
   ⚠️ 가로 스크롤은 **이 상자 안에서만** 난다(본문이 옆으로 밀리면 안 된다). */
.install-error,
.install-sql {
    margin: var(--ds-sp-2) 0 0;
    padding: var(--ds-sp-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: .375rem;
    font-size: .8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 20rem;
    overflow-y: auto;
}

.install-error { color: var(--ds-danger); }
.install-sql   { color: var(--ds-text-label); }

.install-manual-title {
    margin-top: var(--ds-sp-3);
    font-size: .875rem;
    font-weight: 600;
    color: var(--ds-text-label);
}

/* ── 이력 ───────────────────────────────────────────────────────────────── */
.install-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}

.install-history-list li {
    display: flex;
    align-items: baseline;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
    font-size: .875rem;
    color: var(--ds-text-label);
    padding-bottom: var(--ds-sp-2);
    border-bottom: 1px solid var(--ds-line-soft);
}

.install-history-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   📜 **설치 로그** — 설치가 도는 동안 흘러가는 진행 기록 (2026-08-26 사장님 지시)

   🔑 **이력과 다른 것이다** — 위 `.install-history-list` 는 「어느 스크립트가 성공·실패했나」라는
      결과 목록이고, 여기는 **어디서 무엇을 하다 멈췄는지**를 보는 진단용이다.
   ⚠️ **줄바꿈을 살리고 가로로 스크롤한다**(`pre-wrap` + `overflow-x:auto`) —
      실패 사유 원문(`C_ERROR_MESSAGE`)과 SQL 조각이 그대로 들어온다.
      🔥 **말줄임(`ellipsis`)으로 자르지 말 것.** 발행 문서가 아니라 진단용이라
         잘리면 정작 필요한 끝부분(오류 코드·줄 번호)이 사라진다.
   🔑 높이를 묶어 두는 이유 — 로그가 길어지면 그 아래 아무것도 없어 화면이 끝없이 늘어난다.
      `max-height` + 세로 스크롤로 카드 안에 가둔다.
   ═══════════════════════════════════════════════════════════════════ */
.install-log {
    /* 🔑 위 이력 목록과의 간격은 **여기서** 준다(구분선을 걷었으므로).
          🔥 생 숫자를 쓰지 말 것 — 여백은 척도(`--ds-sp-*`)에서 고른다.
          ⚠️ 이력이 **없을 때는 위가 비어 있다** — 그때 이 여백만 남으면 상자가 떠 보이므로
             `:first-child` 로 0 을 준다. */
    margin-top: var(--ds-sp-4);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ds-text-label);
    background: var(--ds-fill);
    border: 1px solid var(--ds-line-soft);
    border-radius: var(--ds-radius-sm, .375rem);
    padding: var(--ds-sp-3);
    /* 🔴 **`min-height` 를 빼지 말 것** (2026-08-26 사장님 지적: *"적어도 5줄 이상은 보여야지"*).
       🔬 `max-height` 만 있으면 **비어 있을 때 한 줄로 쪼그라든다** — 자리가 있는지조차 안 보인다.
          설치가 시작되면 줄이 붙으며 커지는데, 그 사이 상자가 요동친다.
       📐 줄높이 1.5 × 0.8125rem ≈ 1.22rem. **8줄 + 위아래 여백**을 최소로 잡는다
          (지시는 5줄 이상 — 여유를 둔다. 연결 점검만으로도 5줄이 넘는다). */
    min-height: 11rem;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* 🔑 이력이 없을 때 위 여백을 없앤다.
   🔴 **`:first-child` 로는 안 걸린다** — 이력 영역(`#installHistory`)이 **빈 `div` 로 남아 있어**
      로그는 언제나 둘째 자식이다(2026-08-26 실측: 여백 16px 이 그대로 남았다).
   ✅ **앞 형제가 비었는가**로 본다 — `:empty` 는 자식이 하나도 없을 때만 참이라 정확히 이 경우다. */
#installHistory:empty + .install-log { margin-top: 0; }
/* 비어 있을 때는 테두리만 남기지 않고 자리를 알려 준다. */
.install-log:empty::before {
    content: attr(data-empty);
    color: var(--ds-text-faint);
}
/* 🕐 시각은 **본문보다 흐리게** — 눈이 내용에 먼저 가야 한다. */
.install-log .install-log-time { color: var(--ds-text-faint); }
/* 🔴 실패 줄만 색으로 가른다. 🔥 성공 줄까지 색을 넣지 말 것 — 대부분이 성공이라 온통 초록이 되고
      그러면 **정작 빨간 줄이 눈에 안 띈다.** 성공은 약하게만 구분한다. */
.install-log .is-error { color: var(--ds-danger); font-weight: 600; }
.install-log .is-ok    { color: var(--ds-text); }

.install-hist-dt,
.install-hist-ms { color: var(--ds-text-faint); font-variant-numeric: tabular-nums; }
.install-hist-id { color: var(--ds-text-strong); }
.install-history-list li.is-failed  .install-hist-result { color: var(--ds-danger); }
.install-history-list li.is-success .install-hist-result { color: var(--ds-success); }
.install-hist-err { color: var(--ds-danger); overflow-wrap: anywhere; }

/* 📱 좁은 화면 — 소요시간을 오른쪽 끝으로 미는 것이 줄을 깨뜨리므로 흐름에 돌려놓는다. */
@media (max-width: 767.98px) {
    .install-step-elapsed { margin-left: 0; }
    .install-facts { grid-template-columns: 1fr; gap: var(--ds-sp-1) 0; }
    .install-facts dd { margin-bottom: var(--ds-sp-3); }
}