/* ==========================================================================
   wizard.css — 업종 진단 길잡이.
   히어로 옆에 놓이는 제품 UI 카드로 취급한다 (card-dashboard-mockup 계열).
   ========================================================================== */

.wizard {
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
  padding: var(--mockup-pad);
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

/* ---------- 머리 ---------- */
.wizard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--c-hairline);
}

/* ---------- 단계 ---------- */
.wizard__step {
  display: none;
}

.wizard__step.is-active {
  display: block;
}

.wizard__q {
  margin-bottom: var(--s-lg);
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  letter-spacing: var(--ls-heading-md);
}

/* ---------- 1단계 : 분야 타일 ---------- */
.wizard__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
}

.wizard__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-lg);
  text-align: left;
  background: var(--c-canvas-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  min-height: 84px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.wizard__tile:hover {
  background: var(--c-canvas);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}

.wizard__tile strong {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  padding-right: var(--s-xl);
}

.wizard__tile small {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

.wizard__tile-count {
  position: absolute;
  top: var(--s-md);
  right: var(--s-md);
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  background: var(--c-primary-subdued);
  color: var(--c-primary-deep);
  font-size: var(--fs-micro-cap);
  letter-spacing: 0;
}

/* ---------- 2단계 : 업종 목록 ---------- */
.wizard__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-md);
}

.wizard__filter {
  padding: 6px var(--s-md);
  min-height: 28px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill);
  background: var(--c-canvas);
  color: var(--c-ink-mute);
  font-size: var(--fs-micro);
  line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.wizard__filter.is-on {
  background: var(--c-primary-subdued);
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}

.wizard__options {
  display: grid;
  gap: var(--s-xs);
  max-height: 320px;
  overflow-y: auto;
  margin-right: calc(var(--s-sm) * -1);
  padding-right: var(--s-sm);
}

.wizard__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.wizard__option:hover {
  background: var(--c-canvas-soft);
  border-color: var(--c-hairline);
}

.wizard__option-name {
  font-size: var(--fs-body-md);
  color: var(--c-ink);
}

.wizard__option-capital {
  flex: 0 0 auto;
  color: var(--c-ink-mute);
}

/* ---------- 3단계 : 진단사유 ---------- */
/* 타일이 아니라 칩 — 7개가 두세 줄에 들어간다 */
.wizard__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-lg);
}

.wizard__type {
  padding: 6px var(--s-md);
  min-height: 30px;
  background: var(--c-canvas-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-tabular);
  line-height: 1.2;
  color: var(--c-ink-secondary);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.wizard__type:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-deep);
}

.wizard__type[aria-pressed='true'] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

/* 칩에서 뺀 설명 — 고른 사유의 것만 결과에 나온다 */
.wizard__basis-desc {
  margin-top: var(--s-xs);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* ---------- 결과 ---------- */
.wizard__result-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  align-items: flex-start;
  margin-bottom: var(--s-lg);
}

.wizard__result-head h3 {
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
}

.wizard__more--specs {
  margin-top: var(--s-lg);
}

.wizard__specs {
  margin: var(--s-sm) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-hairline);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.wizard__specs > div {
  background: var(--c-canvas);
  padding: var(--s-md) var(--s-lg);
}

.wizard__specs dt {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-micro-cap);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-xs);
}

.wizard__specs dd {
  margin: 0;
  color: var(--c-ink);
  line-height: 1.5;
}

.wizard__specs small {
  display: block;
  margin-top: var(--s-xs);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* 진단기준일 */
.wizard__basis {
  padding: var(--s-lg);
  background: var(--c-canvas-soft);
  border-radius: var(--r-md);
}

.wizard__basis-label {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-micro-cap);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-md);
}

.wizard__basis-label span {
  color: var(--c-primary-deep);
}

/* 확인된 기준일 */
.wizard__basis-date {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--c-ink);
}

.wizard__basis-note {
  margin-top: var(--s-sm);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-ink-secondary);
}

.wizard__basis-src {
  margin-top: var(--s-sm);
  font-size: var(--fs-micro-cap);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* 접히는 세부 기준 — 결과 카드가 히어로 옆에 들어가므로 기본은 닫아 둔다 */
.wizard__more {
  margin-top: var(--s-md);
}

.wizard__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-micro);
  color: var(--c-primary-deep);
}

.wizard__more > summary::-webkit-details-marker {
  display: none;
}

.wizard__more > summary::after {
  content: '＋';
  font-size: var(--fs-micro-cap);
}

.wizard__more[open] > summary::after {
  content: '－';
}

.wizard__more-body {
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--c-hairline);
}

/* 마커가 컨테이너 밖으로 나가지 않도록 안쪽에 그린다 */
.wizard__cautions {
  margin: var(--s-md) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-xs);
}

.wizard__cautions li {
  position: relative;
  padding-left: 1em;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-ink-mute);
  overflow-wrap: anywhere;
}

.wizard__cautions li::before {
  content: '·';
  position: absolute;
  left: 0.15em;
  top: 0;
}

/* 조문을 확인하지 못한 조합 — 날짜를 지어내지 않고 상담으로 넘긴다 */
.wizard__basis.is-unknown {
  background: var(--c-cream);
}

.wizard__basis.is-unknown .wizard__basis-date {
  color: var(--c-ink-secondary);
}

.wizard__remark {
  font-size: var(--fs-micro);
  color: var(--c-ink-mute);
}

.wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

/* ---------- 바닥 ---------- */
.wizard__foot {
  display: grid;
  gap: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-hairline);
}

/* 머리 오른쪽에 붙는 되돌아가기 */
.wizard__back {
  flex: 0 0 auto;
  padding: 6px var(--s-md);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill);
  background: var(--c-canvas);
  color: var(--c-ink-secondary);
  font-size: var(--fs-micro);
  min-height: 28px;
}

.wizard__back:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.wizard__note {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .wizard {
    padding: var(--s-lg);
  }

  .wizard__tiles {
    grid-template-columns: 1fr;
  }

  .wizard__tile {
    min-height: 0;
  }

  .wizard__option,
  .wizard__tile {
    min-height: 44px;
  }

  .wizard__option {
    flex-direction: column;
    gap: var(--s-xs);
    align-items: flex-start;
  }

  .wizard__specs {
    grid-template-columns: 1fr;
  }

  .wizard__filter,
  .wizard__type {
    min-height: 40px;
  }

  /* 좁은 화면에서는 칩이 잘리지 않게 줄바꿈을 허용한다 */
  .wizard__type {
    white-space: normal;
  }

  .wizard__actions .btn {
    width: 100%;
  }
}