/* tarot 페이지 전용 CSS — 2026-07-30 인라인 <style>에서 외부화(방침: 인라인 제거 → assets/css/<slug>/<slug>.css).
   공통 컴포넌트는 common.css가 담당하며 여기엔 이 페이지(클러스터) 고유 규칙만 둔다. */
:root{--card-ratio:200 / 351}

#tarot-page{max-width:var(--max-width);margin:0 auto;padding:32px 16px 80px;color:var(--text-main)}
#result, #selection-status{width:100%;max-width:100%;margin:0 auto}

#fortune-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.fortune-btn{background:var(--surface);border:1px solid rgba(var(--heading-rgb),0.06);border-radius:20px;box-shadow:var(--shadow-sm);overflow:visible;cursor:pointer;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;position:relative;display:flex;flex-direction:column}
.fortune-btn:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(var(--point-rgb),0.28)}
.fortune-btn.disabled{opacity:0.55;cursor:default;pointer-events:none}
.fortune-btn .img-wrap{padding:10px 10px 0;flex:1;display:flex;align-items:stretch}
.fortune-btn .img-wrap img{width:100%;aspect-ratio:200/351;object-fit:cover;display:block;border-radius:10px;box-shadow:0 4px 12px rgba(var(--heading-rgb),0.15)}
.fortune-btn p{margin:0;padding:10px 12px 14px;font-size:1rem;font-weight:700;text-align:center}
#question-container, .tarot-play-area{display:none}
#userQuestion{width:100%;margin-top:10px;padding:16px 18px;border:1px solid rgba(var(--heading-rgb),0.1);border-radius:14px;font-size:1rem;outline:none;background:var(--surface);transition:border-color 0.2s ease,box-shadow 0.2s ease}
#userQuestion:focus{border-color:rgba(var(--blue-rgb),0.35);box-shadow:0 0 0 4px rgba(var(--blue-rgb),0.08)}
#selection-status{display:none;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(var(--surface-rgb),0.96);border:1px solid rgba(var(--heading-rgb),0.07);box-shadow:var(--shadow-sm);font-size:0.92rem;font-weight:700;color:var(--text-main);position:sticky;top:10px;z-index:20;backdrop-filter:blur(10px)}
#selection-status .count-badge{min-width:44px;height:32px;padding:0 10px;border-radius:999px;background:linear-gradient(135deg,var(--point),var(--point-dark));color:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:0.95rem;font-variant-numeric:tabular-nums;box-shadow:0 5px 14px rgba(var(--point-rgb),0.26);transition:transform 0.15s ease}
#selection-status .count-badge.bump{transform:scale(1.18)}
/* 「다른 운세 고르기」 — 운세 종류를 고른 뒤 돌아갈 길(2026-08-20 제보).
   ⚠️ 크기는 공용 `.btn-sub--compact`(44·알약) 정본을 쓴다 — 여기서 다시 적지 않는다. */
#tarot-back-bar{margin:0 0 14px}
@media(max-width:600px){#tarot-back-bar>button{width:100%}}
#deck-container{position:relative;width:100%;overflow:visible;display:none;padding:14px 14px 18px;border-radius:20px;background:radial-gradient(ellipse at top left,rgba(var(--point-rgb),0.06) 0%,transparent 55%),radial-gradient(ellipse at bottom right,rgba(var(--blue-rgb),0.06) 0%,transparent 55%),linear-gradient(180deg,#fdf8ff 0%,#f7f8ff 100%);border:1px solid rgba(200,180,220,0.22);box-shadow:var(--shadow-md);cursor:default;user-select:none}
#deck-hint{display:flex;align-items:center;justify-content:center;gap:10px;font-size:0.8rem;color:var(--text-sub);margin-bottom:10px;font-weight:600;flex-wrap:wrap}
.hint-text{flex:1;min-width:120px;text-align:center}
.hint-auto-btn{flex-shrink:0;padding:6px 14px;border-radius:999px;border:2px solid var(--point);background:var(--surface);color:var(--point);font-size:0.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background 0.18s ease}
.hint-auto-btn:hover{background:rgba(var(--point-rgb),0.06)}
.hint-auto-btn:disabled{opacity:0.45;pointer-events:none}
#deck-hint strong{color:var(--point)}
#deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;padding:2px}
.deck-card{width:100%;aspect-ratio:var(--card-ratio);height:auto;cursor:pointer;position:relative;border-radius:12px;overflow:visible;display:block;transition:transform 0.2s cubic-bezier(.34,1.56,.64,1),filter 0.18s ease;filter:brightness(0.96)}

/* 스크롤·드래그 중 커서가 지나가며 카드가 튀어 오르던 문제 — 위치 이동 없이 밝기만 */
.deck-card:hover{z-index:5;filter:brightness(1.08)}
.deck-card.selected{transform:translateY(-10px) scale(1.08);z-index:8;filter:brightness(1.07)}
.deck-card::after{content:"";position:absolute;inset:-3px;border-radius:14px;background:transparent;border:2.5px solid transparent;opacity:0;z-index:-1;transition:opacity 0.2s ease,box-shadow 0.2s ease}
.deck-card.selected .card-inner{box-shadow:0 0 0 3px var(--point),0 10px 28px rgba(var(--point-rgb),0.35) !important}
.deck-card:hover .card-inner{box-shadow:0 0 0 2px rgba(var(--point-rgb),0.4),0 8px 20px rgba(var(--heading-rgb),0.18)}
.deck-card .order-badge{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--point),var(--point-dark));color:var(--surface);font-size:0.75rem;font-weight:800;display:none;align-items:center;justify-content:center;z-index:10;box-shadow:0 3px 10px rgba(var(--point-rgb),0.45);animation:popIn 0.25s cubic-bezier(.34,1.56,.64,1) both}
.deck-card.selected .order-badge{display:flex}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.deck-card .check-icon{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:var(--surface);font-size:0.78rem;display:none;align-items:center;justify-content:center;z-index:10;box-shadow:0 3px 10px rgba(34,197,94,0.45);animation:popIn 0.25s cubic-bezier(.34,1.56,.64,1) both}
.deck-card.selected .check-icon{display:flex}
.deck-card.maxed{filter:brightness(0.52) saturate(0.3);cursor:not-allowed;pointer-events:none;transform:none !important}
.card-inner{width:100%;height:100%;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(var(--heading-rgb),0.14);background:var(--surface);transition:box-shadow 0.2s ease}
.deck-card.selected .card-inner{box-shadow:0 12px 28px rgba(var(--point-rgb),0.2)}
/* 카드 광택(shine) 제거 — 덱 78장이 동시에 무한 반복해 눈이 피로하고 뒷면 무늬를 덮었다.
   결과 카드 등 단발 연출이 필요하면 그 자리에서만 다시 넣을 것. */
.deck-card img, .card-face img, #result-cards img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;backface-visibility:hidden}
#confirm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(var(--point-rgb),0.26)}
#confirm-btn{margin:0 auto;visibility:hidden}
#sticky-confirm{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;animation:slideUpIn 0.3s cubic-bezier(.34,1.56,.64,1) both;filter:drop-shadow(0 8px 24px rgba(var(--point-rgb),0.35))}
#sticky-confirm.visible{display:flex}
#sticky-confirm .sticky-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:180px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--point),var(--point-dark));color:var(--surface);font-size:1rem;font-weight:700;box-shadow:0 12px 28px rgba(var(--point-rgb),0.4);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}
#sticky-confirm .sticky-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(var(--point-rgb),0.45)}
@keyframes slideUpIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.btn-wrap{text-align:center;margin-top:12px}
#tarot-loader{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#333}
#tarot-loader .loading-center{width:100%;height:100%;position:relative}
#tarot-loader .loading-center-absolute{position:absolute;left:50%;top:50%;height:50px;width:150px;margin-top:-25px;margin-left:-75px}
#tarot-loader .object{width:8px;height:50px;margin-right:5px;background-color:var(--surface);animation:tarotLoaderAnimate 1s infinite;float:left}
#tarot-loader .object:last-child{margin-right:0}
#tarot-loader .object:nth-child(2){animation-delay:.1s}
#tarot-loader .object:nth-child(3){animation-delay:.2s}
#tarot-loader .object:nth-child(4){animation-delay:.3s}
#tarot-loader .object:nth-child(5){animation-delay:.4s}
#tarot-loader .object:nth-child(6){animation-delay:.5s}
#tarot-loader .object:nth-child(7){animation-delay:.6s}
#tarot-loader .object:nth-child(8){animation-delay:.7s}
#tarot-loader .object:nth-child(9){animation-delay:.8s}
#tarot-loader .object:nth-child(10){animation-delay:.9s}
@keyframes tarotLoaderAnimate{50%{transform:scaleY(0)}}
#result{padding:28px;min-height:340px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--card-border);background:radial-gradient(circle at top,rgba(var(--point-rgb),0.08),transparent 28%),radial-gradient(circle at bottom right,rgba(var(--blue-rgb),0.08),transparent 24%),rgba(var(--surface-rgb),0.96);display:none;flex-direction:column;align-items:center}
#result h2, #result h3{margin:18px 0 12px;color:var(--blue);font-size:1.35rem;line-height:1.4;text-align:center}
#result p{font-size:1rem;line-height:1.8;color:var(--text-main);margin:10px 0;text-align:left}
#interpretation-text{opacity:0;transition:opacity 0.8s ease;margin-top:22px;width:100%}
#card-detail-overlay{display:none;position:fixed;inset:0;z-index:99999;background:rgba(var(--heading-rgb),0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:flex-end;justify-content:center;padding:0;animation:overlayFadeIn 0.22s ease both}
#card-detail-overlay.open{display:flex}
@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}
#card-detail-sheet{width:100%;max-width:480px;max-height:90vh;background:var(--surface);border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:sheetSlideUp 0.32s cubic-bezier(.34,1.1,.64,1) both;box-shadow:0 -8px 48px rgba(var(--heading-rgb),0.22)}
@keyframes sheetSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
#card-detail-handle{flex-shrink:0;padding:10px 0 0;display:flex;justify-content:center}
#card-detail-handle::after{content:"";display:block;width:36px;height:4px;background:rgba(var(--heading-rgb),0.15);border-radius:2px}
#card-detail-card-area{display:flex;justify-content:center;align-items:center;padding:16px 24px 0;flex-shrink:0}
#card-detail-img-wrap{width:clamp(90px,28vw,130px);aspect-ratio:200/351;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(var(--heading-rgb),0.28);flex-shrink:0}
#card-detail-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
#card-detail-header{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 20px 10px;border-bottom:1px solid rgba(var(--heading-rgb),0.07);flex-shrink:0;text-align:center;position:relative}
#card-detail-close{position:absolute;top:10px;right:14px;width:30px;height:30px;border:none;border-radius:50%;background:rgba(var(--heading-rgb),0.07);cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease;line-height:1}
#card-detail-close:hover{background:rgba(var(--heading-rgb),0.14)}
#card-detail-position{font-size:0.7rem;font-weight:700;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase}
#card-detail-name{font-size:1.05rem;font-weight:800;color:var(--heading);line-height:1.3}
#card-detail-direction{display:inline-block;font-size:0.72rem;font-weight:700;padding:2px 10px;border-radius:999px}
#card-detail-direction.upright{background:rgba(var(--blue-rgb),0.1);color:var(--blue)}
#card-detail-direction.reversed{background:rgba(var(--point-rgb),0.1);color:var(--point)}
#card-detail-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
#card-detail-body{overflow-y:auto;padding:14px 20px 32px;flex:1;-webkit-overflow-scrolling:touch}
#card-detail-body p{font-size:0.95rem;line-height:1.85;color:var(--text-main);margin:0 0 10px;word-break:keep-all}
#card-detail-body p:last-child{margin-bottom:0}
#card-detail-empty{color:var(--text-sub);font-style:italic;font-size:0.9rem;text-align:center;padding:20px 0}
/* 카드 데이터 보강 필드(원소·점성 메타, 카드 자체 의미 폴백) — 2026-08-05 */
.card-meta{font-size:0.82em;font-weight:400;color:var(--text-sub)}
.card-detail-sep{border:0;border-top:1px solid rgba(var(--heading-rgb),0.1);margin:16px 0}
/* #card-detail-body p 규칙(위)보다 강해야 하므로 !important 대신 id를 겹쳐 특정도를 올린다 */
#card-detail-body p.card-own-title{margin-bottom:6px}
#card-detail-body p.card-detail-hint{font-size:0.85rem;color:var(--text-sub);margin-top:14px}
.spread-result-img{cursor:pointer;transition:opacity 0.15s ease,filter 0.15s ease}
.spread-result-img:hover{opacity:0.82;filter:brightness(1.05)}
.spread-result-img:active{opacity:0.7}
@media(min-width:600px){#card-detail-overlay{align-items:center;padding:24px}#card-detail-sheet{border-radius:20px;max-height:80vh;animation:modalScaleIn 0.28s cubic-bezier(.34,1.1,.64,1) both}#card-detail-img-wrap{width:clamp(110px,18vw,160px)}@keyframes modalScaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}#card-detail-handle{display:none}}
#result-actions{margin-top:28px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* ⚠️ 공유 줄이 칩 줄(.ck-act-row)이면 그 정본(common.css — ≤560px 1열 격자)을 따른다(2026-10-01 · FT-7).
   이 id 규칙이 특정도로 이겨 칩 줄만 flex·간격 10 으로 갈렸다 — 옛 버튼 줄에만 남긴다. */
#result-share-actions:not(.ck-act-row){margin-top:10px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
#result-share-actions .btn-main, #result-share-actions .btn-sub{min-width:130px}
.result-restart-link{display:block;text-align:center;margin-top:20px;font-size:0.85rem;color:var(--text-sub);cursor:pointer;text-decoration:underline;background:none;border:none;padding:4px 0}
.result-restart-link:hover{color:var(--point)}
#result-card{width:clamp(140px,30vw,180px);aspect-ratio:var(--card-ratio);height:auto;display:block;perspective:1000px;margin:0 auto 16px;padding:10px;flex-shrink:0}
.result-card-inner{position:relative;width:100%;height:100%;transition:transform 0.8s ease;transform-style:preserve-3d;border-radius:16px;box-shadow:0 22px 42px rgba(var(--heading-rgb),0.18)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden}
.card-face.front{transform:rotateY(180deg)}
.flip{transform:rotateY(180deg)}
#result-cards{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
#result-cards > div{width:140px;text-align:center}
#result-cards .card-inner{width:100%;aspect-ratio:var(--card-ratio);height:auto;border-radius:16px;margin-bottom:10px}
.result-card-label{font-size:0.88rem;font-weight:700;color:var(--text-sub);margin-top:6px;line-height:1.4}
.ai-interpretation{margin-top:10px;text-align:left}
.ai-interpretation p{margin:0 0 14px;font-size:1rem;line-height:1.85;color:var(--text-main)}
.ai-interpretation p:last-child{margin-bottom:0}
.ai-interpretation strong{color:var(--heading);font-weight:700}
.ai-interpretation h3, .ai-interpretation h4{margin:18px 0 10px;color:var(--blue);line-height:1.4}
.ai-interpretation ul, .ai-interpretation ol{margin:10px 0 14px;padding-left:22px}
.ai-interpretation li{margin-bottom:6px}

.tool-links li + li{margin-top:6px}
#spread-section h3{font-size:1rem;font-weight:700;margin:0 0 12px;color:var(--heading)}
#spread-category-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.spread-tab{padding:6px 14px;border-radius:999px;border:1px solid rgba(var(--heading-rgb),0.1);background:var(--surface);font-size:0.88rem;font-weight:700;cursor:pointer;color:var(--text-sub);transition:all 0.2s ease}
.spread-tab:hover{border-color:var(--point);color:var(--point)}
.spread-tab.active{background:var(--point);border-color:var(--point);color:var(--surface);box-shadow:0 6px 14px rgba(var(--point-rgb),0.2)}
#spread-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.spread-card{padding:14px 12px 15px;border:2px solid rgba(var(--heading-rgb),0.07);border-radius:14px;background:var(--surface);cursor:pointer;transition:all 0.2s ease;text-align:center}
.spread-card:hover{border-color:rgba(var(--point-rgb),0.3);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.spread-card.active{border-color:var(--point);box-shadow:0 0 0 3px rgba(var(--point-rgb),0.1),var(--shadow-sm);transform:translateY(-3px)}
.spread-card-icon{font-size:1.5rem;line-height:1;margin-bottom:5px}
.spread-card-name{font-size:0.92rem;font-weight:700;color:var(--heading);display:block}
.spread-card-count{font-size:0.78rem;color:var(--text-sub);display:block;margin-top:2px}
.spread-positions-preview{margin-top:14px;padding:14px 16px;background:rgba(var(--blue-rgb),0.04);border:1px solid rgba(var(--blue-rgb),0.1);border-radius:12px;display:none}
.spread-positions-preview h4{font-size:0.9rem;font-weight:700;color:var(--blue);margin:0 0 8px}
.spread-positions-preview ol{margin:0;padding-left:18px}
.spread-positions-preview li{font-size:0.85rem;line-height:1.7;color:var(--text-sub)}
#auto-select-btn{visibility:hidden}
#auto-select-btn:hover{background:rgba(var(--point-rgb),0.05);transform:translateY(-2px);box-shadow:0 10px 20px rgba(var(--point-rgb),0.16)}
#auto-select-btn:disabled{opacity:0.45;pointer-events:none}
@keyframes cardWave{0%{transform:translateY(0) rotate(0deg) scale(1)}25%{transform:translateY(-14px) rotate(-4deg) scale(1.06)}50%{transform:translateY(-6px) rotate(3deg) scale(1.03)}75%{transform:translateY(-10px) rotate(-2deg) scale(1.05)}100%{transform:translateY(0) rotate(0deg) scale(1)}}
@keyframes cardWaveReverse{0%{transform:translateY(0) rotate(0deg) scale(1)}25%{transform:translateY(-10px) rotate(3deg) scale(1.04)}50%{transform:translateY(-16px) rotate(-4deg) scale(1.07)}75%{transform:translateY(-8px) rotate(2deg) scale(1.03)}100%{transform:translateY(0) rotate(0deg) scale(1)}}
.deck-card.wave-odd{animation:cardWave 0.55s ease-in-out !important;z-index:5}.deck-card.wave-even{animation:cardWaveReverse 0.55s ease-in-out !important;z-index:5}
@keyframes cardConfirm{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-16px) scale(1.14)}60%{transform:translateY(-10px) scale(1.1)}100%{transform:translateY(-8px) scale(1.08)}}
.deck-card.confirming{animation:cardConfirm 0.45s ease-out forwards !important;z-index:10 !important}
.deck-card.confirming .card-inner{box-shadow:0 0 0 3px var(--point),0 18px 36px rgba(var(--point-rgb),0.45) !important}
@keyframes fadeInScale{from{transform:scale(0.94);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}
@keyframes slideIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes shine{0%{transform:translateX(-130%)}45%{transform:translateX(140%)}100%{transform:translateX(140%)}}
@keyframes bounce{0%,80%,100%{transform:scale(0.7);opacity:0.7}40%{transform:scale(1);opacity:1}}

.slide-out{animation:slideOut 0.45s ease-out forwards}
.slide-in{animation:slideIn 0.5s ease-out forwards}

@media(max-width:768px){#tarot-page{padding:16px 12px 48px}#result{padding:16px;border-radius:20px}#fortune-selection{grid-template-columns:repeat(2,1fr);gap:10px}.fortune-btn p{font-size:0.9rem;padding:10px 8px 12px}#deck{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}.deck-card{border-radius:10px}#result-card{width:clamp(130px,28vw,160px);height:auto;margin:0 auto 12px;padding:8px}#result-cards > div{width:96px}#result-cards .card-inner{width:100%;height:auto}#result h2, #result h3{font-size:1.1rem}#result p, .ai-interpretation p{font-size:0.93rem;line-height:1.7}#confirm-btn, .btn-main{min-width:120px;font-size:1rem;max-width:none}#selection-status{font-size:0.88rem;padding:8px 12px}#selection-status .count-badge{min-width:34px;height:30px}#spread-grid{grid-template-columns:repeat(3,1fr);gap:7px}.spread-card{padding:10px 7px 11px}.spread-card-icon{font-size:1.2rem}.spread-card-name{font-size:0.8rem}.spread-card-count{font-size:0.7rem}}
@media(max-width:480px){#deck{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}#deck-container{padding:12px 10px 16px}#result-card{width:90px}#spread-grid{grid-template-columns:repeat(2,1fr)}}
/* 심화 구매 카드 — saju 클러스터와 동일 스타일(타로 페이지는 saju.css 미로드라 여기 정의) + 존재감 강화 */

/* tarot — 인라인 style 이관(2026-08-04). 선택자 반복은 특정도 조절이다(오타 아님). */
.tarx-1.tarx-1{margin-top:6px;font-size:0.85rem;color:var(--text-sub)}
.tarx-2.tarx-2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;min-height:46px;align-items:center}

/* ── 덱: 가로로 훑으며 고르는 스트립 ────────────────────────────────
   78장을 세로로 다 뿌리면 스크롤이 페이지를 지배하고, 세로 내부 스크롤은 "고르는" 느낌이 약하다.
   그래서 여러 줄짜리 가로 스트립으로 둔다.
   🔴 커스텀 드래그(grab) 를 붙이지 않는다 — 예전 가로 스크롤에서 나던 오작동은 가로 스크롤
   자체가 아니라 드래그 스크립트와 탭 선택의 '움직임인가 클릭인가' 판정 충돌에서 왔다.
   브라우저 네이티브 스크롤 + 탭만 쓰면 그 충돌이 생길 수 없다. */
#deck{
  grid-auto-flow:column;
  grid-template-columns:none;
  grid-template-rows:repeat(3,auto);
  grid-auto-columns:82px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  /* 위 여유 26px = 선택 리프트 10px + 체크 배지 9px + scale(1.08) 상단 증가분.
     overflow-y:hidden 이라 여유가 모자라면 선택 카드 머리가 잘린다(2026-08-12 실측). */
  padding:26px 2px 14px;
  scrollbar-width:thin;
}
.deck-card{will-change:transform}
/* 드래그 중에는 스냅·선택 하이라이트가 방해된다 */
#deck.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
#deck.is-dragging .deck-card{pointer-events:none}
@media(hover:hover){#deck{cursor:grab}}
@media(max-width:768px){
  #deck{grid-auto-columns:66px;grid-template-rows:repeat(3,auto);gap:7px;padding:6px 2px 10px}
  /* 카드 영역 폭 회수 — .section-card 28px 패딩이 좁은 화면에서 스트립을 눌렀다 */
  #deck-container{width:auto;margin-left:-26px;margin-right:-26px;padding-left:8px;padding-right:8px;border-radius:14px}
}
@media(max-width:480px){
  #deck{grid-auto-columns:58px;gap:6px}
  #deck-container{width:auto;margin-left:-26px;margin-right:-26px;padding-left:6px;padding-right:6px}
}
/* 터치 기기: hover 가 없으므로 누르는 순간 반응을 준다 */
@media(hover:none){
  .deck-card:hover{transform:none;filter:brightness(0.96)}
  .deck-card:active{transform:scale(0.94);filter:brightness(1.06)}
  .deck-card.selected{transform:translateY(-6px) scale(1.05)}
}

/* ── 모바일 덱 상단 정리 ────────────────────────────────────────────
   한 줄에 안내문구 + 역방향 + 버튼 3개를 밀어 넣어 "선택하/세요"로 끊기고
   버튼이 들쭉날쭉했다. 줄을 나눠 각자 제 폭을 갖게 한다. */
@media(max-width:600px){
  #deck-hint{gap:8px;margin-bottom:12px}
  #deck-hint .hint-text{flex:1 0 100%;text-align:center;word-break:keep-all;line-height:1.5}
  #deck-hint label{flex:1 0 100%;justify-content:center}
  #deck-hint .hint-auto-btn{flex:1 1 0;min-width:0;padding:0 6px;font-size:.78rem;white-space:nowrap}
  /* 카드를 상자 안쪽으로 모아 가장자리에 붙지 않게 */
  #deck{padding-left:10px;padding-right:10px}
  #deck-container{padding-left:10px;padding-right:10px}
}

/* 네이티브 스크롤바 숨김 + 진행바 — 어디쯤인지는 막대가 알려 준다 */
#deck{scrollbar-width:none;-ms-overflow-style:none}
#deck::-webkit-scrollbar{display:none}
#deck-progress{height:5px;margin:10px 12px 2px;border-radius:999px;background:rgba(var(--heading-rgb),0.06);border:1px solid rgba(var(--heading-rgb),0.10);box-sizing:content-box}
/* 채워지는 progress 방식 — 끝까지 가면 100% 가 된다("얼마나 훑었나"가 직관적).
   위치만 표시하는 썸 방식은 스크롤바와 같은 은유라 진행 정도가 덜 읽힌다. */
#deck-progress i{display:block;height:100%;width:calc(var(--p,0) * 100%);min-width:14px;border-radius:999px;background:linear-gradient(90deg,var(--point),var(--point-dark));box-shadow:0 0 0 1px rgba(var(--point-rgb),.35),0 1px 4px rgba(var(--point-rgb),.35);transition:width .08s linear}

/* 스크롤 여지 표시 — 끝에 닿으면 사라진다(더 볼 게 없다는 뜻) */
#deck{transition:box-shadow .18s ease}

/* 드래그 중 렌더 비용 줄이기 — 전환이 매 프레임 재시작되며 뚝뚝 끊겨 보였다 */
#deck.is-dragging{transition:none;scroll-behavior:auto}
#deck.is-dragging .deck-card{transition:none}
#deck.is-dragging ~ #deck-progress i{transition:none}

/* 스크롤 여지 표시 = 방향을 가린 페이드.
   처음엔 양쪽을 항상 페이드했는데 스크롤 0 에서도 첫 카드가 잘린 것처럼 보였다.
   이제 can-left/can-right 로 "더 볼 게 있는 쪽"에만 걸어 그 문제 없이 신호만 강하게 준다. */
#deck.can-right{
  mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
}
#deck.can-left{
  mask-image:linear-gradient(to right,transparent 0,#000 52px);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 52px);
}
#deck.can-left.can-right{
  mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 52px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 52px),transparent 100%);
}

/* 카드 상세 메타(메이저/마이너 · 슈트 · 숫자)와 결과 조합 요약 — 값만 적는 줄이라 작게.
   ⚠️ `.tarot-mix` 는 칩 줄이라 `.ck-chip-row` 규칙(좁은 화면 가로 스크롤)을 함께 받는다. */
.cd-meta{font-size:.78rem;color:var(--text-sub);margin-right:6px}
/* 조합 구성 — 🔴 칩이 아니라 문장이다(이 지면은 common.css 를 싣지 않아 `.tag` 가
   아무 스타일도 못 받았다). 기본 해석과 같은 목소리로 읽히게 본문 크기로 둔다. */
.tarot-mix{margin:-2px 0 16px !important;font-size:.9rem;line-height:1.75;color:var(--text-sub)}

/* ── 자리별 기본 해석 (2026-08-28) ───────────────────────────────────────────
   🔴 AI 를 부르지 않아도 나오는 풀이다. 그전에는 카드 그림과 조합 구성만 있고 글이 없어서,
      13장짜리 호로스코프에서는 카드를 열세 번 눌러야 뜻을 읽을 수 있었다.
   ⚠️ 자리 수가 많아도 읽히게 **한 자리 = 머리줄 + 뜻 + 조언** 세 줄로 묶는다.
   ⚠️ `#result p` 가 가운데 정렬이 아니라 왼쪽 정렬이므로 본문은 그대로 두고 머리줄만 배치한다. */
#tarot-basic-reading{width:100%;margin:0 0 18px}
.tbr-title{margin:18px 0 4px;color:var(--blue);font-size:1.05rem;text-align:left}
.tbr-sub{margin:0 0 12px;font-size:.85rem;color:var(--text-sub);line-height:1.6}
.tbr-row{padding:12px 0;border-top:1px solid rgba(var(--heading-rgb),.08)}
.tbr-row:first-of-type{border-top:0}
.tbr-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 6px !important}
.tbr-n{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--point-rgb),.12);color:var(--point);
  font-size:.74rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.tbr-pos{font-weight:700;color:var(--heading);font-size:.95rem}
.tbr-card{font-size:.86rem;color:var(--text-sub)}
.tbr-dir{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px}
.tbr-dir.up{background:rgba(var(--blue-rgb),.1);color:var(--blue)}
.tbr-dir.rev{background:rgba(var(--point-rgb),.1);color:var(--point)}
.tbr-desc{margin:0 0 6px !important;font-size:.95rem;line-height:1.75}
.tbr-desc.tbr-none{color:var(--text-sub);font-style:italic}
/* 문장형 풀이 — 🔴 사람이 읽어 주는 투라 문단으로 흐른다(줄 간격을 넉넉히). */
.tbr-p{margin:0 0 7px !important;font-size:.95rem;line-height:1.8}
.tbr-p:last-of-type{margin-bottom:9px !important}
.tbr-p.tbr-none{color:var(--text-sub);font-style:italic}
.tbr-adv{margin:0 !important;font-size:.92rem;line-height:1.7;color:var(--text-sub)}
.tbr-adv strong{color:var(--heading);margin-right:4px}
@media(max-width:768px){
  .tbr-pos{font-size:.9rem}
  .tbr-p{font-size:.9rem;line-height:1.75}
  .tbr-desc{font-size:.9rem;line-height:1.7}
  .tbr-adv{font-size:.88rem}
}
/* 키워드 칩 — ⚠️ 자리마다 5~7개라 줄바꿈으로 흐르게 둔다(가로 스크롤은 자리별로 두면 산만하다). */
.tbr-kw{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0 !important}
.tbr-kw span{font-size:.75rem;padding:2px 9px;border-radius:999px;
  background:rgba(var(--heading-rgb),.05);color:var(--text-sub);white-space:nowrap}

/* ══ 2026-09-30 타로 UX 개선 (점검 보고서 · tarot_spread_audit 전수 검사) ══════════════════════ */
/* 도구 화면(모바일)에서는 운세 종류가 첫 화면에 오게 — 사이트 머리와 긴 제목을 눌러 담는다.
   ⚠️ 사주 계열(saju.css `body:has(#saju-page)`)과 같은 값이다. 글자·제목 문구는 그대로(검색용). */
@media(max-width:600px){
  body:has(#tarot-page) .site-branding{margin-top:14px;margin-bottom:12px}
  body:has(#tarot-page) .site-title{font-size:1.5rem;line-height:1.2;margin:0}
  body:has(#tarot-page) .site-description{display:none}
  body:has(#tarot-page) .entry-title{font-size:1.3rem;line-height:1.4;margin-top:8px;margin-bottom:8px}
  body:has(#tarot-page) .entry-content{margin-top:12px}
  body:has(#tarot-page) #tarot-page{padding-top:6px}
}
/* 운세 종류 — 좁은 화면·앱에서 **3장 + 2장**(아랫줄 가운데)으로 첫 화면에 다섯 장을 모두 담는다.
   예전 2열은 세 줄 820px 라 첫 화면에 두 장만 보였고, 5장 한 줄은 카드가 38px 로 너무 작았다(비교 캡처).
   ⚠️ 표시 방식은 grid 로 둔다 — resetToStart 가 `display:grid` 로 되돌린다. 6칸 격자에 두 칸씩 놓고 4번째를 2칸째에서 시작. */
@media(max-width:600px){
  #fortune-selection{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .fortune-btn{grid-column:span 2;border-radius:14px}
  .fortune-btn:nth-child(4){grid-column:2 / span 2}
  .fortune-btn:hover{transform:none}
  .fortune-btn .img-wrap{padding:6px 6px 0}
  .fortune-btn .img-wrap img{border-radius:8px}
  .fortune-btn p{font-size:.82rem;padding:7px 4px 9px;line-height:1.3;word-break:keep-all}
}
.ck-app #fortune-selection{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ck-app .fortune-btn{grid-column:span 2;border-radius:14px}
.ck-app .fortune-btn:nth-child(4){grid-column:2 / span 2}
.ck-app .fortune-btn .img-wrap{padding:6px 6px 0}
.ck-app .fortune-btn .img-wrap img{border-radius:8px}
.ck-app .fortune-btn p{font-size:.84rem;padding:7px 4px 9px;line-height:1.3;word-break:keep-all}

/* 스프레드 카드 — 무엇을 보는 배열인지 누르기 전에(자리 요약) · 미리보기 설명 한 줄 */
.spread-card-pos{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;
  font-size:.72rem;line-height:1.4;color:var(--text-sub);word-break:keep-all}
.spread-hint{margin:-2px 0 8px;font-size:.84rem;line-height:1.6;color:var(--text-sub)}
/* ⚠️ `.ck-chip-row` 가 좁은 화면·앱에서 한 줄 가로 스크롤로 민다 — 여기서 flex-wrap 을 다시 켜지 않는다 */

/* 「고른 카드」 칸 — 자리 수만큼, 고를 때마다 채워진다 */
.deck-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 12px}
/* ⚠️ 1장 운세에서는 칸을 숨긴다(hidden) — display 가 그것을 덮어 빈 줄과 여백이 남았다(2026-09-30 전수 검사) */
.deck-tray[hidden]{display:none}
.tray-slot{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 11px 0 5px;border-radius:999px;
  border:1.5px dashed rgba(var(--heading-rgb),.18);background:transparent;color:var(--text-sub);
  font-size:.78rem;font-weight:700;white-space:nowrap;cursor:default}
.tray-slot b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--heading-rgb),.07);font-size:.72rem}
.tray-slot.is-on{border-style:solid;border-color:rgba(var(--point-rgb),.45);background:rgba(var(--point-rgb),.07);color:var(--heading);cursor:pointer}
.tray-slot.is-on b{background:linear-gradient(135deg,var(--point),var(--point-dark));color:var(--surface)}
.tray-slot:disabled{opacity:1}
.deck-card.is-flash .card-inner{box-shadow:0 0 0 4px var(--point),0 0 22px rgba(var(--point-rgb),.6) !important}

/* 결과 지도 — 자리 이름은 축소 비율을 되갚는다(--sp-lf, fitShapedSpreads). 누운 카드는 번호만 */
.spread-inner .sp-label{font-size:calc(.68rem * var(--sp-lf,1));font-weight:700;color:var(--text-sub);line-height:1.25;
  text-align:center;background:rgba(var(--surface-rgb),.92);border-radius:3px;padding:1px 2px;word-break:keep-all}
.spread-inner .sp-lab{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spread-inner .sp-label.is-2 .sp-lab{-webkit-line-clamp:1}
.sp-lab em{font-style:normal;color:var(--point)}
.spread-inner .sp-badge{display:flex;align-items:center;justify-content:center;
  width:calc(22px * var(--sp-lf,1));height:calc(22px * var(--sp-lf,1));transform:translate(-50%,-62%);
  border-radius:50%;background:linear-gradient(135deg,var(--point),var(--point-dark));color:var(--surface);
  font-size:calc(.74rem * var(--sp-lf,1));font-weight:800;box-shadow:0 2px 8px rgba(17,24,39,.35);pointer-events:none}
.sp-label--flow{margin-top:4px;height:2.7em;width:100%;font-size:clamp(.66rem,2.4vw,.74rem);font-weight:700;color:var(--text-sub);
  line-height:1.3;text-align:center;background:rgba(var(--surface-rgb),.92);border-radius:3px;padding:1px 2px;overflow:hidden}
.sp-label--flow .sp-lab{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}

/* 결과 머리 — 입력한 질문 */
#result p.tarot-q{margin:-4px auto 14px;max-width:34em;padding:10px 14px;border-radius:12px;background:rgba(var(--blue-rgb),.05);
  border:1px solid rgba(var(--blue-rgb),.12);font-size:.92rem;line-height:1.6;text-align:left;word-break:keep-all}
#result p.tarot-q span{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:999px;background:rgba(var(--blue-rgb),.12);
  color:var(--blue);font-size:.74rem;font-weight:700;vertical-align:1px}

/* 결과 끝 홍보 상자 — 모달이 아니라 결과 아래 카드(placePromoInline) */
.ck-promo-box.is-inline{width:100%;max-width:none;max-height:none;overflow:visible;margin:22px 0 0;animation:none;
  box-shadow:none;border:1px solid rgba(var(--heading-rgb),.08)}
#result .ck-promo-box.is-inline h3{margin:0 0 6px;font-size:1.02rem;color:var(--heading);text-align:left}
.ck-promo-box.is-inline #tarotPromoCloseBtn,.ck-promo-box.is-inline #tarotPromoRestartBtn{display:none}
/* 🔴 결과 끝 광고 벽(2026-10-01 · FT-6) — ① 바로 뒤에 제휴 줄이 있으면(.no-car · placePromoInline) 상자 안 상품 캐러셀을 접는다:
   이웃한 두 줄에 같은 상품이 두 번 보였다. ② 상자 버튼은 결과의 공유 칩과 같은 칩(.ck-act-chip)이라 가운데에 글자 폭으로 —
   데스크톱에서 전폭 빨간 버튼(≈420px)이 결과 자기 버튼(공유 172px)보다 컸다. 좁은 화면은 칩 정본대로 한 줄을 채운다. */
.ck-promo-box.is-inline.no-car .cnk-slot,.ck-promo-box.is-inline.no-car .ck-ali{display:none}
.ck-promo-box.is-inline .ck-promo-actions{align-items:center}

/* 누름 영역 — 「↩ 다시 점 보기」(데스크톱 86×30) · 카드 상세 닫기(30×30) */
.result-restart-link{width:fit-content;margin:16px auto 0;padding:12px 16px;min-height:44px}
#card-detail-close{width:40px;height:40px;top:8px;right:10px}

/* 키보드 초점 — 역할만 붙인 카드들도 어디에 있는지 보여야 한다 */
.fortune-btn:focus-visible,.spread-card:focus-visible,.deck-card:focus-visible,#confirm-btn:focus-visible,.tray-slot:focus-visible,
.spread-tab:focus-visible{outline:3px solid var(--point);outline-offset:2px}
.spread-result-img:focus-visible{outline:3px solid var(--point);outline-offset:-3px}
/* AI 바로가기 칩 — 기본 해석이 먼저라는 순서(2026-08-28 지시)는 두고, 머리에서 같은 동작을 부른다 */
#result p.tarot-ai-jump{margin:-4px 0 12px;text-align:center}
/* 본문 「확인」이 보이는 동안 고정 버튼은 접는다(watchConfirm) */
#sticky-confirm.visible.is-dup{display:none}
/* 자료를 못 받았을 때의 안내 + 다시 불러오기(TAROT-01) — 덱 자료(#tarot-data-status) · 카드 뜻(기본 해석·1장 결과) */
.tarot-err{margin:12px 0;padding:12px 14px;border-radius:12px;background:rgba(var(--point-rgb),.06);border:1px solid rgba(var(--point-rgb),.25);text-align:left}
.tarot-err p{margin:0 0 8px !important;font-size:.9rem !important;line-height:1.6 !important;color:var(--text-main)}
#tarot-data-status{margin-top:12px}

/* ── 운세별 입력 + 3장 배열 — 꿈해몽(꿈 글) · 애정운(관계 칩) · 투자운(돈 문제 칩) (2026-09-30) ── */
#one-text,#one-text-2{display:block;width:100%;margin-top:10px;padding:14px 16px;border:1px solid rgba(var(--heading-rgb),.1);border-radius:14px;
  background:var(--surface);color:var(--text-main);font:inherit;font-size:1rem;line-height:1.6;resize:vertical;min-height:96px}
#one-text:focus,#one-text-2:focus{outline:none;border-color:rgba(var(--blue-rgb),.35);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.08)}
/* 무엇을 보는 세 장인지 — 입력 칸 위 자리 이름(스프레드 미리보기와 같은 역할) */
/* ⚠️ 왼쪽에 「💗 3장」, 오른쪽에 세 자리를 한 줄씩 — 줄 바꿈이 폭에 따라 운세마다 달라지지 않게 격자로 세운다 */
.one-pos{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:1px;align-items:baseline;margin:2px 0 12px;font-size:.88rem;line-height:1.55;color:var(--text-sub)}
.one-pos .one-pos-n{grid-column:1;font-weight:800;color:var(--point);white-space:nowrap}
.one-pos span:not(.one-pos-n){grid-column:2}
/* ⚠️ .ck-chip-row 는 display 를 주지 않는다 — flex 여야 좁은 화면 한 줄 가로 스크롤 규칙(common.css)이 걸린다 */
.one-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.one-chip{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(var(--heading-rgb),.14);background:var(--surface);
  color:var(--text-main);font-size:.92rem;font-weight:700;cursor:pointer;white-space:nowrap}
.one-chip:hover{border-color:var(--point);color:var(--point)}
.one-chip[aria-pressed="true"]{background:var(--point);border-color:var(--point);color:var(--surface);box-shadow:0 6px 14px rgba(var(--point-rgb),.2)}
.one-chip:focus-visible{outline:3px solid var(--point);outline-offset:2px}
/* 결과의 AI 상자(#tarot-prompt-box) — 적은 내용을 여기서 고치거나 채운다 */
#result .tarot-theme-ai p.tda-lead{margin:0 0 4px;font-size:.95rem}
#result .tarot-theme-ai .one-chips{margin:8px 0 0}
#result .tarot-theme-ai p.tda-hint{margin:6px 0 0;font-size:.85rem;color:var(--point)}
#result .tarot-theme-ai p.tda-sub{margin:8px 0 10px;font-size:.85rem;color:var(--text-sub);line-height:1.6}
/* 카드마다 그 운세 풀이 — 기본 해석 줄과 카드 상세에 같이 쓴다 */
.tbr-theme{margin:0 0 7px !important;font-size:.93rem;line-height:1.75}
.tbr-theme strong{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:rgba(var(--point-rgb),.08);color:var(--point);font-size:.78rem}