.trait-page{--trait-cyan:#73e6ff;--trait-violet:#c59aff;--trait-acid:#b7ff3c}.trait-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}.trait-intro article{min-height:220px;padding:30px;border:1px solid var(--official-line);background:radial-gradient(circle at 100% 0,rgba(115,230,255,.08),transparent 42%),var(--official-panel)}.trait-intro article:nth-child(2){background:radial-gradient(circle at 100% 0,rgba(197,154,255,.1),transparent 42%),var(--official-panel)}.trait-intro article:nth-child(3){background:radial-gradient(circle at 100% 0,rgba(183,255,60,.08),transparent 42%),var(--official-panel)}.trait-intro span{color:#839087;font-size:13px;font-weight:900}.trait-intro strong{display:block;margin-top:38px;color:#edf3ee;font-size:clamp(22px,2.4vw,31px);letter-spacing:-.04em}.trait-intro p{margin:13px 0 0;color:#97a29a;font-size:14px;line-height:1.75;word-break:keep-all}.trait-lab{margin-top:12px}.trait-round-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.65fr);gap:50px;align-items:end;padding:clamp(32px,5vw,60px);border:1px solid #46574c;background:radial-gradient(circle at 82% 15%,rgba(115,230,255,.12),transparent 29%),linear-gradient(145deg,#0d1410,#070b09)}.trait-group>header>span,.trait-round-panel>div>span{color:var(--trait-cyan);font:900 13px/1.3 Consolas,monospace;letter-spacing:1px}.trait-group>header h2,.trait-round-panel h2{margin:16px 0 0;color:#edf3ee;font-size:clamp(31px,4vw,53px);line-height:1.08;letter-spacing:-.05em;word-break:keep-all}.trait-group>header p,.trait-round-panel p{margin:17px 0 0;color:#9ea9a1;font-size:15px;line-height:1.8;word-break:keep-all}.trait-round-control label{display:flex;align-items:end;justify-content:space-between;color:#a8b3ab;font-size:14px;font-weight:850}.trait-round-control label b{color:var(--trait-acid);font:900 clamp(38px,5vw,62px)/.9 Consolas,monospace}.trait-round-control input{width:100%;margin:26px 0 22px;accent-color:var(--trait-acid)}.trait-quick-rounds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.trait-quick-rounds button{min-height:43px;border:1px solid #3b4940;background:#090e0b;color:#a8b3ab;font:850 13px Consolas,monospace;cursor:pointer}.trait-quick-rounds button.is-active{border-color:var(--trait-acid);background:rgba(183,255,60,.1);color:var(--trait-acid)}.trait-budget{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--official-line);border-top:0}.trait-budget article{min-height:190px;padding:28px;border-right:1px solid var(--official-line)}.trait-budget article:last-child{border-right:0}.trait-budget span{color:#7e8b82;font-size:13px;font-weight:850}.trait-budget strong{display:block;margin-top:24px;color:var(--trait-cyan);font-size:clamp(30px,3vw,45px);letter-spacing:-.04em}.trait-budget article:nth-child(2) strong{color:var(--trait-violet)}.trait-budget article:nth-child(3) strong{color:var(--trait-acid)}.trait-budget strong small{font-size:.48em}.trait-budget p{margin:10px 0 0;color:#818d85;font-size:13px}.trait-group{padding-top:clamp(80px,9vw,130px)}.trait-group>header{max-width:850px}.trait-core>header>span{color:var(--trait-violet)}.trait-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:38px}.trait-card{position:relative;min-width:0;overflow:hidden;border:1px solid var(--official-line);background:linear-gradient(145deg,rgba(115,230,255,.045),transparent 60%),#0b0f0d;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.trait-core .trait-card{background:linear-gradient(145deg,rgba(197,154,255,.055),transparent 60%),#0b0f0d}.trait-card.is-selected{border-color:var(--trait-cyan);box-shadow:inset 0 0 0 1px rgba(115,230,255,.14),0 0 26px rgba(115,230,255,.08);transform:translateY(-2px)}.trait-core .trait-card.is-selected{border-color:var(--trait-violet);box-shadow:inset 0 0 0 1px rgba(197,154,255,.14),0 0 26px rgba(197,154,255,.08)}.trait-card-main{width:100%;min-height:250px;padding:25px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.trait-card-main:focus-visible{outline:3px solid var(--trait-acid);outline-offset:-4px}.trait-card-main img{width:58px;height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 12px rgba(115,230,255,.28))}.trait-core .trait-card-main img{filter:drop-shadow(0 0 12px rgba(197,154,255,.3))}.trait-card-main span{display:block;margin-top:23px;color:var(--trait-cyan);font-size:11px;font-weight:900}.trait-core .trait-card-main span{color:var(--trait-violet)}.trait-card-main h3{margin:8px 0 0;color:#edf2ee;font-size:24px;letter-spacing:-.035em}.trait-card-main p{margin:14px 0 0;color:#8f9b93;font-size:13px;line-height:1.65;word-break:keep-all}.trait-level-control{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border-top:1px solid #2c362f;border-bottom:1px solid #2c362f}.trait-level-control button{height:48px;border:0;background:#101712;color:var(--trait-acid);font-size:22px;cursor:pointer}.trait-level-control button:disabled{color:#485249;cursor:not-allowed}.trait-level-control b{text-align:center;color:#eef3ef;font:900 16px Consolas,monospace}.trait-level-control b small{color:#748077}.trait-card>strong{min-height:66px;padding:15px 18px;color:#b9c3bb;font-size:12px;line-height:1.55}.trait-result{position:relative;margin-top:14px;padding:clamp(28px,4vw,48px);overflow:hidden;border:1px solid var(--trait-cyan);background:radial-gradient(circle at 88% 0,rgba(115,230,255,.13),transparent 36%),#0a100c}.trait-result.tone-core{border-color:var(--trait-violet);background:radial-gradient(circle at 88% 0,rgba(197,154,255,.14),transparent 36%),#0a0e0c}.trait-result-title{display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:center}.trait-result-title img{width:74px;height:74px;object-fit:contain;image-rendering:pixelated}.trait-result-title span{color:var(--trait-cyan);font-size:12px;font-weight:900}.tone-core .trait-result-title span{color:var(--trait-violet)}.trait-result-title h2{margin:8px 0 0;color:#f0f4f1;font-size:clamp(27px,3.4vw,43px);letter-spacing:-.045em}.trait-result-title p{margin:9px 0 0;color:#9ba69e;font-size:14px}.trait-result>strong{display:block;margin-top:30px;padding:22px;border:1px solid rgba(115,230,255,.35);background:rgba(5,8,6,.52);color:var(--trait-cyan);font-size:clamp(17px,2vw,24px);line-height:1.5}.trait-result.tone-core>strong{border-color:rgba(197,154,255,.35);color:var(--trait-violet)}.trait-role-bars{margin-top:22px}.trait-role-bars p{display:grid;grid-template-columns:54px 1fr 45px;gap:13px;align-items:center;margin:11px 0}.trait-role-bars em,.trait-role-bars span{color:#8d9990;font-size:12px;font-style:normal}.trait-role-bars i{height:7px;background:#18211b}.trait-role-bars i b{display:block;height:100%;background:linear-gradient(90deg,var(--trait-cyan),var(--trait-acid));transition:width .25s ease}.trait-result.tone-core .trait-role-bars i b{background:linear-gradient(90deg,var(--trait-violet),var(--trait-cyan))}.trait-result>button{margin-top:28px;padding:13px 18px;border:1px solid #47544b;background:#0a0f0c;color:#c9d2cb;font-weight:900;cursor:pointer}.trait-lab-note{margin:12px 0 0;padding:20px 23px;border-left:3px solid #ffcf55;background:rgba(255,207,85,.045);color:#a7b1a9;font-size:14px;line-height:1.75}.trait-lab-note b{color:#ffcf55}@media(max-width:1050px){.trait-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.trait-budget,.trait-intro{grid-template-columns:1fr}.trait-intro article{min-height:180px}.trait-budget article{min-height:150px;border-right:0;border-bottom:1px solid var(--official-line)}.trait-budget article:last-child{border-bottom:0}.trait-round-panel{grid-template-columns:1fr;gap:32px}.trait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.trait-intro{margin-top:26px}.trait-intro article{min-height:150px;padding:23px}.trait-intro strong{margin-top:25px}.trait-round-panel{padding:30px 20px}.trait-group>header h2,.trait-round-panel h2{font-size:35px}.trait-round-control label b{font-size:42px}.trait-quick-rounds{gap:4px}.trait-quick-rounds button{font-size:11px}.trait-budget article{padding:23px}.trait-grid{grid-template-columns:1fr;gap:8px;margin-top:28px}.trait-card-main{min-height:0;padding:22px}.trait-card-main img{width:52px;height:52px}.trait-card-main span{margin-top:16px}.trait-card>strong{min-height:0}.trait-result{padding:25px 20px}.trait-result-title{grid-template-columns:58px 1fr;gap:16px}.trait-result-title img{width:58px;height:58px}.trait-result-title h2{font-size:27px}.trait-result-title p{font-size:13px}.trait-result>strong{padding:17px;font-size:16px}.trait-role-bars p{grid-template-columns:44px 1fr 36px}}@media(prefers-reduced-motion:reduce){.trait-card,.trait-role-bars i b{transition:none}}.trait-round-maximum{display:block;margin-top:14px;color:#89958d;font-size:12px;line-height:1.6;word-break:keep-all}.trait-round-maximum:before{content:"MAX";display:inline-block;margin-right:8px;padding:3px 5px;border:1px solid rgba(183,255,60,.42);color:var(--trait-acid);font:900 9px/1 Consolas,monospace}.trait-card>strong{position:relative;display:block;min-height:94px;padding:35px 18px 17px;border-top:1px solid rgba(115,230,255,.16);background:linear-gradient(110deg,rgba(115,230,255,.07),transparent 72%);color:#aeb9b1;font-size:13px;font-weight:850;line-height:1.6;word-break:keep-all}.trait-card>strong:before{content:"특성 강화 효과";position:absolute;left:18px;top:13px;color:#6f8177;font:900 10px/1 Consolas,monospace;letter-spacing:.7px}.trait-card>strong.has-level{border-top-color:rgba(115,230,255,.48);background:linear-gradient(110deg,rgba(115,230,255,.16),rgba(115,230,255,.035) 58%,transparent);color:#dffaff;font-size:14px;text-shadow:0 0 13px rgba(115,230,255,.24);box-shadow:inset 3px 0 0 var(--trait-cyan)}.trait-card>strong.has-level:before{color:var(--trait-cyan);text-shadow:0 0 10px rgba(115,230,255,.45)}.trait-core .trait-card>strong{border-top-color:rgba(197,154,255,.16);background:linear-gradient(110deg,rgba(197,154,255,.07),transparent 72%)}.trait-core .trait-card>strong.has-level{border-top-color:rgba(197,154,255,.48);background:linear-gradient(110deg,rgba(197,154,255,.17),rgba(197,154,255,.035) 58%,transparent);color:#f0e5ff;text-shadow:0 0 13px rgba(197,154,255,.26);box-shadow:inset 3px 0 0 var(--trait-violet)}.trait-core .trait-card>strong.has-level:before{color:var(--trait-violet);text-shadow:0 0 10px rgba(197,154,255,.45)}@media(max-width:560px){.trait-round-maximum{font-size:11px}.trait-card>strong{min-height:86px;padding:35px 17px 16px;font-size:14px}.trait-card>strong:before{left:17px}.trait-card>strong.has-level{font-size:15px}}.trait-round-number{width:100%!important;height:58px!important;margin:24px 0 18px!important;padding:0 16px;border:1px solid #506359;background:#080d0a;color:var(--trait-acid);font:900 24px Consolas,monospace;outline:0}.trait-round-number:focus{border-color:var(--trait-acid);box-shadow:0 0 0 2px rgba(183,255,60,.12)}.trait-card-main{position:relative}.trait-core .trait-card-main>span{position:absolute;top:18px;right:18px;margin:0;padding:7px 9px;border:1px solid rgba(197,154,255,.48);background:rgba(197,154,255,.08);color:#dfc7ff;font:900 10px/1 Consolas,monospace;letter-spacing:.4px;box-shadow:0 0 18px rgba(197,154,255,.1)}.trait-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0 0;border:1px solid rgba(115,230,255,.2)}.tone-core .trait-detail-list{border-color:rgba(197,154,255,.24)}.trait-detail-list>div{min-width:0;padding:20px;border-right:1px solid rgba(115,230,255,.16);border-bottom:1px solid rgba(115,230,255,.16)}.trait-detail-list>div:nth-child(2n){border-right:0}.trait-detail-list>div:nth-last-child(-n+2){border-bottom:0}.tone-core .trait-detail-list>div{border-color:rgba(197,154,255,.18)}.trait-detail-list dt{color:#74847b;font:900 11px Consolas,monospace;letter-spacing:.6px}.trait-detail-list dd{margin:10px 0 0;color:#d4ddd6;font-size:14px;line-height:1.7;word-break:keep-all}@media(max-width:560px){.trait-round-number{height:52px!important;font-size:21px}.trait-quick-rounds{grid-template-columns:repeat(5,minmax(0,1fr))}.trait-quick-rounds button{padding:0 2px;font-size:9px}.trait-detail-list{grid-template-columns:1fr}.trait-detail-list>div,.trait-detail-list>div:nth-child(2n){border-right:0;border-bottom:1px solid rgba(115,230,255,.16)}.trait-detail-list>div:last-child{border-bottom:0}.trait-core .trait-card-main>span{top:15px;right:15px}}