@charset "UTF-8";
/* 별빛 점방 타로. 토큰은 theme/palja/css/tokens.css, 공통 컴포넌트는 layout.css 사용 */
.tr { --tr-night: #241f4d; --tr-night2: #3b3470; --tr-gold: #f2c14e; --tr-gold-soft: #fbe3a4; --tr-moon: #fff8dc; --tr-glass: rgba(34, 28, 70, .66); }
.tr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr [hidden] { display: none !important; }

/* ================= 고르기 화면 ================= */
.tr-hero { position: relative; overflow: hidden; border-radius: var(--pm-r-panel); background: linear-gradient(180deg, #1c1745 0%, #3b3470 62%, #6b5aa6 100%); box-shadow: var(--pm-shadow); color: var(--tr-moon); min-height: 210px; margin-bottom: 18px; }
.tr-hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-twinkle circle { animation: trTw 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.tr-twinkle circle:nth-child(2n) { animation-delay: -1.1s; }
.tr-twinkle circle:nth-child(3n) { animation-delay: -2.1s; }
@keyframes trTw { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.tr-hero-copy { position: relative; padding: 34px 28px 30px; max-width: 520px; }
.tr-hero .tr-eyebrow { background: rgba(255, 248, 220, .16); color: var(--tr-gold-soft); }
.tr-hero-title { margin: 0 0 8px; font-family: var(--pm-font-head); font-weight: 400; font-size: 32px; line-height: 1.2; }
.tr-hero-lead { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255, 248, 220, .88); }

.tr-q-card { margin-bottom: 16px; padding: 20px 22px 6px; }
.tr-q-card .pm-field { margin-bottom: 8px; }
.tr-q-card label small { font-weight: 400; color: var(--pm-sub-text); }
.tr-spreads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tr-sp { display: flex; gap: 16px; align-items: stretch; padding: 20px; border-radius: var(--pm-r-card); background: var(--pm-card); box-shadow: var(--pm-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .18s, box-shadow .18s; }
.tr-sp:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow); }
.tr-sp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tr-sp-body h2 { margin: 0; font-family: var(--pm-font-head); font-weight: 400; font-size: 21px; line-height: 1.3; }
.tr-sp-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pm-sub-text); flex: 1 1 auto; }
.tr-theme-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-theme-btns .pm-btn { padding: 8px 16px; font-size: 16px; }
.tr-tag { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 10px; border-radius: var(--pm-r-pill); font-family: var(--pm-font-body); font-size: 12px; font-weight: 700; }
.tr-tag--free { background: #e2f3dc; color: #2f6a24; }
.tr-tag--soon { background: #efe8ff; color: #5a3fa5; }
/* 카드 부채 그림(장식) */
.tr-sp-art { position: relative; flex: none; width: 64px; height: 92px; align-self: center; }
.tr-sp-art i { position: absolute; left: 0; top: 4px; width: 46px; height: 80px; border-radius: 9px; border: 2px solid var(--tr-gold); background: var(--tr-back-img, none) center / cover no-repeat, linear-gradient(160deg, var(--tr-night2), var(--tr-night)); box-shadow: 0 4px 10px rgba(36, 31, 77, .28); transform-origin: 50% 100%; }
.tr-sp-art i:nth-of-type(1) { transform: rotate(-12deg); }
.tr-sp-art i:nth-of-type(2) { left: 10px; transform: rotate(6deg); }
.tr-sp-art b { position: absolute; right: -4px; bottom: -2px; min-width: 28px; height: 28px; padding: 0 6px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: var(--pm-r-pill); background: var(--pm-fire); color: var(--pm-ink); font-family: var(--pm-font-head); font-size: 15px; font-weight: 400; box-shadow: var(--pm-shadow-sm); }
.tr-sp--today .tr-sp-art i { left: 8px; transform: rotate(-3deg); }
.tr-sp--month .tr-sp-art b { background: var(--pm-water); }
.tr-sp--theme .tr-sp-art b { background: var(--pm-wood); }
.tr-sp--choice .tr-sp-art b { background: var(--pm-earth); }
.tr-sp--celtic .tr-sp-art b { background: var(--tr-gold); }
.tr-foot { margin-top: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tr-foot .pm-help a, .tr-hint a, .tr-save a { color: var(--pm-fire-deep); text-decoration: underline; font-weight: 700; }
.tr-fine { font-size: 12.5px !important; color: var(--pm-sub-text); }

/* ================= 테이블(3D) 화면 ================= */
.tr-read { position: relative; max-width: 1480px; margin: 0 auto; padding: 8px 12px 36px; }
.tr-stage { position: relative; height: calc(100vh - 86px); height: calc(100svh - 86px); min-height: 520px; max-height: 980px; overflow: hidden; border-radius: 30px; background: radial-gradient(ellipse at 50% 40%, #4a3a6a 0%, #1f1a3f 70%, #17132f 100%); box-shadow: var(--pm-shadow); touch-action: none; user-select: none; -webkit-user-select: none; isolation: isolate; }
.tr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: default; touch-action: none; }
.tr-stage.is-pick canvas { cursor: pointer; }
.tr-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(20, 12, 36, .38) 82%, rgba(14, 8, 28, .72) 100%); z-index: 1; }
.tr-loading { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: #1c1745; color: var(--tr-gold-soft); font-family: var(--pm-font-head); font-size: 20px; transition: opacity .5s; }
.tr-loading.is-done { opacity: 0; pointer-events: none; }
.tr-nogl { position: absolute; left: 16px; right: 16px; top: 40%; z-index: 9; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--pm-cream); color: var(--pm-ink); text-align: center; font-size: 14.5px; line-height: 1.6; }

.tr-hud { position: absolute; z-index: 5; left: 50%; top: 14px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); box-sizing: border-box; padding: 12px 16px 12px; border-radius: 22px; background: var(--tr-glass); color: var(--tr-moon); text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(10, 6, 30, .35); border: 1px solid rgba(251, 227, 164, .22); transition: opacity .4s, transform .4s; }
.tr-hud-title { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: center; font-size: 12.5px; color: rgba(255, 248, 220, .75); }
.tr-hud-spread { font-family: var(--pm-font-head); font-size: 14px; color: var(--tr-gold-soft); }
.tr-hud-q { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-hud-msg { margin: 4px 0 0; font-family: var(--pm-font-head); font-size: 19px; line-height: 1.35; }
.tr-dots { display: flex; gap: 7px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.tr-dots:empty { display: none; }
.tr-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tr-gold); box-sizing: border-box; transition: background .3s, transform .3s; }
.tr-dots i.is-on { background: var(--tr-gold); transform: scale(1.15); }
.tr-hud-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.tr-hud-acts:empty { display: none; }
.tr-btn { box-sizing: border-box; min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--pm-r-pill); background: var(--tr-gold); color: #3a2a10; font-family: var(--pm-font-head); font-size: 16px; line-height: 1.2; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: transform .15s, filter .15s; }
.tr-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tr-btn--ghost { background: rgba(255, 248, 220, .14); color: var(--tr-moon); box-shadow: none; font-family: var(--pm-font-body); font-size: 14px; }
.tr-hud.is-compact .tr-hud-title, .tr-hud.is-compact .tr-dots { display: none; }
.tr-hud.is-quiet { opacity: .0; pointer-events: none; transform: translate(-50%, -12px); }

.tr-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.tr-slot { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 10px 3px 4px; border-radius: var(--pm-r-pill); background: rgba(36, 31, 77, .72); color: var(--tr-moon); font-size: 12px; line-height: 1.2; white-space: nowrap; will-change: transform; transition: opacity .3s; }
.tr-slot b { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--tr-gold); color: #3a2a10; font-family: var(--pm-font-head); font-weight: 400; font-size: 12px; }
.tr-slot span { overflow: hidden; text-overflow: ellipsis; }
.tr-slot.is-mini { padding: 2px; }
.tr-slot.is-mini span { display: none; }
.tr-slot.is-dim { opacity: .0; }

/* ----- 풀이 패널 ----- */
.tr-result { color: var(--pm-ink); }
.tr-result-in { max-width: 760px; margin: 0 auto; padding: 8px 4px 0; }
.tr-sheet-handle { display: none; }
.tr-result-head { text-align: center; padding: 6px 4px 14px; }
.tr-result-title { margin: 0 0 6px; font-family: var(--pm-font-head); font-weight: 400; font-size: 26px; line-height: 1.25; }
.tr-result-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pm-sub-text); }
.tr-q { margin: 12px auto 0; padding: 10px 14px; max-width: 420px; border-radius: 14px; background: var(--pm-soft); font-size: 14.5px; line-height: 1.6; }
.tr-q span { display: block; font-size: 12px; font-weight: 700; color: var(--pm-fire-deep); }
.tr-when { margin: 8px 0 0; font-size: 13px; color: var(--pm-sub-text); }
.tr-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr-card { padding: 18px 18px 16px; border-radius: var(--pm-r-card); background: var(--pm-cream); box-shadow: var(--pm-shadow-sm); border-top: 6px solid var(--pm-metal); }
.tr-card.tr-el-fire { border-top-color: var(--pm-fire); }
.tr-card.tr-el-water { border-top-color: var(--pm-water); }
.tr-card.tr-el-earth { border-top-color: var(--pm-earth); }
.tr-card.tr-el-metal { border-top-color: #cfc6b2; }
.tr-pos { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--pm-sub-text); }
.tr-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tr-night2); color: var(--tr-moon); font-family: var(--pm-font-head); font-weight: 400; font-size: 13px; }
.tr-name { margin: 0; font-family: var(--pm-font-head); font-weight: 400; font-size: 24px; line-height: 1.25; }
.tr-name small { display: block; margin-top: 2px; font-family: var(--pm-font-body); font-size: 14px; font-weight: 600; color: var(--pm-sub-text); }
.tr-meta { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.tr-ori { padding: 2px 10px; border-radius: var(--pm-r-pill); background: #e2f3dc; color: #2f6a24; font-weight: 700; }
.tr-ori.is-rev { background: #efe8ff; color: #5a3fa5; }
.tr-suit { color: var(--pm-sub-text); }
.tr-kw { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tr-kw li { padding: 3px 11px; border-radius: var(--pm-r-pill); background: var(--pm-soft); font-size: 13px; }
.tr-posdesc { margin: 12px 0 0; padding-left: 10px; border-left: 3px solid var(--pm-line); font-size: 13px; line-height: 1.55; color: var(--pm-sub-text); }
.tr-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.8; }
.tr-cross { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: #f3efff; font-size: 14px; line-height: 1.65; color: #3b3470; }
.tr-chip { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: var(--pm-r-pill); background: var(--tr-night2); color: var(--tr-moon); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.tr-chip--gives, .tr-chip--receives { background: #3f8a3a; }
.tr-chip--tune_a, .tr-chip--tune_b { background: #8a6a2a; }
.tr-chip--same { background: #5a3fa5; }
.tr-end { margin-top: 18px; display: grid; gap: 14px; }
.tr-hint { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pm-info-bg); color: var(--pm-info-ink); font-size: 14px; line-height: 1.6; }
.tr-summary { padding: 18px; border-radius: var(--pm-r-card); background: var(--pm-soft); }
.tr-summary h2 { margin: 0 0 6px; font-family: var(--pm-font-head); font-weight: 400; font-size: 19px; }
.tr-summary p { margin: 0; font-size: 15px; line-height: 1.8; }
.tr-advice { position: relative; padding: 20px 18px 18px; border-radius: var(--pm-r-card); background: linear-gradient(160deg, #3b3470, #241f4d); color: var(--tr-moon); box-shadow: var(--pm-shadow-sm); border: 2px solid var(--tr-gold); }
.tr-advice-tag { display: inline-block; margin-bottom: 8px; padding: 2px 12px; border-radius: var(--pm-r-pill); background: rgba(242, 193, 78, .2); color: var(--tr-gold-soft); font-size: 12.5px; font-weight: 700; }
.tr-advice p { margin: 0; font-family: var(--pm-font-head); font-size: 18px; line-height: 1.65; }
.tr-save { padding: 10px 12px; border-radius: 14px; background: var(--pm-cream); font-size: 13.5px; line-height: 1.6; color: var(--pm-sub-text); text-align: center; }
.tr-save.is-ok { background: #e2f3dc; color: #2f6a24; font-weight: 700; }
.tr-save.is-err { background: var(--pm-error-bg); color: var(--pm-error); }
.tr-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tr-end .tr-fine { margin: 0; text-align: center; }

/* JS 가 켜져 있으면 풀이는 테이블 위로 올라오는 패널 */
html.tr-js .tr-result.is-sheet { position: absolute; z-index: 6; right: 14px; top: 14px; bottom: 14px; width: min(410px, 40%); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 18px; border-radius: 24px; background: rgba(255, 251, 245, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 48px rgba(10, 6, 30, .45); transform: translateX(calc(100% + 30px)); transition: transform .55s cubic-bezier(.22, .9, .3, 1); will-change: transform; }
html.tr-js .tr-result.is-sheet.is-open { transform: none; }
html.tr-js .is-sheet .tr-item { display: none; }
html.tr-js .is-sheet .tr-item.is-shown { display: block; animation: trIn .5s both; }
html.tr-js .is-sheet .tr-end { display: none; }
html.tr-js .is-sheet .tr-end.is-shown { display: grid; animation: trIn .6s both; }
html.tr-js .is-sheet .tr-item.is-focus .tr-card { box-shadow: 0 0 0 3px var(--tr-gold), var(--pm-shadow-sm); }
html.tr-js .is-sheet .tr-result-head { padding-top: 0; }
html.tr-js .is-sheet .tr-result-title { font-size: 22px; }
@keyframes trIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html:not(.tr-js) .tr-stage, html.tr-nogl .tr-stage { display: none; }
html.tr-nogl .tr-result.is-sheet { position: static; transform: none; width: auto; }
.tr-stage .tr-result.is-sheet .pm-eyebrow { display: none; }

/* 기록 */
.tr-hist-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tr-hist-list .pm-card + .pm-card { margin-top: 0; }
.tr-hist-item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px 20px; }
.tr-hist-top { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-hist-name { font-family: var(--pm-font-head); font-weight: 400; font-size: 20px; }
.tr-hist-date { font-size: 12.5px; color: var(--pm-sub-text); }
.tr-hist-q { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pm-sub-text); }
.tr-hist-cards { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.tr-mini { padding: 3px 11px; border-radius: var(--pm-r-pill); background: var(--pm-metal); font-size: 13px; }
.tr-mini.tr-el-fire { background: #fbd5cb; }
.tr-mini.tr-el-water { background: #d3def5; }
.tr-mini.tr-el-earth { background: #f8e7b4; }
.tr-mini.tr-el-metal { background: #ece7dc; }
.tr-mini i { font-style: normal; font-size: 11px; font-weight: 700; color: #5a3fa5; }
.tr-empty { text-align: center; }
.tr-empty img { display: block; margin: 0 auto 8px; }
.tr-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; font-size: 14px; color: var(--pm-sub-text); }

/* ----- 좁은 화면: 풀이는 아래에서 올라오는 시트 ----- */
@media (max-width: 860px) {
    .tr-read { padding: 6px 0 28px; }
    .tr-stage { border-radius: 0 0 26px 26px; height: calc(100vh - 70px); height: calc(100svh - 70px); }
    .tr-hero-copy { padding: 26px 20px 24px; }
    .tr-hero-title { font-size: 26px; }
    html.tr-js .tr-result.is-sheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 56%; padding: 6px 12px 16px; transform: translateY(calc(100% + 24px)); }
    html.tr-js .tr-result.is-sheet.is-open { transform: none; }
    html.tr-js .tr-result.is-sheet.is-peek { transform: translateY(calc(100% - 44px)); }
    html.tr-js .is-sheet .tr-sheet-handle { display: block; position: sticky; top: -6px; z-index: 2; margin: 0 -12px 2px; background: linear-gradient(rgba(255, 251, 245, .98), rgba(255, 251, 245, .9)); }
    .tr-sheet-toggle { display: block; width: 100%; height: 44px; border: 0; background: transparent; cursor: pointer; }
    .tr-grip { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--pm-line); }
    .tr-hud { top: 8px; padding: 10px 12px; }
    .tr-hud-msg { font-size: 17px; }
    .tr-name { font-size: 22px; }
}
@media (max-width: 480px) {
    .tr-sp { padding: 16px; gap: 12px; }
    .tr-spreads { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-twinkle circle { animation: none; }
    html.tr-js .tr-result.is-sheet, .tr-hud, .tr-loading { transition: none; }
    html.tr-js .is-sheet .tr-item.is-shown, html.tr-js .is-sheet .tr-end.is-shown { animation: none; }
    .tr-sp { transition: none; }
}
.tr-q-card textarea { min-height: 72px; }
.tr-item, .tr-end { scroll-margin-top: 54px; }

/* 이미 뽑은 카드 다시 보기 */
.tr-again { margin: 14px auto 0; max-width: 460px; padding: 12px 14px; border-radius: 16px; background: #f3efff; text-align: center; }
.tr-again-t { margin: 0 0 10px; font-family: var(--pm-font-head); font-size: 16px; color: #3b3470; }
.tr-again-acts { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tr-extra { width: 100%; }
.tr-extra summary { list-style: none; cursor: pointer; }
.tr-extra summary::-webkit-details-marker { display: none; }
.tr-extra[open] summary { margin-bottom: 10px; }
.tr-extra form { text-align: left; }
.tr-extra .pm-field { margin-bottom: 10px; }
.tr-extra label small { font-weight: 400; color: var(--pm-sub-text); }
.tr-extra textarea { min-height: 64px; }
.tr-extra .pm-btn { width: 100%; }
@media (min-width: 861px) { .tr-stage.has-sheet .tr-hud { left: calc((100% - min(410px, 40%) - 28px) / 2); width: min(560px, calc(100% - min(410px, 40%) - 52px)); } }
@media (max-width: 860px) { #trSheet { display: none !important; } }

/* ================= 카드 뜻 도서관(고르기 화면 아래)·카드 한 장 화면(card.php) ================= */
.tc-lib { margin-top: 22px; }
.tc-lib-h { margin: 16px 0 8px; font-family: var(--pm-font-head); font-weight: 400; font-size: 17px; }
.tc-lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tc-lib-list a, .tc-crumb a { display: inline-flex; align-items: center; min-height: var(--pm-tap, 44px); padding: 0 14px; border-radius: var(--pm-r-pill); background: var(--pm-soft); color: var(--pm-ink); font-size: 15px; text-decoration: none; }
.tc-lib-list a:hover { background: var(--pm-soft2); }
.tc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--pm-sub-text); }
.tc-main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 16px; }
.tc-img { flex: 0 0 auto; width: 200px; max-width: 100%; height: auto; aspect-ratio: 512 / 880; border-radius: var(--pm-r-input); }
.tc-body { flex: 1 1 240px; min-width: 0; }
.tc-sec { margin-bottom: 14px; }
.tc-dl { margin: 0; }
.tc-dl dt { margin-top: 12px; font-weight: 700; }
.tc-dl dd { margin: 4px 0 0; line-height: 1.7; }
.tc-cta { text-align: center; margin: 18px 0; }
.tc-pn { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tc-fine { margin-top: 14px; }