/* ============================================ */
/* IVORY + GOLD TONE — Pain to Peace             */
/* 전체 사이트 톤 통일 오버라이드                  */
/* ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400;1,500&family=Noto+Serif+KR:wght@500;600;700&display=swap');

:root {
  --pp-ivory: #F8F4EB;
  --pp-ivory-deep: #EDE5D3;
  --pp-ivory-warm: #F2EBDB;
  --pp-paper: #FBF8F1;
  --pp-gold: #B8924A;
  --pp-gold-soft: #C9A766;
  --pp-gold-deep: #8B6F30;
  --pp-charcoal: #2A2622;
  --pp-charcoal-soft: #4A4640;
  --pp-mute: #807A6E;
  --pp-line: #DCD4C2;
  --pp-line-soft: #E8E1CF;

  /* 기능적 카테고리 컬러 - desaturated to harmonize */
  --pp-blue: #4A7FAA;
  --pp-blue-soft: #7BA5C4;
  --pp-blue-bg: #E3EEF6;
  --pp-red: #8B3A36;
  --pp-red-soft: #B85450;
  --pp-red-bg: #FBF1EF;
  --pp-purple: #4D436F;
  --pp-purple-soft: #6B6098;
  --pp-purple-bg: #F0EEF7;
  --pp-green: #3B6749;
  --pp-green-soft: #5A8A6B;
  --pp-green-bg: #EEF5F0;
}

/* ===== 글로벌 ===== */
html, body {
  background: var(--pp-ivory) !important;
  color: var(--pp-charcoal) !important;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  font-weight: 500 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body { font-size: 16px !important; }

/* ===== 헤더/상단바 ===== */
.header,
.flow-header,
.chat-header,
.topbar,
.snepi-header,
.modal-bar {
  background: linear-gradient(135deg, var(--pp-paper), var(--pp-ivory-warm)) !important;
  border-bottom-color: var(--pp-line) !important;
  border-bottom-width: 1px !important;
}

.header h1 .accent,
.header h1 .app-name,
.snepi-intro .highlight {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}

.header-sub { color: var(--pp-mute) !important; font-weight: 500 !important; }

/* ===== 바디 필터 버튼 ===== */
.body-filter {
  background: var(--pp-paper) !important;
  border-bottom-color: var(--pp-line-soft) !important;
}
.bf-btn {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 600 !important;
}
.bf-btn:hover {
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
  background: var(--pp-ivory-warm) !important;
}
.bf-btn.sel,
.bf-btn[style*="linear-gradient"] {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(184, 146, 74, 0.25) !important;
}

/* ===== 검색 ===== */
#searchInput {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal) !important;
  font-weight: 500 !important;
}
#searchInput::placeholder { color: var(--pp-mute) !important; }
#searchInput:focus {
  border-color: var(--pp-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.15) !important;
  background: #fff !important;
}
.search-wrap svg { fill: var(--pp-gold) !important; }

/* ===== 섹션 라벨 ===== */
.section-label {
  color: var(--pp-gold-deep) !important;
  font-family: 'Cormorant Garamond', serif !important;
  letter-spacing: 0.3em !important;
  font-weight: 600 !important;
}
.section-label::before {
  background: linear-gradient(90deg, var(--pp-gold-deep), var(--pp-gold)) !important;
}

/* ===== 카드 (메인 + 가이드) ===== */
.cond-card,
.snepi-zone-card,
.snepi-map-card,
.card {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line-soft) !important;
  border-radius: 14px !important;
}
.cond-card:hover,
.snepi-zone-card:hover,
.card:hover {
  border-color: var(--pp-gold) !important;
  box-shadow: 0 8px 25px rgba(184, 146, 74, 0.12) !important;
}
.cond-card.msk::before,
.card::before {
  background: linear-gradient(90deg, var(--pp-gold-deep), var(--pp-gold)) !important;
}
.cond-card.nerve::before {
  background: linear-gradient(90deg, var(--pp-blue-soft), var(--pp-blue)) !important;
}

.cc-title, .card h3 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.msk .cc-icon, .card-icon { background: var(--pp-ivory-warm) !important; }
.msk .cc-cat { background: var(--pp-ivory-warm) !important; color: var(--pp-gold-deep) !important; }
.nerve .cc-icon { background: var(--pp-blue-bg) !important; }
.nerve .cc-cat { background: var(--pp-blue-bg) !important; color: var(--pp-blue) !important; }
.cc-mtag,
.card .tag {
  background: var(--pp-ivory-deep) !important;
  color: var(--pp-charcoal-soft) !important;
  border-color: var(--pp-line-soft) !important;
  font-weight: 600 !important;
}
.cc-arrow { color: var(--pp-mute) !important; font-weight: 600 !important; }
.card .sub { color: var(--pp-charcoal-soft) !important; font-weight: 500 !important; line-height: 1.6 !important; }
.card .cta { color: var(--pp-gold-deep) !important; font-weight: 700 !important; }
.card-num { color: var(--pp-mute) !important; font-weight: 700 !important; }

/* ===== 디테일 카드 (플로우) ===== */
.cond-detail {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line) !important;
}
.cond-detail.nerve-detail { border-color: var(--pp-blue-soft) !important; }
.cd-title {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.cd-desc { color: var(--pp-charcoal) !important; font-weight: 500 !important; }
.cd-img-btn {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 600 !important;
}
.cd-img-btn:hover {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
}

/* ===== 플로우 커넥터 ===== */
.conn1-line { background: rgba(184, 146, 74, 0.18) !important; }
.conn1-line::after { background: linear-gradient(180deg, transparent, var(--pp-gold), transparent) !important; }
.conn1-arrow { color: var(--pp-gold-deep) !important; }

.nerve-conn .conn1-line { background: rgba(122, 165, 196, 0.2) !important; }
.nerve-conn .conn1-line::after { background: linear-gradient(180deg, transparent, var(--pp-blue-soft), transparent) !important; }
.nerve-conn .conn1-arrow { color: var(--pp-blue) !important; }

.conn2-line { background: rgba(184, 84, 80, 0.15) !important; }
.conn2-line::after { background: linear-gradient(180deg, transparent, var(--pp-red-soft), transparent) !important; }
.conn2-arrow { color: var(--pp-red) !important; }

.conn3-line { background: rgba(90, 138, 107, 0.15) !important; }
.conn3-line::after { background: linear-gradient(180deg, transparent, var(--pp-green-soft), transparent) !important; }
.conn3-arrow { color: var(--pp-green) !important; }

.fsl-text { color: var(--pp-charcoal) !important; font-weight: 700 !important; }
.fc-label {
  background: #fff !important;
  border-color: var(--pp-line) !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 600 !important;
}

/* 스텝 배경 */
.step2-bg { background: linear-gradient(135deg, var(--pp-red-soft), var(--pp-red)) !important; }
.step3-bg { background: linear-gradient(135deg, var(--pp-purple-soft), var(--pp-purple)) !important; }
.step4-bg { background: linear-gradient(135deg, var(--pp-green-soft), var(--pp-green)) !important; }
.step2-color { color: var(--pp-red) !important; }
.step3-color { color: var(--pp-purple) !important; }
.step4-color { color: var(--pp-green) !important; }

/* 스텝 카드 */
.m-flow-card { border-color: #E8D5D2 !important; background: var(--pp-paper) !important; }
.m-flow-card:hover { background: var(--pp-red-bg) !important; border-color: var(--pp-red-soft) !important; }
.mfc-name { color: var(--pp-red) !important; font-family: 'Noto Serif KR', serif !important; font-weight: 700 !important; }
.mfc-region { background: var(--pp-red-bg) !important; color: var(--pp-red) !important; border-color: #E8D5D2 !important; }
.mfc-symptoms { color: var(--pp-charcoal) !important; font-weight: 500 !important; }
.mfc-view { color: var(--pp-red) !important; font-weight: 700 !important; }

.s-flow-card { border-color: #D5D1E5 !important; background: var(--pp-paper) !important; }
.s-flow-card:hover { background: var(--pp-purple-bg) !important; border-color: var(--pp-purple-soft) !important; }
.sfc-title { color: var(--pp-purple) !important; font-family: 'Noto Serif KR', serif !important; font-weight: 700 !important; }
.sfc-muscles { color: var(--pp-charcoal-soft) !important; font-weight: 500 !important; }

.treat-card { border-color: #C9DDD0 !important; background: var(--pp-paper) !important; }
.treat-row { background: var(--pp-green-bg) !important; border-color: #D5E8DC !important; }
.tr-blue { background: linear-gradient(135deg, var(--pp-blue-soft), var(--pp-blue)) !important; }
.tr-red { background: linear-gradient(135deg, var(--pp-red-soft), var(--pp-red)) !important; }
.tr-green { background: linear-gradient(135deg, var(--pp-green-soft), var(--pp-green)) !important; }
.tr-orange { background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important; }
.tr-text { color: var(--pp-charcoal) !important; font-weight: 500 !important; }
.tr-text b { color: var(--pp-charcoal) !important; font-weight: 700 !important; }
.tr-plan {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-line) !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 500 !important;
}

/* ===== 메커니즘 박스 ===== */
.mech-box {
  background: linear-gradient(135deg, var(--pp-paper), var(--pp-ivory-warm)) !important;
  border-color: var(--pp-gold) !important;
  border-width: 2px !important;
  box-shadow: 0 3px 12px rgba(184, 146, 74, 0.12) !important;
}
.mech-box .mech-text { color: var(--pp-charcoal) !important; font-weight: 500 !important; }
.mech-box .mech-text b,
.mech-box .mech-text .conclusion {
  color: var(--pp-charcoal) !important;
  font-weight: 700 !important;
}
.mech-box .mech-text .kw { color: var(--pp-gold-deep) !important; font-weight: 700 !important; }
.mech-box .mech-text .kw-loc { color: var(--pp-blue) !important; font-weight: 700 !important; }

/* ===== 브랜드 헤더/푸터 ===== */
.brand-header::after,
.brand-footer-inner::before { background: var(--pp-line) !important; }
.brand-header .bh-slogan,
.brand-footer .bf-slogan {
  color: var(--pp-gold-deep) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  letter-spacing: 0.25em !important;
  font-weight: 500 !important;
}
.brand-header .bh-name,
.brand-footer .bf-name {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

/* ===== 챗봇 ===== */
.chat-fab {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  box-shadow: 0 4px 20px rgba(184, 146, 74, 0.35) !important;
}
.chat-fab:hover { box-shadow: 0 6px 28px rgba(184, 146, 74, 0.45) !important; }
.chat-overlay { background: var(--pp-ivory) !important; }
.chat-back {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal-soft) !important;
}
.chat-back:hover {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
}
.chat-header-title {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.chat-header-sub { color: var(--pp-mute) !important; font-weight: 500 !important; }
.chat-msg.bot {
  background: #fff !important;
  color: var(--pp-charcoal) !important;
  border-color: var(--pp-line-soft) !important;
  font-weight: 500 !important;
}
.chat-msg.user {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.chat-input-area {
  background: #fff !important;
  border-top-color: var(--pp-line-soft) !important;
}
.chat-input-area input {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal) !important;
  font-weight: 500 !important;
}
.chat-input-area input:focus {
  border-color: var(--pp-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 146, 74, 0.15) !important;
}
.chat-input-area button {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
}
.chat-quick-btn {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 600 !important;
}
.chat-quick-btn:hover {
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
  background: var(--pp-ivory-warm) !important;
}

/* ===== 플로우 오버레이 ===== */
.flow-overlay,
.snepi-overlay { background: var(--pp-ivory) !important; }
.flow-back, .snepi-back {
  border-color: var(--pp-line) !important;
  background: #fff !important;
  color: var(--pp-charcoal-soft) !important;
}
.flow-back:hover, .snepi-back:hover {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
}
.flow-title, .snepi-title-area h2 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.flow-subtitle, .snepi-title-area p { color: var(--pp-mute) !important; font-weight: 500 !important; }

/* ===== SNEPI 신경지도 ===== */
.snepi-intro {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line) !important;
  border-width: 1px !important;
}
.snepi-intro h3 {
  color: var(--pp-gold-deep) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}
.snepi-intro p {
  color: var(--pp-charcoal) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.snepi-intro p b { color: var(--pp-charcoal) !important; font-weight: 700 !important; }

.snepi-legend {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line-soft) !important;
}
.snepi-leg { color: var(--pp-charcoal) !important; font-weight: 600 !important; }

.snepi-map-card h4 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}

.snepi-zone-card.cervical::before { background: linear-gradient(90deg, var(--pp-blue-soft), var(--pp-blue)) !important; }
.snepi-zone-card.thoracic::before { background: linear-gradient(90deg, var(--pp-green-soft), var(--pp-green)) !important; }
.snepi-zone-card.lumbar::before { background: linear-gradient(90deg, var(--pp-gold-soft), var(--pp-gold-deep)) !important; }
.snepi-zone-card.sacral::before { background: linear-gradient(90deg, var(--pp-red-soft), var(--pp-red)) !important; }

.cervical .szc-badge { background: var(--pp-blue-bg) !important; color: var(--pp-blue) !important; }
.thoracic .szc-badge { background: var(--pp-green-bg) !important; color: var(--pp-green) !important; }
.lumbar .szc-badge { background: var(--pp-ivory-warm) !important; color: var(--pp-gold-deep) !important; }
.sacral .szc-badge { background: var(--pp-red-bg) !important; color: var(--pp-red) !important; }

.szc-title {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.szc-body { color: var(--pp-charcoal) !important; font-weight: 500 !important; font-size: 14.5px !important; }
.szc-body b { color: var(--pp-gold-deep) !important; font-weight: 700 !important; }
.szc-stag {
  background: var(--pp-ivory-deep) !important;
  color: var(--pp-charcoal-soft) !important;
  border-color: var(--pp-line-soft) !important;
  font-weight: 600 !important;
}

.snepi-flow-section {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line) !important;
  border-width: 1px !important;
}
.snepi-flow-section h3 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.sfs-step {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-line) !important;
}
.sfs-step .num {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
}
.sfs-step .label { color: var(--pp-charcoal) !important; font-weight: 700 !important; }
.sfs-step .desc { color: var(--pp-mute) !important; }
.sfs-arrow { color: var(--pp-gold-deep) !important; }

/* 감각 검사 표 */
.snepi-table-wrap {
  background: var(--pp-paper) !important;
  border-color: var(--pp-line) !important;
  border-width: 1px !important;
}
.snepi-table-wrap h3 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.snepi-check-table thead th {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.snepi-check-table tbody td {
  color: var(--pp-charcoal) !important;
  font-weight: 500 !important;
  border-bottom-color: var(--pp-line-soft) !important;
}
.snepi-check-table tbody tr:hover td { background: var(--pp-ivory-warm) !important; }
.snepi-check-table .anchor td { background: var(--pp-ivory-warm) !important; }
.lv-c { background: var(--pp-blue-bg) !important; color: var(--pp-blue) !important; }
.lv-t { background: var(--pp-green-bg) !important; color: var(--pp-green) !important; }
.lv-l { background: var(--pp-ivory-warm) !important; color: var(--pp-gold-deep) !important; }
.lv-s { background: var(--pp-red-bg) !important; color: var(--pp-red) !important; }

/* 핵심 포인트 - 짙은 갈색 → 차콜로 */
.snepi-keypoints {
  background: linear-gradient(135deg, #3D3530, #1F1B17) !important;
}
.snepi-keypoints h3 { color: var(--pp-gold-soft) !important; font-family: 'Noto Serif KR', serif !important; font-weight: 700 !important; }
.skp-card h4 { color: var(--pp-gold-soft) !important; font-family: 'Noto Serif KR', serif !important; font-weight: 700 !important; }

/* ===== 이미지 모달 ===== */
.img-modal-close,
.img-modal-nav { color: var(--pp-charcoal) !important; }

/* ===== 주사가이드 페이지 ===== */
.brand-dot {
  background: linear-gradient(135deg, var(--pp-gold-deep), var(--pp-gold)) !important;
  box-shadow: 0 2px 8px rgba(184, 146, 74, 0.25) !important;
}
.brand-text small {
  color: var(--pp-gold-deep) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}
.brand-text strong {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.back-link {
  border-color: var(--pp-line) !important;
  color: var(--pp-charcoal-soft) !important;
  font-weight: 600 !important;
  background: #fff !important;
}
.back-link:hover { color: var(--pp-gold-deep) !important; border-color: var(--pp-gold) !important; }

.eyebrow {
  color: var(--pp-gold-deep) !important;
  background: var(--pp-ivory-warm) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
}

.hero h1 {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.hero h1 em {
  color: var(--pp-gold-deep) !important;
  font-style: normal !important;
}
.hero h1 em::after {
  background: rgba(184, 146, 74, 0.18) !important;
}
.hero p {
  color: var(--pp-charcoal) !important;
  font-weight: 500 !important;
  font-size: 16.5px !important;
}

.modal-title {
  color: var(--pp-charcoal) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-weight: 700 !important;
}
.modal-title .badge {
  background: var(--pp-gold-deep) !important;
  font-family: 'Cormorant Garamond', serif !important;
}
.modal-btn {
  background: #fff !important;
  border-color: var(--pp-line) !important;
  color: var(--pp-charcoal-soft) !important;
}
.modal-btn:hover {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
}
.modal { background: var(--pp-ivory) !important; }
.modal-body { background: var(--pp-ivory) !important; }
.modal-nav {
  background: var(--pp-ivory) !important;
  border-top-color: var(--pp-line-soft) !important;
}
.nav-btn {
  background: #fff !important;
  border-color: var(--pp-line) !important;
  color: var(--pp-charcoal) !important;
  font-weight: 600 !important;
}
.nav-btn:hover:not(:disabled) {
  background: var(--pp-ivory-warm) !important;
  border-color: var(--pp-gold) !important;
  color: var(--pp-gold-deep) !important;
}
.zoom-hint {
  background: var(--pp-ivory) !important;
  color: var(--pp-mute) !important;
  font-weight: 500 !important;
}
.foot {
  background: var(--pp-ivory) !important;
  color: var(--pp-mute) !important;
  border-top-color: var(--pp-line-soft) !important;
}
.foot strong { color: var(--pp-charcoal-soft) !important; }

/* ===== 폰트 크기 보정 (가독성) ===== */
.cc-title { font-size: 17px !important; }
.cd-title { font-size: 24px !important; }
.cd-desc { font-size: 16px !important; line-height: 1.75 !important; }
.cc-mtag { font-size: 12.5px !important; padding: 4px 11px !important; }