/* ============================================================
   Reading Loading · C-ink
   공용 로딩 페이지 스타일시트
   사주 · 궁합 · 신년운세 모두 동일 마크업에서 동작
   ============================================================ */

.lo-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--C-paper);
  color: var(--C-ink);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 배경 — 한지결 + 미세한 먹 번짐 */
.lo-page::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 45% at 50% 12%, rgba(26,22,18,0.035), transparent 70%),
    radial-gradient(circle at 18% 88%, rgba(168,50,50,0.04), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(184,134,11,0.035), transparent 60%);
  pointer-events: none;
}
/* 먹 번짐 인디케이터 — progress에 반응 */
.lo-page::after {
  content: "";
  position: absolute;
  left: 50%; top: 38%;
  width: calc(var(--lo-p, 0) * 1%);
  height: calc(var(--lo-p, 0) * 1%);
  max-width: 880px; max-height: 880px;
  background: radial-gradient(circle at center,
    rgba(26,22,18,0.06) 0%,
    rgba(26,22,18,0.025) 40%,
    transparent 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 800ms var(--ease-out), height 800ms var(--ease-out);
  z-index: 0;
}

/* ---------- 상단 얇은 바 ---------- */
.lo-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--C-line-2);
  background: rgba(250,248,243,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3;
}
.lo-topbar .brand {
  font-family: var(--font-serif-kr);
  font-size: 15px; letter-spacing: 0.06em;
}
.lo-topbar .brand em {
  font-family: var(--font-serif-en); font-style: italic;
  color: var(--C-gold); margin-left: 6px; font-size: 13px;
}
.lo-topbar .order-id {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--C-ink-3); text-transform: uppercase;
}

/* ---------- 컨텐츠 래퍼 ---------- */
.lo-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 60px;
  gap: 56px;
  align-items: start;
}
@media (min-width: 900px) {
  .lo-main {
    grid-template-columns: 1fr 320px;
    gap: 64px;
    padding: 56px 32px 72px;
  }
}

/* ---------- 입력정보 재확인 카드 ---------- */
.lo-confirm {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--C-line-2);
  background: var(--C-paper-2);
  margin-bottom: 20px;
  position: relative;
}
.lo-confirm::before {
  content: "確";
  position: absolute;
  top: -1px; left: -1px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--C-seal); color: var(--C-paper);
  font-family: var(--font-serif-kr); font-size: 13px;
  letter-spacing: 0;
}
.lo-confirm .who {
  padding-left: 22px;
  flex: 1;
  display: flex; flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px; color: var(--C-ink-2);
  line-height: 1.4;
}
.lo-confirm .who b { color: var(--C-ink); font-weight: 500; }
.lo-confirm .who .sep { color: var(--C-line-2); }
.lo-confirm .who .pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px solid var(--C-line-2);
  color: var(--C-ink-3);
}

/* ---------- 히어로 영역 ---------- */
.lo-hero { margin-bottom: 32px; }
.lo-hero .kicker {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--C-gold);
  margin-bottom: 12px;
}
.lo-hero h1 {
  font-family: var(--font-serif-kr);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.lo-hero h1 em {
  font-family: var(--font-serif-en);
  font-style: italic; font-weight: 500;
  color: var(--C-gold); font-size: 0.85em;
  margin: 0 2px;
}
.lo-hero h1 .hanja {
  font-family: var(--font-serif-kr); font-weight: 500;
  color: var(--C-seal);
}
.lo-hero p.lead {
  color: var(--C-ink-2);
  font-size: 14px; line-height: 1.7;
  max-width: 560px;
}

/* ---------- 진행바 ---------- */
.lo-progress {
  margin-bottom: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--C-line-2);
}
.lo-progress .row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.lo-progress .pct {
  font-family: var(--font-serif-en);
  font-style: italic; font-weight: 500;
  font-size: 48px; line-height: 1;
  color: var(--C-ink);
  letter-spacing: -0.02em;
}
.lo-progress .pct sup {
  font-size: 0.5em; vertical-align: 0.8em;
  margin-left: 2px; color: var(--C-ink-3);
}
.lo-progress .eta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--C-ink-3);
}
.lo-progress .eta b {
  color: var(--C-ink); font-weight: 500;
  font-family: var(--font-serif-en); font-style: italic;
  font-size: 14px; margin: 0 2px;
}
.lo-progress .bar {
  position: relative;
  height: 2px;
  background: var(--C-line-2);
  overflow: hidden;
}
.lo-progress .bar::after {
  content: "";
  position: absolute;
  top: -1px; bottom: -1px; left: 0;
  width: calc(var(--lo-p, 0) * 1%);
  background: linear-gradient(90deg,
    var(--C-ink) 0%,
    var(--C-ink) 85%,
    var(--C-gold) 100%);
  transition: width 700ms var(--ease-out);
}
.lo-progress .bar::before {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  left: calc(var(--lo-p, 0) * 1% - 6px);
  width: 12px;
  background: var(--C-gold);
  filter: blur(6px); opacity: 0.5;
  transition: left 700ms var(--ease-out);
  pointer-events: none;
}
.lo-progress .msg {
  margin-top: 14px;
  font-family: var(--font-serif-kr);
  font-size: 16px;
  color: var(--C-ink-2);
  line-height: 1.5;
  min-height: 24px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 300ms, transform 400ms;
}
.lo-progress .msg.is-on { opacity: 1; transform: translateY(0); }
.lo-progress .msg::after {
  content: "…";
  display: inline-block;
  color: var(--C-ink-3);
  margin-left: 4px;
  animation: lo-dots 1.2s infinite steps(4);
}
@keyframes lo-dots {
  0%, 20% { content: ""; }
  40% { content: "·"; }
  60% { content: "··"; }
  80%, 100% { content: "···"; }
}

/* ---------- 5단계 타임라인 ---------- */
.lo-stages {
  margin-bottom: 40px;
  padding-top: 28px;
  border-top: 1px dashed var(--C-line-2);
}
.lo-stages .stg-head {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--C-ink-3);
  margin-bottom: 18px;
  display: flex; justify-content: space-between;
}
.lo-stages .stg-head span { color: var(--C-ink-3); }
.lo-stages .stg-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  position: relative;
}
.lo-stage {
  position: relative;
  padding: 0 6px 0;
  text-align: left;
}
.lo-stage .num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--C-ink-3);
  display: block;
  margin-bottom: 8px;
}
.lo-stage .track {
  height: 1px;
  background: var(--C-line-2);
  margin-bottom: 12px;
  position: relative;
}
.lo-stage .track::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--C-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out);
}
.lo-stage .label {
  font-family: var(--font-serif-kr);
  font-size: 13px;
  color: var(--C-ink-3);
  line-height: 1.4;
  transition: color 300ms;
  display: flex; align-items: center; gap: 5px;
}
.lo-stage .label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border: 1px solid var(--C-line-2);
  background: var(--C-paper);
  flex-shrink: 0;
  transition: all 300ms;
}

/* 단계 상태 */
.lo-stage.is-done .track::after { transform: scaleX(1); }
.lo-stage.is-done .label { color: var(--C-ink-2); }
.lo-stage.is-done .label .dot {
  background: var(--C-ink);
  border-color: var(--C-ink);
}
.lo-stage.is-active .track::after { transform: scaleX(0.5); }
.lo-stage.is-active .label {
  color: var(--C-ink);
  font-weight: 500;
}
.lo-stage.is-active .label .dot {
  background: var(--C-gold);
  border-color: var(--C-gold);
  box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
  animation: lo-pulse 1.6s infinite;
}
.lo-stage.is-active .num { color: var(--C-gold); font-weight: 500; }
.lo-stage.is-active .track::after {
  background: linear-gradient(90deg, var(--C-ink), var(--C-gold));
  animation: lo-track-slide 2s ease-in-out infinite;
}
@keyframes lo-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(184,134,11,0.15); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(184,134,11,0.05); }
}
@keyframes lo-track-slide {
  0% { transform: scaleX(0.4); }
  50% { transform: scaleX(0.72); }
  100% { transform: scaleX(0.4); }
}

/* 모바일 */
@media (max-width: 720px) {
  .lo-stages .stg-list { grid-template-columns: 1fr; gap: 0; }
  .lo-stage { display: grid; grid-template-columns: 40px 1fr; padding: 10px 0; gap: 0 12px; border-bottom: 1px dashed var(--C-line-2); }
  .lo-stage .num { margin: 0; }
  .lo-stage .track { grid-column: 2; width: 40%; margin-bottom: 6px; }
  .lo-stage .label { grid-column: 2; }
}

/* ---------- 한 줄 인용 ---------- */
.lo-quote {
  padding: 24px 0;
  border-top: 1px solid var(--C-line-2);
  border-bottom: 1px solid var(--C-line-2);
  text-align: center;
  position: relative;
}
.lo-quote::before, .lo-quote::after {
  content: ""; position: absolute; left: 50%;
  width: 32px; height: 1px; background: var(--C-gold);
  transform: translateX(-50%);
}
.lo-quote::before { top: -0.5px; }
.lo-quote::after { bottom: -0.5px; }
.lo-quote .q {
  font-family: var(--font-serif-en);
  font-style: italic; font-weight: 400;
  font-size: 20px;
  color: var(--C-ink-2);
  line-height: 1.5;
  margin-bottom: 6px;
}
.lo-quote .kr {
  font-family: var(--font-serif-kr);
  font-size: 13px;
  color: var(--C-ink-3);
  letter-spacing: 0.04em;
}

/* ---------- 우측 목차 미리공개 ---------- */
.lo-toc {
  position: sticky; top: 20px;
  padding: 22px 22px 24px;
  border: 1px solid var(--C-line-2);
  background: var(--C-paper-2);
  position: relative;
}
.lo-toc::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 4px; height: 28px; background: var(--C-ink);
}
.lo-toc .toc-kicker {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--C-ink-3);
  margin-bottom: 4px;
}
.lo-toc h3 {
  font-family: var(--font-serif-kr);
  font-size: 16px; font-weight: 500;
  color: var(--C-ink);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--C-line-2);
}
.lo-toc h3 em {
  font-family: var(--font-serif-en); font-style: italic;
  font-weight: 400; color: var(--C-ink-3);
  font-size: 13px; margin-left: 6px;
}
.lo-toc-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.lo-toc-list::-webkit-scrollbar { width: 3px; }
.lo-toc-list::-webkit-scrollbar-thumb { background: var(--C-line-2); }

.lo-toc-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--C-ink-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color 300ms;
  border-bottom: 1px dotted transparent;
}
.lo-toc-item.is-in {
  opacity: 1; transform: translateY(0);
}
.lo-toc-item .toc-num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.05em;
  color: var(--C-ink-3);
  opacity: 0.7;
}
.lo-toc-item .toc-t {
  font-family: var(--font-serif-kr);
  font-weight: 400;
}
.lo-toc-item .toc-t .hanja {
  font-weight: 500;
  color: var(--C-ink-3);
  margin-left: 6px;
  font-size: 11px;
}
.lo-toc-item .toc-mark {
  font-family: var(--font-serif-en);
  font-size: 14px;
  color: transparent;
  transition: color 400ms;
  line-height: 1;
}

/* 섹션 완료 상태 */
.lo-toc-item.is-done {
  color: var(--C-ink-2);
}
.lo-toc-item.is-done .toc-num { color: var(--C-gold); }
.lo-toc-item.is-done .toc-mark { color: var(--C-gold); }
.lo-toc-item.is-done .toc-t .hanja { color: var(--C-ink-2); }

/* 현재 단계 */
.lo-toc-item.is-current {
  color: var(--C-ink);
  border-bottom-color: var(--C-gold);
}
.lo-toc-item.is-current .toc-num { color: var(--C-gold); font-weight: 500; }

@media (max-width: 900px) {
  .lo-toc { position: static; margin-top: 20px; }
  .lo-toc-list { max-height: 320px; }
}

/* ---------- 하단 안내 ---------- */
.lo-foot {
  position: relative;
  z-index: 2;
  padding: 14px 22px;
  border-top: 1px solid var(--C-line-2);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--C-ink-3);
  text-transform: uppercase;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 16px;
  background: rgba(243,239,228,0.4);
}
.lo-foot .hint { color: var(--C-ink-3); }

/* ---------- 에러 상태 (같은 페이지 내 토글) ---------- */
.lo-error {
  display: none;
  padding: 28px;
  border: 1px solid var(--C-seal);
  background: var(--C-paper-2);
  position: relative;
  margin-bottom: 28px;
}
.lo-page.is-error .lo-progress,
.lo-page.is-error .lo-stages,
.lo-page.is-error .lo-quote { display: none; }
.lo-page.is-error .lo-error { display: block; }

.lo-error::before {
  content: "誤";
  position: absolute; top: -1px; left: -1px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--C-seal); color: var(--C-paper);
  font-family: var(--font-serif-kr); font-size: 13px;
}
.lo-error .kicker {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--C-seal);
  margin-bottom: 10px;
  padding-left: 32px;
}
.lo-error h2 {
  font-family: var(--font-serif-kr);
  font-size: 22px; font-weight: 400;
  line-height: 1.4; margin-bottom: 10px;
}
.lo-error p {
  color: var(--C-ink-2);
  font-size: 14px; line-height: 1.6;
  margin-bottom: 18px;
}
.lo-error .acts {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.lo-error .btn {
  padding: 10px 18px;
  border: 1px solid var(--C-ink);
  background: var(--C-ink); color: var(--C-paper);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 120ms;
}
.lo-error .btn:hover { background: var(--C-paper); color: var(--C-ink); }
.lo-error .btn.ghost { background: var(--C-paper); color: var(--C-ink); }
.lo-error .btn.ghost:hover { background: var(--C-ink); color: var(--C-paper); }

/* ---------- 완료 플래시 (결과 전환 직전) ---------- */
.lo-page.is-done .lo-progress .pct { color: var(--C-gold); }
.lo-page.is-done .lo-progress .msg { color: var(--C-ink); font-weight: 500; }
.lo-page.is-done .lo-progress .msg::after { display: none; }
.lo-page.is-done .lo-progress .bar::after {
  animation: lo-bar-glow 600ms ease-out;
}
@keyframes lo-bar-glow {
  50% { box-shadow: 0 0 20px var(--C-gold); }
}

/* ---------- 데모 스위처 ---------- */
.lo-demo {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 100;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: var(--C-paper);
  border: 1px solid var(--C-line-2);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  box-shadow: 0 4px 20px rgba(26,22,18,0.08);
}
.lo-demo-t {
  color: var(--C-ink-3);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--C-line-2);
  margin-bottom: 4px;
}
.lo-demo-btn {
  padding: 5px 10px;
  border: 1px solid var(--C-line-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--C-paper); color: var(--C-ink-2);
}
.lo-demo-btn:hover { background: var(--C-paper-2); }
.lo-demo-btn.is-on { background: var(--C-ink); color: var(--C-paper); border-color: var(--C-ink); }
.lo-demo-btn.danger { color: var(--C-seal); }
</style>