/* ============================================================
   manwol.css — 만월아씨 통합 서사 카드 (심야 방송실 톤)
   ============================================================
   /api/manwol/reading 스트리밍 결과가 렌더되는 hero 카드.
   웹툰 렌더 대체.
   ============================================================ */

.manwol-loading,
.manwol-card {
  display: block;
  color: #eae1cf;
  font-family: 'Nanum Myeongjo', serif;
  line-height: 1.85;
  letter-spacing: -0.005em;
}

/* ── 로딩 상태 ─────────────────────────────────────────── */
.manwol-loading .manwol-loading-inner {
  text-align: center;
  padding: 56px 28px 64px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200, 42, 52, 0.28) 0%, transparent 65%),
    linear-gradient(180deg, #100a12 0%, #0a0710 100%);
  border: 1px solid rgba(232, 196, 122, 0.16);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 40px rgba(0, 0, 0, 0.55);
}
.manwol-loading-sign {
  display: inline-block;
  padding: 6px 20px;
  background: linear-gradient(180deg, #8b1a2f 0%, #4a0a15 100%);
  color: #ffe0e6;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 5px;
  border-radius: 3px;
  box-shadow:
    0 0 14px rgba(201, 36, 63, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 220, 230, 0.2);
  animation: manwolOnAirBreathe 3.4s ease-in-out infinite;
}
.manwol-loading-title {
  margin-top: 22px;
  font-size: 20px;
  letter-spacing: 4px;
  color: #e8c47a;
  font-weight: 700;
}
.manwol-loading-sub {
  margin-top: 10px;
  color: rgba(232, 223, 208, 0.55);
  font-size: 13px;
  letter-spacing: 1px;
}
@keyframes manwolOnAirBreathe {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 10px rgba(201, 36, 63, 0.35), 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 230, 0.2); }
  50%      { opacity: 1;    box-shadow: 0 0 22px rgba(201, 36, 63, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 230, 0.25); }
}

/* ── 서사 카드 · 심야 방송실 톤 ─────────────────────────── */
.manwol-card {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 32% at 50% 0%, rgba(200, 42, 52, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 20% at 50% 100%, rgba(180, 40, 55, 0.15) 0%, transparent 65%),
    linear-gradient(180deg, #0e0910 0%, #14101a 40%, #0f0912 100%);
  border: 1px solid rgba(232, 196, 122, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 48px rgba(0, 0, 0, 0.68);
}
.manwol-frame {
  padding: 42px 34px 36px;
  position: relative;
}
.manwol-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(232, 196, 122, 0.08);
  border-radius: 8px;
  pointer-events: none;
}

/* ── 헤더 ───────────────────────────────────────────────── */
.manwol-header {
  text-align: center;
  padding-bottom: 26px;
  border-bottom: 1px dashed rgba(232, 196, 122, 0.16);
  margin-bottom: 26px;
}
.manwol-sign {
  display: inline-block;
  padding: 4px 16px;
  background: linear-gradient(180deg, #8b1a2f 0%, #4a0a15 100%);
  color: #ffe0e6;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 4px;
  border-radius: 3px;
  box-shadow:
    0 0 12px rgba(201, 36, 63, 0.5),
    inset 0 1px 0 rgba(255, 220, 230, 0.18);
}
.manwol-title {
  margin-top: 14px;
  font-size: 22px;
  color: #e8c47a;
  font-weight: 700;
  letter-spacing: 3px;
}
.manwol-sub {
  margin-top: 6px;
  color: rgba(232, 223, 208, 0.5);
  font-size: 12.5px;
  letter-spacing: 1.5px;
}

/* ── 본문 · 심야 낮은 목소리 ─────────────────────────────── */
.manwol-body {
  color: #eae1cf;
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: 0.01em;
  min-height: 120px;
}
.manwol-body p {
  margin: 0 0 1.15em;
  text-indent: 0;
  white-space: normal;
}
.manwol-body p:last-child { margin-bottom: 0; }

/* 커서 · 스트리밍 진행 표시 */
.manwol-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  vertical-align: -2px;
  margin-left: 3px;
  background: #e8c47a;
  opacity: 0.75;
  animation: manwolCursorBlink 1s steps(1) infinite;
}
@keyframes manwolCursorBlink {
  0%, 50%  { opacity: 0.85; }
  51%, 100% { opacity: 0.15; }
}

/* ── 하단 · 서명 ───────────────────────────────────────── */
.manwol-foot {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px dashed rgba(232, 196, 122, 0.16);
  text-align: right;
  min-height: 24px;
}
.manwol-signoff {
  color: #e8c47a;
  font-family: 'Nanum Pen Script', 'Nanum Myeongjo', serif;
  font-size: 20px;
  letter-spacing: 3px;
  opacity: 0.9;
}

/* ── 에러 · 빈 응답 ─────────────────────────────────────── */
.manwol-error,
.manwol-empty {
  color: rgba(232, 223, 208, 0.65);
  font-size: 14px;
  padding: 20px;
  background: rgba(139, 26, 47, 0.14);
  border: 1px solid rgba(200, 42, 52, 0.24);
  border-radius: 8px;
  text-align: center;
}

/* ============================================================
   시각화 블록 · 사주 결정론 데이터 · 만월아씨 카드 상단
   ============================================================ */
.manwol-viz {
  margin: 0 0 26px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(232, 196, 122, 0.14);
  display: grid;
  gap: 18px;
}
.viz-block {
  padding: 14px 16px 16px;
  background: rgba(20, 12, 24, 0.55);
  border: 1px solid rgba(232, 196, 122, 0.12);
  border-radius: 10px;
}
.viz-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.viz-block-title {
  font-family: 'Nanum Myeongjo', serif;
  color: #e8c47a;
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 700;
}
.viz-block-hint {
  color: rgba(232, 223, 208, 0.45);
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ── 4기둥 배지 ─────────────────────────────────────────── */
.viz-p-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.viz-p-col {
  text-align: center;
  padding: 10px 6px;
  background: rgba(6, 4, 8, 0.6);
  border: 1px solid rgba(232, 196, 122, 0.1);
  border-radius: 8px;
  position: relative;
}
.viz-p-col-day {
  border-color: rgba(232, 196, 122, 0.4);
  background: rgba(30, 18, 12, 0.75);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.2);
}
.viz-p-col-day::before {
  content: "본원";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  background: linear-gradient(180deg, #a8631e 0%, #6a3a10 100%);
  color: #ffe8c8;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  border-radius: 2px;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
}
.viz-p-label {
  font-size: 10.5px;
  color: rgba(232, 223, 208, 0.45);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.viz-p-gan, .viz-p-ji {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: #eae1cf;
}
.viz-p-ji { font-size: 20px; opacity: 0.9; }
.viz-p-gan[data-el="木"], .viz-p-ji[data-el="木"] { color: #6ab55a; }
.viz-p-gan[data-el="火"], .viz-p-ji[data-el="火"] { color: #e05a68; }
.viz-p-gan[data-el="土"], .viz-p-ji[data-el="土"] { color: #d4b475; }
.viz-p-gan[data-el="金"], .viz-p-ji[data-el="金"] { color: #c8c8c8; }
.viz-p-gan[data-el="水"], .viz-p-ji[data-el="水"] { color: #5e8fd0; }

/* ── 오행 %바 ───────────────────────────────────────────── */
.viz-bars {
  display: grid;
  gap: 8px;
}
.viz-bar-row {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 10px;
}
.viz-bar-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.viz-bar-hanja {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 17px;
  font-weight: 700;
}
.viz-bar-ko {
  font-size: 11px;
  color: rgba(232, 223, 208, 0.55);
  letter-spacing: 1px;
}
.viz-bar-track {
  height: 12px;
  background: rgba(6, 4, 8, 0.7);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(232, 196, 122, 0.06);
}
.viz-bar-fill {
  height: 100%;
  border-radius: 6px 0 0 6px;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  will-change: width;
}
.viz-bar-pct {
  font-family: 'Quicksand', sans-serif;
  font-size: 11.5px;
  color: rgba(232, 223, 208, 0.7);
  text-align: right;
  letter-spacing: 0.5px;
}
.viz-bar-me .viz-bar-track { border-color: rgba(232, 196, 122, 0.35); }
.viz-bar-me .viz-bar-fill { box-shadow: 0 0 8px currentColor, inset 0 1px 0 rgba(255,255,255,0.2); }
.viz-bar-me .viz-bar-hanja::after { content: " ●"; font-size: 8px; opacity: 0.7; }

/* ── 대운 타임라인 ────────────────────────────────────────── */
.viz-lc-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.viz-lc-track::-webkit-scrollbar { height: 4px; }
.viz-lc-track::-webkit-scrollbar-thumb { background: rgba(232, 196, 122, 0.2); border-radius: 2px; }
.viz-lc-item {
  flex: 0 0 auto;
  min-width: 60px;
  padding: 8px 6px;
  background: rgba(6, 4, 8, 0.5);
  border: 1px solid rgba(232, 196, 122, 0.08);
  border-radius: 8px;
  text-align: center;
}
.viz-lc-age {
  font-size: 10px;
  color: rgba(232, 223, 208, 0.4);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.viz-lc-gz {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 17px;
  font-weight: 700;
  color: #eae1cf;
}
.viz-lc-gz [data-el="木"] { color: #6ab55a; }
.viz-lc-gz [data-el="火"] { color: #e05a68; }
.viz-lc-gz [data-el="土"] { color: #d4b475; }
.viz-lc-gz [data-el="金"] { color: #c8c8c8; }
.viz-lc-gz [data-el="水"] { color: #5e8fd0; }
.viz-lc-current {
  background: linear-gradient(180deg, rgba(200, 42, 52, 0.22) 0%, rgba(60, 15, 22, 0.5) 100%);
  border-color: rgba(200, 42, 52, 0.55);
  box-shadow: 0 0 12px rgba(200, 42, 52, 0.4), inset 0 1px 0 rgba(255, 220, 230, 0.1);
  animation: vizCurrentPulse 3s ease-in-out infinite;
}
.viz-lc-current .viz-lc-age { color: #ffb8c0; }
@keyframes vizCurrentPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(200, 42, 52, 0.3), inset 0 1px 0 rgba(255, 220, 230, 0.1); }
  50%      { box-shadow: 0 0 18px rgba(200, 42, 52, 0.55), inset 0 1px 0 rgba(255, 220, 230, 0.15); }
}

/* ── 메타 칩 (격국 · 신강) ───────────────────────────────── */
.viz-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.viz-chip {
  padding: 6px 12px;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 12.5px;
  letter-spacing: 2px;
  border-radius: 4px;
  border: 1px solid rgba(232, 196, 122, 0.28);
  background: rgba(20, 12, 8, 0.7);
  color: #e8c47a;
}
.viz-chip-str {
  border-color: rgba(200, 42, 52, 0.35);
  color: #e8a8b0;
  background: rgba(60, 15, 22, 0.4);
}

/* ── 모바일 대응 ────────────────────────────────────────── */
@media (max-width: 640px) {
  .manwol-viz { gap: 14px; margin-bottom: 20px; padding-bottom: 18px; }
  .viz-block { padding: 12px 12px 14px; }
  .viz-block-title { font-size: 12px; letter-spacing: 2px; }
  .viz-p-row { gap: 6px; }
  .viz-p-col { padding: 8px 4px; }
  .viz-p-gan { font-size: 20px; }
  .viz-p-ji { font-size: 18px; }
  .viz-bar-row { grid-template-columns: 46px 1fr 44px; gap: 8px; }
  .viz-bar-hanja { font-size: 15px; }
  .viz-lc-item { min-width: 52px; padding: 6px 4px; }
  .viz-lc-gz { font-size: 15px; }
}

/* ── 관상 · 얼굴 오버레이 + 12궁 %바 ─────────────────────── */
.viz-face-overlay {
  margin: 14px auto 12px;
  max-width: 380px;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0508;
  border: 1px solid rgba(232, 196, 122, 0.22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.viz-face-overlay img {
  display: block;
  width: 100%;
  height: auto;
}
.viz-face-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  justify-content: center;
}
.viz-chip-shape {
  border-color: rgba(150, 200, 100, 0.35);
  color: #b8d0a0;
  background: rgba(30, 40, 20, 0.4);
}

.viz-palace-bars {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}
.viz-palace-row {
  display: grid;
  grid-template-columns: 62px 1fr 62px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.viz-palace-label {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 12px;
  color: rgba(232, 223, 208, 0.75);
  letter-spacing: 1.2px;
  text-align: right;
}
.viz-palace-track {
  height: 8px;
  background: rgba(6, 4, 8, 0.7);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(232, 196, 122, 0.06);
}
.viz-palace-fill {
  height: 100%;
  background: linear-gradient(90deg, #a8631e 0%, #e8c47a 100%);
  border-radius: 4px 0 0 4px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  will-change: width;
}
.viz-palace-pct {
  font-family: 'Quicksand', sans-serif;
  font-size: 10.5px;
  color: rgba(232, 223, 208, 0.55);
  letter-spacing: 0.3px;
}
.viz-palace-top .viz-palace-label { color: #ffd88a; font-weight: 700; }
.viz-palace-top .viz-palace-fill {
  background: linear-gradient(90deg, #c97a1c 0%, #ffe08a 100%);
  box-shadow: 0 0 8px rgba(232, 196, 122, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.viz-palace-weak .viz-palace-label { color: rgba(232, 168, 180, 0.85); }
.viz-palace-weak .viz-palace-fill {
  background: linear-gradient(90deg, #6a2028 0%, #b02832 100%);
}

/* ── 결과 페이지 부속 접기 (사주 결정론 · MBTI 추가입력) ───── */
.post-result-details {
  margin: 22px 0 0;
  padding: 0;
  background: rgba(20, 12, 22, 0.55);
  border: 1px solid rgba(232, 196, 122, 0.12);
  border-radius: 10px;
  overflow: hidden;
}
.post-result-details > summary {
  padding: 14px 18px;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 13.5px;
  color: rgba(232, 196, 122, 0.75);
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.post-result-details > summary::-webkit-details-marker { display: none; }
.post-result-details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 10px;
  color: rgba(232, 196, 122, 0.5);
  transition: transform 0.22s ease;
}
.post-result-details[open] > summary::before { transform: rotate(90deg); }
.post-result-details > summary:hover {
  background: rgba(232, 196, 122, 0.05);
  color: #e8c47a;
}
.post-result-details[open] > summary {
  border-bottom: 1px dashed rgba(232, 196, 122, 0.14);
  color: #e8c47a;
}
.post-result-details > *:not(summary) {
  padding: 16px 20px 24px;
}

/* ── 모바일 대응 ────────────────────────────────────────── */
@media (max-width: 640px) {
  .manwol-frame { padding: 30px 20px 26px; }
  .manwol-frame::before { inset: 10px; }
  .manwol-title { font-size: 18px; letter-spacing: 2px; }
  .manwol-body { font-size: 14.5px; line-height: 1.9; }
  .manwol-signoff { font-size: 18px; }
  .post-result-details > summary { padding: 12px 14px; font-size: 12.5px; }
  .post-result-details > *:not(summary) { padding: 14px 14px 20px; }
}