:root{color-scheme:dark;--bg:#0c121c;--surface:#131d2a;--panel:#172332;--line:#2d3c4d;--muted:#98a6b7;--text:#e9edf2;--gold:#dbc38c;--gold-bright:#f2d9a1;--blue:#9fc7ed;--red:#df9994}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -30%,#233c5140,transparent 60%),var(--bg);color:var(--text);font:14px/1.6 Arial,'Malgun Gothic',sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button{transition:background .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.15)}[hidden]{display:none!important}.site-header{max-width:1340px;margin:auto;padding:22px 38px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff0d}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700}.brand-symbol{font-family:Georgia,serif;color:var(--gold);border:1px solid #b59d6570;width:33px;height:37px;text-align:center;font-size:26px;line-height:35px}.brand small{display:block;color:#8391a3;font-size:8px;letter-spacing:2px;font-weight:400}.header-caption{font-size:12px;color:#a6b2c1}.beta{font-size:8px;letter-spacing:1px;padding:3px 6px;background:#dbc38c15;color:var(--gold);margin-left:7px}.text-button{background:none;border:0;color:var(--muted);font-size:12px;padding:8px}.text-button:hover{color:var(--text)}main{max-width:1280px;margin:auto;padding:0 34px}.page-title{display:flex;align-items:end;justify-content:space-between;margin:39px 0 27px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);margin:0 0 8px;font-weight:700}h1{font-size:30px;letter-spacing:-1.2px;margin:0;font-weight:600}h1 span{color:#8a99ab;font-weight:400}.subtitle{font-size:13px;color:var(--muted);margin:8px 0 0}.data-stamp{font-size:10px;white-space:nowrap;color:#91a499;padding-bottom:4px}.data-stamp i,.autosave-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#92ba9b;margin-right:7px}.simulator{border:1px solid #5e5949;box-shadow:0 8px 50px #0003;background:linear-gradient(140deg,#1c2b3b44,transparent 45%),#111b27;overflow:hidden;border-radius:5px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 24px;background:linear-gradient(90deg,#27364788,#111922);border-bottom:1px solid #6a624b}h2,h3,p{overflow-wrap:anywhere}.game-heading h2{font-size:18px;margin:0;color:#e9dec7;font-weight:600}.cycle{font-size:26px;color:var(--gold);margin-right:10px;vertical-align:middle;line-height:1}.cost-head{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:11px}.cost-head b{font-size:18px;color:var(--gold-bright);font-weight:500;margin-left:14px}.cost-head small{font-size:9px;margin-left:8px;color:#9d927a}.cost-head i{width:1px;height:20px;background:#394353}.class-banner{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:20px 22px;padding:21px 24px;border:1px solid #496079;background:radial-gradient(ellipse at 95% 130%,#6282a52a,transparent 70%),linear-gradient(100deg,#243b5055,#172434);position:relative}.class-banner:after{content:'';position:absolute;top:0;left:0;width:90px;border-top:2px solid #92b6d9}.class-pair{display:flex;gap:22px;align-items:center;flex-shrink:0}.field-label{display:block;font-size:10px;margin:0 0 8px;color:#aebed0;letter-spacing:1px}.gold{color:var(--gold)}select,input{color:var(--text);border:1px solid #3a4c62;background:#101b29;padding:10px 13px;border-radius:3px;min-width:0}select{cursor:pointer}.class-pair select{width:165px;font-size:16px;font-weight:600;height:45px}#to{border-color:#9c895c;color:var(--gold-bright);background:linear-gradient(#263b4e,#1b2c3e)}.class-arrow{font-size:29px;color:#8996a6;padding-top:20px}.banner-note{display:flex;align-items:center;gap:16px;max-width:360px}.diamond{font-size:52px;color:#9db2c351;font-family:Georgia,serif}.banner-note p{font-size:13px;color:#c5d2df;margin:0}.banner-note small{display:block;font-size:10px;color:#92a2b4;margin-top:5px}.compare-heading{display:grid;grid-template-columns:190px 1fr 42px 1fr;gap:12px;padding:0 26px 10px;color:#aab6c4;font-size:11px}.compare-heading>span:nth-child(2){color:var(--red)}.compare-heading>span:last-child{color:var(--gold)}.compare-heading small{font-size:9px;opacity:.65;margin-left:8px}.category-row{margin:0 20px 10px;display:grid;grid-template-columns:190px 1fr 42px 1fr;gap:12px;padding:18px 6px;background:linear-gradient(90deg,#24354854,#18263540);border-top:1px solid #3343579c;border-bottom:1px solid #26394c;align-items:stretch;min-height:110px}.category-intro{display:flex;gap:12px;align-items:center;padding-left:8px}.category-icon{display:grid;place-items:center;width:33px;height:38px;border:1px solid #6f715d;color:var(--gold);background:#253445;font-size:20px;flex-shrink:0}.category-intro h3{font-size:14px;font-weight:500;margin:0 0 4px}.category-intro small{color:#8d9eb0;font-size:10px;display:block}.change-button{border:1px solid #5b7896;background:linear-gradient(#354e68,#263c54);box-shadow:inset 0 0 0 1px #ffffff07;padding:5px 14px;color:#d5e3f2;font-size:11px;margin-top:7px;min-width:100px}.compare-cell{background:#0c152060;border:1px solid #30435770;display:flex;flex-direction:column;justify-content:center;padding:12px 14px;min-width:0}.compare-cell.after{border-color:#7c6a423d;background:#ad8d3810}.compare-cell .placeholder{color:#748599;font-size:11px;margin:0}.compare-cell.after .placeholder{color:#8c816a}.compare-arrow{align-self:center;text-align:center;font-size:23px;color:#8495a5}.comparison-item{padding:5px 0;border-bottom:1px solid #ffffff0a}.comparison-item:last-child{border-bottom:0}.comparison-item strong{font-size:12px;font-weight:500;display:block}.comparison-item small{font-size:10px;color:var(--muted)}.comparison-item .enhance{color:#a4c2df;margin-right:6px;font-variant-numeric:tabular-nums}.after .comparison-item .enhance{color:var(--gold)}.after .comparison-item{display:flex;align-items:center;justify-content:space-between;gap:10px}.remove-button{border:0;background:transparent;color:#7e8a99;font-size:17px;padding:0 5px;flex-shrink:0}.ready-badge{font-size:9px;display:inline-block;padding:1px 6px;margin-top:8px;border:1px solid #45505e;color:#8d9eb0}.category-row.pending{opacity:.72}.category-row.pending .compare-cell{border-style:dashed}.sim-footer{padding:17px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #354050;background:#0f1721}.sim-footer p{font-size:10px;color:#8799ac;margin:0}.sim-footer>div{display:flex;gap:16px;align-items:center}.primary-button{border:1px solid #b6a06a;background:linear-gradient(#d8c394,#bba36f);color:#24221d;padding:10px 20px;font-size:12px;font-weight:bold;border-radius:2px;white-space:nowrap}.primary-button span{margin-left:24px}.below-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:23px 0}.cost-card,.guide-card{border:1px solid #2a3a4c;background:#121d2a;padding:24px 28px;border-radius:4px}.section-label{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.8px;color:var(--muted);margin-bottom:16px}.section-label b{letter-spacing:0;color:var(--gold);font-size:10px;font-weight:400}.cost-card h2,.guide-card h2{font-size:20px;margin:0;font-weight:500;letter-spacing:-.5px}.big-cost{display:flex;align-items:baseline;gap:13px;padding:7px 0 12px}.big-cost strong{font-size:38px;color:var(--gold-bright);font-weight:400;font-variant-numeric:tabular-nums}.big-cost>span{font-size:10px;color:var(--muted)}.cost-line{display:flex;justify-content:space-between;padding:6px 0;font-size:11px;color:#a5b3c3}.cost-line b{color:#ccd6e0;font-weight:400}.base-control{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:11px;color:#aab6c3}.base-control small{display:block;font-size:9px;color:#73869c;margin-top:3px}.base-control input{width:115px;padding:7px 10px;text-align:right;font-size:12px}.fine-print{font-size:10px;line-height:1.8;color:#7d8fa2;margin:13px 0 0}.guide-card{background:radial-gradient(ellipse at 100% 100%,#35516c25,transparent 75%),#121d2a}.guide-card h2{margin-bottom:18px}.guide-card ol{list-style:none;padding:0;margin:0}.guide-card li{display:flex;align-items:start;gap:16px;margin:15px 0;font-size:12px}.guide-card li b{color:var(--gold);font:12px Georgia,serif;padding-top:2px}.guide-card li small{display:block;font-size:10px;margin-top:3px;color:var(--muted)}.warning{padding:12px 16px;border:1px solid #805e3a;background:#6e42101f;color:#e2bd88;font-size:12px;border-radius:3px;margin:8px 0}footer{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#718296;margin:27px 0 32px;letter-spacing:.3px} dialog{color:var(--text);background:#111c29;border:1px solid #65717e;border-radius:5px;padding:0;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#040910ce;backdrop-filter:blur(5px)}#picker{width:min(1120px,calc(100% - 36px));max-height:calc(100dvh - 50px);overflow:auto}#notes{width:min(620px,calc(100% - 36px));max-height:85dvh}.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:21px 25px;border-bottom:1px solid #354559;background:linear-gradient(110deg,#25384c,#172330)}.dialog-heading h2{margin:0;font-size:20px;font-weight:500}.dialog-heading .eyebrow{font-size:8px;margin-bottom:4px}.icon-button{font-size:28px;line-height:1;border:0;background:transparent;color:#a9b8c8;padding:0 5px}.picker-tabs{display:flex;gap:22px;padding:0 25px;border-bottom:1px solid var(--line)}.picker-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:15px 3px 12px;font-size:12px}.picker-tabs [aria-selected=true]{border-bottom-color:var(--gold);color:var(--gold)}.filter-bar{display:flex;gap:10px;margin:20px 24px 8px;align-items:center}.search-field{display:flex;align-items:center;gap:10px;flex:1;background:#0b1521;border:1px solid #3b5066;padding:0 12px;border-radius:3px}.search-field>span:not(.sr-only){font-size:24px;color:#8a9db0}.search-field input{border:0;padding:10px 0;width:100%;background:transparent;font-size:12px;outline-offset:0}.slot-field select{font-size:12px;max-width:220px;padding:11px}.filter-context{margin:0 24px 16px;color:var(--muted);font-size:10px}.picker-grid{display:grid;grid-template-columns:40% 1fr;gap:0;border-top:1px solid var(--line);margin:0 24px 20px;min-height:430px}.catalog{border-right:1px solid var(--line);padding:17px 18px 0 0;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px}.panel-heading h3{font-size:12px;font-weight:500;margin:0}.panel-heading>span{font-size:10px;color:var(--muted)}.item-list{height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3a4a5e #121d2a}.item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;border-bottom-color:#283749;background:transparent;padding:11px 9px;color:var(--text)}.item.active{border-color:#8f7e55;background:#b99a5210}.tile{width:31px;height:36px;display:grid;place-items:center;background:#263b4e;border:1px solid #566b7c;color:var(--gold);font-size:18px;flex-shrink:0}.item strong{font-size:11px;display:block;font-weight:400}.item small{color:#8093a8;font-size:9px;display:block;margin-top:3px}.pagination{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin-top:12px}.pagination button{padding:4px 11px;border:1px solid #34485c;background:#1e3043;color:var(--text)}.detail{padding:17px 0 0 24px;min-width:0}.detail h2{font-size:21px;letter-spacing:-.5px;margin:9px 0 5px;font-weight:500}.tag{display:inline-block;background:#a58a451a;border:1px solid #bba26b45;padding:2px 6px;color:#cdbb92;font-size:9px;margin-right:5px}.info{font-size:10px;color:var(--muted)}.level{display:flex;gap:17px;align-items:center;margin:17px 0;padding:12px;background:#1e2d3e;border:1px solid #34495e}.level label{font-size:10px;color:#b5c4d4;display:flex;align-items:center;gap:14px;white-space:nowrap}.level input{width:65px;padding:6px 8px;color:var(--gold);text-align:center;font-size:14px}.level .info{font-size:9px;line-height:1.7}.targets{max-height:220px;overflow:auto;scrollbar-width:thin}.target{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 4px 12px 0;border-bottom:1px solid #2b3d50}.target strong{font-size:11px;font-weight:500}.target p{font-size:9px;color:var(--muted);margin:4px 0 0}.target .target-enhance{color:var(--gold)}.target button{border:1px solid #88774e;color:var(--gold-bright);background:#d4b5720f;font-size:10px;padding:6px 10px;white-space:nowrap}.picker-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;border-top:1px solid #3a4a5c;padding:15px 24px;background:#0d1722}.picker-bottom>span{font-size:10px;color:var(--muted)}.empty{padding:45px 12px;text-align:center;font-size:12px;color:var(--muted)}.notes-body{padding:14px 26px 26px;font-size:12px;color:var(--muted)}.notes-body h3{font-size:13px;color:var(--gold);margin:22px 0 7px}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);border:1px solid #a28d60;background:#233347;color:#e8d6b0;padding:12px 22px;border-radius:3px;box-shadow:0 10px 40px #0007;font-size:12px;z-index:5;max-width:90vw}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(min-width:1500px){.page-title{margin-top:50px}.category-row{min-height:122px}} @media(max-width:1000px){.banner-note{display:none}.class-banner{justify-content:center}.compare-heading,.category-row{grid-template-columns:160px 1fr 22px 1fr;gap:8px}.category-intro{padding-left:2px;gap:8px}.category-intro h3{font-size:12px}.category-icon{width:26px;font-size:17px}.page-title{align-items:start}.data-stamp{display:none}.category-row{padding:15px 4px}.compare-cell{padding:10px}.comparison-item strong{font-size:11px}.category-row.pending{min-height:90px}.game-heading{padding:16px 20px}} @media(max-width:700px){.site-header{padding:17px 19px}.header-caption{display:none}main{padding:0 14px}.page-title{margin:26px 3px 21px}h1{font-size:23px}h1 span{display:block;font-size:19px;margin-top:3px}.subtitle{font-size:11px;max-width:300px}.game-heading{flex-wrap:wrap;gap:9px;padding:14px}.game-heading h2{font-size:16px}.cost-head{width:100%;justify-content:space-between;font-size:10px}.cost-head b{font-size:16px}.cost-head small{font-size:8px}.class-banner{margin:13px;padding:15px 12px}.class-pair{width:100%;gap:13px}.class-pair label{flex:1;min-width:0}.class-pair select{width:100%;font-size:14px;padding:9px;height:42px}.class-arrow{font-size:23px}.compare-heading{display:none}.category-row{margin:0 12px 12px;padding:12px;grid-template-columns:1fr 20px 1fr;gap:8px;min-height:0}.category-intro{grid-column:1/-1;align-items:center;padding:0 0 5px}.category-intro>div{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.category-intro h3{font-size:13px;margin:0}.category-intro small{font-size:9px}.category-icon{height:29px;width:27px}.change-button{margin:0 0 0 auto;min-width:70px;padding:4px 12px}.ready-badge{margin:0 0 0 auto}.compare-cell{padding:9px 8px;min-height:61px}.compare-cell:before{content:'변경 전';color:var(--red);font-size:8px;display:block;margin-bottom:5px}.compare-cell.after:before{content:'변경 후';color:var(--gold)}.compare-cell .placeholder{font-size:9px}.comparison-item strong{font-size:10px}.comparison-item small{font-size:8px}.compare-arrow{font-size:18px}.sim-footer{padding:14px;flex-wrap:wrap}.sim-footer>div{width:100%;justify-content:space-between}.below-grid{grid-template-columns:1fr;gap:14px;margin:16px 0}.cost-card,.guide-card{padding:20px}.guide-card h2 br{display:none}.guide-card h2{font-size:18px}.guide-card li{margin:14px 0}.guide-card li:last-child{margin-bottom:0}footer{flex-direction:column;gap:5px;font-size:8px;margin:20px 0}#picker{width:calc(100% - 16px);max-height:calc(100dvh - 20px)}.dialog-heading{padding:15px 17px}.dialog-heading h2{font-size:18px}.picker-tabs{padding:0 16px}.filter-bar{margin:14px 15px 7px;flex-wrap:wrap;gap:8px}.search-field{flex-basis:100%}.slot-field{flex:1}.slot-field select{width:100%;max-width:none;padding:8px}.filter-context{margin:0 16px 10px;font-size:9px}.picker-grid{grid-template-columns:1fr;margin:0 15px 15px;min-height:0}.catalog{border-right:0;padding:12px 0;border-bottom:1px solid var(--line)}.item-list{height:175px}.item{padding:8px}.item strong{font-size:11px}.item small{font-size:8px}.tile{height:30px;width:27px}.detail{padding:16px 0 0}.detail h2{font-size:18px}.level{padding:9px;margin:12px 0;gap:12px}.targets{max-height:220px}.picker-bottom{position:sticky;bottom:0;padding:12px 16px}.picker-bottom>span{font-size:9px}.picker-bottom .primary-button{padding:9px 12px}.category-row.pending .compare-cell{min-height:48px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* Readability, comparison hierarchy, and small-screen selection flow. */ :root{--muted:#a6b4c5;--text:#eef2f7;--line:#35465a} body{background:radial-gradient(ellipse at 80% -10%,#2c496229,transparent 55%),#0b111a} main{max-width:1320px;padding:0 36px}.site-header{max-width:1380px}.page-title{margin:35px 0 24px}h1{font-size:32px}.subtitle{font-size:14px;line-height:1.8}.header-caption,.text-button{font-size:13px}.data-stamp{font-size:12px}.brand small{font-size:9px} .workflow{display:flex;align-items:stretch;gap:18px;margin:0 0 24px}.workflow-step{flex:1;display:flex;align-items:center;gap:13px;padding:14px 17px;border:1px solid #2c3d50;border-radius:5px;background:#121e2b}.workflow-step>b{height:30px;width:30px;flex:0 0 30px;display:grid;place-items:center;font-size:11px;border:1px solid #3e5067;background:#1b2b3d;color:#97a9be;border-radius:50%;font-weight:400}.workflow-step>span{font-size:13px;color:#b4c2d2}.workflow-step small{display:block;font-size:11px;margin-top:2px;color:#7f93a9}.workflow-step>i{margin-left:auto;font-size:10px;color:#8598ae;font-style:normal;white-space:nowrap}.workflow-step.active{border-color:#a18b5b;background:linear-gradient(120deg,#b69b4d0d,#162333)}.workflow-step.active>b,.workflow-step.complete>b{border-color:#a18b5b;color:var(--gold)}.workflow-step.active>span,.workflow-step.active>i{color:var(--gold-bright)}.workflow-step.complete>i{color:#a4c4ae}.workflow-arrow{align-self:center;font-size:16px;color:#485b72} .simulator{border-color:#5c645f;border-radius:7px}.game-heading{padding:19px 26px}.game-heading h2{font-size:20px}.cost-head{font-size:12px}.cost-head b{font-size:21px}.cost-head small{font-size:10px}.class-banner{padding:23px 27px;margin:22px 24px;border-radius:4px;background:radial-gradient(ellipse at 90% 100%,#65839d25,transparent 65%),#192a3c}.field-label{font-size:12px;letter-spacing:.2px}.class-pair select{width:190px;height:49px;font-size:17px}.class-pair{gap:27px}.banner-note p{font-size:14px}.banner-note small{font-size:12px;line-height:1.7} .equipment-heading{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:6px 28px 19px}.equipment-heading h2{font-size:16px;margin:0;font-weight:500}.equipment-heading p{font-size:12px;color:var(--muted);margin:2px 0 0}.equipment-heading>span{font-size:11px;padding:5px 10px;border:1px solid #3d4c5b;border-radius:30px;color:#b4c5d5}.compare-heading,.category-row{grid-template-columns:205px 1fr 30px 1fr;gap:14px}.compare-heading{padding:0 30px 11px;font-size:12px}.compare-heading small{font-size:10px}.category-row{margin:0 24px 12px;padding:18px 10px;min-height:126px;border:1px solid #35475b;border-radius:5px;background:#1b2b3d66}.category-row.has-items{border-color:#6a704e}.category-intro{gap:13px;padding-left:4px}.category-icon{width:38px;height:44px;border-radius:3px;font-size:21px}.category-intro h3{font-size:15px;margin-bottom:5px}.category-intro small{font-size:11px;color:#a1b1c4}.change-button{margin-top:11px;font-size:12px;min-height:34px;min-width:116px;border-color:#8b9cb0;background:linear-gradient(#415d7b,#2a425d);border-radius:3px}.compare-cell{padding:13px 16px;border-radius:3px;border-color:#3b4c62;background:#0b15227a}.compare-cell.after{border-color:#7c6d434d;background:#a68a3210}.is-empty .compare-cell{border-style:dashed}.compare-cell .placeholder{font-size:12px;line-height:1.8;color:#96a8bd}.compare-cell.after .placeholder{color:#aea28a}.comparison-item{min-height:57px;padding:9px 0}.comparison-item strong{font-size:13px;line-height:1.7}.comparison-item small{font-size:11px;line-height:1.6;display:block;margin-top:3px}.comparison-item .enhance{font-weight:bold}.remove-button{width:30px;height:32px;border-radius:3px;background:#ffffff05;font-size:19px}.remove-button:hover{background:#df99941a;color:#efb4ad}.category-row.pending{min-height:92px;background:#14203066;opacity:.73}.category-row.pending .category-icon{border-color:#45556a;color:#8397ad}.category-row.pending .compare-cell{background:transparent}.ready-badge{font-size:10px;padding:2px 8px;border-radius:3px}.sim-footer{padding:18px 26px}.sim-footer p{font-size:12px}.primary-button{min-height:42px;font-size:13px;border-radius:3px;padding:10px 22px} .below-grid{gap:24px;margin:24px 0}.cost-card,.guide-card{padding:25px 28px}.cost-card h2,.guide-card h2{font-size:22px}.section-label{font-size:11px}.section-label b{font-size:12px}.big-cost strong{font-size:42px}.big-cost>span{font-size:12px}.cost-line{font-size:13px;padding:7px 0}.base-control{font-size:13px}.base-control small{font-size:11px}.base-control input{font-size:14px;min-height:39px}.fine-print{font-size:12px}.guide-card li{font-size:14px;margin:18px 0}.guide-card li small{font-size:12px}.guide-card li b{font-size:14px}.eyebrow{font-size:11px}footer{font-size:11px}.warning{line-height:1.8} #picker{width:min(1160px,calc(100% - 40px));max-height:calc(100dvh - 44px);border-color:#667a8d}.dialog-heading{padding:21px 27px}.dialog-heading h2{font-size:23px}.dialog-heading .eyebrow{font-size:10px}.dialog-caption{font-size:12px;color:#a3b6ca;margin:5px 0 0}.icon-button{width:38px;height:38px;border-radius:4px}.icon-button:hover{background:#ffffff0a}.picker-tabs button{font-size:14px;padding:17px 4px 13px}.filter-bar{margin:21px 25px 10px}.search-field input{font-size:14px;min-height:46px}.slot-field select{font-size:13px;min-height:46px}.filter-context{font-size:12px;margin:0 25px 17px}.picker-grid{grid-template-columns:42% 1fr;margin:0 25px 21px;min-height:440px}.catalog{padding-top:18px}.panel-heading{margin-bottom:14px}.panel-heading h3{font-size:14px}.panel-heading>span{font-size:12px}.item-list{height:min(39dvh,390px)}.item{padding:13px 10px;border-radius:3px}.item strong{font-size:13px;line-height:1.6}.item small{font-size:11px;line-height:1.5}.tile{height:39px;width:35px;border-radius:3px}.item.active{box-shadow:inset 3px 0 #d6bd83}.item:hover{background:#ffffff05}.pagination{font-size:12px}.pagination button{min-width:38px;min-height:34px;border-radius:3px}.detail{padding-left:25px}.detail h2{font-size:23px}.tag{font-size:11px;padding:3px 8px;border-radius:3px}.info{font-size:12px}.level{padding:14px;border-radius:4px;gap:20px}.level label{font-size:12px}.level input{height:39px;font-size:16px}.level .info{font-size:11px}.targets{max-height:270px}.target{padding:14px 5px 14px 0;gap:16px}.target strong{font-size:13px}.target p{font-size:11px;line-height:1.7}.target button{font-size:12px;min-width:74px;min-height:36px;border-radius:3px}.picker-bottom{padding:17px 26px}.picker-bottom>span{font-size:12px}.empty{font-size:13px;line-height:1.8}.notes-body{font-size:13px}.notes-body h3{font-size:15px}.back-to-list{display:none}.toast{font-size:13px} @media(max-width:1050px){.workflow{gap:9px}.workflow-step{padding:12px;gap:8px}.workflow-step>i{display:none}.workflow-step small{font-size:10px}.class-pair select{width:180px}.compare-heading,.category-row{grid-template-columns:175px 1fr 22px 1fr;gap:9px}.category-intro{gap:9px}.category-intro h3{font-size:14px}.category-intro small{font-size:10px}.category-icon{width:31px;height:39px}.comparison-item strong{font-size:12px}.comparison-item small{font-size:10px}.compare-cell{padding:11px 12px}.compare-heading small{display:none}.data-stamp{display:none}} @media(max-width:700px){main{padding:0 14px}.site-header{padding:17px 18px}.page-title{margin:23px 4px 18px}h1{font-size:25px}h1 span{display:inline;font-size:25px;font-weight:400}.subtitle{font-size:12px;max-width:none}.workflow{gap:6px;margin-bottom:19px}.workflow-arrow{display:none}.workflow-step{display:block;text-align:center;padding:12px 5px;border-radius:4px}.workflow-step>b{margin:auto auto 6px;width:25px;height:25px;font-size:10px;display:grid}.workflow-step>span{font-size:11px}.workflow-step small{display:none}.workflow-step>i{display:none}.game-heading{padding:15px 16px}.game-heading h2{font-size:18px}.cost-head{font-size:11px}.cost-head b{font-size:18px;margin-left:9px}.cost-head small{font-size:9px}.class-banner{margin:14px;padding:17px 13px}.class-pair{gap:13px}.class-pair select{width:100%;height:46px;font-size:16px}.field-label{font-size:11px}.equipment-heading{padding:6px 16px 15px;gap:10px;align-items:start}.equipment-heading h2{font-size:15px}.equipment-heading p{font-size:11px}.equipment-heading>span{font-size:10px;padding:4px 8px;max-width:155px;text-align:center}.category-row{margin:0 13px 13px;padding:13px;grid-template-columns:1fr 18px 1fr;gap:8px;min-height:0;border-radius:5px}.category-intro{gap:9px;padding:0 0 7px}.category-intro>div{gap:7px}.category-intro h3{font-size:14px}.category-intro small{display:none}.category-icon{height:30px;width:28px;font-size:18px}.change-button{min-height:35px;font-size:12px;min-width:98px;margin:0 0 0 auto}.ready-badge{font-size:10px}.compare-cell{padding:9px 10px;min-height:77px}.compare-cell:before{font-size:10px;margin-bottom:7px}.compare-cell .placeholder{font-size:11px;line-height:1.7}.comparison-item{min-height:73px;padding:6px 0}.comparison-item strong{font-size:12px;line-height:1.6}.comparison-item small{font-size:10px}.comparison-item .enhance{display:inline-block}.after .comparison-item{gap:3px}.remove-button{width:25px;min-width:25px;height:30px;padding:0}.category-row.pending{min-height:0}.category-row.pending .compare-cell{min-height:66px}.category-row.pending .placeholder{font-size:10px}.sim-footer{padding:15px 16px}.sim-footer p{font-size:11px}.sim-footer>div{gap:10px}.primary-button{min-height:43px;padding:10px 17px;font-size:13px}.below-grid{gap:15px;margin:16px 0}.cost-card,.guide-card{padding:21px}.cost-card h2,.guide-card h2{font-size:20px}.cost-line{font-size:13px}.fine-print{font-size:11px}.base-control{font-size:12px}.base-control small{font-size:10px}.guide-card li{font-size:13px}.guide-card li small{font-size:11px}footer{font-size:10px;line-height:1.8} #picker{width:calc(100% - 16px);max-height:calc(100dvh - 18px);border-radius:6px}.dialog-heading{padding:17px 16px}.dialog-heading h2{font-size:21px}.dialog-heading .eyebrow{font-size:9px}.dialog-caption{font-size:11px}.picker-tabs{padding:0 16px;gap:25px}.picker-tabs button{font-size:13px;padding:14px 2px 12px}.filter-bar{margin:15px 15px 9px}.search-field input{font-size:14px;min-height:44px}.slot-field select{font-size:13px;min-height:41px}.filter-context{font-size:11px;margin:0 16px 13px}.picker-grid{grid-template-columns:1fr;min-height:0;margin:0 15px 17px}.catalog{padding:13px 0 0;border:0}.item-list{height:42dvh;min-height:205px}.item{padding:11px 9px}.item strong{font-size:13px}.item small{font-size:11px}.tile{width:32px;height:36px}.pagination{margin-top:13px;font-size:12px}.pagination button{min-width:41px;min-height:36px}.picker-grid:not(.has-selection) .detail{display:none}.picker-grid.has-selection .catalog{display:none}.picker-grid.has-selection .detail{padding:15px 0 0}.back-to-list{display:block;padding:9px 0 15px;border:0;background:none;color:#b2cde4;font-size:12px;text-align:left}.detail h2{font-size:21px}.tag{font-size:10px}.info{font-size:11px}.level{padding:12px;gap:15px;margin:15px 0}.level label{font-size:12px}.level .info{font-size:10px}.level input{height:38px;font-size:16px}.targets{max-height:40dvh;min-height:180px}.target{padding:14px 0;gap:10px}.target strong{font-size:13px}.target p{font-size:11px}.target button{font-size:12px;min-height:39px;min-width:73px}.picker-bottom{padding:14px 16px;gap:12px}.picker-bottom>span{font-size:11px;line-height:1.7}.picker-bottom .primary-button{min-height:42px}.empty{font-size:13px}} @media(max-width:375px){h1,h1 span{font-size:22px}.cost-head small{display:block;margin:0;text-align:right}.category-row{padding:10px;gap:5px}.compare-cell{padding:8px}.comparison-item strong{font-size:11px}.equipment-heading>span{max-width:125px;font-size:9px}.base-control input{width:95px}} /* Client-style class gate, equipment slots and staged replacement dialog. */ .class-select-button{display:flex;justify-content:space-between;align-items:center;gap:18px;min-width:190px;min-height:49px;padding:10px 17px;border:1px solid #4d9bcc;background:linear-gradient(#2b658e,#173e5c);box-shadow:inset 0 0 14px #36b6ff28,0 0 8px #36b6ff20;color:#e2f2ff;font-size:16px;font-weight:bold;border-radius:3px}.class-select-button.chosen{border-color:#bda363;color:var(--gold-bright);background:linear-gradient(#435574,#24394f)}.category-row.locked .change-button{opacity:.35;box-shadow:none}.category-row:not(.locked) .change-button{border-color:#43a5d9;box-shadow:0 0 8px #2b9ed42b;background:linear-gradient(#2a688f,#173d5b)}.category-row.pending:not(.locked){opacity:1}.category-row .ready-badge{display:block;width:max-content;margin-top:6px}.tile img{width:100%;height:100%;object-fit:contain}.picker-tabs{display:none}.exchange-layout{display:grid;grid-template-columns:135px 1fr;gap:17px;margin:0 24px 20px;border-top:1px solid var(--line);padding-top:15px}.slot-nav{display:flex;flex-direction:column;gap:7px;max-height:480px;overflow:auto;scrollbar-width:thin}.slot-nav button{border:1px solid #3c5066;min-height:44px;background:linear-gradient(#25374a,#182737);font-size:13px;color:#c6d0da;border-radius:2px;padding:10px}.slot-nav button[aria-pressed=true]{border-color:#42a5d4;box-shadow:inset 3px 0 #3ac6ff,inset 0 0 16px #3094bb24;color:#e5f4ff;background:#244760}.exchange-table{min-width:0}.exchange-table-head{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.exchange-table-head h3{background:#ffffff08;text-align:center;font-size:13px;padding:10px;margin:0;font-weight:500;color:#c6d3e1}#exchange-rows{max-height:440px;min-height:220px;overflow:auto;scrollbar-width:thin}.exchange-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px;align-items:stretch}.owned-cell,.result-cell{border:1px solid #3c5062;background:#10203177;min-height:79px;padding:10px;display:flex;gap:10px;align-items:center;min-width:0}.owned-cell>div,.staged-result>div{flex:1;min-width:0}.owned-cell strong,.staged-result strong{font-size:12px;line-height:1.7;font-weight:500}.owned-cell small,.staged-result small{display:block;font-size:10px;line-height:1.7;color:#a6b4c4}.owned-cell .tile,.staged-result .tile{width:36px;min-width:36px;height:42px}.gold-button{margin-left:auto;white-space:nowrap;border:1px solid #ad8f4c;background:linear-gradient(#8e7541,#604b26);color:#fff0c5;padding:6px 14px;border-radius:2px;font-size:12px;min-height:33px}.result-cell{display:block;background:#0b16216e}.result-cell>p{font-size:11px;color:#8896a7;text-align:center;margin:17px 0}.staged-result{display:flex;gap:9px;align-items:center;min-height:57px;color:var(--gold-bright)}.staged-result+.staged-result{border-top:1px solid var(--line)}.mythic{color:#f79073}.legendary{color:#e697bc}.heroic{color:#b99bef}.rare{color:#8ec3ee}.exchange-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:11px;color:#a5b3c6}.exchange-pagination button{min-width:40px;min-height:33px;border:1px solid #3b5269;background:#20354a;color:#cddbea}.cancel-button{min-height:42px;padding:8px 24px;border:1px solid #8f4b44;background:linear-gradient(#673a37,#412523);color:#ecd0cc;border-radius:3px;font-size:13px}.picker-bottom>span{margin-left:auto}.picker-bottom{gap:15px}#exchange-warning{padding:0 24px}#exchange-warning:empty{display:none}#class-picker{width:min(740px,calc(100% - 28px));max-height:85dvh}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:25px}.class-card{padding:20px 10px;background:radial-gradient(ellipse at 50% 0,#4265843d,transparent 80%),#1a2a3c;border:1px solid #4a6075;color:#d9e5f0;display:flex;align-items:center;flex-direction:column;gap:9px;border-radius:3px}.class-card>span{font-size:36px;color:#b9cfe1;line-height:1}.class-card strong{font-size:14px;font-weight:500}.class-card small{font-size:10px;color:#859bb3}.class-card:hover,.class-card.selected{border-color:#d3b875;background-color:#263a50}.class-card.selected small{color:var(--gold-bright)}.class-picker-note{font-size:12px;color:var(--muted);text-align:center;margin:0 20px 23px}#target-picker{width:min(510px,calc(100% - 28px));max-height:88dvh;border-color:#ae8655;background:linear-gradient(#2d231c,#1c1c21)}#target-picker .dialog-heading{background:linear-gradient(#3b2a21,#261f1d);border-bottom-color:#866643}#target-body{padding:19px 22px}.target-source{display:flex;align-items:center;gap:11px;padding-bottom:15px;border-bottom:1px solid #755e423d}.target-source strong{font-size:14px;color:#e5cf9e}.target-source small{display:block;font-size:10px;color:#a49e96}.target-level{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c3b6a0;padding:13px 0}.target-level input{width:80px;padding:7px 10px;font-size:16px;border-color:#776043;background:#211d1b}.target-options{max-height:40dvh;overflow:auto;scrollbar-width:thin}.target-option{display:flex;align-items:center;gap:11px;padding:13px 11px;margin-bottom:7px;background:#ffffff04;border:1px solid #6a513735;cursor:pointer}.target-option>input{accent-color:#ceb578;margin:0}.target-option>span:not(.tile){flex:1}.target-option strong{display:block;font-size:13px;color:#f0d1b0;font-weight:500}.target-option small{display:block;font-size:10px;color:#b6a995;margin-top:3px}.target-option>b{font-size:16px;font-weight:500;color:#e4bf6c}.target-option.chosen{border-color:#ca9f56;background:#b895421a}.target-option.unavailable{opacity:.4;cursor:default}.target-help{font-size:11px;line-height:1.9;color:#c1a66d;padding-top:10px;margin:7px 0 0}.target-footer{display:flex;justify-content:center;gap:12px;padding:16px 22px;border-top:1px solid #80643f55;background:#17171d}.target-footer button{flex:1;max-width:200px}#feature-dialog{width:min(520px,calc(100% - 28px))}#feature-dialog .empty{line-height:2;padding:30px 25px 40px} @media(max-width:1000px){.exchange-layout{grid-template-columns:110px 1fr;gap:10px;margin:0 17px 18px}.owned-cell,.result-cell{padding:8px;gap:7px}.owned-cell .tile{width:31px;min-width:31px;height:36px}.owned-cell strong,.staged-result strong{font-size:11px}.gold-button{padding:6px 9px}.class-select-button{min-width:180px}.result-cell>p{font-size:10px}} @media(max-width:700px){.class-select-button{min-width:0;min-height:46px;width:100%;font-size:15px;padding:9px 12px}.exchange-layout{display:block;margin:0 13px 15px;padding-top:10px}.slot-nav{flex-direction:row;max-height:none;overflow-x:auto;margin-bottom:12px;gap:7px;padding-bottom:4px;scrollbar-width:thin}.slot-nav button{min-height:39px;min-width:max-content;padding:8px 14px;font-size:12px}.slot-nav button[aria-pressed=true]{box-shadow:inset 0 -2px #3ac6ff}.exchange-table-head{gap:6px}.exchange-table-head h3{font-size:11px;padding:8px}.exchange-row{gap:6px}.owned-cell{flex-wrap:wrap;padding:9px;gap:7px;align-content:start}.owned-cell>div{flex-basis:calc(100% - 42px)}.owned-cell .gold-button{margin-left:0;width:100%;min-height:32px;font-size:11px;margin-top:3px}.owned-cell strong,.staged-result strong{font-size:11px}.owned-cell small,.staged-result small{font-size:9px}.owned-cell .tile{width:28px;min-width:28px;height:34px}.result-cell{padding:9px;display:flex;align-items:center;justify-content:center}.result-cell>p{font-size:10px;line-height:1.9;margin:0}.staged-result{flex-wrap:wrap;gap:5px;width:100%}.staged-result .tile{display:none}.staged-result>div{flex-basis:calc(100% - 24px)}#exchange-rows{max-height:49dvh;min-height:200px}.exchange-pagination{font-size:10px;margin-top:10px}.picker-bottom{padding:12px 14px;gap:9px;flex-wrap:wrap}.picker-bottom>span{order:-1;width:100%;font-size:11px;text-align:right}.picker-bottom .cancel-button,.picker-bottom .primary-button{flex:1}.class-grid{grid-template-columns:repeat(3,1fr);gap:9px;padding:18px}.class-card{padding:16px 7px;gap:8px}.class-card strong{font-size:13px}.class-card>span{font-size:29px}.class-card small{font-size:9px}.class-picker-note{font-size:11px}#target-body{padding:15px}.target-option{padding:11px 8px;gap:8px}.target-option .tile{width:31px;height:36px;min-width:31px}.target-option strong{font-size:12px}.target-help{font-size:10px}.target-source strong{font-size:13px}.target-footer{padding:13px 15px}.target-source small{font-size:10px}.category-row .ready-badge{display:none}} .skill-cost-summary{display:grid;grid-template-columns:1fr auto;gap:4px 15px;border-top:1px solid #655a40;border-bottom:1px solid #655a40;padding:16px 0;margin:13px 0;color:#e4d4b2;align-items:center}.skill-cost-summary>span{font-size:13px}.skill-cost-summary strong{font-size:16px;font-weight:400}.skill-cost-summary strong b{font-size:25px;font-weight:500;color:var(--gold-bright);margin-right:5px}.skill-cost-summary small{font-size:11px;color:#9babbc;grid-column:1/-1}.skill-max-note{font-size:11px;color:#b7a47b;line-height:1.8;margin:11px 0}#skill-dialog{width:min(760px,calc(100% - 26px));max-height:90dvh}.skill-dialog-body{padding:18px 26px 12px}.skill-scope{font-size:12px;color:var(--muted);margin:0 0 17px}.skill-cost-table{overflow:auto}.skill-cost-table table{width:100%;border-collapse:collapse;font-size:13px}.skill-cost-table th,.skill-cost-table td{border-bottom:1px solid #35485d;padding:11px;text-align:center;white-space:nowrap}.skill-cost-table thead th{background:#263a50;color:#d1dfed;font-size:12px;font-weight:500}.skill-cost-table tbody th{text-align:left;font-weight:500;color:#e8d4ac}.skill-cost-table tbody th small{display:block;font-size:10px;color:#9aadc1;font-weight:400}.skill-cost-table select,.skill-cost-table input{width:85px;min-height:38px;padding:6px 9px;font-size:13px}.skill-cost-table td:last-child{color:var(--gold-bright)}.skill-tier-notes{font-size:11px;line-height:1.8;color:#b9c6d5;margin:15px 0}.skill-tier-notes p{margin:3px 0}.skill-live-total{display:flex;justify-content:space-between;align-items:center;background:#b39a5014;border:1px solid #8b784c;padding:14px 17px;font-size:14px;color:var(--gold-bright)}.skill-live-total strong{font-size:18px;font-weight:400}.skill-live-total b{font-size:29px;margin-right:6px;font-weight:500}.cost-head{flex-wrap:wrap} @media(max-width:700px){.cost-head{gap:9px}.cost-head>i{display:none}.cost-head>span{flex:1;min-width:115px}.cost-head>span:last-child{flex-basis:100%;border-top:1px solid #384351;padding-top:6px}.cost-head>span:last-child small{display:inline;margin-left:4px}.skill-dialog-body{padding:15px 14px 9px}.skill-cost-table th,.skill-cost-table td{padding:10px 6px;font-size:12px}.skill-cost-table thead th{font-size:10px}.skill-cost-table tbody th small{font-size:9px}.skill-cost-table select,.skill-cost-table input{width:70px;font-size:13px}.skill-scope,.skill-tier-notes{font-size:11px}.skill-max-note{font-size:10px}.skill-live-total{font-size:12px;padding:12px}.skill-cost-summary>span{font-size:12px}} /* User-defined item rarity colors. */ .mythic,strong.mythic{color:#ffd55c}.legendary,strong.legendary{color:#c29bff}.heroic,strong.heroic{color:#ff7777}.rare,strong.rare{color:#6bbaff}.rarity-legend{display:flex;justify-content:flex-end;gap:15px;margin:-5px 29px 13px;font-size:11px}.rarity-legend span:before{content:'•';margin-right:5px}.rarity-legend span{white-space:nowrap}@media(max-width:700px){.rarity-legend{margin:0 17px 13px;font-size:10px;gap:13px}} .policy-scope{margin:24px 0 0;padding:13px 16px;border:1px solid #76633c;background:#8b743410;border-radius:4px;color:#c4b48e;font-size:12px;line-height:1.8}.policy-scope a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}.policy-scope small{display:block;color:#9aadc0;font-size:11px}.mastery-summary{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:13px;color:#bdcbd9}.mastery-summary strong{font-weight:500;font-size:21px;color:var(--gold-bright)}#mastery-dialog{width:min(800px,calc(100% - 26px));max-height:90dvh}.mastery-body{padding:22px 26px}.mastery-fields{display:grid;grid-template-columns:1fr auto 25px 1fr;gap:16px;align-items:center}.mastery-fields>label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#b4c4d5}.mastery-fields select{width:100%;font-size:14px;min-height:43px}.mastery-free{text-align:center;font-size:11px;color:#a4b9cd;line-height:1.9}.mastery-free b{color:var(--gold);font-weight:500}.mastery-options-head{margin-top:24px}.mastery-options-head h3{margin:0;font-size:14px}.mastery-options-head p{font-size:11px;color:#e0b898;margin:7px 0 12px}.mastery-option-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mastery-option-levels label{display:grid;grid-template-columns:17px 1fr;gap:3px 7px;border:1px solid #3d546b;padding:11px;background:#1b2c3e;border-radius:3px;font-size:13px;cursor:pointer}.mastery-option-levels input{accent-color:#d4ba80;margin:3px 0 0}.mastery-option-levels small{grid-column:2;font-size:10px;color:#a4b8cd}.mastery-option-levels label:has(input:checked){border-color:#c2a465;background:#a28b4115}.mastery-quote{display:flex;align-items:center;gap:17px;padding:15px 0;margin:8px 0;font-size:12px;color:#aebdd0}.mastery-quote strong{font-size:24px;color:var(--gold)}.mastery-quote button{margin-left:auto}.mastery-draft-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid #4d6273;margin:14px 0;font-size:13px}.mastery-draft-row small{display:block;font-size:11px;color:#9badc1;margin-top:4px}.mastery-reference{margin-top:16px;font-size:12px;color:#a5b8cb;cursor:pointer}.mastery-reference table{width:100%;border-collapse:collapse;margin-top:10px;text-align:center;font-size:12px}.mastery-reference td,.mastery-reference th{padding:7px;border-bottom:1px solid #35485d}.mastery-reference th{font-weight:400;color:#d4c191} @media(max-width:700px){.policy-scope{margin-top:18px;font-size:11px;padding:11px 13px}.policy-scope small{font-size:10px}.mastery-body{padding:17px 15px}.mastery-fields{grid-template-columns:1fr 1fr;gap:12px}.mastery-fields>span:not(.mastery-free){display:none}.mastery-fields>label:last-child{grid-column:1/-1}.mastery-free{font-size:10px}.mastery-option-levels{grid-template-columns:repeat(2,1fr)}.mastery-options-head p{font-size:10px}.mastery-quote{flex-wrap:wrap;gap:10px}.mastery-quote>span{font-size:11px}.mastery-quote .gold-button{min-height:39px}.mastery-draft-row{font-size:12px}.mastery-summary{font-size:12px}} .mastery-exp-section{margin-top:23px;padding:18px 16px;border:1px solid #3b566e;background:#0b182770;border-radius:5px}.mastery-exp-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.mastery-exp-heading h3{font-size:15px;margin:0;font-weight:500}.mastery-exp-heading label{display:flex;align-items:center;gap:8px;color:#9eafc1;font-size:10px}.mastery-exp-heading select{font-size:11px;padding:7px;max-width:170px}.mastery-exp-inputs{display:grid;grid-template-columns:1fr 20px 1fr;gap:11px;align-items:center}.mastery-exp-inputs fieldset{margin:0;min-width:0;padding:12px;border:1px solid #3e556d;border-radius:3px}.mastery-exp-inputs legend{font-size:11px;padding:0 5px;color:#c5d4e5}.mastery-exp-inputs legend span{color:#e3c78b;font-size:12px;margin-left:5px}.exp-progress-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.exp-progress-fields label,.exp-points-field{font-size:10px;color:#9fb2c7}.mastery-exp-inputs input,.mastery-exp-inputs select{display:block;width:100%;padding:8px 7px;font-size:12px;margin-top:6px;min-height:36px}.exp-plus{color:#8fa8c2;font-size:21px;text-align:center}.mastery-exp-result{padding:17px;margin-top:17px;border:1px solid #94804d;background:#ad914318;text-align:center;min-height:95px}.mastery-exp-result p{font-size:12px;line-height:1.9;color:#aebed0;margin:5px 0}.exp-result-caption{display:block;color:#b9aa86;font-size:10px;letter-spacing:.5px}.mastery-exp-result>strong{font-size:24px;display:block;color:#f0d496;font-weight:500;margin:6px 0}.exp-equation{font-size:12px;color:#b6c8dc;font-variant-numeric:tabular-nums}.exp-equation b{display:block;margin-top:4px;color:#e0e9f2;font-weight:400;font-size:14px}.mastery-exp-result>small{display:block;font-size:10px;color:#9fb2c6;margin-top:10px}.exp-bar{height:6px;background:#1f3143;margin:12px 0 0;overflow:hidden;border-radius:4px}.exp-bar>span{display:block;height:100%;background:linear-gradient(90deg,#799cbe,#e2c784);border-radius:4px} @media(max-width:700px){.mastery-exp-section{padding:16px 11px}.mastery-exp-heading{align-items:flex-start;flex-direction:column;gap:11px}.mastery-exp-heading label{justify-content:space-between;width:100%}.mastery-exp-heading select{max-width:200px}.mastery-exp-inputs{grid-template-columns:1fr;gap:7px}.exp-plus{font-size:20px;line-height:1}.mastery-exp-inputs fieldset{padding:10px 12px 13px}.mastery-exp-inputs legend{font-size:11px}.mastery-exp-inputs input,.mastery-exp-inputs select{font-size:14px;min-height:39px}.exp-progress-fields label,.exp-points-field{font-size:11px}.mastery-exp-result{padding:15px 10px}.mastery-exp-result>strong{font-size:21px}.exp-equation{font-size:11px}} .owned-cell small.item-unavailable{color:#e1b38d;font-size:10px;margin-top:5px;line-height:1.7}.gold-button:disabled{border-color:#4d5660;background:#26313e;color:#94a1b0;box-shadow:none}@media(max-width:700px){.owned-cell small.item-unavailable{font-size:9px}} /* Mobile source audit: readable controls, touch areas and narrow-screen containment. */ #mastery-exp-table{max-width:100%;overflow-x:auto}.owned-cell>div,.result-cell,.target-option>span:not(.tile),.dialog-heading>div,.mastery-draft-row>div{min-width:0}.comparison-item strong,.owned-cell strong,.staged-result strong,.target-option strong,.mastery-draft-row>div{overflow-wrap:anywhere} @media(max-width:700px){ input,select,textarea{font-size:16px!important}.class-pair{flex-shrink:1}.class-select-button{font-size:16px}.icon-button{min-width:44px;min-height:44px}.change-button,.gold-button,.target button,.exchange-pagination button,.slot-nav button,.text-button,.remove-button,.primary-button,.cancel-button{min-height:44px}.remove-button{min-width:32px}.slot-nav button{padding:10px 14px}.owned-cell .gold-button{min-height:44px}.target-option{min-height:64px}.target-option>input{flex:0 0 18px;width:18px;height:18px;min-height:18px}.target-option strong{line-height:1.7}.class-card{min-height:105px}.mastery-option-levels label{min-height:61px}.mastery-option-levels input{width:17px;height:17px;min-height:17px}.picker-bottom,.target-footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}.mastery-reference table{font-size:11px}.mastery-reference th,.mastery-reference td{white-space:nowrap}.mastery-exp-heading select{max-width:100%}.mastery-exp-heading label{flex-wrap:wrap;gap:8px}.mastery-exp-inputs input,.mastery-exp-inputs select{min-height:44px}.skill-cost-table select,.skill-cost-table input{min-height:44px}.filter-bar>.slot-field{min-width:0}.filter-bar>.slot-field select{max-width:100%}.owned-cell small.item-unavailable{font-size:10px} } @media(max-width:480px){ .category-row{grid-template-columns:1fr;gap:8px}.category-intro{grid-column:1;flex-wrap:nowrap}.category-intro>div{min-width:0}.category-intro h3{font-size:14px}.compare-cell{min-height:64px}.compare-arrow{font-size:17px;line-height:16px;transform:rotate(90deg);justify-self:center}.comparison-item{min-height:0;padding:8px 0}.comparison-item strong{font-size:13px}.comparison-item small{font-size:11px}.category-row.pending .compare-cell{min-height:55px}.exchange-table-head{display:none}.exchange-row{grid-template-columns:1fr;gap:0;border:1px solid #3d5368;margin-bottom:14px;border-radius:4px;overflow:hidden}.owned-cell{display:grid;grid-template-columns:37px minmax(0,1fr);gap:8px;padding:11px;border:0;background:#1b2d40}.owned-cell:before{content:'보유 아이템';grid-column:1/-1;font-size:11px;color:#df9994;margin-bottom:2px}.owned-cell>div{flex-basis:auto}.owned-cell .gold-button{grid-column:1/-1;width:100%;margin-top:3px}.owned-cell .tile{width:34px;height:40px}.owned-cell strong,.staged-result strong{font-size:13px}.owned-cell small,.staged-result small{font-size:11px}.result-cell{display:block;border:0;border-top:1px solid #3d5368;padding:12px;background:#a98a3910}.result-cell:before{content:'교체 결과';display:block;color:#d7c28e;font-size:11px;margin-bottom:7px}.result-cell>p{font-size:12px;text-align:left;padding:5px 0}.staged-result{flex-wrap:nowrap}.staged-result .tile{display:grid;width:33px;min-width:33px;height:37px}.staged-result>div{flex-basis:auto}.exchange-layout{margin-left:12px;margin-right:12px}.exchange-pagination>span{font-size:10px;text-align:center;padding:0 6px}.class-grid{gap:8px;padding:15px}.class-card strong{font-size:12px}.mastery-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mastery-draft-row{gap:8px}.mastery-free{font-size:11px}.mastery-quote>.gold-button{width:100%;margin-left:0}.equipment-heading{flex-wrap:wrap}.equipment-heading>span{max-width:none}.cost-head b{font-size:17px}.sim-footer .primary-button{flex:1}.sim-footer .primary-button span{margin-left:8px} } /* Equipment rarity selector */ .grade-filter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 24px 12px}.grade-filter[hidden]{display:none}.grade-filter button{min-height:44px;border:1px solid #45556a;border-radius:2px;background:linear-gradient(#26384b,#162333);font-size:14px;font-weight:600}.grade-filter button[aria-pressed=true]{border-color:currentColor;box-shadow:inset 0 -3px currentColor;background:linear-gradient(#35485c,#203044)}.grade-filter button:focus-visible{outline:2px solid #e6d2a4;outline-offset:3px}.grade-filter .mythic{color:#ffd55c}.grade-filter .legendary{color:#c29bff}.grade-filter .heroic{color:#ff7777}.grade-filter .rare{color:#6bbaff} @media(max-width:700px){.grade-filter{margin:0 13px 10px;gap:6px}.grade-filter button{font-size:13px}} /* Keep enhancement beside the item name, with metadata below. */ .owned-title{display:flex;align-items:center;gap:8px;min-width:0}.owned-title strong{flex:1;min-width:0;font-size:13px;line-height:1.6}.item-enhance{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;margin:0;color:#e6cf9e}.item-enhance select{box-sizing:border-box;width:68px;height:36px;min-height:32px;padding:4px 5px;text-align:center;background:#111b27;border:1px solid #827048;color:#fff0c9;border-radius:2px;font-size:16px}.owned-info>small{margin-top:4px}.owned-cell{min-height:76px}.target-option strong{line-height:1.65} @media(max-width:700px){.owned-title{gap:6px}.owned-title strong{font-size:12px}.item-enhance select{width:66px;height:44px;min-height:44px}} @media(max-width:480px){.owned-cell{grid-template-columns:34px minmax(0,1fr);align-items:center}.owned-title strong{font-size:13px}.owned-info>small{font-size:10px}.item-enhance select{width:66px}} /* Stack equipment comparisons on all phone widths, including 481–700px. */ @media(max-width:700px){ .exchange-table-head{display:none}.exchange-row{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid #3d5368;margin-bottom:14px;border-radius:4px;overflow:hidden} .owned-cell{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;padding:11px;border:0;background:#1b2d40}.owned-cell:before{content:'보유 아이템';grid-column:1/-1;font-size:11px;color:#df9994;margin-bottom:2px}.owned-cell>div{flex-basis:auto}.owned-cell .gold-button{grid-column:1/-1;width:100%;margin:3px 0 0}.owned-cell .tile{width:34px;height:40px}.owned-title strong{font-size:13px} .result-cell{display:block;border:0;border-top:1px solid #3d5368;padding:12px;background:#a98a3910}.result-cell:before{content:'교체 결과';display:block;color:#d7c28e;font-size:11px;margin-bottom:7px}.result-cell>p{font-size:12px;text-align:left;padding:5px 0}.staged-result{flex-wrap:nowrap}.staged-result .tile{display:grid;width:33px;min-width:33px;height:37px}.staged-result>div{flex-basis:auto}.staged-result strong{font-size:13px}.staged-result small{font-size:11px} .target-option>span:not(.tile){min-width:0}.target-option>b{flex-shrink:0}.target-options{overscroll-behavior:contain}.item-enhance select{flex-shrink:0} } /* Three-step planner */ .workflow-step{font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}.workflow-step:disabled{opacity:.5}.wizard-heading{padding:26px 26px 10px}.wizard-heading h2{font-size:23px;color:#f0ddb7;margin:0;outline:none}.wizard-heading p:not(.eyebrow){font-size:13px;color:#a5b7c9;margin:8px 0}.wizard-panel{min-height:270px}.wizard-navigation{padding:18px 26px;border-top:1px solid #405064;background:#101a26}.wizard-navigation>p{font-size:12px;color:#b2c0d0;margin:0 0 12px}.wizard-nav-buttons{display:flex;justify-content:flex-end;gap:12px}.wizard-nav-buttons button{min-height:46px}.wizard-navigation #wizard-back{margin-right:auto}.sim-footer{padding:12px 26px}.wizard-panel .class-banner{margin-bottom:26px}#wizard-class .banner-note{display:none}#wizard-class .class-pair{justify-content:center;width:100%}#wizard-class .class-banner{justify-content:center;min-height:160px}#wizard-items .compare-heading{display:none}#wizard-items .equipment-heading{padding-top:5px}#wizard-items #category-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 26px 26px}#wizard-items .category-row{display:block;margin:0;min-height:160px;padding:22px}#wizard-items .category-intro{min-height:110px;align-items:center;gap:16px}#wizard-items .category-intro>div{flex:1;min-width:0}#wizard-items .compare-cell,#wizard-items .compare-arrow{display:none}#wizard-items .change-button{width:100%;margin-top:12px;min-height:44px}#wizard-items .ready-badge{display:none}.review-rows{padding:8px 26px}.review-rows .category-row{grid-template-columns:150px minmax(0,1fr) 25px minmax(0,1fr)}.review-rows .category-intro small{overflow-wrap:anywhere}.review-rows .category-intro{min-width:0}.review-rows .compare-cell{min-width:0}#wizard-review .below-grid{display:block;margin:20px 26px 26px}#wizard-review .cost-card{padding:24px}#wizard-review .big-cost{flex-wrap:wrap}.workflow{scroll-margin-top:16px}#wizard-class-title:focus-visible,#wizard-items-title:focus-visible,#wizard-review-title:focus-visible{outline:2px solid #dbc38c;outline-offset:4px} @media(max-width:700px){.workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.workflow>.workflow-arrow{display:none}.workflow-step{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 8px}.workflow-step>span{font-size:12px}.workflow-step small,.workflow-step i{display:none}.workflow-step>b{font-size:13px}.wizard-heading{padding:20px 16px 8px}.wizard-heading h2{font-size:20px}.wizard-heading p:not(.eyebrow){font-size:12px}.wizard-navigation{padding:16px}.wizard-nav-buttons{gap:8px}.wizard-nav-buttons .primary-button{flex:1}.wizard-navigation #wizard-back{padding:8px 16px}.sim-footer{padding:10px 16px}.wizard-panel{min-height:230px}#wizard-items #category-rows{grid-template-columns:1fr;padding:0 14px 18px;gap:10px}#wizard-items .category-row{min-height:120px;padding:16px}#wizard-items .category-intro{min-height:85px}#wizard-items .category-intro h3{font-size:15px}.review-rows{padding:5px 14px}.review-rows .category-row{grid-template-columns:minmax(0,1fr);gap:8px}.review-rows .category-intro{grid-column:1}.review-rows .compare-arrow{transform:rotate(90deg);justify-self:center;line-height:16px}.review-rows .compare-cell.before:before{content:'변경 전';display:block;font-size:10px;color:#df9994;margin-bottom:6px}.review-rows .compare-cell.after:before{content:'변경 후';display:block;font-size:10px;color:#dbc38c;margin-bottom:6px}.review-rows .compare-cell{padding:12px}#wizard-review .below-grid{margin:16px 14px}#wizard-review .cost-card{padding:18px}.wizard-panel .class-banner{margin-bottom:16px}} /* Show editable before/after details during the item-selection step. */ #wizard-items #category-rows{display:block;padding:0 26px 12px}#wizard-items .compare-heading{display:grid;margin:0 26px 10px;padding:0 18px;grid-template-columns:175px minmax(0,1fr) 22px minmax(0,1fr);gap:14px}#wizard-items .category-row{display:grid;grid-template-columns:175px minmax(0,1fr) 22px minmax(0,1fr);gap:14px;align-items:stretch;margin:0 0 14px;padding:18px;min-height:130px}#wizard-items .category-intro{min-height:0;gap:12px;align-items:center}#wizard-items .category-intro>div{flex:1;min-width:0}#wizard-items .category-intro small{display:block}#wizard-items .change-button{width:auto;min-width:116px;margin:10px 0 0}#wizard-items .compare-cell{display:block;min-width:0}#wizard-items .compare-arrow{display:block;align-self:center;justify-self:center}#wizard-items .comparison-item strong{overflow-wrap:anywhere} @media(min-width:701px) and (max-width:1000px){#wizard-items .category-row,#wizard-items .compare-heading{grid-template-columns:135px minmax(0,1fr) 18px minmax(0,1fr);gap:9px}#wizard-items #category-rows{padding-left:16px;padding-right:16px}#wizard-items .compare-heading{margin-left:16px;margin-right:16px}#wizard-items .category-intro{gap:8px}} @media(max-width:700px){#wizard-items #category-rows{padding:0 14px 10px}#wizard-items .compare-heading{display:none}#wizard-items .category-row{grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 12px;padding:15px;min-height:0}#wizard-items .category-intro{grid-column:1;min-height:0;padding:0 0 8px}#wizard-items .category-intro small{font-size:11px}#wizard-items .change-button{margin-top:8px;min-height:44px}#wizard-items .compare-cell{padding:12px;min-height:65px}#wizard-items .compare-cell.before:before{content:'변경 전';display:block;font-size:11px;color:#df9994;margin-bottom:6px}#wizard-items .compare-cell.after:before{content:'변경 후';display:block;font-size:11px;color:#dbc38c;margin-bottom:6px}#wizard-items .compare-arrow{transform:rotate(90deg);line-height:16px;font-size:18px}#wizard-items .comparison-item strong{font-size:13px}#wizard-items .comparison-item small{font-size:11px}} .diamond-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 24px;padding:18px;border:1px solid #87784f;border-radius:4px;background:#b49a4010}.diamond-summary>div{min-width:0}.diamond-summary span{display:block;font-size:12px;color:#afbdcc}.diamond-summary strong{display:block;color:#f0d596;font-size:16px;margin-top:5px;font-weight:400}.diamond-summary b{font-size:25px;font-weight:500;font-variant-numeric:tabular-nums}.diamond-summary small{display:block;font-size:11px;color:#acbace;margin-top:4px}.diamond-summary p{grid-column:1/-1;font-size:11px;color:#a9b5c6;line-height:1.8;margin:0;padding-top:12px;border-top:1px solid #6e62422e}@media(max-width:480px){.diamond-summary{grid-template-columns:minmax(0,1fr);padding:14px;gap:14px}.diamond-summary b{font-size:24px}} /* Compact phone exchange actions; keep the item name on its own line. */ @media(max-width:700px){ .owned-cell .gold-button{grid-column:2;justify-self:end;width:auto;min-width:64px;min-height:36px;padding:5px 14px;margin:2px 0 0;font-size:12px;line-height:1.5} #wizard-items .change-button{width:auto;min-width:88px;min-height:36px;padding:5px 12px;font-size:12px} #target-confirm{flex:0 0 auto;width:auto;min-width:80px;min-height:38px;padding:7px 18px;font-size:13px} } /* Prominent reset action at the top of every planner step. */ .planner-tools{display:flex;justify-content:flex-end;align-items:center;padding:12px 24px;background:#162231;border-bottom:1px solid #394b5e}.reset-selection-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:138px;padding:9px 18px;border:1px solid #ba7f77;border-radius:4px;background:#452b30;color:#ffe5df;font-size:14px;font-weight:600;line-height:1.4}.reset-selection-button>span{font-size:22px;line-height:1}.reset-selection-button:hover:not(:disabled){background:#5c3439;border-color:#e9a598}.reset-selection-button:focus-visible{outline:3px solid #f2d9a1;outline-offset:3px}@media(max-width:700px){.planner-tools{padding:10px 14px}.reset-selection-button{min-width:140px;min-height:44px;padding:9px 15px;font-size:14px}} /* Readable comparison headings. */ #wizard-items .compare-heading{font-size:18px;font-weight:700;line-height:1.5;padding-top:5px;padding-bottom:8px;color:#e3eaf1}#wizard-items .compare-heading>span:nth-child(2){color:#efa8a1}#wizard-items .compare-heading>span:last-child{color:#f2d9a1}@media(max-width:700px){#wizard-items .compare-cell.before:before,#wizard-items .compare-cell.after:before,.review-rows .compare-cell.before:before,.review-rows .compare-cell.after:before{font-size:15px;font-weight:700;margin-bottom:10px;line-height:1.5}} /* Separate comparison regions and prevent narrow-column overlap. */ #wizard-items .compare-heading>span:not(:nth-child(3)){border:1px solid #617388;border-radius:4px;background:#1c2e40;text-align:center;padding:10px 8px} #wizard-items .category-intro,.review-rows .category-intro{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;padding:14px;border:1px solid #506b83;border-radius:4px;background:#182b3c;text-align:center;gap:9px} #wizard-items .category-intro>div,.review-rows .category-intro>div{flex:0 1 auto;min-width:0;width:100%} #wizard-items .category-intro h3,.review-rows .category-intro h3{text-align:center;margin:0;overflow-wrap:anywhere} #wizard-items .category-intro small,.review-rows .category-intro small{white-space:normal;overflow-wrap:anywhere} #wizard-items .change-button{min-width:0;max-width:100%;margin:10px auto 0;white-space:normal} #wizard-items .compare-cell,.review-rows .compare-cell{border:1px solid #607085;border-radius:4px;text-align:center;min-width:0} #wizard-items .compare-cell.after,.review-rows .compare-cell.after{border-color:#8d7c50} #wizard-items .comparison-item,.review-rows .comparison-item{justify-content:center;gap:8px} #wizard-items .comparison-item>div,.review-rows .comparison-item>div{min-width:0} @media(max-width:1000px){ #wizard-items .compare-heading{display:none} #wizard-items .category-row,.review-rows .category-row{grid-template-columns:minmax(0,1fr);gap:12px} #wizard-items .category-intro,.review-rows .category-intro{grid-column:1;position:relative;padding:14px;min-height:0} #wizard-items .category-intro:before,.review-rows .category-intro:before{content:'교체 항목';display:block;width:100%;font-size:16px;font-weight:700;line-height:1.5;color:#e5edf5;text-align:center;padding-bottom:9px;border-bottom:1px solid #456079;margin-bottom:3px} #wizard-items .compare-cell,.review-rows .compare-cell{padding:14px} #wizard-items .compare-cell.before:before,.review-rows .compare-cell.before:before{content:'변경 전';color:#efa8a1} #wizard-items .compare-cell.after:before,.review-rows .compare-cell.after:before{content:'변경 후';color:#f2d9a1} #wizard-items .compare-cell:before,.review-rows .compare-cell:before{display:block;font-size:16px;font-weight:700;line-height:1.5;text-align:center;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid #4a5a6d} #wizard-items .compare-arrow,.review-rows .compare-arrow{transform:rotate(90deg);align-self:center;justify-self:center;line-height:16px;font-size:18px} #wizard-items .change-button{display:block;width:auto;min-width:88px;min-height:36px;padding:6px 14px} } .skill-tier-notes p{padding:5px 0;border-bottom:1px solid #384b5e55;line-height:1.8}.skill-tier-notes .skill-max-equation{font-size:13px;font-weight:700;color:#f2d9a1;padding:12px 0 5px;border-bottom:0} /* Embedded equipment icons use website IDs and local image assets. */ .comparison-item.item-with-icon{display:flex;align-items:center;gap:10px}.item-with-icon>.tile{display:grid;place-items:center;flex:0 0 38px;width:38px;min-width:38px;height:42px}.item-with-icon>div{flex:1;min-width:0}.tile img{display:block;width:100%;height:100%;object-fit:contain}.item-with-icon .remove-button{flex-shrink:0}@media(max-width:700px){.item-with-icon>.tile{flex-basis:34px;min-width:34px;width:34px;height:38px}.comparison-item.item-with-icon{gap:8px}.staged-result .tile{display:grid}} /* Larger equipment artwork across selection and comparison screens. */ .owned-cell>.tile,.target-option>.tile,.staged-result>.tile,.item-with-icon>.tile{display:grid;place-items:center;flex:0 0 56px;width:56px;min-width:56px;height:56px} .tile img{image-rendering:auto} @media(max-width:700px){.owned-cell{grid-template-columns:48px minmax(0,1fr)}.owned-cell>.tile,.target-option>.tile,.staged-result>.tile,.item-with-icon>.tile{flex-basis:48px;width:48px;min-width:48px;height:48px}.staged-result>div{flex:1;min-width:0}} .image-fallback{display:grid;place-items:center;width:100%;height:100%;color:var(--gold);font-size:26px;line-height:1} /* Readable equipment names and separate right-aligned exchange currency. */ #wizard-items .item-with-icon strong,.review-rows .item-with-icon strong{font-size:17px;line-height:1.5;font-weight:600} #wizard-items .after .item-with-icon,.review-rows .after .item-with-icon{display:grid;grid-template-columns:56px minmax(0,1fr) max-content 30px;align-items:center;gap:10px} .item-exchange-cost{display:flex;flex-direction:column;align-items:flex-end;justify-self:end;white-space:nowrap;text-align:right;color:var(--gold)} .item-exchange-cost small{font-size:11px;line-height:1.5}.item-exchange-cost b{font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums} @media(max-width:700px){#wizard-items .item-with-icon strong,.review-rows .item-with-icon strong{font-size:16px}#wizard-items .after .item-with-icon,.review-rows .after .item-with-icon{grid-template-columns:48px minmax(0,1fr) max-content 32px;gap:8px}} @media(max-width:480px){#wizard-items .after .item-with-icon,.review-rows .after .item-with-icon{grid-template-columns:48px minmax(0,1fr) 32px}#wizard-items .after .item-exchange-cost,.review-rows .after .item-exchange-cost{grid-column:2;grid-row:2;flex-direction:row;align-items:center;gap:6px}#wizard-items .after .item-with-icon>.remove-button,.review-rows .after .item-with-icon>.remove-button{grid-column:3;grid-row:1}.item-exchange-cost small{font-size:12px}} .unique{color:#83edb1}.grade-filter button.unique[aria-pressed=true]{color:#a2ffcc;border-color:#83edb1;background:#83edb118}.rarity-legend{flex-wrap:wrap} /* Keep mobile currency on the right without reducing the item-name column. */ @media(max-width:700px){ .grade-filter button{min-width:0;padding:8px 4px;min-height:44px} #wizard-items .after .item-with-icon,.review-rows .after .item-with-icon{grid-template-columns:48px minmax(0,1fr) 32px} #wizard-items .after .item-exchange-cost,.review-rows .after .item-exchange-cost{grid-column:2;grid-row:2;flex-direction:row;align-items:center;gap:6px} #wizard-items .after .item-with-icon>.remove-button,.review-rows .after .item-with-icon>.remove-button{grid-column:3;grid-row:1} .item-exchange-cost small{font-size:12px} } /* Consistent cost typography and a single mobile equipment scroll area. */ :root{--plan-cost-size:42px} .big-cost{flex-wrap:wrap;gap:8px 13px} .big-cost>span,.big-cost strong{font-size:var(--plan-cost-size);line-height:1.3;font-weight:400;color:var(--gold-bright)} .cost-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;font-size:var(--plan-cost-size);line-height:1.3} .cost-head>span{min-width:0} .cost-head>i{display:none} .cost-head b{display:block;font-size:inherit;font-weight:400;margin:6px 0 0;overflow-wrap:anywhere} .cost-head small{display:block;font-size:16px;margin:5px 0 0;text-align:left} @media(max-width:700px){ .cost-head{grid-template-columns:minmax(0,1fr);gap:18px} .cost-head>span{min-width:0} .cost-head>span:last-child{border-top:0;padding-top:0} .cost-head>span:last-child small{display:block;margin:5px 0 0} #picker{overflow-y:auto;overscroll-behavior-y:contain} #picker #exchange-rows,#picker .item-list,#picker .targets{height:auto;max-height:none;min-height:0;overflow:visible} #picker .slot-nav{max-height:none;overflow:visible;flex-wrap:wrap} #picker .picker-bottom{position:static} } /* Header shows only the additional exchange cost. */ .cost-head{grid-template-columns:minmax(0,1fr)} /* Keep the header cost on one readable line, matching the summary order. */ .cost-head{display:block;font-size:24px} .cost-head>.additional-cost-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;white-space:nowrap;border:0;padding:0} .additional-cost-amount{color:var(--gold-bright)} .cost-head .additional-cost-line b{display:inline;font-size:inherit;line-height:inherit;margin:0;font-weight:400;overflow-wrap:normal} @media(max-width:700px){.cost-head{font-size:clamp(16px,5vw,24px)}.cost-head>.additional-cost-line{gap:8px}} /* Creator channel link below the final calculation result. */ .creator-channel{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 24px;padding:20px;border:1px solid #655a40;border-radius:6px;background:#182737} .creator-channel strong{font-size:16px;color:var(--gold-bright);font-weight:500} .creator-channel p{margin:7px 0 0;font-size:13px;line-height:1.7;color:var(--muted)} .youtube-channel-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:12px 18px;border:1px solid #bc5757;border-radius:4px;background:#652d35;color:#fff2ed;font-size:15px;line-height:1.5;text-decoration:none;text-align:center;flex-shrink:0} .youtube-channel-button:hover{background:#803944;border-color:#ec8787} .youtube-channel-button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px} @media(max-width:700px){.creator-channel{flex-direction:column;align-items:stretch;margin:18px 13px;padding:16px;gap:14px}.youtube-channel-button{font-size:14px;white-space:normal}} /* Shared calculator navigation and character experience tool. */ .tool-nav{display:flex;gap:8px;padding:0 max(24px,calc((100% - 1250px)/2));border-bottom:1px solid #344b61;background:#0d1722;position:static}.tool-nav a{padding:17px 38px;min-height:52px;text-align:center;border:1px solid #344b61;border-bottom:0;border-radius:5px 5px 0 0;text-decoration:none;color:#b9c8da;font-weight:600;white-space:nowrap}.tool-nav a[aria-current=page]{color:#f3cd85;border-color:#e6bd72;background:linear-gradient(#192633,#101a25)}.tool-nav a:focus-visible{outline:2px solid #efcc89;outline-offset:-4px}.exp-main{max-width:1250px}.exp-main .page-title{margin:32px 0 24px}.exp-panel{padding:23px;border:1px solid #354f66;border-radius:7px;background:linear-gradient(125deg,#142333c9,#0e1926e6);margin-bottom:18px}.exp-panel h2{font-size:22px;margin:0 0 17px;font-weight:650}.exp-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.exp-character{min-width:0;border:1px solid #2d4357;border-radius:5px;overflow:hidden}.exp-character>h2{padding:16px 23px;margin:0;background:#20324470;border-bottom:1px solid #2d4357}.exp-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:19px 23px 12px}.exp-fields label{display:flex;flex-direction:column;gap:9px;color:#bfccdc;font-size:15px}.exp-fields input,.exp-fields select{box-sizing:border-box;width:100%;min-height:48px;border:1px solid #3c5970;background:#0d1926;color:#f1f4fb;font-size:21px;padding:9px 14px;border-radius:4px}.exp-character>.text-button{margin:0 23px 4px}.exp-hint{font-size:12px;color:#a8b7c8;line-height:1.85}.exp-character>.exp-hint{padding:0 23px}.exp-donor+.exp-donor{border-top:1px solid #2d4357}.exp-remove{margin:0 23px 12px}.exp-settings{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:20px 0}.exp-settings label{display:flex;align-items:center;gap:12px;font-size:12px;color:#b6c5d5}.exp-settings select,.exp-stage-label select{min-height:42px;padding:9px 12px;color:#e8d4aa;background:#101d2b;border:1px solid #42596f;border-radius:3px}.exp-submit{display:block;width:min(100%,368px);margin:20px auto 0;min-height:52px;font-size:18px}.exp-main button:disabled{opacity:.5;cursor:not-allowed}.exp-result{padding:17px 23px;border:1px solid #344d63;border-radius:4px;display:grid;grid-template-columns:250px 1fr;align-items:center;gap:12px}.exp-result-label{color:#bccbdb;font-weight:600}.exp-result>strong{color:#f1cf91;font-size:28px;text-align:center}.exp-result>p{grid-column:1/-1;font-size:13px;color:#aebed1;margin:2px 0}.exp-table-wrap{overflow-x:auto;max-width:100%}.exp-table-wrap:empty{display:none}.exp-table-wrap table{width:100%;border-collapse:collapse;margin-top:16px;min-width:450px;font-size:13px}.exp-table-wrap td,.exp-table-wrap th{padding:12px 14px;border:1px solid #30495f;text-align:left;line-height:1.65}.exp-table-wrap th{background:#20344965;color:#bfcfe0}.exp-stage-label{font-size:13px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:#c7d5e3;margin:18px 0 8px}.exp-stage-label select{max-width:100%;width:100%}.exp-tag{font-size:11px;color:#e2c78b;border:1px solid #6e644b;padding:4px 7px;vertical-align:middle;white-space:nowrap}.exp-claimed{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.exp-claimed input{width:18px;height:18px;accent-color:#e4c184}.exp-reward-summary{padding:16px;border:1px solid #776543;background:#b9963610;border-radius:4px;margin-top:20px}.exp-reward-summary>strong{color:#ecd09c;font-size:14px}.exp-reward-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.exp-reward-items>span{border:1px solid #3b5268;border-radius:3px;padding:8px 12px;background:#17283a;font-size:13px}.exp-policy{font-size:12px;color:#a9bbcd;line-height:1.9}.exp-policy summary{font-size:15px;color:#d9c291;cursor:pointer}.exp-policy a{color:#f1ce8c}.exp-policy ul{padding-left:20px}.exp-main .creator-channel{margin-top:25px}.exp-main [hidden]{display:none!important} @media(max-width:700px){.tool-nav{padding:0 16px;gap:7px}.tool-nav a{flex:1;padding:15px 8px;font-size:14px}.exp-main .page-title{margin:26px 0 20px}.exp-panel{padding:15px}.exp-panel h2{font-size:19px}.exp-columns{grid-template-columns:1fr;gap:16px}.exp-character>h2{padding:14px 16px}.exp-fields{gap:14px;padding:15px 16px 10px}.exp-fields label{font-size:13px}.exp-fields input,.exp-fields select{font-size:18px!important;padding:8px 10px}.exp-settings{flex-wrap:wrap;gap:10px}.exp-settings label{flex-wrap:wrap;font-size:12px}.exp-result{display:block;padding:17px}.exp-result-label{display:block;font-size:13px}.exp-result>strong{display:block;text-align:left;font-size:25px;margin:12px 0 16px;line-height:1.5}.exp-result>p{font-size:12px;line-height:1.8;margin:8px 0}.exp-submit{font-size:16px;min-height:48px}.exp-hint{font-size:12px}.exp-claimed{min-height:44px}.exp-table-wrap td,.exp-table-wrap th{padding:10px}.exp-character>.exp-hint{padding:0 16px}.exp-tag{font-size:10px}.exp-stage-label{font-size:12px}.exp-policy{font-size:12px}.exp-main .creator-channel{gap:14px}.exp-main footer{gap:12px;flex-wrap:wrap}} .exp-hint a{color:#e8c889;text-underline-offset:3px} /* Native reward guide and collection planning. */ .guide-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.guide-heading h2{margin-bottom:8px}.guide-filters{display:grid;grid-template-columns:180px 1fr;gap:16px;margin:22px 0 12px}.guide-filters label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#b8c9dc}.guide-filters select,.guide-filters input{min-height:44px;background:#0e1b29;border:1px solid #425e76;border-radius:4px;color:#edf2f9;padding:9px 12px;width:100%;box-sizing:border-box}.guide-level-button{border:1px solid #a98b53;background:#d3ad5715;color:#f5d494;font-size:15px;white-space:nowrap;padding:10px 12px;min-height:44px;border-radius:4px;cursor:pointer;font-weight:650}.guide-level-button:hover,.guide-detail-button:hover{background:#d3ad5730}.guide-detail-button{padding:8px 10px;border:1px solid #4a6379;background:#23394c;color:#dfcc9e;font-size:12px;white-space:nowrap;border-radius:4px;min-height:40px;cursor:pointer}.reward-guide table{min-width:720px}.reward-guide td:nth-child(2){width:44%}.reward-guide td:nth-child(3){font-size:12px;color:#bbcadd;max-width:240px}.reward-guide td small{display:block;color:#93a7bc;margin-top:7px}.guide-sources{margin-top:20px;font-size:11px;color:#93a7bc;line-height:1.9}.guide-sources summary{cursor:pointer;color:#c8b285}.guide-sources a{display:inline-block;margin:0 15px 7px 0;color:#c8b285}#reward-guide-dialog{width:min(1060px,calc(100% - 28px));max-height:90dvh;overscroll-behavior:contain}.guide-detail{padding:0 26px 24px;overflow:auto}.guide-detail h3{font-size:17px;color:#efdab2;margin:24px 0 14px}.guide-detail .exp-table-wrap table{min-width:450px}.guide-detail td{font-size:12px}.guide-benefits{padding:12px 15px 12px 30px;border:1px solid #3c5063;background:#1d304333;font-size:12px;line-height:1.9;color:#b5c6d8}.guide-collection-group{border:1px solid #4b5c6d;background:#0d1b2a;border-radius:5px;padding:16px;margin:18px 0}.guide-material-heading{display:flex;justify-content:space-between;gap:15px;align-items:center}.guide-material-heading h4{font-size:16px;color:#e8c98b;margin:0}.guide-material-heading label{display:flex;align-items:center;gap:10px;color:#abbfd3;font-size:12px}.guide-material-heading input{background:#162b3d;border:1px solid #57728c;color:#ecf1f8;border-radius:3px;max-width:100px;min-height:42px;padding:8px;font-size:16px}.guide-budget{font-size:13px;color:#bdcfe0;margin:15px 0 0}.guide-over-budget{color:#ffaaa0}.guide-selected{background:#e0b45d12}.guide-can-register{color:#a7d4b0}.guide-shortage{color:#c5a98b}.guide-collection-group input[type=checkbox]{width:19px;height:19px;accent-color:#dbb766;cursor:pointer}.guide-collection-group .exp-table-wrap table{min-width:700px}.guide-collection-group td:first-child{min-width:44px}.guide-level-button:focus-visible,.guide-detail-button:focus-visible{outline:2px solid #f4dcae;outline-offset:3px} @media(max-width:700px){.guide-filters{grid-template-columns:1fr;gap:12px;margin-top:16px}.guide-heading h2{font-size:18px}.guide-heading .exp-tag{font-size:10px}.guide-detail{padding:0 14px 18px}.guide-detail h3{font-size:16px;margin-top:20px}.guide-collection-group{padding:12px}.guide-material-heading{align-items:flex-start;flex-direction:column;gap:12px}.guide-material-heading label{width:100%;justify-content:space-between}.guide-material-heading input{min-height:44px}.guide-budget{font-size:12px;line-height:1.8}.guide-level-button{font-size:14px;padding:9px}.reward-guide .exp-table-wrap{margin:0 -2px}.guide-detail td,.guide-detail th{font-size:12px}.guide-benefits{font-size:12px}.guide-sources{font-size:12px}} @media(max-width:700px){ .reward-guide #guide-table table{min-width:0;margin-top:12px}.reward-guide #guide-table thead{display:none}.reward-guide #guide-table tbody{display:grid;gap:12px}.reward-guide #guide-table tr{display:grid;grid-template-columns:100px minmax(0,1fr);border:1px solid #365068;border-radius:5px;overflow:hidden;background:#132436}.reward-guide #guide-table td{border:0;min-width:0;width:auto;max-width:none;padding:12px 14px}.reward-guide #guide-table td:nth-child(1){grid-column:1;grid-row:1}.reward-guide #guide-table td:nth-child(4){grid-column:2;grid-row:1;text-align:right}.reward-guide #guide-table td:nth-child(2),.reward-guide #guide-table td:nth-child(3){grid-column:1/-1;border-top:1px solid #30495f;font-size:12px;line-height:1.8}.reward-guide #guide-table td:nth-child(2):before{content:'달성 보상';display:block;font-size:10px;color:#d7bd85;margin-bottom:5px}.reward-guide #guide-table td:nth-child(3):before{content:'구간 보상';display:block;font-size:10px;color:#d7bd85;margin-bottom:5px}.guide-detail>.exp-table-wrap table{min-width:0}.guide-detail>.exp-table-wrap th{width:75px}.guide-detail>.exp-table-wrap td{overflow-wrap:anywhere}.guide-collection-group .exp-table-wrap table{min-width:0}.guide-collection-group thead{display:none}.guide-collection-group tbody{display:grid;gap:10px}.guide-collection-group tr{display:grid;grid-template-columns:44px minmax(0,1fr);border:1px solid #354d62;border-radius:4px;overflow:hidden}.guide-collection-group td{border:0!important;padding:9px!important}.guide-collection-group td:nth-child(1){grid-column:1;grid-row:1;min-height:44px;display:grid;place-items:center}.guide-collection-group td:nth-child(2){grid-column:2;grid-row:1;color:#dcc38d}.guide-collection-group td:nth-child(n+3){grid-column:1/-1;padding:7px 12px!important}.guide-collection-group td:nth-child(3):before{content:'필요 증표 · ';color:#92a8bd}.guide-collection-group td:nth-child(4):before{content:'효과 · ';color:#92a8bd}.guide-collection-group td:nth-child(5){border-top:1px solid #30495f!important;min-height:36px} } /* Experience reference matrix: site navy/gold with explicit caution cells. */ #exp-reference{width:min(1450px,calc(100% - 28px));max-height:92dvh}.exp-reference-body{padding:18px 24px 26px}.matrix-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;font-size:11px}.matrix-legend>span{padding:7px 11px;background:#233447;border:1px solid #40586d;border-radius:4px;color:#d8c492}.matrix-legend>.matrix-caution-key{background:#572e29;border-color:#815048;color:#f0b3a3}.exp-matrix{max-width:100%;overflow:auto;border:1px solid #3c5266;border-radius:6px;margin:18px 0;scrollbar-color:#627890 #142233}.exp-matrix table{border-collapse:separate;border-spacing:0;width:100%;min-width:1130px;font-variant-numeric:tabular-nums;font-size:11px;text-align:center}.exp-matrix caption{text-align:left;background:#142435;color:#aebfd0;padding:12px 16px;font-size:11px;line-height:1.8}.exp-matrix th{padding:14px 9px;background:#263647;color:#e5cc96;white-space:nowrap;font-weight:650;border-right:1px solid #3c4f60;border-bottom:1px solid #3c4f60}.exp-matrix th[scope=row]{position:sticky;left:0;z-index:1;background:#213346}.exp-matrix td{padding:0;background:#12202d;border-right:1px solid #304253;border-bottom:1px solid #304253;min-width:125px;height:47px}.exp-matrix td:last-child,.exp-matrix th:last-child{border-right:0}.exp-matrix tbody tr:last-child>*{border-bottom:0}.matrix-cell{width:100%;height:100%;min-height:47px;padding:10px 8px;border:0;background:transparent;color:#dce7f5;font-size:11px;line-height:1.6;white-space:nowrap;cursor:pointer}.matrix-cell:hover{background:#c9a55a20;color:#ffe5b1}.matrix-cell:focus-visible{outline:2px solid #f4d391;outline-offset:-3px;background:#c9a55a20}.exp-matrix .matrix-caution{background:#4b2926}.matrix-caution .matrix-cell{color:#eeb8a8}.matrix-cell small{display:block;font-size:9px;color:#d99b89;margin-top:2px}.matrix-policy-link{font-size:12px;color:#dbc18c;text-underline-offset:3px}.exp-matrix:focus-visible{outline:2px solid #c9b07b;outline-offset:3px} @media(max-width:700px){.exp-reference-body{padding:14px}.matrix-legend{gap:7px;font-size:10px}.matrix-legend>span{padding:6px 9px}.exp-matrix{margin:16px 0}.exp-matrix th{font-size:11px}.exp-matrix td{min-width:116px}.exp-reference-body>.exp-hint{font-size:12px}} /* Compact character rows and paged experience workflow. */ .exp-main .exp-columns{gap:20px;align-items:start}.exp-main .exp-character>h2{font-size:19px;padding:14px 17px}.exp-main .exp-fields{grid-template-columns:110px minmax(0,1fr);gap:13px;padding:14px 17px;align-items:end}.exp-main .exp-fields label{font-size:12px;gap:7px;min-width:0}.exp-main .exp-fields input,.exp-main .exp-fields select{min-height:44px;font-size:17px;padding:8px 10px;min-width:0}.exp-main .exp-donor .exp-fields{grid-template-columns:110px minmax(0,1fr) 66px}.exp-main .exp-remove{display:flex;align-items:center;justify-content:center;margin:0;min-height:44px;padding:8px 7px;border:1px solid #75504c;border-radius:4px;background:#7f3b301c;color:#e4afa4;font-size:12px;white-space:nowrap;cursor:pointer}.exp-main .exp-remove:hover{background:#9a46383b;border-color:#a36a60}.exp-main .exp-remove:focus-visible{outline:2px solid #f3cb8a;outline-offset:3px}.exp-main .exp-character>.exp-hint{padding:0 17px;font-size:11px}.exp-main #exp-add{margin:5px 17px;min-height:40px;font-size:12px}.exp-main #exp-donors:empty:before{content:'보내는 캐릭터를 추가해 주세요.';display:block;padding:19px 17px;color:#9cb0c6;font-size:12px}.exp-main .exp-donor{min-width:0}.exp-main .exp-settings{justify-content:flex-end;margin:10px 0}.exp-main .exp-submit{margin:12px auto 0;min-height:48px;font-size:16px}.exp-workflow button{cursor:pointer}.exp-workflow button:disabled{cursor:not-allowed;opacity:.4}.exp-workflow button:focus-visible{outline:2px solid #e5c283;outline-offset:3px}.exp-input-summary{padding:13px 16px;margin:0 0 15px;border:1px solid #3d5369;border-radius:4px;background:#16283b;font-size:12px;line-height:1.9;color:#b9cbdc;overflow-wrap:anywhere}.exp-step-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:18px 0 26px;padding:15px 0;border-top:1px solid #30465b}.exp-step-navigation>span{font-size:12px;color:#bba87e}.exp-step-navigation>button{min-height:44px;font-size:13px}.exp-step-navigation>span:first-child{margin-right:auto}.exp-main [data-exp-panel][hidden]{display:none!important} @media(max-width:1000px){.exp-main .exp-columns{grid-template-columns:1fr}.exp-main .exp-fields{grid-template-columns:110px minmax(0,1fr)}.exp-main .exp-donor .exp-fields{grid-template-columns:110px minmax(0,1fr) 66px}} @media(max-width:700px){.exp-main .exp-character>h2{padding:13px 12px;font-size:18px}.exp-main .exp-fields{grid-template-columns:86px minmax(0,1fr);padding:12px;gap:9px}.exp-main .exp-donor .exp-fields{grid-template-columns:86px minmax(0,1fr) 56px;gap:8px}.exp-main .exp-fields label{font-size:11px}.exp-main .exp-fields input,.exp-main .exp-fields select{font-size:16px!important;padding:8px;min-height:44px}.exp-main .exp-remove{font-size:11px;padding:8px 4px;min-height:44px}.exp-main #exp-add{margin-left:12px;margin-right:12px}.exp-main .exp-character>.exp-hint{padding:0 12px;font-size:11px}.exp-step-navigation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.exp-step-navigation>span{grid-column:1/-1;grid-row:1;font-size:11px}.exp-step-navigation>button{font-size:12px;padding:10px 12px}.exp-step-navigation #exp-back{grid-column:1}.exp-step-navigation #exp-next{grid-column:2}.exp-workflow .workflow-step{align-items:center;text-align:center}.exp-input-summary{font-size:11px;padding:11px 13px}} @media(max-width:360px){.exp-main .exp-donor .exp-fields{grid-template-columns:78px minmax(0,1fr) 49px;gap:6px}.exp-main .exp-fields{grid-template-columns:78px minmax(0,1fr)}.exp-main .exp-fields input,.exp-main .exp-fields select{padding:8px 5px}} /* High-experience donor warning, before calculation and above the result. */ .exp-risk{border:2px solid #c57a62;border-left:6px solid #e99b70;border-radius:6px;background:linear-gradient(115deg,#512b25,#281d23);padding:19px 22px;margin:20px 0;color:#f2cebd;line-height:1.85}.exp-risk h2{font-size:20px!important;color:#ffd097;margin:0 0 10px!important}.exp-risk p,.exp-risk li{font-size:13px;margin:7px 0}.exp-risk ul{padding-left:22px;margin:7px 0 12px}.exp-risk .exp-risk-lead{font-size:15px;font-weight:650;color:#ffe0c0}.exp-risk>strong{display:block;font-size:14px;color:#ffe0a4;margin-top:12px}.exp-risk .exp-risk-emphasis{color:#ffb7a3;border:1px solid #a75b4e;padding:10px 13px;background:#a537241f}.exp-risk .cancel-button{margin-top:17px;min-height:44px;border-color:#ab775c;color:#f0d2b1}.exp-risk-result{margin-top:0;margin-bottom:20px} @media(max-width:700px){.exp-risk{padding:15px;border-left-width:4px}.exp-risk h2{font-size:18px!important}.exp-risk .exp-risk-lead{font-size:14px}.exp-risk p,.exp-risk li{font-size:12px}.exp-risk>strong{font-size:13px}.exp-risk .cancel-button{width:100%;font-size:13px}} /* Align the experience footer promotion with the surrounding panels. */ .exp-main .creator-channel{box-sizing:border-box;width:100%;margin:18px 0 0;padding:14px 22px;min-height:76px;gap:18px}.exp-main .creator-channel strong{font-size:14px;line-height:1.65}.exp-main .youtube-channel-button{box-sizing:border-box;min-height:44px;padding:9px 15px;font-size:13px;line-height:1.5} @media(max-width:700px){.exp-main .creator-channel{margin:16px 0 0;padding:14px 15px;min-height:0;gap:11px}.exp-main .creator-channel strong{font-size:13px}.exp-main .youtube-channel-button{font-size:12px;min-height:44px;padding:10px 13px}} .exp-strategy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.exp-strategy-card{min-width:0;border:1px solid #776543;background:#b9963609;border-radius:6px;padding:18px;line-height:1.8;font-size:13px}.exp-strategy-card h3{font-size:18px;color:#eed09b;margin:0 0 12px}.exp-strategy-result{font-size:21px;color:#f1cf91}.exp-strategy-card ol{padding-left:22px}.exp-strategy-card ol li{padding:10px 0;border-bottom:1px solid #30495f}.exp-strategy-card li p{margin:4px 0}.exp-strategy-card small{color:#aebed1}.exp-strategy-card summary{cursor:pointer;color:#eed09b;min-height:44px;padding:10px 0}.exp-strategy-warning{color:#f3b39d}@media(max-width:700px){.exp-strategy-grid{grid-template-columns:1fr}.exp-strategy-card{padding:15px}.exp-strategy-result{font-size:20px}} .exp-strategy-lead{font-size:15px;color:#e2eaf4}.exp-strategy-stats{display:grid;grid-template-columns:1fr;gap:5px;padding:14px;background:#17283a;border-radius:5px}.exp-strategy-stats>span{font-size:12px;color:#acbed2}.exp-strategy-stats>strong{color:#f1cf91;font-size:20px}.exp-strategy-stats>span:nth-of-type(2){margin-top:8px}.exp-strategy-card h4{font-size:15px;margin:20px 0 8px;color:#dce5ef}.exp-strategy-card ol>li>strong{font-size:15px}.exp-strategy-gain{color:#ebd195;font-weight:600}.exp-strategy-notes{font-size:12px;line-height:1.9;color:#adbed0}.exp-strategy-notes summary{cursor:pointer;min-height:44px;padding:10px 0;color:#dbc596} @media(max-width:700px){.exp-workflow{grid-template-columns:repeat(2,minmax(0,1fr))}.exp-workflow .workflow-step{flex-direction:row;justify-content:center;gap:9px;min-height:54px}.exp-workflow .workflow-step>b{margin:0;width:25px;height:25px;flex:0 0 25px}.exp-workflow .workflow-step>span{font-size:12px}} .exp-character-overview{margin:14px 0 18px}.exp-final-character{display:grid;grid-template-columns:minmax(0,1fr) 90px 110px;align-items:center;gap:12px;border:1px solid #ac9059;border-left:4px solid #e6c384;border-radius:5px;background:#b9963614;padding:10px 14px;color:#f1d29d;font-size:14px}.exp-final-character>b{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}.exp-donor-heading{font-size:12px;font-weight:600;color:#adc0d4;margin:11px 0 6px}.exp-character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.exp-character-tile{display:grid;grid-template-columns:18px minmax(36px,1fr) auto;align-items:center;gap:7px;min-width:0;text-align:center;padding:8px 10px;border:1px solid #405469;border-radius:4px;background:#152538;color:#cad8e6;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.exp-character-tile>strong{font-size:14px;color:#e0eaf4}.exp-character-tile>b{font-size:13px}.exp-character-tile>span{color:#adbed1;font-size:13px}@media(max-width:700px){.exp-final-character{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px;font-size:12px}.exp-final-character>strong{font-size:12px}.exp-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.exp-character-tile{grid-template-columns:14px minmax(32px,1fr) auto;gap:4px;padding:8px 6px}.exp-character-tile>strong,.exp-character-tile>b,.exp-character-tile>span{font-size:12px}} .exp-stage-reward-links{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0}.exp-stage-reward-links button{min-height:44px;white-space:normal;text-align:left}#exp-stage-reward-dialog{width:min(540px,calc(100% - 28px));max-height:90dvh;overflow:auto}.exp-stage-reward-content{padding:0 22px 10px}.exp-stage-reward-list{list-style:none;margin:16px 0;padding:0;border:1px solid #405469;border-radius:5px;background:#152538}.exp-stage-reward-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;padding:13px 15px;font-size:14px;color:#d3dfed;line-height:1.6}.exp-stage-reward-list li+li{border-top:1px solid #30495f}.exp-stage-reward-list strong{color:#f1d29d;white-space:nowrap}@media(max-width:700px){.exp-stage-reward-content{padding:0 14px 8px}.exp-stage-reward-list li{font-size:13px;padding:12px}} .site-header .reference-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:52px;padding:9px 15px;border:1px solid #bd9b59;border-radius:6px;background:linear-gradient(120deg,#3e3522,#263445);color:#f4dba5;box-shadow:0 2px 10px #0002;text-align:left}.reference-button-icon{display:grid;place-items:center;font-size:25px;line-height:1;width:27px}.reference-button-label{font-size:16px;font-weight:700;line-height:1.35;white-space:nowrap}.reference-button-label small{display:block;margin-top:3px;color:#d2c19e;font-size:11px;font-weight:400}.reference-button-arrow{font-size:24px;line-height:1;margin-left:4px}.site-header .reference-button:hover{background:linear-gradient(120deg,#51422a,#33475d);border-color:#f1cf91}.site-header .reference-button:focus-visible{outline:2px solid #f1cf91;outline-offset:4px}@media(max-width:700px){.site-header{gap:10px}.site-header .reference-button{min-height:48px;padding:8px 10px;gap:7px}.reference-button-icon{font-size:22px;width:23px}.reference-button-label{font-size:15px}.reference-button-label small{font-size:10px}.reference-button-arrow{font-size:20px;margin-left:0}} .exp-strategy-card .exp-equation-key{font-size:12px;color:#b7c9db;margin:0 0 8px;line-height:1.7}.exp-merge-equation{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:9px;row-gap:2px;line-height:1.8}.exp-merge-equation>strong{font-size:18px;color:#e5edf7;white-space:nowrap}.exp-merge-equation>b{font-size:18px;color:#f1d29d;white-space:nowrap;font-variant-numeric:tabular-nums}.exp-strategy-card ol:has(.exp-merge-equation){padding-left:24px}.exp-strategy-card ol:has(.exp-merge-equation)>li{padding:13px 0}.exp-strategy-card ol:has(.exp-merge-equation)>li::marker{font-size:15px;font-weight:700;color:#c5d4e5}.exp-strategy-card .exp-stage-reward-links{margin:8px 0 2px}.exp-strategy-card .exp-stage-reward-links button{font-size:13px}@media(max-width:700px){.exp-merge-equation>strong,.exp-merge-equation>b{font-size:17px}.exp-strategy-card .exp-stage-reward-links button{font-size:13px}} /* Keep the guide focused on actions; calculations and reward lists open on demand. */ .exp-simple-step>strong{display:block;font-size:16px;color:#e5edf7;line-height:1.7}.exp-step-rewards{margin-top:6px}.exp-strategy-card .exp-step-rewards>summary{color:#f1d29d;font-size:13px;min-height:44px;padding:9px 0;cursor:pointer}.exp-strategy-card .exp-simple-step{padding:12px 0}.exp-strategy-card>.exp-strategy-notes{border-top:1px solid #30495f}.exp-step-rewards .exp-stage-reward-links{margin-top:0} /* Numbered stages and direct reward popups share each compact result row. */ .exp-strategy-card .exp-compact-steps{list-style:none;padding:0;margin:12px 0}.exp-compact-step-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.exp-compact-step-row .exp-merge-equation{gap:7px;flex:1 1 230px}.exp-compact-step-row .exp-merge-equation>strong,.exp-compact-step-row .exp-merge-equation>b{font-size:15px}.exp-step-label{font-size:13px;font-weight:700;color:#b7c9db;white-space:nowrap}.exp-strategy-card .exp-step-reward-button{font-size:12px;min-height:44px;text-align:left;white-space:normal;color:#f1d29d;padding:8px 10px}.exp-strategy-card .exp-compact-steps>li{padding:14px 0}.exp-compact-steps .exp-strategy-warning{font-size:12px;margin:6px 0 0} .exp-strategy-reward-summary{list-style:none;margin:4px 0 0;padding:0}.exp-strategy-reward-summary>li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:13px;line-height:1.6}.exp-strategy-reward-summary>li+li{border-top:1px solid #30495f}.exp-strategy-reward-summary>li>span{min-width:0;overflow-wrap:anywhere;color:#d3dfed}.exp-strategy-reward-summary>li>b{white-space:nowrap;color:#f1d29d;font-variant-numeric:tabular-nums} /* Experience calculator: clearer type, visible groups, and readable merge steps. */ .exp-main .exp-hint,.exp-main .exp-policy,.exp-main .exp-strategy-notes{font-size:14px;color:#bacadd;line-height:1.8} .exp-main .exp-panel{border-color:#425a73;background:#111e2d} .exp-main .exp-fields label{font-size:14px;color:#d5e0ed;font-weight:600} .exp-main .exp-fields input,.exp-main .exp-fields select{border-color:#5a7692;background:#0c1724;color:#f3f6fa;font-variant-numeric:tabular-nums} .exp-main .exp-character>h2{color:#e9f1fa;background:#1b3046} .exp-main .exp-character:first-child{border-color:#9c875e} .exp-main .exp-result{background:#1a2b3e;border-color:#8e7d58;padding:22px} .exp-main .exp-result>strong{font-size:32px;line-height:1.5;font-variant-numeric:tabular-nums} .exp-main .exp-result>p{font-size:14px;color:#c4d2e2} .exp-main .exp-workflow .workflow-step.active{background:#2c302c;border-color:#d8b77b;color:#f5d899} .exp-main .exp-workflow .workflow-step>span{font-size:14px} .exp-main .exp-workflow .workflow-step small{color:#becde0;font-size:12px} .exp-main .exp-strategy-grid{gap:20px;align-items:start} .exp-main .exp-strategy-card{padding:22px;background:#132233;border:1px solid #8e7b55;border-top:4px solid #d7b676;border-radius:8px} .exp-main .exp-strategy-card:nth-child(2){border-color:#557998;border-top-color:#8bbbe5} .exp-main .exp-strategy-card h3{font-size:21px;line-height:1.5;margin:0 0 10px} .exp-main .exp-strategy-card:nth-child(2) h3{color:#b4d8f6} .exp-main .exp-strategy-lead{color:#d4dfec;font-size:15px;margin-bottom:18px} .exp-main .exp-strategy-stats{background:#1b3045;border:1px solid #405c77;border-radius:6px;padding:17px;gap:8px} .exp-main .exp-strategy-stats>span{font-size:14px;color:#cad8e9;font-weight:600} .exp-main .exp-strategy-stats>strong{font-size:25px;line-height:1.5} .exp-main .exp-strategy-stats>span:nth-of-type(2){margin-top:12px;padding-top:13px;border-top:1px solid #486078} .exp-main .exp-strategy-reward-summary>li{font-size:14px;padding:9px 0;gap:16px} .exp-main .exp-strategy-reward-summary>li>b{font-size:16px} .exp-main .exp-strategy-card h4{font-size:16px;color:#e5edf6;margin-top:22px} .exp-main .exp-strategy-card .exp-compact-steps{margin:12px 0} .exp-main .exp-strategy-card .exp-compact-steps>li{padding:16px 0;border-bottom:1px solid #425970} .exp-main .exp-compact-step-row{gap:12px} .exp-main .exp-compact-step-row .exp-merge-equation{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;flex:1 1 240px;min-width:0;align-items:center} .exp-main .exp-step-label{grid-row:1/3;display:grid;place-items:center;padding:7px 9px;min-height:42px;border:1px solid #66809b;border-radius:5px;background:#223b54;font-size:13px;color:#e2edf9} .exp-main .exp-compact-step-row .exp-merge-equation>strong{font-size:16px;color:#e5edf7;white-space:normal;overflow-wrap:anywhere} .exp-main .exp-compact-step-row .exp-merge-equation>b{grid-column:2;font-size:18px;color:#f1d29d;white-space:normal;overflow-wrap:anywhere;line-height:1.5} .exp-main .exp-strategy-card .exp-step-reward-button{font-size:14px;line-height:1.5;background:#3b3323;border:1px solid #b49b66;border-radius:5px;color:#ffe0a1;padding:10px 12px;min-height:44px} .exp-main .exp-strategy-card .exp-step-reward-button:hover{background:#50432a} .exp-main .exp-compact-steps .exp-strategy-warning{font-size:13px;line-height:1.7} .exp-main .exp-donor-heading{font-size:14px;color:#c7d6e6} .exp-main .exp-stage-reward-list li,.exp-main .exp-table-wrap td,.exp-main .exp-table-wrap th{font-size:14px} .exp-main .exp-table-wrap tbody tr:nth-child(even){background:#1b30454d} @media(max-width:700px){ .exp-main .exp-panel{padding:16px 12px} .exp-main .exp-fields label{font-size:13px} .exp-main .exp-character>.exp-hint{font-size:13px} .exp-main .exp-result{padding:17px 14px} .exp-main .exp-result>strong{font-size:28px;text-align:left;margin:8px 0 14px} .exp-main .exp-strategy-card{padding:17px 14px} .exp-main .exp-strategy-card h3{font-size:20px} .exp-main .exp-strategy-stats{padding:14px} .exp-main .exp-strategy-stats>strong{font-size:23px} .exp-main .exp-compact-step-row{display:grid;grid-template-columns:minmax(0,1fr)} .exp-main .exp-strategy-card .exp-step-reward-button{justify-self:stretch;text-align:center} .exp-main .exp-workflow .workflow-step>span{font-size:13px} .exp-main .exp-workflow .workflow-step small{font-size:11px} } /* Approved inline-results input layout. */ .exp-main{max-width:1440px} .exp-main .exp-columns{grid-template-columns:220px minmax(0,1fr);gap:16px} .exp-main .exp-donor-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;background:#1b3046;border-bottom:1px solid #425970} .exp-main .exp-donor-header h2{padding:0;margin:0;border:0;font-size:18px} .exp-main .exp-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap} .exp-main #exp-add,.exp-main #exp-reset{margin:0;width:auto;height:40px;min-height:40px;padding:8px 12px;font-size:13px;line-height:22px;border-radius:4px;white-space:nowrap} .exp-main #exp-add{background:#3d3423;border:1px solid #b79c64;color:#f0d399;font-weight:700} .exp-main #exp-add:hover:not(:disabled){background:#51442c} .exp-main #exp-add:disabled{background:#24384c;border-color:#61768c;color:#c6d5e5;opacity:.7} .exp-main #exp-reset{background:#1c3d60;border:1px solid #689ac8;color:#d6eaff;font-weight:600} .exp-main #exp-reset:hover{background:#28517a} .exp-main .exp-donor-columns,.exp-main .exp-donor .exp-fields{display:grid;grid-template-columns:minmax(76px,.7fr) minmax(100px,.9fr) 108px minmax(220px,2fr) 48px;gap:10px;align-items:center;padding:14px} .exp-main .exp-donor-columns{font-size:12px;color:#d6e4f3;background:#22384d;padding-top:10px;padding-bottom:10px} .exp-main .exp-donor-name{font-size:13px;color:#edf3fb;white-space:nowrap} .exp-main .exp-donor .exp-fields>select,.exp-main .exp-donor .exp-fields>input,.exp-main .exp-character .exp-fields input,.exp-main .exp-character .exp-fields select{height:44px;min-height:44px;max-height:44px;padding:9px 6px;border-color:#7894ae;line-height:24px;box-sizing:border-box} .exp-main .exp-donor .exp-fields>select,.exp-main .exp-character .exp-fields select{font-size:14px!important;white-space:nowrap} .exp-main .exp-donor .exp-fields>input{font-size:16px!important;font-variant-numeric:tabular-nums} .exp-main .exp-donor:nth-child(even){background:#172739} .exp-main .exp-donor+.exp-donor{border-color:#4b647c} .exp-main .exp-inline-preview{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 16px;min-width:0;font-variant-numeric:tabular-nums} .exp-main .exp-inline-preview strong{font-size:18px;color:#f5d79b;line-height:1.6;overflow-wrap:anywhere} .exp-main .exp-inline-preview small,.exp-main .exp-inline-preview>span{font-size:13px;color:#c4d2e1;line-height:1.6} .exp-main .exp-donor .exp-remove{margin:0;min-height:44px;height:44px;padding:7px 4px;font-size:12px} .exp-main .exp-character>.exp-fields{grid-template-columns:90px minmax(0,1fr);gap:10px;padding:16px 12px} @media(max-width:1100px){.exp-main .exp-columns{grid-template-columns:1fr}.exp-main .exp-character:first-child>.exp-fields{grid-template-columns:100px 120px}} @media(min-width:601px) and (max-width:850px){.exp-main .exp-donor .exp-fields,.exp-main .exp-donor-columns{grid-template-columns:64px 90px 104px minmax(0,1fr) 44px;gap:8px;padding-left:12px;padding-right:12px}.exp-main .exp-inline-preview strong{font-size:16px}.exp-main .exp-inline-preview{justify-content:flex-start}} @media(max-width:600px){ .exp-main{padding-left:10px;padding-right:10px} .exp-main #exp-form{padding:12px 6px} .exp-main .exp-donor-columns{display:none} .exp-main .exp-donor .exp-fields{grid-template-columns:50px 78px minmax(70px,1fr) 38px;gap:6px;padding:14px 8px} .exp-main .exp-donor-name{font-size:12px} .exp-main .exp-donor .exp-remove{grid-column:4;grid-row:1;font-size:11px} .exp-main .exp-inline-preview{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:3px 10px;margin-top:5px;padding-top:8px;border-top:1px solid #40596f} .exp-main .exp-inline-preview strong{font-size:14px} .exp-main .exp-donor-header{padding:12px 10px;gap:10px} .exp-main .exp-header-actions{gap:7px} .exp-main #exp-add,.exp-main #exp-reset{min-height:44px;height:44px;padding:9px 10px} } @media(max-width:380px){.exp-main .exp-header-actions{margin-left:0;width:100%;justify-content:flex-end}.exp-main .exp-donor .exp-fields{grid-template-columns:46px 72px minmax(64px,1fr) 34px;gap:5px;padding-left:6px;padding-right:6px}} .exp-final-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;margin:0 0 22px;padding:16px 18px;border:1px solid #89754e;border-radius:5px;background:#1b3045;font-variant-numeric:tabular-nums}.exp-final-summary:empty{display:none}.exp-final-summary>span{color:#d1deec;font-size:15px;font-weight:600}.exp-final-summary>strong{color:#f5d79b;font-size:25px;line-height:1.5}@media(max-width:600px){.exp-final-summary{padding:13px;gap:5px 12px}.exp-final-summary>strong{font-size:22px}} /* Keep each merge equation and its result on one line. */ .exp-main .exp-compact-step-row .exp-merge-equation{display:flex;flex-wrap:nowrap;gap:8px;flex:1 1 auto;overflow-x:auto} .exp-main .exp-compact-step-row .exp-merge-equation>strong,.exp-main .exp-compact-step-row .exp-merge-equation>b{white-space:nowrap;overflow-wrap:normal;flex-shrink:0} .exp-main .exp-compact-step-row .exp-merge-equation>b{font-size:16px} .exp-main .exp-compact-step-row .exp-step-label{flex-shrink:0} /* Highlight the experience cost of choosing rewards first. */ .exp-main .exp-experience-tradeoff{margin:16px 0;padding:14px 16px;border:1px solid #ba8750;border-left:4px solid #ffc46b;border-radius:6px;background:#352a20;color:#ffead1;line-height:1.8} .exp-main .exp-tradeoff-title{display:block;font-size:15px;color:#ffd28b;margin-bottom:7px} .exp-main .exp-experience-tradeoff>p{margin:0;font-size:14px;word-break:keep-all;overflow-wrap:anywhere} .exp-main .exp-tradeoff-value{display:inline-block;margin:0 3px;padding:1px 7px;border-radius:4px;background:#573d20;color:#ffe0a1;font-size:19px;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums} /* Approved compact reward action alignment. */ .exp-main .exp-compact-step-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:12px;align-items:center;max-width:410px} .exp-main .exp-compact-step-row .exp-merge-equation{display:flex;gap:8px;min-width:0;overflow-x:auto;flex-wrap:nowrap} .exp-main .exp-compact-step-row .exp-merge-equation>strong,.exp-main .exp-compact-step-row .exp-merge-equation>b{font-size:13px;letter-spacing:-.35px;white-space:nowrap;font-variant-numeric:tabular-nums} .exp-main .exp-compact-step-row .exp-step-label{font-size:12px;padding:6px;min-height:34px} .exp-main .exp-strategy-card .exp-step-reward-button{grid-column:2;justify-self:end;width:72px;min-height:34px;padding:6px 8px;font-size:13px;text-align:center;white-space:nowrap} .exp-main .exp-strategy-card .exp-compact-steps>li{padding:9px 0} @media(max-width:400px){.exp-main .exp-compact-step-row{grid-template-columns:minmax(0,1fr) 62px;gap:7px}.exp-main .exp-strategy-card .exp-step-reward-button{width:62px;padding:6px 4px;font-size:12px}.exp-main .exp-compact-step-row .exp-merge-equation{gap:5px}.exp-main .exp-compact-step-row .exp-merge-equation>strong,.exp-main .exp-compact-step-row .exp-merge-equation>b{font-size:12px}} @media(pointer:coarse){.exp-main .exp-strategy-card .exp-step-reward-button{min-height:44px}} /* Separate reward details and read-only collection information. */ #reward-guide-dialog{width:min(960px,calc(100vw - 24px));max-width:960px} .guide-detail-pages{display:flex;gap:10px;margin:0 0 20px;border-bottom:1px solid #425970;padding-bottom:12px;flex-wrap:wrap} .guide-detail-pages button{padding:10px 16px;min-height:44px;border:1px solid #526b82;border-radius:5px} .guide-detail-pages button[aria-current=page]{background:#3b3323;color:#ffe0a1;border-color:#b49b66} .guide-detail-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid #425970;color:#b7c9db} .guide-detail-pagination button{min-height:44px;padding:10px 16px} #reward-guide-detail .guide-collection-group table{min-width:0;width:100%;table-layout:auto} #reward-guide-detail .guide-collection-group th:nth-child(2),#reward-guide-detail .guide-collection-group td:nth-child(2){width:90px;white-space:nowrap} #reward-guide-detail .guide-collection-group td{white-space:normal;overflow-wrap:anywhere} #reward-guide-detail .guide-collection-group thead{display:table-header-group} #reward-guide-detail .guide-collection-group tbody{display:table-row-group} #reward-guide-detail .guide-collection-group tr{display:table-row;border:0} #reward-guide-detail .guide-collection-group td{display:table-cell;min-height:0;padding:12px!important} #reward-guide-detail .guide-collection-group td:before{content:none} #reward-guide-detail .guide-collection-group td:first-child{color:#dcc38d} #reward-guide-detail .guide-collection-group h4{margin:0 0 12px;font-size:16px;color:#e8c98b} .guide-level-line{display:block;white-space:nowrap}.guide-reward-line{line-height:1.8;overflow-wrap:anywhere}.guide-reward-line+.guide-reward-line{margin-top:4px} /* Approved grouped rewards and centered detail tabs. */ #reward-guide-detail .guide-detail-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:480px;margin:0 auto 22px;padding:5px;background:#0d1b29;border:1px solid #354b60;border-radius:8px} #reward-guide-detail .guide-detail-pages button{min-height:46px;padding:9px 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:#b7c9db;text-align:center;white-space:normal;font-size:14px} #reward-guide-detail .guide-detail-pages button[aria-current=page]{border-color:#b49b66;background:#3b3323;color:#ffe0a1} #reward-guide-detail .guide-grouped-rewards{table-layout:fixed;width:100%} #reward-guide-detail .guide-grouped-rewards thead th{text-align:center;white-space:nowrap} #reward-guide-detail .guide-grouped-rewards th:first-child{width:92px} #reward-guide-detail .guide-grouped-rewards tbody th{text-align:center;vertical-align:middle} #reward-guide-detail .guide-grouped-rewards td{word-break:keep-all;overflow-wrap:anywhere} #reward-guide-detail .guide-special-rewards{color:#f1d29d;font-weight:700} #reward-guide-detail .guide-reward-line+.guide-reward-line{margin-top:8px} @media(max-width:480px){#reward-guide-detail .guide-grouped-rewards th:first-child{width:82px}#reward-guide-detail .guide-detail-pages button{font-size:12px;padding:8px 4px}} #reward-guide-detail .guide-detail-pages button{display:flex;align-items:center;justify-content:center;gap:8px}#reward-guide-detail .guide-tab-number{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#223b54;color:#c8d6e4;font-size:12px;flex-shrink:0}#reward-guide-detail .guide-detail-pages button[aria-current=page] .guide-tab-number{background:#b49b66;color:#172331} /* Center column headings across reference tables and token quantities. */ .exp-table-wrap table thead th,.guide-detail table thead th,.reward-guide table thead th{text-align:center} #reward-guide-detail .guide-collection-group th,#reward-guide-detail .guide-collection-group td:nth-child(2){text-align:center} .mastery-reference table thead th,#mastery-exp-table table thead th,.exp-matrix table thead th{text-align:center} #guide-table .guide-special-rewards{color:#f1d29d;font-weight:700}#guide-table .guide-reward-line{word-break:keep-all;overflow-wrap:anywhere}#guide-table .guide-reward-line+.guide-reward-line{margin-top:8px} /* Compact collection names and rows; reserve more width for effects. */ #reward-guide-detail .guide-collection-group{padding:12px;margin:12px 0} #reward-guide-detail .guide-collection-group h4{margin:0 0 9px} #reward-guide-detail .guide-collection-group table{table-layout:fixed;width:100%} #reward-guide-detail .guide-collection-group th:first-child{width:35%} #reward-guide-detail .guide-collection-group th:nth-child(2),#reward-guide-detail .guide-collection-group td:nth-child(2){width:82px} #reward-guide-detail .guide-collection-group td{padding:8px 11px!important;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere} #reward-guide-detail .guide-collection-group th{padding:9px 11px;line-height:1.5} #reward-guide-detail .guide-collection-group td:last-child{font-size:14px;color:#e5edf7} @media(max-width:600px){#reward-guide-detail .guide-collection-group{padding:9px}#reward-guide-detail .guide-collection-group th:first-child{width:32%}#reward-guide-detail .guide-collection-group th:nth-child(2),#reward-guide-detail .guide-collection-group td:nth-child(2){width:66px}#reward-guide-detail .guide-collection-group td{padding:8px!important}#reward-guide-detail .guide-collection-group th{padding:8px 5px}#reward-guide-detail .guide-collection-group td:last-child{font-size:13px}} /* Approved face-and-shoulders view with the complete face visible. */ .class-card>.class-portrait{position:relative;display:block;width:112px;max-width:100%;height:110px;overflow:hidden;flex-shrink:0;mask-image:none} .class-card>.class-portrait>img{position:absolute;display:block;max-width:none;width:224px;height:156px;left:50%;transform:translateX(-50%);top:-1px;object-fit:contain} .class-card{gap:12px;padding:15px 4px} @media(max-width:700px){.class-card>.class-portrait{width:100%;max-width:112px;height:110px}.class-card{gap:10px;padding:13px 3px}.class-card small{font-size:11px}}/* Selected classes shown beneath their selectors. */ .class-pair{align-items:flex-start} .class-pair .class-arrow{align-self:flex-start;padding-top:39px} .class-summary-portrait{display:flex;flex-direction:column;align-items:center;margin-top:12px;gap:5px} .class-summary-art{position:relative;display:block;width:128px;max-width:100%;height:124px;overflow:hidden} .class-summary-art>img{position:absolute;max-width:none;width:248px;height:173px;left:50%;transform:translateX(-50%);top:-1px;object-fit:contain} .class-summary-portrait>small{font-size:11px;color:#99adbd;font-weight:400;text-align:center} #class-to-preview>small{color:#e5cb8a} @media(max-width:700px){.class-pair{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px}.class-pair .class-arrow{padding-top:34px;justify-self:center}.class-summary-art{height:124px;width:128px}} .shop-quantity{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;color:#bdcbd8}.shop-quantity select{width:65px;min-height:34px;padding:4px 7px;border:1px solid #9a8859;border-radius:3px;background:#172b3c;color:#ffe1a1}.shop-quantity-note{padding:0 0 10px;color:#f1d29d;font-size:13px}.shop-quantity select:focus-visible{outline:2px solid #e5c283;outline-offset:2px} /* Shop item heading above one aligned enhancement / quantity / action row. */ #picker .shop-owned-cell{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;padding:11px 12px} #picker .shop-owned-cell:before{display:none} #picker .shop-item-heading{display:flex;align-items:center;gap:10px;min-width:0;flex:0 0 auto} #picker .shop-item-heading>.tile{width:34px;height:38px;min-width:34px} #picker .shop-item-heading>strong{font-size:13px;font-weight:500;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;min-width:0} #picker .shop-item-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:10px;flex:0 0 auto} #picker .shop-item-controls .item-enhance,#picker .shop-item-controls .shop-quantity{display:flex;align-items:center;gap:6px;margin:0;min-width:0;font-size:11px;white-space:nowrap;color:#b8c9d8} #picker .shop-item-controls select{width:62px;min-width:0;flex:1;max-width:76px;height:36px;min-height:36px;padding:4px 6px;border:1px solid #827048;border-radius:4px;background:#111f2d;color:#fff0c9;font-size:14px!important;text-align:center} #picker .shop-owned-cell .shop-item-controls .gold-button{grid-column:auto;margin:0;width:auto;min-height:36px;padding:5px 13px;font-size:12px;white-space:nowrap} #picker .shop-owned-cell>.item-unavailable{font-size:11px;margin:0;color:#dcaaa0} @media(max-width:700px){#picker .shop-owned-cell{padding:12px;gap:12px}#picker .shop-item-controls{gap:10px}#picker .shop-item-controls select{min-height:44px;height:44px;font-size:16px!important}#picker .shop-owned-cell .shop-item-controls .gold-button{min-height:44px;padding:6px 15px}} /* Compact single-row shop equipment layout, matching the requested order. */ #picker:has(.shop-owned-cell) .exchange-row,#picker:has(.shop-owned-cell) .exchange-table-head{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)} #picker .shop-owned-cell{display:grid;grid-template-columns:52px 28px minmax(0,1fr) 84px 46px;gap:7px;align-items:center;padding:10px;min-height:64px} #picker .shop-owned-cell .shop-item-heading,#picker .shop-owned-cell .shop-item-controls{display:contents} #picker .shop-owned-cell .item-enhance{grid-column:1;grid-row:1} #picker .shop-owned-cell .item-enhance>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} #picker .shop-owned-cell .shop-item-heading>.tile{grid-column:2;grid-row:1;width:28px;min-width:28px;height:32px} #picker .shop-owned-cell .shop-item-heading>strong{grid-column:3;grid-row:1;font-size:12px;word-break:keep-all;overflow-wrap:normal} #picker .shop-owned-cell .shop-quantity{grid-column:4;grid-row:1;gap:5px} #picker .shop-owned-cell .shop-item-controls select{width:100%;max-width:none;height:34px;min-height:34px;font-size:13px!important;padding:4px} #picker .shop-owned-cell .shop-item-controls .gold-button{grid-column:5;grid-row:1;padding:5px 8px;min-height:34px;width:46px} #picker .shop-owned-cell>.item-unavailable{grid-column:1/-1} @media(max-width:900px){#picker:has(.shop-owned-cell) .exchange-row{grid-template-columns:minmax(0,1fr)}#picker:has(.shop-owned-cell) .exchange-table-head{display:none}#picker .shop-owned-cell{grid-template-columns:52px 28px minmax(0,1fr) 60px 46px;gap:6px}#picker .shop-owned-cell .shop-quantity>span{display:none}#picker .shop-owned-cell .shop-item-heading>strong{font-size:12px}} @media(pointer:coarse){#picker .shop-owned-cell .shop-item-controls select,#picker .shop-owned-cell .shop-item-controls .gold-button{min-height:44px;height:44px}} #picker .shop-owned-cell .shop-item-controls .gold-button{min-width:0;max-width:100%}#picker .shop-owned-cell .shop-quantity{min-width:0;width:100%} /* Alternate preview: icon before enhancement. */ #picker .shop-owned-cell{grid-template-columns:28px 52px minmax(0,1fr) 84px 46px}#picker .shop-owned-cell .shop-item-heading>.tile{grid-column:1}#picker .shop-owned-cell .item-enhance{grid-column:2}@media(max-width:900px){#picker .shop-owned-cell{grid-template-columns:28px 52px minmax(0,1fr) 60px 46px}} /* Comparison sample: compact desktop, readable two-row mobile controls. */ @media(min-width:901px){#picker:has(.shop-owned-cell) .exchange-row,#picker:has(.shop-owned-cell) .exchange-table-head{grid-template-columns:minmax(390px,.95fr) minmax(0,1fr)}} @media(max-width:900px){ #picker:has(.shop-owned-cell) .slot-nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:7px;overflow-x:auto;padding-bottom:5px;max-height:none} #picker:has(.shop-owned-cell) .slot-nav button{flex:0 0 auto;width:max-content;white-space:nowrap;min-height:42px;padding:8px 12px} #picker .shop-owned-cell{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px} #picker .shop-owned-cell .shop-item-heading{display:flex;align-items:center;gap:9px;min-width:0} #picker .shop-owned-cell .shop-item-heading>.tile{width:30px;height:34px;min-width:30px} #picker .shop-owned-cell .shop-item-heading>strong{font-size:13px;line-height:1.6;flex:1} #picker .shop-owned-cell .shop-item-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 62px;gap:10px;align-items:center} #picker .shop-owned-cell .item-enhance{grid-column:1;grid-row:1} #picker .shop-owned-cell .item-enhance>span{position:static;display:inline;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:nowrap} #picker .shop-owned-cell .shop-quantity{grid-column:2;grid-row:1} #picker .shop-owned-cell .shop-quantity>span{display:inline} #picker .shop-owned-cell .shop-item-controls select{height:42px;min-height:42px;max-width:76px;flex:1;width:60px} #picker .shop-owned-cell .shop-item-controls .gold-button{grid-column:3;grid-row:1;width:62px;min-height:42px} } @media(min-width:901px){#picker .shop-owned-cell .shop-quantity>span{display:none}#picker .shop-owned-cell{grid-template-columns:28px 52px minmax(0,1fr) 60px 46px}} .catalyst-refining-note{margin-top:14px;padding:16px 18px;border:1px solid #80623d;border-left:3px solid #deb66b;border-radius:5px;background:#29251f;color:#ddcfb7;font-size:13px;line-height:1.7} .catalyst-refining-note>strong{display:block;color:#f4d28b;font-size:14px;font-weight:600} .catalyst-refining-note p{margin:7px 0 3px} .catalyst-refining-note b{color:#ffbf96;font-weight:600} .catalyst-refining-note small{display:block;font-size:12px;color:#c4beb2} .catalyst-refining-note a{display:inline-block;margin-top:9px;color:#ceb985;font-size:11px;text-underline-offset:3px} @media(max-width:900px){.catalyst-refining-note{margin-top:12px;padding:14px;line-height:1.8}.catalyst-refining-note>strong{font-size:13px}} @media(min-width:901px){ .catalyst-refining-note{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:18px;row-gap:10px;padding:14px 18px} .catalyst-refining-note>strong{grid-column:1;grid-row:1;align-self:center} .catalyst-refining-note>a{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0} .catalyst-refining-note>p{grid-column:1;grid-row:2;margin:0;padding-top:10px;border-top:1px solid #554936;white-space:nowrap} .catalyst-refining-note>small{grid-column:2;grid-row:2;padding-top:10px;border-top:1px solid #554936;font-size:13px;white-space:nowrap} } .skill-planner-dialog{width:min(1320px,97vw);max-width:none;height:94dvh;max-height:94dvh;padding:0;overflow:hidden}.skill-planner-dialog>.dialog-heading{padding:12px 18px;margin:0}.skill-planner-dialog iframe{display:block;border:0;width:100%;height:calc(100% - 74px);background:#101820}.skill-plan-item{display:flex;align-items:center;gap:10px;margin:8px 0;min-width:0}.skill-plan-item strong{font-size:14px;overflow-wrap:anywhere}.skill-plan-icon{display:inline-flex;flex-direction:column;border:2px solid #a99f80;flex:none;background:#000;width:48px}.skill-plan-icon img{width:44px;height:44px;object-fit:contain}.skill-plan-icon>span{display:flex;justify-content:space-between;height:15px;font-size:10px;color:#ebbd51;padding:0 2px;border-top:1px solid #a99f80}.skill-plan-icon i{font-style:normal;color:white}.hero .skill-plan-icon,.hero .skill-plan-icon>span{border-color:#bf131b}.legend .skill-plan-icon,.legend .skill-plan-icon>span{border-color:#7c239b}.myth .skill-plan-icon,.myth .skill-plan-icon>span{border-color:#c89d24}@media(max-width:600px){.skill-planner-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.skill-plan-item strong{font-size:12px}} #review-rows .skill-plan-item strong{display:none}#review-rows .compare-cell:has(.skill-plan-item){display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}#review-rows .skill-plan-item{margin:3px} .mode-start{max-width:1100px;margin:0 auto;padding:64px 30px 50px}.mode-start>h1{font-size:38px;letter-spacing:-1.5px;margin:12px 0}.mode-intro{color:#a4b3c3;font-size:16px}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:36px 0 25px}.mode-card{appearance:none;text-align:left;position:relative;padding:34px;border:1px solid #46586a;border-radius:16px;background:linear-gradient(140deg,#203141,#14212f);color:#eae7de;cursor:pointer;transition:transform .15s,border-color .15s}.mode-card:hover{border-color:#d4b775;transform:translateY(-3px)}.mode-card:focus-visible{outline:3px solid #d4b775;outline-offset:4px}.mode-art{display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:#b8a16e14;border:1px solid #a88b5055;border-radius:14px;font-size:34px;color:#d9bd7d;margin-bottom:26px}.mode-card>small{display:block;color:#bd9f66;font-size:11px;letter-spacing:2px}.mode-card h2{font-size:27px;margin:10px 0 14px}.mode-card p{font-size:15px;line-height:1.8;color:#b1c0ce;margin:0 0 26px}.mode-tags{display:block;font-size:12px;color:#8ea4b8;padding-bottom:26px}.mode-card>strong{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid #425262;color:#ddc58e;font-size:15px}.mode-footnote{font-size:12px;color:#7f93a5}.mode-current{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;background:#1b2a37;border:1px solid #405264;border-radius:9px;margin-bottom:18px;color:#dac28c}.mode-current button{background:transparent;border:0;color:#a9bfd0;cursor:pointer;font:inherit;font-size:12px}.items-mode .skill-cost-summary,.items-mode .skill-max-note,.items-mode .mastery-summary,.items-mode .base-control{display:none}.items-mode .cost-card>.fine-print{font-size:0}.items-mode .cost-card>.fine-print:after{content:'아이템 교체 항목의 추가 비용만 계산합니다. 클래스체인지 기본 비용은 포함하지 않습니다.';font-size:12px}.items-mode .class-summary-portrait{display:none!important} @media(max-width:640px){.mode-start{padding:32px 18px}.mode-start>h1{font-size:27px;letter-spacing:-1px}.mode-intro{font-size:14px}.mode-options{grid-template-columns:1fr;gap:16px;margin-top:26px}.mode-card{padding:24px}.mode-art{width:45px;height:45px;font-size:27px;float:right;margin:0}.mode-card h2{font-size:23px}.mode-card p{font-size:14px;margin-bottom:18px}.mode-tags{padding-bottom:18px}.mode-current{font-size:14px}} /* Sequential exchange pages and compact paired comparisons. */ .workflow{display:flex!important;gap:8px!important;overflow-x:auto;padding-bottom:7px;scrollbar-width:thin}.workflow-step{flex:1;min-width:135px;gap:10px;padding:16px 14px}.workflow-step>span{font-size:14px}.workflow-step small,.workflow-step i{display:none} .category-row[hidden]{display:none!important}.category-row{min-height:180px}.paired-comparisons{grid-column:2/-1;min-width:0}.exchange-pair{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:stretch;border-bottom:1px solid #344752}.exchange-pair:last-child{border-bottom:0}.paired-before,.paired-after{min-width:0;padding:14px}.pair-arrow{display:flex;align-items:center;justify-content:center;color:#9caeb9}.paired-comparisons .comparison-item{height:100%;margin:0;min-height:60px}.paired-before .placeholder,.paired-after .placeholder{font-size:13px}.exchange-pair .comparison-item strong{overflow-wrap:anywhere}.skill-completed{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important}.skill-grade-table{grid-column:2/-1;min-width:0}.skill-grade-head,.skill-grade-row{display:grid;grid-template-columns:145px minmax(0,1fr) minmax(0,1fr)}.skill-grade-head{background:#2b3c47;color:#d2dbe0;font-size:13px;font-weight:700}.skill-grade-head>span{padding:14px}.skill-grade-head>span:nth-child(2){color:#f07777}.skill-grade-head>span:nth-child(3){color:#e6c16b}.skill-grade-row{border-top:1px solid #344752;min-height:88px}.skill-grade-label{padding:17px 12px;background:#20303c;display:flex;flex-direction:column;justify-content:center;gap:7px}.skill-grade-label strong{font-size:14px}.skill-grade-label small{font-size:11px;color:#acbbc5}.skill-grade-row.hero .skill-grade-label strong{color:#f25e64}.skill-grade-row.legend .skill-grade-label strong{color:#ca76ec}.skill-grade-row.myth .skill-grade-label strong{color:#eed05b}.skill-grade-icons{padding:12px;display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:9px;border-left:1px solid #344752}.skill-grade-icons .skill-plan-icon{width:48px}.skill-grade-icons .skill-plan-icon img{display:block}.skill-plan-icon>span{font-style:normal}.no-selection{color:#788b98;font-size:13px}#review-rows .category-intro .category-icon{display:none}#review-rows .category-intro{padding:15px}#review-rows .category-row{min-height:0}.skill-completed .category-intro{align-items:flex-start;padding-top:22px}#wizard-items .comparison-header{display:none}.wizard-panel{min-height:0}#picker-tabs{display:none} @media(max-width:900px){.workflow-step{min-width:112px;padding:13px 10px}.workflow-step>span{font-size:12px}.workflow-step>b{width:24px;height:24px;min-width:24px}.category-row{display:block!important}.category-row[hidden]{display:none!important}.category-intro{padding:14px!important;border-bottom:1px solid #344752;min-height:0!important}.category-intro>div{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.category-intro h3{font-size:15px;margin:0}.category-intro small{font-size:11px}.category-intro .change-button{margin:0 0 0 auto;min-height:36px;padding:8px 12px}.category-intro .category-icon{display:none}.paired-comparisons{width:100%}.exchange-pair{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.paired-before,.paired-after{padding:10px 7px}.paired-comparisons .comparison-item{display:flex!important;flex-wrap:wrap;align-content:flex-start;gap:7px;min-height:80px;padding:0!important}.paired-comparisons .comparison-item>.tile{width:38px;height:42px;min-width:38px}.paired-comparisons .comparison-item>div{flex:1;min-width:62px}.paired-comparisons .comparison-item strong{font-size:12px!important;line-height:1.5}.paired-comparisons .item-exchange-cost{margin:0;font-size:11px}.paired-comparisons .item-exchange-cost small{font-size:9px}.paired-comparisons .remove-button{margin-left:auto}.skill-completed{display:block!important}.skill-grade-head,.skill-grade-row{grid-template-columns:83px minmax(0,1fr) minmax(0,1fr)}.skill-grade-head>span{padding:11px 7px;font-size:11px}.skill-grade-label{padding:10px 7px;gap:5px}.skill-grade-label strong{font-size:12px}.skill-grade-label small{font-size:10px;line-height:1.5}.skill-grade-icons{padding:9px 6px;gap:5px}.skill-grade-icons .skill-plan-icon{width:39px}.skill-grade-icons .skill-plan-icon img{width:35px;height:35px}.skill-plan-icon>span{height:13px;font-size:9px}.skill-grade-row{min-height:74px}#review-rows .category-intro{padding:12px!important}} #wizard-items .equipment-heading,#wizard-items .rarity-legend,#wizard-items .compare-heading{display:none!important}#wizard-items .category-intro:before,.review-rows .category-intro:before{display:none!important}.paired-comparisons:before{content:'변경 전　　　　　　　　　변경 후';display:block;text-align:center;font-size:12px;color:#bccbd4;padding:10px;background:#293b47}.skill-completed .category-intro{border:0!important;background:transparent!important}#wizard-items .skill-completed{border:1px solid #40535e;padding:0!important;gap:0!important}#wizard-items .skill-grade-table{background:#192731}@media(min-width:901px){.category-row.skill-completed{grid-template-columns:150px minmax(0,1fr)!important}.paired-comparisons:before{content:'변경 전　　　　　　　　　　　　　　　　　　　　　　　변경 후'}} .paired-comparisons:before{display:none}.pair-heading{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;font-weight:700;padding:12px;background:#293b47}.pair-heading>span:first-child{color:#efa8a1}.pair-heading>span:last-child{color:#f2d9a1}@media(max-width:600px){.skill-grade-row{min-height:64px}.skill-grade-label{padding:7px}.skill-grade-icons{padding:7px 6px}.wizard-heading{padding-bottom:14px!important}.game-heading{padding:14px!important}.game-heading h2{font-size:18px!important}.game-heading .cost-heading{font-size:14px}.wizard-panel{padding:16px 12px!important}.skill-completed .category-intro{padding:10px!important}.skill-completed .category-intro h3{display:none}.category-row.skill-completed{padding:0!important}#wizard-items .category-intro{min-height:0!important}.workflow-step{flex-direction:row!important;align-items:center!important;min-width:120px!important}.workflow-step>b{margin:0!important}.workflow-step>span{line-height:1.4}} .category-row.skill-completed:not([hidden]){display:block!important}.skill-completed>.category-intro{display:flex!important;min-height:0!important;padding:12px 16px!important;border-bottom:1px solid #344752!important}.skill-completed>.category-intro>.category-icon{display:none}.skill-completed>.category-intro>div{display:flex;flex:1;align-items:center;gap:12px}.skill-completed .category-intro h3{margin:0}.skill-completed .category-intro small{margin:0}.skill-completed .category-intro .change-button{margin:0 0 0 auto}.skill-grade-row{min-height:76px}@media(max-width:600px){.skill-grade-row{min-height:62px}}