:root {
  --bg: #090b10;
  --panel: #121722;
  --panel-2: #171e2b;
  --line: #273043;
  --text: #f4f7fb;
  --muted: #8f9aab;
  --accent: #f5b942;
  --accent-2: #ffd978;
  --roster-max: #ffe08a;
  --good: #67d9ae;
  --roster-controls-left-offset: 16px;
  --roster-header-toggle-y: -12px;
  --roster-text-weight: 650;
  --homework-text-weight: 650;
  --primary-data-font-size: 14px;
}
* { box-sizing: border-box; }
strong, b, h1, h2, h3, h4, h5, h6 { font-weight: 650; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; zoom: 1.1; }
.site-nav{display:flex;align-items:center;justify-content:flex-start;gap:8px;max-width:1180px;margin:0 auto;padding:18px 24px;font-size:16px;font-weight: 650}.site-nav a{padding:10px 14px;border:1px solid transparent;border-radius:9px;color:var(--muted);text-decoration:none;transition:background .16s ease,border-color .16s ease,color .16s ease}.site-nav a:hover{border-color:#47402c;background:#1b1c1b;color:var(--text)}.site-nav .site-brand{margin-right:4px;color:var(--accent-2);font-size:17px}.site-nav a.active{border-color:#80692c;background:#292718;color:var(--accent-2)}
.site-nav-dropdown{position:relative;display:inline-flex;align-items:center}
.site-nav-dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:var(--muted);font:inherit;font-weight:650;background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.site-nav-dropdown-toggle:hover,.site-nav-dropdown:focus-within .site-nav-dropdown-toggle,.site-nav-dropdown.open .site-nav-dropdown-toggle{border-color:#47402c;background:#1b1c1b;color:var(--text)}
.site-nav-dropdown.active .site-nav-dropdown-toggle{border-color:#80692c;background:#292718;color:var(--accent-2)}
.site-nav-dropdown-arrow{font-size:11px;line-height:1;transition:transform .16s ease}
.site-nav-dropdown.open .site-nav-dropdown-arrow,.site-nav-dropdown:focus-within .site-nav-dropdown-arrow{transform:rotate(180deg)}
.site-nav-dropdown-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:120;display:none;min-width:132px;padding:6px;background:#101620;border:1px solid #303a4d;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.site-nav-dropdown.open .site-nav-dropdown-menu,.site-nav-dropdown:focus-within .site-nav-dropdown-menu{display:grid}
.site-nav-dropdown-menu a{display:block;width:100%;padding:9px 11px;border:0;border-radius:7px;color:var(--muted);white-space:nowrap}
.site-nav-dropdown-menu a:hover{border:0;background:#1b2230;color:var(--text)}
.site-nav-dropdown-menu a.active{border:0;background:#292718;color:var(--accent-2)}

.market-layout { max-width:760px; margin:0 auto; padding:70px 24px; }.market-layout h1 { font-size:44px; }.market-card,.market-result { margin-top:28px; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }.market-type{display:flex;gap:8px}.market-type button{border:1px solid var(--line);border-radius:9px;padding:9px 16px;background:#0d121b;color:var(--muted);font-weight: 650}.market-type button.active{color:var(--accent-2);border-color:#80692c;background:#292718}.market-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.market-options select{display:block;width:100%;margin-top:6px;padding:10px;background:#0d121b;color:var(--text);border:1px solid var(--line);border-radius:9px}.market-search{width:100%}.market-result{display:grid;gap:6px}.market-result span,.market-result small{color:var(--muted);font-size:12px}.market-result strong{font-size:26px;color:var(--accent-2)}
.market-popular{margin-top:28px;padding:24px;border:1px solid #55451e;border-radius:18px;background:linear-gradient(145deg,#1d1b16,#121925)}.market-popular-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}.market-popular h2{margin:4px 0 0}.market-popular-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.popular-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px;border:1px solid #2b3445;border-radius:9px;background:#111722;font-size:12px}.popular-row strong,.popular-row b{color:var(--accent-2)}.popular-row span{overflow:hidden;color:var(--text);white-space:nowrap;text-overflow:ellipsis}.popular-row b{white-space:nowrap}
.market-list{margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.market-list h2{margin:4px 0 0}.market-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #232b3b;font-size:13px;transition:background .18s ease}.market-row.selected{background:rgba(255,224,138,.08)}.market-row>span{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.market-row>span i{color:var(--muted);font-style:normal}.market-row strong{color:var(--muted);white-space:nowrap}.market-tier{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:4px;color:#fff;font-size:10px;text-shadow:0 0 2px #000}.market-tier.하{background:#4b9fd0}.market-tier.중{background:#8d61d7}.market-tier.상{background:var(--roster-max)}.market-row:last-child{border:0}
.market-price-samples{position:relative;cursor:help}.market-price-samples::after{content:attr(data-sample-tooltip);position:absolute;z-index:35;right:0;bottom:calc(100% + 7px);width:max-content;padding:5px 7px;color:#d8e0ed;font-size:10px;font-weight:650;line-height:1.2;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;background:#0d121b;border:1px solid #46536a;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.35);transform:translateY(3px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease}.market-price-samples:hover::after,.popular-row:hover>.market-price-samples::after,.market-row:hover>.market-price-samples::after{visibility:visible;opacity:1;transform:translateY(0)}
.market-list-type{margin-top:16px}
.market-role-tabs{margin-top:18px}.market-role-tabs button{min-width:88px}
.material-market-layout{max-width:1040px}.material-market-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.material-market-hero .hero-copy{margin-bottom:0}.material-market-refresh{min-width:108px;padding:10px 15px;color:#17130b;font:inherit;font-weight:750;background:var(--accent-2);border:0;border-radius:9px;cursor:pointer}.material-market-refresh:disabled{opacity:.55;cursor:wait}.material-market-panel{margin-top:28px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.material-market-summary{display:flex;gap:28px;margin-bottom:10px}.material-market-summary div{display:grid;gap:3px}.material-market-summary span{color:var(--muted);font-size:11px}.material-market-summary strong{font-size:13px;color:var(--accent-2)}.material-market-table-wrap{overflow-x:auto;margin-top:14px}.material-market-table{width:100%;min-width:760px;border-collapse:collapse;table-layout:fixed}.material-market-table .material-col-name{width:38%}.material-market-table .material-col-price{width:18%}.material-market-table .material-col-unit-price{width:20%}.material-market-table .material-col-time{width:24%}.material-market-table th,.material-market-table td{padding:13px 14px;border-bottom:1px solid #273043;text-align:center;font-size:13px;white-space:nowrap}.material-market-table thead th{color:var(--muted);font-size:12px;font-weight:650;background:#0e131d}.material-market-table tbody th{text-align:left;color:var(--text);font-weight:650;overflow:hidden;text-overflow:ellipsis}.material-market-table tbody tr:last-child>*{border-bottom:0}.material-market-table .material-market-price,.material-market-table .material-market-unit-price,.material-market-table .material-market-price-header,.material-market-table .material-market-unit-price-header{text-align:center!important}.material-market-price-value,.material-market-unit-price-value{display:flex;width:100%;align-items:center;justify-content:center;text-align:center}.material-market-sort-header{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:6px}.material-market-sort-button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--muted);font:inherit;font-size:10px;line-height:1;background:#151c28;border:1px solid #303a4d;border-radius:5px;cursor:pointer}.material-market-sort-button:hover,.material-market-sort-button.active{color:var(--accent-2);border-color:#756027;background:#1c1d1b}.material-market-table .material-market-price{color:var(--accent-2);font-weight:750}.material-market-table .material-market-time{color:var(--muted);font-size:11px}.material-market-table tr.is-unpriced .material-market-price{color:var(--muted);font-weight:600}.material-market-empty{padding:28px!important;color:var(--muted);text-align:center!important}@media (max-width:720px){.material-market-hero{align-items:stretch;flex-direction:column}.material-market-refresh{width:100%}.material-market-summary{justify-content:space-between;gap:12px}}
.market-collector-status{display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#101620}.market-collector-status strong{font-size:12px}.market-collector-status small{margin-left:auto;color:var(--muted);font-size:11px}.market-collector-dot{width:8px;height:8px;border-radius:50%;background:#6d7788;box-shadow:0 0 0 3px rgba(109,119,136,.12)}.market-collector-status.is-running .market-collector-dot{background:#72c98f;box-shadow:0 0 0 3px rgba(114,201,143,.12)}.market-collector-status.is-stopped .market-collector-dot{background:#d27b86;box-shadow:0 0 0 3px rgba(210,123,134,.12)}
.reward-layout{max-width:1380px;margin:0 auto;padding:70px 24px}.reward-layout h1{font-size:44px}.reward-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.reward-toolbar .hint{margin:0;text-align:right}.reward-content-list{display:grid;gap:18px;margin-top:18px}.reward-content-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.reward-content-card header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,#151927,#121722)}.reward-content-card h2{margin:4px 0 0;font-size:21px}.reward-content-card dl{display:flex;gap:18px;margin:0}.reward-content-card dl div{min-width:50px}.reward-content-card dt{color:var(--muted);font-size:12px}.reward-content-card dd{margin:3px 0 0;color:var(--accent-2);font-weight:750}.reward-table-scroll{overflow-x:auto}.reward-table{width:100%;min-width:860px;border-collapse:collapse}.reward-table th,.reward-table td{padding:13px 14px;border-bottom:1px solid #232b3b;text-align:center;font-size:13px;vertical-align:top}.reward-table thead th{color:var(--muted);font-weight:650;background:#0e131d}.reward-table tbody>tr:last-child>*{border-bottom:0}.reward-table tbody>tr>th{color:var(--accent-2);white-space:nowrap}.reward-items{display:grid;gap:5px;margin:0;padding:0;list-style:none;text-align:left}.reward-items li{display:flex;justify-content:space-between;gap:10px}.reward-items li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reward-items li b{color:var(--accent-2);white-space:nowrap}.reward-empty{color:var(--muted)}.reward-empty-state{margin:0;padding:35px;border:1px solid var(--line);border-radius:16px;color:var(--muted);text-align:center;background:var(--panel)}
.reward-table{min-width:1180px;table-layout:fixed}.reward-table th,.reward-table td{text-align:center}.reward-table thead th:nth-child(4){text-align:center!important}.reward-table thead th:nth-child(5),.reward-table thead th:nth-child(6){text-align:left}.reward-col-gate{width:62px}.reward-col-gold{width:96px}.reward-col-name{width:auto}.reward-col-quantity{width:118px}.reward-col-value{width:122px}.reward-col-extra-cost{width:108px}.reward-col-profit{width:116px}.reward-name-cell,.reward-quantity-cell{text-align:left!important}.reward-name-cell,.reward-quantity-cell,.reward-value-cell{padding-left:0!important;padding-right:0!important}.reward-item-list,.reward-quantity-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.reward-item-list li,.reward-quantity-list li{display:flex;align-items:center;width:100%;height:28px;min-height:28px;padding:0 12px;line-height:1;white-space:nowrap;border-bottom:1px solid rgba(126,140,163,.22)}.reward-item-list li:last-child,.reward-quantity-list li:last-child{border-bottom:0}.reward-item-list li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reward-quantity-list{text-align:left}.reward-value-list{text-align:center}.reward-value-list li{justify-content:center}.reward-quantity-list b{color:var(--accent-2);white-space:nowrap}.reward-quantity-empty,.reward-value-empty{visibility:hidden}.reward-extra-toggle{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;width:100%;height:100%;min-width:0;white-space:nowrap;cursor:pointer}.reward-extra-toggle input{flex:0 0 auto;width:14px;height:14px;margin:0;accent-color:var(--accent-2);cursor:pointer}.reward-extra-toggle span{display:inline-block;white-space:nowrap}.reward-extra-toggle.is-excluded span{text-decoration:line-through;opacity:.45}.reward-value-list .is-excluded{opacity:.45}.reward-unpriced{color:var(--muted);font-size:11px}.reward-profit-cell{font-weight:750;white-space:nowrap}.reward-profit-cell.is-positive{color:var(--good)}.reward-profit-cell.is-negative{color:#e37b86}.reward-total-row>*{border-top:1px solid #80692c;border-bottom:1px solid #80692c;background:rgba(255,224,138,.055);font-weight:650}.reward-total-row>th{color:var(--accent-2)!important}.reward-table thead th:nth-child(2),.reward-table thead th:nth-child(3),.reward-table tbody>tr>td:nth-child(2),.reward-table tbody>tr>td:nth-child(3){text-align:center!important;vertical-align:middle!important}.reward-table tbody>tr>th:first-child,.reward-table tbody>tr>td:nth-child(8),.reward-table tbody>tr>td:nth-child(9){text-align:center!important;vertical-align:middle!important}
@media (max-width:720px){.reward-layout{padding:38px 14px}.reward-layout h1{font-size:34px}.reward-toolbar{align-items:flex-start;flex-direction:column}.reward-toolbar .hint{text-align:left}.reward-content-card header{align-items:flex-start;flex-direction:column}.reward-content-card dl{gap:14px}.reward-content-card h2{font-size:19px}}
.reward-toolbar{display:block;padding:12px 18px}.reward-toolbar .market-type{display:block}.reward-toolbar .hint{margin:14px 2px 0;text-align:left}.reward-category{display:grid;grid-template-columns:126px minmax(0,1fr);gap:12px;padding:10px 0}.reward-category+.reward-category{border-top:1px solid #283143}.reward-category h2{display:flex;align-items:center;justify-content:center;margin:0;padding:0 12px;color:var(--accent-2);font-size:13px;font-weight:750;text-align:center;border-right:1px solid #283143}.reward-category-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.reward-dungeon-card{display:grid;min-height:72px;align-content:center;gap:7px;padding:9px 10px;color:#aeb9ca;text-align:center;background:#0d121b;border:1px solid var(--line);border-radius:10px;transition:border-color .16s ease,background .16s ease,color .16s ease}.reward-dungeon-card:hover{color:var(--text);border-color:#65542d;background:#171a1c}.reward-dungeon-card.active{color:var(--accent-2);border-color:#987b2d;background:linear-gradient(135deg,#2b2615,#161817);box-shadow:inset 0 0 0 1px rgba(245,185,66,.1)}.reward-dungeon-main{display:block;width:100%;padding:0;color:inherit;text-align:center;background:transparent;border:0;cursor:pointer}.reward-dungeon-main strong{display:block;overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.reward-card-difficulties{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:4px;width:100%;min-height:18px}.reward-card-difficulty{position:relative;width:100%;min-width:0;padding:5px 4px 1px;overflow:hidden;white-space:nowrap;text-align:center;color:var(--muted);font:inherit;font-size:11px;font-weight:650;line-height:16px;background:transparent;border:0;border-radius:4px;cursor:pointer}.reward-card-difficulty::before{content:"";position:absolute;top:0;left:2px;right:2px;height:3px;border-radius:0 0 3px 3px;background:#657087}.reward-card-difficulty.tone-yellow::before{background:#f2c94c}.reward-card-difficulty.tone-red::before{background:#e0616c}.reward-card-difficulty.tone-purple::before{background:#9b7de3}.reward-card-difficulty.tone-green::before{background:#9bd36a}.reward-card-difficulty:hover{color:var(--text);background:#202838}.reward-card-difficulty.active{color:var(--accent-2);background:rgba(245,185,66,.12)}.reward-difficulty-tabs{display:flex;gap:8px;padding:12px 22px;border-bottom:1px solid var(--line);background:#0e131d}.reward-difficulty-tabs button{display:grid;min-width:92px;gap:2px;padding:8px 13px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:7px;font-weight:650;cursor:pointer}.reward-difficulty-tabs button small{font-size:11px;font-weight:500}.reward-difficulty-tabs button:hover{color:var(--text);background:#171e2b}.reward-difficulty-tabs button.active{color:var(--accent-2);background:#292718;border-color:#80692c}.reward-difficulty-tabs button.active small{color:#d3b76d}@media (max-width:720px){.reward-category{grid-template-columns:1fr;gap:7px}.reward-category h2{padding:0 2px 7px;border-right:0;border-bottom:1px solid #283143}.reward-category-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.reward-dungeon-card{min-height:62px;padding:8px}.reward-dungeon-main strong{font-size:13px}.reward-card-difficulty{font-size:10px}.reward-difficulty-tabs{overflow-x:auto;padding:10px 12px}.reward-difficulty-tabs button{min-width:78px}}
.gem-price-table{width:100%;min-width:0!important;margin:10px 0 22px;border-collapse:collapse;table-layout:fixed}.gem-price-table th,.gem-price-table td,.gem-price-table th:first-child,.gem-price-table td:first-child{width:33.333%!important;padding:11px 10px;border-bottom:1px solid #283143;text-align:center!important;white-space:nowrap}.gem-price-table th{color:var(--muted)}.gem-price-table td{color:var(--accent-2);font-weight: 650}.gem-price-table tbody th{color:var(--text)}#gem-automatic-list h3{margin:20px 0 4px;font-size:14px}.gem-grade{display:inline-flex;margin-left:5px;padding:1px 5px;border:1px solid currentColor;border-radius:4px;font-size:10px;font-weight: 650;line-height:1.35}.gem-grade.ancient{color:#e3c7a1}.gem-grade.relic{color:#fb7300}.gem-grade.legendary{color:#f5a742}.gem-grade.heroic{color:#a98cff}.gem-grade.rare{color:#5fb6ff}
button, input { font: inherit; }
.hero { border-bottom: 1px solid var(--line); background: radial-gradient(circle at 70% 20%, rgba(245,185,66,.17), transparent 35%), #0c0f15; }
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 68px 24px 56px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.eyebrow, .kicker { letter-spacing: .12em; color: var(--accent); font-size: 12px; font-weight: 650; }
h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.03; margin: 12px 0 18px; max-width: 820px; }
h1 span { color: var(--accent-2); }
.hero-copy { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-badge { min-width: 185px; border: 1px solid #463c26; border-radius: 20px; padding: 22px; background: rgba(245,185,66,.08); }
.hero-badge strong { display: block; font-size: 28px; color: var(--accent-2); }
.hero-badge span { color: var(--muted); font-size: 13px; }
.layout { max-width: 1180px; margin: 0 auto; padding: 30px 24px 80px; }
.workspace-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; background: #0d121b; border: 1px solid var(--line); border-radius: 14px; }
.workspace-tab { min-height: 52px; padding: 12px 18px; color: var(--muted); font-size: 16px; font-weight: 650; text-align: center; background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.workspace-tab:last-child { border-right: 0; }
.workspace-tab:hover { color: var(--text); background: rgba(255, 255, 255, .035); }
.workspace-tab.active { color: var(--accent-2); background: linear-gradient(120deg, #292718, #1c1c19); box-shadow: inset 0 -2px 0 var(--accent); }
.workspace-tab:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent-2); outline-offset: -2px; }
.workspace-view[hidden] { display: none; }
.time-ranking-panel { min-height: 220px; }
.time-ranking-empty-state { display: grid; gap: 7px; min-height: 160px; padding: 25px; place-content: center; text-align: center; background: var(--panel-2); border: 1px dashed #46536a; border-radius: 14px; }
.time-ranking-empty-state strong { color: var(--accent-2); font-size: 16px; }
.time-ranking-empty-state p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.time-ranking-head { align-items: center; }
.time-ranking-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.time-ranking-head-actions > span { color: var(--muted); font-size: 11px; }
.time-ranking-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.time-ranking-summary-card { min-width: 0; padding: 11px 12px; background: #111722; border: 1px solid #2d3749; border-radius: 9px; }
.time-ranking-summary-card span, .time-ranking-summary-card strong, .time-ranking-summary-card small { display: block; }
.time-ranking-summary-card span { color: var(--muted); font-size: 10px; }
.time-ranking-summary-card strong { margin-top: 4px; color: var(--text); font-size: 15px; white-space: nowrap; }
.time-ranking-summary-card small { margin-top: 3px; color: #6f7c91; font-size: 9px; }
.time-ranking-summary-card.is-doing { border-color: #4f5c39; background: rgba(116,198,157,.045); }
.time-ranking-summary-card.is-doing strong { color: #8ce0b5; }
.time-ranking-summary-card.is-skipped { border-color: #4d343a; background: rgba(227,123,134,.04); }
.time-ranking-summary-card.is-skipped strong { color: #e59aa3; }
.time-ranking-table-wrap { overflow-x: auto; background: #101620; border: 1px solid var(--line); border-radius: 12px; }
.time-ranking-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.time-ranking-table th, .time-ranking-table td { padding: 10px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid #273043; }
.time-ranking-table thead th { color: #93a8ca; font-size: 11px; background: #0d121b; }
.time-ranking-table thead th:nth-child(1) { width: 58px; }
.time-ranking-table thead th:nth-child(2) { width: 170px; }
.time-ranking-table thead th:nth-child(3) { width: auto; }
.time-ranking-table thead th:nth-child(4) { width: 132px; }
.time-ranking-table thead th:nth-child(5) { width: 120px; }
.time-ranking-table thead th:nth-child(6) { width: 160px; }
.time-ranking-row { cursor: pointer; transition: background .12s ease, opacity .12s ease; }
.time-ranking-row:hover { background: rgba(255,217,120,.055); }
.time-ranking-row.is-skipped { opacity: .52; }
.time-ranking-rank { color: var(--muted); font-weight: 750; }
.time-ranking-character { text-align: left !important; }
.time-ranking-character strong, .time-ranking-character small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-ranking-character strong { color: var(--text); font-size: 12px; }
.time-ranking-character small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.time-ranking-content { overflow: hidden; color: var(--text); font-size: 12px; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; }
.time-ranking-value, .time-ranking-time { color: #dce4f1; font-size: 12px; font-weight: 700; white-space: nowrap; }
.time-ranking-hourly { color: var(--accent-2); font-size: 12px; font-weight: 800; white-space: nowrap; }
.time-ranking-gold, .time-ranking-krw { display: block; }
.time-ranking-krw { margin-top: 2px; color: #7f8ca1; font-size: 9px; font-weight: 650; line-height: 1.2; }
.time-ranking-summary-card .time-ranking-summary-krw { margin-top: 2px; color: #9aa8bc; font-size: 9px; font-weight: 700; }
.time-ranking-divider-row td { padding: 0 !important; border-bottom: 0 !important; background: #101620; }
.time-ranking-divider { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; }
.time-ranking-divider::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px solid var(--accent); transform: translateY(-50%); }
.time-ranking-divider span { position: relative; z-index: 1; padding: 2px 10px; color: var(--accent-2); font-size: 10px; font-weight: 750; background: #101620; border: 1px solid #725b1d; border-radius: 999px; }
.time-ranking-footnote { margin: 10px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
@media (max-width: 980px) {
  .time-ranking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-ranking-summary-card:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .time-ranking-head { align-items: flex-start; flex-direction: column; }
  .time-ranking-head-actions { justify-content: flex-start; }
  .time-ranking-summary { grid-template-columns: minmax(0, 1fr); }
  .time-ranking-summary-card:last-child { grid-column: auto; }
}
.chores-empty-state { display: grid; gap: 7px; min-height: 160px; padding: 25px; place-content: center; text-align: center; background: var(--panel-2); border: 1px dashed #46536a; border-radius: 14px; }
.chores-empty-state strong { color: var(--accent-2); font-size: 16px; }
.chores-empty-state p { max-width: 460px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.chores-guide { color: var(--muted); font-size: 12px; font-weight: var(--homework-text-weight); }
.chores-roster-list { display: grid; gap: 14px; }
.chores-roster-card { overflow: hidden; background: #101620; border: 1px solid var(--line); border-radius: 14px; }
.chores-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: linear-gradient(120deg, rgba(199,93,122,.08), rgba(245,185,66,.035)); border-bottom: 1px solid var(--line); }
.chores-roster-head strong { font-size: 14px; font-weight: var(--homework-text-weight); }
.chores-roster-head span { color: var(--muted); font-size: 11px; }
.chores-roster-head-actions { display: flex; align-items: center; gap: 8px; }
.homework-table-settings-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; color: #d7deea; font: inherit; font-size: 16px; background: #171e2a; border: 1px solid #3d495e; border-radius: 8px; cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; }
.homework-table-settings-button:hover { color: var(--accent-2); background: #21293a; border-color: #80692c; transform: translateY(-1px); }
.homework-table-settings-button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.chores-table-wrap { margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-color: #6b7890 #101620; scrollbar-width: thin; }
.chores-table { width: max-content; min-width: 100%; table-layout: fixed; }
.chores-table th, .chores-table td { width: 70px; min-width: 70px; max-width: 70px; padding: 8px 3px; text-align: center; font-size: var(--primary-data-font-size); font-weight: var(--homework-text-weight); white-space: normal; }
.chores-table th:not(:first-child), .chores-table td:not(:first-child) { text-align: center; }
.chores-table thead th { vertical-align: bottom; background: #0d121b; }
.chores-table thead th:first-child, .chores-table tbody th { position: sticky; left: 0; z-index: 2; min-width: 200px; width: 200px; max-width: 200px; text-align: left; background: #121722; }
.chores-table thead th:first-child { z-index: 3; text-align: center; background: #0d121b; }
.chores-table tbody th { padding-left: 10px; text-align: left; }
.chores-table thead th:nth-child(2), .chores-table td.homework-item-level { min-width: 52px; width: 52px; max-width: 52px; }
.chores-table thead th span, .chores-table thead th small, .chores-table tbody th strong, .chores-table tbody th small { display: block; }
.chores-table thead th span { overflow: hidden; color: var(--text); font-size: var(--primary-data-font-size); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.chores-table small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: var(--homework-text-weight); }
.chores-table tbody th strong { overflow: hidden; font-size: var(--primary-data-font-size); font-weight: var(--homework-text-weight); text-overflow: ellipsis; white-space: nowrap; }
.chores-table td.is-unavailable { color: transparent; background: transparent; }
.chores-table td[data-homework-cell]:not(.is-unavailable) { cursor: pointer; }
.chores-table td[data-homework-cell]:not(.is-unavailable):hover { background: rgba(255,217,120,.055); }
.homework-check { position: relative; display: inline-grid; width: 26px; height: 26px; place-items: center; cursor: pointer; }
.homework-check input { position: absolute; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
.homework-checkmark { display: grid; width: 24px; height: 24px; place-items: center; color: transparent; font-size: 17px; font-weight: 650; line-height: 1; background: #111823; border: 2px solid var(--homework-check-color, #ffd978); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.22); transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease; }
.homework-check:hover .homework-checkmark { border-color: var(--homework-check-color, #ffd978); transform: translateY(-1px); }
.homework-check input:checked + .homework-checkmark { color: #10141c; background: var(--homework-check-color, #ffd978); border-color: var(--homework-check-color, #ffd978); }
.homework-check input:focus-visible + .homework-checkmark { outline: 2px solid #fff; outline-offset: 2px; }
.homework-add-cell { min-width: 70px !important; }
.homework-add-cell button, .chores-load-alts { padding: 6px 9px; color: #dfe7f5; font: inherit; font-size: 11px; font-weight: 650; white-space: nowrap; background: #273043; border: 1px solid #46536a; border-radius: 6px; cursor: pointer; }
.homework-add-cell button:hover, .chores-load-alts:hover { color: var(--accent-2); border-color: #9a7b2e; }
.chores-load-alts { margin-left: auto; }
.chores-settings-menu { position: fixed; z-index: 100; inset: 0; width: min(390px, calc(100vw - 24px)); height: fit-content; max-height: min(520px, calc(100vh - 24px)); margin: auto; overflow: auto; padding: 18px; background: linear-gradient(145deg, #1b2433, #111722); border: 1px solid rgba(245,185,66,.72); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.52), 0 0 0 100vmax rgba(0,0,0,.48); }
.chores-settings-menu[hidden] { display: none; }
.chores-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--accent-2); }
.chores-settings-head button { width: 24px; height: 24px; padding: 0; color: #cbd4e3; font-size: 20px; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.chores-settings-menu p { margin: 7px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.chores-settings-list { display: grid; gap: 5px; }
.chores-settings-list label { display: grid; grid-template-columns: 16px minmax(0, 1fr) max-content; align-items: center; gap: 7px; min-height: 31px; padding: 5px 4px; color: var(--text); font-size: 11px; cursor: pointer; }
.chores-settings-list label:hover { background: rgba(255,255,255,.04); }
.chores-settings-list input { width: 14px; height: 14px; padding: 0; margin: 0; accent-color: var(--homework-check-color, #ffd978); }
.chores-settings-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chores-settings-list small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.chores-settings-empty { padding: 8px 4px; color: var(--muted); font-size: 12px; }
.chores-setting-field { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 9px; margin: 10px 0; color: #cbd4e3; font-size: 12px; font-weight: 650; }
.chores-setting-field input, .chores-setting-field select { min-width: 0; padding: 8px 9px; color: var(--text); background: #0d121b; border: 1px solid #46536a; border-radius: 6px; }
.chores-setting-field input[type="color"] { height: 34px; padding: 3px; cursor: pointer; }
.homework-color-preset-wrap { margin: -2px 0 12px; }
.homework-color-preset-title { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.homework-color-presets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.homework-color-preset { display: grid; gap: 4px; place-items: center; min-width: 0; padding: 6px 3px 5px; color: #b9c4d6; font: inherit; font-size: 10px; font-weight: 650; background: #0d121b; border: 1px solid #334158; border-radius: 7px; cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.homework-color-preset:hover { border-color: #71809a; transform: translateY(-1px); }
.homework-color-preset.active { color: var(--text); background: #171e2b; border-color: var(--homework-preset-color); box-shadow: inset 0 0 0 1px var(--homework-preset-color); }
.homework-color-preset-swatch { width: 24px; height: 24px; background: var(--homework-preset-color); border: 1px solid rgba(255,255,255,.34); border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,.24); }
.homework-color-preset small { color: inherit; font-size: 10px; line-height: 1; }

.chores-settings-subtitle { display: block; margin: 13px 0 3px; color: var(--accent-2); font-size: 12px; }
.chores-settings-save { width: 100%; margin-top: 15px; padding: 9px; color: #17130b; font: inherit; font-size: 13px; font-weight: 650; background: var(--accent-2); border: 0; border-radius: 7px; cursor: pointer; }
.chores-settings-delete { width: 100%; margin-top: 8px; padding: 8px; color: #ffd9e1; font: inherit; font-size: 12px; font-weight: 650; background: #6c3444; border: 1px solid #a2526a; border-radius: 7px; cursor: pointer; }
.homework-table-settings-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #334158; }
.homework-table-settings-section:first-of-type { margin-top: 10px; }
.homework-table-settings-section > strong { display: block; margin-bottom: 8px; color: var(--accent-2); font-size: 12px; }
.homework-settings-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.homework-settings-secondary { width: 100%; min-height: 36px; padding: 8px 9px; color: #dfe7f5; font: inherit; font-size: 11px; font-weight: 650; background: #20293a; border: 1px solid #46536a; border-radius: 7px; cursor: pointer; transition: color .14s ease, border-color .14s ease, background .14s ease; }
.homework-settings-secondary:hover { color: var(--accent-2); background: #272f40; border-color: #80692c; }
.homework-hidden-character-list { gap: 7px; }
.homework-add-heading { min-width: 44px !important; width: 44px !important; max-width: 44px !important; padding: 0 !important; }
.homework-divider-heading, .homework-divider-cell { min-width: 24px !important; width: 24px !important; max-width: 24px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 0 !important; cursor: grab; }
.homework-divider-heading.is-divider-hovered, .homework-divider-cell.is-divider-hovered { background: rgba(255,217,120,.28) !important; box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 14px rgba(255,217,120,.34); }
.homework-divider-heading.is-divider-hovered::after { content: '⋮'; display: grid; height: 100%; place-items: center; color: #161109; font-size: 20px; font-weight: 650; }
.chores-table [data-homework-drag-key] { cursor: grab; user-select: none; }
.chores-table [data-homework-drag-key].is-dragging { opacity: .45; }
.chores-table [data-homework-drag-key].is-drag-over { box-shadow: inset -3px 0 0 var(--accent-2); }
.chores-table [data-homework-character-drag] { cursor: grab; user-select: none; }
.chores-table [data-homework-character-drag].is-character-dragging { opacity: .45; }
.chores-table tr.is-character-drag-before > th,
.chores-table tr.is-character-drag-before > td { box-shadow: inset 0 3px 0 var(--accent-2); }
.chores-table tr.is-character-drag-after > th,
.chores-table tr.is-character-drag-after > td { box-shadow: inset 0 -3px 0 var(--accent-2); }
.chores-table th.homework-table-fill, .chores-table td.homework-table-fill { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0; }
.homework-add-heading button { display: grid; width: 100%; min-height: 42px; place-items: center; padding: 0; color: var(--accent-2); font-size: 22px; font-weight: 650; background: transparent; border: 0; cursor: pointer; }
.homework-add-heading button:hover { background: rgba(245,185,66,.09); }
.saved-roster-help { margin: 7px 0 0; }
.my-roster-title-row { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.my-roster-title-row h2 { margin: 0; }
.saved-roster-reorder-toggle { padding: 5px 9px; color: #dfe7f5; font: inherit; font-size: 11px; font-weight: 650; background: #273043; border: 1px solid #46536a; border-radius: 7px; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.saved-roster-reorder-toggle:hover, .saved-roster-reorder-toggle.active { color: var(--accent-2); border-color: #80692c; background: #292718; }
.saved-roster-reorder-panel { display: grid; gap: 10px; margin: -4px 0 16px; padding: 14px; background: #0d121b; border: 1px solid #364156; border-radius: 12px; }
.saved-roster-reorder-panel[hidden] { display: none; }
.saved-roster-reorder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.saved-roster-reorder-head strong { color: var(--text); font-size: 13px; }
.saved-roster-reorder-head span { color: var(--muted); font-size: 11px; }
.saved-roster-reorder-list { display: grid; gap: 7px; }
.saved-roster-reorder-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; align-items: center; gap: 9px; min-height: 38px; padding: 6px 8px; background: #121722; border: 1px solid #273043; border-radius: 9px; cursor: grab; user-select: none; transition: border-color .12s ease, background .12s ease, opacity .12s ease, transform .12s ease; }
.saved-roster-reorder-row:active { cursor: grabbing; }
.saved-roster-reorder-row.dragging { opacity: .48; background: #171e2b; }
.saved-roster-reorder-row.drop-before::before, .saved-roster-reorder-row.drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 7px rgba(245,185,66,.35); }
.saved-roster-reorder-row.drop-before::before { top: -5px; }
.saved-roster-reorder-row.drop-after::after { bottom: -5px; }
.saved-roster-reorder-order { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--accent-2); font-size: 11px; font-weight: 650; background: #292718; border: 1px solid #5d4e25; border-radius: 6px; }
.saved-roster-reorder-row strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.saved-roster-drag-hint { color: #7f8ca0; font-size: 16px; font-weight: 650; letter-spacing: -4px; text-align: center; pointer-events: none; }
.saved-roster-reorder-row:hover .saved-roster-drag-hint { color: var(--accent-2); }
.saved-roster-reorder-empty { padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.saved-roster-list { display: grid; gap: 14px; }
.saved-roster-empty { min-height: 140px; display: grid; place-items: center; padding: 22px; color: var(--muted); text-align: center; line-height: 1.7; background: var(--panel-2); border: 1px dashed #46536a; border-radius: 14px; }
.saved-roster-card { overflow: visible; background: #101620; border: 1px solid var(--line); border-radius: 14px; }
.saved-roster-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: linear-gradient(120deg, rgba(199,93,122,.08), rgba(245,185,66,.035)); border-bottom: 1px solid var(--line); }
.saved-roster-card-head > div:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.saved-roster-card-head strong { overflow: hidden; color: var(--text); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.saved-roster-account-label { flex: 0 0 auto; color: var(--text); font-size: 15px; font-weight: var(--roster-text-weight); line-height: 1.4; }
.saved-roster-account-character { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.saved-roster-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.saved-roster-open, .saved-roster-remove { padding: 6px 9px; color: #dfe7f5; font: inherit; font-size: 11px; font-weight: 650; white-space: nowrap; background: #273043; border: 1px solid #46536a; border-radius: 6px; cursor: pointer; }
.saved-roster-open:hover { color: var(--accent-2); border-color: #9a7b2e; }
.saved-roster-remove { color: #fff7fa; background: #7f3f53; border-color: #a2526a; }
.saved-roster-remove:hover { background: #965069; border-color: #bf667f; }
.saved-roster-meta { padding: 9px 16px; color: var(--muted); font-size: 11px; border-bottom: 1px solid #232b3b; }
.saved-roster-loading, .saved-roster-error { min-height: 92px; display: grid; place-items: center; padding: 18px; color: var(--muted); font-size: 12px; text-align: center; }
.saved-roster-error { color: #e2a9b8; }
.saved-roster-card .saved-roster-meta { border-bottom: 0; }
.saved-roster-card .roster-divider td { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.panel { border: 1px solid var(--line); background: var(--panel); border-radius: 20px; padding: 24px; margin-bottom: 20px; box-shadow: 0 14px 45px rgba(0,0,0,.18); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
h2 { margin: 3px 0 0; font-size: 22px; }
.status { color: var(--muted); font-size: 13px; padding: 7px 10px; border-radius: 999px; background: var(--panel-2); }
.rate-grid, .summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rate-card { text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.rate-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(245,185,66,.25); }
.rate-card span, .rate-card small { color: var(--muted); display: block; }
.rate-card strong { display: block; font-size: 26px; margin: 8px 0 4px; }
.rate-card b { color: var(--accent-2); }
.inline-form { margin-top: 16px; display: flex; gap: 10px; align-items: end; }
.inline-form.wide input { flex: 1; }
label { color: var(--muted); font-size: 13px; }
input { width: 100%; background: #0d121b; color: var(--text); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; outline: none; }
input:focus { border-color: #70613c; }
.btn { border: 0; background: var(--accent); color: #17130b; font-weight: 650; border-radius: 11px; padding: 11px 16px; cursor: pointer; white-space: nowrap; }
.btn.secondary { background: #273043; color: var(--text); }
#load-roster { background: var(--roster-max); }
.hint, .muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.roster-result { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.char-chip { border: 1px solid var(--line); padding: 8px 10px; border-radius: 999px; color: #cbd4e3; }
.roster-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; padding-left: var(--roster-controls-left-offset); color: var(--muted); font-size: 13px; }
.roster-sort-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-width: 196px; padding: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0d121b; }
.roster-sort-indicator { position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: 7px; background: linear-gradient(145deg, #3a3320, #292718); border: 1px solid #80692c; transition: transform .22s ease; }
.roster-sort-switch.combat-power-active .roster-sort-indicator { transform: translateX(100%); }
.roster-sort { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); border-radius: 7px; padding: 7px 10px; cursor: pointer; }
.roster-sort.active { color: var(--accent-2); font-weight: 650; }
.api-data-inspector { margin-top: 12px; color: var(--muted); font-size: 12px; }
.api-data-inspector summary { cursor: pointer; width: fit-content; }
.api-data-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.api-data-links a { color: #bfc9db; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; }
.api-data-links a:hover { color: var(--accent-2); border-color: #766532; }
.roster-panel { height: auto; min-height: 0; overflow: visible; }
.roster-table-wrap { width: 100%; max-width: 100%; margin-top: 8px; overflow: visible; }
.roster-table { width: 100%; min-width: 0; table-layout: fixed; }
.roster-table th, .roster-table td { min-width: 0; white-space: nowrap; padding: 10px clamp(2px, .45vw, 7px); font-size: var(--primary-data-font-size); }
.roster-table th.roster-refresh-heading, .roster-table td.roster-refresh-cell { width: 6.20% !important; min-width: 0; padding-left: 3px; padding-right: 3px; text-align: center !important; }
.roster-table th.roster-character-heading, .roster-table td.roster-character-cell { width: 14.47% !important; min-width: 0; white-space: nowrap !important; word-break: keep-all; }
.roster-table th.roster-character-heading { text-align: center !important; }
.roster-table td.roster-character-cell { text-align: left !important; }
.roster-character-heading { position: relative; padding-left: 50px !important; padding-right: clamp(2px, .45vw, 7px) !important; }
.roster-character-heading > span:first-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.roster-heading-actions { position: absolute; top: 50%; left: 7px; display: inline-flex; align-items: center; gap: 4px; transform: translateY(-50%); }
.roster-refresh-button, .roster-pin-button { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 3px 6px; box-sizing: border-box; color: #dfe7f5; font: inherit; font-size: 10px; font-weight: 650; line-height: 1; white-space: nowrap; vertical-align: middle; background: #273043; border: 1px solid #46536a; border-radius: 5px; cursor: pointer; }
.roster-refresh-button:hover:not(:disabled), .roster-pin-button:hover:not(:disabled) { color: var(--accent-2); border-color: #9a7b2e; }
.roster-refresh-button:disabled, .roster-pin-button:disabled { color: #8490a4; cursor: wait; opacity: .7; }
.roster-pin-button { color: #fff7fa; background: #c75d7a; border-color: #d77a94; }
.roster-pin-button:hover:not(:disabled) { color: #fff; background: #d16b88; border-color: #e18aa2; }
.roster-pin-button.active { color: #fff7fa; background: #b95773; border-color: #cf708a; }
.roster-pin-button:disabled { color: #fff7fa; background: #c75d7a; border-color: #d77a94; cursor: not-allowed; opacity: 1; }
.roster-character-refresh-button { min-width: 40px; padding: 4px 7px; color: #dfe7f5; font: inherit; font-size: 10px; font-weight: 650; line-height: 1; background: #273043; border: 1px solid #46536a; border-radius: 5px; cursor: pointer; }
.roster-character-refresh-button:hover:not(:disabled) { color: var(--accent-2); border-color: #9a7b2e; }
.roster-character-refresh-button:disabled { color: #8490a4; cursor: wait; opacity: .7; }
.roster-table th.roster-job-heading, .roster-table td.roster-job-cell { width: 4.08% !important; min-width: 0; text-align: center; }
.roster-table th.bracelet-heading, .roster-table th.accessory-heading, .roster-table th.gem-heading, .roster-table th.quality-heading, .roster-table th.arkgrid-core-heading { position: relative; min-width: 0 !important; }
.roster-table th.bracelet-heading, .roster-table td:nth-child(9) { width: 7.60% !important; }
.roster-table th.accessory-heading, .roster-table td:nth-child(10) { width: 7.60% !important; }
.roster-table th.gem-heading, .roster-table td:nth-child(11) { width: 7.60% !important; }
.roster-table th.quality-heading, .roster-table td:nth-child(14) { width: 6.02% !important; }
.roster-table th.arkgrid-core-heading, .roster-table td:nth-child(15) { width: 6.95% !important; }
.roster-table th.arkgrid-core-settings-heading, .roster-table td.arkgrid-core-settings-cell { width: 3.15% !important; min-width: 0 !important; padding-left: 2px; padding-right: 2px; }
.bracelet-heading > span, .accessory-heading > span, .gem-heading > span, .quality-heading > span { display:block; }
.bracelet-mode-mini { position: absolute; z-index: 2; bottom: calc(100% - 7px); left: 50%; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1; transform: translate(-50%, var(--roster-header-toggle-y)); }
.bracelet-mode-toggle { position: relative; width: 25px; height: 14px; padding: 0; border: 0; border-radius: 999px; background: #3b4557; cursor: pointer; transition: background .16s ease; }
.bracelet-mode-toggle.active { background: var(--roster-max); }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #f8fafc; box-shadow: 0 1px 3px rgba(0,0,0,.32); transition: transform .16s ease; }
.bracelet-mode-toggle.active .toggle-knob { transform: translateX(11px); }
.arkgrid-core-settings-toggle { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px; padding: 0; color: #aeb9ca; vertical-align: 1px; background: transparent; border: 0; cursor: pointer; font-size: 10px; line-height: 1; }
.arkgrid-core-settings-toggle:hover, .arkgrid-core-settings-toggle.active { color: var(--roster-max); }
.arkgrid-core-settings-control { position: relative; display: inline-flex; align-items: center; }
.arkgrid-core-settings-panel { position: absolute; z-index: 40; top: -11px; right: calc(100% + 10px); width: 340px; padding: 12px; color: var(--text); text-align: left; background: linear-gradient(145deg, #1b2433, #111722); border: 1px solid rgba(245, 185, 66, .72); border-radius: 9px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.arkgrid-core-setting-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--accent-2); font-size: 13px; }
.arkgrid-core-setting-title button { width: 20px; height: 20px; padding: 0; color: #aeb9ca; font-size: 18px; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.arkgrid-core-setting-title button:hover { color: var(--roster-max); }
.arkgrid-core-setting-description, .arkgrid-core-setting-empty { margin: 5px 0 9px; color: #aeb9ca; font-size: 11px; font-weight: 650; line-height: 1.45; }
.arkgrid-core-class-select { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #aeb9ca; font-size: 11px; font-weight: 650; }
.arkgrid-core-class-select select { min-width: 0; flex: 1; padding: 5px 7px; color: var(--text); font: inherit; background: #0e1520; border: 1px solid #334158; border-radius: 5px; }
.arkgrid-core-setting-list { display: grid; gap: 8px; }
.arkgrid-core-setting-group { padding-top: 7px; border-top: 1px solid rgba(174, 185, 202, .18); }
.arkgrid-core-setting-group h4 { margin: 0 0 4px; color: var(--accent-2); font-size: 11px; }
.arkgrid-core-setting-group .arkgrid-core-setting-empty { margin: 0; }
.arkgrid-core-setting-option { display: grid; grid-template-columns: 15px minmax(0, 1fr) max-content; align-items: center; gap: 6px; min-height: 23px; cursor: pointer; font-size: 11px; font-weight: 650; }
.arkgrid-core-setting-option input { width: 13px; height: 13px; margin: 0; accent-color: var(--roster-max); }
.arkgrid-core-setting-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arkgrid-core-setting-option b { color: var(--roster-max); font-size: 10px; }
.arkgrid-core-setting-option input:not(:checked) + span { color: #aeb9ca; text-decoration: line-through; }
.arkgrid-core-setting-option input:not(:checked) ~ b { color: #aeb9ca; }
.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; }
.roster-job { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.class-symbol-frame { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 3px; border: 1px solid rgba(214, 222, 235, .58); border-radius: 6px; background: rgba(214, 222, 235, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.class-symbol-frame.is-supporter { border-color: rgba(115, 229, 98, .92); background: rgba(115, 229, 98, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 0 7px rgba(115, 229, 98, .16); }
.class-symbol-frame.is-dealer { border-color: rgba(214, 112, 96, .92); background: rgba(214, 112, 96, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 0 7px rgba(214, 112, 96, .16); }
.class-symbol-frame.is-unknown { border-color: rgba(214, 222, 235, .58); background: rgba(214, 222, 235, .05); }
.class-symbol { width: 100%; height: 100%; display: block; object-fit: contain; opacity: .95; filter: brightness(0) invert(1); }
.roster-table td { color: var(--text); }
.weapon-enhancement, .armor-enhancement { position: relative; display: inline-block; color: var(--text); font-weight: var(--roster-text-weight); cursor: help; }
.roster-table .is-at-max { color: var(--roster-max); font-size: inherit; font-weight: var(--roster-text-weight); line-height: inherit; }
.roster-table .roster-gem-value { font: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.roster-table .is-esther { color: #40d9d0; font-size: inherit; font-weight: var(--roster-text-weight); line-height: inherit; text-shadow: 0 0 8px rgba(64, 217, 208, .18); }
.weapon-advanced-refinement { position: absolute; left: calc(100% + 2px); top: 50%; color: #9faabd; font-size: 9px; font-weight: 650; line-height: 1; text-decoration: none; transform: translateY(-50%); }
.spec-tooltip { position: relative; display: inline-flex; justify-content: center; cursor: help; outline: none; }
.spec-tooltip-card { position: absolute; z-index: 20; top: calc(100% + 9px); left: 50%; display: grid; gap: 4px; width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px; color: #e7edf8; font-size: 12px; font-weight: 650; line-height: 1.55; text-align: left; pointer-events: none; visibility: hidden; opacity: 0; background: linear-gradient(145deg, #1b2433, #111722); border: 1px solid rgba(245, 185, 66, .65); border-radius: 9px; box-shadow: 0 12px 28px rgba(0, 0, 0, .42); transform: translate(-50%, -4px); transition: opacity .14s ease, transform .14s ease, visibility .14s ease; }
.spec-tooltip-card-compact { max-width: min(320px, calc(100vw - 32px)); }
.spec-tooltip-card-equipment, .spec-tooltip-card-equipment .spec-tooltip-note { font-weight: 650; }
.spec-tooltip-card-stone { max-width: min(320px, calc(100vw - 32px)); }
.spec-tooltip-card-gems { max-width: min(420px, calc(100vw - 32px)); }
.spec-tooltip-card-core-help { max-width: min(300px, calc(100vw - 32px)); text-align: center; }
.spec-tooltip-line { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; gap: 12px; }
.spec-tooltip-four-columns { grid-template-columns: 118px 48px minmax(128px, 1fr) 44px 58px; gap: 8px; }
.spec-tooltip-core-columns { grid-template-columns: minmax(0, 1fr) 48px 44px 52px; gap: 8px; }
.spec-tooltip-engraving-columns { grid-template-columns: minmax(0, 1fr) 44px 46px; gap: 8px; }
.spec-tooltip-core-columns .spec-tooltip-table-cell:last-child { text-align: right; }
.spec-tooltip-engraving-columns .spec-tooltip-table-cell:nth-child(2), .spec-tooltip-engraving-columns .spec-tooltip-table-cell:last-child { text-align: center; }
.spec-tooltip-core-columns .spec-tooltip-table-cell.spec-tooltip-core-name-max { color: var(--roster-max); }
.spec-tooltip-separator.spec-tooltip-core-separator { background: rgba(245, 185, 66, .72); }
.spec-tooltip-table-cell { min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec-tooltip-four-columns .spec-tooltip-table-cell:nth-last-child(2), .spec-tooltip-four-columns .spec-tooltip-table-cell:last-child { color: var(--roster-max); font-weight: 650; }
.spec-tooltip-four-columns .spec-tooltip-table-cell:last-child { text-align: right; }
.spec-tooltip-four-columns .spec-tooltip-table-cell.spec-tooltip-quality-normal { color: var(--text); font-weight: 650; }
.spec-tooltip-four-columns .spec-tooltip-table-cell.spec-tooltip-token-max { color: var(--roster-max); font-weight: 650; }
.spec-tooltip-card-accessory .spec-tooltip-four-columns, .spec-tooltip-card-gems .spec-tooltip-four-columns { grid-template-columns: minmax(190px, 1fr) 0 0 44px 58px; }
.spec-tooltip-card-support-breakdown { max-width: min(560px, calc(100vw - 32px)); }
.spec-tooltip-card-support-breakdown .spec-tooltip-four-columns {
  grid-template-columns: minmax(190px, 1fr) max-content max-content 24px 58px;
  gap: 6px;
}
.spec-tooltip-card-support-breakdown .spec-tooltip-four-columns .spec-tooltip-table-cell:first-child {
  display: flex;
  align-items: center;
}
.spec-tooltip-card-support-breakdown .spec-tooltip-four-columns .spec-tooltip-table-cell:first-child .spec-option-tier {
  flex: 0 0 auto;
  margin-right: 5px;
  vertical-align: initial;
}
.spec-tooltip-card-support-breakdown .spec-tooltip-four-columns .spec-tooltip-table-cell:nth-child(2),
.spec-tooltip-card-support-breakdown .spec-tooltip-four-columns .spec-tooltip-table-cell:nth-child(3) {
  text-align: right;
}
.spec-tooltip-card-support-breakdown .spec-tooltip-support-option-row {
  padding: 1px 0;
}
.spec-tooltip-card-support-accessory .spec-tooltip-support-accessory-group-title {
  padding: 2px 0 0;
}
.spec-tooltip-card-support-accessory .spec-tooltip-support-accessory-group-label {
  color: #aeb9ca;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
}
.spec-tooltip-card-support-accessory .spec-tooltip-support-accessory-group-separator {
  margin: 3px 0;
}
.spec-tooltip-card-combat-power { max-width: min(390px, calc(100vw - 32px)); }
.spec-tooltip-card-bracelet .spec-tooltip-label, .spec-tooltip-card-accessory .spec-tooltip-four-columns .spec-tooltip-table-cell:first-child { display: flex; align-items: center; }
.spec-tooltip-card-bracelet .spec-tooltip-label .spec-option-tier, .spec-tooltip-card-accessory .spec-tooltip-four-columns .spec-tooltip-table-cell:first-child .spec-option-tier { flex: 0 0 auto; margin-right: 5px; vertical-align: initial; }
.spec-tooltip-line > span { min-width: 0; overflow-wrap: anywhere; }
.spec-tooltip-label { display: block; min-width: 0; overflow-wrap: anywhere; }
.spec-tooltip-option-columns { display: grid; grid-template-columns: 64px 46px minmax(0, 1fr); gap: 4px; align-items: baseline; }
.spec-tooltip-label-parts { display: inline; }
.spec-tooltip-token-max { color: var(--roster-max); }
.spec-tooltip-label .spec-option-tier { margin-right: 5px; vertical-align: -3px; }
.spec-option-tags {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  width: max-content;
  padding-right: 10px;
  column-gap: 16px;
}
.spec-option-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.spec-option-tag .spec-option-tier { margin-right: 0; }
.spec-tooltip-card-accessory-market {
  grid-template-columns: max-content max-content max-content max-content;
  column-gap: 16px;
}
.spec-tooltip-card-accessory-market .spec-tooltip-line {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 16px;
}
.spec-tooltip-card-accessory-market .spec-tooltip-label {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
}
.spec-tooltip-card-accessory-market .spec-option-tags {
  display: contents;
}
.spec-tooltip-card-accessory-market .spec-tooltip-value {
  grid-column: 4;
  padding-left: 10px;
  text-align: right;
}
.spec-tooltip-card-grid-pair {
  grid-template-columns: max-content max-content;
  column-gap: 16px;
}
.spec-tooltip-card-grid-three {
  grid-template-columns: max-content max-content max-content;
  column-gap: 12px;
}
.spec-tooltip-card-grid-four {
  grid-template-columns: max-content max-content max-content max-content;
  column-gap: 12px;
}
.spec-tooltip-card-grid-five {
  grid-template-columns: max-content max-content max-content max-content max-content;
  column-gap: 10px;
}
.spec-tooltip-card-grid-pair > .spec-tooltip-line,
.spec-tooltip-card-grid-three > .spec-tooltip-line,
.spec-tooltip-card-grid-four > .spec-tooltip-line,
.spec-tooltip-card-grid-five > .spec-tooltip-line,
.spec-tooltip-card-grid-pair > .spec-tooltip-note,
.spec-tooltip-card-grid-three > .spec-tooltip-note,
.spec-tooltip-card-grid-four > .spec-tooltip-note,
.spec-tooltip-card-grid-five > .spec-tooltip-note,
.spec-tooltip-card-grid-pair > .spec-tooltip-separator,
.spec-tooltip-card-grid-three > .spec-tooltip-separator,
.spec-tooltip-card-grid-four > .spec-tooltip-separator,
.spec-tooltip-card-grid-five > .spec-tooltip-separator {
  grid-column: 1 / -1;
}
.spec-tooltip-card-grid-pair > .spec-tooltip-line {
  grid-template-columns: subgrid;
}
.spec-tooltip-card-grid-three > .spec-tooltip-core-columns,
.spec-tooltip-card-grid-three > .spec-tooltip-engraving-columns {
  grid-template-columns: subgrid;
}
.spec-tooltip-card-grid-four > .spec-tooltip-core-columns,
.spec-tooltip-card-grid-four > .spec-tooltip-engraving-columns {
  grid-template-columns: subgrid;
}
.spec-tooltip-card-grid-five > .spec-tooltip-four-columns {
  grid-template-columns: subgrid;
}
.spec-tooltip-card-grid-pair > .spec-tooltip-line,
.spec-tooltip-card-grid-three > .spec-tooltip-core-columns,
.spec-tooltip-card-grid-three > .spec-tooltip-engraving-columns,
.spec-tooltip-card-grid-four > .spec-tooltip-core-columns,
.spec-tooltip-card-grid-four > .spec-tooltip-engraving-columns,
.spec-tooltip-card-grid-five > .spec-tooltip-four-columns {
  column-gap: inherit;
}
.spec-tooltip-card-grid-pair .spec-tooltip-value,
.spec-tooltip-card-grid-three .spec-tooltip-table-cell:last-child,
.spec-tooltip-card-grid-four .spec-tooltip-table-cell:last-child,
.spec-tooltip-card-grid-five .spec-tooltip-table-cell:last-child {
  text-align: right;
}
.spec-tooltip-value { white-space: nowrap; }
.spec-tooltip-value.spec-tooltip-quality-normal { color: var(--text); }
.spec-tooltip-value.spec-tooltip-quality-max { color: var(--roster-max); }
.spec-option-tier { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 3px; color: #fff; border-radius: 4px; font-size: 10px; font-weight: 650; line-height: 1; text-shadow: 0 0 2px #000; }
.spec-option-tier.low { background: #4b9fd0; }
.spec-option-tier.mid { background: #8d61d7; }
.spec-option-tier.high { background: var(--roster-max); }
.spec-tooltip-separator { height: 1px; margin: 2px 0; background: rgba(174, 185, 202, .24); }
.spec-tooltip-line:last-child { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(245, 185, 66, .38); }
.spec-tooltip-separator + .spec-tooltip-line:last-child { margin-top: 0; padding-top: 0; border-top: 0; }
.spec-tooltip-core-row:last-child { margin-top: 0; padding-top: 0; border-top: 0; }
.spec-tooltip-engraving-row:last-child { margin-top: 0; padding-top: 0; border-top: 0; }
.spec-tooltip-value { color: var(--roster-max); font-weight: 650; }
.spec-tooltip-note { color: #aeb9ca; font-size: 11px; }
.spec-tooltip:hover .spec-tooltip-card, .spec-tooltip:focus-visible .spec-tooltip-card { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.roster-character-cell strong { overflow: visible; font-weight: var(--roster-text-weight); white-space: nowrap; letter-spacing: -.02em; }
.roster-table th:not(.roster-character-heading):not(.roster-job-heading), .roster-table td:not(.roster-character-cell):not(.roster-job-cell) { min-width: 0; }
.roster-table th:nth-child(4), .roster-table td:nth-child(4) { width: 5.75%; }
.roster-table th:nth-child(5), .roster-table td:nth-child(5) { width: 6.02%; }
.roster-table th:nth-child(6), .roster-table td:nth-child(6),
.roster-table th:nth-child(7), .roster-table td:nth-child(7),
.roster-table th:nth-child(8), .roster-table td:nth-child(8),
.roster-table th:nth-child(12), .roster-table td:nth-child(12) { width: 5.10%; }
.roster-table th:nth-child(13), .roster-table td:nth-child(13) { width: 4.17%; }
.main-character-row { background: rgba(245,185,66,.035); }
.roster-divider td { padding: 8px 7px; text-align: left !important; color: var(--accent-2); font-size: 12px; font-weight: var(--roster-text-weight); letter-spacing: .08em; background: #0d121b; border-top: 2px solid #65572d; }
.alt-characters-toggle { width: 100%; padding: 2px 0; color: inherit; text-align: left; font: inherit; letter-spacing: inherit; background: transparent; border: 0; cursor: pointer; }
.alt-characters-toggle::before { content: '⌄'; display: inline-block; margin-right: 7px; transition: transform .16s ease; }
.alt-characters-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.alt-characters-toggle:hover { color: #ffe08a; }
.spec-pending { color: var(--text); }
.table-wrap { overflow-x: auto; overflow-y: visible; }
.roster-table-wrap.table-wrap { max-width: 100%; overflow: visible; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 13px 12px; border-bottom: 1px solid #232b3b; text-align: right; font-size: 14px; font-weight: 650; }
th { color: var(--muted); font-size: 12px; }
th:nth-child(2), th:nth-child(3), td:nth-child(2), td:nth-child(3) { text-align: left; }
td:first-child, th:first-child { width: 42px; text-align: center; }
.money { color: var(--accent-2); font-weight: 650; }
.value-rate-strip { display: flex; align-items: center; margin: 0 0 11px; padding-bottom: 10px; border-bottom: 1px solid #303a4d; color: var(--muted); font-size: 11px; }
.value-rate-source-control { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.value-rate-source-choice { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #7f8ca1; white-space: nowrap; }
.value-rate-source-choice.active { color: var(--text); }
.value-rate-choice-title { color: inherit; font-weight: 750; }
.value-rate-ratio { display: inline-flex; align-items: center; gap: 4px; color: inherit; white-space: nowrap; }
.value-rate-ratio b, .value-rate-shop strong { color: inherit; font-size: 12px; font-weight: 800; }
.value-rate-ratio input { width: 54px; height: 26px; padding: 2px 6px; color: var(--text); font: inherit; font-weight: 750; text-align: center; background: #111722; border: 1px solid #303a4d; border-radius: 6px; outline: none; appearance: textfield; -moz-appearance: textfield; }
.value-rate-ratio input:focus { border-color: #66748c; box-shadow: 0 0 0 1px rgba(116,169,230,.14); }
.value-rate-ratio em { color: inherit; font-style: normal; }
.value-rate-shop { flex: 1 1 auto; }
.value-rate-shop small { color: #7f8ca1; font-size: 10px; white-space: nowrap; }
.value-rate-source-choice.is-rate-source-active, .value-rate-source-choice.active { color: var(--accent-2); }
.value-rate-source-toggle { position: relative; flex: 0 0 auto; width: 38px; height: 20px; padding: 0; border: 1px solid #4a556b; border-radius: 999px; background: #161e2b; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.value-rate-source-toggle:hover { border-color: #66748c; }
.value-rate-source-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #dce4f1; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s ease; }
.value-rate-source-toggle.shop-active .value-rate-source-knob { transform: translateX(18px); }
.value-material-policy { margin: -4px 0 18px; padding: 0; border: 1px solid #303a4d; border-radius: 12px; background: #141a25; }
.value-settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; color: var(--text); font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.value-settings-toggle > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.value-settings-toggle strong { font-size: 13px; }
.value-settings-toggle small { color: var(--muted); font-size: 10px; }
.value-settings-toggle b { flex: 0 0 auto; color: #a9b5c8; font-size: 11px; font-weight: 700; }
.value-settings-toggle:hover { background: rgba(255,255,255,.025); }
.value-settings-body { padding: 0 14px 13px; border-top: 1px solid #303a4d; }
.value-settings-body[hidden] { display: none; }
.value-material-policy-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.value-material-policy-heading strong, .value-material-policy-heading span { display: block; }
.value-material-policy-heading strong { color: var(--accent-2); font-size: 14px; }
.value-material-policy-heading span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.value-material-policy-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 10px; padding: 2px; }
.value-material-policy-item { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px; border: 1px solid #293348; border-radius: 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.value-material-policy-item:hover { border-color: #856b2b; background: rgba(255, 211, 105, .06); }
.value-material-policy-item input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent-2); flex: 0 0 auto; }
.value-material-policy-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.value-material-policy-price { flex: 0 0 auto; margin-left: auto; color: var(--accent-2); font-size: 11px; font-weight: 750; white-space: nowrap; }
.value-material-policy-item.is-excluded .value-material-policy-name { text-decoration: line-through; opacity: .42; }
.value-material-policy-item.is-excluded .value-material-policy-price { color: var(--muted); opacity: .7; }
.value-recurring-policy { margin-top: 13px; padding-top: 12px; border-top: 1px solid #303a4d; }
.value-recurring-policy-row + .value-recurring-policy-row { margin-top: 13px; padding-top: 12px; border-top: 1px solid #303a4d; }
.value-extra-reward-policy { margin-top: 13px; padding-top: 12px; border-top: 1px solid #303a4d; }
.value-extra-reward-policy-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.value-extra-reward-policy-heading strong { color: var(--accent-2); font-size: 13px; }
.value-extra-reward-policy-heading span { color: var(--muted); font-size: 11px; }
.value-extra-reward-policy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.value-extra-reward-policy-option { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; color: var(--text); background: rgba(13,18,27,.72); border: 1px solid #303a4d; border-radius: 8px; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.value-extra-reward-policy-option:hover { border-color: #80692c; background: rgba(255,211,105,.055); }
.value-extra-reward-policy-option.active { border-color: #a68731; background: rgba(255,211,105,.10); }
.value-extra-reward-policy-option input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent-2); }
.value-extra-reward-policy-option > span { min-width: 0; }
.value-extra-reward-policy-option strong, .value-extra-reward-policy-option small { display: block; }
.value-extra-reward-policy-option strong { color: var(--text); font-size: 12px; }
.value-extra-reward-policy-option small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .value-material-policy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-extra-reward-policy-options { grid-template-columns: minmax(0, 1fr); }
  .value-rate-source-control { align-items: flex-start; flex-wrap: wrap; }
  .value-rate-shop { flex-basis: auto; }
}
@media (max-width: 560px) {
  .value-material-policy-list { grid-template-columns: minmax(0, 1fr); }
  .value-extra-reward-policy-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.value-overview-panel .section-head { align-items: center; }
.value-overview-head-actions { display: flex; align-items: center; gap: 10px; }
.value-overview-guide { color: var(--muted); font-size: 12px; font-weight: var(--homework-text-weight); }
.value-grid-empty-state { display: grid; gap: 7px; min-height: 160px; padding: 25px; place-content: center; text-align: center; background: var(--panel-2); border: 1px dashed #46536a; border-radius: 14px; }
.value-grid-empty-state strong { color: var(--accent-2); font-size: 16px; }
.value-grid-empty-state p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.value-roster-list { display: grid; gap: 14px; }
.value-roster-card { overflow: hidden; background: #101620; border: 1px solid var(--line); border-radius: 14px; }
.value-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: linear-gradient(120deg, rgba(199,93,122,.08), rgba(245,185,66,.035)); border-bottom: 1px solid var(--line); }
.value-roster-head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.value-roster-head strong { color: var(--text); font-size: 14px; font-weight: var(--homework-text-weight); }
.value-roster-head span { color: var(--muted); font-size: 11px; }
.value-roster-head > div span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.value-table-wrap { margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-color: #6b7890 #101620; scrollbar-width: thin; }
.value-table { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.value-table th, .value-table td { min-width: 108px; width: 108px; max-width: 108px; padding: 8px 7px; text-align: center; vertical-align: middle; font-size: var(--primary-data-font-size); font-weight: var(--homework-text-weight); }
.value-table thead th { min-height: 46px; color: #93a8ca; background: #0d121b; border-bottom: 1px solid var(--line); }
.value-table thead th:first-child, .value-table tbody th { position: sticky; left: 0; z-index: 2; min-width: 164px; width: 164px; max-width: 164px; background: #121722; }
.value-table thead th:first-child { z-index: 3; text-align: center; background: #0d121b; }
.value-table tbody th { text-align: left; }
.value-table thead th:nth-child(2), .value-table td.value-grid-item-level { min-width: 62px; width: 62px; max-width: 62px; }
.value-table thead th:nth-child(3), .value-table thead th:nth-child(4), .value-table thead th:nth-child(5),
.value-table tbody td:nth-child(3), .value-table tbody td:nth-child(4), .value-table tbody td:nth-child(5) { min-width: 148px; width: 148px; max-width: 148px; }
.value-table tbody th, .value-table tbody td { border-bottom: 1px solid #273043; }
.value-table tbody tr:last-child th, .value-table tbody tr:last-child td { border-bottom: 0; }
.value-grid-cell { cursor: context-menu; transition: background .12s ease; }
.value-grid-cell:hover { background: rgba(255,217,120,.055); }
.value-grid-cell > span, .value-grid-cell > strong { display: block; }
.value-grid-content-name { overflow: hidden; margin-bottom: 4px; color: var(--text); font-size: 10px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.value-grid-cell-mode { margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.value-grid-gold { color: var(--accent-2); font-size: 13px; font-weight: 750; white-space: nowrap; }
.value-grid-cell-empty { visibility: hidden; }
.value-grid-cell.is-empty { background: transparent; }
.value-grid-item-level { color: #dfe7f5; font-weight: 750 !important; }
.value-detail-menu { position: fixed; z-index: 140; width: min(390px, calc(100vw - 24px)); max-height: min(650px, calc(100vh - 24px)); overflow: auto; padding: 17px; background: linear-gradient(145deg, #1b2433, #111722); border: 1px solid rgba(245,185,66,.72); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.52), 0 0 0 100vmax rgba(0,0,0,.42); }
.value-detail-menu[hidden] { display: none; }
.value-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.value-detail-head span, .value-detail-head strong { display: block; }
.value-detail-head span { margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.value-detail-head strong { color: var(--accent-2); font-size: 15px; }
.value-detail-head button { width: 25px; height: 25px; padding: 0; color: #cbd4e3; font: inherit; font-size: 20px; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.value-detail-formula { display: grid; gap: 2px; margin-bottom: 13px; padding: 10px 11px; background: #0f151f; border: 1px solid #303a4d; border-radius: 8px; }
.value-detail-formula > div, .value-detail-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.value-detail-formula span, .value-detail-preview span { color: var(--muted); font-size: 11px; }
.value-detail-formula strong, .value-detail-preview strong { color: var(--text); font-size: 12px; }
.value-detail-formula .is-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid #303a4d; }
.value-detail-formula .is-final { margin-top: 3px; padding-top: 6px; border-top: 1px solid #5d4e25; }
.value-detail-formula .is-final strong { color: var(--accent-2); font-size: 14px; }
.value-detail-decision { margin: 7px 0 3px; padding: 7px 8px; color: #aab6c8; font-size: 11px; line-height: 1.45; background: #151c28; border-radius: 6px; }
.value-detail-decision.is-profit { color: #8ce0b5; }
.value-detail-field { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 38px; margin-top: 7px; color: var(--text); font-size: 11px; }
.value-detail-field > span:last-child { display: flex; align-items: center; gap: 5px; }
.value-detail-field input, .value-detail-field select { min-width: 92px; padding: 7px 8px; color: var(--text); font: inherit; font-size: 11px; background: #0d121b; border: 1px solid #3d495e; border-radius: 6px; }
.value-detail-note { margin: 10px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.value-detail-preview { margin-top: 11px; padding: 9px 10px; background: #151c28; border: 1px solid #303a4d; border-radius: 7px; }
.value-detail-preview strong { color: var(--accent-2); }
.value-detail-preview > * { min-width: 0; }
.value-detail-preview strong { overflow-wrap: anywhere; text-align: right; }
.value-detail-save { width: 100%; margin-top: 13px; padding: 9px; color: #17130b; font: inherit; font-size: 12px; font-weight: 750; background: var(--accent-2); border: 0; border-radius: 7px; cursor: pointer; }
@media (max-width: 760px) {
  .value-detail-menu { width: calc(100vw - 24px); }
  .value-detail-preview { align-items: flex-start; }
  .value-detail-preview strong { max-width: 62%; }
  .value-overview-head-actions, .value-roster-head { align-items: flex-start; flex-direction: column; }
  .value-table th, .value-table td { min-width: 96px; width: 96px; max-width: 96px; }
  .value-table thead th:nth-child(3), .value-table thead th:nth-child(4), .value-table thead th:nth-child(5),
  .value-table tbody td:nth-child(3), .value-table tbody td:nth-child(4), .value-table tbody td:nth-child(5) { min-width: 132px; width: 132px; max-width: 132px; }
}


/* 원정대 표 전역 규칙: 캐릭터명을 제외한 모든 표 요소는 중앙 정렬한다. */
.roster-table th, .roster-table td { text-align: center !important; font-weight: var(--roster-text-weight); }
.roster-table th.roster-character-heading { text-align: center !important; }
.roster-table td.roster-character-cell { text-align: left !important; }
.roster-divider td, .alt-characters-toggle { text-align: center !important; }
.editor { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.editor summary { cursor: pointer; font-weight: 650; }
.editor-grid { display: grid; grid-template-columns: 1.4fr .7fr .8fr .8fr .8fr 1.4fr auto; gap: 8px; margin-top: 14px; }
.text-btn { background: none; border: 0; color: var(--accent-2); cursor: pointer; }
.summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0; }
.summary-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 20px; }
.summary-card.accent { background: linear-gradient(145deg, #2a2416, #171b24); border-color: #514221; }
.summary-card span, .summary-card small { display: block; color: var(--muted); font-size: 12px; }
.summary-card strong { display: block; font-size: 25px; margin: 9px 0 5px; }
.summary-card.accent strong { color: var(--accent-2); }
pre { background: #0b1017; border: 1px solid var(--line); color: #c7d2e5; border-radius: 12px; padding: 14px; white-space: pre-wrap; }
.ad-placeholder { height: 110px; border: 1px dashed #39445b; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #647086; }
.ad-placeholder small { margin-top: 5px; }
/* 원정대 표는 데스크톱에서 패널 폭에 맞춰 유동적으로 축소된다.
   글자/행 높이는 일반 데스크톱 폭에서는 기존 크기를 유지하고, 매우 좁은 폭에서만 최소한으로 축소한다. */
@media (max-width: 1050px) {
  .roster-table th, .roster-table td { padding-left: 2px; padding-right: 2px; }
  .roster-refresh-button, .roster-pin-button, .roster-character-refresh-button { padding-left: 3px; padding-right: 3px; font-size: 9px; }
  .class-symbol-frame { width: 22px; height: 22px; flex-basis: 22px; }
}
@media (max-width: 900px) {
  .hero-inner { align-items: start; flex-direction: column; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rate-grid, .summary-grid { grid-template-columns: 1fr; }
  .workspace-tab { min-height: 46px; padding: 10px 8px; font-size: 14px; text-align: center; }
  .layout { padding-left: 14px; padding-right: 14px; }
  .panel { padding: 17px; }
  .hero-inner { padding: 48px 18px 42px; }
  .my-roster-title-row { flex-wrap: wrap; }
  .saved-roster-reorder-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .saved-roster-card-head { align-items: stretch; flex-direction: column; }
  .saved-roster-actions { justify-content: flex-end; }
  .saved-roster-table th, .saved-roster-table td { padding-left: 4px; padding-right: 4px; font-size: 10px; }
  .saved-roster-table th { font-size: 9px; }
}

.value-rate-ratio input::-webkit-outer-spin-button, .value-rate-ratio input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }