/* 월담 꿈해몽(dream.sajudal.com) 전용. 운영 사이트 styles.css 와 섞지 않는다.
   긴 글을 읽는 화면이라 본문 17px, 손님 화면 최소 14px 규칙을 지킨다. */
@font-face{font-family:'Pretendard Variable';src:url("../fonts/pretendard/PretendardVariable-subset.8f23b854b490.woff2") format('woff2-variations');font-weight:45 930;font-style:normal;font-display:swap;unicode-range:U+AC00-D7A3}@font-face{font-family:'Pretendard Variable';src:url("../fonts/pretendard/PretendardVariable-ks.a3aab0057cef.woff2") format('woff2-variations');font-weight:45 930;font-style:normal;font-display:swap}
:root{
  --ink:#1c1b29; --sub:#5d6072; --faint:#8a8d9c; --line:#ebebf2; --bg:#fff; --soft:#f6f5fb;
  --night:#1d1b3a; --night2:#2f2b5e; --moon:#f3d98b;
  /* 길흉 색: 옅은 바탕 + 진한 글자. 상황 따라는 갈색 대신 파랑(사장님 11/06 갈색 톤 X). *-bar 는 한눈에 보기 막대 */
  --good:#1f7a50; --good-bg:#e6f4ec; --good-bar:#3fae76;
  --mixed:#2d5bb5; --mixed-bg:#e8effb; --mixed-bar:#6b8fe0;
  --bad:#b8382a; --bad-bg:#fcebe8; --bad-bar:#e46a56;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","맑은 고딕",sans-serif;color:var(--ink);
  background:var(--bg);letter-spacing:-.02em;-webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}

.dm-hd{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.dm-nav{display:flex;align-items:center;max-width:448px;margin:0 auto;height:56px;padding:0 20px}
.dm-back{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 2px 0 -12px;color:var(--night2)}
.dm-logo{display:flex;align-items:center;height:44px}
.dm-logo span{font-size:19px;font-weight:800;color:var(--night2);letter-spacing:-.02em}

.dm{max-width:448px;margin:0 auto;padding:0 20px 24px}
.dm-crumb{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 0;font-size:14px;color:var(--faint)}
.dm-crumb a{color:var(--sub)}

.dm-hero{margin:16px -20px 0;padding:32px 20px 28px;color:#fff;
  background:linear-gradient(160deg,var(--night) 0%,var(--night2) 100%)}
.dm-hero h1{font-size:26px;line-height:1.35;font-weight:800;margin-top:12px;letter-spacing:-.03em}
.dm-hero p{font-size:16px;line-height:1.7;margin-top:12px;color:#dcdbf0}
.dm-hub h1{margin-top:0}
.dm-hero-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-top:20px;border-radius:16px;background:rgba(255,255,255,.08)}
.dm-points{list-style:none;margin-top:18px;display:grid;gap:8px}
.dm-points li{font-size:16px;line-height:1.6;padding-left:22px;position:relative;color:#ecebf8}
.dm-points li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--moon)}

.dm-chip{display:inline-block;font-size:14px;font-weight:700;line-height:1;padding:7px 10px;border-radius:999px;vertical-align:middle}
.dm-chip.sm{padding:5px 8px;font-size:14px;margin-left:6px}
.v-good{color:var(--good);background:var(--good-bg)}
.v-bad{color:var(--bad);background:var(--bad-bg)}
.v-mixed{color:var(--mixed);background:var(--mixed-bg)}

.dm-prose{margin-top:20px}
.dm-prose p{font-size:17px;line-height:1.85;color:#2c2d3a}
.dm-prose p+p{margin-top:14px}

/* 한눈에 보기: 길흉 막대 + 길흉별 목차 칸. 길몽·상황 따라·흉몽은 한 줄에 섞지 않고 칸을 나눈다. */
.dm-glance{margin-top:24px;padding:20px;border-radius:14px;background:var(--soft)}
.dm-glance h2{font-size:18px;font-weight:800}
.dm-bar{display:flex;gap:3px;height:12px;margin-top:14px;border-radius:999px;overflow:hidden}
.dm-bar span{min-width:12px}
.dm-bar .v-good{background:var(--good-bar)}
.dm-bar .v-mixed{background:var(--mixed-bar)}
.dm-bar .v-bad{background:var(--bad-bar)}
.dm-group{margin-top:18px}
.dm-group-k{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;background:none}
.dm-group-k i,.dm-verdict i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.dm-group-k b{font-weight:800}
.dm-tocs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dm-tocs a{display:block;padding:9px 12px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.4}

.dm-case{margin-top:40px;scroll-margin-top:72px}
.dm-case h2{font-size:21px;line-height:1.4;font-weight:800}
.dm-verdict{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:7px 12px;border-radius:8px;
  font-size:15px;font-weight:800;line-height:1}
.dm-case-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin-top:16px;border-radius:14px;background:var(--soft)}
.dm-saju{padding-top:32px;border-top:1px solid var(--line)}

.dm-mid{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;padding:18px 20px;
  border-radius:14px;border:1px solid #dcd9f2;background:#f4f2ff;font-size:16px;line-height:1.5;font-weight:600;color:var(--night2)}
.dm-mid b{flex:none;font-size:15px}

.dm-offer{margin:44px -20px 0;padding:32px 20px;background:var(--night);color:#fff;text-align:center}
.dm-offer-k{font-size:14px;color:var(--moon);font-weight:700}
.dm-offer h2{font-size:22px;line-height:1.4;margin-top:10px;font-weight:800}
.dm-offer p{font-size:16px;line-height:1.7;margin-top:10px;color:#dcdbf0}
.dm-btn{display:block;margin-top:22px;padding:16px;border-radius:12px;background:var(--moon);color:var(--night);
  font-size:17px;font-weight:800}

.dm-more{margin-top:40px}
.dm-more h2{font-size:19px;font-weight:800;margin-bottom:6px}
.dm-more>a{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
.dm-more>a b{display:block;font-size:17px;font-weight:700}
.dm-more>a.has-thumb{display:flex;align-items:flex-start;gap:14px}
.dm-more>a>div{min-width:0}
.dm-thumb{flex:none;width:72px;height:72px;border-radius:12px;object-fit:cover;background:var(--soft)}
.dm-more>a span:not(.dm-chip){display:block;margin-top:4px;font-size:15px;line-height:1.55;color:var(--sub)}

.dm-ft{max-width:448px;margin:40px auto 0;padding:28px 20px 48px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--faint)}
.dm-ft p+p{margin-top:10px}
.dm-ft a{color:var(--sub);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 2026-11-11 사장님: 꿈해몽은 모바일 화면 그대로. PC 는 가운데 448px 칸, 바깥은 옅은 회색 */
@media (min-width:480px){
  html{background:#f1f1f4}
  body:not(.ch-body){max-width:448px;min-height:100vh;margin:0 auto;box-shadow:0 0 0 1px #e6e6ec}
}

/* ── 첫 화면: 검색 + 많이 본 꿈 ─────────────────────────────────────────────
   글자 크기 · 굵기 두 단계와 여백으로만 위계를 준다. 꾸밈 그라데이션 · 테두리 상자 없이 한 색 계열. */
.hb-top{padding:36px 0 8px}
.hb-title{font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-.035em}
.hb-search{position:relative;margin-top:18px}
.hb-box{display:flex;align-items:center;gap:10px;height:58px;padding:0 8px 0 16px;border-radius:16px;
  background:#f1f1f5;border:2px solid transparent;transition:background .15s,border-color .15s}
.hb-box:focus-within{background:#fff;border-color:var(--ink)}
.hb-ic{flex:none;color:var(--faint)}
.hb-box:focus-within .hb-ic{color:var(--ink)}
.hb-q{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:18px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;-webkit-appearance:none;appearance:none}
.hb-q::placeholder{color:#9a9cab;font-weight:500}
.hb-q::-webkit-search-cancel-button,.hb-q::-webkit-search-decoration{-webkit-appearance:none;display:none}
.hb-clear{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;
  background:none;color:#b2b4c0;cursor:pointer;border-radius:10px}
.hb-clear[hidden]{display:none}
.hb-pop{position:absolute;left:0;right:0;top:64px;z-index:20;padding:6px;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(20,20,40,.08),0 12px 32px rgba(20,20,40,.14);max-height:min(420px,60vh);overflow-y:auto;
  overscroll-behavior:contain}
.hb-pop[hidden]{display:none}
.hb-pop-k{padding:10px 10px 4px;font-size:14px;font-weight:700;color:var(--faint)}
.hb-list{list-style:none}
.hb-opt a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px}
.hb-opt[aria-selected="true"] a,.hb-opt a:hover{background:#f1f1f5}
.hb-opt .hb-th{width:40px;height:40px;border-radius:10px}
.hb-opt .hb-tx{display:block;min-width:0}
.hb-t{display:block;font-size:16px;line-height:1.35;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t b{color:var(--ink);font-weight:800}
.hb-s{display:block;margin-top:2px;font-size:14px;line-height:1.3;color:var(--faint)}
.hb-opt-none{padding:14px 10px;font-size:15px;color:var(--sub)}

.hb-sec{margin-top:36px}
.hb-h{font-size:19px;font-weight:800;letter-spacing:-.03em}
.hb-rows{list-style:none;margin-top:8px}
.hb-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.hb-rows li+li .hb-row{border-top:1px solid var(--line)}
.hb-n{flex:none;width:20px;font-size:15px;font-weight:700;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.hb-n.top{color:var(--ink)}
.hb-th{flex:none;display:block;width:56px;height:56px;border-radius:12px;object-fit:cover;background:#ececf1}
.hb-tx{min-width:0}
.hb-tx>b{display:block;font-size:17px;line-height:1.35;font-weight:700}
.hb-tx>span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-none{margin-top:12px;font-size:16px;color:var(--sub)}
.hb-cats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.hb-cats a{display:block;padding:14px 16px;border-radius:12px;background:#f1f1f5;font-size:16px;font-weight:700}

/* ── 대화형 꿈풀이(나무가 있는 꿈) ─────────────────────────────────────────────
   배경은 그 꿈 그림(세로 2:3)을 화면 전체에 cover 로 깔고 어둡게 덮는다. 장면(base·good·bad·mixed)에 따라
   그림이 겹쳐 바뀐다. 말풍선 16px, 그 밖의 글자도 14px 아래로 내리지 않는다. PC 는 가운데 448px 칸. */
.ch-body{background:#0e0f22;color:#fff}
.ch-main{position:relative;z-index:1}
.ch-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0e0f22}
.ch-layer{position:absolute;inset:0;background-size:cover;background-position:center top;transition:opacity .8s ease}
.ch-layer::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,24,.5) 0%,rgba(8,9,24,.28) 38%,rgba(8,9,24,.55) 75%,rgba(8,9,24,.78) 100%)}
.ch-layer::after{content:"";position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .8s ease}
/* 그림이 없을 때 장면별 그라데이션 */
.ch-layer.s-base:not(.has-img){background:radial-gradient(120% 60% at 50% 0%,#3a3570 0%,transparent 70%),linear-gradient(180deg,#1d1b3a,#0e0f22)}
.ch-layer.s-good:not(.has-img){background:radial-gradient(90% 55% at 50% 0%,rgba(243,217,139,.55),transparent 72%),linear-gradient(180deg,#26326a,#121633)}
.ch-layer.s-bad:not(.has-img){background:radial-gradient(80% 45% at 50% 14%,rgba(232,64,64,.6),transparent 72%),linear-gradient(180deg,#3d0d19,#14060c)}
.ch-layer.s-mixed:not(.has-img){background:radial-gradient(90% 55% at 50% 0%,rgba(110,150,235,.45),transparent 72%),linear-gradient(180deg,#152a55,#0b1430)}
/* 길몽은 늘 금빛을 살짝 얹는다(이빨처럼 base · good 그림이 비슷해도 바뀐 게 보이게). 자기 그림이 없으면 더 진하게 */
.ch-layer.s-good::after{opacity:1;background:radial-gradient(120% 55% at 50% 0%,rgba(255,214,120,.55),transparent 72%),radial-gradient(90% 40% at 50% 100%,rgba(255,196,90,.32),transparent 75%)}
.ch-layer.s-good.tint::after{background:radial-gradient(110% 70% at 50% 0%,rgba(255,206,100,.55),rgba(255,206,100,.12) 70%)}
.ch-layer.s-bad.tint::after{opacity:1;background:linear-gradient(180deg,rgba(200,24,40,.45),rgba(110,8,22,.55))}
.ch-layer.s-mixed::after{opacity:1;background:linear-gradient(180deg,rgba(46,96,210,.4),rgba(18,46,130,.5))}
/* 길몽 배경에 떠다니는 금가루 */
.ch-motes{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .8s ease;pointer-events:none}
.ch-bg[data-scene="good"] .ch-motes{opacity:1}
.ch-motes i{position:absolute;bottom:-10px;border-radius:50%;box-shadow:0 0 6px 1px rgba(255,214,110,.75);
  background:radial-gradient(circle,#fff8d6 0%,#f6cf5c 55%,rgba(246,207,92,0) 72%);animation:chMote 9s linear infinite}
@keyframes chMote{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-100vh);opacity:0}}

/* 연출: 흉몽 흔들림 + 붉은 번쩍, 길몽 금가루 */
.ch-fx{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0}
.ch-fx.flash{background:radial-gradient(circle at 50% 40%,rgba(255,50,50,.5),rgba(150,0,20,.62));animation:chFlash .5s ease-out}
@keyframes chFlash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
.ch.shake{animation:chShake .4s ease-in-out}
@keyframes chShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.ch-dust{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.ch-dust i{position:absolute;top:-14px;border-radius:50%;
  background:radial-gradient(circle,#fffbe6 0%,#ffd866 50%,rgba(255,216,102,0) 72%);animation:chDust var(--t) ease-in forwards}
@keyframes chDust{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y))}}

.ch{position:relative;max-width:448px;margin:0 auto;min-height:100vh;min-height:100svh;padding-bottom:32px}
.ch-hd{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;height:60px;padding:0 14px 0 4px;
  background:rgba(10,11,28,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.ch-back{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:44px;color:#fff}
.ch-av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1d1b3a}
.ch-who{min-width:0;line-height:1.3}
.ch-who b{display:block;font-size:16px;font-weight:800;color:#fff}
.ch-who span{display:block;font-size:14px;color:rgba(255,255,255,.75)}

.ch-log{padding:12px 12px 0}
.ch-day{display:table;max-width:92%;margin:8px auto 14px;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.42);
  font-size:14px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.92);text-align:center;letter-spacing:-.01em}
.ch-row{display:flex;gap:8px;margin-top:14px}
.ch-row.me{justify-content:flex-end}
.ch-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:calc(100% - 52px)}
.ch-name{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ch-bub{background:#fff;color:#1c1b29;font-size:16px;line-height:1.62;padding:10px 13px;border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);overflow-wrap:anywhere}
.ch-name+.ch-bub,.ch-tag+.ch-bub{border-top-left-radius:4px}
.ch-row.me .ch-bub{max-width:80%;background:#fee86b;border-radius:16px 4px 16px 16px;font-weight:500}
.ch-img{padding:0;overflow:hidden;width:min(264px,100%)}
.ch-img img{display:block;width:100%;height:auto}
.ch-tag{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 11px;border-radius:999px;font-size:14px;font-weight:800;line-height:1.3}
.ch-tag i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.ch-tag span{font-weight:600;color:#1c1b29}
.ch-saju b{display:block;font-size:15px;font-weight:800;color:var(--night2);margin-bottom:4px}
.ch-saju p{font-size:16px;line-height:1.62}
.ch-card{width:100%;padding:18px 16px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ch-card-k{font-size:14px;font-weight:700;color:var(--sub)}
.ch-card-h{margin-top:6px;font-size:18px;font-weight:800;line-height:1.4}
.ch-card-p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--sub)}
.ch-card-btn{display:block;margin-top:14px;padding:14px;border-radius:12px;background:var(--night);color:var(--moon);
  font-size:16px;font-weight:800;text-align:center}
.ch-end,.ch-log>*,.ch-col>*{scroll-margin-top:72px}
.ch [hidden]{display:none!important}

/* 선택지: 손님이 할 말이라 오른쪽에 붙인다 */
.ch-picks{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:16px;padding-left:44px}
.ch-pick{appearance:none;-webkit-appearance:none;display:block;max-width:100%;margin:0;padding:10px 16px;border:1px solid #fff;
  border-radius:20px;background:rgba(255,255,255,.95);color:#1c1b29;font:inherit;font-size:16px;font-weight:600;line-height:1.45;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ch-pick:active,.ch-pick:focus-visible{background:#fee86b;border-color:#fee86b;outline:none}
.ch-pick.ch-none{background:rgba(10,11,28,.5);color:#fff;border-color:rgba(255,255,255,.6)}
.ch-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px;padding-left:44px}
.ch-chip{display:block;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.94);color:#1c1b29;font-size:15px;font-weight:600;line-height:1.4}
.ch-chip:active{background:#fee86b}
.ch-typing{display:inline-flex;gap:5px;padding:15px 14px}
.ch-typing i{width:7px;height:7px;border-radius:50%;background:#9a9cab;animation:chDot 1s infinite ease-in-out}
.ch-typing i:nth-child(2){animation-delay:.15s}
.ch-typing i:nth-child(3){animation-delay:.3s}
@keyframes chDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ch-in{animation:chIn .25s ease-out}
@keyframes chIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 대화방 아래: 검색용 글(들어가는 글 · 장면별 풀이 전체 목록) */
.ch-page{position:relative;z-index:1;max-width:448px;margin:0 auto;padding:4px 20px 28px;border-radius:20px 20px 0 0;background:#fff;color:var(--ink)}
.ch-sec{padding-top:28px}
.ch-sec+.ch-sec{margin-top:28px;border-top:1px solid var(--line)}
.ch-sec h2{font-size:19px;font-weight:800;line-height:1.4}
.ch-sec .dm-prose{margin-top:12px}
.ch-sec .dm-prose p{font-size:16px;line-height:1.8}
.ch-list{list-style:none;margin-top:8px}
.ch-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 2px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:600;line-height:1.45}
.ch-list a::after{content:"›";flex:none;font-size:20px;color:var(--faint)}
.ch-list a[aria-current]{color:var(--night2);font-weight:800}
.ch-offer{margin-top:28px;padding:24px 18px;border-radius:16px;background:var(--night);color:#fff}
.ch-offer .ch-card-k{color:var(--moon)}
.ch-offer h2{margin-top:8px;font-size:20px;font-weight:800;line-height:1.4}
.ch-offer p:not(.ch-card-k){margin-top:8px;font-size:15px;line-height:1.65;color:#dcdbf0}
.ch-offer .ch-card-btn{background:var(--moon);color:var(--night)}
.ch-body .dm-ft{position:relative;z-index:1;max-width:448px;margin:0 auto;background:#fff}

@media (prefers-reduced-motion:reduce){
  .ch.shake,.ch-fx.flash,.ch-dust i,.ch-motes i,.ch-in,.ch-typing i{animation:none}
  .ch-motes{display:none}
}