:root{
  --detail-bg:#20232b;
  --detail-ink:#f5f7fb;
  --detail-muted:#98a3b3;
  --detail-line:rgba(255,255,255,.11);
  --detail-pink:#fcacd3;
  --detail-heading-weight:700;
  --detail-emphasis-weight:600;
  --detail-metric-weight:750;
}

html{scroll-padding-top:94px}
body.detail-page-body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--detail-ink);
  background:
    radial-gradient(circle at 2% 2%,rgba(249,98,172,.13),transparent 30rem),
    radial-gradient(circle at 98% 14%,rgba(96,165,250,.1),transparent 34rem),
    var(--detail-bg);
  font-family:"Pretendard Variable",Pretendard,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}
body.detail-page-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent 82%);
}

.detail-site-header{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(32,35,43,.78);
  backdrop-filter:blur(18px) saturate(140%);
}
.detail-site-header-inner,.detail-footer-inner{
  width:min(1180px,calc(100% - 36px));
  margin-inline:auto;
}
.detail-site-header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.detail-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--detail-ink);
  text-decoration:none;
}
.detail-brand-mark{
  width:35px;
  height:35px;
  display:block;
  flex:none;
  border-radius:11px;
  box-shadow:0 10px 28px rgba(249,98,172,.2);
}
.detail-brand-copy{display:grid;gap:1px}
.detail-brand-copy strong{font-size:.98rem;line-height:1;letter-spacing:-.025em;font-weight:var(--detail-heading-weight)}
.detail-brand-copy small{color:var(--detail-muted);font-size:.61rem;line-height:1;letter-spacing:.12em}
.detail-actions{display:flex;align-items:center;gap:8px}
.detail-action{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:10px;
  color:#bac2cf;
  background:transparent;
  font:inherit;
  font-size:.84rem;
  font-weight:var(--detail-emphasis-weight);
  text-decoration:none;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
.detail-action:hover{color:var(--detail-ink);background:rgba(255,255,255,.05)}
.detail-action-primary{border-color:rgba(252,172,211,.28);color:var(--detail-pink);background:rgba(249,98,172,.07)}
.detail-action-primary:hover{border-color:rgba(252,172,211,.55);background:rgba(249,98,172,.12);transform:translateY(-1px)}
.detail-brand:focus-visible,.detail-action:focus-visible,.toc a:focus-visible{
  outline:2px solid var(--detail-pink);
  outline-offset:4px;
}

.detail-page{padding-top:28px}
.detail-page .hero{
  border-color:rgba(255,255,255,.12);
  border-radius:28px;
  box-shadow:0 32px 88px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
}
.detail-page .shell{margin-top:20px}
.detail-page .toc{
  top:94px;
  max-height:calc(100vh - 112px);
  overflow:auto;
  border-color:var(--detail-line);
  border-radius:18px;
  background:rgba(43,47,58,.82);
  box-shadow:0 18px 48px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
}
.detail-page .toc-title{
  padding:0 10px 9px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--detail-pink);
  font-size:.76rem;
  letter-spacing:.08em;
}
.detail-page .toc a{border:1px solid transparent;font-size:.86rem;transition:color .16s ease,background .16s ease,border-color .16s ease}
.detail-page .toc a:hover{border-color:rgba(252,172,211,.13);background:rgba(252,172,211,.07)}
.detail-page .card{
  border-color:var(--detail-line);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(48,53,65,.9),rgba(42,46,56,.84));
  box-shadow:0 18px 52px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025);
}
.detail-page .card-head{
  padding:18px 20px;
  background:linear-gradient(90deg,rgba(249,98,172,.1),rgba(96,165,250,.035));
}
.detail-page .num{width:40px;height:40px;border-radius:12px}
.detail-page .subcard,.detail-page .event,.detail-page .team-box{
  border-color:rgba(255,255,255,.09);
}

.detail-page .eyebrow,
.detail-page h1,
.detail-page h2,
.detail-page h3,
.detail-page .num,
.detail-page .toc-title,
.detail-page .badge strong,
.detail-page .event strong,
.detail-page .chip strong,
.detail-page .cast-box strong,
.detail-page .compare-stat b,
.detail-page .compare-table th,
.detail-page .team-title,
.detail-page .champ-line,
.detail-page .time{
  font-weight:var(--detail-heading-weight)!important;
}
.detail-page .stat-label,
.detail-page .kda,
.detail-page .result-text,
.detail-page .result-pill,
.detail-page .skill-row-label,
.detail-page .compare-time,
.detail-page .diff-list span,
.detail-page .priority-badge,
.detail-page .grade-mark,
.detail-page .inline-token,
.detail-page .champ-inline,
.detail-page .em-good,
.detail-page .em-warn,
.detail-page .em-bad,
.detail-page .em-blue,
.detail-page .task-card p strong,
.detail-page .grade-detail-grid strong,
.detail-page .takeaway strong,
.detail-page .final-eval-text strong,
.detail-page .final-comment strong{
  font-weight:var(--detail-emphasis-weight)!important;
}
.detail-page .stat-value,
.detail-page .grade strong,
.detail-page .grade-badge{
  font-weight:var(--detail-metric-weight)!important;
}
.detail-page .toc a{font-weight:500}
.detail-page .lead,
.detail-page .card p,
.detail-page .card li{font-weight:400}

.detail-footer{border-top:1px solid var(--detail-line)}
.detail-footer-inner{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.detail-footer-brand .detail-brand-mark{width:30px;height:30px;border-radius:9px}
.detail-footer p{max-width:520px;margin:0;color:#687383;font-size:.71rem;line-height:1.5;text-align:right}

@media(max-width:980px){
  .detail-page .toc{max-height:none;overflow:visible}
}
@media(max-width:640px){
  .detail-site-header-inner,.detail-footer-inner{width:min(100% - 24px,1180px)}
  .detail-site-header-inner{min-height:66px}
  .detail-brand-copy small{display:none}
  .detail-action{min-height:36px;padding-inline:10px;font-size:.76rem}
  .detail-page{padding-top:16px}
  .detail-page .hero{border-radius:22px}
  .detail-page .card{border-radius:18px}
  .detail-footer-inner{align-items:flex-start;flex-direction:column;padding:28px 0}
  .detail-footer p{text-align:left}
}
@media(max-width:390px){
  .detail-action:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media print{
  .detail-site-header,.detail-footer{display:none!important}
  body.detail-page-body::before{display:none}
  .detail-page{padding-top:0}
}