/* ==========================================================================
   공통 — 섹션 제목(심전도 선)과 단계 버튼
   ========================================================================== */

.section-title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-sub-title {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 900;
  text-align: center;
  color: var(--text-pure);
}
.ecg-line {
  height: 2px;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--neon-pink), transparent);
}

/* 활성 상태: 2.8초 순차 하이라이트 & 네온 펄스 */

.btn-step-next, .btn-step-result {
  width: 100%;
  background: linear-gradient(135deg, #cb23a2 0%, #98146e 100%);
  border: 1px solid rgba(255, 200, 245, 0.4);
  border-radius: var(--radius-pill);
  color: var(--text-on-neon);
  font-size: 16px;
  font-weight: 900;
  padding: 11px;
  cursor: pointer;
  margin-top: auto;
  box-shadow: 0 4px 18px rgba(203, 35, 162, 0.4);
  transition: all 0.2s ease;
}
.btn-step-next:hover, .btn-step-result:hover {
  background: linear-gradient(135deg, #d9299b 0%, #a81779 100%);
  box-shadow: 0 6px 22px rgba(203, 35, 162, 0.6);
  transform: translateY(-1px);
}

/* ==========================================================================
   서브히어로 공통 에이브로우 및 칩 디자인 보정 (space.html 및 전체 서브페이지)
   ========================================================================== */
.sub-hero .page-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: 8px;
}

.sub-hero .emoji-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--hero-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sub-hero .emoji-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--neon-pink);
  color: #ffffff;
}

/* ==========================================================================
   리마인드 박스 (index)
   ========================================================================== */
.remind-box-section {
  background: var(--bg-box);
  border: 1.5px solid var(--border-box-purple);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 40px;
  box-shadow: 0 15px 40px var(--shadow-box);
}

.remind-main-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 800px) {
  .remind-main-wrapper { grid-template-columns: 1fr; }
}

.remind-intro-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sparkle-ico { font-size: 22px; color: var(--pink-ink); }
.remind-main-title { font-size: 18px; font-weight: 900; line-height: 1.3; }
.remind-sub-desc { font-size: 16px; color: var(--text-muted); margin-top: 4px; }

.remind-cards-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .remind-cards-side { grid-template-columns: 1fr; }
}

.remind-card {
  background: var(--bg-card-inner);
  border: 1.5px solid var(--border-purple);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.remind-card:nth-child(2) {
  border-color: var(--border-pink);
}

.remind-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--pink-ink);
  background: rgba(255, 77, 255, 0.15);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.remind-time.purple {
  color: var(--purple-ink);
  background: rgba(157, 78, 221, 0.15);
}
.remind-msg-title { font-size: 16px; font-weight: 800; color: var(--text-pure); margin-bottom: 2px; }
.remind-msg-desc { font-size: 16px; color: var(--text-sub); }

/* ==========================================================================
   대시보드 카드 (리포트·서브페이지 공통)
   ========================================================================== */

.dash-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-box-bright);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px var(--shadow-card);
}
.dash-card:hover {
  border-color: var(--neon-pink);
}

.widget-title { font-size: 16px; font-weight: 900; color: var(--text-pure); margin-bottom: 12px; }

/* Signal Cue List — 행동 신호 + 해독 코멘트를 쌍으로 나열하는 리스트 */
.signal-cue-list { display: flex; flex-direction: column; gap: 10px; }
.signal-cue {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-card-inner);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.signal-cue .sc-ico { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
img.sc-ico { width: 26px; height: 26px; object-fit: contain; margin-top: 2px; }
.signal-cue .sc-body { display: flex; flex-direction: column; gap: 2px; }
.signal-cue .sc-fact { font-size: 16px; color: var(--text-pure); font-weight: 700; }
.signal-cue .sc-read { font-size: 16px; color: var(--text-sub); }
.signal-cue .sc-read b { color: var(--pink-ink); }

/* Compare Bar — 항목별 나-상대 비교 (궁합 페이지) */

.stage-current { font-size: 16px; color: var(--pink-ink); font-weight: 800; }
.stage-now-desc { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin-top: 8px; }

/* Radar & Pentagon Canvas */

.widget-comment {
  font-size: 16px;
  color: var(--text-sub);
  text-align: center;
  background: var(--bg-card-inner);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  margin-top: auto;
}

/* ==========================================================================
   고민 커뮤니티 박스 (index)
   ========================================================================== */
.community-box-section {
  background: var(--bg-box);
  border: 1.5px solid var(--border-box-purple);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 40px;
  box-shadow: 0 15px 40px var(--shadow-box);
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.com-title-wrap { display: flex; align-items: center; gap: 10px; }
.bubble-heart-ico { font-size: 24px; }
.com-sub { font-size: 16px; color: var(--text-muted); }
.com-main-title { font-size: 18px; font-weight: 900; }
.btn-more-community {
  background: linear-gradient(135deg, #cb23a2 0%, #98146e 100%);
  border: 1px solid rgba(255, 200, 245, 0.4);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(203, 35, 162, 0.4);
  transition: all 0.2s ease;
}
.btn-more-community:hover {
  background: linear-gradient(135deg, #d9299b 0%, #a81779 100%);
  box-shadow: 0 6px 20px rgba(203, 35, 162, 0.6);
  transform: translateY(-1px);
}

.community-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .community-feed-grid { grid-template-columns: 1fr; } }

.community-card {
  background: var(--bg-card-inner);
  border: 1.5px solid var(--border-box-bright);
  border-radius: var(--radius-md);
  padding: 16px;
}
.post-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tag-category { font-size: 16px; font-weight: 800; color: var(--purple-ink); background: rgba(157, 78, 221, 0.15); padding: 2px 8px; border-radius: var(--radius-pill); }
.tag-status { font-size: 16px; font-weight: 900; padding: 2px 6px; border-radius: 4px; }
.tag-status.hot { background: var(--neon-hotpink); color: var(--text-on-neon); }
.tag-status.new { background: #00f0ff; color: #000; }

.post-title { font-size: 16px; font-weight: 800; color: var(--text-pure); margin-bottom: 6px; }
.post-snippet { font-size: 16px; color: var(--text-sub); line-height: 1.4; margin-bottom: 12px; }

.post-footer { display: flex; justify-content: space-between; font-size: 16px; color: var(--text-muted); border-top: 1px solid var(--border-hair); padding-top: 8px; }
.author-info { display: flex; align-items: center; gap: 4px; }
.post-counts { display: flex; gap: 8px; font-weight: 700; color: var(--text-sub); }

/* ==========================================================================
   BOTTOM 5 QUICK NAVIGATION BAR
   ========================================================================== */
:root {
  /* Fixed quick navigation is opt-in for touch layouts. */
  --quick-bar-reserved-space: 0px;
}

.bottom-quick-bar {
  /* Desktop has a full GNB and must keep the footer unobstructed. */
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--bg-bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1.5px solid var(--border-purple);
  padding: 8px 16px;
  z-index: 150;
  box-shadow: 0 -10px 30px var(--shadow-deep);
}

/*
   The quick bar is a mobile/tablet affordance. The pointer/hover gate also
   keeps a narrow portrait desktop monitor from receiving a touch-only nav.
*/
@media (max-width: 1024px) and (hover: none),
       (max-width: 1024px) and (pointer: coarse) {
  :root {
    /* 112px covers the two-line tablet label row plus the device safe area. */
    --quick-bar-reserved-space: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-quick-bar {
    display: block;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

.quick-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.quick-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-muted);
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.quick-nav-item:hover, .quick-nav-item.active {
  color: var(--text-pure);
  background: rgba(255, 77, 255, 0.15);
}
.q-icon-box { font-size: 20px; margin-bottom: 2px; }
.q-title { font-size: 16px; font-weight: 900; color: var(--text-pure); }
.q-sub { font-size: 16px; color: var(--text-muted); }
@media (max-width: 540px) { .q-sub { display: none; } }

/* ==========================================================================
   LOCK LAYER — 숫자는 무료, 해석·타이밍·행동은 잠금
   잠긴 자리에 "무엇을 못 보는지"를 문장으로 적는다 (블러만 씌우면 그냥 지나침)
   ========================================================================== */
.lock-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 77, 255, 0.12), rgba(157, 78, 221, 0.12));
  border: 1px dashed var(--neon-pink);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: auto;
}
.lock-ico { font-size: 16px; flex-shrink: 0; }
.lock-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lock-copy strong { font-size: 16px; font-weight: 800; color: var(--text-pure); line-height: 1.3; }
.lock-copy span { font-size: 16px; color: var(--text-muted); }

.btn-lock-open {
  flex-shrink: 0;
  background: var(--neon-pink);
  border: 1px solid var(--neon-pink);
  border-radius: var(--radius-pill);
  color: var(--text-on-neon);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 900;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-lock-open:hover { box-shadow: var(--glow-pink); transform: scale(1.05); }
/* PR 파트로 보내는 앵커도 같은 버튼 모양을 쓴다 */
a.btn-lock-open { display: inline-block; text-decoration: none; white-space: nowrap; }

/* 잠금 → 상품 브릿지 */
.unlock-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-box);
  border: 1.5px solid var(--neon-pink);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-top: 18px;
  box-shadow: 0 0 25px rgba(255, 77, 255, 0.2);
}
.bridge-copy { display: flex; flex-direction: column; gap: 3px; }
.bridge-copy strong { font-size: 16px; font-weight: 900; color: var(--text-pure); }
.bridge-copy span { font-size: 16px; color: var(--text-sub); }
.btn-bridge {
  background: linear-gradient(135deg, var(--neon-pink), #9b2fc9); /* 흰 글자가 밝은 끝에서도 읽히게 */
  border: 1.5px solid var(--text-on-neon);
  border-radius: var(--radius-pill);
  color: var(--text-on-neon);
  font-size: 16px;
  font-weight: 900;
  padding: 11px 24px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(255, 77, 255, 0.5);
  transition: all 0.2s ease;
}
.btn-bridge:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 77, 255, 0.7); }

/* 리포트형 서브페이지(속마음/타이밍/궁합/재회) 폭 통일.
   .sec-wrap/.sub-hero-inner는 store.css 기본값 1180px이지만, 헤더(.nav-inner-seamless)와
   .page-container 원본 정의가 1080px이라 그 폭에 맞춰야 무료 시각화 섹션과
   입력폼~결과 섹션의 좌우 경계가 페이지 안에서 어긋나지 않는다.
   store.html은 이 스코프 밖이라 자체 1180px 체계가 그대로 유지된다. */
.report-page .sec-wrap,
.report-page .sub-hero-inner { max-width: 1080px; }

/* 인트로 존 — 히어로 아래 무료 요약. 세 파트 어디에도 속하지 않는 입구지만,
   메인의 박스 섹션과 같은 언어를 써서 페이지가 하나로 이어지게 한다. */
.intro-box-section {
  --part-accent: var(--neon-purple);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(157, 78, 221, 0.35);
  border-top: 3px solid var(--part-accent);
  border-radius: var(--radius-lg);
  padding: 32px 22px 36px;
  box-shadow: 0 20px 50px var(--shadow-deep), 0 0 30px rgba(157, 78, 221, 0.2);
}
.intro-box-section .stat-row { margin-bottom: 18px; }
.intro-lead {
  font-size: 16px;
  color: var(--text-sub);
  line-height: 1.6;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 18px;
}

/* 파트 앵커 네비 — 세 파트의 존재와 순서를 한 화면에서 잡아 준다 */
.report-parts-nav {
  position: sticky;
  top: 62px;
  z-index: 90;
  max-width: 1080px;
  margin: 34px auto 0;
  padding: 8px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.report-part-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--bg-card-inner);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800;
  padding: 9px 8px;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.report-part-link .rpl-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.report-part-link:hover { border-color: var(--part-nav-hover, var(--neon-pink)); color: var(--text-pure); }
.report-part-link.current {
  background: var(--bg-cell);
  border-color: var(--part-nav-hover, var(--neon-pink));
  color: var(--text-pure);
}
.report-part-link[href="#part-input"] { --part-nav-hover: var(--neon-cyan); }
.report-part-link[href="#part-report"] { --part-nav-hover: var(--neon-pink); }
.report-part-link[href="#part-pr"] { --part-nav-hover: var(--neon-yellow); }

/* 파트 컨테이너 — 메인(index.html)의 박스 섹션과 같은 언어를 쓴다.
   글래스 배경 · 보라 테두리 · 깊은 그림자가 페이지를 넘어 이어지고,
   파트 구분은 상단 accent 선 하나로만 낸다. */
.report-input,
.analysis-report,
.report-pr {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(157, 78, 221, 0.35);
  border-top: 3px solid var(--part-accent);
  border-radius: var(--radius-lg);
  padding: 32px 22px 36px;
  margin-bottom: 40px;
  box-shadow: 0 20px 50px var(--shadow-deep), 0 0 30px rgba(157, 78, 221, 0.2);
  scroll-margin-top: 132px; /* sticky 헤더 + 파트 네비 */
}
.report-input { --part-accent: var(--neon-cyan); }
.analysis-report { --part-accent: var(--neon-pink); --part-ink: var(--pink-ink); }
.report-pr { --part-accent: var(--neon-yellow); margin-bottom: 20px; }

/* 파트 헤더 — 메인의 .section-title-box와 같은 결. 심전도 선은 여기서 그린다. */
.report-part-head {
  text-align: center;
  margin-bottom: 26px;
}
.rp-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--part-ink, var(--part-accent));
  border: 1px solid var(--part-accent);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  margin-bottom: 12px;
}
.rp-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 900;
  color: var(--text-pure);
  line-height: 1.35;
  margin-bottom: 8px;
}
.rp-title::before,
.rp-title::after {
  content: '';
  height: 2px;
  width: 40px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--part-accent), transparent);
}
.rp-desc { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin: 0 auto; max-width: 640px; }

@media (max-width: 520px) {
  .rp-title::before, .rp-title::after { width: 18px; }
}

/* 파트 종료선 — 다음 파트가 시작된다는 것을 본문에서도 알 수 있게 한다 */
.report-part-end {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-top: 24px;
}
.report-part-end::before,
.report-part-end::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-hair);
}

@media (max-width: 620px) {
  .report-parts-nav { top: 56px; padding: 6px 14px; gap: 5px; }
  .report-part-link { font-size: 13px; padding: 8px 4px; gap: 4px; flex-direction: column; }
  .report-input,
  .analysis-report,
  .report-pr { padding: 20px 14px 24px; margin-bottom: 32px; }
  .rp-title { font-size: 18px; }
}

/* ==========================================================================
   챕터 탭 — 리포트 페이지 내부 탐색 장치 (잠금 아님)
   모든 챕터가 항상 클릭 가능하고 DOM에 존재한다. display 토글만 한다.
   ========================================================================== */
.chapter-progress { text-align: center; font-size: 16px; color: var(--text-muted); margin: 28px 0 8px; }

.chapter-tabs-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 20px;
  scroll-margin-top: 132px; /* sticky .top-nav-integrated + .report-parts-nav에 가리지 않도록 */
}
.chapter-tab-btn {
  background: var(--bg-card-inner);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chapter-tab-btn .ctab-num { display: block; font-size: 13px; font-weight: 700; opacity: 0.75; margin-bottom: 2px; }
.chapter-tab-btn:hover { border-color: var(--neon-pink); color: var(--text-pure); }
.chapter-tab-btn.active {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  border-color: var(--neon-pink);
  color: var(--text-on-neon);
  box-shadow: var(--glow-pink);
}
.chapter-tab-btn.active .ctab-num { opacity: 0.9; }

.chapter-panel { display: none; }
.chapter-panel.active { display: block; animation: chapterFadeIn 0.25s ease; }
@keyframes chapterFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 목업 예시 배지 — sample-flag와 같은 톤, 리포트 콘텐츠 전용 문구 */
.demo-badge-row { margin-bottom: 14px; }

/* R1 입력요약 칩 */
.input-recap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.input-recap-chip {
  background: var(--bg-cell);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-sub);
  font-size: 16px;
  padding: 5px 12px;
}

/* R6 등에서 쓰는 2분기 선택 카드 (reunion "지금 연락할까" 패턴 공통화) */
.choice-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 640px) { .choice-split-grid { grid-template-columns: 1fr; } }
.choice-split-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-box-purple);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.choice-split-card.is-recommend { background: rgba(203,35,162,0.1); border-color: var(--neon-pink); }
.choice-split-card .cs-label { font-size: 16px; font-weight: 700; color: var(--text-muted); }
.choice-split-card.is-recommend .cs-label { color: var(--pink-ink); }
.choice-split-card .cs-body { font-size: 16px; color: var(--text-sub); margin: 4px 0 0; }
.choice-split-card.is-recommend .cs-body { color: #ffffff; }

/* R8 한계 & 다음 질문 */
.report-limits-box {
  background: var(--bg-cell);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 4px;
}
.report-limits-box p { font-size: 16px; color: var(--text-sub); line-height: 1.6; margin: 0 0 8px; }
.report-limits-box p:last-child { margin-bottom: 0; }

/* PART 1 실제 계산 결과 — js/components/love-result.js가 채운다.
   안전 중단 때 PART 2·3 목업을 hidden으로 숨기므로, 섹션 display 규칙이 hidden을 이기지 않게 둔다. */
.report-input [hidden],
.analysis-report[hidden],
.report-pr[hidden] { display: none !important; }
.love-result {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-cell);
  border: 1px solid var(--border-box-bright);
  border-radius: var(--radius-md);
}
.love-result.is-stop { border-color: var(--neon-cyan); }
.love-result.is-error { border-style: dashed; }
.love-result-title { font-size: 17px; font-weight: 800; color: var(--text-pure); margin: 0 0 10px; }
.love-result-indices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 12px; }
.love-result-index { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.love-result-index-text { min-width: 0; }
.love-result-index-text .love-result-note { margin-top: 4px; }
.lr-ring { width: 76px; height: 76px; display: block; }
.lr-ring-track { stroke: var(--border-soft); stroke-width: 8; }
.lr-ring-bar { stroke: var(--pink-ink); stroke-width: 8; }
.lr-ring-num { fill: var(--pink-ink); font-size: 22px; font-weight: 800; }
.love-result-label { font-size: 16px; font-weight: 700; color: var(--text-pure); }
.love-result-text.is-quote { padding: 10px 14px; border-left: 3px solid var(--pink-ink); background: var(--bg-input); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.love-result-subtitle { font-size: 16px; font-weight: 700; color: var(--text-pure); margin: 14px 0 0; }
.love-result-text { font-size: 16px; color: var(--text-pure); line-height: 1.6; margin: 10px 0 0; }
.love-result-note { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 6px 0 0; }
.love-result-flag {
  font-size: 15px;
  color: var(--text-sub);
  line-height: 1.6;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
}
.love-result-flag a { color: var(--pink-ink); font-weight: 700; white-space: nowrap; }
.love-result-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
/* 강도 표현(점수 체계가 아닌 학파) — 항목마다 범주 칩. 숫자는 없다. */
.love-result-grades { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.lr-grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); }
.lr-grade b { font-weight: 700; }
.lr-grade-chip { padding: 2px 12px; border-radius: 999px; border: 1px solid currentColor; font-weight: 800; white-space: nowrap; }
.lr-grade.is-strong .lr-grade-chip { color: #e8c069; }
.lr-grade.is-neutral .lr-grade-chip { color: #6b8cff; }
.lr-grade.is-weak .lr-grade-chip { color: #b487e8; }
.lr-grade.is-span .lr-grade-chip { color: #6dd2c4; }
.love-result-list li {
  font-size: 15px;
  color: var(--text-pure);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.form-field .time-unknown-toggle {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
}
.time-unknown-toggle input { width: 18px; height: 18px; accent-color: var(--neon-pink); flex: none; }
.input-cyber:disabled { opacity: 0.45; cursor: not-allowed; }
html:not([data-theme="light"]) .input-cyber[type="date"],
html:not([data-theme="light"]) .input-cyber[type="time"] { color-scheme: dark; }
.related-report-links { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.related-report-links a {
  font-size: 16px;
  color: var(--neon-cyan);
  text-decoration: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.related-report-links a:hover { border-color: var(--neon-cyan); }

/* PR (P1~P8) — 심층 리포트 미리보기 챕터 전용 */
.pr-headline { font-size: 18px; font-weight: 900; color: var(--text-pure); margin-bottom: 6px; }
.pr-sub { font-size: 16px; color: var(--text-sub); margin-bottom: 18px; }

.pr-cover {
  position: relative;
  background: linear-gradient(160deg, rgba(131,56,236,0.18), rgba(203,35,162,0.1));
  border: 1px solid var(--border-box-bright);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
}
.pr-cover-title { font-size: 20px; font-weight: 900; color: var(--text-pure); margin-bottom: 8px; }
.pr-cover-meta { font-size: 16px; color: var(--text-muted); margin-bottom: 14px; }
.pr-cover-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-cover-toc li { font-size: 16px; color: var(--text-sub); }
.pr-cover-toc b { color: var(--neon-cyan); margin-right: 6px; }

.pr-sample-card {
  border-left: 3px solid var(--neon-cyan);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
}
.pr-sample-tag { font-size: 16px; font-weight: 800; color: var(--neon-cyan); display: block; margin-bottom: 6px; }
.pr-sample-card p { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin: 0; }
.pr-sample-card p + p { margin-top: 8px; }

.pr-compare-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.pr-compare-table th, .pr-compare-table td { font-size: 16px; padding: 10px 12px; border-bottom: 1px solid var(--border-hair); text-align: left; }
.pr-compare-table th { color: var(--text-muted); font-weight: 700; }
.pr-compare-table td { color: var(--text-sub); }
.pr-compare-table td.pr-q { color: var(--text-pure); font-weight: 600; }

.pr-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pr-trust-item { font-size: 16px; color: var(--text-sub); background: var(--bg-cell); border-radius: var(--radius-pill); padding: 6px 12px; }

.pr-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* 히트맵 색 눈금 — 차트의 visualMap과 같은 그라데이션을 쓴다.
   색이 어긋난 범례는 없는 범례보다 나쁘므로 값을 여기서 한 번만 정의한다. */
.heat-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.heat-scale-bar {
  display: block;
  width: 96px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bg-cell), var(--neon-purple), var(--neon-pink));
}

/* 챕터 콘텐츠 다이나믹화 — 아이콘뱅크·canvas·캐릭터 (트랙 A) */
.widget-title-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 6px; margin-top: -3px; }
/* 차트 상자 — 높이는 CSS가 정한다. HTML에 픽셀 크기를 적지 않는다.
   가로가 넓어지면 높이도 함께 늘어 납작해지지 않게 종횡비로 잡고, 상·하한만 둔다. */
.viz-box {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  max-height: 320px;
}
.viz-box.is-tall { aspect-ratio: 4 / 3; min-height: 260px; max-height: 420px; }
.viz-box.is-short { aspect-ratio: 21 / 9; min-height: 150px; max-height: 220px; }
.viz-box.is-square { aspect-ratio: 1 / 1; min-height: 240px; max-height: 360px; }

/* 차트 카드 배치 — 넓은 화면에서 2~3열로 나란히 놓는다.
   한 장짜리 넓은 차트(주간 히트맵 등)는 이 래퍼를 쓰지 않는다. */
.report-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.report-chart-grid > .dash-card { margin-bottom: 0; height: 100%; }
.report-chart-grid.is-trio { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 620px) {
  .viz-box { min-height: 170px; }
  .viz-box.is-tall { min-height: 230px; }
  .report-chart-grid { grid-template-columns: 1fr; gap: 12px; }
}
.choice-icon { width: 34px; height: 34px; object-fit: contain; display: block; margin-bottom: 8px; }
.pr-cover-char { position: absolute; top: 14px; right: 18px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(203,35,162,0.35)); }
.pr-q-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 6px; margin-top: -2px; }

/* ==========================================================================
   AI 상담사 팝업 (우측하단 버블 -> 레이어 채팅창), 전 페이지 공통
   ========================================================================== */
.ai-counselor-bubble {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--quick-bar-reserved-space));
  z-index: 480;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--bg-box);
  border: 1.5px solid var(--border-pink);
  border-radius: 50%;
  box-shadow: var(--glow-pink);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ai-counselor-bubble:hover { transform: translateY(-2px) scale(1.05); }
.ai-counselor-avatar { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: var(--bg-card-inner); }

/* 인사 말풍선 - 아이콘 "위쪽"에 잠깐 떴다 사라진다.
   가로 폭이 있어도 세로 위치가 아이콘 전용 영역보다 높아 페이지 CTA와 겹치지 않는다. */
.ai-counselor-greeting {
  position: fixed;
  right: 20px;
  bottom: calc(88px + var(--quick-bar-reserved-space));
  z-index: 479;
  max-width: min(240px, calc(100vw - 40px));
  padding: 10px 14px;
  background: var(--bg-box);
  border: 1.5px solid var(--border-pink);
  border-radius: var(--radius-md);
  border-bottom-right-radius: 4px;
  color: var(--text-pure);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: var(--glow-pink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ai-counselor-greeting.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ai-counselor-panel {
  position: fixed;
  right: 20px;
  bottom: calc(88px + var(--quick-bar-reserved-space));
  z-index: 481;
  width: min(360px, calc(100vw - 40px));
  /* 고정 height를 둬서 메시지가 1~2개뿐이어도 "채팅창"으로 보일 만큼의
     세로 공간을 항상 확보한다 (내용 길이에 따라 쪼그라들지 않게). */
  height: min(560px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 2px solid var(--neon-pink);
  border-radius: var(--radius-lg);
  box-shadow:
    0 16px 48px var(--shadow-deep),
    0 0 0 1px color-mix(in srgb, var(--neon-pink) 35%, transparent),
    0 0 34px 4px color-mix(in srgb, var(--neon-pink) 55%, transparent);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ai-counselor-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.ai-counselor-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--neon-pink) 16%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--neon-pink) 45%, transparent);
  flex-shrink: 0;
}
.ai-counselor-panel-avatar { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: var(--bg-card-inner); }
.ai-counselor-panel-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ai-counselor-panel-title strong { font-size: 14px; color: var(--text-pure); }
.ai-counselor-panel-sub { font-size: 11px; color: var(--text-muted); }
.ai-counselor-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px;
}
.ai-counselor-close:hover { color: var(--text-pure); }

.ai-counselor-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-counselor-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.ai-counselor-msg.is-bot {
  align-self: flex-start;
  background: var(--bg-card-inner);
  color: var(--text-pure);
  border-bottom-left-radius: 4px;
}
.ai-counselor-msg.is-user {
  align-self: flex-end;
  background: var(--neon-pink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-counselor-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-box-purple);
  flex-shrink: 0;
}
.ai-counselor-input-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-box-purple);
  background: var(--bg-card-inner);
  color: var(--text-pure);
  font-size: 13px;
}
.ai-counselor-input-row input:disabled { opacity: 0.5; }
.ai-counselor-input-row button {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--neon-pink);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.ai-counselor-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-counselor-msg.is-typing { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.ai-counselor-msg.is-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: aiCounselorTypingBlink 1.2s infinite ease-in-out;
}
.ai-counselor-msg.is-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-counselor-msg.is-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiCounselorTypingBlink {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  .ai-counselor-panel { left: 12px; right: 12px; width: auto; }
}

/* 안전 중단 뒤 남기는 두 행동(입력 다시 보기·처음으로) */
.love-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.love-result-action { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--border-box-bright); border-radius: var(--radius-pill); color: var(--text-pure); font-size: 15px; font-weight: 700; text-decoration: none; }
.love-result-action:hover { border-color: var(--neon-cyan); }

/* 샘플 화면 — js/components/sample-view.js가 INTRO·PART 2 목업·PART 3을 기본으로 닫힌 접기 안에 둔다 */
.sample-view { margin-top: 12px; border: 1px dashed var(--neon-yellow); border-radius: var(--radius-md); background: rgba(255, 230, 0, 0.05); }
.sample-view > summary { padding: 12px 16px; color: var(--neon-yellow); font-size: 16px; font-weight: 800; cursor: pointer; }
.sample-view[open] > summary { border-bottom: 1px dashed var(--neon-yellow); }
.sample-view-note { margin: 12px 16px 4px; font-size: 15px; color: var(--text-sub); line-height: 1.6; }
.sample-view > :not(summary):not(.sample-view-note) { margin-left: 12px; margin-right: 12px; }

/* 서비스 첫 화면 — 이 서비스가 예측하지 않는 것 */
.hero-scope { margin-top: 8px !important; font-size: 15px; font-weight: 700; color: var(--hero-text); }

/* 숨기면 실제로 사라져야 한다. display를 지정한 요소(grid·flex)는 기본 [hidden]을 덮어 버려서,
   안전 중단으로 감춘 영역에 키보드 초점이 남는다. 그래서 전역으로 못을 박는다. */
[hidden] { display: none !important; }

/* 오늘은 여기까지 — 결과 끝의 마무리 카드(정책 repeat_calculation_closing). 긴급성·카운트다운은 쓰지 않는다. */
.love-closing { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-md); background: rgba(131, 56, 236, .08); }
.love-closing-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--text-pure); }
.love-closing-line { margin: 4px 0; font-size: 15px; color: var(--text-pure); line-height: 1.6; }
.love-closing-note { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* 마이페이지 — 내 일주 풀이 카드 */
.ilju-card { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; border-color: var(--border-box-bright); }
.ilju-card[hidden] { display: none; }
.ilju-card-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-pure); }
.ilju-card-body { display: flex; flex-direction: column; gap: 6px; }
.ilju-card-name { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; color: var(--text-sub); border: 1px solid var(--border-cyan); }
.ilju-card-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-sub); }