/* ==========================================================================
   DAY / NIGHT THEME — 공용 토글과 펄 라이트 반전 보정
   다크는 기존 CSS를 정본으로 유지하고, 라이트에서만 하드코딩 표면을 교정한다.
   ========================================================================== */

.theme-switch {
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  border: 1px solid var(--border-box-bright);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-pure);
  font: 800 12px/1 var(--font-main);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.theme-switch:hover {
  transform: translateY(-1px);
  border-color: var(--neon-pink);
  box-shadow: var(--glow-pink);
}
.theme-switch:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--neon-cyan) 36%, transparent);
  outline-offset: 2px;
}
.theme-switch__icon { font-size: 16px; line-height: 1; }

html[data-theme="light"] .theme-switch {
  background: #35203e;
  border-color: #35203e;
  color: #ffffff;
  box-shadow: 0 7px 20px rgba(53, 32, 62, 0.18);
}

html[data-theme="light"] body {
  /* 배경·글자는 transition이 걸려 있다. 변수만 바꾸면 지정값이 그대로라 밤색에 남으므로, 낮에는 색을 직접 지정한다. */
  background-color: #fbf8fc;
  color: #28152f;
  background-image:
    radial-gradient(circle at 8% 5%, rgba(165, 29, 112, 0.07), transparent 28%),
    radial-gradient(circle at 92% 28%, rgba(96, 53, 165, 0.07), transparent 30%);
}
html[data-theme="light"] .ambient-glow { opacity: 0.08; }

/* 공개 상단 메뉴는 낮 토글에서도 밤 표면을 유지한다. 토큰을 여기서 밤 값으로 고정해
   라이트 전역 잉크가 메뉴 글자·뱃지·서랍을 밝게 뒤집지 않게 한다. */
html[data-theme="light"] .top-nav-integrated {
  --text-pure: #ffffff;
  --text-sub: #dccae9;
  --text-muted: #9c88b8;
  --text-on-neon: #ffffff;
  --text-on-cyan: #000000;
  --neon-pink: #cb23a2;
  --neon-hotpink: #b8156c;
  --neon-purple: #8338ec;
  --neon-cyan: #00e5ff;
  --neon-yellow: #ffe600;
  --neon-lime: #00ffa3;
  --pink-ink: #e25cc0;
  --purple-ink: #b38cff;
  --border-pink: #d240b3;
  --border-box-purple: #4a1b6d;
  --border-box-bright: #662d8c;
  --bg-nav: #070220;
  --bg-nav-pill: rgba(14, 6, 42, 0.75);
  --shadow-card: rgba(0, 0, 0, 0.65);
  --glow-pink: 0 0 20px rgba(203, 35, 162, 0.5);
  background: #070220;
  border-bottom-color: rgba(255, 77, 255, 0.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffffff;
}
html[data-theme="light"] .mobile-nav-drawer {
  background: #080316;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .top-nav-integrated .theme-switch {
  background: rgba(255, 255, 255, 0.06);
  border-color: #662d8c;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
html[data-theme="light"] .sidebar-logo-img,
html[data-theme="light"] .footer-brand-logo img {
  filter: none;
}

html[data-theme="light"] .fullwidth-section-wrap,
html[data-theme="light"] .site-footer { color: var(--text-pure); }
html[data-theme="light"] .analysis-dashboard-section,
html[data-theme="light"] .products-section,
html[data-theme="light"] .goods-section,
html[data-theme="light"] .salon-preview-section,
html[data-theme="light"] .trust-section,
html[data-theme="light"] .reminder-section,
html[data-theme="light"] .panel,
html[data-theme="light"] .salon-card {
  box-shadow: 0 16px 42px var(--shadow-box);
}
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .mini-insight-card,
html[data-theme="light"] .community-post-card,
html[data-theme="light"] .choice-split-card {
  background-color: var(--bg-card);
}
html[data-theme="light"] .choice-split-card.is-recommend .cs-body { color: var(--text-pure); }

/* 라이트에서는 반투명 유리층을 불투명 카드로 바꿔 뒤 배경이 글자를 흐리지 않게 한다. */
html[data-theme="light"] .analysis-dashboard-section,
html[data-theme="light"] .products-section,
html[data-theme="light"] .goods-section,
html[data-theme="light"] .salon-preview-section,
html[data-theme="light"] .trust-section,
html[data-theme="light"] .reminder-section,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .bottom-quick-bar {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .bottom-quick-bar { border-top-color: #d7c5df; }

/* 공개 서브페이지 공통 제목·푸터·모달 */
html[data-theme="light"] .subpage-hero .page-main-title,
html[data-theme="light"] .page-main-title { color: var(--text-pure) !important; }
html[data-theme="light"] .subpage-hero .page-sub-title,
html[data-theme="light"] .page-sub-title { color: var(--text-sub) !important; }
html[data-theme="light"] .page-badge-pill { background: #f6e8f1; border-color: #d9a9c5; }
html[data-theme="light"] .footer-section {
  background: #f6f0f8;
  border-top-color: #d7c5df;
  box-shadow: none;
}
html[data-theme="light"] .footer-top-grid { border-bottom-color: #ddcfe3; }
html[data-theme="light"] .footer-trust-tags .trust-badge { background: #ffffff; }
html[data-theme="light"] .cyber-modal-backdrop { background: rgba(45, 18, 54, 0.42); }
html[data-theme="light"] .cyber-modal-box {
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(45, 18, 54, 0.18);
}

/* 리포트 데크는 내용 구조를 유지하되 어두운 유리판을 펄 카드로 반전한다. */
html[data-theme="light"] .deck-headline {
  background:
    radial-gradient(circle at 88% 20%, rgba(96, 53, 165, 0.1), transparent 34%),
    linear-gradient(135deg, #fff7fb, #f2ebf7);
}
html[data-theme="light"] .deck-headline-value,
html[data-theme="light"] .deck-module {
  background: #ffffff;
}
html[data-theme="light"] .deck-headline-value strong { text-shadow: none; }

/* 독립 페이지에서 남아 있는 대표적인 다크 고정 표면을 토큰 표면으로 통일한다. */
html[data-theme="light"] .report-shell,
html[data-theme="light"] .reveal-stage,
html[data-theme="light"] .offer-card,
html[data-theme="light"] .store-card,
html[data-theme="light"] .space-card,
html[data-theme="light"] .mypage-card {
  background: var(--bg-card);
  box-shadow: 0 12px 30px var(--shadow-card);
}

/* 밝은 바탕에서 핑크/보라/청록/금색은 발광 대신 잉크처럼 읽히게 한다. */
html[data-theme="light"] .text-gradient-pink:not(.hero-headline *) {
  background-image: linear-gradient(135deg, #8f195f 0%, #6035a5 100%);
}

/* 관리자: 데이터 밀도가 높은 표/패널의 경계와 행 구분을 강화한다. */
html[data-theme="light"] body.admin-shell { background-color: #fbf8fc; }
html[data-theme="light"] .s1-ok {
  background: rgba(8, 116, 73, 0.12);
  color: #0b7a62;
  border-color: rgba(8, 116, 73, 0.28);
}
html[data-theme="light"] .s1-hold {
  background: rgba(118, 85, 0, 0.12);
  color: #7a5200;
  border-color: rgba(118, 85, 0, 0.28);
}
html[data-theme="light"] .s1-off {
  background: rgba(165, 29, 112, 0.1);
  color: #982166;
  border-color: rgba(165, 29, 112, 0.22);
}
html[data-theme="light"] .s1-info {
  background: rgba(96, 53, 165, 0.08);
  color: #57308f;
  border-color: rgba(96, 53, 165, 0.18);
}
html[data-theme="light"] .s1-todo {
  background: rgba(96, 53, 165, 0.12);
  color: #4b277c;
  border-color: rgba(96, 53, 165, 0.22);
}
html[data-theme="light"] .s1-free {
  background: rgba(8, 116, 73, 0.1);
  color: #0b7a62;
  border-color: rgba(8, 116, 73, 0.22);
}
html[data-theme="light"] .s1-paid {
  background: rgba(96, 53, 165, 0.1);
  color: #57308f;
  border-color: rgba(96, 53, 165, 0.22);
}
html[data-theme="light"] .s1-group-axes {
  background: rgba(96, 53, 165, 0.04);
  border-color: rgba(96, 53, 165, 0.16);
}
/* 선반 테두리는 끌어 놓을 때만 보인다(평소 투명) */
html[data-theme="light"] .s1-compose-palette { background: rgba(96, 53, 165, 0.04); }
html[data-theme="light"] .s1-compose-palette.is-dragover { border-color: #0b7a8a; background: rgba(11, 122, 138, 0.06); }
html[data-theme="light"] .s1-chip {
  background: rgba(96, 53, 165, 0.07);
  color: #4a3558;
}
html[data-theme="light"] .s1-shelf-note { color: #7a5200; }
html[data-theme="light"] .s1-shelf-note.is-ok { color: #0b7a62; }
html[data-theme="light"] .btn-danger {
  background: rgba(165, 29, 112, 0.08);
  color: #982166;
  border-color: rgba(165, 29, 112, 0.28);
}
html[data-theme="light"] .btn-danger:hover { background: rgba(165, 29, 112, 0.16); color: #7a1350; }
html[data-theme="light"] .s1-report-banner {
  background: rgba(118, 85, 0, 0.08);
  border-color: rgba(118, 85, 0, 0.22);
  color: #5c4308;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .kpi-item { background: rgba(255, 255, 255, 0.94); }
html[data-theme="light"] .panel-header { border-bottom-color: rgba(96, 53, 165, 0.18); }
html[data-theme="light"] .admin-table th {
  background: #f1e8f4;
  color: #594462;
}
html[data-theme="light"] .admin-table td { border-bottom-color: #e5d8e8; }
html[data-theme="light"] .admin-table tr:hover td {
  background: #f8f1fa;
  color: var(--text-pure);
}
html[data-theme="light"] .nav-item:hover { background: rgba(96, 53, 165, 0.09); }
html[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg, rgba(165, 29, 112, 0.13), rgba(96, 53, 165, 0.1));
}
html[data-theme="light"] .btn-secondary { background: #f4edf6; }
html[data-theme="light"] .btn-secondary:hover { background: #eadfed; }
html[data-theme="light"] .tag-purple { background: rgba(96, 53, 165, 0.12); color: #57308f; }
html[data-theme="light"] .tag-warn { background: rgba(118, 85, 0, 0.12); }
html[data-theme="light"] .tag-success { background: rgba(8, 116, 73, 0.11); }
html[data-theme="light"] .waffle-cell { background: #e9ddeb; }
html[data-theme="light"] .pm-jijang { color: #4d579a; }
html[data-theme="light"] .pm-ten { color: #982166; }
html[data-theme="light"] .toast-msg { background: rgba(255, 255, 255, 0.97); }
html[data-theme="light"] .sidebar-backdrop,
html[data-theme="light"] .drawer-backdrop,
html[data-theme="light"] .admin-dialog-backdrop { background: rgba(45, 18, 54, 0.52); }
html[data-theme="light"] .admin-login-overlay {
  background: radial-gradient(circle at 50% 24%, rgba(165, 29, 112, 0.1), rgba(251, 248, 252, 0.96) 68%);
}
.admin-login-theme-switch {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 1;
}

/* admin.html의 오래된 인라인 다크 색도 라이트에서만 의미 토큰으로 치환한다. */
html[data-theme="light"] .admin-shell [style*="color:#fff"],
html[data-theme="light"] .admin-shell [style*="color: #fff"] { color: var(--text-pure) !important; }
html[data-theme="light"] .admin-shell [style*="color:#b8a7d4"],
html[data-theme="light"] .admin-shell [style*="color: #b8a7d4"] { color: var(--text-muted) !important; }
html[data-theme="light"] .admin-shell [style*="color:#f0e6fa"],
html[data-theme="light"] .admin-shell [style*="color: #f0e6fa"] { color: var(--text-sub) !important; }
html[data-theme="light"] .admin-shell [style*="color:#c499ff"],
html[data-theme="light"] .admin-shell [style*="color: #c499ff"] { color: var(--purple-ink) !important; }
html[data-theme="light"] .admin-shell [style*="color:#a5b4fc"],
html[data-theme="light"] .admin-shell [style*="color: #a5b4fc"] { color: #4d579a !important; }
html[data-theme="light"] .admin-shell [style*="background:rgba(16,7,43,0.8)"],
html[data-theme="light"] .admin-shell [style*="background: rgba(16,7,43,0.8)"] { background: var(--bg-card) !important; }
html[data-theme="light"] .admin-shell [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] .admin-shell [style*="background:rgba(0,0,0,0.35)"] { background: var(--bg-card-inner) !important; }

@media (max-width: 620px) {
  .theme-switch { width: 36px; min-width: 36px; height: 34px; padding: 0; }
  .theme-switch__label { display: none; }
  .admin-login-theme-switch { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch { transition: none; }
}

/* 낮 히어로 — 글자가 앉는 왼쪽 덮개는 유지한다.
   계기판은 히어로 그림이 비치는 얇은 유리이고, 글자·눈금은 그 밝은 유리에서 읽히는 잉크다.
   상단 메뉴는 모드와 상관없이 밤색 불투명이다. */
html[data-theme="light"] .sub-hero {
  background-color: #fbf8fc;
}
html[data-theme="light"] .sub-hero::before,
html[data-theme="light"] .pp-hero::before {
  background: linear-gradient(95deg,
    rgba(251, 248, 252, .97) 0%,
    rgba(251, 248, 252, .92) 40%,
    rgba(251, 248, 252, .62) 50%,
    rgba(251, 248, 252, .22) 56%,
    rgba(251, 248, 252, 0) 62%);
}
html[data-theme="light"] .pp-hero .pp-title { color: #28152f; }
html[data-theme="light"] .pp-hero .pp-title em {
  color: #a51d70;
  text-shadow: none;
}
html[data-theme="light"] .hm-hero .hm-title em {
  color: color-mix(in srgb, var(--pp-ch) 62%, #1a1020);
  text-shadow: none;
}
html[data-theme="light"] .sub-hero .emoji-chip {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(40, 21, 47, 0.16);
  color: #28152f;
  text-shadow: none;
}
html[data-theme="light"] .sub-hero .emoji-chip:hover {
  background: #ffffff;
  border-color: #a51d70;
  color: #28152f;
}
html[data-theme="light"] .hm-hero .hm-ch {
  border-color: rgba(40, 21, 47, 0.16);
  background-color: rgba(255, 255, 255, 0.88);
  color: #28152f;
}
html[data-theme="light"] .hm-hero .hm-ch:hover {
  background-color: #ffffff;
  color: #28152f;
}
html[data-theme="light"] .hm-hero .hm-ch:focus-visible { outline-color: #28152f; }
html[data-theme="light"] .hm-hero .hm-ch[aria-pressed="true"] {
  background-color: var(--c);
  border-color: var(--c);
  color: #12031f;
}
html[data-theme="light"] .hm-hero .hm-ch[aria-pressed="true"] i {
  background: #12031f;
  box-shadow: none;
}
html[data-theme="light"] .pp-monitor {
  /* 유리 자체는 비우고, 서리는 아래 가상 요소에만 둔다. 띠 전체를 가리면 캔버스까지 흐려진다. */
  background: transparent;
  border-block-color: transparent;
  isolation: isolate;
  --neon-cyan: #006f82;
  --neon-lime: #087449;
  --neon-pink: #a51d70;
  --text-pure: #28152f;
}
html[data-theme="light"] .pp-monitor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px) saturate(1.12);
  backdrop-filter: blur(8px) saturate(1.12);
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 서리의 backdrop-filter는 z-index가 auto인 캔버스보다 위에 쌓인다. 그래프는 유리 위, 숫자는 그 위. */
html[data-theme="light"] .pp-monitor canvas { z-index: 1; }
html[data-theme="light"] .pp-monitor .pp-readout {
  z-index: 2;
  text-shadow: none;
  padding: 4px 10px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}
@media (max-width: 599px) {
  html[data-theme="light"] .pp-monitor .pp-readout {
    left: auto;
    width: max-content;
    max-width: calc(100% - 36px);
  }
}
html[data-theme="light"] .pp-monitor .pp-readout-note { color: rgba(40, 21, 47, 0.62); }
html[data-theme="light"] .pp-monitor .pp-readout-num i { color: #a51d70; text-shadow: none; }
html[data-theme="light"] .hm-hero .pp-readout,
html[data-theme="light"] .hm-hero .pp-readout-num i {
  color: color-mix(in srgb, var(--pp-ch) 58%, #1a1020);
  text-shadow: none;
}
html[data-theme="light"] .hm-screen {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(40, 21, 47, 0.08);
}
html[data-theme="light"] .hm-ch-no {
  color: color-mix(in srgb, var(--c) 62%, #1a1020);
  text-shadow: none;
}
/* 낱장 타일은 그래프 속 어두운 조각이다. 글자는 타일 위에서 밝게 둔다. */
html[data-theme="light"] .pp-monitor .hb-board-len .hb-flap,
html[data-theme="light"] .pp-monitor .hb-board-day .hb-flap { color: #00e5ff; }
@media (max-width: 900px) {
  html[data-theme="light"] .sub-hero::before,
  html[data-theme="light"] .pp-hero::before {
    /* 위는 제목용으로 조금 더 덮고, 아래 그래프 쪽으로 갈수록 그림이 남는다. */
    background: linear-gradient(180deg,
      rgba(251, 248, 252, .84) 0%,
      rgba(251, 248, 252, .58) 34%,
      rgba(251, 248, 252, .24) 66%,
      rgba(251, 248, 252, 0) 100%);
  }
}

/* 고객 본문 정렬 정본: 설명·해석·사연은 양쪽 정렬, 마지막 줄은 자연스럽게 시작한다.
   제목·슬로건·주제 라벨·버튼·표/차트 수치는 선택하지 않는다. 관리자 편집 화면은 제외한다. */
body:not(.admin-shell) :is(
  .prose, .pm-desc, .pm-sentence-text, .pm-vs-text, .pm-curve-text,
  .pp-lead, .pp-cuts-lead, .pp-input-desc, .pp-bubble-text, .pp-voices-note,
  .pp-cut > p:not(.pp-cut-tag), .pm-path > p,
  .hm-desc, .hm-card-body p:not(.hm-card-tag), .hm-proof-note,
  .sec-lead, .fc-desc, .addon-desc, .goods-lead, .review-text,
  .remind-msg-desc, .remind-sub-desc, .stage-now-desc,
  .post-snippet, p.sc-body, .salon-reply, .salon-full p, .salon-guide, .salon-cta-copy,
  .faq-item > p, .rpage-empty > p:not(.rpage-links),
  .hb-hours-note, #my-orbit-lead, #my-salon-note,
  .salon-dlg-body, .salon-reply-body, .salon-recent-body,
  .salon-ai-state-copy, .salon-ai-poll-note, .salon-rule,
  .saju-notice-body, .cyber-modal-body p, .cyber-modal-body li,
  .rb-body, .rp-desc, .rp-compare p, .rp-tips li, .cs-body,
  .report-limits-box p, .report-limits-box li, .rg-cell p,
  .deck-desc, .deck-headline-summary, .deck-takeaway, .deck-disclaimer, .deck-risk li,
  .rp-headline, .rp-headline-sub, .rp-checkpoint span, .signal-cue .sc-read, .ilju-card-text,
  .love-result-text, .love-result-note, .love-result-list li,
  .love-closing-line, .love-closing-note, .rpage-foot, #rpIntro,
  .ai-counselor-msg, .welcome-lead, .welcome-hint,
  .plan-desc, .disclaimer, .pr-note, .pr-share-note,
  #payFailNote, .pay-page .page-sub-title
) {
  text-align: justify;
  text-align-last: start;
  text-justify: inter-word;
}