*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Pretendard,'Noto Sans KR',Arial,sans-serif;background:#f8f7ff;color:#24154b}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}:root{--purple:#7448df;--pink:#f33f96;--coral:#ff7253;--yellow:#ffd956;--mint:#34d0a0;--ink:#24154b;--muted:#756b8c}.tr-hidden{display:none!important}
.tr-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:#72d9ff url('assets/trivia/world.webp') center 48%/cover}.tr-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1f0b55c9 0%,#3011697d 34%,transparent 66%),linear-gradient(0deg,#18083f99,transparent 55%)}.tr-hero-copy{position:relative;z-index:2;width:min(1380px,100%);margin:auto;padding:100px clamp(20px,6vw,88px) clamp(45px,7vw,82px);color:#fff}.tr-kicker{display:inline-flex;padding:8px 13px;border:1px solid #ffffff90;border-radius:99px;background:#ffffff24;backdrop-filter:blur(10px);font-size:12px;font-weight:1000;letter-spacing:1px}.tr-hero h1{max-width:780px;margin:18px 0 13px;font-size:clamp(50px,8vw,112px);line-height:.88;letter-spacing:-6px;text-shadow:0 8px 32px #25085690}.tr-hero h1 em{font-style:normal;color:#fff27c}.tr-hero p{max-width:650px;margin:0;font-size:clamp(16px,1.7vw,22px);line-height:1.55;font-weight:750;text-shadow:0 2px 12px #1c093e}.tr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.tr-btn{min-height:54px;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--pink),var(--coral));color:#fff;font-weight:1000;box-shadow:0 13px 30px #ec3d7860;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.tr-btn:hover{transform:translateY(-2px)}.tr-btn.light{background:#fff;color:#6237ce;box-shadow:0 13px 30px #21095340}.tr-btn.dark{background:#291452}.tr-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.tr-main{width:min(1380px,100%);margin:auto;padding:65px clamp(16px,4vw,56px) 100px}.tr-section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:24px}.tr-section-head span{color:var(--pink);font-size:11px;font-weight:1000;letter-spacing:1.8px}.tr-section-head h2{margin:5px 0 0;font-size:clamp(32px,4vw,57px);letter-spacing:-3px}.tr-section-head p{max-width:520px;margin:0;color:var(--muted);font-weight:700;line-height:1.6}.tr-panel{border:1px solid #e9e4f4;border-radius:32px;background:#fff;box-shadow:0 20px 55px #482b7d18;padding:clamp(20px,3vw,38px)}
.tr-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tr-cat{position:relative;min-height:178px;border:0;border-radius:24px;overflow:hidden;background:center/cover;color:#fff;text-align:left;cursor:pointer;isolation:isolate;box-shadow:0 12px 30px #44297222;transition:.2s}.tr-cat:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(0deg,#1e0d49e9,transparent);z-index:-1}.tr-cat:hover,.tr-cat.on{transform:translateY(-4px);box-shadow:0 17px 38px #44297238}.tr-cat.on{outline:5px solid #ffd85d}.tr-cat span{position:absolute;left:16px;right:16px;bottom:14px;font-size:21px;font-weight:1000}.tr-cat small{display:block;font-size:10px;margin-top:4px;color:#fff39a;letter-spacing:1px}.tr-cat.all{background-image:linear-gradient(135deg,#7048df,#f24699,#ff9c45)}
.tr-settings{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px}.tr-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tr-label{display:block;margin:0 0 9px;font-size:12px;font-weight:1000;color:#66577c}.tr-choice{min-height:50px;border:2px solid #e6e0f0;border-radius:15px;background:#fff;color:#4c3b68;font-weight:900;cursor:pointer}.tr-choice.on{border-color:#8053e9;background:#f0eaff;color:#6134cb}.tr-start-box{border-radius:22px;background:linear-gradient(135deg,#f1eaff,#fff1f7);padding:21px;display:flex;flex-direction:column;justify-content:space-between}.tr-start-box b{font-size:24px}.tr-start-box p{color:#786c8f;line-height:1.55;font-weight:700}.tr-start-box .tr-btn{width:100%}
.tr-stage{min-height:100svh;background:#eef5ff center/cover fixed;padding:clamp(14px,3vw,34px);position:relative}.tr-stage:before{content:'';position:fixed;inset:0;background:#f8f7ffdc;backdrop-filter:blur(16px)}.tr-game{position:relative;z-index:1;width:min(1240px,100%);margin:auto}.tr-game-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 18px;border-radius:22px;background:#ffffffeb;box-shadow:0 12px 40px #35186b20}.tr-player{text-align:left;padding:10px 14px;border-radius:15px;font-weight:900}.tr-player:last-child{text-align:right}.tr-player.active{background:#eee6ff;color:#6635d2}.tr-player b{display:block;font-size:22px}.tr-counter{text-align:center}.tr-counter strong{font-size:22px}.tr-counter span{display:block;color:#7b6e91;font-size:11px;font-weight:900;margin-top:4px}.tr-progress{height:9px;margin:14px 3px;border-radius:99px;background:#ddd7eb;overflow:hidden}.tr-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#31d4a2,#ffe25c,#f53b98);transition:.3s}.tr-question{display:grid;grid-template-columns:minmax(270px,.9fr) minmax(360px,1.1fr);overflow:hidden;border-radius:30px;background:#fff;box-shadow:0 20px 60px #38206326}.tr-visual{min-height:570px;background:center/cover;position:relative}.tr-visual:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(0deg,#210a4dbb,transparent)}.tr-visual-copy{position:absolute;z-index:1;left:24px;right:24px;bottom:22px;color:#fff}.tr-visual-copy span{display:inline-flex;padding:7px 10px;border-radius:99px;background:#ffffff2d;border:1px solid #ffffff70;font-size:11px;font-weight:1000}.tr-visual-copy h2{margin:10px 0 0;font-size:30px}.tr-qa{padding:clamp(24px,4vw,50px);display:flex;flex-direction:column}.tr-timer{height:8px;border-radius:99px;background:#eee9f4;overflow:hidden}.tr-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#40d1ac,#ffe15e,#f33f96);transform-origin:left;transition:width .1s linear}.tr-prompt{font-size:clamp(25px,3.2vw,42px);letter-spacing:-2px;line-height:1.18;margin:29px 0 22px}.tr-answers{display:grid;grid-template-columns:1fr 1fr;gap:11px}.tr-answer{min-height:83px;border:2px solid #e8e2f1;border-radius:18px;background:#fff;color:#28164d;padding:13px;text-align:left;font-weight:900;line-height:1.35;cursor:pointer;transition:.16s}.tr-answer:hover{border-color:#a98bf3;transform:translateY(-2px)}.tr-answer.correct{border-color:#27c48e;background:#e8fff6;color:#107555}.tr-answer.wrong{border-color:#ff4e79;background:#fff0f4;color:#a61d44}.tr-answer:disabled{cursor:default;transform:none}.tr-answer b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eee8fb;margin-right:8px}.tr-feedback{margin-top:16px;min-height:72px;border-radius:17px;padding:15px 17px;background:#f5f1ff;color:#5f5276;font-weight:750;line-height:1.5}.tr-feedback strong{color:#4b25b4}.tr-next{align-self:flex-end;margin-top:13px;min-height:48px}.tr-result{max-width:820px;margin:8vh auto 0;text-align:center;border-radius:34px;padding:clamp(30px,6vw,68px);background:#fffffff0;box-shadow:0 25px 70px #32116731}.tr-result .trophy{font-size:70px}.tr-result h2{font-size:clamp(40px,6vw,72px);margin:10px 0;letter-spacing:-4px}.tr-score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.tr-score-card{padding:20px;border-radius:19px;background:#f1ecff}.tr-score-card b{display:block;font-size:36px;color:#6d3bd5}
.tr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}.tr-stat{padding:20px;border-radius:21px;background:#fff;box-shadow:0 10px 30px #43277215}.tr-stat b{font-size:28px;display:block;color:#6e3eda}.tr-stat span{color:#756a8c;font-size:12px;font-weight:800}.tr-study-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tr-filter{min-height:43px;padding:0 15px;border:2px solid #e8e2f1;border-radius:999px;background:#fff;font-weight:900;color:#675979;cursor:pointer}.tr-filter.on{background:#6f42da;border-color:#6f42da;color:#fff}.tr-library-tools{display:grid;grid-template-columns:1fr auto;gap:10px}.tr-search{min-height:50px;border:2px solid #e5dfef;border-radius:15px;padding:0 16px;color:#2b1a4f}.tr-library{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px}.tr-card{overflow:hidden;border-radius:21px;background:#fff;box-shadow:0 10px 28px #3f286c15;border:1px solid #eee8f5}.tr-card-img{height:125px;background:center/cover}.tr-card-body{padding:15px}.tr-card small{font-weight:1000;color:#7445db}.tr-card h3{font-size:15px;line-height:1.4;margin:7px 0}.tr-card p{font-size:12px;line-height:1.45;color:#756b8b;margin:0}.tr-card.mastered{outline:3px solid #35cf9c}.tr-more{margin:20px auto 0;display:flex}.tr-learn-stage{position:fixed;z-index:2147483600;inset:0;overflow:auto;background:#f6f3ff;padding:20px}.tr-learn-card{width:min(900px,100%);margin:3vh auto;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 24px 70px #2d155b30}.tr-learn-image{height:min(35vh,310px);background:center/cover}.tr-learn-body{padding:clamp(22px,4vw,42px)}.tr-learn-top{display:flex;justify-content:space-between;color:#776b8d;font-size:12px;font-weight:900}.tr-learn-body h2{font-size:clamp(26px,4vw,42px);letter-spacing:-2px}.tr-learn-close{position:fixed;right:25px;top:20px;width:48px;height:48px;border:0;border-radius:50%;background:#24134d;color:#fff;font-size:24px;cursor:pointer}.tr-review-note{padding:14px;border-radius:14px;background:#fff7d9;color:#6a5510;font-weight:800;margin-top:13px}
@media(max-width:900px){.tr-categories{grid-template-columns:repeat(2,1fr)}.tr-settings,.tr-question{grid-template-columns:1fr}.tr-visual{min-height:310px}.tr-library{grid-template-columns:repeat(2,1fr)}.tr-game-head{grid-template-columns:1fr 1fr}.tr-counter{grid-column:1/-1;grid-row:1}.tr-player{grid-row:2}.tr-hero:after{background:linear-gradient(0deg,#1c084ed9 0%,#2e116c7d 60%,transparent)}.tr-hero-copy{padding-top:170px}.tr-hero h1{letter-spacing:-4px}}
@media(max-width:560px){.tr-categories{grid-template-columns:1fr 1fr}.tr-cat{min-height:130px}.tr-options{grid-template-columns:1fr}.tr-answers{grid-template-columns:1fr}.tr-answer{min-height:65px}.tr-stats{grid-template-columns:1fr 1fr}.tr-library{grid-template-columns:1fr}.tr-section-head{display:block}.tr-section-head p{margin-top:12px}.tr-hero h1{font-size:51px}.tr-game-head{gap:5px}.tr-player{padding:8px;font-size:12px}.tr-player b{font-size:18px}.tr-stage{padding:8px}.tr-question{border-radius:23px}.tr-qa{padding:20px}.tr-prompt{font-size:26px}}