/* setup.css — 첫 설치
 *
 * 관리자 레이아웃(사이드바·상단바)이 없는 단독 화면이라 여기서만 쓰는 규칙을 모은다.
 * 처음 만나는 화면이므로 여백을 넉넉히 두고, 지금 어디쯤인지 늘 보이게 한다.
 */

.lp-su {
  min-height: 100vh;
  background: var(--c-bg);
  padding: 56px 20px 80px;
}
.lp-su__wrap { max-width: 560px; margin: 0 auto; }
.lp-su__wrap--narrow { max-width: 460px; padding-top: 40px; }

/* ── 머리말 ─────────────────────────── */
.lp-su__head { text-align: center; margin-bottom: var(--sp-8); }
.lp-su__brand {
  margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary);
}
.lp-su__t {
  margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  /* px 로 적으면 글자 크기가 달라질 때 어긋난다. em 단으로 맞춘다 (v6-167).
     한글은 자간을 px 로 깎으면 획이 붙어 읽기 어려워진다 */
  letter-spacing: var(--ls-tight); color: var(--c-text);
}
.lp-su__d { margin: 0; font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.65; }

/* ── 걸음 표시 ───────────────────────
   지금 어디쯤인지 모르면 "얼마나 더 해야 하지"가 부담이 된다 */
.lp-su__steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
}
.lp-su__step {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--c-text-weak);
}
.lp-su__step + .lp-su__step::before {
  content: ""; width: 32px; height: 1px; background: var(--c-border);
  margin: 0 var(--sp-3);
}
.lp-su__num {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--c-surface); border: var(--bw) solid var(--c-border);
  font-size: var(--fs-xxs); font-weight: var(--fw-semi); color: var(--c-text-weak);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lp-su__num svg { width: 12px; height: 12px; }
.lp-su__step.is-now .lp-su__num { background: var(--c-primary); border-color: transparent; color: var(--g-0); }
.lp-su__step.is-now .lp-su__label { color: var(--c-text); font-weight: var(--fw-semi); }
.lp-su__step.is-done .lp-su__num { background: var(--c-success, var(--c-success)); border-color: transparent; color: var(--g-0); }
.lp-su__step.is-done .lp-su__label { color: var(--c-text-sub); }

/* ── 카드 ───────────────────────────── */
.lp-su__card {
  padding: var(--sp-8);
  background: var(--c-surface); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .07);
}
.lp-su__card--center { text-align: center; }
.lp-su__h {
  margin: 0 0 6px; font-size: var(--fs-lg); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight); color: var(--c-text);
}
.lp-su__sub {
  margin: 0 0 var(--sp-6); font-size: var(--fs-sm);
  color: var(--c-text-sub); line-height: 1.65;
}
/* 한 단계 안에서 묶음이 바뀔 때. 계정 다음에 알림이 이어진다.
   윗선이 없으면 앞 입력칸에 딸린 설명처럼 읽힌다 */


/* 필수 표시 — 별표보다 글자가 분명하다 */
.lp-su__req {
  margin-left: 5px; padding: 1px 6px; border-radius: var(--radius-in);
  background: var(--c-primary-bg); color: var(--c-primary);
  font-size: var(--fs-xxs); font-style: normal; font-weight: var(--fw-semi);
  vertical-align: 1px;
}

/* ── 켜고 끄는 줄 ───────────────────── */
.lp-su__toggle {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
  border: var(--bw) solid var(--c-border); border-radius: var(--radius);
}
.lp-su__tt {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-text); margin-bottom: 3px;
}
.lp-su__td { display: block; font-size: var(--fs-xs); color: var(--c-text-sub); line-height: 1.6; }

/* ── 접이식 ─────────────────────────── */
.lp-su__more { margin: var(--sp-4) 0 0; }
.lp-su__more summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 0; font-size: var(--fs-sm); color: var(--c-text-sub);
}
.lp-su__more summary::-webkit-details-marker { display: none; }
.lp-su__more summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease);
}
.lp-su__more[open] summary::before { transform: rotate(45deg); }
.lp-su__more summary:hover { color: var(--c-text); }
.lp-su__more[open] summary { margin-bottom: var(--sp-3); }

/* ── 아래 줄 ────────────────────────── */
.lp-su__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--c-border);
}
.lp-su__foot .lp-btn { min-width: 120px; justify-content: center; height: 42px; }
.lp-su__later { font-size: var(--fs-xs); color: var(--c-text-weak); line-height: 1.5; }
.lp-su__back { font-size: var(--fs-sm); color: var(--c-text-weak); }
.lp-su__back:hover { color: var(--c-text); }
.lp-su__pwhelp { margin-top: calc(var(--sp-3) * -1); }

/* ── 쓰던 사이트 경고 ───────────────── */
.lp-su__used {
  padding: var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--c-warn-bg); border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--c-text-sub); line-height: 1.7;
}
.lp-su__used strong { color: var(--c-warn-t); }
.lp-su__skip { margin-top: var(--sp-3); }

/* ── 끝 화면 ────────────────────────── */
.lp-su__check {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto var(--sp-5);
  border-radius: 50%; background: var(--c-success-bg, var(--c-success-bg)); color: var(--c-success, var(--c-success));
}
.lp-su__check svg { width: 28px; height: 28px; }
.lp-su__go { margin-top: var(--sp-6); min-width: 160px; justify-content: center; height: 44px; }

/* ── 그 밖에 ────────────────────────── */
.lp-su__note {
  margin: var(--sp-6) 0 0; text-align: center;
  font-size: var(--fs-xs); color: var(--c-text-weak); line-height: 1.7;
}
.lp-su__warn {
  margin: 0 0 var(--sp-5); font-size: var(--fs-xs);
  color: var(--c-warn-t); line-height: 1.7;
}
.lp-su__code {
  margin: 0 0 var(--sp-4); padding: var(--sp-4);
  background: var(--c-hover); border-radius: var(--radius);
  font-size: var(--fs-xs); line-height: 1.9; white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 560px) {
  .lp-su { padding: 32px 16px 56px; }
  .lp-su__card { padding: var(--sp-5); }
  .lp-su__t { font-size: var(--fs-xl); }
  .lp-su__label { display: none; }          /* 좁으면 번호만 */
  .lp-su__step + .lp-su__step::before { width: 24px; margin: 0 var(--sp-2); }
  .lp-su__foot { flex-direction: column-reverse; align-items: stretch; }
  .lp-su__foot .lp-btn { width: 100%; }
  .lp-su__later, .lp-su__back { text-align: center; }
}