:root{--accent:#b8ff39;--text:#f7f4f6;--muted:#9c98a1;--line:#2b2932}*{box-sizing:border-box}html{background:#08080b}body.test-page{margin:0;min-height:100vh;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;background-color:#08080b;background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}button{font:inherit}.wrap{width:min(700px,100%);margin:auto;padding:24px 18px 55px}.card{position:relative;overflow:hidden;background:rgba(10,10,14,.96);border:1px solid #302c35;border-radius:25px;padding:31px 25px;box-shadow:0 20px 70px rgba(0,0,0,.42)}.hidden{display:none!important}.badge{display:inline-flex;padding:7px 11px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.7px}.accent{color:var(--accent)}.small{color:var(--muted);font-size:12.5px;line-height:1.6}.callout,.result-box{background:color-mix(in srgb,var(--accent) 5%,#0c0c10);border:1px solid color-mix(in srgb,var(--accent) 18%,#25252b);border-radius:17px;padding:18px;line-height:1.7;color:#d7d1d7}.btn{width:100%;border:0;border-radius:15px;background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 80%,white));color:white;padding:18px 20px;font-weight:900;font-size:16px;cursor:pointer;text-shadow:-.5px -.5px 0 rgba(0,0,0,.65),.5px -.5px 0 rgba(0,0,0,.65),-.5px .5px 0 rgba(0,0,0,.65),.5px .5px 0 rgba(0,0,0,.65);box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 16%,transparent)}.btn.secondary{background:#1a1a21;border:1px solid #393640;color:#ddd8df;box-shadow:none}
/* start: exact slots */#start{height:590px;min-height:590px;display:flex;flex-direction:column;padding:40px 26px 26px}#start.hidden{display:none!important}#start .badge{margin:0 0 18px;align-self:flex-start}#start h1{height:86px;min-height:86px;margin:0 0 12px;font-size:34px;line-height:1.2;letter-spacing:-1.2px;display:flex;align-items:flex-start}#start .common-subtitle{height:52px;min-height:52px;margin:0 0 14px;color:#c6c0c7;font-size:15px;line-height:1.65;font-weight:650}#start .callout{height:82px;min-height:82px;margin:0 0 18px;display:flex;align-items:center}#start .test-stats{height:84px;min-height:84px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #28272e;border-bottom:1px solid #28272e;margin:0 0 18px}#start .test-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;text-align:center}#start .test-stat:not(:last-child):after{content:"";position:absolute;right:0;width:1px;height:62%;background:#28272e}#start .test-stat span{color:var(--accent);font-size:19px}#start .test-stat b{font-size:13px}#start .btn{margin:auto 0 0;min-height:60px}#start .small{text-align:center;margin:11px 0 0;height:20px}
/* quiz exact geometry */#quiz{height:590px;min-height:590px;display:flex;flex-direction:column;padding:40px 26px 26px}#quiz.hidden{display:none!important}.qtop{display:flex;justify-content:space-between;color:#918b95;font-size:12px;font-weight:800}.progress{height:5px;background:#232229;border-radius:99px;margin:12px 0 0;overflow:hidden}.bar{height:100%;width:0;background:var(--accent);transition:width .2s}#quiz h2{font-size:25px;line-height:1.45;margin:48px 0 20px;letter-spacing:-.5px}.answers{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.answer{width:100%;min-height:72px;border:1px solid #34323a;border-radius:16px;background:#15151b;color:#eee9ef;padding:15px 18px;text-align:left;font-weight:800;cursor:pointer}.answer:hover,.answer.selected{border-color:var(--accent)}.answer:disabled{opacity:1}.quiz-nav{margin-top:14px}.back{height:38px;border:0;background:transparent;color:#77717b;cursor:pointer}
/* loading */.loading-card{min-height:470px;display:flex;align-items:center;justify-content:center;text-align:center}.loading-card.hidden{display:none!important}.orbit{width:52px;height:52px;border:5px solid #27262c;border-top-color:var(--accent);border-radius:50%;margin:0 auto 24px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.analysis-progress{height:7px;background:#24232a;border-radius:99px;overflow:hidden;margin:24px 0 10px}.analysis-fill{height:100%;width:0;background:var(--accent);transition:width .35s}.analysis-steps{display:grid;gap:7px;margin-top:22px;text-align:left}.analysis-step{color:#6f6973;font-size:12px}.analysis-step.active{color:#fff}.analysis-step.done{color:var(--accent)}.analysis-percent{color:var(--accent);font-weight:900}
/* results */#result h1{font-size:34px;line-height:1.2;letter-spacing:-1.1px}.section{border-top:1px solid #292830;margin-top:30px;padding-top:25px}.section h2{font-size:22px}.chips,.tagline{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.chip{border:1px solid #34323a;border-radius:999px;padding:7px 10px;color:#d8d2d9;font-size:12px}.trait,.axis{margin:15px 0}.trait-head,.axis{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.track{height:8px;background:#24232a;border-radius:99px;overflow:hidden}.fill{height:100%;background:var(--accent)}.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}.recommend-grid{display:grid;grid-template-columns:1fr;gap:11px}.recommend-card{position:relative;overflow:hidden;min-height:112px;border:1px solid #34323a;border-radius:16px;text-decoration:none;color:#fff;padding:18px 20px;display:flex;flex-direction:column;justify-content:flex-end}.recommend-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}.recommend-cat,.recommend-card b{position:relative;z-index:1}.recommend-cat{color:var(--accent);font-size:10px;font-weight:900;margin-bottom:7px}.recommend-card b{font-size:18px}.champ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.champ{text-align:center}.portrait{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid #34323a}.portrait img{width:100%;height:100%;object-fit:cover}.cname{font-weight:900;margin-top:7px}.fit{font-size:11px;color:var(--accent);margin-top:7px}.lane-bars{display:grid;gap:13px}.lane-row{display:grid;grid-template-columns:70px 1fr 45px;gap:10px;align-items:center}.result-lane-icon img{width:68px;height:68px}.result-hero{text-align:center}.share-status{min-height:18px}.more-tests{display:block;text-align:center;text-decoration:none;margin-top:18px}
@media(max-width:700px){.wrap{padding:18px 13px 45px}#start,#quiz{height:560px;min-height:560px;padding:28px 20px 22px}#start h1{height:72px;min-height:72px;font-size:29px}#start .common-subtitle{height:50px;min-height:50px;font-size:14px}#start .callout{height:86px;min-height:86px}#quiz h2{font-size:22px;margin-top:38px}.share-row{grid-template-columns:1fr}.champ-grid{gap:8px}.card{padding-left:20px;padding-right:20px}}
/* v3.1 visual contract */
.lead{color:#c9c4cb;line-height:1.7}
.loading-card{
  min-height:500px;
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),
    rgba(10,10,14,.96);
}
.loading-card>div,.analysis-wrap{width:min(470px,100%)!important}
.loading-card .badge{margin-bottom:14px}
.loading-card h1,.analysis-title{font-size:29px!important;line-height:1.3;margin:18px 0 10px}
.loading-card .lead,.analysis-copy{color:#c9c4cb}
.orbit{box-shadow:0 0 28px color-mix(in srgb,var(--accent) 20%,transparent)}
.analysis-progress{height:8px;margin-top:28px}
.analysis-fill{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 30%,transparent)}
.analysis-steps{padding:15px 17px;border:1px solid #292830;border-radius:15px;background:rgba(255,255,255,.018)}
.analysis-step{font-size:12.5px}

/* Result bars: all score displays use a visible, aligned track. */
.lane-row{grid-template-columns:54px minmax(0,1fr) 46px!important}
.lane-name{font-weight:800}
.lane-track{height:9px;background:#24232a;border-radius:999px;overflow:hidden}
.lane-fill{height:100%;background:var(--accent);border-radius:999px;min-width:2px}
.lane-pct{text-align:right;font-variant-numeric:tabular-nums}
.trait-head{grid-template-columns:1fr auto!important;margin-bottom:7px}
.trait-head span:last-child{text-align:right;color:#d7d2d9;font-variant-numeric:tabular-nums}
.axis{grid-template-columns:92px minmax(0,1fr) 34px!important}
.axis>span{text-align:right;font-variant-numeric:tabular-nums}
.track{width:100%}
.fill{border-radius:999px;min-width:2px}

/* Recommendation image must remain visible beneath its dark readability layer. */
.recommend-bg{background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}

/* Keep the two choices side-by-side on normal screens. */
.answers .answer{height:84px;min-height:84px;display:flex;align-items:center}
@media(max-width:520px){
  .answers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  .answers .answer{min-height:82px;height:auto;padding:13px 12px;font-size:14px}
}

/* v3.2 final visual tuning */
.start-card h1{height:auto!important;min-height:0!important;margin:0 0 8px!important}
.start-card .subtitle{height:auto!important;min-height:0!important;margin:0 0 24px!important}
.start-card .callout{margin-top:auto!important}

/* Start/loading: artwork inside the card. Quiz/result: opaque card. */
.start-card,.loading-card{position:relative;overflow:hidden;isolation:isolate;background:rgba(8,8,12,.72)!important}
.start-card::before,.loading-card::before{
 content:"";position:absolute;inset:0;z-index:-2;background-image:var(--card-art);
 background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.42
}
.start-card::after,.loading-card::after{
 content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(7,7,10,.60),rgba(7,7,10,.82))
}
.quiz-card,.result-card{background:rgba(8,8,12,.97)!important}

/* Two horizontal choices, but each card is tall / slightly taller than square. */
.answers{align-items:stretch}
.answers .answer{
 width:100%;aspect-ratio:.92 / 1;height:auto!important;min-height:0!important;
 padding:22px 20px!important;display:flex;align-items:center;justify-content:center;
 text-align:center;line-height:1.55
}
@media(max-width:600px){
 .start-card h1{margin-bottom:7px!important}
 .start-card .subtitle{margin-bottom:18px!important}
 .answers .answer{aspect-ratio:.95 / 1;padding:16px 13px!important}
}


/* =========================================================
   v3.3 final common polish
   ========================================================= */

/* Real shared icons from assets/icons */
#start .test-stat img{
  width:19px;height:19px;object-fit:contain;
  filter:brightness(0) saturate(100%) invert(88%) sepia(93%) saturate(1390%) hue-rotate(30deg) brightness(108%) contrast(105%);
}

/* Title/subtitle are a natural stack: subtitle stays close even if title wraps. */
#start h1{
  height:auto!important;min-height:0!important;
  margin:0 0 8px!important;
  display:block!important;
}
#start .common-subtitle{
  height:auto!important;min-height:0!important;
  margin:0 0 20px!important;
}
#start .callout{margin-top:auto!important}

/* Artwork is visible INSIDE start + analysis cards only. */
#start,#loading{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:rgba(8,8,12,.64)!important;
}
#start::before,#loading::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--card-art);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.48;
}
#start::after,#loading::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,7,10,.58),rgba(7,7,10,.80));
}
/* Question/result cards intentionally stay opaque. */
#quiz,#result{background:rgba(8,8,12,.97)!important}

/* Keep question geometry stable even when a question wraps to two lines. */
#quiz{height:590px!important;min-height:590px!important;max-height:590px!important}
#quiz .qtop{flex:0 0 auto}
#quiz .progress{flex:0 0 5px!important;display:block!important;visibility:visible!important}
#quiz h2{
  flex:0 0 108px!important;
  min-height:108px!important;max-height:108px!important;
  margin:38px 0 16px!important;
  display:flex;align-items:flex-start;
  overflow:hidden;
}
#quiz .answers{
  margin-top:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  flex:0 0 auto;
}
#quiz .answers .answer{
  width:100%!important;
  aspect-ratio:1.18 / 1!important; /* slightly shorter than square */
  height:auto!important;min-height:0!important;
  padding:18px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;line-height:1.5!important;
}
#quiz .quiz-nav{margin-top:14px!important;flex:0 0 auto}

@media(max-width:600px){
  #start h1{margin-bottom:7px!important}
  #start .common-subtitle{margin-bottom:17px!important}
  #quiz h2{
    flex-basis:98px!important;min-height:98px!important;max-height:98px!important;
    margin:30px 0 14px!important;
  }
  #quiz .answers .answer{aspect-ratio:1.12 / 1!important;padding:14px 11px!important}
}
\n/* v3.6 final polish */
/* Shared asset icons inherit each test's own accent color. */
#start .test-stat img{display:none!important}
#start .test-stat .stat-icon{
  width:19px;height:19px;display:block;background:var(--accent);
  -webkit-mask-image:var(--stat-icon);mask-image:var(--stat-icon);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* Top content stays together; lower information block sits together just above CTA. */
#start h1{margin-bottom:6px!important}
#start .common-subtitle{margin:0!important}
#start .callout{margin-top:auto!important;margin-bottom:10px!important}
#start .test-stats{margin-bottom:12px!important}
#start .btn{margin:0!important}
/* Slightly stronger dark outline for text on bright accent buttons. */
.btn{
 text-shadow:
 -1px -1px 0 rgba(0,0,0,.72),1px -1px 0 rgba(0,0,0,.72),
 -1px 1px 0 rgba(0,0,0,.72),1px 1px 0 rgba(0,0,0,.72),
 0 -1px 0 rgba(0,0,0,.72),0 1px 0 rgba(0,0,0,.72),
 -1px 0 0 rgba(0,0,0,.72),1px 0 0 rgba(0,0,0,.72)!important;
}
.btn.secondary{text-shadow:none!important}


/* v3.7 — final start-screen stat polish */
#start .test-stats{
  width:100%!important;height:112px!important;min-height:112px!important;
  margin:0 0 14px!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
}
#start .test-stat{
  min-height:86px!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  gap:9px!important;
}
#start .test-stat .stat-icon{
  display:block!important;width:29px!important;height:29px!important;
  background:var(--accent)!important;
  -webkit-mask-image:var(--stat-icon)!important;
  mask-image:var(--stat-icon)!important;
  -webkit-mask-size:contain!important;mask-size:contain!important;
  -webkit-mask-position:center!important;mask-position:center!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  opacity:1!important;
}
#start .test-stat b{
  font-size:16px!important;line-height:1.2!important;font-weight:900!important;
}


/* v3.8 — robust stat icons: use the SVG files as real <img> elements.
   This avoids browser-dependent CSS mask/custom-property rendering. */
#start .test-stat .stat-icon{display:none!important}
#start .test-stat img.stat-icon-img{
  display:block!important;
  width:29px!important;height:29px!important;
  object-fit:contain!important;
  opacity:1!important;
}
/* Original SVGs use currentColor, which does not inherit through <img>.
   Apply the two platform theme colors with explicit filters. */
#start .test-stat img.stat-icon-img.game{
  filter:brightness(0) saturate(100%) invert(94%) sepia(97%) saturate(1661%) hue-rotate(29deg) brightness(107%) contrast(101%)!important;
}
#start .test-stat img.stat-icon-img.love{
  filter:brightness(0) saturate(100%) invert(44%) sepia(92%) saturate(3284%) hue-rotate(315deg) brightness(104%) contrast(101%)!important;
}

/* v4.0 — VALORANT uses its own red/pink accent instead of the shared game green. */
#start .test-stat img.stat-icon-img.valorant{
  filter:brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(3908%) hue-rotate(337deg) brightness(103%) contrast(101%)!important;
}
.result-lane-icon img{filter:none!important}

/* v4.5 — OVERWATCH keeps its own sky-blue accent on the shared start-screen icons. */
#start .test-stat img.stat-icon-img.overwatch{
  filter:brightness(0) saturate(100%) invert(66%) sepia(61%) saturate(1828%) hue-rotate(178deg) brightness(103%) contrast(101%)!important;
}
/* Official-style Overwatch role symbols shown on the result screen. */
#result .result-lane-icon img.overwatch-role-icon{
  width:72px!important;height:72px!important;object-fit:contain!important;
  filter:invert(1)!important;opacity:.96;
}

/* v5.4: unified brand colors and discreet logo on the test landing card */
#start .test-stat img.stat-icon-img{opacity:1!important;}
#start .test-stat{position:relative;}
#start .test-stat:before{content:none!important;}
#start .test-stat:nth-child(1){--stat-mask:url('../assets/icons/person.svg')}
#start .test-stat:nth-child(2){--stat-mask:url('../assets/icons/clock.svg')}
#start .test-stat:nth-child(3){--stat-mask:url('../assets/icons/chart.svg')}
#start .start-brand-logo{position:absolute;right:23px;top:35px;width:94px;height:52px;object-fit:contain;pointer-events:none;}
#start:has(.start-brand-logo) .badge{max-width:calc(100% - 112px)}
#start:has(.start-brand-logo) h1{padding-right:0;}
@media(max-width:480px){#start .start-brand-logo{right:18px;top:34px;width:75px;height:43px;}#start:has(.start-brand-logo) .badge{max-width:calc(100% - 88px)}}

/* v5.5: Roblox cool gray icons; retain visible SVGs in all browsers */
#start .test-stat img.stat-icon-img.roblox{filter:brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(339%) hue-rotate(183deg) brightness(93%) contrast(88%)!important;}

/* v5.6: MapleStory orange accent; love badge on landing */
#start .test-stat img.stat-icon-img.maplestory{filter:brightness(0) saturate(100%) invert(69%) sepia(62%) saturate(1444%) hue-rotate(334deg) brightness(104%) contrast(101%)!important;}
#start .start-brand-logo[src*="love.svg"]{width:55px;height:55px;right:29px;top:28px;filter:invert(44%) sepia(72%) saturate(2565%) hue-rotate(302deg) brightness(105%) contrast(102%);}

/* Brawl Stars purple theme */ .stat-icon-img.brawl-stars{filter:invert(54%) sepia(60%) saturate(1100%) hue-rotate(220deg) brightness(108%)}

/* v6.1: new tests use their own accent, not the legacy game-green icon filter. */
#start .test-stat img.stat-icon-img.brawl-stars{filter:brightness(0) saturate(100%) invert(60%) sepia(68%) saturate(1281%) hue-rotate(218deg) brightness(104%) contrast(103%)!important}
#start .test-stat img.stat-icon-img.maplestory{filter:brightness(0) saturate(100%) invert(65%) sepia(85%) saturate(2211%) hue-rotate(346deg) brightness(105%) contrast(104%)!important}

/* v6.5: Cookie Run icon uses the yellow brand accent. */
#start .test-stat img.stat-icon-img.cookierun-cookie{filter:brightness(0) saturate(100%) invert(82%) sepia(64%) saturate(886%) hue-rotate(337deg) brightness(104%) contrast(103%)!important;}