/* ============================================================
   꿈 해몽기 — 스타일
   디자인 방향: 밤하늘의 깊이 + 전통 문서의 격식
   · 배경  깊은 남보라 그라데이션 (꿈 = 밤)
   · 강조  금빛 (전통·신뢰)
   · 제목  명조 세리프 / 본문 고딕  → 격식과 가독성 분리
   ============================================================ */

/* ── 아침 테마 (기본) ───────────────────────────────────
   이 앱은 "간밤의 꿈"을 푸는 도구라 실제로는 아침에 열린다.
   그래서 밝은 화면을 기본으로 두고, 밤 테마를 선택지로 남긴다.
   색은 전부 변수로만 쓴다 — 값을 직접 박으면 테마가 안 바뀐다. */
:root{
  --bg-0:#f6f1e7; --bg-1:#fffdf7; --bg-2:#efe9f4;
  --ink:#20233a; --ink-2:#464b66; --ink-3:#63697f;   /* ink-3 을 낮춰 소형 라벨 대비 확보 */
  --gold:#a8863c; --gold-b:#7a5c1c; --gold-orn:#dfb54e;
  --gold-dim:rgba(168,134,60,.24);
  --line:rgba(168,134,60,.26);
  --card:rgba(255,255,255,.72);
  --card-2:#fffefa;
  --sunken:rgba(120,105,75,.07);
  --hairline:rgba(60,50,30,.10);
  --track:rgba(60,50,30,.10);
  --shadow:0 4px 20px rgba(95,78,45,.10);
  --shadow-s:0 2px 8px rgba(95,78,45,.12);
  --ad-line:rgba(95,78,45,.20);
  --ad-ink:rgba(95,78,45,.30);
  --toast-bg:rgba(255,253,246,.98);
  --star-op:0;
  --char-1:#ffe49a; --char-2:#ffb64d; --char-face:#6b4410;
  --char-blush:rgba(255,124,104,.55); --char-gloss:rgba(255,255,255,.55);
  --char-shadow:rgba(150,110,50,.16); --spark:#ffbe3d;
  /* 해몽이 — 뿔·정수리털·귀·책 (아침) */
  --char-horn:#a97a3e; --char-tuft:#8d6230; --char-ear:#f3bd66;
  /* 입체감용 : 가장자리 어두운 톤 · 주둥이 밝은 톤 */
  --char-3:#e09a2e; --char-lite:#ffeec2; --char-inner:#e8a86a;
  --book-1:#f2f6ff; --book-2:#c3d2ef; --book-ink:#8ea0c4;
  --title-1:#241f3a; --title-2:#8a5a12;
  --btn-ink:#1b2150; --btn-emboss:rgba(255,255,255,.52);   /* 금색 위 남색 글자 */

  /* 색은 장식이 아니라 분류다.
     상징 갈래·영향 영역·꿈 유형마다 고유 색을 줘서
     화면이 다채로워지는 동시에 정보가 더 빨리 읽히게 한다.
     -l 은 밝은 짝(막대 그라데이션), -i 는 글자용(대비 확보). */
  --h-coral:#f0785a;  --h-coral-l:#ffab92; --h-coral-i:#b8442a;
  --h-green:#3fb583;  --h-green-l:#8adcb9; --h-green-i:#1d7a53;
  --h-violet:#8f77e0; --h-violet-l:#c3b3f5; --h-violet-i:#5b43a8;
  --h-blue:#4a8fe7;   --h-blue-l:#9cc4f5;  --h-blue-i:#215f9f;
  --h-amber:#e8a33d;  --h-amber-l:#f8cf8c; --h-amber-i:#95610f;
  --h-rose:#ec6f8c;   --h-rose-l:#f8adc0;  --h-rose-i:#b03354;
  --h-teal:#2fb3c4;   --h-teal-l:#8ad9e3;  --h-teal-i:#137080;
  --h-lime:#84b53a;   --h-lime-l:#c2dd8e;  --h-lime-i:#4f7317;
  --h-gray:#8d93a8;   --h-gray-l:#c3c7d4;  --h-gray-i:#565c73;
  --orb:radial-gradient(circle at 34% 28%, #fffdf0, #ffd76b 52%, #e0a537);
  --orb-glow:0 0 30px rgba(255,193,80,.45), inset -6px -5px 14px rgba(190,130,30,.22);
  --hero-bg:linear-gradient(160deg, rgba(223,181,78,.16), rgba(255,255,255,.62));
  /* 등급 색 — 배경 대비가 달라지므로 테마마다 다르다 */
  --g-S:#8d6305; --g-A:#775d1e; --g-B:#1f6a55; --g-C:#4b5270; --g-D:#8a4a14; --g-E:#8e3232;
  --r:16px; --r-s:10px;
  --serif:"Nanum Myeongjo","Batang","바탕","Apple SD Gothic Neo",serif;
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
         "Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}

/* ── 밤 테마 (선택) ── */
[data-theme="dark"]{
  --bg-0:#080a18; --bg-1:#0f1330; --bg-2:#161b3f;
  --ink:#eef0fa; --ink-2:#b8bdd6; --ink-3:#7d83a3;
  --gold:#c9a961; --gold-b:#e8c15a; --gold-orn:#e8c15a;
  --gold-dim:rgba(201,169,97,.22);
  --line:rgba(201,169,97,.18);
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --sunken:rgba(0,0,0,.22);
  --hairline:rgba(255,255,255,.08);
  --track:rgba(255,255,255,.08);
  --shadow:none;
  --shadow-s:0 4px 14px rgba(0,0,0,.34);
  --ad-line:rgba(255,255,255,.09);
  --ad-ink:rgba(255,255,255,.14);
  --toast-bg:rgba(20,24,52,.97);
  --star-op:.55;
  --char-1:#fff3cf; --char-2:#e0b34f; --char-face:#4a3410;
  --char-blush:rgba(255,150,130,.45); --char-gloss:rgba(255,255,255,.45);
  --char-shadow:rgba(0,0,0,.35); --spark:#ffe08a;
  /* 해몽이 — 뿔·정수리털·귀·책 (밤) */
  --char-horn:#c39456; --char-tuft:#a5763c; --char-ear:#dcae59;
  /* 입체감용 : 가장자리 어두운 톤 · 주둥이 밝은 톤 */
  --char-3:#c08c34; --char-lite:#fff2d2; --char-inner:#c98f52;
  --book-1:#e6ecfb; --book-2:#a9b8de; --book-ink:#7b8bb0;
  --title-1:#ffffff; --title-2:#e8c15a;
  --btn-ink:#161c45; --btn-emboss:rgba(255,255,255,.42);

  --h-coral:#ff9878;  --h-coral-l:#ffc4b0; --h-coral-i:#ff9878;
  --h-green:#5fd3a0;  --h-green-l:#a5e8c8; --h-green-i:#5fd3a0;
  --h-violet:#af9bf0; --h-violet-l:#d2c6fa; --h-violet-i:#af9bf0;
  --h-blue:#79b0f2;   --h-blue-l:#b3d4f8;  --h-blue-i:#79b0f2;
  --h-amber:#f0bb63;  --h-amber-l:#f8d9a4; --h-amber-i:#f0bb63;
  --h-rose:#f593a8;   --h-rose-l:#fabecb;  --h-rose-i:#f593a8;
  --h-teal:#5fcedd;   --h-teal-l:#a3e3ec;  --h-teal-i:#5fcedd;
  --h-lime:#a9d165;   --h-lime-l:#cbe4a4;  --h-lime-i:#a9d165;
  --h-gray:#a0a6bb;   --h-gray-l:#c6cad8;  --h-gray-i:#a0a6bb;
  --orb:radial-gradient(circle at 34% 30%, #fff8e2, #e8c15a 58%, #a9873f);
  --orb-glow:0 0 34px rgba(232,193,90,.42), inset -8px -6px 16px rgba(120,90,30,.42);
  --hero-bg:linear-gradient(160deg, rgba(201,169,97,.11), rgba(255,255,255,.03));
  --g-S:#e8c15a; --g-A:#c9a961; --g-B:#7fb3a4; --g-C:#8d93a8; --g-D:#c98f6a; --g-E:#b96a6a;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.72;
  background:var(--bg-0); min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}

/* 밤하늘 — 이미지 없이 CSS 만으로 */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(980px  560px at 84% -12%, rgba(255,199,110,.40), transparent 60%),
    radial-gradient(820px  520px at  6%  2%,  rgba(163,150,246,.30), transparent 58%),
    radial-gradient(700px  460px at 96% 46%,  rgba(120,214,203,.26), transparent 58%),
    radial-gradient(760px  600px at 30% 104%, rgba(246,158,178,.24), transparent 60%),
    linear-gradient(178deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-0) 100%);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(1100px 620px at 78% -8%,  rgba(112,92,190,.34), transparent 62%),
    radial-gradient(900px  520px at 12% 8%,   rgba(56,86,168,.28),  transparent 60%),
    radial-gradient(760px  620px at 50% 108%, rgba(201,169,97,.10), transparent 62%),
    linear-gradient(178deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-0) 100%);
}
/* 별은 밤에만 뜬다 (--star-op 이 아침엔 0) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; opacity:var(--star-op);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px   at 68% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 84% 34%, #ffeec2, transparent),
    radial-gradient(1px 1px   at 32% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 54% 68%, #fff, transparent),
    radial-gradient(1px 1px   at 8%  72%, #dfe4ff, transparent),
    radial-gradient(1.5px 1.5px at 92% 78%, #fff, transparent),
    radial-gradient(1px 1px   at 44% 90%, #fff, transparent);
}
[data-theme="dark"] body::after{animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.34}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

.wrap{max-width:760px; margin:0 auto; padding:0 18px 72px}

/* ── 머리 ── */
header{text-align:center; padding:30px 0 22px}
/* ── 캐릭터 "해몽이" ─────────────────────────────────────
   이미지가 아니라 SVG 라서 어떤 화면에서도 깨지지 않고
   색이 전부 변수라 아침/밤 테마를 그대로 따라간다.
   🔴 색을 여기서 직접 쓰지 말 것 — 값을 박으면 그 자리만 테마를 안 따라온다. */
.haemong{width:150px; height:154px; margin:0 auto 2px; cursor:pointer}
.haemong svg{overflow:visible; display:block}
.hm-body{animation:bob 3.6s ease-in-out infinite; transform-origin:75px 75px}
.hm-shadow{fill:var(--char-shadow); animation:shrink 3.6s ease-in-out infinite}
.hm-gloss{fill:var(--char-gloss)}

/* 부위별 */
.hm-head, .hm-torso{fill:url(#haemongBody)}
.hm-ear, .hm-arm, .hm-foot{fill:url(#haemongLimb)}
.hm-occ{fill:url(#haemongOcc)}
.hm-muzzle{fill:url(#haemongMuzzle); opacity:.7}
.hm-tuft{fill:var(--char-tuft)}
/* 뿔은 가는 선이 아니라 뭉툭해야 벨벳 뿔처럼 보인다 */
.hm-horn path{fill:none; stroke:var(--char-horn); stroke-width:7;
              stroke-linecap:round; stroke-linejoin:round}
.hm-brow path{fill:none; stroke:var(--char-tuft); stroke-width:2.4;
              stroke-linecap:round; opacity:.75}
.hm-nose{fill:var(--char-face); opacity:.8}

/* 꿈 책 : 구름과 별 */
.hm-book .pg{fill:var(--book-1); stroke:var(--book-2); stroke-width:1.6; stroke-linejoin:round}
.hm-book .spine{fill:none; stroke:var(--book-2); stroke-width:1.9; stroke-linecap:round}
.hm-book .cloud{fill:var(--book-ink); opacity:.45}
.hm-book .star{fill:var(--gold-orn); opacity:1}

/* 눈 : 사진처럼 기본은 뜬 눈. 기쁠 때만 웃는 눈(^^)이 된다 */
.eyes-open{opacity:1; animation:blink 5s steps(1) infinite}
.eyes-open ellipse{fill:var(--char-face)}
.eyes-open .glint{fill:#fff}
.eyes-closed{opacity:0}
.eyes-closed path{fill:none; stroke:var(--char-face); stroke-width:3.4; stroke-linecap:round}
.eyes-closed,.eyes-open{transition:opacity .3s}
.haemong.joy .eyes-open{opacity:0; animation:none}
.haemong.joy .eyes-closed{opacity:1}

.blush{fill:var(--char-blush); transition:opacity .3s}
.mouth{fill:none; stroke:var(--char-face); stroke-width:2.9; stroke-linecap:round;
       transition:opacity .3s}
.m-joy,.m-worry{opacity:0}
.haemong.joy   .m-smile{opacity:0} .haemong.joy   .m-joy{opacity:1; fill:var(--char-face)}
.haemong.worry .m-smile{opacity:0} .haemong.worry .m-worry{opacity:1}
.haemong.joy   .blush{opacity:1}
.haemong.worry .blush{opacity:.35}
.sp{fill:var(--spark); animation:spark 2.6s ease-in-out infinite; transform-origin:center}
.sp2{animation-delay:.8s} .sp3{animation-delay:1.6s}

/* 결과가 나오면 반짝임이 강해진다 */
.haemong.awake .sp{animation-duration:1.8s}
.haemong:active .hm-body{transform:scale(.94)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shrink{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.7}}
@keyframes spark{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes blink{0%,92%,100%{opacity:1}94%,98%{opacity:.12}}
.sp{transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .hm-body,.hm-shadow,.sp,.haemong.awake .eyes-open{animation:none}
}

.theme-btn{
  position:absolute; top:18px; right:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--gold-b);
  font-size:16px; cursor:pointer; line-height:1; transition:.18s;
}
.theme-btn:hover{border-color:var(--gold); transform:rotate(-18deg)}
header{position:relative}
/* 헤더는 젊은 톤(굵은 산세리프), 해석 본문은 명조 유지.
   브랜드 목소리는 친근하게, 내용 목소리는 신뢰감 있게 나눈 것이다. */
h1{
  font-family:var(--sans); font-size:40px; font-weight:900;
  letter-spacing:-.035em; line-height:1.16; color:var(--title-1);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1{
    background:linear-gradient(103deg, var(--title-1) 16%, var(--title-2) 94%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.tagline{color:var(--ink-2); font-size:15px; font-weight:500; margin-top:8px; letter-spacing:-.01em}
.badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:15px;
  padding:7px 15px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--gold-b); background:var(--gold-dim); border:1px solid var(--line);
}
.badge i{font-style:normal; opacity:.55}
.badge em{font-style:normal; font-weight:500; color:var(--ink-3)}

/* ── 카드 공통 ── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; margin-bottom:16px; backdrop-filter:blur(9px); box-shadow:var(--shadow);
}
.card-t{
  font-family:var(--serif); font-size:15px; color:var(--gold-b);
  letter-spacing:.09em; margin-bottom:14px; display:flex; align-items:center; gap:9px;
}
.card-t::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 입력 ── */
textarea{
  width:100%; min-height:132px; resize:vertical; padding:16px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-s);
  color:var(--ink); font-family:inherit; font-size:15.5px; line-height:1.8;
}
textarea::placeholder{color:var(--ink-3)}
textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,97,.13)}

.hint{font-size:12.5px; color:var(--ink-3); margin:10px 2px 0; display:flex; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.chip{
  padding:6px 12px; border-radius:999px; font-size:12.5px; cursor:pointer;
  background:var(--sunken); border:1px solid var(--hairline); color:var(--ink-2);
  transition:.16s;
}
.chip:hover{border-color:var(--gold); color:var(--gold-b)}
.chip.on{background:color-mix(in srgb, var(--h-rose) 16%, transparent);
         border-color:var(--h-rose); color:var(--h-rose-i)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .chip.on{background:var(--gold-dim); border-color:var(--gold); color:var(--gold-b)}
}
.chip-lb{font-size:11.5px; color:var(--ink-3); align-self:center; margin-right:3px; letter-spacing:.04em}

/* ── 주 버튼 ──────────────────────────────────────────
   네모칸(배경·모서리·그림자·여백)은 처음 그대로 두고
   글자만 도드라지게 했다. 굵기를 올리고, 흩어져 보이던 자간을
   좁히고, 위쪽에 흰 하이라이트를 깔아 새김(양각) 느낌을 준다. */
.btn{
  width:100%; margin-top:18px; padding:16px; border:none; border-radius:var(--r-s);
  font-family:var(--sans); font-size:18.5px; font-weight:800; letter-spacing:.01em;
  color:var(--btn-ink); cursor:pointer; transition:.18s;
  background:linear-gradient(135deg,var(--gold-orn),#c9a961 52%,#b08f45);
  box-shadow:0 8px 26px rgba(201,169,97,.24);
  text-shadow:0 1px 0 var(--btn-emboss);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,169,97,.34)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.btn.ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  box-shadow:none; text-shadow:none; padding:12px;
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-b); transform:none}

/* ── 결과: 총평 히어로 ── */
#result{display:none}
#result.show{display:block; animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero{
  text-align:center; padding:26px 22px 24px;
  background:var(--hero-bg); box-shadow:var(--shadow);
  border:1px solid var(--gold-dim); border-radius:var(--r); margin-bottom:16px;
}
.gauge{position:relative; width:152px; height:152px; margin:14px auto 10px}
.gauge svg{width:100%; height:100%; transform:rotate(-90deg); display:block}
.gauge .val{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.gauge .num{font-family:var(--serif); font-size:42px; font-weight:800; line-height:1}
/* 자간을 넓게 주면 "길 몽 지 수" 처럼 흩어져 읽힌다 */
.gauge .unit{font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; margin-top:5px}
/* 등급은 알약이 아니라 텍스트 + 점.
   위의 유형 알약과 모양이 겹치지 않아 시선이 정리된다. */
.grade-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--serif); font-size:16.5px; font-weight:800; letter-spacing:.03em;
}
.grade-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.type-tag{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--acc-i);
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 38%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .type-tag{background:var(--sunken); border-color:var(--hairline)}
}
.summary{
  margin-top:20px; text-align:left; font-size:14.5px; line-height:1.85;
  color:var(--ink-2); padding-top:18px; border-top:1px solid var(--line);
}
.summary q{color:var(--gold-b); font-weight:700; quotes:none}


/* ── 색 배정표 ────────────────────────────────────────
   여기가 "무엇이 무슨 색인가"의 단일 출처다.
   색을 바꾸려면 이 표만 고친다. 개별 규칙에 색을 박지 말 것. */

/* 상징 갈래 8종 */
.sym[data-cat="동물"]{--acc:var(--h-coral); --acc-l:var(--h-coral-l); --acc-i:var(--h-coral-i)}
.sym[data-cat="자연"]{--acc:var(--h-green); --acc-l:var(--h-green-l); --acc-i:var(--h-green-i)}
.sym[data-cat="사람"]{--acc:var(--h-violet);--acc-l:var(--h-violet-l);--acc-i:var(--h-violet-i)}
.sym[data-cat="사물"]{--acc:var(--h-blue);  --acc-l:var(--h-blue-l);  --acc-i:var(--h-blue-i)}
.sym[data-cat="행위"]{--acc:var(--h-amber); --acc-l:var(--h-amber-l); --acc-i:var(--h-amber-i)}
.sym[data-cat="신체"]{--acc:var(--h-rose);  --acc-l:var(--h-rose-l);  --acc-i:var(--h-rose-i)}
.sym[data-cat="장소"]{--acc:var(--h-teal);  --acc-l:var(--h-teal-l);  --acc-i:var(--h-teal-i)}
.sym[data-cat="음식"]{--acc:var(--h-lime);  --acc-l:var(--h-lime-l);  --acc-i:var(--h-lime-i)}

/* 영향 영역 7종 */
.area[data-area="재물"]    {--acc:var(--h-amber); --acc-l:var(--h-amber-l)}
.area[data-area="애정"]    {--acc:var(--h-rose);  --acc-l:var(--h-rose-l)}
.area[data-area="건강"]    {--acc:var(--h-green); --acc-l:var(--h-green-l)}
.area[data-area="직장"]    {--acc:var(--h-blue);  --acc-l:var(--h-blue-l)}
.area[data-area="인간관계"]{--acc:var(--h-violet);--acc-l:var(--h-violet-l)}
.area[data-area="변화"]    {--acc:var(--h-teal);  --acc-l:var(--h-teal-l)}
.area[data-area="학업"]    {--acc:var(--h-lime);  --acc-l:var(--h-lime-l)}

/* 꿈 유형 6종 */
.type-tag[data-type="fortune"]{--acc:var(--h-amber); --acc-i:var(--h-amber-i)}
.type-tag[data-type="warning"]{--acc:var(--h-coral); --acc-i:var(--h-coral-i)}
.type-tag[data-type="reverse"]{--acc:var(--h-violet);--acc-i:var(--h-violet-i)}
.type-tag[data-type="psych"]  {--acc:var(--h-blue);  --acc-i:var(--h-blue-i)}
.type-tag[data-type="birth"]  {--acc:var(--h-rose);  --acc-i:var(--h-rose-i)}
.type-tag[data-type="neutral"]{--acc:var(--h-gray);  --acc-i:var(--h-gray-i)}

/* 맥락어 갈래 3종 */
.ctx[data-kind="emotion"]{--acc:var(--h-rose);  --acc-i:var(--h-rose-i)}
.ctx[data-kind="state"]  {--acc:var(--h-teal);  --acc-i:var(--h-teal-i)}
.ctx[data-kind="act"]    {--acc:var(--h-blue);  --acc-i:var(--h-blue-i)}
.ctx[data-kind="combo"]  {--acc:var(--h-violet);--acc-i:var(--h-violet-i)}

/* 기본값 - 배정이 없으면 금색으로 떨어진다 */
.sym,.area,.type-tag,.ctx{--acc:var(--gold); --acc-l:var(--gold-orn); --acc-i:var(--gold-b)}

/* ── 상징 카드 ── */
.sym{
  position:relative; overflow:hidden;
  background:var(--card-2); border:1px solid var(--hairline); box-shadow:var(--shadow);
  border-radius:var(--r-s); padding:16px 16px 16px 19px; margin-bottom:11px;
}
.sym::before{                       /* 갈래 색 띠 */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--acc), var(--acc-l));
}
.sym-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px}
.sym-n{font-family:var(--serif); font-size:19px; font-weight:800; color:var(--acc-i)}
.sym-c{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  color:var(--acc-i); background:color-mix(in srgb, var(--acc) 15%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sym-c{background:var(--sunken)}
}
.sym-f{margin-left:auto; font-size:11.5px; color:var(--ink-3); letter-spacing:.04em}
.tabs{display:flex; gap:6px; margin-bottom:11px}
.tab{
  flex:1; padding:8px; font-size:12.5px; text-align:center; cursor:pointer;
  border-radius:8px; border:1px solid var(--hairline); color:var(--ink-3);
  background:var(--sunken); transition:.15s;
}
.tab.on{background:color-mix(in srgb, var(--acc) 14%, transparent);
        border-color:var(--acc); color:var(--acc-i)}
.pane{display:none; font-size:14.5px; color:var(--ink-2)}
.pane.on{display:block; animation:fade .28s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.src{
  display:inline-block; font-size:10.5px; letter-spacing:.08em; margin-bottom:7px;
  padding:2px 8px; border-radius:4px; background:var(--sunken); color:var(--ink-3);
}

/* ── 맥락·조합 ── */
.ctx{padding:13px 15px; border-radius:var(--r-s); margin-bottom:9px;
     background:var(--sunken); border-left:3px solid var(--acc)}
.ctx.mute{border-left-color:var(--ink-3); opacity:.72}
.ctx-h{color:var(--acc-i)}
.ctx-h{font-size:13.5px; font-weight:700; margin-bottom:5px; display:flex; gap:8px; align-items:center}
.ctx-w{font-size:11px; color:var(--ink-3); font-weight:400}
.ctx-b{font-size:13.5px; color:var(--ink-2)}

/* ── 영역 막대 ── */
.area{margin-bottom:11px}
.area-h{display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px}
.area-h b{color:var(--ink)}
.area-h span{color:var(--ink-3); font-size:11.5px}
.bar{height:7px; border-radius:99px; background:var(--track); overflow:hidden}
.bar i{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--acc),var(--acc-l));
  transition:width .9s cubic-bezier(.2,.8,.3,1);
}
.area-h b::before{                  /* 영역 색 점 */
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--acc); margin-right:7px; vertical-align:1px;
}

/* ── 태몽 게이지 ── */
.birth{display:flex; align-items:center; gap:15px}
.birth-n{font-family:var(--serif); font-size:34px; font-weight:800; color:var(--gold-b); line-height:1}
.birth-d{font-size:13.5px; color:var(--ink-2); flex:1}

/* ── 조언 ── */
.adv{display:flex; gap:11px; padding:12px 0; border-bottom:1px dashed var(--hairline)}
.adv:last-child{border-bottom:none}
.adv-k{
  flex:0 0 auto; font-family:var(--serif); font-size:12.5px; color:var(--gold-b);
  padding:3px 10px; border:1px solid var(--gold-dim); border-radius:999px; height:fit-content;
}
.adv-t{font-size:14.5px; color:var(--ink-2)}

/* ── 행운의 숫자 ── */
.balls{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin:4px 0 12px}
.ball{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:16px; color:#fff;
  background:radial-gradient(circle at 34% 28%,
             color-mix(in srgb, var(--acc) 25%, #fff), var(--acc) 68%,
             color-mix(in srgb, var(--acc) 72%, #000));
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:var(--shadow-s);
}
.ball:nth-child(1){--acc:var(--h-coral)} .ball:nth-child(2){--acc:var(--h-amber)}
.ball:nth-child(3){--acc:var(--h-lime)}  .ball:nth-child(4){--acc:var(--h-green)}
.ball:nth-child(5){--acc:var(--h-teal)}  .ball:nth-child(6){--acc:var(--h-violet)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ball{background:var(--acc); color:#fff}
}
.ball-note{font-size:12px; color:var(--ink-3); text-align:center}

/* ── 광고 슬롯 (원칙 5: 처음부터 자리를 비워 둔다) ── */
.ad{
  min-height:96px; margin:16px 0; border:1px dashed var(--ad-line);
  border-radius:var(--r-s); display:flex; align-items:center; justify-content:center;
  color:var(--ad-ink); font-size:11.5px; letter-spacing:.16em;
}

footer{text-align:center; padding:30px 8px 8px; color:var(--ink-3); font-size:11.5px; line-height:1.9}
footer .disc{
  margin-top:12px; padding:13px; border-radius:var(--r-s);
  background:var(--sunken); border:1px solid var(--hairline);
}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,90px);
  background:var(--toast-bg); border:1px solid var(--gold-dim); color:var(--ink);
  box-shadow:var(--shadow);
  padding:12px 22px; border-radius:999px; font-size:13.5px; z-index:99;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.toast.on{transform:translate(-50%,0)}

@media (max-width:520px){
  header{padding:20px 0 16px} h1{font-size:33px}
  .haemong{width:104px;height:104px} .haemong svg{width:104px;height:104px}
  .tagline{font-size:14px}
  .card{padding:18px} .gauge{width:136px;height:136px} .gauge .num{font-size:37px}
  .ball{width:41px;height:41px;font-size:15px}
}

/* 게이지 트랙 - HTML 에 색을 박지 않고 여기서 테마별로 준다 */
#arcTrack{stroke:var(--track)}

/* ── 심리 분석 ────────────────────────────────────────
   축은 좌우 어느 쪽도 좋고 나쁨이 아니다. 그래서 막대(채움)가
   아니라 눈금 위의 점으로 그린다. 채우면 "많을수록 좋다"로 읽힌다. */
.conf{margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:0;
      padding:3px 9px; border-radius:999px; background:var(--sunken); color:var(--ink-3)}
.conf.high{color:var(--h-green-i); background:color-mix(in srgb, var(--h-green) 15%, transparent)}
.conf.low{color:var(--ink-3)}

.ax{margin-bottom:15px}
.ax-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.ax-n{font-size:13.5px; font-weight:700; color:var(--ink)}
.ax-v{font-size:11.5px; color:var(--acc-i, var(--ink-3)); font-weight:700}
.ax-track{
  position:relative; height:6px; border-radius:99px; background:var(--track);
}
.ax-track::before{                      /* 중앙 눈금 */
  content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px;
  background:var(--hairline);
}
.ax-dot{
  position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--acc); border:2.5px solid var(--card-2);
  box-shadow:var(--shadow-s); transition:left .8s cubic-bezier(.2,.8,.3,1);
}
.ax-ends{display:flex; justify-content:space-between; margin-top:6px;
         font-size:11px; color:var(--ink-3)}
.ax-t{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.75}
.ax.dim{opacity:.45}
.ax.dim .ax-t{font-style:normal}

.pat{
  padding:13px 15px; border-radius:var(--r-s); margin-bottom:9px;
  background:var(--sunken); border-left:3px solid var(--h-violet);
}
.pat-t{font-size:13.5px; font-weight:700; color:var(--h-violet-i); margin-bottom:5px}
.pat-b{font-size:13.5px; color:var(--ink-2)}

.fw{
  padding:14px 15px; border-radius:var(--r-s); margin-bottom:9px;
  background:color-mix(in srgb, var(--h-blue) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--h-blue) 26%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .fw{background:var(--sunken); border-color:var(--hairline)}
}
.fw-h{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.fw-n{font-family:var(--serif); font-size:15px; font-weight:800; color:var(--h-blue-i)}
.fw-w{font-size:11.5px; color:var(--ink-3)}
.fw-tag{font-size:10.5px; padding:2px 8px; border-radius:4px;
        background:var(--sunken); color:var(--ink-3)}
.fw-b{font-size:13.5px; color:var(--ink-2)}

.qbox{
  margin-top:14px; padding:16px; border-radius:var(--r-s);
  background:color-mix(in srgb, var(--h-amber) 11%, transparent);
  border:1px dashed color-mix(in srgb, var(--h-amber) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .qbox{background:var(--sunken); border-color:var(--line)}
}
.qbox-t{font-size:11px; font-weight:700; letter-spacing:.08em;
        color:var(--h-amber-i); margin-bottom:7px}
.qbox p{font-family:var(--serif); font-size:15.5px; line-height:1.8; color:var(--ink)}

/* ── 전통 해몽 출처 등급 ──────────────────────────────
   등급을 색으로 구분해 훑어만 봐도 신뢰 수준이 보이게 한다. */
.src-wide{color:var(--h-green-i);
          background:color-mix(in srgb, var(--h-green) 14%, transparent)}
.src-varies{color:var(--h-amber-i);
            background:color-mix(in srgb, var(--h-amber) 16%, transparent)}
.src-modern{color:var(--h-blue-i);
            background:color-mix(in srgb, var(--h-blue) 14%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .src-wide,.src-varies,.src-modern{background:var(--sunken)}
}
.src-note{
  font-size:12.5px; color:var(--ink-3); margin:7px 0 9px; padding-left:10px;
  border-left:2px solid var(--hairline); line-height:1.7;
}

/* ── 출처 안내 (푸터) ── */
.about{
  margin-top:14px; padding:15px; border-radius:var(--r-s);
  background:var(--sunken); border:1px solid var(--hairline); text-align:left;
}
.about summary{
  cursor:pointer; font-size:12.5px; font-weight:700; color:var(--gold-b);
  list-style:none; text-align:center;
}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:" ▾"; font-size:10px}
.about[open] summary::after{content:" ▴"}
.about-b{margin-top:13px; font-size:12.5px; line-height:1.85; color:var(--ink-2)}
.about-b b{color:var(--ink)}
.about-b ul{margin:8px 0 0 0; padding-left:16px}
.about-b li{margin-bottom:5px}

/* ── 갈리는 해석의 반대편 ──────────────────────────────
   한쪽만 싣고 "갈린다"고만 알리면 독자는 확인할 방법이 없다.
   양쪽을 나란히 두는 것이 이 앱이 택한 정직함의 형태다. */
.alt{
  margin-top:11px; padding:12px 13px; border-radius:8px;
  background:color-mix(in srgb, var(--h-amber) 9%, transparent);
  border-left:3px solid var(--h-amber);
  font-size:13.5px; color:var(--ink-2); line-height:1.75;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .alt{background:var(--sunken)}
}
.alt-t{
  display:block; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--h-amber-i); margin-bottom:5px;
}

/* 캐릭터 이름표 — 제목(h1)은 검색어를 지켜야 하므로 그대로 두고,
   캐릭터 이름은 그 위에 따로 세운다. */
.char-tag{
  font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; margin:6px 0 2px;
}
.char-tag b{
  font-family:var(--serif); font-weight:800; font-size:15px;
  color:var(--title-2); letter-spacing:.04em; margin-left:3px;
}