:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-strong:#ffffff;
  --surface-soft:#f7f8fa;
  --line:#eceef2;
  --line-strong:#dee3ea;
  --ink:#252a33;
  --muted:#656f7e;
  --accent:#3a4d6e;
  --accent-soft:#f7f8fa;
  --panel:#ffffff;
  --chip-bg:#f4f8ff;
  --chip-ink:#1f4d9b;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0f1520;
  --surface:#121c2a;
  --surface-strong:#131d2b;
  --surface-soft:#1a2638;
  --line:#283548;
  --line-strong:#36475e;
  --ink:#e6edf9;
  --muted:#b0bfd7;
  --accent:#8fb5ee;
  --accent-soft:#172235;
  --panel:#121c2a;
  --chip-bg:#1b2a41;
  --chip-ink:#b7d4ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--bg);
  min-height:100vh;
}
.page-shell{
  width:min(1540px, 100%);
  margin:0 auto;
  padding:24px 18px 46px;
  display:grid;
  grid-template-columns:160px minmax(0, 960px) 160px;
  gap:26px;
  align-items:start;
}
.ad-rail{
  position:sticky;
  top:clamp(80px, calc(50vh - 320px), 190px);
  display:block;
}
.ad-rail-empty{
  min-height:1px;
}
.container{
  width:100%;
  padding:26px 10px 0;
  margin:0 auto;
}
.hero{
  padding:0 0 18px;
  border-bottom:1px solid var(--line-strong);
  margin-bottom:16px;
}
.item-selector{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0 2px;
}
.hero-quick-links{
  margin-top:10px;
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.market-sort-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  background:#0f172a;
  border:1px solid #0f172a;
  color:#f8fafc;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.market-sort-link:hover{
  background:#1e293b;
  border-color:#1e293b;
  transform:translateY(-1px);
}
.market-sort-link:focus-visible{
  outline:2px solid #94a3b8;
  outline-offset:2px;
}
.market-vibe-link{
  background:#fff3ec;
  border-color:#ffd6c6;
  color:#d27c67;
}
.market-vibe-link:hover{
  background:#ffe7dc;
  border-color:#f6bfa8;
}
.market-vibe-link:focus-visible{
  outline-color:#f0b49b;
}
.market-sort-arrow{
  width:0;
  opacity:0;
  margin-left:0;
  overflow:hidden;
  transform:translateX(8px);
  transition:width .2s ease, opacity .2s ease, margin-left .2s ease, transform .2s ease;
}
.market-sort-link:hover .market-sort-arrow,
.market-sort-link:focus-visible .market-sort-arrow{
  width:18px;
  opacity:1;
  margin-left:6px;
  transform:translateX(0);
}
.market-sort-arrow svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-top-banner{
  margin:10px 0 12px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:90px;
}
.mobile-top-banner{
  display:none;
  margin:6px 0 10px;
  justify-content:center;
  align-items:center;
  min-height:50px;
}
.mobile-bottom-banner{
  display:none;
  margin:14px 0 0;
  justify-content:center;
  align-items:center;
  min-height:250px;
}
.rule-banner{
  margin:14px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:90px;
  overflow:hidden;
}
.item-break{
  flex-basis:100%;
  height:0;
  padding:0;
  margin:0;
}
.item-btn{
  border:1px solid var(--line-strong);
  background:var(--surface-strong);
  color:#334861;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.item-btn-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  image-rendering:auto;
  flex:0 0 auto;
}
.item-btn-icon,
.ms-icon,
.scroll-cast img,
.meso-icon,
#run-shard-icon{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}
.item-btn.active{
  border-color:#6c8fc3;
  background:var(--accent-soft);
  color:#1f4072;
  font-weight:700;
}
h1{
  font-size:31px;
  letter-spacing:-0.03em;
  margin:0 0 8px;
  font-weight:800;
  color:#1d2430;
  font-family:"Jua","Pretendard","SUIT Variable","Noto Sans KR",sans-serif;
}
.hero-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
}
.hero-title-row h1{
  margin:0;
}
.hero-tools{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hero-title-row .theme-mode{
  flex:0 0 auto;
}
.home-title-link{
  color:inherit;
  text-decoration:none;
  display:inline-block;
}
.brand-a{
  color:#2794e6;
}
.brand-b{
  color:#6f7de8;
}
.sub{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  font-weight:500;
}
:root[data-theme="dark"] .item-btn{
  color:#d3e2fb;
  border-color:#435672;
}
:root[data-theme="dark"] .market-sort-link{
  background:#1e293b;
  border-color:#334155;
  color:#f8fafc;
}
:root[data-theme="dark"] .market-vibe-link{
  background:#4b2f2c;
  border-color:#6f463f;
  color:#ffe6db;
}
:root[data-theme="dark"] .market-sort-link:hover{
  background:#334155;
  border-color:#475569;
}
:root[data-theme="dark"] .market-vibe-link:hover{
  background:#603a36;
  border-color:#8a574f;
}
:root[data-theme="dark"] .item-btn.active{
  border-color:#6689c8;
  color:#e4eeff;
}
:root[data-theme="dark"] h1{
  color:#e8eef9;
}
:root[data-theme="dark"] .guide,
:root[data-theme="dark"] .logic-details{
  color:#b7c4da;
}
:root[data-theme="dark"] .logic-details summary{
  color:#d7e6ff;
}
:root[data-theme="dark"] .section-title{
  color:#dbe7fb;
}
:root[data-theme="dark"] .logic-item{
  color:#c8daff;
}
:root[data-theme="dark"] .info-panel{
  background:var(--surface);
}
:root[data-theme="dark"] .cost-line{
  color:#c4d2e8;
}
:root[data-theme="dark"] .cost-config-row{
  color:#c0d0e8;
}
:root[data-theme="dark"] .cost-value{
  color:#e6efff;
}
:root[data-theme="dark"] .ms-title,
:root[data-theme="dark"] #best-panel .ms-title{
  color:#e4edff;
}
:root[data-theme="dark"] .stat-card p{
  color:#c2d2ea;
}
:root[data-theme="dark"] .best-table th,
:root[data-theme="dark"] .best-table td{
  color:#d9e6fb;
  border-bottom-color:rgba(168,190,222,0.28);
}
:root[data-theme="dark"] .best-key-number{
  color:#f0f6ff;
}
:root[data-theme="dark"] .recent-volume-stat{
  background:var(--surface-strong);
  border-color:var(--line-strong);
}
:root[data-theme="dark"] .recent-volume-chart-shell{
  background:var(--surface-strong);
  border-color:var(--line-strong);
  box-shadow:none;
}
:root[data-theme="dark"] .recent-volume-chart-surface{
  fill:rgba(17, 24, 39, 0.96);
}
:root[data-theme="dark"] .recent-volume-line{
  stroke:#ffb9a8;
}
:root[data-theme="dark"] .recent-volume-current-guide{
  stroke:rgba(148, 163, 184, 0.22);
}
:root[data-theme="dark"] .recent-volume-current-label{
  fill:#dbe7f7;
}
:root[data-theme="dark"] .recent-volume-stat-value.is-black{
  color:#f3f7ff;
}
:root[data-theme="dark"] .recent-volume-stat-value.is-up{
  color:#ff8c8c;
}
:root[data-theme="dark"] .recent-volume-stat-value.is-down{
  color:#8fd18c;
}
:root[data-theme="dark"] .recent-volume-average-line{
  stroke:#ffe0ce;
}
:root[data-theme="dark"] .recent-volume-average-label{
  fill:#ffe3d5;
}
:root[data-theme="dark"] .recent-volume-area{
  fill:rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .recent-volume-delta.is-up{
  color:#9bc0ff;
}
:root[data-theme="dark"] .recent-volume-delta.is-down{
  color:#ff8c8c;
}
:root[data-theme="dark"] .today-roll-tag{
  background:var(--surface-soft);
  border-color:var(--line-strong);
  color:#e4edff;
}
:root[data-theme="dark"] .today-roll-block.today-roll-steady .today-roll-state,
:root[data-theme="dark"] .today-roll-block.today-roll-bright .today-roll-state{
  color:#8fd18c;
}
:root[data-theme="dark"] .today-roll-block.today-roll-calm .today-roll-state{
  color:#ff8c8c;
}
:root[data-theme="dark"] .red-target-picker{
  background:var(--surface-strong);
  border-color:#41536d;
}
:root[data-theme="dark"] .red-target-picker .label{
  color:#c4d3ec;
}
:root[data-theme="dark"] .red-target-picker select,
:root[data-theme="dark"] .best-metric-picker select,
:root[data-theme="dark"] .cost-input{
  background:#0f1825;
  border-color:#425471;
  color:#e3edff;
}
:root[data-theme="dark"] .best-metric-picker{
  background:#1a2738;
  border-color:#40506a;
  color:#c6d5ec;
}
:root[data-theme="dark"] .best-nickname-label{
  color:#c7d6ef;
}
:root[data-theme="dark"] .best-nickname-field input{
  background:#0f1825;
  border-color:#425471;
  color:#e3edff;
}
:root[data-theme="dark"] .best-nickname-field input::placeholder{
  color:#8fa2c0;
}
:root[data-theme="dark"] .btn{
  background:#2a3547;
  border-color:#4a5f80;
}
:root[data-theme="dark"] .reset-btn{
  background:#131d2b;
  border-color:#4a5c78;
}
:root[data-theme="dark"] .ms-panel{
  border-color:#637697;
}
.content-block{
  padding:16px 2px 18px;
  border-bottom:1px solid var(--line);
}
.initial-loading-panel{
  margin-top:4px;
  border:1px solid #d6dfef;
  border-radius:14px;
  background:#f8fbff;
  padding:16px 14px;
}
.initial-loading-title{
  margin:0 0 8px;
  color:#2b4670;
}
.initial-loading-desc{
  margin:0;
  color:#4a6281;
}
.initial-loading-desc + .initial-loading-desc{
  margin-top:6px;
}
body.is-initial-loading .ad-rail,
body.is-initial-loading .hero-top-banner,
body.is-initial-loading .mobile-top-banner,
body.is-initial-loading .rule-banner,
body.is-initial-loading .mobile-bottom-banner{
  display:none !important;
}
body.is-initial-loading .content-block:not(.initial-loading-panel):not(.fatal-error-panel){
  display:none;
}
.fatal-error-panel{
  margin-top:4px;
  border:1px solid #e4c8c8;
  border-radius:14px;
  background:#fff9f9;
  padding:16px 14px;
}
.fatal-error-panel[hidden]{
  display:none !important;
}
.fatal-error-title{
  margin:0 0 8px;
  color:#8b2830;
}
.fatal-error-desc{
  margin:0;
  color:#6a4750;
}
.fatal-error-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.fatal-error-retry-btn{
  border-color:#b54f58;
  background:linear-gradient(180deg,#df6e79 0%, #c9515c 100%);
  color:#ffffff;
}
.fatal-error-home-btn{
  border-color:#cfd8e6;
  background:#ffffff;
  color:#395274;
  text-decoration:none;
}
.fatal-error-actions .btn:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
body.is-fatal-error .ad-rail,
body.is-fatal-error .hero-top-banner,
body.is-fatal-error .mobile-top-banner,
body.is-fatal-error .rule-banner,
body.is-fatal-error .mobile-bottom-banner{
  display:none !important;
}
body.is-fatal-error .content-block:not(.fatal-error-panel){
  display:none;
}
body.is-fatal-error .hero .sub,
body.is-fatal-error .item-selector{
  display:none;
}
@supports (content-visibility: auto){
  .content-block{
    content-visibility:auto;
    contain-intrinsic-size:1px 620px;
  }
  .content-block.ranking-top-block{
    content-visibility:visible;
    contain-intrinsic-size:auto;
  }
}
.ranking-top-block{
  padding-top:10px;
  padding-bottom:12px;
}
.ranking-top-block .ranking-card{
  width:100%;
  max-width:none;
}
.section-title{
  font-size:17px;
  font-weight:800;
  margin:0 0 12px;
  letter-spacing:-0.01em;
  color:#1f365c;
}
.guide{
  margin:0;
  color:#4e627f;
  font-size:14px;
  line-height:1.75;
  font-weight:500;
}
.rona-link{
  position:relative;
  display:inline-block;
  padding-right:11px;
  color:#3b8cf0;
  text-decoration:none;
  font-weight:700;
}
.rona-link::after{
  content:"↗";
  position:absolute;
  right:0;
  top:-0.12em;
  font-size:9px;
  line-height:1;
  color:currentColor;
}
.rona-link:hover{
  color:#2b7de0;
}
.rona-link:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
  border-radius:4px;
}
.logic-details{
  margin-top:10px;
  padding-top:10px;
  color:#516072;
  font-size:13px;
  line-height:1.65;
}
.logic-details summary{
  cursor:pointer;
  color:#334861;
  font-weight:700;
  margin-bottom:6px;
}
.logic-list{
  margin:8px 0 0;
  padding-left:18px;
}
.logic-list > li{
  margin:8px 0;
}
.logic-item{
  font-weight:800;
  color:#2f4668;
}
.logic-sublist{
  margin:6px 0 0;
  padding-left:16px;
  list-style:square;
}
.logic-sublist li{
  margin:4px 0;
}
.sim-area{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap:24px;
  align-items:start;
  justify-items:center;
}
.sim-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 0;
}
.sim-right{
  width:100%;
  display:grid;
  gap:14px;
  align-content:start;
  justify-items:center;
}
.sim-right .info-panel{
  width:min(100%, 360px);
}
.stack{
  display:grid;
  gap:14px;
  justify-items:center;
}
.info-panel{
  background:transparent;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 14px;
  width:min(100%, 360px);
}
.info-panel.sim-usage{
  width:100%;
  max-width:none;
  margin:0 0 16px;
}
.recent-volume-panel{
  width:100%;
  max-width:none;
  padding:16px 18px;
  overflow:hidden;
}
.recent-volume-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.recent-volume-copy{
  flex:1 1 320px;
  min-width:0;
}
.recent-volume-sub{
  margin:4px 0 0;
}
.recent-volume-axis-note{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
}
.recent-volume-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(88px, 1fr));
  gap:10px;
  width:min(100%, 360px);
}
.recent-volume-stat{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
  padding:10px 12px;
}
.recent-volume-stat-label{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}
.recent-volume-stat-value{
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-size:21px;
  line-height:1.15;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.recent-volume-stat-value.is-black{
  color:#111111;
}
.recent-volume-stat-value.is-up{
  color:#d14343;
}
.recent-volume-stat-value.is-down{
  color:#248a3d;
}
.recent-volume-stat-value.is-neutral{
  color:#111111;
}
.recent-volume-chart-shell{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#ffffff;
  box-shadow:none;
  padding:13px 12px 10px;
}
.recent-volume-legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.recent-volume-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.recent-volume-legend-line{
  width:22px;
  height:0;
  border-top:3px solid #f29c88;
  border-radius:999px;
}
.recent-volume-legend-line-average{
  border-top-color:#ffd4bf;
  border-top-style:dashed;
}
.recent-volume-chart{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.recent-volume-chart-surface{
  fill:#ffffff;
}
.recent-volume-gridline{
  stroke:rgba(148, 163, 184, 0.18);
  stroke-width:1;
}
.recent-volume-tick,
.recent-volume-x-label{
  fill:var(--muted);
  font-size:10px;
  font-weight:600;
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-variant-numeric:tabular-nums;
}
.recent-volume-x-label{
  text-anchor:middle;
}
.recent-volume-area{
  fill:url(#recent-price-area-gradient);
  opacity:0.18;
}
.recent-volume-line{
  fill:none;
  stroke:#f29c88;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#recent-price-line-shadow);
}
.recent-volume-average-line{
  fill:none;
  stroke:#ffd4bf;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:5 6;
  opacity:0.82;
}
.recent-volume-average-label{
  fill:#f0b9a1;
  font-size:11px;
  font-weight:800;
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  text-anchor:end;
}
.recent-volume-current-guide{
  stroke:rgba(148, 163, 184, 0.18);
  stroke-width:1;
  stroke-dasharray:2 7;
}
.recent-volume-current-label{
  fill:#d98673;
  font-size:11px;
  font-weight:800;
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  letter-spacing:-0.01em;
}
.recent-volume-foot{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.recent-volume-note{
  margin:0;
}
.recent-volume-delta{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.recent-volume-delta.is-up{
  color:#2563eb;
}
.recent-volume-delta.is-down{
  color:#d14343;
}
.today-roll-block{
  width:100%;
  max-width:none;
}
.today-roll-title{
  margin:0 0 12px;
  color:var(--ink);
  font-size:16px;
  line-height:1.4;
  font-weight:800;
  text-align:center;
  text-wrap:balance;
}
.today-roll-explainer{
  max-width:760px;
  margin:0 auto 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  text-align:center;
}
.today-roll-good{
  color:#248a3d;
  font-weight:800;
}
.today-roll-bad{
  color:#d14343;
  font-weight:800;
}
.today-roll-title-date{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  margin-left:6px;
  font-variant-numeric:tabular-nums;
}
.today-roll-home-link{
  min-width:92px;
}
.today-roll-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 8px;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
  text-align:center;
}
.today-roll-state-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.today-roll-state-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.today-roll-block.today-roll-bright .today-roll-state-icon svg circle,
.today-roll-block.today-roll-steady .today-roll-state-icon svg circle{
  fill:currentColor;
  fill-opacity:0.14;
}
.today-roll-block.today-roll-steady .today-roll-state,
.today-roll-block.today-roll-bright .today-roll-state{
  color:#248a3d;
}
.today-roll-block.today-roll-calm .today-roll-state{
  color:#d14343;
}
.today-roll-headline{
  max-width:760px;
  margin:0 auto 8px;
  font-size:14px;
  line-height:1.7;
  font-weight:500;
  text-align:center;
}
.today-roll-summary{
  max-width:760px;
  margin:0;
  margin-inline:auto;
  line-height:1.7;
  font-size:14px;
  font-weight:500;
  text-align:center;
}
.today-roll-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 10px;
  justify-content:center;
}
.today-roll-tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.ms-panel{
  --panel-bg:#7175b5;
  --panel-w:460px;
  --icon-box:92px;
  --title-size:20px;
  --upg-size:14px;
  --stat-size:14px;
  width:min(var(--panel-w), 100%);
  margin:6px auto;
  background-color:var(--panel-bg);
  border:1px solid #cfd5e2;
  border-radius:0;
  padding:10px 7px;
  color:#fff;
  text-align:center;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.ms-panel.is-potion{
  min-height:0;
}
.ms-panel.is-fatigue{
  --panel-w:460px;
}
.ms-panel.theme-gong{
  --panel-bg:#7175b5;
  background-color:var(--panel-bg);
  border-color:#cfd5e2;
  color:#fff;
}
.ms-item-head{
  position:relative;
  margin-top:1px;
  margin-bottom:3px;
}
.ms-name-line{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:2px;
  text-align:center;
  font-size:var(--title-size);
  line-height:1.22;
  font-family:"Pretendard","SUIT Variable","Noto Sans KR",sans-serif;
  font-weight:700;
  color:#fff;
  margin:0 0 4px;
  letter-spacing:-0.02em;
  padding:0;
  white-space:nowrap;
  transition:color .16s ease;
}
.ms-name-main{
  display:inline;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
.ms-name-suffix{
  position:static;
  right:auto;
  top:auto;
  transform:none;
  width:auto;
  text-align:left;
  padding-left:0;
  opacity:0;
  color:inherit;
  transition:opacity .14s ease;
  white-space:nowrap;
  display:inline;
  vertical-align:baseline;
}
.ms-name-suffix.active{
  opacity:1;
}
.ms-panel.is-potion .ms-name-line{
  padding:0;
}
.ms-panel.is-potion .ms-name-main{
  display:inline;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
.ms-panel.is-potion .ms-name-suffix{
  position:static;
  right:auto;
  top:auto;
  transform:none;
  width:auto;
  text-align:left;
  padding-left:0;
  margin-left:2px;
  display:inline;
  vertical-align:baseline;
}
.ms-upg-line{
  display:block;
  font-size:var(--upg-size);
  line-height:1.25;
  font-family:"Pretendard","SUIT Variable","Noto Sans KR",sans-serif;
  font-weight:500;
  color:#fff;
  margin:0;
}
.ms-destroy-badge{
  position:absolute;
  right:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:18px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(255, 235, 235, 0.75);
  background:linear-gradient(180deg, #ff8383 0%, #e44444 100%);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  line-height:1;
  box-shadow:0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events:none;
}
.ms-panel.is-destroyed{
  box-shadow:inset 0 0 0 1px rgba(255, 103, 103, 0.65);
}
.ms-panel.is-potion .ms-upg-line{
  min-height:18px;
  white-space:nowrap;
}
.ms-item-main{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.ms-panel.is-fatigue .ms-item-main{
  justify-content:center;
  gap:10px;
  padding-left:0;
  transform:translateX(30px);
}
.ms-icon-wrap{
  margin-left:0;
  display:flex;
  position:relative;
  justify-content:center;
  align-items:center;
  width:var(--icon-box);
  height:var(--icon-box);
  background-color:var(--panel-bg);
  flex:0 0 auto;
}
.ms-icon{
  height:70%;
  width:auto;
  max-width:82%;
  object-fit:contain;
  image-rendering:pixelated;
  background:none;
  padding:0;
}
.ms-stats{
  margin-left:0;
  display:block;
  flex:0 0 auto;
  align-items:flex-start;
  justify-content:flex-start;
}
.ms-panel.is-potion .ms-stats{
  width:282px;
}
.ms-panel.is-fatigue .ms-stats{
  width:208px;
  min-height:72px;
}
.ms-body table{
  width:auto;
  margin:0;
  border-collapse:collapse;
}
.ms-panel.is-fatigue .ms-body table{
  width:100%;
  table-layout:fixed;
}
.ms-panel.is-fatigue .ms-body th{
  width:92px;
  padding-right:8px;
}
.ms-panel.is-potion .ms-body table{
  width:100%;
  table-layout:auto;
}
.ms-panel.is-potion .ms-body tr{
  height:24px;
}
.ms-panel.is-potion .ms-body th,
.ms-panel.is-potion .ms-body td{
  line-height:24px;
  font-size:14px;
}
.ms-panel.is-potion .ms-body th{
  width:140px;
  padding-right:10px;
}
.ms-body th,.ms-body td{
  padding:0;
  font-size:var(--stat-size);
  line-height:21px;
  border:0;
  text-align:left;
  color:#fff;
  font-family:"Pretendard","SUIT Variable","Noto Sans KR",sans-serif;
  font-weight:500;
  white-space:nowrap;
}
.ms-body th{
  width:82px;
  text-align:left;
  padding-right:4px;
}
.best-table{
  width:auto;
  margin:0 auto;
  border-collapse:collapse;
}
.best-table th,.best-table td{
  padding:6px 9px;
  font-size:13px;
  border-bottom:1px dashed rgba(80,98,124,0.22);
  text-align:center;
}
.ms-header{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ms-title{
  font-size:17px;
  font-weight:800;
  color:#1f365c;
  letter-spacing:-0.01em;
}
.action-row{
  margin-top:12px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  padding:10px 0 2px;
}
.scroll-cast{
  width:76px;
  height:76px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid #b7bcc8;
  background:#fff;
  border-radius:14px;
  padding:0;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(31,41,55,0.08);
}
.scroll-cast img{
  width:48px;
  height:48px;
  image-rendering:pixelated;
}
.scroll-cast:disabled{
  opacity:0.45;
  cursor:not-allowed;
  filter:grayscale(0.35);
  box-shadow:none;
}
.scroll-cast:disabled img{
  opacity:0.85;
}
.scroll-cast .scroll-label{
  position:absolute;
  right:6px;
  bottom:6px;
  border-radius:999px;
  color:#fff;
  font-size:10px;
  line-height:1;
  padding:3px 6px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.scroll-cast .scroll-label.label-attack{
  background:#f04f4f;
}
.scroll-cast .scroll-label.label-magic{
  background:#3f7ae0;
}
.scroll-cast-60 .scroll-label{
  background:#3f7ae0;
}
.scroll-cast-30 .scroll-label{
  background:#f04f4f;
}
.scroll-cast-shard .scroll-label{
  background:#4e79ff;
  font-size:9px;
  padding:2px 5px;
  right:4px;
  bottom:4px;
}
.red-target-picker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 10px;
  border:1px solid #c7cfdb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(31,41,55,0.06);
}
.red-target-picker .label{
  font-size:12px;
  color:#4b5e7d;
  font-weight:700;
  white-space:nowrap;
}
.red-target-picker select{
  height:30px;
  border:1px solid #d5dce8;
  border-radius:8px;
  background:#f8faff;
  color:#1f3557;
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  padding:0 8px;
  outline:none;
}
.scroll-cast.casting{
  animation:scroll-cast .35s ease;
}
@keyframes scroll-cast{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.btn{
  cursor:pointer;
  border:1px solid #727b8d;
  background:#4a5161;
  color:#f7f8fb;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-family:inherit;
  transition:transform .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(180deg,#5b6476 0%, #485062 100%);
  border-color:#778094;
}
.reset-btn{
  width:64px;
  height:64px;
  border:1px solid #b7bcc8;
  background:#fff;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  box-shadow:0 1px 2px rgba(31,41,55,0.08);
}
.reset-btn img{
  width:42px;
  height:42px;
  object-fit:contain;
}
.stat-card p{
  margin:7px 0;
  font-size:14px;
  color:#3e5371;
  line-height:1.6;
  font-weight:500;
}
.best-nickname-field{
  display:block;
  margin-top:8px;
}
.best-nickname-label{
  display:block;
  margin:0 0 5px;
  font-size:12px;
  font-weight:700;
  color:#4b5f7c;
}
.best-nickname-field input{
  width:100%;
  height:36px;
  border:1px solid #d4dcec;
  border-radius:10px;
  padding:0 11px;
  font-size:13px;
  color:#1f3557;
  background:#ffffff;
  font-family:inherit;
}
.best-nickname-field input::placeholder{
  color:#9ca8bd;
}
.best-nickname-field input:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
.best-key-number{
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  color:#1f3557;
}
.cost-panel{
  text-align:center;
}
.cost-line{
  margin:6px 0;
  font-size:14px;
  color:#3f536f;
  line-height:1.6;
  font-weight:600;
  white-space:nowrap;
}
.cost-value{
  color:#1f3557;
  font-weight:800;
}
.usage-value{
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.meso-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.meso-milestone{
  margin-left:6px;
  font-size:12px;
  font-weight:700;
  color:#d64545;
  white-space:nowrap;
}
.meso-icon{
  width:28px;
  height:28px;
  object-fit:contain;
  image-rendering:auto;
  flex:0 0 auto;
}
.cost-config{
  margin-top:10px;
  display:grid;
  gap:8px;
  justify-items:center;
}
.cost-config-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#51657f;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.cost-config-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#6f7de8;
  cursor:pointer;
}
.cost-input{
  width:130px;
  text-align:right;
  border:1px solid #d2d8e4;
  border-radius:8px;
  padding:5px 8px;
  font-size:13px;
  color:#1f3557;
  background:#fff;
  font-family:inherit;
}
.cost-input:disabled{
  color:#9ba8bd;
  background:#f5f7fb;
  border-color:#e3e8f1;
}
.stat-card b{font-weight:800;color:#1f3557}
.attempt-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
  min-height:28px;
}
.attempt-line > span{
  white-space:nowrap;
}
.best-metric-picker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:4px 8px;
  border:1px solid #d8deea;
  border-radius:8px;
  background:#f7faff;
  color:#3e5371;
  font-size:12px;
  font-weight:700;
}
.best-metric-picker select{
  height:26px;
  border:1px solid #d5dce8;
  border-radius:6px;
  background:#fff;
  color:#1f3557;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  padding:0 8px;
  outline:none;
}
#best-panel .ms-header{
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
  padding-bottom:7px;
}
#best-panel .ms-title{
  color:#1f365c;
  font-weight:800;
}
.ranking-card .ms-header{
  position:relative;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
  padding-bottom:7px;
}
.ranking-title-date{
  margin-left:4px;
  font-size:11px;
  font-weight:700;
  color:#7a8ea9;
}
.ranking-beta-note{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:800;
  color:#e5484d;
  white-space:nowrap;
}
.ranking-sub{
  margin:0 0 8px;
  color:#526782;
  font-size:12px;
  font-weight:700;
}
.ranking-submit-btn{
  margin-top:10px;
  min-height:44px;
  --save-bg:linear-gradient(135deg,#7daaff 0%, #6d90ff 52%, #837bff 100%);
  --save-border:#7696ff;
  --save-text:#f9fbff;
  --save-shadow:0 10px 20px rgba(84,116,255,0.25);
  --save-icon-bg:rgba(255,255,255,0.2);
  --save-icon-border:rgba(255,255,255,0.42);
}
.ranking-submit-btn:hover{
  box-shadow:0 14px 26px rgba(84,116,255,0.32);
}
.ranking-submit-btn:disabled{
  cursor:not-allowed;
  opacity:0.58;
  transform:none;
  box-shadow:none;
  filter:none;
}
.ranking-feedback{
  min-height:18px;
  margin:9px 0 5px;
  font-size:12px;
  font-weight:700;
  color:#6a7e9b;
}
.stat-card .ranking-submit-hint{
  min-height:18px;
  margin:8px 0 0;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  color:#e5484d;
}
.stat-card .ranking-submit-hint.is-empty{
  visibility:hidden;
}
.stat-card .ranking-submit-hint.is-neutral{
  color:#6a7e9b;
}
.ranking-feedback.is-success{
  color:#1f8a56;
}
.ranking-feedback.is-error{
  color:#cb3c4f;
}
.ranking-list{
  width:100%;
}
.ranking-empty{
  border:1px dashed #d4ddec;
  border-radius:10px;
  padding:11px 10px;
  text-align:center;
  color:#667a98;
  font-size:12px;
  font-weight:600;
}
.ranking-strip{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:10px;
  overflow-x:auto;
  padding:2px 1px 5px;
  scrollbar-width:thin;
}
.ranking-ms-card{
  flex:0 0 246px;
  scroll-snap-align:start;
  background:#7175b5;
  border:1px solid #cfd5e2;
  border-radius:6px;
  padding:8px 7px 7px;
  color:#ffffff;
  box-shadow:0 2px 6px rgba(22, 28, 44, 0.16);
}
.ranking-ms-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:3px;
}
.ranking-ms-build{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f5f8ff;
  font-size:11px;
  font-weight:700;
}
.ranking-ms-rank{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.42);
  color:#ffffff;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  white-space:nowrap;
}
.ranking-ms-rank.rank-gold{
  background:linear-gradient(180deg,#ffdf84 0%, #eab84e 100%);
  border-color:#f6cf73;
  color:#5a4106;
}
.ranking-ms-rank.rank-silver{
  background:linear-gradient(180deg,#eef3fb 0%, #c6d0df 100%);
  border-color:#d8e0ec;
  color:#425064;
}
.ranking-ms-rank.rank-bronze{
  background:linear-gradient(180deg,#f4c8a8 0%, #cf8d5d 100%);
  border-color:#e0ab81;
  color:#5a2f16;
}
.ranking-ms-itemline{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  min-width:0;
  overflow:hidden;
  margin-bottom:6px;
  white-space:nowrap;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#ffffff;
}
.ranking-ms-owner{
  display:inline-block;
  min-width:0;
  max-width:44%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}
.ranking-ms-possessive{
  flex:0 0 auto;
}
.ranking-ms-item-name{
  display:inline-block;
  min-width:0;
  max-width:44%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}
.ranking-ms-item-suffix{
  margin-left:2px;
  opacity:0;
  white-space:nowrap;
  transition:opacity .14s ease;
}
.ranking-ms-item-suffix.active{
  opacity:1;
}
.ranking-ms-main{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ranking-ms-icon-wrap{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.ranking-ms-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  image-rendering:pixelated;
}
.ranking-ms-table{
  width:100%;
  border-collapse:collapse;
}
.ranking-ms-table th,
.ranking-ms-table td{
  padding:0;
  line-height:18px;
  font-size:12px;
  color:#ffffff;
  white-space:nowrap;
}
.ranking-ms-table th{
  width:74px;
  padding-right:5px;
  text-align:left;
  font-weight:700;
}
.ranking-ms-table td{
  text-align:left;
  font-weight:500;
}
.ranking-ms-value-wrap{
  font-weight:500;
}
.ranking-ms-value{
  font-weight:inherit;
}
.ranking-ms-delta{
  margin-left:4px;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}
.ranking-stat-attack{
  font-weight:800;
}
.ranking-ms-value-wrap.ranking-stat-tone-default{color:#ffffff}
.ranking-ms-value-wrap.ranking-stat-tone-main{color:#fff18c}
.ranking-ms-value-wrap.ranking-stat-tone-attack{color:#ff8e8e}
.ranking-ms-meta{
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  color:#f5f8ff;
  line-height:1.3;
  text-align:right;
}
.ranking-meta-label{
  color:rgba(245,248,255,0.9);
  font-weight:700;
}
.ranking-meta-value{
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.01em;
}
.ranking-meta-sep{
  margin:0 4px;
  color:rgba(245,248,255,0.72);
}
.ranking-ms-time{
  margin-top:2px;
  font-size:10px;
  font-weight:600;
  color:rgba(245,248,255,0.92);
  text-align:right;
}
:root[data-theme="dark"] .ranking-sub{
  color:#b6c6df;
}
:root[data-theme="dark"] .initial-loading-panel{
  border-color:#374a69;
  background:#17263a;
}
:root[data-theme="dark"] .initial-loading-title{
  color:#d7e6ff;
}
:root[data-theme="dark"] .initial-loading-desc{
  color:#b7c9e5;
}
:root[data-theme="dark"] .fatal-error-panel{
  border-color:#5f3441;
  background:#2a1d25;
}
:root[data-theme="dark"] .fatal-error-title{
  color:#ffadb7;
}
:root[data-theme="dark"] .fatal-error-desc{
  color:#e2bfc7;
}
:root[data-theme="dark"] .fatal-error-retry-btn{
  border-color:#b35f70;
  background:linear-gradient(180deg,#d97e8f 0%, #b65567 100%);
  color:#fff;
}
:root[data-theme="dark"] .fatal-error-home-btn{
  border-color:#4d6284;
  background:#1b293f;
  color:#d6e3fa;
}
:root[data-theme="dark"] .ranking-title-date{
  color:#9fb3d0;
}
:root[data-theme="dark"] .ranking-beta-note{
  color:#ff7a7f;
}
@media (max-width: 980px){
  .ranking-card .ms-header{
    display:block;
    text-align:center;
  }
  .ranking-beta-note{
    position:static;
    transform:none;
    display:block;
    margin-top:4px;
    text-align:right;
    white-space:normal;
  }
}
:root[data-theme="dark"] .ranking-submit-btn{
  --save-bg:linear-gradient(135deg,#5f81d8 0%, #5270ce 52%, #675fbe 100%);
  --save-border:#6787d8;
  --save-shadow:0 10px 22px rgba(25,39,82,0.45);
}
:root[data-theme="dark"] .ranking-submit-btn:hover{
  box-shadow:0 14px 28px rgba(33,53,108,0.56);
}
:root[data-theme="dark"] .ranking-feedback{
  color:#94a7c5;
}
:root[data-theme="dark"] .stat-card .ranking-submit-hint{
  color:#ff7a7f;
}
:root[data-theme="dark"] .stat-card .ranking-submit-hint.is-neutral{
  color:#94a7c5;
}
:root[data-theme="dark"] .ranking-feedback.is-success{
  color:#65d09b;
}
:root[data-theme="dark"] .ranking-feedback.is-error{
  color:#ff8f9a;
}
:root[data-theme="dark"] .ranking-empty{
  border-color:#3b4f6d;
  color:#b3c6e3;
}
:root[data-theme="dark"] .ranking-ms-card{
  border-color:#6f78b0;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .ranking-stat-attack{
  color:#ffb1b1;
}
:root[data-theme="dark"] .ranking-ms-rank.rank-gold{
  color:#4d3400;
}
:root[data-theme="dark"] .ranking-ms-rank.rank-silver{
  color:#334154;
}
:root[data-theme="dark"] .ranking-ms-rank.rank-bronze{
  color:#4d2511;
}
:root[data-theme="dark"] .ranking-meta-label{
  color:rgba(238,244,255,0.86);
}
:root[data-theme="dark"] .ranking-meta-value{
  color:#ffffff;
}
:root[data-theme="dark"] .ranking-meta-sep{
  color:rgba(238,244,255,0.68);
}
.save-image-btn{
  --save-bg:linear-gradient(135deg,#4f8cff 0%, #4167ff 48%, #5f5bff 100%);
  --save-border:#3e64ff;
  --save-text:#ffffff;
  --save-shadow:0 12px 22px rgba(57,94,255,0.28);
  --save-icon-bg:rgba(255,255,255,0.18);
  --save-icon-border:rgba(255,255,255,0.36);
  margin-top:10px;
  width:100%;
  min-height:46px;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid var(--save-border);
  background:var(--save-bg);
  color:var(--save-text);
  font-size:13px;
  font-weight:800;
  letter-spacing:-0.01em;
  box-shadow:var(--save-shadow);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.save-image-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .52s ease;
  pointer-events:none;
  z-index:0;
}
.save-image-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(57,94,255,0.34);
  filter:saturate(1.05);
}
.save-image-btn:hover::after{
  transform:translateX(120%);
}
.save-image-btn:focus-visible{
  outline:3px solid #9fbcff;
  outline-offset:2px;
}
.save-image-btn:active{
  transform:translateY(0);
  box-shadow:0 8px 14px rgba(57,94,255,0.24);
}
.save-image-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  filter:none;
}
.save-btn-icon,
.save-btn-label{
  position:relative;
  z-index:1;
}
.save-btn-icon{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.04em;
  line-height:1;
  border-radius:999px;
  padding:4px 7px;
  color:var(--save-text);
  background:var(--save-icon-bg);
  border:1px solid var(--save-icon-border);
  font-family:inherit;
}
.save-btn-label{
  white-space:nowrap;
}
.save-image-btn.save-style-soft{
  --save-bg:linear-gradient(135deg,#6cb5ff 0%, #5d8cff 55%, #7b74ff 100%);
  --save-border:#6a88ff;
  --save-text:#f9fbff;
  --save-shadow:0 12px 24px rgba(84,116,255,0.3);
  --save-icon-bg:rgba(255,255,255,0.2);
  --save-icon-border:rgba(255,255,255,0.42);
}
@media (prefers-reduced-motion: reduce){
  .save-image-btn,
  .save-image-btn::after{
    transition:none;
  }
  .save-image-btn:hover,
  .save-image-btn:active{
    transform:none;
    filter:none;
  }
  .save-image-btn:hover::after{
    transform:none;
  }
}
.delta{
  margin-left:4px;
  font-size:12px;
  font-weight:700;
}
.delta.pos{color:#22a06b}
.delta.neg{color:#d64545}
.delta.zero{color:#8d98ab}
.ms-body .delta.pos{color:#fff18c}
.ms-body .delta.neg{color:#ffd7d7}
.ms-body .delta.zero{color:#fff}
.ad-slot{
  width:160px;
  min-height:600px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.ms-panel.success{
  border-width:1px;
  border-color:#20c977 !important;
  box-shadow:
    0 0 0 2px rgba(32,201,119,0.45),
    0 0 0 7px rgba(32,201,119,0.18),
    0 0 30px rgba(32,201,119,0.45);
  animation:flash-success .88s cubic-bezier(.2,.85,.2,1);
}
.ms-panel.casting{
  box-shadow:0 0 0 2px rgba(255,214,110,0.28), 0 0 16px rgba(255,214,110,0.35);
}
.ms-panel.fail{
  border-width:1px;
  border-color:#ff5a5a !important;
  box-shadow:
    0 0 0 2px rgba(255,90,90,0.45),
    0 0 0 7px rgba(255,90,90,0.2),
    0 0 30px rgba(255,90,90,0.4);
  animation:flash-fail .88s cubic-bezier(.2,.85,.2,1);
}
@keyframes flash-success{
  0%{filter:brightness(1)}
  28%{filter:brightness(1.08)}
  58%{filter:brightness(1.03)}
  100%{filter:brightness(1)}
}
@keyframes flash-fail{
  0%{filter:brightness(1)}
  24%{filter:brightness(1.08)}
  52%{filter:brightness(1.03)}
  100%{filter:brightness(1)}
}
.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 8px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:#6a7689;
  font-size:12px;
  font-weight:600;
}
.site-footer a{
  color:#4e607c;
  text-decoration:none;
}
.site-footer a:hover{
  text-decoration:underline;
}
.site-footer a:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
.theme-mode{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--surface-strong);
}
.theme-mode-label{
  display:inline-block;
  padding:0 6px 0 8px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.theme-mode-btn{
  height:26px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#334861;
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.theme-mode-btn:hover{
  background:var(--accent-soft);
  color:#1f4072;
}
.theme-mode-btn.is-active{
  border-color:#6c8fc3;
  background:var(--accent-soft);
  color:#1f4072;
  font-weight:700;
}
.theme-mode-btn:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
.theme-mode.theme-mode-icon{
  gap:2px;
  padding:2px;
}
.theme-mode.theme-mode-icon .theme-mode-label{
  display:none;
}
.theme-mode.theme-mode-icon .theme-mode-btn{
  width:30px;
  height:30px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.theme-icon-svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sound-toggle-btn{
  height:34px;
  min-width:72px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface-strong);
  color:#334861;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  padding:0 8px 0 7px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(79,129,214,0.2);
}
.sound-toggle-btn:hover{
  background:var(--accent-soft);
  color:#1f4072;
}
.sound-toggle-btn:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
.sound-toggle-glyph{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  position:relative;
}
.sound-glyph-svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sound-glyph-svg polygon{
  fill:currentColor;
  stroke:none;
}
.sound-toggle-btn .sound-glyph-main{
  display:block;
  width:16px;
  height:16px;
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
  user-select:none;
}
.sound-toggle-btn .sound-glyph-mute{
  display:none;
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:16px;
  color:#ff5f6d;
}
.sound-toggle-track{
  position:relative;
  width:34px;
  height:18px;
  border-radius:999px;
  background:#2794e6;
  border:1px solid rgba(21,95,153,0.72);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.22);
  transition:background .18s ease, border-color .18s ease;
}
.sound-toggle-thumb{
  position:absolute;
  top:1px;
  left:17px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 1px 2px rgba(25,35,53,0.35);
  transition:left .18s ease;
}
.sound-toggle-btn.is-muted .sound-toggle-track{
  background:#1e2430;
  border-color:rgba(6,10,18,0.72);
}
.sound-toggle-btn.is-muted .sound-toggle-thumb{
  left:1px;
}
:root[data-theme="dark"] .site-footer{
  color:#b8c5d8;
}
:root[data-theme="dark"] .site-footer a{
  color:#d2def1;
}
:root[data-theme="dark"] .theme-mode{
  background:var(--surface-strong);
  border-color:#435672;
}
:root[data-theme="dark"] .theme-mode-btn{
  color:#d3e2fb;
}
:root[data-theme="dark"] .theme-mode-btn:hover{
  background:#1f3046;
  color:#e4eeff;
}
:root[data-theme="dark"] .theme-mode-btn.is-active{
  border-color:#6689c8;
  background:#1f3046;
  color:#e4eeff;
}
:root[data-theme="dark"] .sound-toggle-btn{
  background:var(--surface-strong);
  border-color:#435672;
  color:#d3e2fb;
}
:root[data-theme="dark"] .sound-toggle-btn .sound-glyph-main{
  filter:invert(1) brightness(1.15);
}
:root[data-theme="dark"] .sound-toggle-btn:hover{
  background:#1f3046;
  color:#e4eeff;
}
:root[data-theme="dark"] .sound-toggle-btn .sound-toggle-track{
  background:#2794e6;
  border-color:rgba(120,198,255,0.68);
}
:root[data-theme="dark"] .sound-toggle-btn.is-muted .sound-toggle-track{
  background:#242b37;
  border-color:rgba(12,18,30,0.72);
}
.skip-link{
  position:absolute;
  left:12px;
  top:-44px;
  z-index:1000;
  padding:8px 12px;
  border-radius:8px;
  background:#1f365c;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.skip-link:focus{
  top:12px;
}
.doc-page-body{
  margin:0;
  background:#f6f8fc;
  color:#1f2b3e;
}
.doc-page{
  width:min(920px, calc(100% - 28px));
  margin:24px auto;
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:16px;
  padding:22px 20px 18px;
  box-shadow:0 10px 24px rgba(28,52,94,0.07);
}
.doc-header{
  border-bottom:1px solid #e7ecf5;
  padding-bottom:12px;
  margin-bottom:14px;
}
.doc-kicker{
  margin:0 0 6px;
  color:#5a6f90;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.doc-page h1{
  margin:0;
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:29px;
  font-weight:800;
  line-height:1.2;
  color:#1c2f4e;
}
.doc-meta{
  margin:8px 0 0;
  color:#5e6f89;
  font-size:13px;
  font-weight:600;
}
.doc-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.doc-nav a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid #d5dff0;
  background:#f6f9ff;
  color:#2f4f84;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.doc-nav a:hover{
  background:#edf4ff;
  border-color:#bfd1f2;
}
.doc-nav a:focus-visible{
  outline:2px solid #9fbcff;
  outline-offset:2px;
}
.doc-article{
  font-size:14px;
  line-height:1.75;
  color:#32435e;
}
.doc-article section + section{
  margin-top:14px;
}
.doc-article h2{
  margin:0 0 6px;
  font-size:17px;
  font-weight:800;
  color:#1f365c;
}
.doc-article p{
  margin:0;
}
.doc-article ul{
  margin:6px 0 0;
  padding-left:18px;
}
.doc-article li{
  margin:4px 0;
}
.doc-article a{
  color:#305da7;
}
:root[data-theme="dark"] .doc-page-body{
  background:#0d131d;
  color:#dbe7fa;
}
:root[data-theme="dark"] .doc-page{
  background:#131d2b;
  border-color:#33445c;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .doc-header{
  border-bottom-color:#32435a;
}
:root[data-theme="dark"] .doc-kicker{
  color:#9eb4d4;
}
:root[data-theme="dark"] .doc-page h1{
  color:#e8f0ff;
}
:root[data-theme="dark"] .doc-meta{
  color:#aac0de;
}
:root[data-theme="dark"] .doc-nav a{
  border-color:#496184;
  background:#1a2940;
  color:#d0e1ff;
}
:root[data-theme="dark"] .doc-nav a:hover{
  background:#223753;
  border-color:#5f7da9;
}
:root[data-theme="dark"] .doc-article{
  color:#c0d0e8;
}
:root[data-theme="dark"] .doc-article h2{
  color:#dbe8ff;
}
:root[data-theme="dark"] .doc-article a{
  color:#9cc4ff;
}
.all-rank-page-shell{
  width:min(1240px, 100%);
  grid-template-columns:minmax(0, 1fr);
  gap:0;
  padding-top:20px;
}
.today-roll-page-shell{
  width:min(1240px, 100%);
  grid-template-columns:minmax(0, 960px);
  justify-content:center;
  gap:0;
  padding-top:20px;
}
.all-rank-hero{
  margin-bottom:8px;
}
.all-rank-title-row{
  align-items:center;
}
.all-rankings-section{
  border-bottom:0;
  padding-bottom:8px;
}
.all-rankings-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.all-rank-item-card{
  width:100%;
  min-width:0;
}
.all-rank-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.all-rank-item-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.all-rank-item-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  image-rendering:pixelated;
  flex:0 0 auto;
}
.all-rank-item-title{
  margin:0;
  font-size:15px;
  color:#1f365c;
  font-weight:800;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.all-rank-item-meta{
  font-size:11px;
  font-weight:700;
  color:#6b7f9e;
  white-space:nowrap;
}
.all-rank-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.all-rank-entry{
  list-style:none;
}
.all-rank-dual{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 246px;
  align-items:start;
  gap:12px;
}
.all-rank-text{
  min-width:0;
  display:grid;
  gap:6px;
  align-content:start;
  padding:4px 2px 2px;
}
.all-rank-text-line{
  margin:0;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.all-rank-text-build{
  color:#4d6487;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.all-rank-inline-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:20px;
  margin-right:6px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  color:#ffffff;
  background:#607089;
}
.all-rank-inline-rank.rank-gold{
  color:#5a4106;
  background:linear-gradient(180deg,#ffdf84 0%, #eab84e 100%);
}
.all-rank-inline-rank.rank-silver{
  color:#425064;
  background:linear-gradient(180deg,#eef3fb 0%, #c6d0df 100%);
}
.all-rank-inline-rank.rank-bronze{
  color:#5a2f16;
  background:linear-gradient(180deg,#f4c8a8 0%, #cf8d5d 100%);
}
.all-rank-text-name{
  font-size:13px;
  font-weight:800;
}
.all-rank-text-stat{
  color:#2f4a70;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.all-rank-stat-label{
  color:#4c6283;
  font-weight:700;
}
.all-rank-stat-value{
  color:#1f365c;
  font-size:15px;
  font-weight:950;
  letter-spacing:-0.01em;
}
.all-rank-text-time{
  color:#667f9f;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.all-rank-list .ranking-ms-time{
  margin-top:4px;
}
.all-rank-list .ranking-ms-itemline{
  display:block;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  line-height:1.35;
  word-break:keep-all;
}
.all-rank-list .ranking-ms-ownerline,
.all-rank-list .ranking-ms-itemline-main{
  display:block;
}
.about-plain{
  padding:0 2px 2px;
}
.about-plain section{
  display:grid;
  gap:8px;
}
.about-plain section + section{
  margin-top:18px;
}
.about-plain .section-title{
  margin:0;
  line-height:1.35;
}
.about-plain .guide{
  margin:0;
  line-height:1.72;
}
.about-plain ul.guide{
  margin:0;
  padding-left:20px;
}
.about-plain p.guide + ul.guide{
  margin-top:2px;
}
.about-plain li{
  margin:2px 0;
}
.doc-static-page .container{
  padding:14px 8px 0;
}
.doc-static-page .hero{
  padding-bottom:12px;
  margin-bottom:10px;
}
.doc-static-page .all-rank-hero{
  margin-bottom:0;
}
.doc-static-page .content-block{
  padding:10px 2px 12px;
  border-bottom:0;
  content-visibility:visible;
  contain-intrinsic-size:auto;
}
.doc-static-page .about-plain section{
  gap:6px;
}
.doc-static-page .about-plain section + section{
  margin-top:22px;
}
.doc-static-page .about-plain .section-title{
  margin-bottom:0;
}
.doc-static-page .site-footer{
  margin:12px 0 8px;
  padding-top:10px;
}
:root[data-theme="dark"] .all-rank-item-title{
  color:#dbe8ff;
}
:root[data-theme="dark"] .all-rank-item-meta{
  color:#9db4d6;
}
:root[data-theme="dark"] .all-rank-text-build{
  color:#b5cae8;
}
:root[data-theme="dark"] .all-rank-text-stat{
  color:#d5e5ff;
}
:root[data-theme="dark"] .all-rank-stat-label{
  color:#acc3e5;
}
:root[data-theme="dark"] .all-rank-stat-value{
  color:#f2f7ff;
}
:root[data-theme="dark"] .all-rank-text-time{
  color:#a9bfdc;
}
.admin-ranking-notice-wrap{
  padding-top:6px;
  padding-bottom:6px;
}
.admin-ranking-notice{
  font-size:13px;
  font-weight:700;
  color:#435a7f;
  border:1px solid #d6deec;
  background:#f6f9ff;
}
.admin-ranking-notice.is-success{
  color:#1f7a50;
  border-color:#b9e2ce;
  background:#f2fbf6;
}
.admin-ranking-notice.is-error{
  color:#b83d4e;
  border-color:#efc0c8;
  background:#fff4f6;
}
.admin-ranking-login-panel{
  max-width:520px;
}
.admin-ranking-login-form{
  display:grid;
  gap:10px;
  margin-top:6px;
}
.admin-ranking-login-form label{
  font-size:12px;
  font-weight:700;
  color:#4f6485;
}
.admin-ranking-login-form input{
  height:38px;
  border:1px solid #ced7e6;
  border-radius:10px;
  padding:0 11px;
  font-size:13px;
  font-weight:700;
  color:#1f3557;
  background:#ffffff;
}
.admin-ranking-login-form input:focus-visible{
  outline:2px solid #9bb8e3;
  outline-offset:1px;
}
.admin-ranking-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-ranking-topbar-copy .section-title{
  margin-bottom:4px;
}
.admin-ranking-topbar-copy .guide{
  margin:0;
}
.admin-ranking-section{
  border-bottom:0;
}
.admin-ranking-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.admin-ranking-item-card{
  width:100%;
  min-width:0;
}
.admin-ranking-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.admin-ranking-item-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.admin-ranking-item-title{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:#1f365c;
  letter-spacing:-0.01em;
}
.admin-ranking-item-meta{
  margin:2px 0 0;
  font-size:12px;
  font-weight:700;
  color:#627a9c;
}
.admin-ranking-action-btn{
  width:auto;
  min-height:40px;
  margin-top:0;
  padding:8px 12px;
  border-radius:12px;
  gap:7px;
  font-size:12px;
}
.admin-ranking-login-form .admin-ranking-login-btn{
  align-self:flex-start;
  min-width:118px;
}
.admin-ranking-logout-btn{
  --save-bg:linear-gradient(135deg,#324869 0%, #2a3e5d 58%, #273651 100%);
  --save-border:#3d557a;
  --save-text:#f5f8ff;
  --save-shadow:0 10px 18px rgba(24,40,66,0.3);
  --save-icon-bg:rgba(255,255,255,0.16);
  --save-icon-border:rgba(255,255,255,0.35);
}
.admin-ranking-delete-btn{
  --save-bg:linear-gradient(135deg,#ee7588 0%, #df5f74 58%, #cb4b61 100%);
  --save-border:#d56779;
  --save-text:#fff7f9;
  --save-shadow:0 10px 20px rgba(184,60,86,0.28);
  --save-icon-bg:rgba(255,255,255,0.18);
  --save-icon-border:rgba(255,255,255,0.38);
}
.admin-ranking-preview{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.admin-ranking-preview li{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.admin-ranking-preview-rank{
  flex:0 0 auto;
  min-width:26px;
  height:18px;
  border-radius:999px;
  background:#e5ecf8;
  color:#445b7d;
  font-size:10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-ranking-preview-text{
  color:#4c6383;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  word-break:break-word;
}
.admin-ranking-empty{
  margin:10px 0 0;
  color:#697f9e;
  font-size:12px;
  font-weight:700;
}
:root[data-theme="dark"] .admin-ranking-notice{
  color:#b9cae5;
  border-color:#3a4d69;
  background:#182538;
}
:root[data-theme="dark"] .admin-ranking-notice.is-success{
  color:#89dfb3;
  border-color:#2d6a4f;
  background:#172a24;
}
:root[data-theme="dark"] .admin-ranking-notice.is-error{
  color:#ff9ca8;
  border-color:#754252;
  background:#2a1a22;
}
:root[data-theme="dark"] .admin-ranking-login-form label{
  color:#b6c9e6;
}
:root[data-theme="dark"] .admin-ranking-login-form input{
  border-color:#425672;
  color:#e6efff;
  background:#111c2a;
}
:root[data-theme="dark"] .admin-ranking-login-form input:focus-visible{
  outline-color:#5f80b2;
}
:root[data-theme="dark"] .admin-ranking-item-title{
  color:#e0ebff;
}
:root[data-theme="dark"] .admin-ranking-item-meta{
  color:#a5bad8;
}
:root[data-theme="dark"] .admin-ranking-logout-btn{
  --save-bg:linear-gradient(135deg,#2b3f60 0%, #243553 58%, #1f2c45 100%);
  --save-border:#405879;
  --save-text:#edf3ff;
  --save-shadow:0 10px 20px rgba(9,18,33,0.45);
}
:root[data-theme="dark"] .admin-ranking-delete-btn{
  --save-bg:linear-gradient(135deg,#cd6f82 0%, #bb5e73 58%, #a54f64 100%);
  --save-border:#b76579;
  --save-text:#fff4f7;
  --save-shadow:0 10px 22px rgba(83,31,45,0.42);
}
:root[data-theme="dark"] .admin-ranking-preview-rank{
  background:#2a3b57;
  color:#c3d6f5;
}
:root[data-theme="dark"] .admin-ranking-preview-text{
  color:#bfd1ee;
}
:root[data-theme="dark"] .admin-ranking-empty{
  color:#abc0df;
}
@media (max-width: 1320px){
  .page-shell{
    grid-template-columns:1fr minmax(0, 960px) 1fr;
    gap:12px;
  }
  .page-shell.all-rank-page-shell{
    grid-template-columns:minmax(0, 960px);
    justify-content:center;
  }
  .page-shell.today-roll-page-shell{
    grid-template-columns:minmax(0, 960px);
    justify-content:center;
  }
  .ad-rail{display:none}
}
@media (max-width: 980px){
  .container{padding:10px 0 0}
  .sim-area{grid-template-columns:1fr}
  .rule-banner{display:none}
  h1{font-size:26px}
  .all-rankings-grid{grid-template-columns:1fr}
  .all-rank-dual{
    grid-template-columns:1fr;
    gap:8px;
  }
  .all-rank-list .ranking-ms-card{
    justify-self:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:7px 6px;
  }
  .all-rank-list .ranking-ms-main{
    gap:6px;
  }
  .all-rank-list .ranking-ms-icon-wrap{
    width:42px;
    height:42px;
  }
  .all-rank-list .ranking-ms-icon{
    width:30px;
    height:30px;
  }
  .all-rank-list .ranking-ms-table{
    table-layout:fixed;
  }
  .all-rank-list .ranking-ms-table th,
  .all-rank-list .ranking-ms-table td{
    font-size:11px;
    line-height:16px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .all-rank-list .ranking-ms-table th{
    width:62px;
  }
  .all-rank-list .ranking-ms-itemline-main{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .admin-ranking-grid{grid-template-columns:1fr}
  .admin-ranking-topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-ranking-item-head{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width: 760px){
  .hero-top-banner{display:none}
  .mobile-top-banner{display:flex}
  .mobile-bottom-banner{display:flex}
  .hero-title-row{
    flex-wrap:wrap;
    align-items:center;
  }
  .hero-tools{
    margin-left:0;
    width:100%;
    justify-content:flex-end;
  }
  .hero-quick-links{
    width:100%;
    justify-content:center;
    margin-top:12px;
  }
  .hero-quick-links .market-sort-link{
    min-width:112px;
  }
  .today-roll-headline{
    font-size:14px;
  }
  .today-roll-home-link{
    width:100%;
  }
  .recent-volume-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
  }
  .recent-volume-panel{
    padding:14px 14px 15px;
  }
  .recent-volume-chart-shell{
    padding:10px 8px 8px;
  }
  .recent-volume-tick,
  .recent-volume-x-label{
    font-size:10px;
  }
  .recent-volume-foot{
    align-items:flex-start;
  }
  .all-rank-item-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .doc-page{
    width:calc(100% - 18px);
    margin:12px auto;
    border-radius:12px;
    padding:16px 14px 14px;
  }
  .doc-page h1{
    font-size:24px;
  }
}