/* 랜딩에서 이어지는 플레이어 프로필과 세션 핸드아웃. */
.result-page { --paper: #faf8f5; --ink: #382451; --muted: #686073; color: var(--ink); background: var(--paper); }
.result-header { max-width: 1320px; height: 88px; padding: 0 48px; }
.result-header .brand { display: inline-flex; align-items: center; font-size: 17px; letter-spacing: -.04em; }
.result-header .brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border-radius: 9px; background: #ede7fa; }
.result-header .brand-mark svg { width: 23px; height: 23px; }
.result-header nav { gap: 24px; }
.result-header nav a { font-size: 12px; }
.result-page .result-main { max-width: 1320px; padding: 38px 48px 80px; }
.result-page .label, .result-page .eyebrow { font-size: 10px; letter-spacing: .16em; color: #6245bd; }
.profile-overview { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 64px; padding-bottom: 60px; }
.result-page .result-intro { min-width: 0; max-width: none; }
.result-page .result-intro .eyebrow { margin: 0 0 26px; }
.result-page .result-intro h1 { font-size: clamp(38px, 4.5vw, 62px); line-height: 1.22; letter-spacing: -.065em; }
.result-page .result-intro .lede { margin: 25px 0 30px; font-size: 15px; line-height: 1.95; word-break: keep-all; }
.result-page .profile-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 60px; padding: 16px 23px; border-radius: 9px; box-shadow: 0 9px 22px #6547da20; }
.result-page .profile-cta span { padding: 0; font-size: 22px; }
.profile-note { margin: 18px 0 0; font-size: 11px; color: var(--muted); word-break: keep-all; }
.profile-focus { margin: 0 0 30px; padding-left: 16px; border-left: 2px solid #c5b3e7; }
.profile-focus > span { display: block; margin-bottom: 7px; font-size: 11px; color: var(--muted); }
.profile-focus strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.7; letter-spacing: -.035em; word-break: keep-all; }
.result-page .radar-card { min-width: 0; padding: 25px 28px 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px #38245106; }
.map-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.map-heading .label { margin: 0; }
.map-heading > span { color: var(--muted); font-size: 10px; }
.result-page .radar-card h2 { margin-top: 10px; font-size: 23px; }
.result-page .result-radar-visual { margin-top: 0; max-width: 460px; }
.result-page .radar-axis-label { font-size: 12px; color: #554767; }
.map-reading { margin: 0; border-top: 1px solid #ece6f1; font-size: 12px; }
.map-reading summary { padding: 13px 0; color: #685779; }
.map-reading-content { overflow: hidden; }
.map-reading ul { margin: 0; padding: 0 0 15px 20px; list-style: disc; color: var(--muted); line-height: 1.9; }
.map-reading li { white-space: pre-line; }
.map-reading li + li { margin-top: 10px; }
.result-page .taste-section { margin: 0; padding: 44px 0 56px; border-top: 1px solid #e7e1ea; }
.result-page .taste-heading { margin-bottom: 30px; }
.result-page .taste-heading .label { margin: 0 0 12px; }
.result-page .taste-heading h2, .result-page .export-section h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.045em; }
.result-page .taste-heading .small-copy { max-width: 390px; font-size: 12px; line-height: 1.85; }
.result-page .taste-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; align-items: stretch; padding: 18px 14px; }
.result-page .taste-card { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 480px; padding: 27px 27px 30px; border: 1px solid transparent; border-radius: 14px; color: #f7f2ff; background: linear-gradient(155deg, #352844, #211a2e 55%, #2b203b); box-shadow: 0 3px 0 #160f24, 0 5px 0 #68537f, 0 16px 30px #20132b26; }
.handout-frame { position: absolute; z-index: 3; inset: -1px; border: 14px solid var(--art-0); border-radius: inherit; pointer-events: none; box-shadow: inset 0 3px 8px #0003; transform: translateZ(0); }
.result-page .taste-card-first { grid-column: auto; grid-row: auto; background: linear-gradient(155deg, #403055, #281d3b 55%, #35264c); }
.result-page .taste-category { align-self: flex-start; margin-top: 0; padding: 3px 9px; border: 1px solid #927aa780; border-radius: 3px; color: #dfceee; font-size: 11px; }
.handout-art { position: absolute; inset: 0; margin: 0; border-radius: inherit; transform-style: preserve-3d; pointer-events: none; }
.handout-art-layer { position: absolute; inset: 0; margin: auto; overflow: visible; backface-visibility: hidden; transform: translate3d(calc(var(--parallax-x, 0) * var(--layer-shift)), calc(var(--parallax-y, 0) * var(--layer-shift)), calc(var(--parallax-depth, 0) * var(--layer-depth))); }
.handout-art-orbit { --layer-depth: -64px; transform: translate3d(calc(var(--parallax-x, 0) * 14px), calc(var(--parallax-y, 0) * 11px), calc(var(--parallax-depth, 0) * -64px)) scale(calc(1 + var(--parallax-depth, 0) * .065)); }
.handout-art-0 { --layer-shift: -18px; --layer-depth: -48px; }
.handout-art-1 { --layer-shift: -11px; --layer-depth: -30px; }
.handout-art-2 { --layer-shift: -3px; --layer-depth: -12px; }
.handout-art svg { width: 100%; height: 100%; border-radius: inherit; stroke-linecap: round; stroke-linejoin: round; }
.handout-copy { position: relative; z-index: 4; flex: 1; margin: 0 -27px -30px; padding: 26px 27px 34px; border-radius: 0 0 13px 13px; background: var(--art-0); transform: translateZ(0); }
.result-page .handout-slot .taste-card { min-height: 620px; padding: 27px 27px 30px; background: transparent; box-shadow: 0 16px 30px #20132b26; }
.result-page .handout-slot .taste-category { position: relative; z-index: 3; margin-bottom: 280px; background: var(--art-0); border: 0; color: #f7f2ff; }
.result-page .taste-card h3 { font-size: 24px; line-height: 1.4; letter-spacing: -.045em; margin: 0 0 18px; word-break: keep-all; overflow-wrap: anywhere; }
.result-page .handout-description { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.9; color: #ddd2e8; word-break: keep-all; overflow-wrap: anywhere; }
.handout-description li + li { margin-top: 7px; }
.handout-description li::marker { color: #c5aedc; }
.handout-shine { position: absolute; z-index: 5; inset: 0; border-radius: inherit; pointer-events: none; opacity: .45; transform: translateZ(0); }
.handout-shine svg { display: block; width: 100%; height: 100%; }
.handout-shine-bands { transform: translate(var(--shine-offset-x, 0px), var(--shine-offset-y, 0px)); }
.result-page .export-section { margin-top: 20px; padding: 36px 40px 28px; background: #f0ebf6; border: 0; border-radius: 14px; }
.export-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.export-heading .label { margin: 0 0 12px; }
.export-heading .section-copy { margin: 0; font-size: 13px; line-height: 1.85; }
.result-page .export-section .question-field { max-width: 420px; margin-top: 28px; }
.result-page .export-section .small-copy { max-width: 760px; font-size: 12px; }
.result-page textarea[id$="export-preview"] { margin-top: 10px; }
.result-page button[id$="download"] { border-radius: 7px; }
.result-page .empty-card { padding: 48px; border-radius: 14px; box-shadow: none; }
.result-page .empty-card h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.3; }
.result-page footer { max-width: 1224px; margin: auto; padding: 24px 0 28px; text-align: left; font-size: 10px; border-color: #e7e1ea; }
.handout-slot { min-width: 0; position: relative; display: flex; perspective: 1100px; width: 100%; max-width: 310px; justify-self: center; }
.handout-slot .taste-card { width: 100%; overflow: clip; transform-origin: center; transform-style: preserve-3d; }
.handout-slot .taste-card > * { backface-visibility: hidden; }
.handout-slot .taste-category { transform: translateZ(0); }
.handout-slot .taste-card::after { content: 'TRPG\A SESSION HANDOUT'; position: absolute; inset: -1px; display: grid; place-content: center; text-align: center; white-space: pre; line-height: 2.4; font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #f7f2ff; border-radius: inherit; background: var(--art-0); transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; pointer-events: none; }
.handout-slot:focus-within, .handout-slot.is-active { z-index: 3; }
.handout-slot.is-active .taste-card { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .result-page .result-intro > * { animation: profile-arrive 700ms cubic-bezier(.16, 1, .3, 1) both; }
  .result-page .result-intro h1 { animation-delay: 80ms; }
  .result-page .result-intro .lede { animation-delay: 160ms; }
  .result-page .profile-focus { animation-delay: 240ms; }
  .result-page .profile-cta { animation-delay: 320ms; }
  .result-page .profile-note { animation-delay: 400ms; }
  .result-page .radar-card { animation: map-arrive 850ms 120ms cubic-bezier(.16, 1, .3, 1) both; }
  .handout-slot.motion-ready { opacity: 0; transform: translateY(44px) rotateX(12deg) scale(.94); }
  .handout-slot.motion-ready.is-revealed { animation: handout-deal 800ms var(--card-delay, 0ms) cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes profile-arrive {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes map-arrive {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes handout-deal {
  from { opacity: 0; transform: translateY(44px) rotateX(12deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .handout-slot.motion-ready { opacity: 1; transform: none; }
  .handout-slot .taste-card, .handout-slot .handout-frame, .handout-slot .handout-art-layer, .handout-slot .taste-category, .handout-slot .handout-copy { transform: none !important; }
}
@media (max-width: 1100px) {
  .result-header { padding-inline: 28px; }
  .result-page .result-main { padding-inline: 28px; }
  .profile-overview { gap: 32px; }
  .result-page .taste-cards { gap: 20px; }
  .result-page .taste-card { padding-inline: 24px; }
  .result-page footer { margin-inline: 28px; }
}
@media (max-width: 900px) {
  .profile-overview { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .result-page .result-intro { max-width: 620px; }
  .result-page .result-intro h1 { font-size: clamp(36px, 7vw, 54px); }
  .result-page .radar-card { max-width: 620px; width: 100%; margin-inline: auto; }
  .result-page .taste-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-heading { align-items: start; flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
  .result-header { height: 72px; padding-inline: 20px; }
  .result-header .brand { font-size: 14px; }
  .result-header .brand-mark { width: 25px; height: 25px; margin-right: 6px; }
  .result-header nav { gap: 14px; }
  .result-header nav a { font-size: 11px; }
  .result-page .result-main { padding: 28px 20px 48px; }
  .result-page .result-intro .eyebrow { margin-bottom: 20px; }
  .result-page .result-intro .lede { font-size: 14px; margin: 20px 0 24px; }
  .result-page .profile-cta { width: 100%; }
  .result-page .radar-card { padding: 22px 14px 8px; }
  .result-page .radar-axis-label { font-size: 10px; padding: 4px; }
  .result-page .taste-section { padding-top: 32px; }
  .result-page .taste-heading { display: block; margin-bottom: 24px; }
  .result-page .taste-heading .small-copy { margin: 14px 0 0; }
  .result-page .taste-cards { grid-template-columns: 1fr; gap: 32px; max-width: 420px; margin-inline: auto; padding-inline: 0; }
  .result-page .taste-card { min-height: 480px; padding: 27px 27px 30px; }
  .result-page .export-section { margin-top: 0; padding: 28px 22px 20px; }
  .result-page .empty-card { padding: 28px 22px; }
  .result-page footer { margin-inline: 20px; line-height: 1.8; }
}