@charset "UTF-8";
/* 사전형 화면(꿈해몽·태몽). 공통 부품은 me.css 를 함께 읽는다. */
.dc-hero { text-align: center; }
.dc-search { margin-top: 14px; }
.dc-lab { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--pm-ink); }
.dc-qrow { display: flex; gap: 8px; }
.dc-q { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: var(--pm-tap); padding: 10px 14px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-input); background: var(--pm-cream); color: var(--pm-ink); font: 16px/1.4 var(--pm-font-body); -webkit-appearance: none; appearance: none; }
.dc-q:focus { border-color: var(--pm-water); box-shadow: 0 0 0 3px var(--pm-focus-ring); outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.dc-go { flex: none; min-width: 72px; min-height: var(--pm-tap); }
.dc-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dc-chip { display: inline-flex; align-items: center; gap: 4px; min-height: var(--pm-tap); padding: 0 14px; border: 2px solid var(--pm-line); border-radius: var(--pm-r-pill); background: var(--pm-cream); color: var(--pm-ink); font-size: 14.5px; text-decoration: none; }
.dc-chip small { color: var(--pm-sub-text); font-size: 12px; }
.dc-chip.is-current { background: var(--pm-fire-deep); border-color: var(--pm-fire-deep); color: #fff; font-weight: 700; }
.dc-chip.is-current small { color: #fff; }
.dc-chip:focus-visible, .dc-pill:focus-visible, .dc-row:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.dc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dc-pill { display: inline-flex; align-items: center; min-height: var(--pm-tap); padding: 0 16px; border-radius: var(--pm-r-pill); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); font-size: 15.5px; text-decoration: none; transition: transform .15s; }
.dc-pill:hover { transform: translateY(-1px); background: var(--pm-cream); }
.dc-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; min-height: var(--pm-tap); padding: 10px 14px; border-radius: var(--pm-r-card); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); text-decoration: none; }
.dc-row:hover { background: var(--pm-cream); }
.dc-row-k { font-family: var(--pm-font-head); font-weight: 400; font-size: 18px; overflow-wrap: anywhere; }
.dc-row-t { grid-column: 1 / -1; color: var(--pm-sub-text); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dc-tag { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: var(--pm-r-pill); background: var(--pm-soft2); color: var(--pm-ink); font-size: 12.5px; font-weight: 700; }
.dc-none { margin: 12px 0 0; color: var(--pm-sub-text); line-height: 1.6; }
.dc-detail { text-align: center; }
.dc-d-k { margin: 8px 0 4px; font-family: var(--pm-font-head); font-weight: 400; font-size: 30px; line-height: 1.3; overflow-wrap: anywhere; }
.dc-alias { margin: 0 0 12px; color: var(--pm-sub-text); font-size: 14px; overflow-wrap: anywhere; }
.dc-h3 { margin: 14px 0 6px; font-size: 15px; color: var(--pm-fire-deep); }
.dc-d-t { margin: 0 0 12px; font-size: 17px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; text-align: left; }
.dc-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
@media (prefers-reduced-motion: reduce) { .dc-pill { transition: none; } .dc-pill:hover { transform: none; } }

/* 꿈 항아리·꿈구름 3D(공용 ritual3d). 영역과 버튼은 WebGL 이 되고 JS 가 열어야만 보인다. 서버가 그린 해석 카드·함께 보면 좋은 꿈은 그대로 둔다. */
.dj3[hidden], .dj3-gl[hidden], .dj3-cap[hidden], .dj3-ctl [hidden] { display: none !important; }
.dj3 { text-align: center; }
.dj3-wrap { max-width: 520px; margin: 0 auto; }
.dj3-gl { position: relative; width: 100%; aspect-ratio: 6 / 5; border-radius: var(--pm-r-card); overflow: hidden;
  background: linear-gradient(180deg, #46568f 0%, #7d78b4 62%, #c9a6c9 100%); box-shadow: inset 0 0 0 1px rgba(40, 50, 100, .35); }
.dj3-gl canvas { display: block; width: 100%; height: 100%; }
.dj3-cap { margin: 10px auto 0; max-width: 520px; font-size: 15px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; color: var(--pm-ink); }
.dj3-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 0; }
.dj3-ctl .pm-btn { min-height: 44px; }