/* ============================================================
   꿈 해몽기 — 정적 콘텐츠 쪽 스타일
   ------------------------------------------------------------
   색·서체는 style.css 가 정의한 테마 변수만 쓴다.
   그래야 아침/밤 전환이 이 쪽들에도 그대로 따라온다.
   🔴 색을 변수 밖에 직접 박지 말 것 (CLAUDE.md 4절).

   출처 등급 색은 §3-3 그대로: wide 초록 · varies 호박 · modern 파랑
   ============================================================ */

body.pg{ line-height:1.85; }
body.pg .wrap{ max-width:760px; margin:0 auto; padding:0 18px 72px; }

/* 머리 */
.pg-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 14px; border-bottom:1px solid var(--line); margin-bottom:16px;
}
.pg-head .brand{
  font-family:var(--serif); font-weight:800; font-size:19px;
  color:var(--title-2); text-decoration:none; letter-spacing:.02em;
}
.pg-head .brand:hover{ text-decoration:underline; }

.crumb{ font-size:12.5px; color:var(--ink-3); margin-bottom:22px; }
.crumb a{ color:var(--ink-3); }

/* 표제 */
body.pg h1{
  font-family:var(--serif); font-size:31px; font-weight:800;
  color:var(--title-1); letter-spacing:-.01em; line-height:1.35; margin-bottom:6px;
}
body.pg h1 .cnt{
  display:inline-block; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ink-3); letter-spacing:0; vertical-align:middle; margin-left:8px;
}
body.pg h2{
  font-family:var(--serif); font-size:23px; font-weight:800; color:var(--title-1);
  margin:34px 0 10px; padding-top:10px;
}
body.pg h2 a{ color:inherit; }
body.pg h2 .cnt{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-3); margin-left:6px; }
body.pg h3{
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--gold-b); margin:18px 0 5px;
}
body.pg p{ margin:0 0 11px; color:var(--ink-2); font-size:15.5px; }

.lead{
  font-size:16px; color:var(--ink-2); margin:14px 0 24px; padding:16px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}

/* 목차 */
.toc{
  font-size:14px; line-height:2.2; margin:0 0 26px; padding:14px 16px;
  background:var(--sunken); border-radius:12px; color:var(--ink-3);
}
.toc b{ display:inline-block; color:var(--ink-2); font-size:12.5px; letter-spacing:.06em; margin-bottom:4px; }
.toc a{
  display:inline-block; padding:2px 9px; margin:2px 2px 2px 0; border-radius:999px;
  background:var(--card-2); border:1px solid var(--hairline);
  color:var(--ink-2); text-decoration:none; font-size:13.5px;
}
.toc a:hover{ border-color:var(--gold); color:var(--gold-b); }

/* 상징 한 덩어리 */
.sym-sec{
  padding:22px 0 18px; border-top:1px solid var(--hairline); scroll-margin-top:16px;
}
.sym-sec h2{ margin-top:0; }
.badges{ margin:2px 0 8px; }
.badge{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 10px; border-radius:999px; margin:0 5px 4px 0;
  border:1px solid currentColor;
}
.badge.wide  { color:var(--h-green-i); }
.badge.varies{ color:var(--h-amber-i); }
.badge.modern{ color:var(--h-blue-i); }
.badge.tm    { color:var(--h-rose-i); }
.badge.cat   { color:var(--ink-3); }
.badge.psy   { color:var(--h-violet-i); }
.badge.who   { color:var(--ink-3); }

.note{ font-size:13px; color:var(--ink-3); margin-bottom:12px; }
.fine{ font-size:12.5px; color:var(--ink-3); }

.alias{ font-size:13.5px; color:var(--ink-3); margin:14px 0 6px; }
.alias b{ display:block; font-size:12px; letter-spacing:.06em; margin-bottom:5px; color:var(--ink-3); }
.alias code{
  display:inline-block; font-family:var(--sans); font-size:12.5px;
  padding:2px 8px; margin:2px 3px 2px 0; border-radius:6px;
  background:var(--sunken); color:var(--ink-2);
}

.alt{
  padding:12px 14px; border-radius:10px; background:var(--sunken);
  border-left:3px solid var(--h-amber); font-size:15px;
}
.adv{
  padding:11px 14px; border-radius:10px; background:var(--card);
  border:1px solid var(--line); font-size:15px;
}
.adv b{ color:var(--gold-b); font-size:12px; letter-spacing:.06em; margin-right:7px; }
.meta{ font-size:13px; color:var(--ink-3); }
.meta b{ color:var(--ink-2); }
.rel{ font-size:14px; }
.rel b{ display:block; font-size:12px; letter-spacing:.06em; color:var(--ink-3); margin-bottom:4px; }
.uptop{ font-size:12.5px; margin-top:10px; }
.uptop a{ color:var(--ink-3); text-decoration:none; }

/* 조합 */
.combo{
  padding:16px 0 12px; border-top:1px solid var(--hairline); scroll-margin-top:16px;
}
.combo h3{
  font-family:var(--serif); font-size:19px; font-weight:800;
  color:var(--title-1); letter-spacing:0; margin:0 0 6px;
}
.cond{
  font-size:13.5px; color:var(--ink-3); padding:8px 12px; border-radius:8px;
  background:var(--sunken); margin-bottom:9px;
}

/* 색인 */
.idx-sec{ padding:16px 0; border-top:1px solid var(--hairline); }
.idx-lead{ font-size:13.5px; color:var(--ink-3); margin-bottom:8px; }
.idx-list{ font-size:14.5px; line-height:2.1; }
.idx-list a{ white-space:nowrap; }

/* 보조 단락 */
.more{
  margin-top:34px; padding:18px 20px; border-radius:14px;
  background:var(--card); border:1px solid var(--line);
}
.more h2{ margin-top:0; font-size:19px; }
.catnav a, .pg-nav a{
  display:inline-block; padding:7px 14px; margin:4px 6px 4px 0; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line);
  color:var(--ink-2); text-decoration:none; font-size:14px;
}
.catnav a:hover, .pg-nav a:hover{ border-color:var(--gold); color:var(--gold-b); }

.pg-nav{
  margin:38px 0 0; padding-top:20px; border-top:1px solid var(--line); text-align:center;
}
.home-nav{ margin:22px 0 0; padding-top:18px; }

.pg-foot{ margin-top:26px; text-align:center; }
.pg-foot .disc{
  font-size:12.5px; color:var(--ink-3); line-height:1.9; text-align:left;
  padding:14px 16px; border-radius:12px; background:var(--sunken);
}
.pg-foot .fine{ margin-top:12px; }

/* 본문 링크 */
body.pg a{ color:var(--gold-b); }
body.pg .sym-sec a, body.pg .idx-list a, body.pg .rel a{ text-decoration:none; }
body.pg .sym-sec a:hover, body.pg .idx-list a:hover, body.pg .rel a:hover{ text-decoration:underline; }

@media (max-width:520px){
  body.pg h1{ font-size:26px; }
  body.pg h2{ font-size:20px; }
  body.pg p{ font-size:15px; }
  .lead{ padding:14px 15px; font-size:15px; }
  .more{ padding:15px 16px; }
}

/* ── 낱쪽 전용 (2단계 증보) ── */

/* 맥락별로 갈리는 해석 — 조건과 풀이를 시각적으로 붙여 둔다 */
.ctxrow{
  padding:13px 15px; margin-bottom:9px; border-radius:10px;
  background:var(--sunken); border-left:3px solid var(--gold);
}
.ctxrow b{
  display:block; font-size:14px; color:var(--gold-b);
  letter-spacing:.01em; margin-bottom:4px;
}
.ctxrow p{ margin:0; font-size:14.5px; }

/* 꿈 예문 — 사용자가 실제로 적을 법한 문장을 보여준다 */
.exrow{
  padding:14px 16px; margin-bottom:10px; border-radius:12px;
  background:var(--card); border:1px solid var(--line);
}
.exrow .q{
  font-family:var(--serif); font-size:15.5px; color:var(--title-1);
  margin-bottom:7px; padding-left:16px; position:relative;
}
.exrow .q::before{
  content:"“"; position:absolute; left:0; top:-2px;
  color:var(--gold); font-size:20px; line-height:1;
}
.exrow p:last-child{ margin:0; font-size:14.5px; }

/* 묶음 쪽에서 낱쪽으로 보내는 길 */
.deeper{ margin:12px 0 4px; }
.deeper a{
  display:inline-block; padding:7px 15px; border-radius:999px;
  background:var(--gold-dim); border:1px solid var(--gold);
  color:var(--gold-b); text-decoration:none; font-size:13.5px; font-weight:700;
}
.deeper a:hover{ background:var(--card-2); }

@media (max-width:520px){
  .ctxrow, .exrow{ padding:12px 13px; }
  .exrow .q{ font-size:15px; }
}

/* 사전 항목(전승 정리)과 이 사이트의 부연을 목소리로 구분한다.
   앞은 사전 문체, 뒤는 독자에게 건네는 문체라 어투가 다르다.
   블록으로 나누면 그 차이가 의도된 것으로 읽힌다. */
.expand{
  margin:14px 0 4px; padding:14px 16px; border-radius:12px;
  background:var(--card); border:1px solid var(--line);
}
.expand > b{
  display:block; font-size:11.5px; letter-spacing:.08em;
  color:var(--gold-b); margin-bottom:6px;
}
.expand p{ margin:0; font-size:15px; }

/* ── 머리글의 해몽이 ─────────────────────────────────────
   SVG 는 index.html 에서 그대로 가져온다. 색과 표정 규칙은
   style.css 에 이미 있으므로 크기만 여기서 줄인다.
   머리글에서는 둥실거림·그림자·반짝임을 끈다 — 읽는 데 방해가 된다. */
.pg-head .brand{display:flex; align-items:center; gap:9px}
.pg-head .brand-char{width:52px; height:53px; margin:0; cursor:inherit; flex:0 0 auto}
.pg-head .brand-char svg{width:52px; height:53px; overflow:hidden}
.pg-head .brand-char .hm-body{animation:none}
.pg-head .brand-char .hm-shadow,
.pg-head .brand-char .sparks{display:none}

/* ── 배포된 홈의 캐릭터 사진 ─────────────────────────────
   흰 배경을 지운 투명 컷아웃이라 앱 그라데이션 위에 그대로 뜬다.
   원형 메달이 아니다 — 배경이 단색이 된 뒤로는 오려내는 편이 낫다.
   ⚠️ 낱쪽·단일 파일은 여전히 SVG 다. 여기만 사진이다. */
.haemong-photo{
  height:156px; margin:0 auto 2px; line-height:0; text-align:center;
  animation:bob 3.6s ease-in-out infinite;
}
.haemong-photo img{
  height:156px; width:auto; display:inline-block;
  filter:drop-shadow(0 10px 16px var(--char-shadow));
  transition:opacity .25s;
}
@media (prefers-reduced-motion:reduce){ .haemong-photo{animation:none} }
@media (max-width:520px){
  .haemong-photo, .haemong-photo img{ height:126px }
}