/* ============================================
   Career Way Lab — Advanced Diagnostic v3
   ============================================ */
:root {
  --bg-deep: #0d1117;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --bg-glass: rgba(255,255,255,0.06);
  --gold: #D4A853;
  --gold-light: #E8C97A;
  --gold-dim: rgba(212,168,83,0.15);
  --text-primary: #F0EDE6;
  --text-secondary: #B8B4AC;
  --text-tertiary: #807C74;
  --text-muted: #5C5A54;
  --c-red: #E05252; --c-blue: #5B8DEF; --c-yellow: #E8C44D;
  --c-green: #5BBF7B; --c-gray: #94979E; --c-orange: #E8884D;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Noto Sans KR', sans-serif;
  --radius: 12px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-overflow-scrolling:touch}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ========== 앰비언트 ========== */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35}
.ambient-orb--1{width:500px;height:500px;background:radial-gradient(circle,rgba(212,168,83,.2),transparent 70%);top:-150px;right:-100px;animation:f1 20s ease-in-out infinite}
.ambient-orb--2{width:400px;height:400px;background:radial-gradient(circle,rgba(91,141,239,.1),transparent 70%);bottom:-100px;left:-150px;animation:f2 25s ease-in-out infinite}
.ambient-orb--3{width:300px;height:300px;background:radial-gradient(circle,rgba(212,168,83,.08),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:f3 18s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
@keyframes f3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}
.noise-overlay{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:128px;opacity:.5}

/* ========== 화면 ========== */
.screen{display:none;min-height:100vh;position:relative;z-index:1}
.screen.active{display:flex;justify-content:center;align-items:center}
#quiz-screen.active{align-items:flex-start}

/* ========== 등장 애니메이션 ========== */
[data-reveal]{opacity:0;transform:translateY(20px);animation:reveal .7s ease forwards}
[data-reveal="1"]{animation-delay:.1s}[data-reveal="2"]{animation-delay:.25s}
[data-reveal="3"]{animation-delay:.4s}[data-reveal="4"]{animation-delay:.55s}
[data-reveal="5"]{animation-delay:.7s}[data-reveal="6"]{animation-delay:.85s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* ============================================
   1. 인트로
   ============================================ */
.intro{max-width:520px;width:100%;padding:48px 28px 60px;text-align:center}
.intro__badge{font-size:11px;font-weight:600;letter-spacing:3px;color:var(--gold);margin-bottom:40px}
.intro__title{font-size:32px;font-weight:700;line-height:1.5;color:var(--text-primary);margin-bottom:24px}
.intro__title em{font-family:var(--font-display);font-style:italic;font-size:40px;color:var(--gold);font-weight:600}
.intro__desc{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:40px}
.intro__desc strong{color:var(--gold-light);font-weight:600}

.intro__metrics{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:44px;padding:24px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.metric{text-align:center}
.metric__num{display:block;font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:6px}
.metric__label{font-size:12px;font-weight:500;color:var(--text-tertiary);letter-spacing:.5px}
.metric-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted)}

.intro__input-section{margin-bottom:32px}
.input-label{display:block;font-size:12px;font-weight:600;color:var(--text-tertiary);letter-spacing:1px;margin-bottom:12px;text-transform:uppercase}
.input-box{display:inline-block;position:relative;width:280px}
.input-box input{width:100%;font-family:var(--font-body);font-size:18px;font-weight:600;text-align:center;padding:16px 20px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--radius);color:var(--text-primary);outline:none;caret-color:var(--gold);transition:all .3s}
.input-box input::placeholder{color:var(--text-muted);font-weight:400;font-size:15px}
.input-box input:focus{border-color:var(--gold);background:rgba(212,168,83,.06);box-shadow:0 0 0 3px rgba(212,168,83,.12)}

.btn-start{display:inline-flex;align-items:center;gap:10px;padding:16px 48px;font-family:var(--font-body);font-size:16px;font-weight:700;color:var(--bg-deep);background:linear-gradient(135deg,var(--gold),var(--gold-light));border:none;border-radius:50px;cursor:pointer;transition:all .3s;box-shadow:0 4px 24px rgba(212,168,83,.25)}
.btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,168,83,.35)}
.btn-start:disabled{background:rgba(255,255,255,.08);color:var(--text-muted);box-shadow:none;cursor:not-allowed}
.btn-start:disabled .btn-arrow{opacity:.3}
.btn-arrow{font-size:18px;transition:transform .3s}
.btn-start:hover:not(:disabled) .btn-arrow{transform:translateX(4px)}

.btn-back{display:inline-flex;align-items:center;padding:16px 32px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-tertiary);background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:50px;cursor:pointer;transition:all .3s}
.btn-back:hover{border-color:rgba(255,255,255,.2);color:var(--text-secondary)}

/* ============================================
   2. 기본 결과 입력
   ============================================ */
.base{max-width:520px;width:100%;padding:48px 28px 60px;text-align:center}
.base__badge{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:28px}
.base__title{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1.5;margin-bottom:16px}
.base__desc{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:36px}
.base__desc strong{color:var(--gold-light);font-weight:600}

.base__form{text-align:left;margin-bottom:32px}

.form-group{margin-bottom:24px}
.form-label{display:block;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.form-sub{font-size:12px;font-weight:400;color:var(--text-tertiary);margin-left:8px}

.select-wrapper{position:relative}
.select-wrapper select{
  width:100%;font-family:var(--font-body);font-size:15px;font-weight:500;
  padding:14px 18px;appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--radius);color:var(--text-primary);outline:none;
  cursor:pointer;transition:all .3s;
}
.select-wrapper select:focus{border-color:var(--gold);background:rgba(212,168,83,.06);box-shadow:0 0 0 3px rgba(212,168,83,.1)}
.select-wrapper select option{background:#1a1f2e;color:var(--text-primary);padding:8px}
.select-wrapper::after{
  content:'▾';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:12px;pointer-events:none;
}

/* 프리뷰 */
.base__preview{
  margin-top:28px;padding:20px 22px;
  background:var(--gold-dim);border:1px solid rgba(212,168,83,.2);border-radius:var(--radius);
}
.preview-label{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:14px;text-transform:uppercase}
.preview-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.preview-key{font-size:13px;color:var(--text-tertiary);font-weight:500}
.preview-value{font-size:14px;font-weight:700;color:var(--text-primary)}

.base__actions{display:flex;gap:12px;justify-content:center;align-items:center}

/* ============================================
   3. 가이드
   ============================================ */
.guide{max-width:520px;width:100%;padding:48px 28px 60px;text-align:center}
.guide__badge{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:32px}
.guide__title{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:36px}

.guide__steps{display:flex;flex-direction:column;text-align:left;margin-bottom:32px}
.step{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.step:last-child{border-bottom:none}
.step__num{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--gold);min-width:40px;line-height:1;padding-top:2px}
.step__content h3{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.step__content p{font-size:13px;color:var(--text-secondary);line-height:1.7}
.step__content strong{color:var(--gold-light);font-weight:600}

.guide__notice{padding:18px 22px;background:var(--gold-dim);border:1px solid rgba(212,168,83,.15);border-radius:var(--radius);margin-bottom:36px}
.guide__notice p{font-size:13px;color:var(--text-secondary);line-height:1.7}

/* ============================================
   4. 진단
   ============================================ */
.quiz{max-width:600px;width:100%;min-height:100vh;min-height:100dvh;padding:0 24px;display:flex;flex-direction:column}

.quiz__header{position:sticky;top:0;z-index:10;padding:20px 0 16px;background:linear-gradient(to bottom,var(--bg-deep) 70%,transparent)}
.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.quiz__logo{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--gold);letter-spacing:2px}
.quiz__counter{font-size:14px;font-weight:500;color:var(--text-muted)}
.counter-q{font-size:13px;font-weight:700;color:var(--gold);margin-right:1px}
.counter-current{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--gold)}
.counter-sep{margin:0 3px;color:var(--text-muted)}
.counter-total{font-size:13px}

.progress-track{width:100%;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;border-radius:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(212,168,83,.4)}

.quiz__body{flex:1;padding:20px 0 24px;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}
.quiz__body.fade-out{opacity:0;transform:translateY(12px)}

.quiz__qnum{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--gold);letter-spacing:1px;margin-bottom:12px}
.quiz__title{font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.45;margin-bottom:20px}

.quiz__scenario{display:flex;gap:16px;padding:22px 24px;background:var(--bg-glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);margin-bottom:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scenario-accent{width:3px;flex-shrink:0;background:linear-gradient(to bottom,var(--gold),transparent);border-radius:2px}
.quiz__scenario p{font-size:15px;color:var(--text-secondary);line-height:1.85}

.quiz__choices{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}

.choice-btn{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px 20px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.7;color:var(--text-secondary);background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);cursor:pointer;text-align:left;transition:all .25s ease;overflow:hidden}
.choice-num{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);border:1px solid rgba(255,255,255,.1);border-radius:6px;margin-top:1px;transition:all .25s}
.choice-text{flex:1}

.choice-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(to bottom,var(--gold),var(--gold-light));transition:width .25s ease;border-radius:var(--radius) 0 0 var(--radius)}
.choice-btn:hover{background:var(--bg-card-hover);border-color:rgba(212,168,83,.2);color:var(--text-primary);transform:translateX(4px)}
.choice-btn:hover .choice-num{color:var(--gold);border-color:var(--gold-dim)}
.choice-btn:hover::before{width:3px}

.choice-btn.selected{background:var(--gold-dim);border-color:rgba(212,168,83,.4);color:var(--text-primary)}
.choice-btn.selected::before{width:3px}
.choice-btn.selected .choice-num{background:var(--gold);color:var(--bg-deep);border-color:var(--gold)}

/* 2클릭 시스템: "하겠다" 선택 (초록) */
.choice-btn.selected-pick{background:rgba(91,191,123,.12);border-color:rgba(91,191,123,.5);color:var(--text-primary)}
.choice-btn.selected-pick::before{width:3px;background:linear-gradient(to bottom,#5BBF7B,#4CAF68)}
.choice-btn.selected-pick .choice-num{background:#5BBF7B;color:var(--bg-deep);border-color:#5BBF7B}
.choice-btn.selected-pick::after{content:'하겠다';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:#5BBF7B;letter-spacing:.5px}

/* 2클릭 시스템: "절대 안 해" 선택 (빨강) */
.choice-btn.selected-reject{background:rgba(224,82,82,.10);border-color:rgba(224,82,82,.4);color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:rgba(224,82,82,.3)}
.choice-btn.selected-reject::before{width:3px;background:linear-gradient(to bottom,#E05252,#CC4444)}
.choice-btn.selected-reject .choice-num{background:#E05252;color:white;border-color:#E05252}
.choice-btn.selected-reject::after{content:'안 하겠다';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:#E05252;letter-spacing:.5px}

/* "하겠다" 선택 후 잠금 상태 */
.choice-btn.pick-locked{pointer-events:none;opacity:.7}

/* 인라인 힌트 */
.quiz__hint{text-align:center;padding:10px 16px;margin-bottom:12px;font-size:13px;font-weight:600;border-radius:var(--radius);transition:all .3s ease;min-height:20px}
.quiz__hint:empty{padding:0;margin:0;min-height:0}
.hint--pick{background:rgba(91,191,123,.1);color:#5BBF7B;border:1px solid rgba(91,191,123,.2)}
.hint--reject{background:rgba(224,82,82,.1);color:#E05252;border:1px solid rgba(224,82,82,.2)}
.hint--done{background:rgba(212,168,83,.1);color:var(--gold);border:1px solid rgba(212,168,83,.2)}
.hint-icon{margin-right:4px}
.hint-step{opacity:.6;font-size:12px}
.hint-check{margin-right:4px}

/* 가이드 텍스트 강조 */
.pick-do{color:#5BBF7B}
.pick-never{color:#E05252}

/* 결과 차트: 마이너스 점수 */
.dist-bar--neg{opacity:.6}
.dist-value--neg{color:#E05252}

.choice-btn:active{transform:scale(.995)}

.quiz__nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0 max(32px,env(safe-area-inset-bottom,32px));position:sticky;bottom:0;background:linear-gradient(to top,var(--bg-deep) 60%,transparent)}
.nav-btn{font-family:var(--font-body);font-size:14px;font-weight:600;padding:14px 28px;border-radius:50px;cursor:pointer;transition:all .25s;border:none}
.nav-btn--prev{background:transparent;color:var(--text-tertiary);border:1px solid rgba(255,255,255,.1)}
.nav-btn--prev:hover{border-color:rgba(255,255,255,.2);color:var(--text-secondary)}
.nav-btn--prev.hidden{visibility:hidden;pointer-events:none}

.nav-btn--next{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--bg-deep);box-shadow:0 4px 16px rgba(212,168,83,.2)}
.nav-btn--next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,168,83,.3)}
.nav-btn--next:disabled{background:rgba(255,255,255,.08);color:var(--text-muted);box-shadow:none;cursor:not-allowed}

.nav-btn--next.final-pulse{animation:pulseGold 2s ease-in-out infinite}
@keyframes pulseGold{0%,100%{box-shadow:0 4px 16px rgba(212,168,83,.2)}50%{box-shadow:0 4px 32px rgba(212,168,83,.5)}}

/* ============================================
   5. 결과
   ============================================ */
.result{max-width:520px;width:100%;padding:48px 28px 60px;text-align:center}
.result__badge{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:36px}
.result__title{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1.5;margin-bottom:32px}
.result__name{color:var(--gold-light);font-weight:800}
.gold-line{width:48px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 40px}

/* === 비교 섹션 === */
.result__compare{margin-bottom:40px;padding:28px 24px;background:var(--bg-card);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.compare-title{font-size:14px;font-weight:700;letter-spacing:1px;color:var(--gold);margin-bottom:24px}

.compare-grid{display:flex;align-items:stretch;gap:0;margin-bottom:24px}

.compare-col{flex:1;padding:16px 12px;text-align:center}
.compare-label{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.compare-sub{font-size:11px;color:var(--text-muted);margin-bottom:16px}

.compare-base-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;margin-bottom:10px;
  font-size:14px;font-weight:700;color:var(--text-primary);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
}
.compare-base-chip .type-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.compare-hybrid-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  font-size:12px;font-weight:600;color:var(--text-secondary);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.compare-hybrid-chip .type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.compare-arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 8px;min-width:48px;
}
.compare-arrow span{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--gold);margin:8px 0}
.arrow-line{width:1px;flex:1;background:rgba(212,168,83,.3)}

.compare-insight{
  padding:16px 18px;background:rgba(212,168,83,.08);border:1px solid rgba(212,168,83,.15);border-radius:10px;
  font-size:13px;color:var(--text-secondary);line-height:1.75;text-align:left;
}
.compare-insight strong{color:var(--gold-light);font-weight:600}

/* TOP3 */
.result__podium{display:flex;flex-direction:column;gap:12px;margin-bottom:48px}
.podium-card{display:flex;align-items:center;gap:16px;padding:20px 22px;background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);text-align:left}
.podium-card--1{background:linear-gradient(135deg,rgba(212,168,83,.08),rgba(212,168,83,.02));border-color:rgba(212,168,83,.25);box-shadow:0 4px 24px rgba(212,168,83,.08)}
.podium-rank{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text-muted);min-width:28px}
.podium-card--1 .podium-rank{color:var(--gold)}
.podium-color{width:44px;height:44px;border-radius:12px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.podium-card--1 .podium-color{width:48px;height:48px}
.podium-info{flex:1}
.podium-type{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.podium-sub{font-size:12px;color:var(--text-tertiary)}
.podium-score{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--gold)}
.podium-card:not(.podium-card--1) .podium-score{color:var(--text-muted);font-size:24px}

.result__distribution{margin-bottom:40px;text-align:left}
.dist-title{font-size:13px;font-weight:600;color:var(--text-tertiary);letter-spacing:1px;margin-bottom:20px;text-align:center}
.dist-chart{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius)}
.dist-row{display:flex;align-items:center;gap:12px}
.dist-label{font-size:12px;font-weight:700;color:var(--text-tertiary);min-width:56px;text-align:right;letter-spacing:.5px}
.dist-bar-wrap{flex:1;height:10px;background:rgba(255,255,255,.04);border-radius:5px;overflow:hidden}
.dist-bar{height:100%;border-radius:5px;width:0%;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.dist-value{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-muted);min-width:24px;text-align:right}

.result__cta{margin-bottom:36px;padding:22px 24px;background:var(--gold-dim);border:1px solid rgba(212,168,83,.15);border-radius:var(--radius)}
.result__cta p{font-size:14px;color:var(--text-secondary);line-height:1.7}
.result__cta strong{color:var(--gold-light)}

.result__actions{display:flex;gap:12px;justify-content:center}
.btn-gold{padding:14px 36px;font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--bg-deep);background:linear-gradient(135deg,var(--gold),var(--gold-light));border:none;border-radius:50px;cursor:pointer;transition:all .3s;box-shadow:0 4px 16px rgba(212,168,83,.2)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,168,83,.3)}
.btn-outline{padding:14px 36px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text-tertiary);background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:50px;cursor:pointer;transition:all .3s}
.btn-outline:hover{border-color:rgba(255,255,255,.2);color:var(--text-secondary)}

/* ========== 토스트 ========== */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--gold);color:var(--bg-deep);padding:12px 28px;border-radius:50px;font-size:14px;font-weight:700;opacity:0;transition:all .3s;z-index:999;box-shadow:0 8px 32px rgba(212,168,83,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ========== 이어하기 배너 ========== */
.resume-banner{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:16px 24px;background:rgba(13,17,23,.95);border:1px solid rgba(212,168,83,.4);color:var(--text-primary);border-radius:16px;font-size:14px;font-weight:600;z-index:999;box-shadow:0 12px 48px rgba(0,0,0,.6);animation:slideUp .5s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:calc(100vw - 32px)}
.resume-banner__text{flex:1;line-height:1.5}
.resume-banner__text span{color:var(--gold)}
.resume-banner__btns{display:flex;gap:8px;flex-shrink:0}
.resume-yes{padding:10px 20px;background:var(--gold);color:var(--bg-deep);border:none;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.resume-yes:hover{background:var(--gold-light)}
.resume-no{padding:10px 16px;background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.1);border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.resume-no:hover{border-color:rgba(255,255,255,.2);color:var(--text-secondary)}
@keyframes slideUp{from{transform:translateX(-50%) translateY(40px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ========== 반응형 ========== */
@media(max-width:480px){
  .intro__title{font-size:26px}.intro__title em{font-size:34px}
  .intro__metrics{gap:16px}.metric__num{font-size:26px}
  .input-box{width:100%;max-width:280px}
  .base__title{font-size:22px}
  .compare-grid{flex-direction:column;gap:16px}
  .compare-arrow{flex-direction:row;padding:8px 0}.arrow-line{height:1px;width:100%;flex:1}
  .quiz{padding:0 18px}
  .quiz__title{font-size:19px}
  .quiz__scenario{padding:18px}.quiz__scenario p{font-size:14px}
  .choice-btn{padding:16px;font-size:13px}
  .nav-btn{padding:12px 22px;font-size:13px}
  .result__actions{flex-direction:column;align-items:center}
  .btn-gold,.btn-outline{width:100%;max-width:280px}
  .podium-card{padding:16px 18px;gap:12px}
  .podium-color{width:36px;height:36px}.podium-card--1 .podium-color{width:40px;height:40px}
  .step{gap:12px;padding:18px 0}.step__num{font-size:24px;min-width:32px}
  .resume-banner{flex-direction:column;text-align:center;gap:12px}
}
/* ===== 유형별 점수 입력 ===== */
.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.score-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.score-type {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  min-width: 58px;
}
.score-input {
  width: 48px;
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.score-input:focus {
  outline: none;
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.15);
}
.score-sum {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.score-sum.valid {
  color: rgba(212,175,55,0.9);
}
.score-sum.invalid {
  color: #E05252;
}