.detail-intro { text-align:center; padding:26px 2px 28px; }
.detail-badge { display:inline-block; padding:5px 12px; border:1px solid #ff8fb83b; background:#ff8fb810; color:var(--pink); border-radius:30px; font-size:.76rem; font-weight:700; }
.detail-lead { color:var(--dim); font-size:.95rem; line-height:1.7; margin:20px 0 10px; word-break:keep-all; }
.detail-intro h1 { margin:0 0 20px; font-size:2.25rem; line-height:1.25; letter-spacing:-.05em; }
.detail-description { font-size:1rem; line-height:1.95; margin:0; color:#e7e1ee; word-break:keep-all; }
#detail-hero { margin:0 0 30px; border-radius:22px; border:1px solid #ff8fb824; }
#detail-hero .hero-img { aspect-ratio:4/3; object-position:50% 25%; }
#detail-hero .hero-text { padding:20px 18px; }
#detail-hero .hero-text .q { font-size:1.35rem; }
.detail-story,.detail-package { margin:28px 0; padding:26px 22px; border:1px solid #ff8fb829; border-radius:22px; background:linear-gradient(145deg,#251e2b,#15131d); }
.product-detail h2 { font-size:1.45rem; line-height:1.45; letter-spacing:-.035em; word-break:keep-all; }
.detail-story h2,.detail-package h2 { margin:10px 0 14px; }
.detail-story>p:not(.eyebrow),.detail-package>p:not(.eyebrow) { color:#bdb5cc; line-height:1.85; font-size:.94rem; }
.detail-package dl { margin:22px 0 16px; }
.detail-package dl>div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; margin:10px 0; padding:14px 12px; border:1px solid #ffffff0d; border-radius:13px; background:#ffffff04; font-size:.86rem; }
.detail-package dt { color:var(--pink); font-weight:700; }
.detail-package dd { margin:0; word-break:keep-all; overflow-wrap:anywhere; }
.detail-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; list-style:none; padding:0; margin:30px 0 46px; }
.detail-tags li { border:1px solid var(--line); border-radius:30px; padding:8px 13px; color:#d0c6df; background:#ffffff04; font-size:.82rem; }
.detail-tags li:nth-child(2) { border-color:#ff8fb850; color:var(--pink); background:#ff8fb810; }
.detail-audience h2,.detail-contents>h2 { text-align:center; }
.detail-audience ul,.detail-contents ol { padding:0; list-style:none; }
.detail-audience li { display:flex; align-items:flex-start; gap:14px; border:1px solid #ff8fb818; border-radius:15px; padding:20px 16px; margin:12px 0; font-size:.95rem; color:#d8d1e2; }
.detail-audience li>span { color:var(--pink); font-size:1.15rem; }
.detail-contents { margin:46px 0; }
.detail-contents>.eyebrow { text-align:center; }
.detail-contents li { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; margin:12px 0; padding:20px 14px; border:1px solid #ff8fb82b; border-radius:16px; font-size:.94rem; }
.chapter-number { border:1px solid #9b92a8; border-radius:20px; text-align:center; font-size:.78rem; padding:2px 0; }
.access { color:var(--pink); font-size:.72rem; white-space:nowrap; }
.free-label { padding:3px 7px; border-radius:8px; color:#201527; background:var(--accent); }
.detail-contents .cta { margin-top:24px; }
.birth-title { font-size:1.25rem; margin-top:40px; }
.product-detail[hidden] { display:none; }
@media(max-width:360px) { .detail-intro h1 { font-size:1.95rem; } .detail-package,.detail-story { padding:22px 16px; } .detail-package dl>div { grid-template-columns:65px minmax(0,1fr); gap:8px; } }

.birth-title { font-size:clamp(1.65rem,6vw,2rem); font-weight:800; color:#fff; line-height:1.3; }
.birth-date-picker > p:first-child,.birth-time-picker > p:first-child { font-size:clamp(1.35rem,5.3vw,1.65rem); font-weight:800; line-height:1.35; color:#fff; letter-spacing:-.035em; margin:22px 0 16px; }
.birth-time-fields { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; }
.birth .birth-time-fields label { min-width:0; margin:0; }
.birth .birth-time-fields input { width:100%; min-width:0; min-height:58px; border:1px solid #aaa2b5; border-radius:999px; background:#0e0c13; color:#fff; font-size:1.2rem; font-weight:650; text-align:center; padding:12px 8px; }
.birth-time-fields input::placeholder { font-size:1rem; font-weight:550; color:#b6afc3; opacity:1; }
.birth-time-fields > span { font-size:1.5rem; font-weight:700; }
.birth-time-fields input:disabled { opacity:.45; }
.birth .cta,.birth .step-nav button { font-weight:750; font-size:1.05rem; min-height:52px; border-radius:999px; }

.birth .birth-date-direct { display:block; width:100%; min-width:0; min-height:64px; margin:12px 0 0; padding:12px 0; border:0; border-bottom:2px solid #9f96ac; border-radius:0; background:transparent; color:#fff; font-size:clamp(1.6rem,7vw,2rem); font-weight:650; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.birth .birth-date-direct::placeholder { color:#a69bae; opacity:1; }
.birth .birth-date-picker > label { display:block; }

.analysis-loading { min-height:70svh; padding:64px 8px 32px; text-align:center; }
.analysis-loading h2 { font-size:clamp(1.4rem,5.6vw,1.8rem); line-height:1.4; font-weight:800; color:#fff; margin:28px 0 10px; word-break:keep-all; }
.analysis-spinner { width:48px; height:48px; margin:0 auto; border:3px solid #383342; border-top-color:#d8c7ee; border-radius:50%; animation:analysis-turn 1.2s linear infinite; }
.analysis-notice { padding:16px 12px; border:1px solid #8f435b66; border-radius:16px; background:#ff8fb80b; font-weight:650; font-size:.95rem; }
.analysis-notice span { font-size:.85rem; color:var(--dim); }
.analysis-progress { margin:24px 20px 12px; height:8px; overflow:hidden; background:#302b39; border-radius:99px; }
.analysis-progress span { display:block; width:32%; height:100%; border-radius:inherit; background:var(--pink); animation:analysis-slide 1.8s ease-in-out infinite alternate; }
.analysis-guide { margin:36px 0 0; padding:18px; border:1px solid #ff8fb822; border-radius:18px; background:#ff8fb809; text-align:left; }
.analysis-guide strong { color:var(--pink); font-size:.85rem; }.analysis-guide p { margin:8px 0 0; font-size:.95rem; line-height:1.7; }
body:has(.analysis-loading:not([hidden])) .tabbar { display:none; }
@keyframes analysis-turn { to { transform:rotate(360deg); } }
@keyframes analysis-slide { to { transform:translateX(210%); } }
@media(prefers-reduced-motion:reduce) { .analysis-spinner,.analysis-progress span { animation:none; } }

.detail-questions li{display:block;padding:16px 0;border-bottom:1px solid #ddd3c1}.detail-questions li p{font-size:.92rem;line-height:1.75;margin:8px 0}.detail-questions h3{margin-top:28px}