:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#2f6fde; /* 하늘 블루 */
  --accent-ink:#2259bd; --accent-soft:#e6efff; --sun:#ffc83d; --sky:#dbe9ff; --sky-2:#f1f6ff;
  --ticket:#ffffff; --ticket-line:#d5e0f2; --navy:#16213a;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--panel)}
@media (max-width:640px){ .topbar{padding:14px 16px} }

/* ---------- 무대: 하늘 ---------- */
.stage{flex:1;width:100%;padding:40px 24px 64px;scroll-margin-top:12px;
  background:
    radial-gradient(60px 26px at 12% 14%,rgba(255,255,255,.9) 60%,transparent 62%),
    radial-gradient(80px 30px at 16% 12%,rgba(255,255,255,.9) 60%,transparent 62%),
    radial-gradient(70px 26px at 86% 30%,rgba(255,255,255,.85) 60%,transparent 62%),
    radial-gradient(90px 32px at 90% 28%,rgba(255,255,255,.85) 60%,transparent 62%),
    linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 55%,var(--bg) 100%)}
.stage > .view{max-width:880px;margin:0 auto}
.view{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fine{margin:18px 4px 0;font-size:12.5px;line-height:1.6;color:var(--sub);text-align:center;word-break:keep-all}

/* ---------- 인트로: 탑승권 ---------- */
.pass{display:grid;grid-template-columns:minmax(0,1fr) 250px;border-radius:26px;background:var(--ticket);box-shadow:0 30px 60px -34px rgba(20,50,110,.5);overflow:hidden;position:relative}
.pass-main{padding:28px 34px 30px;min-width:0}
.pass-head{display:flex;justify-content:space-between;align-items:center;margin:-28px -34px 22px;padding:16px 34px;background:var(--accent);color:#fff}
.pass-head .mono-label{color:#fff;font-size:12px}
.pass-flight{font-family:var(--mono);font-size:13px;letter-spacing:.08em;opacity:.85}
.route{display:flex;align-items:flex-end;gap:16px}
.route > div{display:flex;flex-direction:column;gap:2px}
.route b{font-family:var(--mono);font-size:30px;letter-spacing:-.01em;color:var(--navy)}
.route > div:first-child b{font-family:var(--font)}
.route-line{flex:1;position:relative;height:2px;margin-bottom:16px;border-top:2px dashed var(--ticket-line)}
.route-line i{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-style:normal;font-size:20px;color:var(--accent);background:var(--ticket);padding:0 6px}
.intro-title{margin:26px 0 10px;font-size:clamp(26px,5.6vw,34px);line-height:1.3;letter-spacing:-.02em;word-break:keep-all}
.intro-desc{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2);word-break:keep-all}
.intro-types{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;font-size:22px}
.intro-types span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--sky-2);border:1px solid var(--ticket-line)}
.pass-stub{position:relative;display:flex;flex-direction:column;gap:16px;padding:28px 26px;background:var(--sky-2);border-left:3px dashed var(--ticket-line)}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;left:-16px;width:30px;height:30px;border-radius:50%;background:var(--sky)}
.pass-stub::before{top:-15px}
.pass-stub::after{bottom:-15px;background:var(--bg)}
.stub-info{margin:0;display:grid;gap:12px}
.stub-info div{display:flex;flex-direction:column;gap:2px}
.stub-info dd{margin:0;font-size:18px;font-weight:700;color:var(--navy)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border:none;border-radius:14px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s ease,background .15s ease}
.cta:hover{background:var(--accent);transform:translateY(-1px)}
.cta span{color:var(--sun)}
.last-btn{background:none;border:none;padding:0;font-size:13px;color:var(--sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.last-btn:hover{color:var(--accent-ink)}
.barcode{margin-top:auto;height:46px;background:repeating-linear-gradient(90deg,var(--navy) 0 3px,transparent 3px 6px,var(--navy) 6px 7px,transparent 7px 11px,var(--navy) 11px 16px,transparent 16px 19px);opacity:.85}

/* ---------- 문항 ---------- */
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.back{height:36px;padding:0 16px;border-radius:12px;border:1px solid var(--ticket-line);background:var(--panel);font-size:13px;cursor:pointer;color:var(--ink-2)}
.back:hover{border-color:var(--accent);color:var(--accent-ink)}
.q-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sub)}
.q-count b{color:var(--accent-ink);font-size:18px}
.flight{position:relative;height:10px;margin-top:22px}
.flight-dot{position:absolute;top:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);background:var(--panel)}
.flight-dot--a{left:0}
.flight-dot--b{right:0;background:var(--sun);border-color:var(--sun)}
.progress{position:relative;height:2px;margin:-6px 16px 30px;border-top:2px dashed #b8cbec}
.progress-bar{position:absolute;left:0;top:-2px;height:2px;width:0;transition:width .45s ease}
.progress-bar::before{content:"";position:absolute;inset:0;background:var(--accent)}
.plane{position:absolute;right:-12px;top:-13px;font-style:normal;font-size:22px;line-height:1;color:var(--accent)}
.q-card{padding:30px 32px 32px;border-radius:24px;background:var(--ticket);box-shadow:0 24px 50px -34px rgba(20,50,110,.5)}
.q-card.is-in .q-text{animation:rise .35s ease both}
.q-card.is-in .opt{animation:rise .35s ease both}
.q-card.is-in .opt:nth-child(2){animation-delay:.04s}
.q-card.is-in .opt:nth-child(3){animation-delay:.08s}
.q-card.is-in .opt:nth-child(4){animation-delay:.12s}
.q-text{margin:0 0 22px;font-size:clamp(19px,4.4vw,24px);line-height:1.45;letter-spacing:-.02em;word-break:keep-all;outline:none}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{position:relative;display:flex;align-items:stretch;min-height:84px;padding:0;border-radius:16px;border:1.5px solid var(--ticket-line);background:var(--sky-2);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.opt-key{flex:0 0 52px;display:grid;place-items:center;border-right:2px dashed var(--ticket-line);font-family:var(--mono);font-size:18px;font-weight:500;color:var(--accent-ink)}
.opt-text{flex:1;display:flex;align-items:center;padding:14px 16px;font-size:15px;line-height:1.5;word-break:keep-all}
.opt[aria-pressed="true"],.opt.is-picked{background:var(--accent);border-color:var(--accent);color:#fff}
.opt[aria-pressed="true"] .opt-key,.opt.is-picked .opt-key{color:var(--sun);border-right-color:rgba(255,255,255,.4)}
.q-hint{margin:20px 0 0;text-align:center;font-size:12.5px;color:var(--sub)}
@media (hover:none){ .q-hint{display:none} }

/* ---------- 분석 중 ---------- */
.loading{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.runway{position:relative;width:min(320px,80vw);height:60px;border-bottom:3px dashed #b8cbec}
.runway-plane{position:absolute;left:0;bottom:-6px;font-size:40px;color:var(--accent);animation:takeoff 1.6s ease-in infinite}
@keyframes takeoff{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}60%{transform:translate(60vw,0) rotate(0)}100%{transform:translate(calc(min(320px,80vw) - 40px),-60px) rotate(-18deg);opacity:0}}
.loading-text{margin:0;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink-2)}

/* ---------- 결과 ---------- */
.shared-note{margin:0 0 18px;padding:14px 18px;border-radius:14px;background:var(--panel);border:1.5px solid var(--accent);color:var(--accent-ink);font-size:14px;line-height:1.6;word-break:keep-all}
.r-pass{position:relative;border-radius:26px;background:var(--ticket);box-shadow:0 30px 60px -34px rgba(20,50,110,.5);overflow:hidden;padding:0 34px 30px}
.r-pass-head{margin:0 -34px;padding:16px 34px;background:var(--accent)}
.r-pass-head .mono-label{color:#fff;font-size:12px}
.r-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 8px}
.r-info{min-width:0}
.r-kicker{margin:0;font-size:14px;color:var(--sub)}
.r-name{margin:6px 0 0;font-size:clamp(28px,6.4vw,40px);letter-spacing:-.025em;line-height:1.2;outline:none;word-break:keep-all}
.r-tagline{margin:12px 0 0;padding-left:12px;border-left:4px solid var(--tc,var(--accent));font-size:16px;font-weight:500;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.stamp{position:relative;display:grid;place-items:center;flex:0 0 auto;color:var(--tc)}
.stamp--big{width:170px;height:170px;transform:rotate(-10deg);animation:stampIn .5s cubic-bezier(.2,1.6,.4,1) both}
.stamp--small{width:84px;height:84px;transform:rotate(-8deg)}
@keyframes stampIn{from{transform:rotate(-30deg) scale(1.5);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:1}}
.stamp::before{content:"";position:absolute;inset:4%;border-radius:50%;border:4px solid currentColor;background:color-mix(in srgb,var(--tc) 10%,transparent)}
.stamp-ring{position:absolute;inset:0}
.stamp-ring svg{width:100%;height:100%;display:block}
.stamp-ring text{font-family:var(--mono);font-size:9.4px;letter-spacing:1.6px;fill:currentColor}
.stamp--small .stamp-ring{display:none}
.stamp-emoji{position:relative;font-size:58px;line-height:1;color:var(--ink)}
.stamp--small .stamp-emoji{font-size:36px}
.r-desc{margin:18px 0 0;font-size:15px;line-height:1.8;color:var(--ink-2);word-break:keep-all}
.r-traits{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.r-traits li{position:relative;padding:12px 14px 12px 36px;border-radius:12px;background:var(--sky-2);font-size:14px;line-height:1.5;word-break:keep-all}
.r-traits li::before{content:"✓";position:absolute;left:14px;top:12px;font-weight:700;color:var(--tc,var(--accent))}
.tr-extra{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:20px;padding-top:22px;border-top:3px dashed var(--ticket-line)}
.tr-box{padding:18px;border-radius:16px;background:var(--sky-2);min-width:0}
.tr-box h3{margin:4px 0 8px;font-size:16px}
.tr-box p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);word-break:keep-all}
.tr-pack ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tr-pack li{padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--ticket-line);font-size:13.5px}

.sec-h{margin:0;font-size:16px;letter-spacing:-.01em}
.sec-h--mate{margin:28px 0 0}
.sec-sub{margin:4px 0 0;font-size:13px;color:var(--sub)}
.r-match{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.match{padding:18px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--ticket-line);min-width:0}
.match--good{border:1.5px solid var(--accent)}
.match-label{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;font-size:12px;background:var(--accent-soft);color:var(--accent-ink)}
.match--bad .match-label{background:#fff3d6;color:#8a5b00}
.match-type{display:flex;align-items:center;gap:8px;padding:0;background:none;border:none;cursor:pointer;text-align:left;font-size:18px}
.match-type b{border-bottom:2px solid var(--ticket-line)}
.match-type:hover b{border-bottom-color:var(--accent)}
.match-emoji{font-size:28px}
.match-why{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);word-break:keep-all}

.r-bars{margin-top:20px;padding:20px 22px;border-radius:18px;background:var(--panel);border:1px solid var(--ticket-line)}
.bars{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:10px}
.bar{display:grid;grid-template-columns:118px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.bar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bar-track{height:8px;border-radius:2px;background:var(--track);overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w);background:var(--tc);opacity:.5;transform-origin:left;animation:grow .7s ease var(--d) both}
.bar.is-me .bar-fill{opacity:1}
.bar.is-me .bar-name{color:var(--ink);font-weight:700}
.bar-val{font-family:var(--mono);font-size:12px;text-align:right;color:var(--sub)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.r-actions{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;margin-top:22px}
.r-actions .cta{width:100%}
.act{height:54px;min-width:0;padding:0 12px;border-radius:14px;border:1.5px solid var(--ticket-line);background:var(--panel);font-size:13.5px;cursor:pointer;line-height:1.3}
.act:hover{border-color:var(--accent);color:var(--accent-ink)}
.act:disabled{opacity:.5;cursor:progress}

.all-types{margin-top:32px}
.type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.type-chip{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--ticket-line);background:var(--panel);cursor:pointer;min-width:0;text-align:left;transition:border-color .15s ease,transform .15s ease}
.type-chip:hover{transform:translateY(-2px);border-color:var(--tc)}
.type-chip.is-open{border-color:var(--tc);box-shadow:0 0 0 2px var(--tc) inset}
.type-chip.is-me{background:var(--accent-soft)}
.chip-emoji{font-size:24px;flex:0 0 auto}
.chip-name{font-size:13px;line-height:1.35;word-break:keep-all;min-width:0}
.chip-me{position:absolute;top:-9px;right:8px;padding:2px 8px;border-radius:6px;background:var(--sun);color:var(--navy);font-family:var(--mono);font-size:10px;font-weight:500;white-space:nowrap}
.type-preview{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;margin-top:12px;padding:20px 22px;border-radius:18px;background:var(--panel);border:1.5px solid var(--tc);animation:rise .3s ease both}
.pv-name{margin:0;font-size:18px;padding-right:28px}
.pv-tag{margin:4px 0 0;font-size:14px;color:var(--ink-2);font-weight:500}
.pv-desc{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2);word-break:keep-all}
.pv-match{margin:6px 0 0;font-size:13px}
.pv-match span{color:var(--sub);margin-right:4px}
.pv-icon{font-style:normal}
.pv-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;border:none;background:var(--soft);font-size:18px;line-height:1;cursor:pointer}
.pv-close:hover{background:var(--hover)}

.toast{position:fixed;left:50%;bottom:28px;z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 18px;border-radius:12px;background:var(--navy);color:#fff;font-size:14px;transition:opacity .2s ease,transform .2s ease}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  .pass{grid-template-columns:1fr}
  .pass-stub{border-left:none;border-top:3px dashed var(--ticket-line)}
  .pass-stub::before,.pass-stub::after{top:-16px;bottom:auto;background:var(--sky-2)}
  .pass-stub::before{left:-15px}
  .pass-stub::after{left:auto;right:-15px}
  .stub-info{grid-template-columns:repeat(3,minmax(0,1fr))}
  .barcode{display:none}
  .r-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .r-actions .cta{grid-column:1/-1}
  .type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bars{grid-template-columns:1fr}
}
@media (max-width:560px){
  .stage{padding:24px 16px 48px}
  .pass-main{padding:24px 20px 24px}
  .pass-head{margin:-24px -20px 18px;padding:14px 20px}
  .route b{font-size:24px}
  .q-card{padding:22px 18px 20px}
  .opts{grid-template-columns:1fr}
  .opt{min-height:64px}
  .opt-key{flex-basis:44px}
  .r-pass{padding:0 18px 22px}
  .r-pass-head{margin:0 -18px;padding:14px 18px}
  .r-top{flex-direction:column-reverse;align-items:flex-start;gap:6px}
  .stamp--big{width:130px;height:130px}
  .stamp--big .stamp-emoji{font-size:46px}
  .r-traits{grid-template-columns:1fr}
  .tr-extra{grid-template-columns:1fr}
  .r-match{grid-template-columns:1fr}
  .r-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act#linkBtn{grid-column:1/-1}
  .act{height:46px}
  .bar{grid-template-columns:104px 1fr 36px}
  .type-preview{grid-template-columns:1fr;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#11141b; --surface:#161a23; --panel:#1b202b; --panel-soft:#202633;
    --ink:#e8edf6; --ink-hover:#ffffff; --ink-2:#c3cbda; --sub:#9aa4b8; --muted:#8590a5;
    --line:#2a3140; --line-2:#343c4d; --line-3:#232a37; --hover:#262d3b; --soft:#232a37; --track:#30384a;
    --accent:#6ea2ff; --accent-ink:#8fb6ff; --accent-soft:rgba(110,162,255,.16);
    --sky:#16203a; --sky-2:#1d2536; --ticket:#1b2130; --ticket-line:#33405a; --navy:#e8edf6;
  }
  :root[data-theme="dark"] .stage{background:
    radial-gradient(1.4px 1.4px at 14% 18%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 70% 12%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 34%,rgba(255,255,255,.4) 50%,transparent 51%),
    linear-gradient(180deg,#16203a 0%,#141a28 55%,var(--bg) 100%)}
  :root[data-theme="dark"] .pass-head,:root[data-theme="dark"] .r-pass-head{background:#2b5cc4}
  :root[data-theme="dark"] .cta{background:#6ea2ff;color:#0e1424}
  :root[data-theme="dark"] .cta:hover{background:#9cc0ff}
  :root[data-theme="dark"] .cta span{color:#0e1424}
  :root[data-theme="dark"] .opt[aria-pressed="true"],:root[data-theme="dark"] .opt.is-picked{background:#2b5cc4;border-color:#2b5cc4}
  :root[data-theme="dark"] .toast,:root[data-theme="dark"] .chip-me{color:#11141b}
  :root[data-theme="dark"] .match--bad .match-label{background:rgba(255,200,61,.16);color:#ffd66e}
  :root[data-theme="dark"] .pass-stub::after{background:var(--bg)}
  :root[data-theme="dark"] .progress{border-top-color:#3d4d6e}
  :root[data-theme="dark"] .runway{border-bottom-color:#3d4d6e}
}
@media screen and (max-width:760px){
  :root[data-theme="dark"] .pass-stub::after{background:var(--sky-2)}
}