/* Guided 3단계 워크플로 */
/* WHY: 좌우 padding 24 → 8로 축소하여 .g-nav 및 .container 사용 페이지와 카드 외곽선 통일 (1184px). */
.guided-shell {
  max-width: var(--container-narrow);
  margin: 0 auto;
  /* 2026-05-14 — top padding 5px(균등 간격). gap도 stepper↔step card 사이 5px로 축소.
     옛 var(--space-8/space-6)이 너무 넓어 nav-stepper 사이만 멀고 stepper-step 사이도 24px. */
  padding: 5px var(--space-2) var(--space-12);
  display: flex; flex-direction: column; gap: 5px;
  position: relative;  /* 2026-05-13 — 임시저장 launcher absolute 부모 */
}
.guided-shell--wide { max-width: var(--container); }

/* 2026-05-14 — 임시저장 launcher가 step header의 fpick 옆에 inline 배치.
   사용자 보고: 옛 absolute 우측 상단 배치는 "고아" 느낌 → 서체 selector와 같은 영역에서
   한눈에 보이도록 step header inline 배치로 전환. main 직속 .guided-shelf-launchers는 제거됨.
   .guided-step__head가 flex column이므로 launcher도 fpick과 같이 absolute로 우상단에 두되
   fpick 왼쪽(가까이)에 배치 → 시각적으로 한 줄에 나란히. */
.guided-step__head .guided-shelf-inline {
  position: absolute;
  top: 0;
  right: 168px;  /* fpick 폭(약 160px) + gap 8px */
  /* base .tutor-stats-launcher__btn에 width:100% 있어 부모 폭만큼 부풀어 좌측 화면 밖으로 밀리던 버그 해결. */
  width: auto;
  padding: 6px 10px;
  font-size: var(--fz-12);
  min-height: 0;
  white-space: nowrap;
}
/* 2026-05-14 — fsize-pick(글자 크기)는 launcher 좌측에 absolute. 우측 끝부터 fpick → launcher → fsize 순. */
.guided-step__head .fsize-pick {
  position: absolute;
  top: 0;
  right: 290px;  /* launcher 폭(~110) + gap = ~120, 그 좌측에 배치 */
}
/* head는 fpick(160) + launcher(110) + fsize(120) + gap을 모두 확보 → padding-right 400px. */
.guided-step__head { padding-right: 410px; }
@media (max-width: 980px) {
  /* 좁은 화면에선 우측 컨트롤 묶음이 다음 줄로 wrap. absolute 해제 + 우측 정렬. */
  .guided-step__head { padding-right: 0; }
  .guided-step__head .guided-shelf-inline,
  .guided-step__head .fsize-pick,
  .guided-step__head .fpick--inline {
    position: static;
    align-self: flex-end;
    margin-top: 4px;
  }
}

/* Stepper */
.stepper {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
}
.stepper__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
}
.stepper__item {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-mute);
  font-size: var(--fz-13);
}
.stepper__item.is-active { color: var(--ink); }
.stepper__item.is-done { color: var(--ink); }
.stepper__num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-glass-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fz-13);
  font-weight: 600;
  flex-shrink: 0;
  transition: background var(--dur-3) var(--easing-standard), color var(--dur-3);
}
.stepper__item.is-active .stepper__num {
  background: var(--accent); color: var(--accent-on); border-color: transparent;
}
.stepper__item.is-done .stepper__num {
  background: var(--ok); color: #fff; border-color: transparent;
}
.stepper__label { font-weight: 500; }
.stepper__bar {
  height: 4px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.stepper__progress {
  display: block; width: var(--progress, 33%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width var(--dur-4) var(--easing-emphasis);
}

@media (max-width: 560px) {
  .stepper__list { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .stepper__label { display: none; }
  /* 모바일: 숫자 아이콘 블라인드 처리로 높이 확보 */
  .stepper__num { display: none; }
  .num { display: none; }
}

/* Step card */
.guided-step {
  padding: var(--space-8);
  display: none;
  flex-direction: column;
  gap: var(--space-6);
}
.guided-step.is-active { display: flex; }

/* WHY: head를 position:relative로 두어 fpick(우상단 absolute)가 카드 헤더 안에 정렬되도록.
        본문 작성 영역의 우측 상단에 위치 — Step 1·Step 2 Phase A·Step 3 모두 동일 패턴. */
.guided-step__head {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 160px; /* fpick 버튼 폭 확보 */
}
.guided-step__head h2 { margin: 0; }
.guided-step__head p { margin: 0; color: var(--ink-mute); }
.guided-step__head .fpick--inline {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 560px) {
  .guided-step__head { padding-right: 0; }
  .guided-step__head .fpick--inline {
    position: static;
    align-self: flex-end;
    margin-top: 4px;
  }
}
.guided-step__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line);
}
.guided-step__foot--end { justify-content: flex-end; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-mute);
  font-size: var(--fz-13);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.field__label .required { color: var(--accent-soft); }
.field__hint { color: var(--ink-faint); font-size: var(--fz-12); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font: inherit;
  /* 2026-05-14 — base * editor-font-scale. select는 calc 효과 자연 동작. */
  font-size: calc(var(--fz-15) * var(--editor-font-scale, 1));
  color: var(--ink);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
:root[data-theme="dark"] .field__input,
:root[data-theme="dark"] .field__select,
:root[data-theme="dark"] .field__textarea {
  background: rgba(10,18,38,0.55);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.field__textarea {
  font-family: var(--font-serif);
  font-size: var(--fz-16);
  line-height: 1.7;
  resize: vertical;
  min-height: 96px;
}
.field__counter {
  font-family: var(--font-mono);
  font-size: var(--fz-12);
  color: var(--ink-mute);
}
.field__counter.is-warn { color: var(--warn); }
.field__counter.is-err { color: var(--err); }

/* Chips (keyword) */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-height: 56px;
  align-items: center;
}
:root[data-theme="dark"] .chips { background: rgba(10,18,38,0.55); }
.chips:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(31,58,138,0.10);
  color: var(--accent);
  font-size: var(--fz-13);
  font-weight: 500;
}
:root[data-theme="dark"] .chip { background: rgba(138,180,248,0.16); }
.chip__x {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(31,58,138,0.16);
  cursor: pointer;
  font-size: 11px; line-height: 1;
  border: 0;
  color: inherit;
}
.chips__input {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 4px;
  font-size: var(--fz-14);
  color: var(--ink);
}

/* Radio groups */
.radio-grid {
  display: grid; gap: 8px;
}
.radio-grid--3 { grid-template-columns: repeat(3, 1fr); }
.radio-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
  .radio-grid--3, .radio-grid--2 { grid-template-columns: 1fr; }
}
.radio-option {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2);
  display: flex; flex-direction: column; gap: 2px;
}
:root[data-theme="dark"] .radio-option { background: rgba(10,18,38,0.55); }
.radio-option input { position: absolute; opacity: 0; pointer-events: none; }
.radio-option:hover { border-color: var(--line-strong); }
.radio-option.is-checked {
  border-color: var(--accent);
  background: rgba(31,58,138,0.06);
  box-shadow: 0 0 0 3px var(--ring);
}
:root[data-theme="dark"] .radio-option.is-checked {
  background: rgba(138,180,248,0.10);
}
.radio-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.03) 12px);
}
.radio-option__title { font-weight: 600; font-size: var(--fz-14); }
.radio-option__desc { color: var(--ink-mute); font-size: var(--fz-12); }

/* Reassure note */
.reassure-note {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(31,58,138,0.06), rgba(31,58,138,0.10));
  border-left: 3px solid var(--accent-soft);
  font-size: var(--fz-14);
  line-height: 1.6;
}
:root[data-theme="dark"] .reassure-note {
  background: linear-gradient(135deg, rgba(138,180,248,0.08), rgba(46,80,181,0.10));
}
.reassure-note strong { color: var(--ink); }

/* Step 2 — three columns */
.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) {
  .three-cols { grid-template-columns: 1fr; }
}
.three-cols__col {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.three-cols__col h3 {
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.three-cols__col h3 .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fz-12);
  font-weight: 600;
}

.cand-list {
  display: flex; flex-direction: column; gap: 10px;
  list-style: none; padding: 0; margin: 0;
}
.cand-card {
  position: relative;
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2);
}
.cand-card input { position: absolute; opacity: 0; pointer-events: none; }
.cand-card.is-selected {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.cand-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cand-card__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fz-12);
  color: var(--copper);
  font-weight: 600;
}
:root[data-theme="dark"] .cand-card__tag { color: var(--accent-soft); }
.cand-card__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.cand-card.is-selected .cand-card__check {
  border-color: var(--accent);
  background: var(--accent);
}
.cand-card.is-selected .cand-card__check::after {
  content: ""; width: 5px; height: 9px;
  border: solid var(--accent-on); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cand-card__body {
  font-family: var(--font-serif);
  font-size: var(--fz-15);
  line-height: 1.7;
  color: var(--ink);
}
.cand-card__meta {
  margin-top: 8px;
  display: flex; gap: 10px;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-family: var(--font-mono);
}

.three-cols__free { margin-top: 4px; }

/* Step 3 — split preview */
.preview-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .preview-split { grid-template-columns: 1fr; }
}
.preview-md {
  padding: var(--space-6);
  min-height: 320px;
  font-family: var(--font-serif);
  line-height: 1.85;
}
.preview-md h1 { font-family: var(--font-serif); font-size: var(--fz-32); margin: 0 0 var(--space-4); }
.preview-md h2 { font-size: var(--fz-24); margin: var(--space-6) 0 var(--space-3); }
.preview-md h3 { font-size: var(--fz-20); margin: var(--space-5) 0 var(--space-2); }
.preview-md p { margin: 0 0 var(--space-4); font-size: var(--fz-17, 17px); }
.preview-md ul, .preview-md ol { margin: 0 0 var(--space-4); }
.preview-md blockquote {
  border-left: 3px solid var(--accent-soft);
  padding-left: var(--space-4);
  color: var(--ink-mute);
  font-style: italic;
  margin: var(--space-4) 0;
}
.preview-md.is-empty {
  display: grid; place-items: center;
  color: var(--ink-mute);
  text-align: center;
  font-family: var(--font-sans);
  font-style: normal;
}

.global-note {
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* Spinner / loading */
.spin {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg);} }
.is-loading .btn-label { opacity: 0.65; }

/* Guided 임시저장 버튼 — 기본 ghost보다 저장 액션임이 보이도록 보강 */
.page--guided [data-guided-save] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1.5px solid rgba(31,58,138,0.28);
  border-radius: var(--radius-pill);
  background: rgba(31,58,138,0.08);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(31,58,138,0.08);
}
.page--guided [data-guided-save]:hover {
  border-color: rgba(31,58,138,0.46);
  background: rgba(31,58,138,0.12);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .page--guided [data-guided-save] {
  background: rgba(138,180,248,0.12);
  border-color: rgba(138,180,248,0.32);
  color: var(--accent-soft);
  box-shadow: none;
}

/* Toast / banner */
.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(31,58,138,0.12);
  border: 1px solid rgba(31,58,138,0.28);
  color: var(--ink);
  font-size: var(--fz-13);
  display: flex; align-items: center; gap: 10px;
}
.banner--err { background: rgba(182,48,63,0.10); border-color: rgba(182,48,63,0.30); color: var(--err); }
.banner--info { background: rgba(31,58,138,0.08); border-color: rgba(31,58,138,0.20); color: var(--accent); }
.banner__msg { flex: 1; }
.banner__meta { color: var(--ink-mute); margin-left: 6px; }
.banner__actions { display: flex; align-items: center; gap: 8px; }
.banner__close {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.banner__close:hover { background: rgba(31,58,138,0.12); }

/* Step1 자동저장 인디케이터 */
.g1-saved {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  opacity: 0.85;
  transition: opacity var(--dur-2);
}
.g1-saved::before {
  content: '✓ ';
  color: var(--ok);
  font-weight: 700;
  margin-right: 2px;
}
.banner__close { background: transparent; border: 0; color: inherit; opacity: 0.7; }

/* ───────── Step 2 Phase A · Phase B ─────────
   WHY: Step 2를 두 단계로 분리.
        Phase A — 메타 확인·조정 + 서·본·결 시드 입력 → [✨ 문장 후보 생성]
        Phase B — 응답 후 6안 후보 카드 + [다시 생성][다음으로]
        Phase A 카드들은 Phase B 진입 시 collapsed로 축소(헤더만 노출, 펼치기 가능). */

.g2-phase-a {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.g2-phase-a[hidden],
.g2-phase-b[hidden] { display: none; }

.g2-phase-b {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Phase A 카드 — 메타 / 시드 (서·본·결 3장) */
.g2-card {
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: padding var(--dur-3), background var(--dur-2);
}
:root[data-theme="dark"] .g2-card {
  background: rgba(10,18,38,0.45);
}
.g2-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.g2-card__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fz-15);
}
.g2-card__title .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fz-12);
  font-weight: 600;
}
.g2-card__caption {
  color: var(--ink-mute);
  font-size: var(--fz-13);
}

/* 주제 카드 — 필수 + 시각 강조 (Step 2 최상단) */
.g2-card--topic {
  border-color: var(--accent);
  border-width: 1.5px;
  background: linear-gradient(0deg, rgba(31,58,138,0.04), rgba(31,58,138,0.04)), var(--surface);
}
:root[data-theme="dark"] .g2-card--topic {
  background: linear-gradient(0deg, rgba(138,180,248,0.05), rgba(138,180,248,0.05)), rgba(10,18,38,0.45);
}
.g2-card--topic .g2-card__title .num {
  background: var(--accent);
  font-size: var(--fz-13);
}

/* 필수 표식 — 작고 은은한 별표 */
.g2-required {
  color: var(--err, #b6303f);
  font-weight: 700;
  margin-left: 2px;
  font-size: var(--fz-13);
}
.g2-card__body {
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* Phase A 카드 collapsed (Phase B 진입 후 축소) */
.g2-card.is-collapsed {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.g2-card.is-collapsed .g2-card__body { display: none; }
.g2-card.is-collapsed .g2-card__head::after {
  content: '펼치기 ▾';
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-family: var(--font-mono);
}
.g2-card.is-expanded .g2-card__head::after {
  content: '접기 ▴';
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-family: var(--font-mono);
}

/* 메타 4 셀렉터 grid */
.g2-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 720px) {
  .g2-meta-grid { grid-template-columns: 1fr; }
}
.g2-meta-grid .field { gap: 6px; }
.g2-meta-grid .field__label { font-size: var(--fz-12); }
.g2-meta-grid .field__select[disabled] {
  background: var(--surface-glass-2);
  color: var(--ink-mute);
  cursor: not-allowed;
  border-style: dashed;
}

/* 시드 입력 — 한 줄 문장 + 키워드 칩 */
.g2-seed {
  display: flex; flex-direction: column; gap: 8px;
}
.g2-seed__sentence {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  font-family: var(--font-serif);
  /* 2026-05-14 — editor-font-scale 반영. */
  font-size: calc(var(--fz-15) * var(--editor-font-scale, 1));
  color: var(--ink);
  resize: none;
  min-height: 44px;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
:root[data-theme="dark"] .g2-seed__sentence {
  background: rgba(10,18,38,0.55);
}
.g2-seed__sentence:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Step 2 시드 키워드 input (input은 위, 칩은 아래) */
.g2-seed__keywords {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font: inherit;
  /* 2026-05-14 — editor-font-scale 반영. */
  font-size: calc(var(--fz-14) * var(--editor-font-scale, 1));
  color: var(--ink);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
:root[data-theme="dark"] .g2-seed__keywords { background: rgba(10,18,38,0.55); }
.g2-seed__keywords:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.g2-seed__hint {
  color: var(--ink-faint);
  font-size: var(--fz-12);
  font-family: var(--font-mono);
}

/* [✨ 문장 후보 생성] 큰 primary 버튼 — Phase A 끝에 강조 */
.g2-generate-row {
  display: flex; justify-content: center; align-items: center;
  padding: var(--space-3) 0 var(--space-2);
}
.btn--xl {
  padding: 14px 32px;
  font-size: var(--fz-16);
  font-weight: 700;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(31,58,138,0.18);
}
.btn--xl:hover { transform: translateY(-1px); }
.btn--xl[disabled],
.btn--xl.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.g2-generate-hint {
  margin-top: 6px;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fz-12);
}

/* ───────── kchips: 평이한 #태그 (테두리·배경 박스 없음) ─────────
   WHY: 사용자가 "input으로 착각"하는 컨테이너 박스 제거. input이 위, hint, 그 아래
        한 줄 inline #태그. # 접두사 + ×는 호버 시만 노출. */
.kchips {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-height: 22px;
}
.kchip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 2px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--fz-13);
  line-height: 1.4;
  transition: background var(--dur-2);
}
.kchip:hover {
  background: rgba(31,58,138,0.06);
}
:root[data-theme="dark"] .kchip { color: var(--accent-soft); }
:root[data-theme="dark"] .kchip:hover { background: rgba(138,180,248,0.10); }
.kchip__hash {
  opacity: 0.7;
  font-weight: 600;
  margin-right: 1px;
}
.kchip__text {
  font-weight: 500;
}
.kchip__x {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2);
  margin-left: 2px;
}
.kchip:hover .kchip__x,
.kchip:focus-within .kchip__x {
  opacity: 0.85;
}
.kchip__x:hover {
  opacity: 1 !important;
  background: rgba(31,58,138,0.16);
}

/* 미괄식 라디오 disabled 시각화 — 더 명확히 */
.radio-option.is-disabled .radio-option__title {
  color: var(--ink-mute);
}
.radio-option.is-disabled input { pointer-events: none; }
[data-structure-hint] {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: 4px;
}

/* 2026-05-14: mobile capture fix.
   When step labels/numbers are hidden, the empty stepper list still consumed a row and
   made the second band look vertically unbalanced. The header controls also stacked
   one-per-line, pushing the form down. */
@media (max-width: 560px) {
  .page--guided .guided-shell {
    padding-top: 12px;
    gap: 12px;
  }

  .page--guided .stepper {
    padding: 14px 16px;
    gap: 0;
  }

  .page--guided .stepper__list {
    display: none;
  }

  .page--guided .stepper__bar {
    margin: 0;
  }

  .page--guided .guided-step__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: 6px;
    row-gap: 7px;
    align-items: center;
  }

  .page--guided .guided-step__head > .t-caption {
    grid-column: 1;
    min-width: 0;
  }

  .page--guided .guided-step__head > h2,
  .page--guided .guided-step__head > p,
  .page--guided .guided-step__head > .g1-saved {
    grid-column: 1 / -1;
  }

  .page--guided .guided-step__head .fpick--inline,
  .page--guided .guided-step__head .guided-shelf-inline,
  .page--guided .guided-step__head .fsize-pick {
    position: static;
    align-self: center;
    margin-top: 0;
  }

  .page--guided .guided-step__head .fsize-pick {
    grid-column: 2;
    grid-row: 1;
  }

  .page--guided .guided-step__head .guided-shelf-inline {
    grid-column: 3;
    grid-row: 1;
  }

  .page--guided .guided-step__head .fpick--inline {
    grid-column: 4;
    grid-row: 1;
  }

  .page--guided .guided-shelf-inline .tutor-stats-launcher__label,
  .page--guided .guided-shelf-inline .tutor-stats-launcher__hint {
    display: none;
  }

  .page--guided .guided-step__head .fsize-pick__btn {
    width: 24px;
    min-width: 24px;
    padding: 2px 0;
  }
}

/* 2026-05-14: stepper is part of the active writing card, not a separate band. */
.page--guided .guided-stepper {
  padding: 0 0 14px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.page--guided .guided-stepper .stepper__bar {
  height: 4px;
}

/* 2026-05-14: keep font/save/size controls as one header tool group. */
.page--guided .guided-step__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: start;
  column-gap: 8px;
  row-gap: 7px;
  padding-right: 0;
}

.page--guided .guided-step__head > .t-caption {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.page--guided .guided-step__head > h2,
.page--guided .guided-step__head > p,
.page--guided .guided-step__head > .g1-saved {
  grid-column: 1 / -1;
}

.page--guided .guided-step__head .fpick--inline,
.page--guided .guided-step__head .guided-shelf-inline,
.page--guided .guided-step__head .fsize-pick {
  position: static;
  align-self: start;
  margin-top: 0;
}

.page--guided .guided-step__head .fsize-pick {
  grid-column: 2;
  grid-row: 1;
}

.page--guided .guided-step__head .guided-shelf-inline {
  grid-column: 3;
  grid-row: 1;
  min-height: 36px;
  min-width: 36px;
  padding: 0 12px;
}

.page--guided .guided-step__head .fpick--inline {
  grid-column: 4;
  grid-row: 1;
}

.page--guided .guided-step__head .fpick__btn,
.page--guided .guided-step__head .fsize-pick {
  min-height: 36px;
}

@media (max-width: 560px) {
  .page--guided .guided-stepper {
    padding-bottom: 12px;
    gap: 0;
  }

  .page--guided .guided-stepper .stepper__list {
    display: none;
  }
}

/* 2026-05-15 — guided glass-card 외곽 정리: 32px 퍼짐 → 16px 컴팩트 그림자로 라운드 외곽이 또렷이 보이도록.
   글로벌 02-glass.css는 손대지 않고 page-level 오버라이드로 한정. preview/result/meta 카드도 동일 처리. */
.page--guided .glass-card {
  box-shadow: 0 4px 16px rgba(14, 28, 64, 0.10);
}
.page--guided .glass-card:hover {
  box-shadow: 0 6px 20px rgba(14, 28, 64, 0.13);
}
:root[data-theme="dark"] .page--guided .glass-card {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(138, 180, 248, 0.10) inset;
}
:root[data-theme="dark"] .page--guided .glass-card:hover {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(138, 180, 248, 0.14) inset;
}