@charset "UTF-8";
/* 별자리 오늘의 운세(공개). 공통 부품(.td-stars 등)은 me.css 를 함께 읽는다. */
.st-hero { text-align: center; }
.st-date { margin: 0 0 6px; font-weight: 700; color: var(--pm-sub-text); }
.st-mine-line { margin: 8px 0 0; font-size: 15px; color: var(--pm-ink); }
.st-nav { display: flex; gap: 6px; margin: 14px 0; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.st-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; }
.st-navbtn.is-current { background: var(--pm-fire-deep); color: #fff; }
.st-navbtn:focus-visible, .st-card:focus-visible, .st-buddy:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }
.st-grid { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.st-card { position: relative; 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; }
.st-card:hover { transform: translateY(-2px); background: var(--pm-cream); }
.st-card.is-mine { border: 3px solid var(--pm-fire); padding: 12px 6px 10px; box-shadow: 0 0 0 4px rgba(255, 160, 122, .28), var(--pm-shadow-sm); }
.st-ic { display: block; width: 76px; height: 76px; }
.st-ic svg, .st-icon svg { display: block; width: 100%; height: 100%; }
.st-nm { font-family: var(--pm-font-head); font-weight: 400; font-size: 19px; }
.st-rng { font-size: 12.5px; color: var(--pm-sub-text); line-height: 1.4; }
.st-badge { display: inline-block; padding: 2px 10px; border-radius: var(--pm-r-pill); background: var(--pm-fire-deep); color: #fff; font-size: 12px; font-weight: 700; }
.st-badge--card { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.st-icon { display: block; width: 64px; height: 64px; flex: none; }
.st-icon--lg { width: 96px; height: 96px; }
.st-detail.is-mine { border: 3px solid var(--pm-fire); }
.st-head { display: flex; align-items: center; gap: 14px; }
.st-head-t { min-width: 0; }
.st-name { margin: 0; font-family: var(--pm-font-head); font-weight: 400; font-size: 26px; line-height: 1.3; }
.st-name small { font-size: 18px; color: var(--pm-sub-text); }
.st-meta { margin: 2px 0 6px; font-size: 13.5px; color: var(--pm-sub-text); }
.st-stars-row { margin: 6px 0 0; }
.st-h3 { margin: 16px 0 6px; font-size: 15px; color: var(--pm-fire-deep); }
.st-text { margin: 0 0 10px; font-size: 16.5px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.st-areas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-area { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--pm-cream); }
.st-area-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-area-t { font-size: 14.5px; line-height: 1.6; color: var(--pm-sub-text); word-break: keep-all; overflow-wrap: anywhere; }
.st-lucky-l { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-lucky-l li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: var(--pm-cream); text-align: center; }
.st-lucky-l span { font-size: 12.5px; color: var(--pm-sub-text); }
.st-lucky-l b { font-size: 15px; overflow-wrap: anywhere; }
.st-buddy { display: flex; align-items: center; gap: 12px; min-height: var(--pm-tap); padding: 8px 14px; border-radius: var(--pm-r-card); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); color: var(--pm-ink); text-decoration: none; }
.st-buddy-t { display: flex; flex-direction: column; font-size: 13.5px; color: var(--pm-sub-text); }
.st-buddy-t b { color: var(--pm-ink); font-family: var(--pm-font-head); font-weight: 400; font-size: 19px; }
.st-cta { text-align: center; }
.st-back { display: flex; justify-content: center; margin: 14px 0; }
.st-foot { text-align: center; margin: 4px 0 14px; }
@media (prefers-reduced-motion: reduce) { .st-card { transition: none; } .st-card:hover { transform: none; } }

/* 12궁 별 돔 3D(공용 ritual3d). 영역과 버튼은 WebGL 이 되고 JS 가 열어야만 보인다. 서버가 그린 12별자리 카드·운세 글은 그대로 둔다. */
.sk3[hidden], .sk3-gl[hidden], .sk3-cap[hidden], .sk3-ctl [hidden], .sk3 .pm-help[hidden], .sk3-cap-a[hidden], .sk3-mine:empty { display: none !important; }
.sk3 { text-align: center; }
.sk3-wrap { max-width: 520px; margin: 8px auto 0; }
.sk3-gl { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pm-r-card); overflow: hidden; background: #1a2150; box-shadow: inset 0 0 0 1px rgba(150, 160, 220, .28); }
@media (max-width: 480px) { .sk3-gl { aspect-ratio: 5 / 4; } }
.sk3-cap { max-width: 520px; margin: 10px auto 0; }
.sk3-cap-h { margin: 0; font-size: 17px; color: var(--pm-ink); }
.sk3-cap-h b { font-family: var(--pm-font-head); font-weight: 400; font-size: 21px; }
.sk3-rng { font-size: 13.5px; color: var(--pm-sub-text); }
.sk3-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; }
.sk3-cap-s { margin: 4px 0 0; }
.sk3-cap-t { margin: 6px 0 4px; font-size: 15.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.sk3-cap-a { margin-top: 4px; }
.sk3-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 0; }
.sk3-ctl .pm-btn { min-height: 44px; }