@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f1eddf;
  --muted: #b0b39b;
  --dim: #5e6c63;
  --bg: #0c1310;
  --panel: #141f1a;
  --panel2: #1b2922;
  --line: #31443a;
  --yellow: #ffe06b;
  --green: #97e37d;
  --red: #ff6472;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --sans: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --display: 'Black Han Sans', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); min-height: 100vh;
  background: radial-gradient(ellipse at 75% 4%, rgba(108,69,47,.22), transparent 34%),
    linear-gradient(135deg, #171714 0%, #151b16 48%, #111410 100%);
}
button, input { font: inherit; }
button { color: inherit; }
.scanlines { pointer-events: none; position: fixed; z-index: 10; inset: 0; opacity: .11; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.22) 4px); }
.shell { max-width: 1500px; margin: auto; padding: 0 30px 34px; }
.topbar { height: 78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(143,173,148,.19); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--yellow); color:var(--yellow); font:700 13px var(--mono); box-shadow:3px 3px 0 #c74d4d; transform:skew(-4deg); background:#27301e; }
.brand-mark { overflow:hidden; border:1px solid color-mix(in srgb,var(--role-accent,#97e37d) 52%,#647160); border-radius:3px; box-shadow:none; transform:none; background:#182019; }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.brand b { display:block; font-size:15px; letter-spacing:.02em; }
.brand small { display:block; margin-top:3px; color:var(--muted); font:10px var(--mono); letter-spacing:.13em; }
.top-status { color:#9cad9e; font:11px var(--mono); letter-spacing:.075em; }
.status-dot,.live-badge span { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--green); border-radius:50%; box-shadow:0 0 9px rgba(116,213,139,.8); }
.top-divider { color:#435348; margin:0 12px; }
.mobile-menu { display:none; border:1px solid var(--line); background:transparent; border-radius:4px; padding:8px 11px; }
.layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:38px; }
.sidebar { padding-top:26px; position:sticky; top:0; align-self:start; max-height:calc(100vh - 20px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#3b5144 transparent; }
.side-heading { display:flex; align-items:center; justify-content:space-between; padding:0 10px 14px; }
.tiny-label,.section-kicker,.nav-caption { color:#809388; font:10px var(--mono); letter-spacing:.13em; }
.side-count { color:var(--yellow); font:11px var(--mono); }
.search-box { display:flex; align-items:center; gap:9px; padding:0 11px; height:38px; margin-bottom:23px; border:1px solid #304238; background:#121b16; color:#7b8b80; }
.search-box span { font:22px var(--mono); line-height:1; }
.search-box input { width:100%; color:var(--ink); border:0; outline:0; background:transparent; font-size:12px; }
.search-box input::placeholder { color:#66756b; }
.nav-group { margin-bottom:22px; }
.nav-caption { padding:0 10px 9px; }
.nav-list { display:grid; gap:4px; }
.nav-item { width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid transparent; background:transparent; color:#9aaba0; cursor:pointer; text-align:left; font-size:12px; transition:background .15s,border-color .15s,color .15s; }
.nav-item:hover { background:#18241d; color:var(--ink); }
.nav-item.active { background:#1d2c23; border-color:#506744; color:var(--yellow); box-shadow:inset 3px 0 0 var(--yellow); }
.nav-icon { width:22px; height:22px; display:grid; place-items:center; border:1px solid #3d5145; color:#a8bd9f; font:10px var(--mono); background:#111a15; }
.nav-icon.nav-portrait-wrap { width:25px; height:31px; overflow:hidden; border:1px solid #6a7552; background:#273322; }
.nav-portrait { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; image-rendering:pixelated; }
.nav-item.active .nav-icon { color:var(--yellow); border-color:#819445; }
.nav-item .nav-arrow { margin-left:auto; color:#596a5e; font:12px var(--mono); }
.utility-group { padding-top:4px; border-top:1px solid rgba(143,173,148,.13); }
.side-foot { display:flex; align-items:center; gap:8px; padding:16px 10px; color:#65756a; font:9px var(--mono); letter-spacing:.08em; }
.mini-pixel { width:7px; height:7px; background:var(--red); box-shadow:5px 0 var(--yellow),0 5px var(--green); }
.main-content { min-width:0; padding:28px 0 0; }
.hero-card { position:relative; min-height:255px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:32px 38px; border:2px solid #657347; background:linear-gradient(110deg,rgba(33,48,33,.98),rgba(28,39,29,.96) 54%,rgba(54,42,31,.88)); box-shadow:6px 6px 0 rgba(0,0,0,.3); }
.hero-card::before { content:""; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(224,232,177,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(224,232,177,.24) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(90deg,black,transparent 88%); }
.hero-copy { position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; color:#a1b3a1; font:10px var(--mono); letter-spacing:.15em; }
.eyebrow-line { width:22px; height:2px; background:var(--red); }
h1 { margin:13px 0 9px; font:42px/1.08 var(--display); letter-spacing:.015em; color:#f0f5e7; text-shadow:2px 2px 0 #29392b; }
h1 em { color:var(--yellow); font-style:normal; }
.hero-copy p { margin:0; color:#a0afa2; font-size:12px; }
.hero-tags { display:flex; gap:7px; margin-top:17px; }
.tag { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border:1px solid #455b4b; color:#9faf9f; font:9px var(--mono); letter-spacing:.06em; }
.tag-red { border-color:#804d42; color:#f39a83; }
.hero-art { width:280px; height:260px; position:absolute; right:20px; top:0; display:grid; place-items:center; }
.hero-card.utility-hero h1 { max-width:620px; font-size:36px; }
.hero-card.utility-hero .hero-copy { max-width:100%; }
.hero-card.utility-hero .hero-art { display:none; }
.hero-card.utility-hero .art-label { top:0; right:0; border-left-color:#49c5a9; }
.hero-card.score-hero .art-label { top:20px; right:0; max-width:190px; border-left-color:#d3ba50; }

.aooni-sprite { position:relative; z-index:1; width:104px; height:auto; image-rendering:pixelated; filter:drop-shadow(0 5px 4px rgba(0,0,0,.65)); }
.role-sprite { position:relative; z-index:1; width:111px; height:186px; object-fit:contain; object-position:center bottom; image-rendering:pixelated;  }
.art-label { position:absolute; z-index:2; right:-8px; top:20px; max-width:112px; padding:6px 8px; background:rgba(15,20,14,.92); border-left:3px solid var(--red); color:#92a294; font:8px/1.5 var(--mono); letter-spacing:.08em; }
.art-label span { display:block; color:#a5b399; font-size:7px; }
.art-label b { display:block; margin-top:2px; color:var(--yellow); font:700 10px/1.25 var(--sans); letter-spacing:0; }
.hero-index { position:absolute; right:17px; bottom:12px; color:#829486; font:9px var(--mono); letter-spacing:.1em; }
.hero-index b { color:var(--yellow); font-size:12px; margin-left:5px; }
.hero-index span { color:#596b5f; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:30px 0 14px; }
.section-heading h2 { margin:4px 0 0; font-size:19px; letter-spacing:-.025em; }
.reset-button { padding:8px 11px; color:#9caca0; border:1px solid #405247; background:#131c17; cursor:pointer; font-size:11px; }
.reset-button:hover { border-color:#8e9b4e; color:var(--yellow); }
.reset-button span { font-size:15px; margin-right:4px; }
.input-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.input-grid.utility-input-grid { grid-template-columns:1fr; }
.utility-input-grid .input-card { width:100%; }
.input-grid.time-score-input-grid { grid-template-columns:1fr; }
.time-score-input-grid .input-card { width:100%; max-width:100%; }
.utility-input-grid .input-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-flow:row; gap:0 18px; }
.utility-input-grid .input-row { grid-column:auto; grid-template-columns:max-content minmax(0,218px); justify-content:start; gap:8px; }
.utility-input-grid .input-row[data-address="C4"],.utility-input-grid .input-row[data-address="C9"] { grid-template-columns:96px minmax(0,218px); gap:8px; }
.utility-input-grid .input-row[data-address="C6"],.utility-input-grid .input-row[data-address="C7"] { grid-template-columns:44px minmax(0,218px); gap:4px; }
.utility-input-grid .input-row[data-address="C10"],.utility-input-grid .input-row[data-address="C12"],.utility-input-grid .input-row[data-address="C11"],.utility-input-grid .input-row[data-address="C13"] { grid-template-columns:138px 42px; gap:4px; }
.utility-input-grid .input-cell { width:100%; min-width:0; }
.utility-input-grid .input-row[data-address="C4"] { grid-area:1/1; }
.utility-input-grid .input-row[data-address="C9"] { grid-area:2/1; }
.utility-input-grid .input-row[data-address="C6"] { grid-area:1/2; }
.utility-input-grid .input-row[data-address="C7"] { grid-area:2/2; }
.utility-input-grid .input-row[data-address="C10"] { grid-area:3/1; }
.utility-input-grid .input-row[data-address="C11"] { grid-area:3/2; }
.utility-input-grid .input-row[data-address="C12"] { grid-area:4/1; }
.utility-input-grid .input-row[data-address="C13"] { grid-area:4/2; }
.utility-input-grid .input-row[data-address^="C1"] .input-cell { width:42px; min-width:42px; }
.input-card { min-width:0; border:1px solid #46533b; border-top:2px solid #d0a749; background:linear-gradient(145deg,#20291d,#161c16); box-shadow:3px 3px 0 rgba(0,0,0,.16); }
.input-card-head { min-height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; border-bottom:1px solid #2a3b30; color:#dae6d8; font-size:12px; font-weight:700; }
.card-icon { width:19px; height:19px; display:grid; place-items:center; border:1px solid #5c704c; color:var(--yellow); font:10px var(--mono); }
.input-card-head small { margin-left:auto; color:#718176; font:9px var(--mono); letter-spacing:.07em; }
.input-list { padding:4px 13px 9px; }
.input-row { display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:center; gap:10px; min-height:45px; border-bottom:1px solid rgba(152,161,119,.16); }
.input-row:focus-within .input-label { color:#9fb9a8; }
.input-row:last-child { border-bottom:0; }
.input-label-wrap { min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; }
.input-label { overflow:hidden; color:#aebcaf; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.rarity-legend { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.rarity-badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 5px; border:1px solid currentColor; border-radius:2px; font-size:8px; line-height:1.2; white-space:nowrap; }
.rarity-normal { color:#d0d5d8; background:rgba(208,213,216,.10); }
.rarity-advanced { color:#67b8ff; background:rgba(70,157,235,.12); }
.rarity-hero { color:#c28aff; background:rgba(159,92,220,.14); }
.rarity-legendary { color:#ffca57; background:rgba(230,168,47,.15); }
.input-cell { position:relative; }
.toggle-switch { position:relative; display:block; width:42px; height:24px; padding:0; border:1px solid #53604c; border-radius:99px; background:#283027; cursor:pointer; transition:background .16s,border-color .16s; }
.toggle-switch::after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#a3aea2; transition:transform .16s,background .16s; }
.toggle-switch.is-on { border-color:#86bd79; background:#42633d; }
.toggle-switch.is-on::after { transform:translateX(18px); background:#e6f4b0; }
.toggle-switch:focus-visible { outline:2px solid #83a991; outline-offset:2px; }
.input-cell input { width:100%; min-width:0; height:34px; padding:0 7px; color:var(--yellow); border:1px solid #525b3e; outline:0; background:#11160f; text-align:center; font:12px var(--mono); appearance:textfield; }
.input-cell input::-webkit-inner-spin-button,.input-cell input::-webkit-outer-spin-button { appearance:none; margin:0; }
.input-cell input:focus { border-color:#83a991; box-shadow:0 0 0 2px rgba(112,164,132,.20); }
.stepper { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; gap:4px; }
.step-button { width:32px; height:34px; padding:0; border:1px solid #626d45; background:#303a27; color:#b2c5b7; font:700 17px var(--mono); cursor:pointer; }
.step-button:hover { border-color:#83a991; background:#344b3e; color:#e1f2e6; }
.step-button:active { transform:translateY(1px); }
.step-button:focus-visible,.reset-button:focus-visible,.nav-item:focus-visible { outline:2px solid #83a991; outline-offset:2px; }
.empty-input { padding:12px 14px; color:#78877c; font-size:11px; }
.results-section { margin-top:34px; }
.result-heading { margin-bottom:15px; }
.live-badge { padding:5px 8px; border:1px solid #3c6249; color:#88d49b; font:9px var(--mono); letter-spacing:.1em; }
.live-badge span { width:6px; height:6px; margin-right:5px; }
.result-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-bottom:13px; }
.utility-result-shell { border:0; background:transparent; overflow:visible; }
.utility-result-values { display:grid; grid-template-columns:1fr; gap:6px; justify-items:center; }
.utility-result-value { display:flex; align-items:baseline; justify-content:center; gap:14px; width:min(100%,520px); padding:12px 4px; border-bottom:1px solid rgba(152,161,119,.25); }
.utility-result-value span { color:#aebcaf; font-size:13px; }
.utility-result-value strong { color:var(--yellow); font:700 24px var(--mono); }
.summary-card { position:relative; padding:12px 14px; border:1px solid #384c3d; background:#142019; overflow:hidden; }
.summary-card::after { content:""; position:absolute; width:22px; height:22px; right:-1px; bottom:-1px; border-right:2px solid #788c4e; border-bottom:2px solid #788c4e; }
.summary-label { display:block; color:#899b8c; font-size:10px; }
.summary-value { display:block; margin-top:5px; color:var(--yellow); font:600 20px var(--mono); }
.summary-unit { color:#809184; font:9px var(--mono); }
.table-shell { border:1px solid #35483b; background:#111a15; }
.table-scroll { overflow:auto; max-height:520px; }
.result-table { width:100%; min-width:600px; border-collapse:collapse; font-size:11px; }
.result-table th { position:sticky; top:0; z-index:1; padding:10px 11px; border-bottom:1px solid #4b604d; background:#1d2b22; color:#bbccbb; text-align:right; font:10px var(--mono); white-space:nowrap; }
.result-table th:first-child,.result-table td:first-child { min-width:150px; text-align:left; }
.result-table td { padding:9px 11px; border-bottom:1px solid rgba(112,139,118,.14); color:#a6b6a7; text-align:right; white-space:nowrap; }
.result-table td:first-child { color:#d0decf; font-weight:600; }
.result-table tr:hover td { background:rgba(116,213,139,.045); }
.result-table .numeric-result { color:#d8ef84; font-family:var(--mono); }
.result-table .result-primary td { background:rgba(212,239,104,.055); }
.result-table .result-primary td:first-child { color:var(--yellow); }
.ranger-result-section { margin:0 0 18px; overflow-x:auto; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.13)); }
.ranger-result-title { margin:0; padding:12px 15px; border-bottom:1px solid color-mix(in srgb,var(--role-accent) 45%,#343434); background:color-mix(in srgb,var(--role-accent) 13%,#1d1d1d); color:#f3f5f2; font-size:13px; letter-spacing:.025em; }
.ranger-result-table { min-width:480px; }
.ranger-result-table th { text-align:center; }
.ranger-result-table th:first-child { text-align:left; }
.ranger-result-table td.numeric-result { color:#f1ce82; font-size:14px; font-weight:700; }
.ranger-result-table tr:nth-child(even) td { background:rgba(255,255,255,.022); }
.ranger-result-table .dps-unit { display:none; }
.ranger-result-table .ranger-result-divider td { border-top:2px solid color-mix(in srgb,var(--role-accent) 42%,#343434); }
.ranger-result-section:last-child { margin-bottom:0; }
.fireman-result-section { margin:0 0 18px; overflow-x:auto; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.13)); }
.fireman-result-title { margin:0; padding:12px 15px; border-bottom:1px solid color-mix(in srgb,var(--role-accent) 45%,#343434); background:color-mix(in srgb,var(--role-accent) 13%,#1d1d1d); color:#f3f5f2; font-size:13px; }
.fireman-result-table { min-width:460px; }
.fireman-result-table th { text-align:center; }
.fireman-result-table th:first-child { text-align:left; }
.fireman-result-table td.numeric-result { color:#f1ce82; font-size:14px; font-weight:700; }
.fireman-result-section:last-child { margin-bottom:0; }
.ranger-current-card { border-top:3px solid color-mix(in srgb,var(--role-accent) 75%,#fff); }
.ranger-current-title { color:#f0d19c; font-size:12px; font-weight:700; }
.ranger-current-metrics { display:grid; gap:5px; margin-top:9px; }
.ranger-current-metric { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:5px; border-top:1px solid rgba(255,255,255,.08); color:#a9b4a9; font-size:10px; }
.ranger-current-metric strong { color:#f1ce82; font:600 14px var(--mono); white-space:nowrap; }
.ranger-current-metric.ranger-metric-basic strong { color:#ffe07a; }
.ranger-current-metric.ranger-metric-critical strong { color:#c7a3ff; }
.range-group-row th { background:color-mix(in srgb,var(--role-accent) 28%,#202020); border-bottom-color:color-mix(in srgb,var(--role-accent) 58%,#343434); }
.range-group-row .range-group-heading { text-align:center; color:#f2eee7; font:600 11px var(--sans); letter-spacing:.08em; }
.range-group-row + tr th { top:38px; background:color-mix(in srgb,var(--role-accent) 19%,#202020); }
#resultTable .result-table th + th,#resultTable .result-table td + td { border-left:1px solid color-mix(in srgb,var(--role-accent) 76%,#555); }
#resultTable .dps-unit { margin-left:4px; color:color-mix(in srgb,var(--role-accent) 68%,#b7c1b8); font:8px var(--mono); white-space:nowrap; }
@media (min-width:1200px) {
  #resultTable .result-table { width:100%; min-width:0; table-layout:fixed; font-size:13px; }
  #resultTable .result-table th:first-child,#resultTable .result-table td:first-child { width:180px; min-width:0; }
  #resultTable .result-table th:not(:first-child) { padding:12px 4px; text-align:center; font-size:11px; }
  #resultTable .result-table td:not(:first-child) { padding:12px 3px; text-align:center; }
  #resultTable .result-table .numeric-result { font-size:15px; }
  #resultTable .dps-unit { display:block; margin:2px 0 0; font-size:8px; }
  #resultSummary .summary-label { font-size:11px; }
  #resultSummary .summary-value { font-size:24px; }
}
.empty-results { padding:22px; color:#859388; text-align:center; font-size:12px; }
.result-note { margin:9px 0 0; color:#75867a; font-size:10px; }
.footer { display:flex; width:min(100%,560px); flex-direction:column; gap:9px; margin:37px auto 0; padding-top:15px; border-top:1px solid rgba(143,173,148,.17); text-align:center; }
.footer-store-link,.footer-info-panel { border:1px solid rgba(143,173,148,.2); border-radius:5px; background:rgba(6,10,9,.46); }
.footer-store-link { display:flex; min-height:68px; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#8ab4f8; text-decoration:none; }
.footer-store-link span { font-size:13px; }
.footer-store-link b { color:#c5d5ef; font-size:10px; font-weight:500; }
.footer-store-link:hover { border-color:rgba(138,180,248,.55); background:rgba(6,10,9,.7); }
.footer-info-panel { padding:13px 16px 11px; }
.footer-info-panel p { margin:0; color:#a9b5ac; font-size:10px; line-height:1.6; }
.footer-local-note { padding-bottom:10px; border-bottom:1px solid rgba(143,173,148,.17); }
.footer-unofficial { padding-top:9px !important; }
.footer-source { color:#76877b !important; }
.footer-source a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-privacy-link { display:inline-block; margin-top:4px; color:#9bb7a2; font-size:10px; text-underline-offset:3px; }
.main-page { color-scheme:dark; min-height:100vh; background:linear-gradient(135deg,#171918 0%,#111 48%,#0b0c0c 100%); color:#ededeb; font-family:Arial,'Malgun Gothic',sans-serif; }
.main-page .shell { max-width:840px; padding:0 28px 28px; }
.main-page .topbar { border-bottom:1px solid #30302e; }
.main-page .topbar { justify-content:flex-end; gap:16px; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding-top:12px; }
.site-nav a { color:#a5a59e; font-size:11px; text-decoration:none; }
.site-nav a:hover { color:#ededeb; text-decoration:underline; text-underline-offset:3px; }
.main-page[data-theme="light"] .site-nav a { color:#686963; }
.main-page[data-theme="light"] .site-nav a:hover { color:#292a27; }
.theme-toggle { flex:none; padding:8px 11px; border:1px solid #454542; border-radius:3px; background:transparent; color:#d5d5d0; font:inherit; font-size:12px; cursor:pointer; }
.theme-toggle:hover { border-color:#8b8b84; }
.notice-button,.calculator-notice-link { display:inline-flex; flex:none; align-items:center; justify-content:center; min-height:33px; padding:7px 11px; border:1px solid #454542; border-radius:3px; background:transparent; color:#d5d5d0; font:inherit; font-size:12px; text-decoration:none; cursor:pointer; }
.notice-button:hover,.calculator-notice-link:hover { border-color:#a7a69e; background:rgba(255,255,255,.06); }
.main-page .brand { color:#ededeb; }
.main-page .brand b { font-size:14px; font-weight:600; }
.main-home-shell { display:flex; min-height:100vh; flex-direction:column; }
.main-home { display:flex; flex:1; flex-direction:column; padding-top:clamp(90px,13vh,140px); }
.main-home-hero { position:relative; width:100%; margin:0; padding:0; border:0; background:none; box-shadow:none; }
.main-home-hero::before { display:none; }
.main-home-portrait-stack { position:absolute; top:-94px; right:8px; width:224px; height:210px; background:radial-gradient(ellipse at 55% 62%,rgba(215,183,92,.16),transparent 70%); pointer-events:none; }
.main-home-portrait-stack::after { content:""; position:absolute; right:0; bottom:0; display:block; width:210px; height:208px; background:url("assets/roles/큐어.png") center/contain no-repeat; filter:drop-shadow(0 8px 15px rgba(0,0,0,.3)); }
.main-home-hero h1 { width:fit-content; max-width:calc(100% - 235px); margin:0; color:#f2f2f0; font-family:Arial,'Malgun Gothic',sans-serif; font-size:38px; font-weight:700; line-height:1.18; letter-spacing:-.035em; text-shadow:none; }
.main-home-korean-title { width:fit-content; max-width:100%; margin:11px 0 0; color:#d4d4d0; font-size:23px; font-weight:700; line-height:1.4; letter-spacing:.015em; }
.main-home-tools { display:grid; width:100%; gap:12px; margin-top:30px; }
.main-home-tools > a,.main-home-score-links a { display:grid; grid-template-columns:54px minmax(0,1fr) 20px; align-items:center; gap:15px; min-height:88px; padding:15px 20px; border:1px solid #454542; border-radius:3px; background:rgba(255,255,255,.025); color:#ededeb; font-size:18px; font-weight:600; text-decoration:none; transition:background .18s,border-color .18s,transform .18s; }
.main-home-tools > a:hover,.main-home-score-links a:hover { border-color:#a7a69e; background:rgba(255,255,255,.075); transform:translateY(-1px); }
.main-home-tools > a > .main-home-icon { display:block; width:48px; height:54px; background-position:center; background-size:contain; background-repeat:no-repeat; image-rendering:pixelated; }
.main-home-icon-archer { background-image:url("assets/roles-dot/아처.png"); }
.main-home-tools > a > span:not(.main-home-xp-mark) { display:block; }
.main-home-tools > a small { display:block; margin-top:5px; color:#92928e; font-size:12px; font-weight:400; }
.main-home-tools > a > b,.main-home-score-links a > b { color:#a3a39c; font-size:22px; font-weight:400; text-align:center; }
.main-home-xp-mark { display:grid; width:48px; height:48px; align-content:center; border:1px solid rgba(238,196,74,.48); color:#f1cc54; font-size:13px; line-height:1.15; text-align:center; }
.main-home-score-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:5px; }
.main-home-score-links > span { grid-column:1/-1; color:#92928e; font-size:12px; }
.main-home-score-links a { grid-template-columns:68px minmax(0,1fr) 18px; gap:13px; min-height:96px; padding:13px 14px; font-size:14px; }
.main-home-score-links a > .main-home-score-icon { display:block; width:64px; height:68px; background-position:center; background-size:contain; background-repeat:no-repeat; image-rendering:pixelated; }
.main-home-score-icon-fury { background-image:url("assets/bosses/fury-portrait.png"); }
.main-home-score-icon-queen { background-image:url("assets/bosses/doctor-queen-portrait.png"); }
.main-page [hidden] { display:none !important; }
.main-home-footer { width:100%; margin:auto 0 0; padding:12px 0 0; border-top:1px solid #30302e; }
.main-home-footer .footer-info-panel { padding:0; border:0; border-radius:0; background:none; }
.site-footer { width:min(100%,900px); margin:44px auto 12px; padding-top:12px; border-top:1px solid rgba(143,173,148,.2); text-align:center; }
.main-home-footer.site-footer { width:100%; margin:auto 0 0; }
.site-footer-copy { margin-bottom:8px; }
.site-footer-copy p { margin:0 0 4px; color:#898985; font-size:10px; line-height:1.6; }
.site-footer-copy a { color:inherit; text-underline-offset:2px; }
.main-home-links { display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; padding-bottom:0; border-bottom:0; }
.main-home-links a { color:#cececa; font-size:10px; text-decoration:none; }
.main-home-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.footer-play-link { margin:0 0 7px; text-align:center; }
.footer-play-link a { color:#cececa; font-size:10px; text-decoration:none; }
.footer-play-link a:hover { text-decoration:underline; text-underline-offset:3px; }
.site-footer-copy.footer-disclaimer { margin:8px 0 0; }
.site-footer-copy .footer-source { margin:2px 0 0; color:#73736f; font-size:9px; line-height:1.5; }
.main-home-footer .footer-unofficial { margin:8px 0 0; color:#898985 !important; font-size:11px; line-height:1.6; }
.main-home-footer .site-footer-copy .footer-source { margin:2px 0 0; color:#73736f !important; font-size:9px; line-height:1.5; }
.main-home-footer .footer-play-link a { color:#cececa; }
.main-home-footer .footer-source a { color:inherit; }
.main-page[data-theme="light"] { color-scheme:light; background:linear-gradient(135deg,#fff 0%,#f5f5f3 52%,#e9e9e5 100%); color:#292a27; }
.main-page[data-theme="light"] .topbar,.main-page[data-theme="light"] .main-home-footer { border-color:#d9d9d5; }
.main-page[data-theme="light"] .main-home-tools > a,.main-page[data-theme="light"] .main-home-score-links a { border-color:#d1d1cb; background:rgba(255,255,255,.58); color:#292a27; }
.main-page[data-theme="light"] .main-home-tools > a:hover,.main-page[data-theme="light"] .main-home-score-links a:hover { border-color:#8f9088; background:#fff; }
.main-page[data-theme="light"] .main-home-hero h1 { color:#292a27; }
.main-page[data-theme="light"] .main-home-korean-title { color:#42433e; }
.main-page[data-theme="light"] .theme-toggle { border-color:#c9c9c4; color:#33342f; }
.main-page[data-theme="light"] .notice-button { border-color:#c9c9c4; color:#33342f; }
.main-page[data-theme="light"] .notice-button:hover { border-color:#777870; background:#fff; }
.main-page[data-theme="light"] .theme-toggle:hover { border-color:#777870; }
.main-page[data-theme="light"] .main-home-score-links span { color:#777870; }
.main-page[data-theme="light"] .main-home-links a { color:#4a4b45; }
.main-page[data-theme="light"] .main-home-footer .footer-play-link a { color:#4a4b45; }
.main-page[data-theme="light"] .main-home-footer .footer-unofficial,.main-page[data-theme="light"] .main-home-footer .footer-source { color:#686963 !important; }
.main-page[data-theme="light"] .site-footer-copy p { color:#686963; }
.main-page .main-home-korean-title { background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.main-page:not([data-theme="light"]) .main-home-korean-title { background-image:linear-gradient(90deg,#ff9238 0%,#ffc64e 62%,#ffe079 100%); }
.main-page[data-theme="light"] .main-home-korean-title { background-image:linear-gradient(90deg,#87390b 0%,#795000 100%); }
.privacy-home-link { display:inline-flex; align-items:center; color:#c7d8cd; text-decoration:none; }
.privacy-page { max-width:900px; margin:38px auto 0; }
.privacy-page .section-heading { margin-top:0; }
.privacy-page h1 { margin:5px 0 0; font-size:30px; }
.privacy-panel { padding:24px 28px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(27,41,34,.94),rgba(15,23,19,.94)); box-shadow:0 15px 40px rgba(0,0,0,.16); }
.privacy-panel section { margin-top:24px; }
.privacy-panel h2 { margin:0 0 9px; color:var(--yellow); font-size:15px; }
.privacy-panel p { margin:0 0 9px; color:#b2bdb3; font-size:13px; line-height:1.8; }
.privacy-panel a,.privacy-footer a { color:#c0d7c7; text-underline-offset:3px; }
.privacy-intro { padding-bottom:17px; border-bottom:1px solid rgba(143,173,148,.2); color:#e1e8df !important; }
.privacy-panel .privacy-date { margin:24px 0 0; padding-top:13px; border-top:1px solid rgba(143,173,148,.2); color:#87988b; font-size:11px; }
.privacy-footer { padding:16px 0 10px; text-align:center; }
.privacy-footer a { color:#84978a; font-size:11px; }
.hidden { display:none !important; }

@media (max-width: 1000px) {
  .shell { padding:0 20px 28px; }
  .layout { grid-template-columns:215px minmax(0,1fr); gap:24px; }
  .hero-art { right:9px; opacity:.82; }
  .hero-copy { max-width:65%; }
  h1 { font-size:36px; }
}
@media (max-width: 760px) {
  .shell { padding:0 14px 24px; }
  .topbar { height:66px; }
  .top-status { font-size:9px; }
  .mobile-menu { display:block; }
  .layout { display:block; }
  .sidebar { display:none; position:absolute; z-index:8; top:66px; left:12px; right:12px; max-height:70vh; padding:16px; border:1px solid #405548; background:#101914; box-shadow:0 18px 35px #000a; }
  .sidebar.open { display:block; }
  .main-content { padding-top:17px; }
  .hero-card { min-height:218px; padding:25px 22px; }
  .hero-art { width:215px; height:225px; right:-9px; top:12px; opacity:.72; transform:scale(.86); }
  .hero-copy { max-width:80%; }
  h1 { font-size:34px; }
  .hero-card.utility-hero h1 { max-width:none; font-size:24px; line-height:1.25; }
  .hero-card.utility-hero .hero-copy { max-width:100%; padding-right:0; }
  .hero-card.utility-hero .hero-art { display:none; }

  .hero-copy p { max-width:230px; line-height:1.6; }
  .section-heading { margin-top:25px; }
  .input-grid { grid-template-columns:1fr; }
  .utility-input-grid .input-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
  .utility-input-grid .input-row[data-address] { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:center; gap:6px; min-height:76px; padding:8px 2px; }
  .utility-input-grid .input-row[data-address] .input-label-wrap { width:100%; overflow:visible; }
  .utility-input-grid .input-row[data-address] .input-label { white-space:normal; line-height:1.3; }
  .utility-input-grid .input-row[data-address] .input-cell { width:100%; min-width:0; }
  .utility-input-grid .input-row[data-address^="C1"] .input-cell { width:42px; min-width:42px; }
  .skill-stat-grid { gap:7px; padding:9px; }
  .skill-stat-card { padding:9px 10px 7px; }
  .skill-stat-row { font-size:10px; }
  .skill-stat-row strong { font-size:13px; }
  .result-table { min-width:520px; }
  .footer { width:100%; margin-top:28px; }
  .footer-info-panel { padding-inline:12px; }
  .main-page .shell { padding-inline:20px; }
  .main-page .brand b { font-size:12px; }
  .theme-toggle { padding:7px 9px; font-size:11px; }
  .main-home { padding-top:72px; }
  .main-home-portrait-stack { top:-28px; right:0; width:126px; height:142px; }
  .main-home-portrait-stack::after { width:124px; height:140px; }
  .main-home-hero h1 { max-width:calc(100% - 136px); font-size:30px; }
  .main-home-korean-title { font-size:20px; }
  .main-home-tools { margin-top:24px; }
  .main-home-tools > a { grid-template-columns:44px minmax(0,1fr) 16px; gap:10px; min-height:76px; padding:12px; font-size:15px; }
  .main-home-tools > a > .main-home-icon { width:42px; height:48px; }
  .main-home-tools > a small { font-size:10px; }
  .main-home-score-links { grid-template-columns:1fr; }
  .main-home-score-links a { grid-template-columns:64px minmax(0,1fr) 18px; gap:12px; min-height:88px; font-size:14px; }
  .main-home-score-links a > .main-home-score-icon { width:60px; height:64px; }
  .main-home-footer { margin-top:76px; }
  .main-home-links { gap:10px 18px; }
  .site-nav { gap:10px 14px; }
  .site-nav a { font-size:10px; }
  .privacy-page { margin-top:25px; }
  .privacy-page h1 { font-size:24px; }
  .privacy-panel { padding:18px 16px; }
  .privacy-panel p { font-size:12px; }
}
@media (max-width: 560px) {
  .main-home-portrait-stack { display:none; }
  .main-home-hero h1 { max-width:100%; font-size:30px; }
}
@media (max-width: 410px) {
  .top-status { letter-spacing:0; }
  .brand small { font-size:8px; }
  .hero-card { padding:21px 17px; }
  .hero-art { right:-35px; opacity:.52; }
  .hero-copy { max-width:90%; }
  h1 { font-size:30px; }
  .section-heading h2 { font-size:17px; }
  .reset-button { padding:7px 8px; font-size:10px; }
  .input-row { grid-template-columns:minmax(0,1fr) 132px; gap:7px; }
  .stepper { grid-template-columns:29px minmax(0,1fr) 29px; gap:3px; }
  .step-button { width:29px; }
  .utility-result-values { gap:4px; }
}

/* Shared theme selected on the home page; the role accent colors each module. */
.calculator-theme-toggle { padding:7px 10px; border:1px solid #465247; border-radius:3px; background:transparent; color:#d8ded8; font-size:11px; cursor:pointer; }
.calculator-theme-toggle:hover { border-color:var(--role-accent,#97e37d); }
.header-controls { display:flex; align-items:center; gap:10px; margin-left:auto; }
html[data-theme="dark"] body { background:radial-gradient(ellipse at 75% 4%,color-mix(in srgb,var(--role-accent,#97e37d) 13%,transparent),transparent 38%),linear-gradient(135deg,#141414 0%,#101010 50%,#090909 100%); }
html[data-role="아처"][data-theme="dark"] .hero-card { border-color:color-mix(in srgb,var(--role-accent) 72%,#657347); background:linear-gradient(110deg,color-mix(in srgb,var(--role-accent) 22%,#171717),#202020 58%,#161616); }
html[data-role="아처"][data-theme="dark"] .hero-card::before { background-image:linear-gradient(color-mix(in srgb,var(--role-accent) 20%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--role-accent) 20%,transparent) 1px,transparent 1px); }
html[data-role="아처"][data-theme="dark"] .input-card { border-color:color-mix(in srgb,var(--role-accent) 32%,#46533b); border-top-color:var(--role-accent); }
html[data-role="아처"][data-theme="dark"] .nav-item.active { border-color:color-mix(in srgb,var(--role-accent) 55%,#506744); box-shadow:inset 3px 0 0 var(--role-accent); }
html[data-theme="dark"] .calculator-theme-toggle { color:#ddd; }

html[data-theme="light"] { color-scheme:light; --ink:#20221f; --muted:#555a53; --dim:#737970; --bg:#f3f4f1; --panel:#fff; --panel2:#eceeea; --line:#d0d5cf; --yellow:#805500; --green:#327342; --red:#ad3440; }
html[data-theme="light"] body { color:var(--ink); background:linear-gradient(135deg,#fff 0%,#f4f5f2 50%,#eceeea 100%); }
html[data-theme="light"] .scanlines { opacity:0; }
html[data-theme="light"] .topbar { border-bottom-color:#d8dcd6; }
html[data-theme="light"] .brand-mark { background:#fff; box-shadow:3px 3px 0 color-mix(in srgb,var(--role-accent,#ad3440) 45%,#fff); }
html[data-theme="light"] .top-status,html[data-theme="light"] .tiny-label,html[data-theme="light"] .section-kicker,html[data-theme="light"] .nav-caption { color:#72786f; }
html[data-theme="light"] .status-dot,html[data-theme="light"] .live-badge span { box-shadow:none; }
html[data-theme="light"] .top-divider { color:#a2a69f; }
html[data-theme="light"] .sidebar { scrollbar-color:#c0c7be transparent; }
html[data-theme="light"] .search-box { border-color:#d1d6d0; background:#fff; color:#72786f; }
html[data-theme="light"] .search-box input { color:#252722; }
html[data-theme="light"] .search-box input::placeholder { color:#8c9189; }
html[data-theme="light"] .side-count { color:#725000; }
html[data-theme="light"] .nav-item { color:#4e544e; }
html[data-theme="light"] .nav-item:hover { background:#ecefea; color:#20221f; }
html[data-theme="light"] .nav-item.active { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 40%,#d0d5cf); background:color-mix(in srgb,var(--role-accent,#ad3440) 10%,#fff); color:color-mix(in srgb,var(--role-accent,#ad3440) 70%,#20221f); box-shadow:inset 3px 0 0 var(--role-accent,#ad3440); }
html[data-theme="light"] .nav-icon { border-color:#d0d5cf; background:#fff; color:#575e56; }
html[data-theme="light"] .nav-icon.nav-portrait-wrap { border-color:#d0d5cf; background:#fff; }
html[data-theme="light"] .nav-item.active .nav-icon { color:var(--role-accent,#ad3440); border-color:var(--role-accent,#ad3440); }
html[data-theme="light"] .nav-item .nav-arrow,html[data-theme="light"] .side-foot { color:#81877f; }
html[data-theme="light"] .utility-group { border-top-color:#d9ddd7; }
html[data-theme="light"] .hero-card { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 64%,#fff); background:linear-gradient(110deg,color-mix(in srgb,var(--role-accent,#ad3440) 13%,#fff),#fff 58%,color-mix(in srgb,var(--role-accent,#ad3440) 7%,#f5f5f2)); box-shadow:4px 4px 0 rgba(35,38,32,.08); }
html[data-theme="light"] .hero-card::before { opacity:.13; background-image:linear-gradient(color-mix(in srgb,var(--role-accent,#ad3440) 24%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--role-accent,#ad3440) 24%,transparent) 1px,transparent 1px); }
html[data-theme="light"] .eyebrow,html[data-theme="light"] .hero-copy p { color:#555d56; }
html[data-theme="light"] h1 { color:#252722; text-shadow:none; }
html[data-theme="light"] h1 em,html[data-theme="light"] .hero-index b { color:color-mix(in srgb,var(--role-accent,#ad3440) 75%,#542d00); }
html[data-theme="light"] .tag { border-color:#c9d0c9; color:#515a52; }
html[data-theme="light"] .tag-red { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 42%,#fff); color:color-mix(in srgb,var(--role-accent,#ad3440) 75%,#452020); }
html[data-theme="light"] .art-label { border-left-color:var(--role-accent,#ad3440); background:rgba(255,255,255,.94); color:#515950; }
html[data-theme="light"] .art-label span { color:#687068; }
html[data-theme="light"] .art-label b { color:color-mix(in srgb,var(--role-accent,#ad3440) 76%,#513600); }
html[data-theme="light"] .hero-index,html[data-theme="light"] .hero-index span { color:#6e756c; }
html[data-theme="light"] .reset-button { border-color:#cbd1ca; background:#fff; color:#4c554d; }
html[data-theme="light"] .reset-button:hover { border-color:var(--role-accent,#ad3440); color:var(--role-accent,#ad3440); }
html[data-theme="light"] .input-card { border-color:#d0d6ce; border-top-color:color-mix(in srgb,var(--role-accent,#ad3440) 70%,#d0a749); background:linear-gradient(145deg,#fff,#f7f8f5); box-shadow:2px 2px 0 rgba(30,35,30,.06); }
html[data-theme="light"] .input-card-head { border-bottom-color:#e0e4de; color:#282c27; }
html[data-theme="light"] .card-icon { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 45%,#cbd1ca); color:var(--role-accent,#ad3440); }
html[data-theme="light"] .input-card-head small,html[data-theme="light"] .input-label { color:#5f665f; }
html[data-theme="light"] .input-row { border-bottom-color:#e5e8e3; }
html[data-theme="light"] .input-row:focus-within .input-label { color:color-mix(in srgb,var(--role-accent,#ad3440) 74%,#20221f); }
html[data-theme="light"] .rarity-normal { color:#555d61; background:rgba(65,75,80,.06); }
html[data-theme="light"] .toggle-switch { border-color:#bfc7bd; background:#e7eae5; }
html[data-theme="light"] .toggle-switch::after { background:#818981; }
html[data-theme="light"] .toggle-switch.is-on { border-color:#638954; background:#a9c89a; }
html[data-theme="light"] .toggle-switch.is-on::after { background:#fff; }
html[data-theme="light"] .input-cell input { border-color:#cbd1c7; background:#fff; color:#5d4300; }
html[data-theme="light"] .input-cell input:focus { border-color:var(--role-accent,#ad3440); box-shadow:0 0 0 2px color-mix(in srgb,var(--role-accent,#ad3440) 18%,transparent); }
html[data-theme="light"] .step-button { border-color:#c3cbbc; background:#edf0e8; color:#495348; }
html[data-theme="light"] .step-button:hover { border-color:var(--role-accent,#ad3440); background:color-mix(in srgb,var(--role-accent,#ad3440) 10%,#fff); color:#282c27; }
html[data-theme="light"] .empty-input,html[data-theme="light"] .result-note { color:#656e66; }
html[data-theme="light"] .live-badge { border-color:#91b596; color:#347342; }
html[data-theme="light"] .utility-result-value { border-bottom-color:#d9ded7; }
html[data-theme="light"] .utility-result-value span { color:#4c554d; }
html[data-theme="light"] .utility-result-value strong,html[data-theme="light"] .summary-value { color:#674900; }
html[data-theme="light"] .summary-card { border-color:#d1d8d0; background:#fff; }
html[data-theme="light"] .summary-card::after { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 50%,#fff); }
html[data-theme="light"] .summary-label,html[data-theme="light"] .summary-unit { color:#656d64; }
html[data-theme="light"] .table-shell { border-color:#d0d7cf; background:#fff; }
html[data-theme="light"] .result-table th { border-bottom-color:#cbd4ca; background:#e9eee8; color:#39443a; }
html[data-theme="light"] .result-table td { border-bottom-color:#e4e8e2; color:#4f5a50; }
html[data-theme="light"] .result-table td:first-child { color:#303a31; }
html[data-theme="light"] .result-table tr:hover td { background:color-mix(in srgb,var(--role-accent,#ad3440) 6%,#fff); }
html[data-theme="light"] .result-table .numeric-result { color:#304d29; }
html[data-theme="light"] .result-table .result-primary td { background:color-mix(in srgb,var(--role-accent,#ad3440) 7%,#fff); }
html[data-theme="light"] .result-table .result-primary td:first-child { color:color-mix(in srgb,var(--role-accent,#ad3440) 76%,#303a31); }
html[data-theme="light"] .footer { border-top-color:#d8ddd6; }
html[data-theme="light"] .footer-store-link,html[data-theme="light"] .footer-info-panel { border-color:#d6dcd5; background:rgba(255,255,255,.72); }
html[data-theme="light"] .footer-store-link b,html[data-theme="light"] .footer-info-panel p { color:#4f594f; }
html[data-theme="light"] .footer-local-note { border-bottom-color:#d8ddd6; }
html[data-theme="light"] .footer-unofficial { color:#4b554c !important; }
html[data-theme="light"] .footer-source { color:#657066 !important; }
html[data-theme="light"] .footer-privacy-link { color:#4f6552; }
html[data-role="아처"][data-theme="light"] .nav-item.active { background:color-mix(in srgb,var(--role-accent) 11%,white); }
html[data-role="아처"][data-theme="light"] .hero-card { border-color:color-mix(in srgb,var(--role-accent) 58%,white); }
html[data-role="아처"][data-theme="light"] .hero-card::before { opacity:.18; }
html[data-role="아처"][data-theme="light"] { --role-accent:#e6a7aa !important; --role-accent-secondary:#f3cccd !important; --yellow:#a95056 !important; --red:#c97277 !important; }
html[data-role="아처"][data-theme="light"] .hero-card { border-color:#edc4c6; background:linear-gradient(110deg,#fff0f0 0%,#fff 60%,#fff7f7 100%); }
html[data-role="아처"][data-theme="light"] .hero-card::before { background-image:linear-gradient(rgba(213,139,144,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(213,139,144,.12) 1px,transparent 1px); }
html[data-role="아처"][data-theme="light"] .eyebrow-line { background:#d99094; }
html[data-role="아처"][data-theme="light"] .nav-item.active { border-color:#edcbcc; background:#fff2f2; color:#90474c; box-shadow:inset 3px 0 0 #dc9fa2; }
html[data-role="아처"][data-theme="light"] .input-card { border-color:#eddbdb; border-top-color:#e5b6b8; background:linear-gradient(145deg,#fffafa,#fff5f5); }
html[data-role="아처"][data-theme="light"] .card-icon { border-color:#e9c9ca; color:#a95056; }
html[data-role="아처"][data-theme="light"] .input-cell input { border-color:#ead2d2; color:#a95056; }
html[data-role="아처"][data-theme="light"] .input-cell input:focus { border-color:#d89195; box-shadow:0 0 0 2px rgba(217,145,149,.16); }
html[data-role="아처"][data-theme="light"] .step-button { border-color:#e4c3c4; background:#fff0f0; color:#984b50; }
html[data-role="아처"][data-theme="light"] .step-button:hover { border-color:#d99094; background:#fbe4e5; }
html[data-role="아처"][data-theme="light"] .summary-card { border-color:#ecd3d3; }
html[data-role="아처"][data-theme="light"] .summary-card::after { border-color:#e3b7b9; }
html[data-role="아처"][data-theme="light"] .summary-value,html[data-role="아처"][data-theme="light"] .utility-result-value strong { color:#93474c; }
html[data-role="아처"][data-theme="light"] .table-shell { border-color:#e9d1d2; }
html[data-role="아처"][data-theme="light"] .result-table th { border-bottom-color:#ebcccc; background:#fff0f0; }
html[data-role="아처"][data-theme="light"] .result-table td { border-bottom-color:#f0dddd; }
html[data-role="아처"][data-theme="light"] .result-table .result-primary td { background:#fff5f5; }
html[data-role="아처"][data-theme="light"] .result-table .numeric-result { color:#8b4d50; }
html[data-role="아처"][data-theme="light"] #resultTable .result-table th + th,html[data-role="아처"][data-theme="light"] #resultTable .result-table td + td { border-left-color:#efd2d3; }
html[data-role="아처"][data-theme="light"] #resultTable .dps-unit { color:#a96a6d; }
html[data-theme="light"] .calculator-theme-toggle { border-color:#cbd1ca; background:#fff; color:#3d453e; }
html[data-theme="light"] .calculator-theme-toggle:hover { border-color:var(--role-accent,#ad3440); }
html[data-theme="light"] .calculator-notice-link { border-color:#cbd1ca; background:#fff; color:#3d453e; }
html[data-theme="light"] .calculator-notice-link:hover { border-color:var(--role-accent,#ad3440); }
@media (max-width:760px) {
  .topbar { gap:9px; }
  .top-status { margin-left:auto; font-size:8px; white-space:nowrap; }
  .calculator-theme-toggle { flex:none; padding:6px 7px; font-size:10px; white-space:nowrap; }
  .calculator-notice-link { min-height:29px; padding:6px 7px; font-size:10px; white-space:nowrap; }
}
@media (max-width:410px) {
  .top-status { display:none; }
}
.time-input-table { min-width: 680px; }
.time-score-input-grid .time-input-table { width:min(100%,850px); min-width:0; max-width:100%; margin-inline:auto; table-layout:fixed; font-size:14px; }
.time-score-input-grid .time-input-table th:first-child,.time-score-input-grid .time-input-table td:first-child { width:16%; min-width:0; }
.time-score-input-grid .time-input-table th:nth-child(2),.time-score-input-grid .time-input-table td:nth-child(2),.time-score-input-grid .time-input-table th:nth-child(3),.time-score-input-grid .time-input-table td:nth-child(3),.time-score-input-grid .time-input-table th:nth-child(4),.time-score-input-grid .time-input-table td:nth-child(4) { width:28%; }
.time-score-input-grid .time-input-table th:first-child,.time-score-input-grid .time-input-table td:first-child { padding-left:18px; }
.time-score-input-grid .time-input-table th:last-child,.time-score-input-grid .time-input-table td:last-child { padding-right:18px; }
.time-score-input-grid .time-input-table th { padding:12px 15px; font-size:13px; }
.time-score-input-grid .time-input-table td { padding:11px 15px; font-size:14px; }
.time-score-input-grid .time-input-table td input { width:min(84px,100%); font-size:14px; }
.time-input-table td input { width: 92px; padding: 7px 8px; border: 1px solid #405347; background: #101914; color: var(--ink); text-align: right; font: 12px var(--mono); }
.time-input-table td input:focus { outline: 1px solid var(--yellow); border-color: var(--yellow); }
.fixed-combat .result-table { min-width: 440px; }
.skill-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
.skill-stat-card { min-width:0; padding:10px 13px 8px; border:1px solid color-mix(in srgb,var(--role-accent) 28%,#38403b); border-left:3px solid var(--role-accent); background:color-mix(in srgb,var(--role-accent) 7%,#171b1b); }
.skill-stat-card h3 { margin:0 0 6px; color:#e7ece8; font-size:12px; font-weight:700; }
.skill-stat-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:29px; border-top:1px solid rgba(170,185,174,.12); color:#9cac9f; font-size:11px; }
.skill-stat-row strong { color:var(--role-accent); font:600 14px var(--mono); white-space:nowrap; }
.final-score-table { min-width: 360px; }
.final-score-table th { text-align: center; }
.final-score-table td { text-align: center; }
.final-score-table .result-primary td { padding: 17px; font-size: 16px; }
.final-score-table .numeric-result { color: var(--yellow); font: 700 24px var(--mono); }
.extra-input-row td { border-top: 1px solid #59683c; }

:root { --role-accent: #97e37d; --role-accent-secondary:#97e37d; }
body { background: radial-gradient(ellipse at 18% 54%, color-mix(in srgb,var(--role-accent-secondary) 8%,transparent),transparent 38%), radial-gradient(ellipse at 76% 5%, color-mix(in srgb, var(--role-accent) 15%, transparent), transparent 34%), linear-gradient(135deg,#171714 0%,#151b16 48%,#111410 100%); }
.hero-card { border-color: color-mix(in srgb, var(--role-accent) 68%, #354338); background: linear-gradient(110deg,color-mix(in srgb,var(--role-accent) 15%,#202c23),rgba(28,39,29,.96) 54%,color-mix(in srgb,var(--role-accent-secondary) 17%,#202020)); }
.brand-mark { border-color: var(--role-accent); color: var(--role-accent); }
.input-grid:has(.role-dossier) { grid-template-columns:1fr; }
.role-dossier { grid-column:1/-1; border-color:color-mix(in srgb,var(--role-accent) 55%,#344139); border-top-color:var(--role-accent); background:#191c1d; box-shadow:none; }
.role-dossier .input-card-head { min-height:48px; background:color-mix(in srgb,var(--role-accent) 68%,#252525); color:#fff; border-bottom-color:rgba(255,255,255,.15); }
.role-dossier .card-icon { border-color:rgba(255,255,255,.6); color:#fff; }
.role-dossier .result-table { min-width:0; }
.role-dossier .result-table th { background:color-mix(in srgb,var(--role-accent) 22%,#202525); }
.role-dossier .result-table .numeric-result { color:var(--role-accent); }
.role-sprite { width:180px; height:210px; image-rendering:auto; }
.nav-portrait { image-rendering:auto; }
.time-input-table .fixed-score { color:#d8ef84; font:12px var(--mono); text-align:right; }
@media (max-width:760px) {
  .time-score-input-grid .time-input-table { width:100%; font-size:12px; }
  .time-score-input-grid .time-input-table th { padding:9px 6px; font-size:11px; }
  .time-score-input-grid .time-input-table td { padding:8px 6px; font-size:12px; }
  .time-score-input-grid .time-input-table th:first-child,.time-score-input-grid .time-input-table td:first-child { padding-left:10px; }
  .time-score-input-grid .time-input-table th:last-child,.time-score-input-grid .time-input-table td:last-child { padding-right:10px; }
  .time-score-input-grid .time-input-table td input { width:min(64px,100%); padding:5px 4px; font-size:12px; }
}
.time-input-table { min-width:680px; }
.time-input-table .fixed-score { color:#d8ef84; font:12px var(--mono); text-align:right; }
.role-dossier .result-table td.numeric-result { white-space:normal; line-height:1.45; }
.role-sprite { width:250px; height:255px; image-rendering:auto; object-position:center bottom; }
.nav-portrait { image-rendering:pixelated; }

/* Role pages carry the selected role color through every card and control. */
html[data-role]:not([data-role=""]) .input-card:not(.role-dossier) {
  border-color: color-mix(in srgb,var(--role-accent) 38%,#344139);
  border-top-color: var(--role-accent);
  background: linear-gradient(145deg,color-mix(in srgb,var(--role-accent) 10%,#202020),#17191a);
}
html[data-role]:not([data-role=""]) .input-card:not(.role-dossier) .input-card-head {
  border-bottom-color: color-mix(in srgb,var(--role-accent) 28%,#303030);
  background: color-mix(in srgb,var(--role-accent) 16%,#202020);
}
html[data-role]:not([data-role=""]) .input-card:not(.role-dossier) .card-icon { border-color:color-mix(in srgb,var(--role-accent) 65%,#444); color:var(--role-accent); }
html[data-role]:not([data-role=""]) .input-row { border-bottom-color:color-mix(in srgb,var(--role-accent) 18%,transparent); }
html[data-role]:not([data-role=""]) .input-cell input { border-color:color-mix(in srgb,var(--role-accent) 38%,#343434); color:var(--role-accent); }
.input-cell input.grade-normal { border-color:#d0d5d8; color:#d0d5d8; box-shadow:inset 0 0 10px rgba(208,213,216,.08); }
.input-cell input.grade-none { border-color:#65736c; color:#829087; box-shadow:inset 0 0 10px rgba(101,115,108,.08); }
.input-cell input.grade-advanced { border-color:#67b8ff; color:#67b8ff; box-shadow:inset 0 0 10px rgba(70,157,235,.10); }
.input-cell input.grade-hero { border-color:#c28aff; color:#c28aff; box-shadow:inset 0 0 10px rgba(159,92,220,.12); }
.input-cell input.grade-legendary { border-color:#ffca57; color:#ffca57; box-shadow:inset 0 0 10px rgba(230,168,47,.13); }
.input-row .input-label.grade-normal { color:#d0d5d8; }
.input-row .input-label.grade-none { color:#829087; }
.input-row .input-label.grade-advanced { color:#67b8ff; }
.input-row .input-label.grade-hero { color:#c28aff; }
.input-row .input-label.grade-legendary { color:#ffca57; }
html[data-role]:not([data-role=""]) .step-button { border-color:color-mix(in srgb,var(--role-accent) 45%,#343434); background:color-mix(in srgb,var(--role-accent) 22%,#202020); color:var(--role-accent); }
html[data-role]:not([data-role=""]) .summary-card { border-color:color-mix(in srgb,var(--role-accent) 42%,#343434); background:color-mix(in srgb,var(--role-accent) 13%,#151819); }
html[data-role]:not([data-role=""]) .summary-card::after { border-color:var(--role-accent); }
html[data-role]:not([data-role=""]) .summary-label { color:color-mix(in srgb,var(--role-accent) 58%,#d0d0d0); }
html[data-role]:not([data-role=""]) .summary-value { color:var(--role-accent); }
html[data-role]:not([data-role=""]) .summary-card.summary-basic { border-top:3px solid #ffd45a; background:linear-gradient(145deg,#322c1e,#1b1b18); }
html[data-role]:not([data-role=""]) .summary-card.summary-basic .summary-label,html[data-role]:not([data-role=""]) .summary-card.summary-basic .summary-value { color:#ffe07a; }
html[data-role]:not([data-role=""]) .summary-card.summary-rapid { border-top:3px solid #54d8f2; background:linear-gradient(145deg,#183137,#171b1d); }
html[data-role]:not([data-role=""]) .summary-card.summary-rapid .summary-label,html[data-role]:not([data-role=""]) .summary-card.summary-rapid .summary-value { color:#73e3f7; }
html[data-role]:not([data-role=""]) .summary-card.summary-critical { border-top:3px solid #b58aff; }
html[data-role]:not([data-role=""]) .summary-card.summary-cooldown { border-top:3px solid color-mix(in srgb,var(--role-accent) 72%,#fff); }
html[data-role]:not([data-role=""]) .table-shell { border-color:color-mix(in srgb,var(--role-accent) 34%,#343434); }
html[data-role]:not([data-role=""]) .result-table th { border-bottom-color:color-mix(in srgb,var(--role-accent) 38%,#343434); background:color-mix(in srgb,var(--role-accent) 22%,#202020); }
html[data-role]:not([data-role=""]) .result-table .numeric-result { color:var(--role-accent); }
html[data-role="체어"] .result-note { white-space:pre-line; }
html[data-role="스케"] .result-note { white-space:pre-line; }
@media (min-width:1001px) {
  .input-list { max-width:none; display:grid; grid-template-columns:1fr; gap:0 24px; }
  .input-row { grid-template-columns:190px 218px; justify-content:start; gap:8px; min-height:52px; }
  .input-label { font-size:13px; }
  .stepper { grid-template-columns:42px minmax(0,1fr) 42px; gap:2px; }
  .step-button { width:42px; height:42px; font-size:21px; }
  .input-cell input { height:42px; font-size:15px; }
  .role-dossier .result-table { table-layout:fixed; }
  .role-dossier .result-table th:first-child,.role-dossier .result-table td:first-child { width:54%; min-width:0; }
  .role-dossier .result-table th:not(:first-child),.role-dossier .result-table td:not(:first-child) { width:23%; padding-right:8px; padding-left:8px; text-align:center; }
  .role-dossier .result-table th { font-size:12px; }
  .role-dossier .result-table td { font-size:15px; }
}
@media (min-width:1400px) {
  .input-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(var(--upgrade-rows,1),auto); grid-auto-flow:column; }
}
@media (min-width:1001px) {
  .utility-input-grid .input-row { min-width:0; grid-template-columns:max-content minmax(0,218px); justify-content:start; gap:8px; }
  .utility-input-grid .input-cell { width:100%; min-width:0; }
  .utility-input-grid .stepper { width:100%; grid-template-columns:42px minmax(0,1fr) 42px; }
}

/* Final light-mode overrides keep Archer panels pale instead of inheriting dark role skins. */
html[data-role="아처"][data-theme="light"] .role-dossier { border-color:#efd1d2; border-top-color:#e7b4b6; background:#fff; box-shadow:0 2px 8px rgba(125,65,68,.05); }
html[data-role="아처"][data-theme="light"] .role-dossier .input-card-head { background:#fff0f0; color:#49383a; border-bottom-color:#efd4d5; }
html[data-role="아처"][data-theme="light"] .role-dossier .card-icon { border-color:#e4b9bb; color:#a95056; }
html[data-role="아처"][data-theme="light"] .skill-stat-card { border-color:#f0dada; border-left-color:#e5a5a8; background:#fff9f9; }
html[data-role="아처"][data-theme="light"] .skill-stat-card h3 { color:#443638; }
html[data-role="아처"][data-theme="light"] .skill-stat-row { border-top-color:#f0e1e1; color:#666064; }
html[data-role="아처"][data-theme="light"] .skill-stat-row strong { color:#a95056; }
html[data-role="아처"][data-theme="light"] .input-card:not(.role-dossier) { border-color:#efdada; border-top-color:#e5a5a8; background:linear-gradient(145deg,#fffafa,#fff5f5); }
html[data-role="아처"][data-theme="light"] .input-card:not(.role-dossier) .input-card-head { border-bottom-color:#f0dcdc; background:#fff0f0; color:#49383a; }
html[data-role="아처"][data-theme="light"] .input-card:not(.role-dossier) .card-icon { border-color:#e4b9bb; color:#a95056; }
html[data-role="아처"][data-theme="light"] .input-row { border-bottom-color:#f0dddd; }
html[data-role="아처"][data-theme="light"] .input-cell input { border-color:#e9cfd0; background:#fff; color:#a95056; }
html[data-role="아처"][data-theme="light"] .step-button { border-color:#e3c2c3; background:#fff0f0; color:#91484d; }
html[data-role="아처"][data-theme="light"] .summary-card { border-color:#ead4d4; background:#fffafa; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-basic { border-top-color:#e0c27a; background:#fffaf0; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-basic .summary-label,html[data-role="아처"][data-theme="light"] .summary-card.summary-basic .summary-value { color:#765500; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-rapid { border-top-color:#7cc6d7; background:#f1fbfd; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-rapid .summary-label,html[data-role="아처"][data-theme="light"] .summary-card.summary-rapid .summary-value { color:#237284; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-critical { border-top-color:#c49ae4; }
html[data-role="아처"][data-theme="light"] .summary-card.summary-cooldown { border-top-color:#e2a5a8; }
html[data-role="아처"][data-theme="light"] .result-table th { border-bottom-color:#ebcccc; background:#fff0f0; color:#514348; }
html[data-role="아처"][data-theme="light"] .result-table td { border-bottom-color:#f0dddd; color:#574e50; }
html[data-role="아처"][data-theme="light"] .result-table td:first-child { color:#383033; }
html[data-role="아처"][data-theme="light"] .result-table .numeric-result { color:#9a4e53; }
html[data-role="아처"][data-theme="light"] .result-table .result-primary td { background:#fff5f5; }
html[data-role="아처"][data-theme="light"] .result-table .result-primary td:first-child { color:#92474c; }
html[data-role="아처"][data-theme="light"] #resultTable .result-table th + th,html[data-role="아처"][data-theme="light"] #resultTable .result-table td + td { border-left-color:#efd2d3; }
html[data-role="아처"][data-theme="light"] .range-group-row th,html[data-role="아처"][data-theme="light"] .range-group-row + tr th { background:#fff0f0; border-bottom-color:#edcbcc; color:#514348; }

/* Apply the light palette after role-specific dark skins so every class stays bright. */
html[data-theme="light"][data-role]:not([data-role=""]) .hero-card { border-color:color-mix(in srgb,var(--role-accent) 42%,#fff); background:linear-gradient(110deg,color-mix(in srgb,var(--role-accent) 11%,#fff),#fff 58%,color-mix(in srgb,var(--role-accent-secondary) 7%,#f5f5f2)); box-shadow:3px 3px 0 rgba(35,38,32,.06); }
html[data-theme="light"][data-role]:not([data-role=""]) .hero-card::before { opacity:.14; background-image:linear-gradient(color-mix(in srgb,var(--role-accent) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--role-accent) 22%,transparent) 1px,transparent 1px); }
html[data-theme="light"][data-role]:not([data-role=""]) h1 em,html[data-theme="light"][data-role]:not([data-role=""]) .hero-index b { color:color-mix(in srgb,var(--role-accent) 70%,#242622); }
html[data-theme="light"][data-role]:not([data-role=""]) .eyebrow-line { background:color-mix(in srgb,var(--role-accent) 60%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .role-dossier { border-color:color-mix(in srgb,var(--role-accent) 28%,#fff); border-top-color:color-mix(in srgb,var(--role-accent) 50%,#fff); background:#fff; box-shadow:0 2px 8px rgba(35,38,32,.05); }
html[data-theme="light"][data-role]:not([data-role=""]) .role-dossier .input-card-head { background:color-mix(in srgb,var(--role-accent) 9%,#fff); border-bottom-color:color-mix(in srgb,var(--role-accent) 21%,#fff); color:#30312e; }
html[data-theme="light"][data-role]:not([data-role=""]) .role-dossier .card-icon { border-color:color-mix(in srgb,var(--role-accent) 42%,#fff); color:color-mix(in srgb,var(--role-accent) 48%,#292a27); }
html[data-theme="light"][data-role]:not([data-role=""]) .skill-stat-card { border-color:color-mix(in srgb,var(--role-accent) 20%,#fff); border-left-color:color-mix(in srgb,var(--role-accent) 48%,#fff); background:color-mix(in srgb,var(--role-accent) 5%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .skill-stat-card h3 { color:#30312e; }
html[data-theme="light"][data-role]:not([data-role=""]) .skill-stat-row { border-top-color:#e8e9e6; color:#555a54; }
html[data-theme="light"][data-role]:not([data-role=""]) .skill-stat-row strong { color:color-mix(in srgb,var(--role-accent) 58%,#282a27); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-card:not(.role-dossier) { border-color:color-mix(in srgb,var(--role-accent) 23%,#fff); border-top-color:color-mix(in srgb,var(--role-accent) 50%,#fff); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--role-accent) 4%,#fff)); box-shadow:2px 2px 0 rgba(35,38,32,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-card:not(.role-dossier) .input-card-head { border-bottom-color:color-mix(in srgb,var(--role-accent) 20%,#fff); background:color-mix(in srgb,var(--role-accent) 8%,#fff); color:#30312e; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-card:not(.role-dossier) .card-icon { border-color:color-mix(in srgb,var(--role-accent) 42%,#fff); color:color-mix(in srgb,var(--role-accent) 48%,#292a27); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row { border-bottom-color:color-mix(in srgb,var(--role-accent) 15%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-label { color:#555a54; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input { border-color:color-mix(in srgb,var(--role-accent) 32%,#fff); background:#fff; color:color-mix(in srgb,var(--role-accent) 42%,#382f30); }
html[data-theme="light"][data-role]:not([data-role=""]) .step-button { border-color:color-mix(in srgb,var(--role-accent) 35%,#fff); background:color-mix(in srgb,var(--role-accent) 9%,#fff); color:color-mix(in srgb,var(--role-accent) 52%,#292a27); }
html[data-theme="light"][data-role]:not([data-role=""]) .step-button:hover { border-color:color-mix(in srgb,var(--role-accent) 58%,#fff); background:color-mix(in srgb,var(--role-accent) 17%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input.grade-none { border-color:#cbd2cd; background:#f0f3f1; color:#59615b; box-shadow:inset 0 0 0 1px rgba(70,82,73,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input.grade-normal { border-color:#c9d0d3; background:#f0f3f5; color:#555f65; box-shadow:inset 0 0 0 1px rgba(70,82,90,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input.grade-advanced { border-color:#9cc9e9; background:#eaf5fd; color:#185d8b; box-shadow:inset 0 0 0 1px rgba(50,117,163,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input.grade-hero { border-color:#cbb1e1; background:#f4edfa; color:#63398a; box-shadow:inset 0 0 0 1px rgba(108,67,146,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-cell input.grade-legendary { border-color:#dfc16e; background:#fff6dd; color:#765300; box-shadow:inset 0 0 0 1px rgba(153,112,28,.04); }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row .input-label.grade-none { color:#59615b; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row .input-label.grade-normal { color:#555f65; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row .input-label.grade-advanced { color:#185d8b; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row .input-label.grade-hero { color:#63398a; }
html[data-theme="light"][data-role]:not([data-role=""]) .input-row .input-label.grade-legendary { color:#765300; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card { border-color:color-mix(in srgb,var(--role-accent) 23%,#fff); background:color-mix(in srgb,var(--role-accent) 5%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card::after { border-color:color-mix(in srgb,var(--role-accent) 42%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-label { color:#565c55; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-value { color:color-mix(in srgb,var(--role-accent) 58%,#282a27); }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-basic { border-top-color:#d5b968; background:#fffaf0; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-basic .summary-label,html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-basic .summary-value { color:#765500; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-rapid { border-top-color:#78bdca; background:#f0fafb; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-rapid .summary-label,html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-rapid .summary-value { color:#286b76; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-critical { border-top-color:#b998dc; background:#f7f2fb; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-critical .summary-label,html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-critical .summary-value { color:#60417d; }
html[data-theme="light"][data-role]:not([data-role=""]) .summary-card.summary-cooldown { border-top-color:color-mix(in srgb,var(--role-accent) 48%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .table-shell { border-color:color-mix(in srgb,var(--role-accent) 25%,#fff); background:#fff; }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table th { border-bottom-color:color-mix(in srgb,var(--role-accent) 25%,#fff); background:color-mix(in srgb,var(--role-accent) 9%,#fff); color:#454a45; }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table td { border-bottom-color:#e7e9e5; color:#535951; }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table td:first-child { color:#343833; }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table .numeric-result { color:color-mix(in srgb,var(--role-accent) 54%,#30332f); }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table .result-primary td { background:color-mix(in srgb,var(--role-accent) 6%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .result-table .result-primary td:first-child { color:color-mix(in srgb,var(--role-accent) 62%,#30332f); }
html[data-theme="light"][data-role]:not([data-role=""]) #resultTable .result-table th + th,html[data-theme="light"][data-role]:not([data-role=""]) #resultTable .result-table td + td { border-left-color:color-mix(in srgb,var(--role-accent) 24%,#fff); }
html[data-theme="light"][data-role]:not([data-role=""]) .range-group-row th,html[data-theme="light"][data-role]:not([data-role=""]) .range-group-row + tr th { border-bottom-color:color-mix(in srgb,var(--role-accent) 27%,#fff); background:color-mix(in srgb,var(--role-accent) 12%,#fff); color:#424741; }
html[data-theme="light"] .time-input-table td input { border-color:#cbd3cc; background:#fff; color:#252a25; }
html[data-theme="light"] .time-input-table td input:focus { outline:1px solid #879b8a; border-color:#879b8a; }
html[data-theme="light"] .brand-mark { border-color:color-mix(in srgb,var(--role-accent,#ad3440) 34%,#fff); background:#fff; }