/* 설윤 테스트(검사) 공통 UI — 라이트 글래스 테마(mobile.css 변수 재사용).
   /test 허브 + MBTI + 사운드코드 SPA가 공유. 정적 파일(난독화 제외). */

/* ── 상단 nav 레이아웃 (mobile.css는 색/배경만 잡음 · 위치·크기는 여기서) ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;height:60px;padding:0 28px;display:flex;
  align-items:center;justify-content:space-between;
  background:var(--gl-fill,rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border-bottom:1px solid var(--gl-stroke,rgba(255,150,200,.28))}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:800;letter-spacing:.5px;
  color:var(--text,#332e48);text-decoration:none;white-space:nowrap}
.nav-logo img{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.nav-logo .tag{font-size:.55rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--grad);color:#fff;letter-spacing:.5px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{padding:7px 14px;border-radius:99px;font-size:.78rem;font-weight:600;text-decoration:none}
.nav-links a.nav-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;font-weight:700;
  color:#fff!important;background:var(--grad);box-shadow:0 6px 18px rgba(255,126,179,.35)}
.nav-cta svg{width:15px;height:15px}

.test-wrap{max-width:720px;margin:0 auto;padding:90px 18px 72px;position:relative;z-index:1}

/* ── 배경 장식(소프트 오브 + 음악 노트) — 성능 안전(transform/opacity만) ── */
.t-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.t-deco .o{position:absolute;border-radius:50%;filter:blur(44px);opacity:.5;will-change:transform}
.t-deco .o1{width:340px;height:340px;left:-90px;top:6%;
  background:radial-gradient(circle,rgba(255,158,199,.55),transparent 70%);animation:t-drift 22s ease-in-out infinite}
.t-deco .o2{width:300px;height:300px;right:-80px;top:36%;
  background:radial-gradient(circle,rgba(202,166,255,.5),transparent 70%);animation:t-drift 27s ease-in-out infinite reverse}
.t-deco .o3{width:260px;height:260px;left:18%;bottom:-70px;
  background:radial-gradient(circle,rgba(255,201,180,.45),transparent 70%);animation:t-drift 31s ease-in-out infinite}
.t-deco b{position:absolute;font-size:26px;color:rgba(255,126,179,.42);will-change:transform;animation:t-note 9s ease-in-out infinite}
@keyframes t-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-26px)}}
@keyframes t-note{0%,100%{transform:translateY(0) rotate(-6deg);opacity:.22}50%{transform:translateY(-24px) rotate(9deg);opacity:.5}}
.t-back{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  color:var(--muted,#6f6783);text-decoration:none;margin-bottom:14px}
.t-back:hover{color:var(--brand,#ff7eb3)}

/* ── 공통 글래스 카드 ── */
.t-card{position:relative;overflow:hidden;background:var(--gl-fill,rgba(255,255,255,.6));
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7));border-radius:24px;
  box-shadow:0 18px 48px rgba(196,120,168,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
.t-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad,linear-gradient(135deg,#ff9ec7,#caa6ff))}

/* ── 인트로 ── */
.t-intro{padding:38px 26px 30px;text-align:center}
.t-emoji{font-size:54px;line-height:1;margin-bottom:14px}
.t-title{font-size:clamp(1.5rem,4.5vw,2rem);font-weight:900;letter-spacing:-.02em;
  line-height:1.2;color:var(--text,#332e48)}
.t-title .g{background:var(--grad,linear-gradient(120deg,#ff7eb3,#8b5cf6));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t-sub{margin:12px auto 0;max-width:34ch;color:var(--muted,#6f6783);font-size:.94rem;line-height:1.6}
.t-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 26px}
.t-chip{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;
  color:var(--text,#332e48);background:rgba(255,255,255,.5);
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7));padding:6px 13px;border-radius:99px}
.t-note{margin-top:16px;font-size:.74rem;color:var(--muted,#8b8398)}

/* ── 버튼 ── */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:800;padding:14px 30px;border-radius:99px;border:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.t-btn.primary{color:#fff;background:var(--grad,linear-gradient(135deg,#ff7eb3,#caa6ff));
  box-shadow:0 8px 22px rgba(255,126,179,.4)}
.t-btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,126,179,.55);filter:brightness(1.04)}
.t-btn.ghost{color:var(--text,#332e48);background:rgba(255,255,255,.55);
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7))}
.t-btn.ghost:hover{transform:translateY(-2px);border-color:var(--brand,#ff7eb3)}
.t-btn:focus-visible{outline:2px solid var(--brand,#ff7eb3);outline-offset:3px}

/* ── 진행바 ── */
.t-prog-wrap{position:sticky;top:64px;z-index:5;padding:10px 0 4px}
.t-prog{height:10px;border-radius:99px;background:rgba(255,255,255,.55);
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7));overflow:hidden;box-shadow:inset 0 1px 3px rgba(180,120,170,.12)}
.t-prog-bar{height:100%;width:0;border-radius:99px;background:var(--grad,linear-gradient(90deg,#ff9ec7,#caa6ff));
  box-shadow:0 0 12px rgba(255,126,179,.5);transition:width .5s cubic-bezier(.4,0,.2,1)}
.t-prog-label{margin-top:9px;text-align:center;font-size:.8rem;font-weight:800;color:var(--brand,#ff7eb3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── 문항 ── */
.t-qcard{padding:34px 26px 24px;margin-top:14px;animation:t-qin .42s cubic-bezier(.2,.75,.25,1)}
@keyframes t-qin{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.t-qnum{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:#fff;text-transform:uppercase;
  background:var(--grad);padding:5px 13px;border-radius:99px;box-shadow:0 4px 12px rgba(255,126,179,.35)}
.t-question{margin:16px 0 24px;font-size:clamp(1.25rem,3.8vw,1.55rem);font-weight:800;
  line-height:1.45;color:var(--text,#332e48);letter-spacing:-.015em;text-wrap:balance}
.t-opts{display:flex;flex-direction:column;gap:13px}
.t-opt{position:relative;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;font-family:inherit;
  font-size:1rem;font-weight:600;line-height:1.45;color:var(--text,#332e48);
  padding:18px 48px 18px 18px;border-radius:18px;background:rgba(255,255,255,.55);
  border:2px solid var(--gl-stroke,rgba(255,255,255,.7));
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.t-opt:hover{transform:translateY(-2px);border-color:var(--brand,#ff7eb3);
  background:rgba(255,255,255,.78);box-shadow:0 12px 26px rgba(255,126,179,.2)}
.t-opt.sel{border-color:var(--brand,#ff7eb3);
  background:linear-gradient(100deg,rgba(255,126,179,.16),rgba(202,166,255,.16));
  box-shadow:0 12px 30px rgba(255,126,179,.28);transform:translateY(-2px)}
.t-opt:focus-visible{outline:2px solid var(--brand,#ff7eb3);outline-offset:3px}
/* A/B 원형 인디케이터 */
.t-opt-key{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  font-size:.9rem;font-weight:800;color:var(--brand,#ff7eb3);background:#fff;
  border:2px solid var(--gl-stroke,rgba(255,150,200,.45));transition:all .18s ease}
.t-opt:hover .t-opt-key{border-color:var(--brand,#ff7eb3)}
.t-opt.sel .t-opt-key{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(255,126,179,.4)}
/* 선택 시 우측 체크 */
.t-opt::after{content:"";position:absolute;right:16px;top:50%;width:24px;height:24px;
  transform:translateY(-50%) scale(.3);opacity:0;border-radius:50%;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,1.5,.4,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat,
    linear-gradient(135deg,#ff7eb3,#caa6ff)}
.t-opt.sel::after{opacity:1;transform:translateY(-50%) scale(1)}
@keyframes t-pick{0%{transform:translateY(-2px) scale(1)}45%{transform:translateY(-2px) scale(1.03)}100%{transform:translateY(-2px) scale(1)}}
.t-opt.picking{animation:t-pick .42s ease}
.t-qnav{display:flex;justify-content:space-between;margin-top:20px}
.t-prev{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.84rem;font-weight:700;
  color:var(--muted,#6f6783);padding:8px 4px}
.t-prev:hover{color:var(--brand,#ff7eb3)}
.t-prev[hidden]{visibility:hidden}

/* ── 로딩(채점) ── */
.t-loading{padding:60px 24px;text-align:center}
.t-eq{display:inline-flex;align-items:flex-end;gap:6px;height:52px;margin-bottom:18px}
.t-eq i{width:8px;border-radius:4px;background:var(--grad,linear-gradient(#ff7eb3,#caa6ff));
  animation:t-eq 1s ease-in-out infinite}
.t-eq i:nth-child(1){animation-delay:0s}.t-eq i:nth-child(2){animation-delay:.15s}
.t-eq i:nth-child(3){animation-delay:.3s}.t-eq i:nth-child(4){animation-delay:.45s}
.t-eq i:nth-child(5){animation-delay:.6s}
@keyframes t-eq{0%,100%{height:14px}50%{height:52px}}
.t-loading p{color:var(--muted,#6f6783);font-weight:700}

/* ── 결과 ── */
.t-result{animation:t-in .5s ease-out}
@keyframes t-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.t-rhero{padding:36px 26px 28px;text-align:center}
.t-rcode{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  color:var(--brand,#ff7eb3);background:rgba(255,126,179,.12);padding:5px 14px;border-radius:99px;margin-bottom:12px}
.t-rnick{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;
  color:var(--text,#332e48)}
.t-rnick .g{background:var(--grad,linear-gradient(120deg,#ff7eb3,#8b5cf6));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t-rblurb{margin:14px auto 0;max-width:40ch;color:var(--muted,#4a4458);font-size:.95rem;line-height:1.65}
.t-rtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.t-sec{padding:22px 24px;border-top:1px solid var(--gl-stroke,rgba(255,255,255,.6))}
.t-sec h3{font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--brand,#ff7eb3);
  text-transform:uppercase;margin-bottom:14px}
.t-bars{display:flex;flex-direction:column;gap:14px}
.t-bar-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:.82rem;font-weight:700}
.t-bar-l{color:var(--text,#332e48)}.t-bar-r{color:var(--muted,#8b8398);text-align:right}
.t-bar-track{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.55);
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7));overflow:hidden}
.t-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:var(--grad,linear-gradient(90deg,#ff9ec7,#caa6ff));width:0;transition:width .8s cubic-bezier(.4,0,.2,1)}
.t-bar-pct{font-variant-numeric:tabular-nums;color:var(--brand,#ff7eb3);min-width:38px;text-align:right}
.t-match{display:flex;flex-wrap:wrap;gap:10px}
.t-match a,.t-match span{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;
  padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.5);
  border:1px solid var(--gl-stroke,rgba(255,255,255,.7));color:var(--text,#332e48);text-decoration:none}
.t-genre{color:var(--text,#332e48);font-size:.92rem;line-height:1.6}
.t-stat{font-size:.9rem;color:var(--muted,#4a4458);line-height:1.6}
.t-stat b{color:var(--brand,#ff7eb3);font-weight:800}
.t-actions{display:flex;flex-wrap:wrap;gap:10px;padding:22px 24px 26px;justify-content:center}
.t-actions .t-btn{padding:12px 20px;font-size:.85rem}
.t-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--text,#332e48);color:#fff;font-size:.82rem;font-weight:700;padding:11px 20px;border-radius:99px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:99}
.t-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 허브(/test) ── */
.hub-head{text-align:center;margin-bottom:28px}
.hub-tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand,#ff7eb3);margin-bottom:12px}
.hub-head h1{font-size:clamp(1.7rem,5.4vw,2.4rem);font-weight:900;letter-spacing:-.02em;line-height:1.2;color:var(--text,#332e48)}
.hub-head h1 .g{background:var(--grad,linear-gradient(120deg,#ff7eb3,#8b5cf6));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hub-head p{margin:12px auto 0;max-width:38ch;color:var(--muted,#6f6783);font-size:.96rem;line-height:1.6}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hub-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:26px 22px 22px;
  border-radius:24px;background:var(--gl-fill,rgba(255,255,255,.6));border:1px solid var(--gl-stroke,rgba(255,255,255,.7));
  box-shadow:0 16px 44px rgba(196,120,168,.14);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  transition:transform .22s ease,box-shadow .22s ease}
.hub-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad,linear-gradient(135deg,#ff9ec7,#caa6ff))}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(196,120,168,.26)}
.hub-cover{width:60px;height:60px;display:grid;place-items:center;font-size:32px;border-radius:18px;
  background:rgba(255,255,255,.55);border:1px solid var(--gl-stroke,rgba(255,255,255,.7))}
.hub-chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:var(--text,#332e48);
  background:rgba(255,255,255,.5);border:1px solid var(--gl-stroke,rgba(255,255,255,.7));padding:5px 11px;border-radius:99px}
.hub-chip.acc{color:var(--brand,#ff7eb3);background:rgba(255,126,179,.12);border-color:transparent}
.hub-title{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;color:var(--text,#332e48)}
.hub-desc{color:var(--muted,#6f6783);font-size:.86rem;line-height:1.55;flex:1}
.hub-meta{display:flex;flex-wrap:wrap;gap:6px}
.hub-done{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;font-size:.7rem;
  font-weight:800;color:#128a5c;background:rgba(18,138,92,.14);padding:5px 11px;border-radius:99px}
.hub-result{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--text,#332e48);
  background:rgba(255,126,179,.1);border:1px solid var(--gl-stroke,rgba(255,255,255,.7));padding:9px 13px;border-radius:12px}
.hub-actions{display:flex;gap:8px;margin-top:2px}
.hub-actions a{flex:1;text-align:center;font-size:.82rem;font-weight:800;padding:12px 10px;border-radius:99px;
  text-decoration:none;transition:transform .16s ease,filter .16s ease}
.hub-actions .go{color:#fff;background:var(--grad,linear-gradient(135deg,#ff7eb3,#caa6ff));box-shadow:0 6px 18px rgba(255,126,179,.35)}
.hub-actions .go:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hub-actions .sub{color:var(--text,#332e48);background:rgba(255,255,255,.55);border:1px solid var(--gl-stroke,rgba(255,255,255,.7))}
.hub-actions .sub:hover{transform:translateY(-2px)}
@media(max-width:640px){.hub-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .t-eq i{animation:none;height:32px}
  .t-result,.t-qcard,.t-opt.picking{animation:none}
  .t-deco .o,.t-deco b{animation:none}
  .t-prog-bar,.t-bar-fill{transition:none}
}
@media (max-width:520px){
  .test-wrap{padding:84px 14px 60px}
  .t-actions{flex-direction:column}
  .t-actions .t-btn{width:100%}
}