:root{
  --bg:#05070c; --bg-glow:#0d1220;
  --surface:#10141f; --surface-2:#171c2b; --surface-hover:#1c2233;
  --hairline:#20263a; --hairline-soft:#171b28;
  --gold:#c9a227; --gold-bright:#f0c85a; --gold-dim:#8a7028;
  --red:#e2483a; --red-bright:#ff6b52;
  --blue:#4f8fe0; --blue-bright:#7fb2f5;
  --purple:#9b6bd9; --purple-bright:#b98af0;
  --green:#3fb873; --green-bright:#5fd692;
  --text:#eef1f7; --text-muted:#9aa3b8; --text-faint:#616a80;
  --silver:#c7ccd6; --bronze:#cd8b57;
}
*{box-sizing:border-box;}
body{margin:0; background:radial-gradient(ellipse 1200px 600px at 50% -8%, var(--bg-glow) 0%, var(--bg) 60%);
  color:var(--text); font-family:'Noto Sans KR', sans-serif; -webkit-font-smoothing:antialiased;}

img{max-width:100%; display:block;}
h1,h2,h3,p{margin:0;}

/* ---- 공용 ---- */
.section-label{margin:28px 0 12px; font-size:13px; font-weight:700; color:var(--text-faint); letter-spacing:0.3px; text-transform:uppercase;}
.section-label:first-of-type{margin-top:0;}
.section-label .count{margin-left:8px; font-weight:400; color:var(--text-faint); text-transform:none;}
.list{display:flex; flex-direction:column; gap:8px;}
.empty{text-align:center; font-size:12.5px; color:var(--text-faint); padding:26px 10px; border:1px dashed var(--hairline); border-radius:12px;}
.badge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; flex:none;}
.badge.green{background:rgba(63,184,115,0.14); color:var(--green-bright); border:1px solid rgba(63,184,115,0.3);}
.badge.orange{background:rgba(226,72,58,0.14); color:var(--red-bright); border:1px solid rgba(226,72,58,0.3);}
.badge.blue{background:rgba(79,143,224,0.14); color:var(--blue-bright); border:1px solid rgba(79,143,224,0.3);}
.badge.gray{background:rgba(154,163,184,0.10); color:var(--text-faint); border:1px solid var(--hairline);}
.live-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green-bright);
  margin-right:6px; box-shadow:0 0 0 3px rgba(63,184,115,0.16);}
.live-dot.stale{background:var(--red-bright); box-shadow:0 0 0 3px rgba(226,72,58,0.16);}
.page-header{margin-bottom:6px;}
.page-header h1{font-family:'Black Han Sans', sans-serif; font-size:26px; letter-spacing:0.5px;}
.page-header p{font-size:13px; color:var(--text-faint); margin-top:4px;}

/* 스킬북 등급: 영웅=붉은, 희귀=푸른. 실제 이미지 asset이 없어 아이콘+색으로 표현한다. */
.sb-hero{background:linear-gradient(160deg, rgba(226,72,58,0.28), rgba(226,72,58,0.08)); color:var(--red-bright); border:1px solid rgba(226,72,58,0.4);}
.sb-rare{background:linear-gradient(160deg, rgba(79,143,224,0.28), rgba(79,143,224,0.08)); color:var(--blue-bright); border:1px solid rgba(79,143,224,0.4);}

/* =================================================================== */
/* Mobile presentation                                                  */
/* =================================================================== */
#mobile-root{display:none;}
#mobile-root.active{display:block;}
.mobile-main{max-width:600px; margin:0 auto; padding:0 16px calc(104px + env(safe-area-inset-bottom));}

/* 홈 Hero: 큰 배경 일러스트를 쓰지 않는다 — 은은한 광원 그라데이션 위에 엠블럼/길드명/주차만
   깔끔하게 올린다("홍보 배너"가 아니라 정보 패널). */
.m-hero{position:relative; border-radius:18px; padding:24px 22px; overflow:hidden;
  background:radial-gradient(120% 140% at 15% 0%, rgba(201,162,39,0.14) 0%, transparent 55%), var(--surface);
  border:1px solid var(--hairline-soft);}
.m-hero-content{position:relative;}
.m-hero-emblem{width:46px; height:46px; margin-bottom:12px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));}
.m-guild-name{font-family:'Black Han Sans', sans-serif; font-size:26px; margin:0; letter-spacing:0.5px;}
.m-hero-meta{font-size:12.5px; color:var(--text-muted); margin:4px 0 0; display:flex; align-items:center;}

.m-kpi-row{display:flex; gap:10px; margin-top:16px;}
.m-kpi{flex:1; background:var(--surface); border:1px solid var(--hairline-soft); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:6px;}
.m-kpi.accent{border-color:rgba(201,162,39,0.35); background:linear-gradient(160deg, rgba(201,162,39,0.12), var(--surface) 65%);}
.m-kpi .value{font-family:'Black Han Sans', sans-serif; font-size:32px; line-height:1;}
.m-kpi.accent .value{color:var(--gold-bright);}
.m-kpi .label{font-size:11.5px; color:var(--text-faint);}

.m-feature-scroll{display:flex; gap:10px; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none;}
.m-feature-scroll::-webkit-scrollbar{display:none;}
.m-boss-feature{position:relative; flex:none; width:150px; height:210px; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 15%, rgba(201,162,39,0.10), transparent 60%), var(--surface-2);}
/* 보스 원본 이미지는 인물 비율이 카드와 다를 수 있다 — 절대 crop하지 않고(머리/몸통 잘림 방지)
   contain으로 항상 전체가 보이게 배치한다. */
.m-boss-thumb.feature{position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; object-position:center 15%;}
.m-boss-feature-shade{position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,7,12,0.92) 100%);}
.m-boss-feature-info{position:absolute; left:14px; right:14px; bottom:12px;}
.m-boss-feature-info .name{font-family:'Black Han Sans', sans-serif; font-size:17px;}
.m-boss-feature-info .sub{font-size:11px; color:var(--text-muted); margin-top:3px;}

.m-boss-thumb.round{width:56px; height:56px; border-radius:12px; object-fit:contain; object-position:center 20%; flex:none;
  background:var(--surface-2); padding:4px;}
.m-boss-thumb.placeholder{display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--gold-bright); font-weight:900; font-size:20px; border-radius:12px;}

.m-up-row{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:14px; padding:11px 14px;}
.m-up-row .info{flex:1; min-width:0;}
.m-up-row .info .name{font-size:14.5px; font-weight:700;}
.m-up-row .info .time{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.m-up-row .remaining{flex:none; font-family:'Black Han Sans', sans-serif; font-size:19px; color:var(--gold-bright);}

.m-leaderboard{background:var(--surface); border-radius:14px; padding:2px 16px;}
.m-lb-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--hairline-soft); font-size:13.5px;}
.m-lb-row:first-child{border-top:none;}
.m-lb-row .rank{width:18px; font-family:'Black Han Sans', sans-serif; font-size:14px; color:var(--text-faint); text-align:center;}
.m-lb-row .name{flex:1; font-weight:700;}
.m-lb-row .power{font-family:'Black Han Sans', sans-serif; font-size:15px; color:var(--gold-bright);}
.m-job-icon{border-radius:8px; object-fit:cover; flex:none; background:var(--surface-2);}
.m-job-icon.sm{width:24px; height:24px;}
.m-job-icon.md{width:30px; height:30px;}
.m-job-icon.lg{width:44px; height:44px;}
.m-job-icon.xs{width:18px; height:18px; border-radius:5px;}
.m-job-tag{font-size:10px; color:var(--text-faint); background:var(--surface-2); padding:2px 7px; border-radius:6px; flex:none;}

.m-podium{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:10px;}
.m-podium-card{background:var(--surface); border-radius:16px; padding:18px 10px 16px; text-align:center; position:relative;}
.m-podium-card .rank{display:block; font-family:'Black Han Sans', sans-serif; font-size:13px; color:var(--text-faint); margin-bottom:8px;}
.m-podium-card .m-job-icon{margin:0 auto 10px;}
.m-podium-card .name{font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m-podium-card .power{margin-top:6px; font-family:'Black Han Sans', sans-serif; font-size:15px; color:var(--gold-bright);}
.m-podium-card.rank-1{background:linear-gradient(160deg, rgba(240,200,90,0.20), var(--surface) 70%); border:1px solid rgba(240,200,90,0.4); transform:translateY(-8px); padding-top:22px;}
.m-podium-card.rank-1 .rank{color:#ffd66b; font-size:16px;}
.m-podium-card.rank-1 .m-job-icon{width:52px; height:52px;}
.m-podium-card.rank-2 .rank{color:var(--silver);}
.m-podium-card.rank-3 .rank{color:var(--bronze);}

.m-drop-entry{display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:14px; padding:12px 14px;}
.m-drop-thumb{width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;}
.m-drop-thumb svg{width:20px; height:20px;}
.m-drop-thumb.plain{background:var(--surface-2);}
.m-drop-body{flex:1; min-width:0;}
.m-drop-title{display:flex; align-items:center; gap:7px;}
.m-drop-title .item{font-size:14px; font-weight:700;}
.m-drop-sub{font-size:11px; color:var(--text-faint); margin-top:3px;}
.m-drop-meta{font-size:11px; color:var(--text-faint); margin-top:2px;}
.m-drop-meta b{color:var(--text-muted); font-weight:600;}
.m-grade{font-size:9.5px; font-weight:700; color:var(--text-faint); background:var(--surface-2); padding:2px 7px; border-radius:6px;}

.m-chip-row{display:flex; gap:8px; margin:18px 0 12px; overflow-x:auto;}
.m-chip{flex:none; background:var(--surface); border:1px solid transparent; color:var(--text-faint); border-radius:20px; padding:9px 18px; font-size:12.5px; font-weight:700; font-family:inherit;}
.m-chip.active{color:var(--bg); background:var(--gold-bright);}

.m-boss-list-card{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:14px; padding:12px;}
.m-boss-thumb.wide{width:72px; height:88px; border-radius:10px; object-fit:contain; object-position:center 15%;
  background:radial-gradient(120% 100% at 50% 10%, rgba(201,162,39,0.12), transparent 60%), var(--surface-2); flex:none;}
.m-boss-list-info{flex:1; min-width:0;}
.m-boss-list-info .top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.m-boss-list-info .name{font-family:'Black Han Sans', sans-serif; font-size:16px;}
.m-boss-list-info .sub{font-size:11px; color:var(--text-faint); margin-top:6px;}

.m-back{background:none; border:none; color:var(--gold-bright); font-size:13px; font-weight:700; padding:14px 2px; font-family:inherit;}
.m-boss-hero{position:relative; height:240px; border-radius:18px; overflow:hidden; margin-bottom:10px;
  background:radial-gradient(90% 100% at 50% 10%, rgba(201,162,39,0.14), transparent 60%), var(--surface);}
.m-boss-thumb.hero{position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain; object-position:center 8%;}
.m-boss-hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,7,12,0.94) 100%);}
.m-boss-hero-info{position:absolute; left:18px; right:18px; bottom:16px;}
.m-boss-hero-info .cat{font-size:11.5px; color:var(--gold-bright); font-weight:700; text-transform:uppercase; letter-spacing:0.4px;}
.m-boss-hero-info .name{font-family:'Black Han Sans', sans-serif; font-size:26px; margin-top:4px;}
.m-boss-hero-info .row{margin-top:8px; display:flex; align-items:center; gap:10px;}
.m-boss-hero-info .next{font-size:12px; color:var(--text-muted);}

.m-session-card{background:var(--surface); border-radius:14px; padding:14px 16px;}
.m-session-top{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; font-weight:700;}
.m-session-meta{font-size:11.5px; color:var(--text-faint); margin-top:8px;}
.m-session-meta b{color:var(--gold-bright);}
.m-expand{margin-top:10px;}
.m-expand summary{font-size:11.5px; color:var(--text-faint); cursor:pointer; list-style:none; font-weight:600;}
.m-expand summary::-webkit-details-marker{display:none;}
.m-expand summary::before{content:"▸ "; color:var(--gold-bright);}
.m-expand[open] summary::before{content:"▾ ";}
.m-participant-grid{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; font-size:12px; color:var(--text-muted);}
.m-participant-grid span{display:flex; align-items:center; gap:5px;}
.m-drop-list{display:flex; flex-direction:column; gap:6px; margin-top:10px;}

.toolbar{display:flex; gap:8px; margin-bottom:4px;}
.toolbar input, .toolbar select{flex:1; background:var(--surface); border:1px solid var(--hairline-soft); color:var(--text); border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit;}
.toolbar select{flex:none; width:130px;}

.m-rank-row{display:flex; align-items:center; gap:12px; padding:12px 6px; border-top:1px solid var(--hairline-soft);}
.m-rank-row:first-child{border-top:none;}
.m-rank-row.top{background:linear-gradient(90deg, rgba(201,162,39,0.08), transparent); border-radius:10px; border-top:none;}
.m-rank-row .rank-num{flex:none; width:22px; font-family:'Black Han Sans', sans-serif; font-size:14px; color:var(--text-faint); text-align:center;}
.m-rank-row.rank-1 .rank-num{color:#ffd66b;}
.m-rank-row.rank-2 .rank-num{color:var(--silver);}
.m-rank-row.rank-3 .rank-num{color:var(--bronze);}
.m-rank-main{flex:1; min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.m-rank-main .name{font-size:14px; font-weight:700;}
.m-rank-main .power{font-family:'Black Han Sans', sans-serif; font-size:15px; color:var(--gold-bright);}
.m-rank-side{flex:none; font-size:12px; color:var(--text-faint);}

.m-search-full{width:100%; background:var(--surface); border:1px solid var(--hairline-soft); color:var(--text); border-radius:10px; padding:11px 14px; font-size:13.5px; font-family:inherit; margin-bottom:10px;}

.m-pending-note{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-faint); padding:2px 2px 16px;}
.m-pending-note span{color:var(--text-muted); font-weight:700;}
.m-settlement-summary{background:var(--surface); border-radius:14px; padding:4px 16px;}
.m-settlement-summary .row{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--hairline-soft); font-size:13px;}
.m-settlement-summary .row:first-child{border-top:none;}
.m-settlement-summary .period{color:var(--text-muted); flex:1;}
.m-settlement-summary .amount{font-family:'Black Han Sans', sans-serif; font-size:16px; color:var(--gold-bright);}
.m-settlement-hero{background:linear-gradient(160deg, rgba(201,162,39,0.14), var(--surface) 65%); border:1px solid rgba(201,162,39,0.3); border-radius:18px; padding:26px 22px;}
.m-settlement-hero .period{font-size:13.5px; color:var(--text-muted);}
.m-settlement-amount{margin-top:10px; font-family:'Black Han Sans', sans-serif; font-size:38px; color:var(--gold-bright); line-height:1;}
.m-settlement-amount .unit{font-size:14px; color:var(--text-muted); font-family:'Noto Sans KR', sans-serif; font-weight:400; margin-left:6px;}
.m-week-status{margin-top:10px; font-size:12.5px; color:var(--text-faint); display:inline-block;}
.m-week-status.done{color:var(--green-bright);}
.m-settlement-pending{margin-top:8px; font-size:17px; font-weight:700; color:var(--text-faint);}
.m-week-history{display:flex; flex-direction:column;}
.m-week-row{display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-top:1px solid var(--hairline-soft); font-size:13px;}
.m-week-row:first-child{border-top:none;}
.m-week-row .period{color:var(--text-muted);}
.m-week-row .amount{font-weight:700; color:var(--text);}
.m-week-row .m-week-pending{color:var(--text-faint); font-size:12.5px;}

.m-tabbar{position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(0deg, var(--bg) 60%, rgba(5,7,12,0));}
.m-tabbar-inner{width:100%; max-width:600px; display:flex; justify-content:space-between; background:var(--surface);
  border:1px solid var(--hairline); border-radius:18px; padding:8px 4px; box-shadow:0 12px 32px rgba(0,0,0,0.5);}
.m-tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; border-radius:12px;
  color:var(--text-faint); background:none; border:none; font-family:inherit; min-width:44px; min-height:44px;}
.m-tab svg{width:20px; height:20px;}
.m-tab span{font-size:10.5px; font-weight:700; letter-spacing:-0.1px; white-space:nowrap;}
.m-tab.active{color:var(--gold-bright);}
.m-tab.active svg{filter:drop-shadow(0 0 6px rgba(240,200,90,0.5));}

/* =================================================================== */
/* Desktop presentation                                                 */
/* =================================================================== */
#desktop-root{display:none;}
/* 게임 런처형 레이아웃: 좌측 고정 사이드바 + 우측 메인. */
#desktop-root.active{display:flex; align-items:flex-start;}
.d-sidebar{position:sticky; top:0; height:100vh; width:232px; flex:none; padding:28px 18px; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--hairline-soft);}
.d-sidebar .d-brand{display:flex; align-items:center; gap:12px; font-family:'Black Han Sans', sans-serif; font-size:17px; letter-spacing:0.3px; padding:0 10px; margin-bottom:28px;}
.d-sidebar .d-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.d-sidebar .d-tab{display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; color:var(--text-muted);
  font-family:inherit; font-size:14.5px; font-weight:700; padding:12px 12px; border-radius:11px; cursor:pointer; position:relative;}
.d-sidebar .d-tab svg{width:19px; height:19px; flex:none;}
.d-sidebar .d-tab:hover{color:var(--text); background:var(--surface-hover);}
.d-sidebar .d-tab.active{color:var(--gold-bright); background:linear-gradient(90deg, rgba(201,162,39,0.14), transparent);}
.d-sidebar .d-tab.active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--gold-bright); border-radius:2px;}
.d-meta{font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; padding:0 10px; margin-top:auto;}

.desktop-main{flex:1; min-width:0; max-width:1220px; margin:0 auto; padding:36px 44px 80px;}

/* 홈 Hero: 큰 배경 일러스트를 쓰지 않는다 — 은은한 광원 그라데이션 위에 엠블럼/길드명/주차/KPI만
   깔끔하게 올린다("홍보 배너"가 아니라 정보 패널). */
.d-hero{position:relative; border-radius:20px; padding:36px 40px; overflow:hidden;
  background:radial-gradient(90% 160% at 8% 0%, rgba(201,162,39,0.16) 0%, transparent 55%), var(--surface);
  border:1px solid var(--hairline-soft); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.d-hero-content{display:flex; align-items:center; gap:20px;}
.d-hero-emblem{width:64px; height:64px; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.4));}
.d-guild-name{font-family:'Black Han Sans', sans-serif; font-size:32px; margin:0; letter-spacing:0.5px;}
.d-hero-meta{font-size:13.5px; color:var(--text-muted); margin:6px 0 0;}
.d-hero-kpi{display:flex; gap:16px;}
.d-kpi{background:var(--surface-2); border:1px solid var(--hairline-soft); border-radius:14px; padding:16px 28px; min-width:170px;}
.d-kpi .value{display:block; font-family:'Black Han Sans', sans-serif; font-size:34px; line-height:1;}
.d-kpi.accent .value{color:var(--gold-bright);}
.d-kpi .label{font-size:12px; color:var(--text-faint); margin-top:6px;}

.d-home-row{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px;}
.d-home-panel{min-width:0;}
.d-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.d-panel-head h2{font-size:15px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.4px;}
.d-panel-head.spaced{margin-top:34px;}
.d-link{background:none; border:none; color:var(--gold-bright); font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer;}

.d-feature-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.d-boss-feature{position:relative; height:200px; border-radius:16px; overflow:hidden; cursor:pointer;
  background:radial-gradient(120% 100% at 50% 10%, rgba(201,162,39,0.12), transparent 60%), var(--surface-2);}
/* 보스 원본 이미지 비율이 카드와 달라도 절대 crop하지 않는다(머리/몸통 잘림 방지) — contain으로
   전체 인물이 항상 보이게 배치하고, 이름표는 아래 그라데이션 위에 별도 텍스트로 얹는다. */
.d-boss-thumb.feature{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain;
  object-position:center 12%; transition:transform 0.4s ease;}
.d-boss-feature:hover .d-boss-thumb.feature{transform:scale(1.04);}
.d-boss-feature-shade{position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,7,12,0.92) 100%);}
.d-boss-feature-info{position:absolute; left:14px; right:14px; bottom:14px;}
.d-boss-feature-info .name{font-family:'Black Han Sans', sans-serif; font-size:18px;}
.d-boss-feature-info .sub{font-size:11.5px; color:var(--text-muted); margin-top:3px;}

.d-up-list{display:flex; flex-direction:column; gap:10px;}
.d-up-row{display:flex; align-items:center; gap:16px; background:var(--surface); border-radius:14px; padding:12px 18px; cursor:pointer;}
.d-up-row:hover{background:var(--surface-hover);}
.d-boss-thumb.round{width:60px; height:60px; border-radius:12px; object-fit:contain; object-position:center 18%; flex:none;
  background:var(--surface-2); padding:5px;}
.d-up-info{flex:1; min-width:0;}
.d-up-info .name{font-size:15px; font-weight:700;}
.d-up-info .eta{font-size:12px; color:var(--text-faint); margin-top:2px;}
.d-remaining{font-family:'Black Han Sans', sans-serif; font-size:20px; color:var(--gold-bright);}
.d-boss-thumb.placeholder{display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--gold-bright); font-weight:900; border-radius:12px;}

.d-leaderboard{background:var(--surface); border-radius:14px; padding:2px 20px;}
.d-lb-row{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--hairline-soft); font-size:14.5px;}
.d-lb-row:first-child{border-top:none;}
.d-lb-row .rank{width:20px; font-family:'Black Han Sans', sans-serif; font-size:15px; color:var(--text-faint); text-align:center;}
.d-lb-row .name{flex:1; font-weight:700;}
.d-lb-row .power{font-family:'Black Han Sans', sans-serif; font-size:17px; color:var(--gold-bright);}
.d-job-icon{border-radius:8px; object-fit:cover; flex:none; background:var(--surface-2);}
.d-job-icon.sm{width:28px; height:28px;}
.d-job-icon.lg{width:52px; height:52px;}
.d-job-icon.xs{width:20px; height:20px; border-radius:5px;}
.d-job-icon:not(.sm):not(.lg):not(.xs){width:32px; height:32px;}
.d-job-tag{font-size:10px; color:var(--text-faint); background:var(--surface-2); padding:2px 8px; border-radius:6px; flex:none;}

.d-drop-list{display:flex; flex-direction:column; gap:8px;}
.d-drop-list.wide{max-width:820px;}
.d-drop-list.nested{margin-top:10px;}
.d-drop-entry{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:12px; padding:12px 16px;}
.d-drop-entry.compact{padding:10px 14px;}
.d-drop-thumb{width:44px; height:44px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;}
.d-drop-thumb svg{width:22px; height:22px;}
.d-drop-thumb.plain{background:var(--surface-2);}
.d-drop-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.d-drop-title{display:flex; align-items:center; gap:8px;}
.d-drop-title .item{font-size:14.5px; font-weight:700;}
.d-drop-sub{font-size:11.5px; color:var(--text-faint);}
.d-drop-meta{font-size:11.5px; color:var(--text-faint);}
.d-drop-meta b{color:var(--text-muted); font-weight:600;}
.d-grade{font-size:10px; font-weight:700; color:var(--text-faint); background:var(--surface-2); padding:2px 8px; border-radius:6px;}

.d-filter-row{display:flex; align-items:center; gap:8px; margin:22px 0 16px;}
.d-filter-row.compact{margin:0 0 16px;}
.d-chip{background:var(--surface); border:1px solid transparent; color:var(--text-faint); border-radius:20px; padding:9px 18px; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer;}
.d-chip.active{color:var(--bg); background:var(--gold-bright);}
.d-filter-row input[type="search"]{margin-left:auto; width:260px; background:var(--surface); border:1px solid var(--hairline-soft); color:var(--text); border-radius:10px; padding:10px 14px; font-size:13.5px; font-family:inherit;}

/* 보스: master-detail */
.d-boss-layout{display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start;}
.d-boss-sidebar{position:sticky; top:96px;}
.d-boss-list{display:flex; flex-direction:column; gap:6px; max-height:calc(100vh - 260px); overflow-y:auto;}
.d-boss-list-item{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; cursor:pointer;}
.d-boss-list-item:hover{background:var(--surface);}
.d-boss-list-item.active{background:var(--surface-hover); box-shadow:inset 2px 0 0 var(--gold-bright);}
.d-boss-thumb.list{width:44px; height:44px; border-radius:9px; object-fit:contain; object-position:center 15%; flex:none;
  background:var(--surface-2); padding:3px;}
.d-boss-list-info{flex:1; min-width:0;}
.d-boss-list-info .name{font-size:14px; font-weight:700;}
.d-boss-list-info .sub{font-size:10.5px; color:var(--text-faint); margin-top:1px;}

.d-boss-detail{min-width:0;}
/* 상세 히어로: 이미지와 텍스트를 겹치지 않게 좌우로 분리한다(겹치는 오버레이 방식은
   contain 이미지와 궁합이 안 맞아 여백/레터박스가 텍스트와 부딪힐 수 있음). */
.d-boss-detail-hero{display:flex; align-items:center; gap:32px; margin-bottom:28px;}
.d-boss-detail-frame{width:280px; height:320px; flex:none; border-radius:18px; overflow:hidden; position:relative;
  background:radial-gradient(100% 100% at 50% 10%, rgba(201,162,39,0.14), transparent 60%), var(--surface);
  border:1px solid var(--hairline-soft);}
.d-boss-thumb.detail{position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; object-position:center 10%;}
.d-boss-detail-info .cat{font-size:12.5px; color:var(--gold-bright); font-weight:700; text-transform:uppercase; letter-spacing:0.5px;}
.d-boss-detail-info .name{font-family:'Black Han Sans', sans-serif; font-size:44px; margin-top:8px;}
.d-boss-detail-info .row{margin-top:16px; display:flex; align-items:center; gap:14px;}
.d-boss-detail-info .next{font-size:13.5px; color:var(--text-muted);}

.d-session-list{display:flex; flex-direction:column; gap:10px;}
.d-session-row{background:var(--surface); border-radius:14px; padding:16px 20px;}
.d-session-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.d-session-top .time{font-weight:700; font-size:14.5px;}
.d-session-top .meta{font-size:12px; color:var(--text-faint);}
.d-session-top .meta b{color:var(--gold-bright);}
.d-session-expand{display:flex; gap:28px; margin-top:10px; flex-wrap:wrap;}
.d-expand{flex:1; min-width:240px;}
.d-expand summary{font-size:11.5px; color:var(--text-faint); cursor:pointer; list-style:none; font-weight:600;}
.d-expand summary::-webkit-details-marker{display:none;}
.d-expand summary::before{content:"▸ "; color:var(--gold-bright);}
.d-expand[open] summary::before{content:"▾ ";}
.d-participant-grid{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; font-size:12px; color:var(--text-muted);}
.d-participant-grid span{display:flex; align-items:center; gap:6px;}

.d-toolbar{display:flex; gap:10px; margin:6px 0 4px;}
.d-toolbar input, .d-toolbar select{background:var(--surface); border:1px solid var(--hairline-soft); color:var(--text); border-radius:10px; padding:10px 14px; font-size:13.5px; font-family:inherit;}
.d-toolbar input{flex:1; max-width:320px;}

.d-leaderboard-feature{display:flex; flex-direction:column; gap:16px;}
.d-podium{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; align-items:end;}
.d-podium-card{background:var(--surface); border-radius:18px; padding:22px 16px; text-align:center;}
.d-podium-card .rank{display:block; font-family:'Black Han Sans', sans-serif; font-size:16px; color:var(--text-faint); margin-bottom:12px;}
.d-podium-card .d-job-icon{margin:0 auto 12px;}
.d-podium-card .name{font-weight:700; font-size:15px;}
.d-podium-card .power{margin-top:8px; font-family:'Black Han Sans', sans-serif; font-size:20px; color:var(--gold-bright);}
.d-podium-card.rank-1{background:linear-gradient(160deg, rgba(240,200,90,0.20), var(--surface) 65%); border:1px solid rgba(240,200,90,0.4); padding:32px 20px;}
.d-podium-card.rank-1 .rank{color:#ffd66b; font-size:20px;}
.d-podium-card.rank-1 .power{font-size:26px;}
.d-podium-card.rank-2 .rank{color:var(--silver);}
.d-podium-card.rank-3 .rank{color:var(--bronze);}
.d-podium-rest{background:var(--surface); border-radius:14px; padding:2px 20px;}

.d-rank-table{display:flex; flex-direction:column; margin-top:10px;}
.d-rank-head, .d-rank-row{display:grid; grid-template-columns:44px 40px 1.4fr 120px 160px 120px; align-items:center; gap:12px; padding:12px 14px;}
.d-rank-head{font-size:11.5px; color:var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:0.3px;}
.d-rank-row{border-top:1px solid var(--hairline-soft); border-radius:10px;}
.d-rank-row:hover{background:var(--surface);}
.d-rank-row.top{background:linear-gradient(90deg, rgba(201,162,39,0.07), transparent);}
.d-rank-row .rank-num{font-family:'Black Han Sans', sans-serif; font-size:15px; color:var(--text-faint); text-align:center;}
.d-rank-row.rank-1 .rank-num{color:#ffd66b;}
.d-rank-row.rank-2 .rank-num{color:var(--silver);}
.d-rank-row.rank-3 .rank-num{color:var(--bronze);}
.d-rank-row .name{font-weight:700; font-size:14.5px;}
.d-rank-row .job{font-size:12.5px; color:var(--text-faint);}
.d-rank-row .power{font-family:'Black Han Sans', sans-serif; font-size:16px; color:var(--gold-bright);}
.d-rank-row .score{font-size:13px; color:var(--text-muted);}

.d-pending-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-faint); padding:0 0 18px;}
.d-pending-note span{color:var(--text-muted); font-weight:700;}
.d-settlement-summary{background:var(--surface); border-radius:14px; padding:4px 20px; max-width:600px;}
.d-settlement-summary .row{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--hairline-soft); font-size:13.5px;}
.d-settlement-summary .row:first-child{border-top:none;}
.d-settlement-summary .period{color:var(--text-muted); flex:1;}
.d-settlement-summary .amount{font-family:'Black Han Sans', sans-serif; font-size:18px; color:var(--gold-bright);}
.d-settlement-hero{background:linear-gradient(140deg, rgba(201,162,39,0.16), var(--surface) 60%); border:1px solid rgba(201,162,39,0.3); border-radius:22px; padding:44px 48px; max-width:520px;}
.d-settlement-hero .period{font-size:15px; color:var(--text-muted);}
.d-settlement-amount{margin-top:12px; font-family:'Black Han Sans', sans-serif; font-size:56px; color:var(--gold-bright); line-height:1;}
.d-settlement-amount .unit{font-size:16px; color:var(--text-muted); font-family:'Noto Sans KR', sans-serif; font-weight:400; margin-left:8px;}
.d-week-status{margin-top:12px; font-size:13px; color:var(--text-faint); display:inline-block;}
.d-week-status.done{color:var(--green-bright);}
.d-settlement-pending{margin-top:10px; font-size:20px; font-weight:700; color:var(--text-faint);}
.d-week-history{max-width:520px; display:flex; flex-direction:column;}
.d-week-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-top:1px solid var(--hairline-soft); font-size:13.5px;}
.d-week-row:first-child{border-top:none;}
.d-week-row .period{color:var(--text-muted); flex:1;}
.d-week-row .amount{font-weight:700;}
.d-week-row .d-week-pending{color:var(--text-faint); font-size:12.5px;}

@media (max-width: 1240px){
  .d-boss-layout{grid-template-columns:280px 1fr;}
  .d-podium{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width: 1080px){
  .d-home-row{grid-template-columns:1fr;}
  .d-feature-row{grid-template-columns:repeat(2, 1fr);}
  .d-rank-head, .d-rank-row{grid-template-columns:36px 32px 1.2fr 90px 120px 90px;}
}