@charset "UTF-8";
/* 띠별 오늘의 운세(공개). 공통 부품(.zd-*, .td-stars)은 me.css 를 함께 읽는다. */
.ddi-hero { text-align: center; }
.ddi-date { margin: 0 0 6px; font-weight: 700; color: var(--pm-sub-text); }
.ddi-nav { display: flex; gap: 6px; margin: 14px 0; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.ddi-navbtn { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: var(--pm-tap); padding: 0 12px; border-radius: var(--pm-r-pill); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ddi-navbtn.is-current { background: var(--pm-fire-deep); color: #fff; }
.ddi-navbtn:focus-visible, .ddi-card:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.ddi-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .ddi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .ddi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.ddi-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 14px 8px 12px; border-radius: var(--pm-r-card); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); text-align: center; text-decoration: none; transition: transform .15s; }
.ddi-card:hover { transform: translateY(-2px); background: var(--pm-cream); }
.ddi-ic { display: block; width: 76px; height: 76px; }
.ddi-ic svg { display: block; width: 100%; height: 100%; }
.ddi-nm { font-family: var(--pm-font-head); font-weight: 400; font-size: 19px; }
.ddi-yrs { font-size: 12.5px; color: var(--pm-sub-text); line-height: 1.4; overflow-wrap: anywhere; }
.ddi-years { margin: 2px 0 4px; font-size: 13.5px; color: var(--pm-sub-text); overflow-wrap: anywhere; }
.ddi-cta { text-align: center; }
.ddi-rest { text-align: center; }
.ddi-rest img { display: block; margin: 8px auto 12px; }
@media (prefers-reduced-motion: reduce) { .ddi-card { transition: none; } .ddi-card:hover { transform: none; } }

/* 12지 메달 회전 무대 3D(공용 ritual3d). 영역과 버튼은 WebGL 이 되고 JS 가 열어야만 보인다. 서버가 그린 12띠 카드·운세 글은 그대로 둔다. */
.md3[hidden], .md3-gl[hidden], .md3-cap[hidden], .md3-ctl [hidden], .md3 .pm-help[hidden], .md3-cap-a[hidden], .md3-mine:empty { display: none !important; }
.md3 { text-align: center; }
.md3-wrap { max-width: 520px; margin: 8px auto 0; }
.md3-gl { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pm-r-card); overflow: hidden;
  background: radial-gradient(ellipse at 50% 34%, rgba(255, 252, 240, .9), rgba(255, 238, 205, .35) 74%); box-shadow: inset 0 0 0 1px rgba(150, 110, 60, .22); }
@media (max-width: 480px) { .md3-gl { aspect-ratio: 5 / 4; } }
.md3-cap { max-width: 520px; margin: 10px auto 0; }
.md3-cap-h { margin: 0; font-size: 17px; color: var(--pm-ink); }
.md3-cap-h b { font-family: var(--pm-font-head); font-weight: 400; font-size: 21px; }
.md3-cap-h small { font-size: 14px; color: var(--pm-sub-text); }
.md3-mine { display: inline-block; padding: 2px 10px; border-radius: var(--pm-r-pill); background: var(--pm-fire-deep); color: #fff; font-size: 12.5px; font-weight: 700; }
.md3-cap-y { margin: 2px 0 0; font-size: 13.5px; color: var(--pm-sub-text); overflow-wrap: anywhere; }
.md3-cap-s { margin: 4px 0 0; }
.md3-cap-t { margin: 6px 0 4px; font-size: 15.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.md3-cap-a { margin-top: 4px; }
.md3-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 0; }
.md3-ctl .pm-btn { min-height: 44px; }