/* raidpick — dark theme for WoW players */

/* ═══ Scrollbar ═══ */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
    scrollbar-gutter: stable;
}
html::-webkit-scrollbar {
    width: 6px;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
html::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

.dispel-graph-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}
.dispel-graph-scroll::-webkit-scrollbar {
    height: 6px;
}
.dispel-graph-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.dispel-graph-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.dispel-graph-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

:root {
    /* ═══ Base ═══ */
    --bg: #0a0e13;
    --bg-surface: #0f1419;
    --bg-card: #151b23;
    --bg-elevated: #1c2330;
    --bg-hover: #222b3a;

    /* ═══ Border ═══ */
    --border: #2a3445;
    --border-subtle: #1e2633;
    --border-hover: #3d4d63;

    /* ═══ Text ═══ */
    --text: #e6edf3;
    --text-muted: #9eaab8;
    --text-dim: #5d6d7e;
    --text-disabled: #3d4856;

    /* ═══ Accent ═══ */
    --accent: #388bfd;
    --accent-hover: #58a6ff;
    --accent-muted: rgba(56,139,253,0.15);

    /* ═══ Semantic ═══ */
    --green: #2ea043;
    --red: #da3633;
    --yellow: #d29922;
    --info: #388bfd;

    /* ═══ Parse colors (WCL 퍼포먼스 등급) ═══ */
    --parse-gray:   #666666;
    --parse-green:  #1eff00;
    --parse-blue:   #0070ff;
    --parse-purple: #a335ee;
    --parse-orange: #ff8000;
    --parse-pink:   #e268a8;
    --parse-gold:   #e5cc80;

    /* ═══ HP 구간 색상 ═══ */
    --hp-critical: #da3633;
    --hp-low: #d29922;
    --hp-mid: #388bfd;
    --hp-high: #5d6d7e;
    --hp-full: #2a3445;

    /* ═══ 폰트 — weight ═══
       의미 분류: regular=본문, medium=라벨/표 헤더, semibold=강조/제목, bold=H1·로고만 */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ═══ 폰트 — size ═══
       표준 6단계 + 메트릭/디스플레이 단일 용도 */
    --text-2xs:     11px;  /* eyebrow, tag pill, 작은 메타 */
    --text-xs:      12px;  /* 표 헤더, 라벨, footnote */
    --text-sm:      13px;  /* mono 시간, 캡션 본문 */
    --text-md:      14px;  /* 본문 표준 (ui-guide.md §3) */
    --text-lg:      16px;  /* 섹션 제목, 카드 제목 */
    --text-xl:      20px;  /* 페이지 H1, 로고 */
    --text-metric:  22px;  /* 메트릭 큰 숫자 (단일 용도) */
    --text-display: 38px;  /* 히어로 1회용 — 다른 곳 금지 */

    /* ═══ Verdict 색 — 평가 결과 라벨 한정 ═══
       시맨틱(--green/red/yellow)은 kill·wipe 등 *상태*용. verdict는 기준 통과 여부. */
    --verdict-good: #3fb950;  /* 통과 */
    --verdict-warn: #d29922;  /* 주의 */
    --verdict-bad:  #f85149;  /* 실패 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ── 불꽃 파티클 (Canvas) ── */
#ember-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.container:has(.hero)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 800px;
    height: 460px;
    background: radial-gradient(ellipse at 50% 0%, rgba(56,139,253,0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

main { flex: 1; }

/* Site Header — 사이트 상단 로고/검색 영역 전용. 컴포넌트의 <header>에 영향 안 가도록 클래스 한정. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}
.logo {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--accent);
    text-decoration: none;
    min-height: 36px;
}
.logo:hover { color: var(--accent-hover); }
.tagline {
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* Hero */
.hero {
    position: relative;
    text-align: center;
    padding: 72px 0 56px;
    z-index: 1;
}
.hero-inner {
    position: relative;
}
.hero-eyebrow {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-muted);
    border: 1px solid rgba(56,139,253,0.25);
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 20px;
}
.hero h1 {
    font-size: var(--text-display);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.hero h1 em {
    font-style: normal;
    color: var(--accent);
}
.subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════
   HERO REFERENCE — 실제 분석 화면을 수수하게 박아놓은 레퍼런스.
   3D 기울기 없음. 장식 최소. 실제 앱 클래스와 톤 맞춤.
   ════════════════════════════════════════════════════════════════════ */

.hero-reference {
    max-width: 720px;
    margin: 60px auto 120px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    pointer-events: none;  /* 장식 */
}

.hero-reference-frame {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    max-height: 640px;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.75),
        0 20px 50px -20px rgba(56, 139, 253, 0.25);
    /* 하단 slip-peek — 5번째 행(샬른)이 페이드 구간에서 은은히 보이도록 */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    /* 미세 float만 — 정면 뷰에서 정수 픽셀 이동이라 선 떨림 없음 */
    animation: heroRefFloat 6s ease-in-out infinite;
}

@keyframes heroRefFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* mechanic-* 클래스는 실제 앱 것 재사용 → 별도 래퍼만 추가. */
.ref-mech-panel {
    padding: 20px 20px 32px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ref-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.ref-breadcrumb svg { color: var(--text-dim); flex: 0 0 auto; }
.ref-bc-boss { color: var(--text); font-weight: var(--fw-medium); }
.ref-bc-sep { color: var(--text-dim); }
.ref-bc-pull { color: var(--text-muted); }
.ref-bc-dur {
    margin-left: 4px;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.ref-bc-kill {
    padding: 2px 7px;
    background: rgba(46, 160, 67, 0.15);
    color: var(--verdict-good);
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: 3px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
}

/* 분석 탭 6개 (실제 analysis-cards 압축 버전) */
.ref-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.ref-tab {
    padding: 10px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.ref-tab svg {
    width: 18px;
    height: 18px;
    color: var(--text-dim);
}
.ref-tab-t {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}
.ref-tab-d {
    font-size: var(--text-2xs);
    color: var(--text-dim);
    line-height: 1.2;
}
.ref-tab--active {
    background: var(--accent-muted);
    border-color: var(--accent);
}
.ref-tab--active svg { color: var(--accent); }
.ref-tab--active .ref-tab-t { color: var(--text); }
.ref-tab--active .ref-tab-d { color: var(--text-muted); }

/* 패널 (탱킹 탭 내용) */
.ref-panel {
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg);
}

.ref-section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.ref-section-title {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ref-section-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 3px;
}

.ref-chev {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.ref-chev--closed {
    transform: rotate(-90deg);
}

/* 펼쳐진 섹션 본문 */
.ref-section-body {
    margin-top: 12px;
    padding: 0 17px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.ref-section-body::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--border);
    margin: 0 -17px 12px -17px;
}

/* 메트릭 카드 */
.ref-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ref-metric {
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    border-left-width: 3px;
}
.ref-metric--red   { border-left-color: var(--verdict-bad); }
.ref-metric--green { border-left-color: var(--verdict-good); }

.ref-metric-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ref-metric-value {
    font-size: var(--text-metric);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin-bottom: 3px;
}
.ref-metric-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 차트 */
.ref-chart {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    height: 130px;
}
.ref-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 반응형 */
@media (max-width: 760px) {
    .ref-tabs { grid-template-columns: repeat(3, 1fr); }
    .hero-reference { margin: 24px auto 64px; }
}
@media (max-width: 520px) {
    .ref-tabs { grid-template-columns: repeat(2, 1fr); }
    .ref-tab-d { display: none; }
    .ref-metric-grid { grid-template-columns: 1fr; }
    .ref-breadcrumb { font-size: var(--text-xs); }
    .ref-bc-pull, .ref-bc-sep, .ref-bc-dur { display: none; }
}

/* Feature pills */
.feature-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 700px;
    margin: 24px auto 0;
}
.feature-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.feature-pill:hover {
    border-color: var(--border-hover);
    color: var(--text);
}
.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Form */
.analyze-form {
    display: flex;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto;
    position: relative;   /* .form-validation 말풍선 위치 기준 */
}
.url-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--text-md);
    outline: none;
    transition: border-color 0.15s;
}
.url-input:focus {
    border-color: var(--accent);
}
.url-input::placeholder {
    color: var(--text-dim);
}
/* 비었을 때 입력창 경계 — 경고색 강조 (네이티브 검증 대체) */
.url-input.input-invalid {
    border-color: var(--yellow);
}

/* RaidPick 스타일 검증 말풍선 — 네이티브 required 팝업 대체.
   display:none 토글 대신 opacity/transform 트랜지션으로 등장(ui-guide §1). */
.form-validation {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--text);
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.form-validation.show {
    opacity: 1;
    transform: translateY(0);
}
/* 말풍선 꼬리 — 입력창을 가리키는 위쪽 삼각형 */
.form-validation::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 18px;
    border: 6px solid transparent;
    border-bottom-color: var(--bg-elevated);
}
.btn-primary {
    position: relative;
    overflow: hidden;
    padding: 12px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        width         0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background    0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }

/* 분석 폼 버튼: 명시적 너비로 수축 트랜지션 기준점 확보 */
.analyze-form .btn-primary {
    width: 108px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 버튼 내부 레이어 */
.btn-label {
    transition: opacity 0.18s ease, transform 0.2s ease;
}
.btn-spin {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease 0.18s, transform 0.2s ease 0.18s;
}

/* 로딩: 폼에 htmx-request가 붙으면 버튼이 원형으로 수축 */
.analyze-form.htmx-request .btn-primary {
    width: 44px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 3px var(--accent-muted), 0 0 14px rgba(56,139,253,0.35);
}
.analyze-form.htmx-request .btn-label {
    opacity: 0;
    transform: scale(0.75);
    transition-delay: 0s;
}
.analyze-form.htmx-request .btn-spin {
    opacity: 1;
    transform: scale(1);
}

/* 버튼 인라인 arc 스피너 */
.spin-arc-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.9) 70%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 3px));
    animation: spin 0.8s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
}

/* 구형 스피너 (헤더용 유지) */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tab-loading {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
}

/* ── 스켈레톤 로딩 ── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton-panel { padding: 8px 0 16px; }
.skel {
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        var(--border-subtle) 50%,
        var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.skel-heading { height: 16px; width: 36%; margin-bottom: 18px; }
.skel-table   { display: flex; flex-direction: column; gap: 10px; }
.skel-row {
    display: grid;
    grid-template-columns: 28px 1fr 72px 72px 120px;
    gap: 12px;
    align-items: center;
    height: 32px;
}
.skel-rank { height: 18px; }
.skel-name { height: 18px; }
.skel-num  { height: 18px; }
.skel-bar  { height: 18px; border-radius: 6px; }

/* 스켈레톤 보조 컴포넌트 */
.skel-name-cell { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.skel-icon      { width: 20px; height: 20px; flex-shrink: 0; border-radius: 3px; }

.skel-pills { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.skel-pill  { height: 28px; border-radius: 4px; flex-shrink: 0; }

.skel-graph { height: 72px; border-radius: 6px; }

/* 메카닉 카드 껍데기 */
.skel-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; }
.skel-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.skel-card-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px; }

/* 준비성 테이블 행 — name(1fr) + 13 체크(22px) + 점수(34px) */
.skel-row-rdy {
    display: grid;
    grid-template-columns: 1fr repeat(13, 22px) 34px;
    gap: 8px;
    align-items: center;
    height: 36px;
}
.skel-check { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; }

/* 물약 테이블 행 — rank | name | count | badge */
.skel-row-potions {
    display: grid;
    grid-template-columns: 28px 1fr 44px 180px;
    gap: 12px;
    align-items: center;
    height: 32px;
}
.skel-badge { height: 26px; border-radius: 13px; }

/* 탱킹 판정 행 — time | target | event | verdict | reason */
.skel-row-verdict {
    display: grid;
    grid-template-columns: 48px 130px 1fr 72px 1fr;
    gap: 12px;
    align-items: center;
    height: 30px;
    margin-bottom: 8px;
}
.skel-verdict-badge { height: 22px; width: 52px; border-radius: 10px; flex-shrink: 0; }

/* 탱킹 섹션 헤더 껍데기 */
.skel-tk-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.skel-tk-section-content { flex: 1; }
.skel-tk-body { padding: 0 17px; margin-top: 14px; margin-bottom: 8px; }
.skel-panel-block { margin-bottom: 22px; }

/* Boss group list */
.boss-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}
/* Boss section — 박스 */
.boss-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

/* Boss header — 1줄 + 접기 */
.boss-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.boss-header::after {
    content: '';
    position: absolute;
    right: -60px;
    top: var(--boss-bg-y, -160px);
    width: 55%;
    height: 600px;
    background: var(--boss-bg) center top/contain no-repeat;
    opacity: 0.6;
    mask-image: linear-gradient(to right, transparent, black 30%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 30%);
    pointer-events: none;
}
.boss-header:hover {
    background: var(--bg-hover);
}
.boss-name {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
}
.boss-diff {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
}
.diff-1 { color: var(--parse-green); }   /* LFR */
.diff-3 { color: var(--parse-blue); }    /* Normal */
.diff-4 { color: var(--parse-purple); }  /* Heroic */
.diff-5 { color: var(--parse-orange); }  /* Mythic */
.boss-summary {
    color: var(--text-dim);
    font-size: var(--text-sm);
}
.boss-kill {
    color: var(--green);
    font-weight: var(--fw-semibold);
}
.meta-sep {
    color: var(--text-dim);
    margin: 0 2px;
}
.boss-chevron {
    margin-left: auto;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}
.boss-header:hover .boss-chevron {
    color: var(--text);
}
.boss-section.collapsed .boss-chevron {
    transform: rotate(-90deg);
}
.boss-section.collapsed .boss-body-wrap {
    grid-template-rows: 0fr;
}
.boss-section.collapsed .boss-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* Boss body */
.boss-body-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
.boss-body {
    overflow: hidden;
    padding: 12px 16px 16px;
    transition: padding 0.3s ease;
}

/* 킬 + 전체통합 행 — 풀 그리드와 동일한 7열 */
.meta-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 10px;
}
.meta-row .pull-cell {
    padding-bottom: 10px;
}

/* 킬 셀 */
.pull-cell--kill {
    border-color: var(--green);
}
.kill-label {
    color: var(--green);
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
}

/* 전체 통합 셀 */
.pull-cell--aggregate {
    border-color: var(--border);
}
.aggregate-label {
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
}

/* Wipe pull grid — 7열 셀 */
.pull-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.pull-cell {
    border: 1px solid var(--border);
    padding: 8px 10px 0;
    position: relative;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    text-align: left;
    color: inherit;
    transition: background 0.15s;
}
.pull-cell:hover {
    background: var(--bg-hover);
}
.pull-cell.active {
    background: var(--accent-muted);
    border-color: var(--accent);
}

/* 1줄: % + 풀번호 + 전투시간 */
.pull-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.parse-pct {
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}
.pull-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
/* 2줄: 시각 */
.pull-time {
    font-size: var(--text-2xs);
    color: var(--text-dim);
    margin-top: 2px;
}

/* 프로그레스 바 */
.pull-bar {
    margin: 4px -10px 0;
    height: 3px;
    background: var(--bg-elevated);
}
.pull-bar-fill {
    height: 100%;
}

/* Analysis cards */
.analysis-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.analysis-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.analysis-card:hover {
    border-color: var(--text-dim);
    color: var(--text);
    background: var(--bg-elevated);
}
.analysis-card.active {
    border-color: var(--accent);
    background: rgba(88, 166, 255, 0.08);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--accent);
}
.card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.analysis-card.active .card-icon {
    color: var(--accent);
}
.card-title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    line-height: 1;
}
.analysis-card.active .card-title {
    color: var(--accent);
}
.card-desc {
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: 1.2;
}
.analysis-card.active .card-desc {
    color: var(--text-muted);
}

/* Result section */
.result-section {
    margin-top: 24px;
}
/* 직접 자식만 — 컴포넌트 내부 h2가 22px로 묻히지 않도록 한정. */
.result-section > h2 {
    font-size: var(--text-metric);
    margin-bottom: 16px;
}

/* Healer table */
.healer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}
.healer-table thead tr {
    border-bottom: 2px solid var(--border);
}
.healer-table tbody tr {
    border-bottom: 1px solid var(--border);
}
.healer-table th {
    text-align: left;
    padding: 10px 10px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.healer-table td {
    padding: 10px 10px;
    vertical-align: middle;
}
.healer-table tbody tr:hover {
    background: var(--bg-elevated);
}
.col-rank { width: 60px; }
.col-delta { width: 50px; }
.col-name { min-width: 160px; display: flex; align-items: center; }
.col-number { width: 110px; font-variant-numeric: tabular-nums; }
.col-center { width: 70px; }
.col-bar { width: 200px; }

/* col-* 정렬 — th·td 공통 적용.
   `table th.col-*` 형태(특이도 0,1,2)로 `.<table> th`(0,1,1)을 이겨 헤더-데이터 축 일치 강제.
   특정 테이블이 다른 정렬을 원하면 `.<table> th.col-*` (0,2,1)로 override 가능. */
table th.col-rank,  table td.col-rank  { text-align: center; }
table th.col-delta, table td.col-delta { text-align: center; }
table th.col-number, table td.col-number { text-align: right; }
table th.col-center, table td.col-center { text-align: center; }

.healer-name {
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
}
.healer-class {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: 6px;
}

.delta-up {
    color: var(--green);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
}
.delta-down {
    color: var(--red);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
}
.delta-same {
    color: var(--text-dim);
    font-size: var(--text-sm);
}

/* HP bar */
.hp-bar {
    display: flex;
    height: 20px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg);
}
.hp-seg { height: 100%; min-width: 0; transition: width 0.3s; }
.hp-seg.critical { background: var(--hp-critical); }
.hp-seg.low { background: var(--hp-low); }
.hp-seg.mid { background: var(--hp-mid); }
.hp-seg.high { background: var(--hp-high); }
.hp-seg.full { background: var(--hp-full); }
.stacked-segment.critical { background: var(--hp-critical); }
.stacked-segment.low { background: var(--hp-low); }
.stacked-segment.mid { background: var(--hp-mid); }
.stacked-segment.absorb { background: #b8b8b8; opacity: 0.5; }
.legend-dot.absorb { background: #b8b8b8; opacity: 0.5; }

.bar-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.legend-dot.critical { background: var(--hp-critical); }
.legend-dot.low { background: var(--hp-low); }
.legend-dot.mid { background: var(--hp-mid); }
.legend-dot.high { background: var(--hp-high); }
.legend-dot.full { background: var(--hp-full); }

/* Healer effective bar — 절대값 차등 */
.healer-bar-wrap {
    width: 100%;
    min-width: 200px;
}
.healer-bar {
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg);
    transition: width 0.3s;
}
.healer-bar-fill {
    width: 100%;
    height: 100%;
    background: var(--accent);
    opacity: 0.7;
    border-radius: 3px;
}

/* Share */
.share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.share-url {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-family: monospace;
    outline: none;
}
.btn-share {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.btn-share:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Mechanics */
.mechanics-section {
    margin-bottom: 24px;
}
.section-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-count {
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}
/* 단일 섹션 탭에서 타이틀 없이 인라인 요약만 노출할 때 */
.section-summary {
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    margin-bottom: 12px;
}
.mechanics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}
.mechanics-table thead tr {
    border-bottom: 2px solid var(--border);
}
.mechanics-table tbody tr {
    border-bottom: 1px solid var(--border);
}
.mechanics-table th {
    text-align: left;
    padding: 10px 10px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.mechanics-table th.col-number,
.mechanics-table td.col-number {
    text-align: center;
}
/* .mechanics-table 기본은 "작은 카운트 중앙 정렬"이지만, 힐량·피해량 같은
   큰 숫자(k/M 단위)를 담는 테이블은 자릿수 비교를 위해 우측 정렬이 필요하다.
   `<table class="mechanics-table table-big-numbers">` 꼴로 opt-in. */
.mechanics-table.table-big-numbers th.col-number,
.mechanics-table.table-big-numbers td.col-number {
    text-align: right;
}
.mechanics-table td {
    padding: 10px 10px;
    vertical-align: middle;
}
.mechanics-table tbody tr:hover {
    background: var(--bg-elevated);
}

/* 표 본문 폰트 굵기 통일 — medium(500). 헤더(이미 500)와 동일 weight,
   위계는 size(13/14)로만 두는 컨벤션. UI 가이드 §14.3 본문 regular 기존 정의는
   현실에 안 맞아 medium으로 박제. 적용 대상: 분석 탭의 모든 데이터 표. */
.mechanics-table tbody td,
.panel-verdict-table tbody td,
.panel-ranking-table tbody td,
.readiness-table tbody td {
    font-weight: var(--fw-medium);
}

/* 메커니즘 스킬 카드 */
.mechanic-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.mechanic-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 18px 22px;
    flex: 1;
    min-width: 320px;
    margin-bottom: 0;
}
/* 기믹 섹션 — 보스 섹션과 동일한 접기/펴기 패턴 */
.mechanic-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
/* 기믹 섹션 — 접기/펴기 */
.mechanic-card {
    padding: 16px;
    cursor: pointer;
    user-select: none;
}
.mechanic-card:hover {
    background: var(--bg-hover);
}
.mechanic-chevron {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.mechanic-section.mechanic-collapsed .mechanic-chevron {
    transform: rotate(-90deg);
}
.mechanic-card:hover .mechanic-chevron {
    color: var(--text);
}
.mechanic-detail-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
.mechanic-section.mechanic-collapsed .mechanic-detail-wrap {
    grid-template-rows: 0fr;
}
.mechanic-detail {
    overflow: hidden;
    padding: 0 16px 16px;
    transition: padding 0.3s ease;
}
.mechanic-section.mechanic-collapsed .mechanic-detail {
    padding-top: 0;
    padding-bottom: 0;
}
.spec-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}
.player-identity {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.mechanic-data-area {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 20px 24px;
    margin-top: 12px;
}
.mechanic-subtitle {
    margin-top: 0;
    margin-bottom: 12px;
}
.mechanic-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.mechanic-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}
.mechanic-spell-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}
.mechanic-spell-name {
    font-weight: var(--fw-bold);
    color: var(--text);
    font-size: var(--text-lg);
    line-height: 1.3;
}
.mechanic-spell-name-en {
    color: var(--text-dim);
    font-size: var(--text-sm);
    line-height: 1.3;
}
.mechanic-card-desc {
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: 1.6;
    margin: 0 0 18px;
}
.mechanic-card-action {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--yellow);
}
.mechanic-stats {
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    letter-spacing: 0;
}
.mechanic-stat-good {
    color: var(--green);
    font-weight: var(--fw-semibold);
}
.mechanic-stat-bad {
    color: var(--red);
    font-weight: var(--fw-semibold);
}
.sweep-count {
    font-weight: var(--fw-bold);
}
.interrupt-casts {
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.interrupt-zero {
    color: var(--text-dim);
}
/* ─── 정렬 가능 헤더 ─── */
/* ─── 셀 안 칩 리스트 공통 ─── */
/* 테이블 셀 안에 여러 칩/뱃지/아이콘이 들어갈 때 사용.
   flex/inline으로 깔면 매 행마다 칩 폭이 달라 컬럼이 어긋난다 — 반드시 grid 고정 슬롯.
   사용법: <td class="cell-slots" style="--slots: 2">...</td> */
.cell-slots {
    display: grid;
    grid-template-columns: repeat(var(--slots, 2), minmax(0, 1fr));
    gap: 6px 8px;
    align-items: center;
}

/* ═══ Avoidable Damage ═══ */
.avoidable-table td {
    padding: 8px 10px;
}
.avoidable-amount {
    cursor: default;
}
.col-hits {
    text-align: center;
    width: 48px;
}
.avoidable-hits {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* 공용 필터 탭 */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    position: relative;  /* ft-wh-overlay 기준점 */
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, filter 0.15s;
}
.filter-tab:hover {
    border-color: var(--border-hover);
    color: var(--text);
}
.filter-tab.active {
    border-color: var(--tab-color, var(--accent));
    color: var(--tab-color, var(--text));
    background: var(--bg-elevated);
}
/* "전체" 탭은 좌측 padding 줄일 필요 없음 — 아이콘 없는 평탄 탭 */
.filter-tab[data-spell="all"] {
    padding: 4px 12px;
}
/* "모두 OFF" 모드 — 시각 시그널 없음 (옵션 A).
   사용자가 *직접* 만든 상태(전체 두 번 클릭)라 인지 부담 적고, 과도기 상태이므로
   별도 마크 불필요. 향후 아이콘-only 필터 행에서는 .all-off에 눈알 SVG 토글 적용 예정.
   클래스 toggle 자체는 JS가 유지 — 나중에 룰 추가 시 즉시 활성화. */
.filter-tab a { display: inline-flex; align-items: center; }

/* 스킬 색상 탭 — 탱킹 탭과 동일한 패턴.
   비활성/호버 모두 회색(.filter-tab 기본). 활성에서만 색 등장(.filter-tab.active 기본 룰).
   별도 *-colored 클래스 불필요 — --tab-color 인라인만 두면 fallback이 자동 작동. */

/* 좌측 큰 스킬 아이콘 — 버튼 높이에 맞춰 22px (border-radius로 부드럽게).
   별도 border 없이 와우 아이콘 자체 경계로 충분 — 버튼 테두리와 동심 사각형 회피. */
.filter-tab .spell-icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    display: block;
    flex-shrink: 0;
}

.filter-tab-label {
    line-height: 1;
}

/* 와우헤드 hover 오버레이 — 버튼 전체 cover. 클릭은 JS preventDefault 후 button click bubble. */
.filter-tab .ft-wh-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: help;
    border-radius: 4px;
}
.filter-tab .ft-wh-overlay > * { display: none !important; }

/* 막대 세그먼트 와우헤드 hover 오버레이 — 세그먼트 width에 맞춰 inset:0.
   세그먼트 자체에 title 도 있어 native 툴팁(피해량)도 함께 동작.
   클릭은 JS preventDefault로 막아 부모 행의 펼침 동작 유지. */
.stacked-segment .seg-wh-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: help;
}
.stacked-segment .seg-wh-overlay > * { display: none !important; }

/* 변형(variant) 범례 — 쫄딜 카드 상단 색상 가이드 */
.legend-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 10px 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-chip .color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 스택형 막대 바 */
.col-stacked-bar {
    width: 40%;
    min-width: 200px;
}
.stacked-bar {
    height: 20px;
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg);
    transition: width 0.3s ease;
}
.stacked-segment {
    height: 100%;
    transition: width 0.3s ease, filter 0.2s;
    cursor: default;
    position: relative;
}
.stacked-segment:first-child {
    border-radius: 3px 0 0 3px;
}
.stacked-segment:last-child {
    border-radius: 0 3px 3px 0;
}
.stacked-segment:only-child {
    border-radius: 3px;
}
.stacked-segment:hover {
    filter: brightness(1.15);
}

/* ═══ Avoidable Detail Accordion ═══ */
.avoidable-row { cursor: pointer; }
.avoidable-detail-row {
    display: none;
}
.avoidable-detail-row td {
    padding: 0;
    background: var(--bg-surface);
}
.avoidable-detail-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* ═══ Inline Detail (Ghost Accordion) ═══ */
/* 사용처: .spread-detail-wrap (산개). 향후 다른 펼침 영역도 동일 패턴 권장.
   원칙: 카드 박스(border + radius)로 감싸지 않는다. shadcn/ui Accordion · Ant Design Collapse(ghost) 패턴 —
   살짝 어두운 배경 + 좌측 들여쓰기로만 시각 분리. 콘텐츠는 부모 행의 첫 데이터 컬럼 위치(rank 60px)에 정렬. */
.spread-row { cursor: pointer; }
.spread-row-clean { cursor: default; }
.spread-detail-row {
    display: none;
}
.spread-detail-row td {
    padding: 0;
    background: var(--bg);
}
.spread-detail-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.spread-detail-inner {
    /* 펼침 td는 colspan="2" + colspan="3" 구조로 부모 총피격 컬럼 위치부터 시작.
       td 위치 자체가 정렬 역할이라 좌측 들여쓰기 불필요. 콘텐츠는 총피격+뭉침+바 컬럼 폭(~60%)까지 풀폭. */
    padding: 8px 0 12px 0;
}
/* 칩 그리드 변형: flex로 만들면 컬럼 정렬 안 됨 — 반드시 grid (ui-guide §4 변형 B).
   2컬럼 — 시간(고정) / 이웃 칩 리스트(1fr, flex-wrap). 회피 피해 timeline-row와 동일 리듬.
   공포의 숨결·공허의 울음(산개) 두 카드 공용. */
.spread-cast-row {
    /* 시간 컬럼(110px)은 부모 테이블 col-number 폭과 미러링 → 부모 헤더 중앙선에 정렬.
       이웃 칩은 1fr 넓은 컬럼에서 가로로 흐른다 (변형 B 표준: 마지막 1fr = 칩 리스트). */
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    padding: 5px 6px;
    font-size: var(--text-md);
    border-bottom: 1px solid var(--border-subtle);
}
.spread-cast-row:last-child {
    border-bottom: none;
}
.spread-cast-time {
    color: var(--text-muted);
    font-family: monospace;
    font-size: var(--text-sm);
    text-align: center;
}
.spread-cast-neighbors {
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-left: 12px;
}
.neighbor-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.neighbor-spec-icon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}
.neighbor-name {
    font-weight: var(--fw-medium);
}
.neighbor-spec-icon-unknown {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px dashed var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    box-sizing: border-box;
}
.neighbor-name-unknown {
    color: var(--text-muted);
}
.avoidable-timeline {
    padding: 4px 0 8px 0;
}
.timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    font-size: var(--text-md);
    border-bottom: 1px solid var(--border-subtle);
}
.timeline-row:last-child {
    border-bottom: none;
}
.timeline-row .color-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.timeline-time {
    color: var(--text-muted);
    font-family: monospace;
    font-size: var(--text-sm);
    min-width: 56px;
}
.timeline-spell {
    color: var(--text-muted);
    font-size: var(--text-md);
    min-width: 96px;
}
.timeline-damage {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-md);
}
.timeline-empty {
    color: var(--text-dim);
    font-size: var(--text-md);
    padding: 10px;
    text-align: center;
}

/* ═══ Avoidable Timeline Graph ═══ */
.avoidable-graph {
    margin-top: 20px;
}
.graph-track {
    position: relative;
    height: 108px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.graph-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    opacity: 0.6;
    pointer-events: none;
}
.graph-axis {
    position: relative;
    height: 20px;
    margin-top: 4px;
}
.graph-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: var(--text-2xs);
    font-family: monospace;
    color: var(--text-muted);
    pointer-events: none;
}
/* 첫/마지막 라벨은 차트 양 끝에 정렬 (가운데 정렬 시 클리핑 방지). */
.graph-tick:first-child { transform: translateX(0); }
.graph-tick:last-child { transform: translateX(-100%); }
.graph-event-bar {
    position: absolute;
    bottom: 0;
    width: 12px;
    min-height: 6px;
    margin-left: -6px;
    border-radius: 3px 3px 0 0;
    opacity: 0.9;
    transition: opacity 0.2s, height 0.3s ease;
    cursor: default;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.graph-event-bar:hover {
    opacity: 1;
    filter: brightness(1.3);
}
.graph-event-bar.hidden {
    opacity: 0;
    height: 0 !important;
}
.event-count {
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    color: #fff;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
}

/* ═══ Dispel Timeline Graph ═══ */
.dispel-graph {
    margin-top: 20px;
}
.dispel-graph-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.dispel-graph-scroll .graph-track {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    min-width: 100%;
}
.dispel-graph-scroll .graph-axis {
    min-width: 100%;
}

/* ───── 차단 그룹 — 전투 흐름 스트립 (cast tick + success/attempt/fail dots) ─────
   variant들을 한 시간축에 합쳐 시점·분포를 노출. 표는 누적 정량, 스트립은 시간 분포. */
.track-block {
    margin-top: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 10px 14px 8px;
}
.track-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 4px;
}
.track-scroll::-webkit-scrollbar { height: 8px; }
.track-scroll::-webkit-scrollbar-track { background: var(--bg-surface); }
.track-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.track-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
.track-strip {
    position: relative;
    height: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    min-width: 100%;
}
.track-strip::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--border-subtle);
}

/* === 시전바 strip (interrupt_targets · interrupt_groups 공용) ===
   각 보스 시전 = 아이콘 + 가로 바 + outcome marker. 행 stacking으로 동시 시전 노출.
   strip 페이로드는 analysis/mechanics/analyzer.py:_build_group_strip 참조. */
.track-strip.cast-strip {
    height: auto;  /* 인라인 height로 dynamic */
}
.track-strip.cast-strip::before { display: none; }  /* 가운데 보조선 제거 — bar로 대체 */

.cast-bar {
    position: absolute;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: help;
    z-index: 1;
}
.cast-bar:hover { z-index: 5; }

/* 스킬 아이콘 — 바 좌측 정사각 */
.cast-bar-icon {
    width: 20px; height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    z-index: 2;
    transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.cast-bar:hover .cast-bar-icon { transform: scale(1.1); }

/* 바 본체 — 시전 지속시간 가시화. neutral 회색 기본, variant/outcome으로 덮어씀. */
.cast-bar-body {
    flex: 1 1 0;
    height: 12px;
    background: var(--text-dim);
    border-radius: 0 3px 3px 0;
    margin-left: -2px;
    min-width: 4px;
    transition: background 0.12s ease, opacity 0.12s ease;
}

/* 차단 성공 — 바 끝의 녹색 점 (interrupt 시각) */
.cast-bar-end-success {
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--green);
    border: 1.5px solid #4cce5d;
    box-shadow: 0 0 5px rgba(46, 160, 67, 0.6), 0 0 0 2px var(--bg-elevated);
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
}

/* === 변형 색 (interrupt_groups: 빛/공허 분출 등) === */
.cast-bar.variant-light .cast-bar-body { background: #e8b962; }
.cast-bar.variant-void  .cast-bar-body { background: #9b6bcc; }
/* variant-neutral은 기본값 유지 (text-dim 회색) */

/* === outcome === */
/* missed = 보스가 시전 완주 = 차단 실패 — 변형 색을 빨강이 덮음 + 아이콘 빨간 링/글로우 */
.cast-bar.outcome-missed .cast-bar-body {
    background: var(--red);
    opacity: 0.9;
}
.cast-bar.outcome-missed .cast-bar-icon {
    box-shadow: 0 0 0 1.5px var(--red), 0 0 5px rgba(218, 54, 51, 0.55);
}

/* died/canceled — 시전이 끝까지 못 감 (쫄 사망 또는 추정). 아이콘 desaturate + 바 흐릿. */
.cast-bar.outcome-died .cast-bar-icon,
.cast-bar.outcome-canceled .cast-bar-icon {
    filter: grayscale(1) brightness(0.6);
    opacity: 0.65;
}
.cast-bar.outcome-died .cast-bar-body,
.cast-bar.outcome-canceled .cast-bar-body {
    background: var(--text-dim);
    opacity: 0.4;
}

/* === attempt 점 — 차단 빗나간 시도 (별도 행) === */
.evt {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: help;
    z-index: 2;
    transition: transform 0.12s ease;
}
.evt:hover { transform: translate(-50%, -50%) scale(1.5); z-index: 5; }
.evt.attempt {
    background: #6a7281;
    border: 1.5px solid rgba(154, 167, 184, 0.5);
    box-shadow: 0 0 0 2px var(--bg-elevated);
}

/* Readiness table */
.readiness-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}
.readiness-table thead tr {
    border-bottom: 2px solid var(--border);
}
.readiness-table tbody tr {
    border-bottom: 1px solid var(--border);
}
.readiness-table th {
    text-align: center;
    padding: 10px 9px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    white-space: nowrap;
}
.readiness-table td {
    padding: 10px 9px;
    vertical-align: middle;
}
.readiness-table tbody tr:hover {
    background: var(--bg-elevated);
}
.readiness-table .col-name {
    text-align: left;
    min-width: 140px;
}
.col-check {
    width: 42px;
    text-align: center;
}
.col-score {
    width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
    color: var(--text);
}
.check-ok {
    color: var(--green);
    font-weight: var(--fw-bold);
}
.check-fail {
    color: var(--red);
    font-weight: var(--fw-bold);
}
.check-partial {
    color: var(--yellow);
    font-weight: var(--fw-bold);
}
.check-na {
    color: var(--text-dim);
}
.readiness-legend {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── 도움말 툴팁 (?) — 재사용 컴포넌트. 헤더 등에 산정 기준을 호버로 표시 ── */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border: 1px solid var(--text-dim);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: help;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: middle;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.help-tip:hover,
.help-tip:focus-visible {
    color: var(--text);
    border-color: var(--text-muted);
    outline: none;
}
.help-tip__bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: max-content;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.help-tip:hover .help-tip__bubble,
.help-tip:focus-visible .help-tip__bubble {
    opacity: 1;
}
.help-tip__title {
    margin-bottom: 2px;
    color: var(--text);
    font-weight: var(--fw-medium);
}
.help-tip__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.help-tip__row > :last-child {
    color: var(--text);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}

/* Error */
.error-inline {
    padding: 16px 20px;
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: 6px;
    color: var(--red);
    margin-top: 16px;
    text-align: center;
}

/* Empty state */
.empty-state {
    padding: 48px;
    text-align: center;
    color: var(--text-muted);
}

/* How it works */

/* Shared page */
.shared-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 16px;
}
.try-yours {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 40px 32px;
    margin-top: 48px;
    border-top: 1px solid var(--border);
}
.try-yours p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: var(--text-md);
}

.shared-page {
    margin-bottom: -40px;
}

/* Footer */
footer {
    margin-top: 64px;
    padding: 24px 0 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: 1.6;
}
footer p {
    margin: 0;
}
footer .footer-credit {
    color: var(--text-muted);
    margin-bottom: 4px;
}
footer .footer-credit a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.15s ease, border-color 0.15s ease;
}
footer .footer-credit a:hover {
    color: var(--text);
    border-color: var(--border-hover);
}
footer .footer-legal {
    margin-bottom: 4px;
}
footer .footer-copy {
    color: var(--text-dim);
}

/* Responsive */
@media (max-width: 768px) {
    .analyze-form {
        flex-direction: column;
    }
    .analysis-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .analysis-card {
        flex-direction: row;
        padding: 12px 16px;
        text-align: left;
    }
    .card-icon { width: 22px; height: 22px; }
    .pull-grid { grid-template-columns: repeat(3, 1fr); }
    .col-bar { display: none; }
    .col-abilities { display: none; }
    .healer-table { font-size: var(--text-xs); }
    .col-number { width: 80px; }
}

/* ─── 물약 활용 탭 ─── */
.potions-table .potion-zero {
    color: var(--red);
    font-weight: var(--fw-semibold);
}
.potions-table .potion-name-cell {
    color: var(--text-muted);
    font-size: var(--text-sm);
    /* .cell-slots 공통 유틸 적용 (HTML에서 지정) — line-height/margin 직접 지정 금지 */
}
.potions-table .potion-dash {
    color: var(--text-dim);
}
.potion-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    /* margin-right 제거 — 그리드 gap이 간격 담당 */
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    font-size: var(--text-sm);
    color: var(--text);
    vertical-align: middle;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-width: 0;                  /* 그리드 슬롯 overflow 방지 */
    justify-self: start;           /* 슬롯 좌측 정렬 */
}
.potion-badge:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}
.potion-badge .potion-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.potion-badge .potion-time {
    color: var(--text);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid var(--border-subtle);
}
.potions-lust-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(88, 166, 255, 0.18);
    border-left: 1px solid rgba(88, 166, 255, 0.45);
    border-right: 1px solid rgba(88, 166, 255, 0.45);
    pointer-events: none;
}

/* ─── 물약 그래프 스코프 (다른 탭 공용 .graph-* 오버라이드) ─── */
.potions-section .graph-tick {
    color: var(--text);
}

/* ─── 공유 피해 덩어리 (사형선고 같이맞기) ─── */
.shared-cast-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shared-cast-block {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 14px 18px;
    transition: border-color 0.15s ease;
}
.shared-cast-block:hover {
    border-color: var(--border);
}
/* 헤더를 바처럼 — 클릭 전체 영역에 걸쳐 토글.
   border-bottom을 transparent로 항상 깔아두고 색만 토글 → width 변화 없이 깔끔한 페이드.
   padding/margin 트랜지션은 아래 규칙이 붙을 때 자연스럽게 작동. */
.shared-cast-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: padding-bottom 0.3s ease, margin-bottom 0.3s ease, border-bottom-color 0.3s ease;
}
/* 펼친 상태: 헤더 하단 hairline + 바디와의 간격을 헤더의 padding/margin으로 표현.
   바디 내부에 간격을 두면 grid-template-rows:0fr 접힘이 완전히 0이 되지 않아
   접힌 바가 위로 치우쳐 보이는 문제 발생 → 간격은 전부 헤더 쪽에 둔다. */
.shared-cast-block:not(.shared-cast-collapsed) .shared-cast-head {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom-color: var(--border-subtle);
}
.shared-cast-head:hover .shared-cast-chevron {
    color: var(--text);
}
.shared-cast-chevron {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.15s ease;
}
.shared-cast-block.shared-cast-collapsed .shared-cast-chevron {
    transform: rotate(-90deg);
}
/* 상세 영역 — grid-template-rows 트릭으로 가변 높이 아코디언 */
.shared-cast-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
.shared-cast-block.shared-cast-collapsed .shared-cast-body {
    grid-template-rows: 0fr;
}
.shared-cast-body-inner {
    overflow: hidden;
    min-height: 0;
}
/* 캐스트 헤더 성공/실패 점 — 시맨틱 컬러: 초록=성공, 빨강=실패. */
.shared-cast-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}
.shared-cast-dot-good {
    background: var(--green);
}
.shared-cast-dot-bad {
    background: var(--red);
}
.shared-cast-dot-neutral {
    background: var(--text-dim);
}
.shared-cast-mechanic {
    font-weight: var(--fw-bold);
    color: var(--text);
    font-size: var(--text-md);
}
.shared-cast-idx {
    font-weight: var(--fw-bold);
    color: var(--text);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}
.shared-cast-time {
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.shared-cast-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.shared-cast-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.shared-cast-label {
    flex-shrink: 0;
    min-width: 96px;
    font-size: var(--text-md);
    color: var(--text-muted);
    padding-top: 3px;
}
.shared-cast-count {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
}
.shared-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    flex: 1;
    align-items: center;
    padding-top: 2px;
}
.shared-player-list .player-identity {
    font-size: var(--text-sm);
}
.shared-player-list .player-identity .spec-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 5px;
}
.shared-player-list .player-identity .healer-name {
    font-weight: var(--fw-medium);
}
.shared-player-list-dim .player-identity {
    opacity: 0.5;
    transition: opacity 0.12s ease;
}
.shared-player-list-dim .player-identity:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   Hero-to-Header View Transition
   ═══════════════════════════════════════════════════ */

/* search-bar 그룹: hero form → header form 위치·크기 morph */
.search-vt {
    view-transition-name: search-bar;
}

@supports (view-transition-name: test) {
    /* search-bar morph 타이밍: 칩 ↔ 폼 좌우 확장 */
    ::view-transition-group(search-bar) {
        animation-duration: 0.38s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* old/new 동시 크로스페이드 — delay 없음, 공백 없음 */
    ::view-transition-old(search-bar) {
        animation: 0.18s ease both vt-fade-out;
        mix-blend-mode: normal;
    }

    /* new(search-bar): delay 제거해 old가 사라지기 전에 new가 등장 */
    ::view-transition-new(search-bar) {
        animation: 0.22s ease both vt-fade-in;
        mix-blend-mode: normal;
    }

    /* root(나머지 요소): hero 텍스트 등 빠르게 퇴장 */
    ::view-transition-old(root) {
        animation: 0.15s ease both vt-fade-out;
    }

    /* root new: 결과 컨텐츠는 CSS animation(.result-content)이 담당하므로 투명하게 시작 */
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
}

/* search expand/close VT: root 페이드 억제 — search-bar morph만 사용 */
@supports (view-transition-name: test) {
    html.search-anim ::view-transition-old(root),
    html.search-anim ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
}

/* 결과 컨텐츠 슬라이드업 — VT가 끝난 후(~0.4s) 등장 */
.result-content {
    animation: result-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

@keyframes result-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-vt { view-transition-name: none; }
    .result-content { animation: none; }
}

/* ═══ Header morph search ═══ */
#header-search {
    width: 100%;
}
/* #header-search: 비어있으면 공간 차지 않음 */
#header-search:empty {
    display: none;
}

/* 슬롯 폼: logo와 나란히, 우측 정렬 */
.header-morph-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
    position: relative;   /* .form-validation 말풍선 위치 기준 */
}

/* 헤더는 우측 정렬이라 말풍선을 입력창 우측 끝(버튼 44 + gap 8)에 맞춰 앵커링 */
.header-morph-slot .form-validation {
    left: auto;
    right: 52px;
}
.header-morph-slot .form-validation::before {
    left: auto;
    right: 18px;
}

/* 입력창: 닫힘 → 열림 max-width 트랜지션 */
.header-morph-input {
    flex: 1;
    max-width: 0;
    padding: 12px 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    height: 44px;
    /* url-input 공통 스타일 상속 */
    transition:
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding    0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-width 0.01s linear,
        opacity      0.2s ease 0.12s,
        border-color 0.15s ease;
}

.header-morph-slot.open .header-morph-input {
    max-width: 600px;
    padding: 12px 16px;
    border-width: 1px;
    opacity: 1;
    pointer-events: auto;
}

/* 버튼: 아이콘 상태 → "분석하기" 모프 */
.header-morph-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition:
        width      0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        color      0.2s ease;
}

.header-morph-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text);
}

.header-morph-slot.open .header-morph-btn {
    width: 100px;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.header-morph-slot.open .header-morph-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* 아이콘 / 텍스트 크로스페이드 */
.morph-btn-icon,
.morph-btn-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.morph-btn-icon  { opacity: 1;  transform: translate(-50%, -50%) scale(1); }
.morph-btn-text  { opacity: 0;  transform: translate(-50%, -50%) scale(0.85);
                   font-size: var(--text-md); font-weight: var(--fw-semibold); }

.header-morph-slot.open .morph-btn-icon { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
.header-morph-slot.open .morph-btn-text { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 스피너 슬롯 — 기본은 숨김 */
.morph-btn-spin {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease 0.18s, transform 0.2s ease 0.18s;
}

/* 로딩: 폼에 htmx-request → 버튼이 원형으로 수축 */
#header-search-form.htmx-request .header-morph-btn {
    width: 46px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 3px var(--accent-muted), 0 0 14px rgba(56,139,253,0.35);
}
#header-search-form.htmx-request .morph-btn-text {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
    transition-delay: 0s;
}
#header-search-form.htmx-request .morph-btn-spin {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .header-morph-input,
    .header-morph-btn,
    .morph-btn-icon,
    .morph-btn-text,
    .morph-btn-spin,
    .btn-label,
    .btn-spin,
    .btn-primary { transition: none; }
    .spin-arc-btn { animation: none; }
}

/* ═══ 탱킹 분석 (원페이지 + 섹션 + 블록) ═══
   2-레벨 문법: 섹션(주제 단락) + 블록(시각화 프리미티브).
   탭 안의 탭 대신 원페이지 스크롤 + 상단 앵커 네비.
*/

/* ── 상단 KPI 그리드 — 탱커별 요약 카드 (1~3장 가변) ──
   상단 1차 정보. 아래 4개 섹션은 "지표별" 축이라, 여기는 "플레이어별" 축으로
   직교시켜 중복 제거. KPI 4행 고정으로 카드 간 높이 정렬. */
.panel-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.panel-kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.15s ease;
}

.panel-kpi-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.panel-kpi-card-header .class-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.panel-kpi-name {
    color: var(--text); font-size: var(--text-md); font-weight: var(--fw-semibold);
}
.panel-kpi-spec {
    color: var(--text-muted); font-size: var(--text-xs); margin-left: 4px;
}

.panel-kpi-body {
    display: flex; flex-direction: column; gap: 10px;
}
.panel-kpi-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: var(--text-md);
    min-height: 20px;
}
.panel-kpi-row--bar {
    /* 중앙 1fr 자리에 uptime-track이 들어오는 행 */
}
.panel-kpi-label {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.panel-kpi-value {
    color: var(--text); font-variant-numeric: tabular-nums;
}

/* 힌트 카드 — 1탱 케이스에서 그리드 칸 채움 (허전함 방지) */
.panel-kpi-card--hint {
    border-left-color: var(--border);
    display: flex; align-items: center;
}
.panel-kpi-card--hint p {
    color: var(--text-muted); font-size: var(--text-sm); margin: 0; line-height: 1.5;
}

/* 성공·보조·실패 3슬롯 (탱버스터 행 전용, 시맨틱 컬러 유지) */
.verdict-triplet {
    display: inline-flex; gap: 8px;
    font-variant-numeric: tabular-nums;
}

/* 도발 과중첩 상태 표시 */
.tk-overstack--ok { color: var(--text-muted); }
.tk-overstack--bad { color: var(--verdict-bad); font-weight: var(--fw-medium); }

/* 섹션 헤더 옆 "검증 중" 배지 — 섹션이 접혀 있어도 경고 가시성 유지.
   시맨틱 yellow(#d29922). 퍼스 yellow와 혼용 금지. */
.tk-section-header-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--verdict-warn);
    background: rgba(210, 153, 34, 0.10);
    border: 1px solid rgba(210, 153, 34, 0.30);
}

/* ── 섹션 (헤더만 카드 + 본문은 divider로 이어짐)
   섹션 자체는 시각 컨테이너 아님. 헤더만 독립 카드로 감싸고 본문은
   얇은 divider 하나로 이어지게 한다. */
.tk-section-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tk-section {
    scroll-margin-top: 16px;
}

.tk-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;            /* 전역 header { margin-bottom: 32px } 무력화 */
    padding: 12px 22px;
    min-height: 70px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.tk-section-header:hover {
    background: var(--bg-hover);
}

.tk-section-header-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;              /* 남은 공간 흡수 → meta·chevron이 자동으로 우측 정렬 */
}

.tk-section-title {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin: 0;
}

.tk-section-hint {
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 우측 요약 메타 — 접힌 상태에서도 정보 전달 (boss-summary 톤) */
.tk-section-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tk-section-meta .meta-sep { color: var(--text-dim); margin: 0 2px; }
.tk-section-meta .verdict-label-green,
.tk-section-meta .verdict-label-yellow,
.tk-section-meta .verdict-label-red { font-weight: var(--fw-medium); }

.tk-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}

.tk-section-header:hover .tk-section-chevron {
    color: var(--text);
}

.tk-section.collapsed .tk-section-chevron {
    transform: rotate(-90deg);
}

/* 섹션 본문 — boss-body-wrap 패턴 (grid-template-rows 트랜지션).
   max-height 트릭 대비 균일 ease — 컨텐츠 실제 높이로만 보간되어 가속 없음. */
.tk-section-body-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
.tk-section.collapsed .tk-section-body-wrap {
    grid-template-rows: 0fr;
}

.tk-section-body {
    overflow: hidden;
    min-height: 0;
    margin-top: 30px;
    padding: 0 22px 30px 22px;
    transition: margin 0.3s ease, padding 0.3s ease;
}

.tk-section.collapsed .tk-section-body {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.tk-section-warning {
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(210, 153, 34, 0.08);
    border-left: 3px solid var(--verdict-warn);
    border-radius: 2px;
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: 1.5;
}

/* 스킬 정보 — 미세 배경 톤으로 영역 분리 (보더 없음, 카드 무게 회피) */
.tk-skill-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--bg-card);
    border-radius: 4px;
}
/* 스킬+차트 단위 반복 — 이전 차트와 새 스킬 블록 사이 간격 */
.tk-skill-info--repeat {
    margin-top: 28px;
}
.tk-skill-icon {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    flex-shrink: 0;
}
.tk-skill-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tk-skill-name {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: 1.3;
}
.tk-skill-name-en {
    margin-left: 4px;
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--text-dim);
    line-height: 1.3;
}
/* 다중 적중 (9넴 천상의 찌르기 5/5) — 받은 발수 / 예상 발수 */
.tk-hit-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
}
.tk-hit-count--partial {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}
.tk-skill-desc {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: 1.6;
}

/* 로그 sub-header — 표 위 작은 라벨 */
.tk-log-header {
    margin: 4px 0 10px 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    letter-spacing: 0.4px;
}

/* ── 분석 블록 공용 셸 ──
   블록은 독립 카드가 아니라 섹션 내부의 시각화 단위.
   테두리/배경 없이 섹션 안에서 여백·소제목으로만 구분. */
.panel-block {
    margin-bottom: 28px;
}
.panel-block:last-child { margin-bottom: 0; }

.panel-block-header { margin-bottom: 10px; }
.panel-block-title {
    color: var(--text); font-size: var(--text-md); font-weight: var(--fw-semibold);
    margin: 0 0 4px 0;
}
.panel-block-subtitle {
    color: var(--text-muted); font-size: var(--text-xs); margin: 0; line-height: 1.4;
}
.panel-block-body { color: var(--text); font-size: var(--text-md); }

/* 빈 상태(준비 중) 플레이스홀더 — macro에서 data=None일 때 */
.panel-block--empty .panel-block-body {
    min-height: 56px; display: flex; align-items: center; justify-content: center;
}
.panel-block-placeholder {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px; background: var(--bg-surface);
    border: 1px dashed var(--border); border-radius: 6px;
}
.panel-block-placeholder-tag {
    color: var(--accent); font-size: var(--text-xs); font-weight: var(--fw-semibold);
    letter-spacing: 0.5px; text-transform: uppercase;
}
.panel-block-placeholder-hint { color: var(--text-muted); font-size: var(--text-md); }

/* ── verdict-table (판정 테이블) ── */
.panel-verdict-table {
    width: 100%; border-collapse: collapse; font-size: var(--text-md);
}
.panel-verdict-table thead th {
    padding: 10px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid var(--border);
}
.panel-verdict-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.panel-verdict-table .col-time {
    font-variant-numeric: tabular-nums; color: var(--text-muted); width: 60px;
}
.panel-verdict-table .col-verdict { width: 88px; text-align: center; }

.verdict-label-green  { color: var(--verdict-good); font-weight: var(--fw-medium); }
.verdict-label-yellow { color: var(--verdict-warn); font-weight: var(--fw-medium); }
.verdict-label-red    { color: var(--verdict-bad);  font-weight: var(--fw-medium); }
.tk-rate              { color: var(--text); font-weight: var(--fw-medium); }
.col-reason { color: var(--text-muted); }

/* ── verdict-table 상세 변형 (버스터 대응 행) ──
   컬럼: 시간 / 대상 / 스킬 / 디버프 / 방어기·생존기 / 감소율 / 피해량 막대.
   §3 셀 안 칩 — col-defs는 .cell-slots grid (flex 나열 금지). */
.panel-verdict-table--detail .col-time    { width: 56px; }
.panel-verdict-table--detail .col-target  { width: 150px; }
.panel-verdict-table--detail .col-spell   { width: 140px; }
.panel-verdict-table--detail td.col-spell { color: var(--text); }
.panel-verdict-table--detail th.col-debuff,
.panel-verdict-table--detail td.col-debuff { width: 78px; text-align: center; }
.panel-verdict-table--detail th.col-defs,
.panel-verdict-table--detail td.col-defs   { width: 240px; text-align: center; }
/* 피해량 = 좌측 숫자 셀(col-number) + 우측 막대 셀(col-bar) — avoidable 표 패턴과 동일.
   col-bar는 명시 폭 없이 남는 폭 전부 흡수. */
.panel-verdict-table--detail th.col-number,
.panel-verdict-table--detail td.col-number { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.panel-verdict-table--detail th.col-bar,
.panel-verdict-table--detail td.col-bar    { width: auto; }
/* 행 호버 §3 + 좌측 상태 보더 (방어기 없이 피격) */
.panel-verdict-table--detail .verdict-row {
    transition: background 0.15s ease;
}
.panel-verdict-table--detail .verdict-row:hover {
    background: var(--bg-elevated);
}
.panel-verdict-table--detail .verdict-row td:first-child {
    border-left: 3px solid transparent;
}
.panel-verdict-table--detail .verdict-row--missed td:first-child {
    border-left-color: var(--red);
}
/* 사망 행 — 좌측 빨간 strip + 옅은 행 배경. missed와 같이 적용될 수 있어 strip 색은 missed와 동일. */
.panel-verdict-table--detail .verdict-row--death td:first-child {
    border-left-color: var(--red);
}
.panel-verdict-table--detail .verdict-row--death {
    background: rgba(218, 54, 51, 0.08);
}
.panel-verdict-table--detail .verdict-row--death:hover {
    background: rgba(218, 54, 51, 0.14);
}
.verdict-death-mark {
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
/* 시간 페어 (9넴 한밤의 도래 후반 동시 발사) — 두 row를 하나 단위로 시각 처리.
   - 두 row 사이 border 제거(분리감 제거)
   - 호버 시 두 row 모두 같은 배경(:has로 양방향 연동) — 단일 행처럼 일체감. */
.panel-verdict-table--detail .verdict-row--pair-first td {
    border-bottom-color: transparent;
}
.panel-verdict-table--detail .verdict-row--pair-first:hover,
.panel-verdict-table--detail .verdict-row--pair-first:hover + .verdict-row--pair-last,
.panel-verdict-table--detail .verdict-row--pair-last:hover,
.panel-verdict-table--detail .verdict-row--pair-first:has(+ .verdict-row--pair-last:hover) {
    background: var(--bg-hover);
}
.panel-verdict-table--detail .empty-row {
    text-align: center; color: var(--text-muted); padding: 24px 10px;
}

/* 도발 인계 표 — width:100% 유지.
   col-event/col-target는 칩 + 화살표 + 이름 들어가서 280px씩 필요.
   col-debuff가 슬랙 흡수 (보통 ~200px). */
.handoff-table th.col-debuff,
.handoff-table td.col-debuff      { width: auto; text-align: left; }
.handoff-table th.col-tank,
.handoff-table td.col-tank        { width: 200px; }
.handoff-table th.col-event,
.handoff-table td.col-event       { width: 280px; }
.handoff-table th.col-target,
.handoff-table td.col-target      { width: 280px; }
.handoff-table td.col-target      { color: var(--text); }

/* 좌측 직업색 스트라이프 — 어그로 홀더(메인탱) 직업색을 row inline style의 --phase-color로 주입.
   기본 verdict-row 보더(.panel-verdict-table--detail .verdict-row td:first-child = 3px transparent)는
   .handoff-table 내에서 4px + phase-color로 override. */
.handoff-table .verdict-row td:first-child {
    border-left: 4px solid var(--phase-color, transparent);
    padding-left: 12px;
}
/* 페이즈 경계 spacer — 메인탱 교체 직전 행 위에 20px 빈 줄. */
.handoff-table .handoff-phase-gap td {
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
}
.handoff-table .handoff-phase-gap:hover td {
    background: transparent;
}
/* 새 페이즈 첫 행 — 위쪽 경계선으로 페이즈 시작 명시 */
.handoff-table .handoff-phase-gap + .verdict-row td {
    border-top: 1px solid var(--border);
}
.handoff-arrow {
    display: inline-block;
    margin: 0 6px;
    color: var(--text-muted);
    vertical-align: middle;
}
.handoff-target-name {
    vertical-align: middle;
}

/* 도발 인계 칩 — 이벤트(도발 계열)·디버프(휘두름·검은 상처) 양쪽에 사용.
   border/bg 없는 인라인 형태 — 아이콘+이름+(옵션) 모서리 스택 배지.
   스택 배지는 buster의 .def-icon-stacks와 동일 스타일(아이콘 우하단). */
.handoff-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;  /* 26px 칩이 baseline 기준이면 텍스트 행 위로 솟아 보임 */
    gap: 8px;
    color: var(--text);
    cursor: help;
}
/* wrap 28×28 = buster .def-icon-chip 외곽 폭 동일 (배지 위치 정합). */
.handoff-chip-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
}
.handoff-chip-icon-wrap img {
    width: 26px; height: 26px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}
.handoff-chip-name {
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.handoff-chip-stacks {
    position: absolute; right: -4px; bottom: -2px;
    min-width: 14px;
    padding: 1px 3px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: center;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
/* 사망·부활 칩 — 텍스트 색만 verdict 톤. 아이콘 영역은 동일 (시각 정렬 유지). */
.handoff-chip--death .handoff-chip-name    { color: var(--verdict-bad); }
.handoff-chip--resurrect .handoff-chip-name { color: var(--verdict-good); }

/* col-defs/col-debuff 슬롯을 칩 폭(26px)으로 고정 —
   1fr일 때 컬럼 폭이 넓을수록 슬롯 사이가 벌어져 칩이 흩어져 보였음.
   슬롯을 칩 크기로 묶어 gap만 살리고, 행 간 정렬은 그대로 유지. */
.panel-verdict-table--detail .cell-slots {
    grid-template-columns: repeat(var(--slots, 2), 26px);
    gap: 6px;
    justify-content: center;
}
/* col-debuff는 보통 칩 1개. grid 슬롯이 비어 있을 때 칩이 왼쪽으로 치우치므로
   flex로 변경해 항상 중앙 정렬. col-defs는 다중 칩이라 grid 유지. */
.panel-verdict-table--detail td.col-debuff .cell-slots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* 방어기/생존기 아이콘 칩 — col-defs · col-debuff는 .cell-slots grid 컨테이너 사용 */
.def-icon-chip {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    justify-self: start;
    min-width: 0;
    width: 28px; height: 28px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    cursor: help;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.def-icon-chip:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}
/* swap 성공/실패 구분은 스택 배지(있음/없음)로만. 칩 아이콘은 항상 선명. */
.def-icon-chip img {
    width: 100%; height: 100%;
    border-radius: 3px;
    object-fit: cover;
}
.def-icon-fallback {
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted);
}
.def-icon-stacks {
    position: absolute; right: -4px; bottom: -2px;
    min-width: 14px;
    padding: 1px 3px;
    font-size: var(--text-2xs); font-weight: var(--fw-bold); line-height: 1;
    text-align: center;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.def-icon-wh {
    position: absolute; inset: 0;
    z-index: 3;
}
.def-icon-wh > * { display: none !important; }
.def-icon-empty {
    color: var(--text-dim); font-size: var(--text-xs);
}

/* 피해량 막대 — 힐러 .stacked-bar와 동일하게 트랙 미노출(투명 배경).
   힐러 쪽은 컨테이너 자체가 bar_pct로 줄어 트랙이 자연 숨김인데,
   여기는 컨테이너 100% 고정이라 background 제거로 트랙을 비웠다. */
.damage-bar {
    position: relative;
    display: block;
    height: 20px;
    background: transparent;
    border-radius: 3px;
    overflow: hidden;
}
.damage-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--text-dim);  /* 인라인 style의 직업색이 덮어씀. fallback. */
    border-radius: 3px;
    opacity: 0.85;
    transition: width 0.3s ease, opacity 0.2s ease;
}
.damage-bar:hover .damage-bar-fill { opacity: 1.0; }
.damage-bar-value {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 6px;
    font-size: var(--text-2xs); font-variant-numeric: tabular-nums;
    color: var(--text); text-shadow: 0 0 2px rgba(0,0,0,0.6);
}

.verdict-summary {
    display: inline-flex; gap: 16px; font-size: var(--text-md); margin-top: 10px;
    padding: 8px 12px; background: var(--bg-surface); border-radius: 4px;
}

/* 플레이어 인라인 (class_color 유지 — 이모지·도트는 텍스트 색으로 대체 가능) */
.tk-player {
    display: inline-flex; align-items: center; gap: 6px;
}
.tk-player .class-dot {
    width: 8px; height: 8px; border-radius: 50%;
}

/* ── uptime-bars ── */
.panel-note {
    font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 12px 0;
}
.panel-uptime-list { display: flex; flex-direction: column; gap: 10px; }
.panel-uptime-row {
    display: grid; grid-template-columns: 240px 1fr 56px;
    align-items: center; gap: 12px; font-size: var(--text-md);
}
.panel-uptime-player { color: var(--text); }
.panel-uptime-track {
    position: relative; height: 14px; background: var(--bg-surface);
    border-radius: 3px; overflow: hidden;
}
.panel-uptime-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #1f6feb 0%, #388bfd 100%);
    border-radius: 3px;
}
.panel-uptime-pct {
    font-variant-numeric: tabular-nums; color: var(--text-muted);
    font-size: var(--text-md); text-align: right;
}

/* ── 탱커 능동 방어 카드 (탱킹 시간 · 방어기 · 피해감소율 · DTPS) ── */
.tank-defense-cards {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    margin-bottom: 20px;
}
.tank-defense-card {
    padding: 14px 16px; background: var(--bg-surface); border-radius: 6px;
    border: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 12px;
}
.tdc-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.tdc-identity {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--text-md); font-weight: var(--fw-semibold);
}
.tdc-identity .spec-icon { width: 22px; height: 22px; border-radius: 3px; }
.tdc-tank-time {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: var(--text-sm); color: var(--text-muted);
}
.tdc-tank-time-value {
    font-variant-numeric: tabular-nums; color: var(--text);
    font-weight: var(--fw-medium);
}
.tdc-bars {
    display: flex; flex-direction: column; gap: 8px;
}
.tdc-bar-row {
    display: grid; grid-template-columns: 140px 1fr 80px;
    align-items: center; gap: 12px;
}
.tdc-bar-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--text-md); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdc-bar-label--text { color: var(--text-muted); font-size: var(--text-sm); }
.tdc-am-icon {
    width: 22px; height: 22px; border-radius: 3px;
    border: 1px solid var(--border-subtle); flex-shrink: 0;
}
.tdc-am-name { overflow: hidden; text-overflow: ellipsis; }
.tdc-bar {
    position: relative; height: 14px; background: var(--bg-base);
    border-radius: 3px; overflow: hidden;
}
.tdc-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #1f6feb 0%, #388bfd 100%);
    border-radius: 3px;
}
.tdc-bar-fill--warn {
    background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}
.tdc-bar-row--lha { grid-template-columns: 140px 1fr 110px; }
.tdc-bar-fill--lha-stable {
    background: linear-gradient(90deg, #1a7f37 0%, #3fb950 100%);
}
.tdc-bar-fill--lha-average {
    background: linear-gradient(90deg, #535b66 0%, #6e7681 100%);
}
.tdc-bar-fill--lha-wobbly {
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 100%);
}
.tdc-bar-fill--lha-death {
    background: linear-gradient(90deg, #8b1a1a 0%, #da3633 100%);
}
.tdc-lha-pill {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tdc-lha-pill.tdc-lha--stable {
    background: rgba(63, 185, 80, 0.15); color: var(--verdict-good);
}
.tdc-lha-pill.tdc-lha--average {
    background: rgba(255, 255, 255, 0.06); color: var(--text);
}
.tdc-lha-pill.tdc-lha--wobbly {
    background: rgba(245, 158, 11, 0.15); color: #f59e0b;
}
.tdc-lha-pill.tdc-lha--death {
    background: rgba(218, 54, 51, 0.15); color: var(--verdict-bad);
}
.tdc-bar-value {
    font-variant-numeric: tabular-nums; color: var(--text);
    font-size: var(--text-md); font-weight: var(--fw-medium); text-align: right;
}
@media (max-width: 720px) {
    .tdc-bar-row { grid-template-columns: 1fr 80px; }
    .tdc-bar-label { grid-column: 1 / -1; }
}

/* ── metric-panel ──
   TODO: 다음 PR에서 완전 제거 — 상단 KPI 카드(.panel-kpi-card)로 흡수됨.
   현재 주석 유지 이유: 템플릿에서 블록 참조 전부 제거됐는지 확인 후 삭제하려 리스크 분리.
.panel-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.panel-metric-card {
    padding: 14px 16px; background: var(--bg-surface);
    border: 1px solid var(--border-subtle); border-radius: 6px;
    border-left-width: 3px;
}
.panel-metric-card--red    { border-left-color: var(--verdict-bad); }
.panel-metric-card--orange { border-left-color: #d2691e; }
.panel-metric-card--yellow { border-left-color: var(--verdict-warn); }
.panel-metric-card--green  { border-left-color: var(--verdict-good); }
.panel-metric-card--neutral { border-left-color: var(--border); }

.panel-metric-label {
    color: var(--text-muted); font-size: var(--text-xs); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 6px;
}
.panel-metric-value {
    color: var(--text); font-size: var(--text-metric); font-weight: var(--fw-semibold); margin-bottom: 4px;
}
.panel-metric-sublabel { color: var(--text-muted); font-size: var(--text-md); }
*/
.panel-footnote { color: var(--text-muted); font-size: var(--text-xs); margin: 12px 0 0 0; }

/* ── timeline-block ── */
/* graph-track + graph-axis + graph-tick (기믹수행) 와 동일 시각 규격. */
.panel-timeline {
    position: relative;
}
.panel-timeline-svg {
    display: block; width: 100%; height: 140px;
    background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: 4px;
}
/* HP=100 라벨 — HP=100 점선 살짝 위에 띄움 (라벨 하단이 선 위 4px). */
.panel-timeline-yaxis-label {
    position: absolute;
    left: 4px;
    padding: 0 3px;
    background: var(--bg-surface);
    font-size: var(--text-2xs);
    font-family: monospace;
    color: var(--text-muted);
    transform: translateY(calc(-100% - 4px));
    pointer-events: none;
    z-index: 1;
}
.panel-timeline-axis {
    position: relative; height: 20px; margin-top: 4px;
}
/* 리스크 차트 가로 스크롤 — 8px/sec, 도발인계 il-graph-scroll 스타일 재사용.
   짧은 풀(800px 미만)은 컨테이너 폭을 채움. */
/* 탱커 체력변화 차트 — 좌측 탱커 칩 + 우측 생존기 토글 칩 한 줄 배치 */
.tk-hp-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tk-hp-filter-row .tk-hp-filter,
.tk-hp-filter-row .filter-tabs {
    margin-bottom: 0;  /* row 안에서 수직 정렬용 — filter-tabs 기본 margin 제거 */
}
/* 생존기 토글 칩 — 작은 아이콘만 표시. active 시 또렷, inactive 시 회색조 */
.tk-hp-cd-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.tk-hp-cd-chip {
    width: 28px; height: 28px;
    padding: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.15s, filter 0.15s;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tk-hp-cd-chip img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}
.tk-hp-cd-chip:not(.active) {
    opacity: 0.35;
    filter: grayscale(0.8);
    border-color: var(--border-subtle);
}
.tk-hp-cd-chip.active {
    border-color: var(--border-hover);
}
.tk-hp-cd-chip:hover {
    border-color: var(--text-muted);
}

.tk-hp-canvas {
    position: relative;
}
.tk-hp-scroll .tk-hp-canvas,
.tk-hp-scroll .panel-timeline-axis {
    min-width: 100%;
}
/* 경계 앵커 — 시작(0%)/끝(100%) 마커가 캔버스 밖으로 비집어 스크롤바를 유발하지
   않도록 정렬 변경. 기본은 translate(-50%, -50%) (중앙). */
.tk-hp-marker--anchor-left  { transform: translate(0, -50%); }
.tk-hp-marker--anchor-right { transform: translate(-100%, -50%); }
.tk-hp-marker {
    position: absolute;
    width: 28px; height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    box-sizing: border-box;
    overflow: visible;
    z-index: 2;
}
.tk-hp-marker img {
    display: block; width: 100%; height: 100%;
    border-radius: 3px;
    object-fit: cover;
}
.tk-hp-marker-wh {
    position: absolute; inset: 0;
    z-index: 3;
}
.tk-hp-marker-wh > * { display: none !important; }
.tk-hp-marker--death {
    border: none;
    background: none;
    width: 24px; height: 24px;
}
.tk-hp-marker--death::before {
    content: '💀';
    position: absolute;
    inset: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.tk-hp-marker--death img { opacity: 0; pointer-events: none; }
.tk-hp-marker--melee::after {
    content: '일반공격';
    position: absolute;
    bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1a1a2e;
    color: #cdd6f4;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid #45475a;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
}
/* data-tooltip 있으면 'killer - 일반공격' 같이 동적 라벨로 표시. 없으면 fallback. */
.tk-hp-marker--melee[data-tooltip]::after {
    content: attr(data-tooltip);
}
.tk-hp-marker--melee:hover::after { opacity: 1; }
.tk-hp-marker--rez {
    border: none;
    background: none;
    width: 24px; height: 24px;
}
.tk-hp-marker--rez::before {
    content: '❤️';
    position: absolute;
    inset: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.tk-hp-marker--rez img { opacity: 0; pointer-events: none; }
.tk-hp-marker--cd    { border-width: 2px; }
.panel-timeline-tick {
    position: absolute; transform: translateX(-50%);
    font-size: var(--text-2xs); font-family: monospace; color: var(--text-muted);
    white-space: nowrap; pointer-events: none;
}
.panel-timeline-tick:first-child { transform: translateX(0); }
.panel-timeline-tick:last-child { transform: translateX(-100%); }
.panel-timeline-legend {
    margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap;
    font-size: var(--text-xs); color: var(--text-muted);
}
.panel-timeline-legend > span {
    display: inline-flex; align-items: center; gap: 6px;
}
.panel-timeline-legend .dot { width: 10px; height: 10px; border-radius: 2px; }

/* ── pair-compare ── */
.panel-pair {
    display: grid; grid-template-columns: 1fr 40px 1fr;
    gap: 16px; align-items: stretch;
}
.panel-pair-col {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 14px;
}
.panel-pair-header {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text);
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.panel-pair-stat {
    display: grid; grid-template-columns: 1fr auto;
    padding: 6px 0; font-size: var(--text-md);
}
.panel-pair-stat-label { color: var(--text-muted); }
.panel-pair-stat-value {
    color: var(--text); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium);
}
.panel-pair-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: var(--text-lg);
}
.panel-pair-transitions {
    margin-top: 14px; padding: 12px;
    background: var(--bg-surface); border-radius: 4px;
}
.panel-pair-transitions h4 {
    margin: 0 0 10px 0; font-size: var(--text-xs); color: var(--text-muted);
    letter-spacing: 0.5px; text-transform: uppercase; font-weight: var(--fw-medium);
}
.panel-pair-trans-row {
    display: grid; grid-template-columns: 50px auto 1fr;
    gap: 10px; padding: 5px 0; font-size: var(--text-md);
    font-variant-numeric: tabular-nums; color: var(--text-muted);
}

/* ── ranking-table ── */
.panel-ranking-table {
    width: 100%; border-collapse: collapse; font-size: var(--text-md);
}
.panel-ranking-table thead th {
    padding: 10px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: right;
    border-bottom: 2px solid var(--border);
}
.panel-ranking-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.panel-ranking-table tbody tr:last-child td { border-bottom: none; }
.panel-ranking-table thead th.col-name,
.panel-ranking-table thead th.col-rank { text-align: left; }
.panel-ranking-table tbody td.col-name,
.panel-ranking-table tbody td.col-rank { text-align: left; }

.panel-ranking-table .col-rank { width: 60px; color: var(--text-muted); text-align: center; }
.panel-ranking-table thead th.col-rank { text-align: center; }
.panel-ranking-table tbody td.col-rank { text-align: center; }
.panel-ranking-table thead th.col-center { text-align: center; }
.panel-ranking-table tbody td.col-center { text-align: center; }

.prank-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: var(--text-xs); font-weight: var(--fw-medium);
}
.prank-badge--red    { background: rgba(248, 81, 73, 0.15);  color: var(--verdict-bad); }
.prank-badge--orange { background: rgba(210, 105, 30, 0.15); color: #d2691e; }
.prank-badge--yellow { background: rgba(210, 153, 34, 0.15); color: var(--verdict-warn); }
.prank-badge--green  { background: rgba(63, 185, 80, 0.15);  color: var(--verdict-good); }

/* ── 반응형 ── */
@media (max-width: 900px) {
    /* 3탱 케이스 방어 — 카드 폭이 애매해지는 구간에서 minmax 완화 */
    .panel-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 720px) {
    .panel-kpi-grid { grid-template-columns: 1fr; }
    .panel-pair { grid-template-columns: 1fr; }
    .panel-pair-arrow { display: none; }
    .panel-uptime-row { grid-template-columns: 1fr 48px; }
    .panel-uptime-player { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   도발 인계 — 인터로킹 타임라인 (.il-*)
   ───────────────────────────────────────────────────────────
   2탱 전제. 위 레인 = lanes[0], 아래 레인 = lanes[1].
   디스펠 그래프(.graph-track / .graph-axis)와 동일한 톤 매칭.
   ═══════════════════════════════════════════════════════════ */

.il-boss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px;
    background: var(--bg-elevated);
    border-radius: 4px;
    margin-bottom: 12px;
}
/* 도발 인계 풀 카드 간 간격 — 기본 panel-block(28px)보다 좁게.
   접힘 상태에서 28px이면 카드들이 떠있는 느낌이라 묘함. */
.il-pool-card { margin-bottom: 8px; }
/* 풀 카드의 헤더는 클릭으로 접기/펴기 */
.il-pool-card .il-boss-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.il-pool-card .il-boss-header:hover { background: var(--bg-hover); }
.il-boss-header-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.il-pool-card-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}
.il-pool-card .il-boss-header:hover .il-pool-card-chevron { color: var(--text); }
.il-pool-card.collapsed .il-pool-card-chevron { transform: rotate(-90deg); }
/* 카드 본문 — tk-section과 동일한 grid-template-rows 트랜지션 패턴 (UI 가이드 max-height 대안) */
.il-pool-card-body-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
.il-pool-card.collapsed .il-pool-card-body-wrap { grid-template-rows: 0fr; }
.il-pool-card-body { overflow: hidden; min-height: 0; }
/* 접힘 시 헤더 아래 마진도 같이 줄여 빈 공간 제거 */
.il-pool-card.collapsed .il-boss-header { margin-bottom: 0; transition: background 0.15s ease, margin 0.3s ease; }
.il-boss-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.il-boss-name-ko {
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: var(--text);
}
.il-boss-name-en {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}
.il-boss-tanks { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.il-tank-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
}
.il-spec-icon {
    width: 20px; height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    flex-shrink: 0;
    background: #1a1a1a;
}
.il-spec-icon img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
}

/* 가로 스크롤 래퍼 */
.il-graph-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}
.il-graph-scroll::-webkit-scrollbar { height: 6px; }
.il-graph-scroll::-webkit-scrollbar-track { background: transparent; }
.il-graph-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.il-graph-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
.il-graph-scroll .il-tracks,
.il-graph-scroll .graph-axis { min-width: 100%; }

.il-tracks {
    position: relative;
    /* 트랙 높이 = 상하 여유(48+46) + 레인당 26px (24 바 + 2 간격, 마지막 간격 제거) */
    height: calc(94px + 26px * var(--lane-count, 2));
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.il-bar {
    position: absolute;
    height: 24px;
    z-index: 3;
    cursor: pointer;
    overflow: visible;
    /* 레인 위치 — top = 48 + 26 * lane_index (lane 0: 48, lane 1: 74, lane 2: 100, ...) */
    top: calc(48px + 26px * var(--lane-index, 0));
}
.il-bar:hover .il-bar-segment { filter: brightness(1.15); }

.il-bar-segment {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    background: var(--tank-color);
    border-radius: 2px;
    z-index: 1;
}
.il-bar--offtank { z-index: 1; cursor: default; }
.il-bar--offtank .il-bar-segment {
    background: var(--tank-color);
    opacity: 0.12;
    border: 1px solid var(--tank-color);
}

.il-bar-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: visible;
    display: block;
    z-index: 2;
}
.il-bar-icon img,
.il-bar-icon a img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
}
.il-wh-overlay {
    position: absolute; inset: 0;
    z-index: 3;
}
.il-wh-overlay > * { display: none !important; }
.il-bar-icon a:not(.il-wh-overlay),
.il-flag-icon-img a:not(.il-wh-overlay),
.il-spec-icon a:not(.il-wh-overlay) {
    display: block;
    width: 100%; height: 100%;
    text-decoration: none;
    color: inherit;
    outline: none;
}

.il-flag {
    position: absolute;
    width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-left로 중앙 정렬 — transform/z-index를 쓰면 stacking context가 생겨
       자식 .il-flag-stack의 z-index가 옆 flag의 아이콘을 넘지 못한다. */
    margin-left: -14px;
    cursor: help;
}
/* 깃발 — placement(up/down)에 따라 트랙 상단/하단에 부착. stem 길이는 가장자리부터의
   레인 거리에 비례 (--lane-index = 가장자리에서 N번째 레인 → 36 + 26*N px). */
.il-flag--up {
    top: 12px;
    height: calc(36px + 26px * var(--lane-index, 0));
}
.il-flag--down {
    bottom: 12px;
    height: calc(36px + 26px * var(--lane-index, 0));
}
/* 경계 앵커 — 시작(0%)/끝(100%) 깃발이 트랙 밖으로 비집지 않도록 정렬 변경.
   기본은 margin-left: -14px (중앙 정렬, .il-flag 본 규칙). */
.il-flag--anchor-left  { margin-left: 0; }
.il-flag--anchor-right { margin-left: -28px; }

.il-flag-icon-img {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    position: relative;
    flex-shrink: 0;
    /* .il-flag이 stacking context를 안 만들므로 .il-bar(z:3) 위로 띄우려면 4 이상. */
    z-index: 4;
}
.il-flag-icon-img img,
.il-flag-icon-img a img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}
.il-flag-icon-img--death {
    border-color: var(--verdict-bad);
}
.il-flag-icon-img--res {
    border-color: var(--verdict-good);
}
.il-flag-emoji {
    width: 28px; height: 28px;
    position: relative;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
    /* .il-flag이 stacking context를 안 만들므로 .il-bar(z:3) 위로. */
    z-index: 4;
}
.il-flag-emoji-text { pointer-events: none; }
.il-flag-emoji .il-wh-overlay {
    position: absolute; inset: 0; z-index: 3;
}
.il-flag-emoji .il-wh-overlay > * { display: none !important; }
.il-flag-emoji--melee::after {
    content: '일반공격';
    position: absolute;
    top: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1a1a2e;
    color: #cdd6f4;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid #45475a;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
}
/* data-tooltip 있으면 'killer - 일반공격' 동적 라벨로 교체. 없으면 fallback. */
.il-flag-emoji--melee[data-tooltip]::after {
    content: attr(data-tooltip);
}
.il-flag-emoji--melee:hover::after { opacity: 1; }
.il-flag-stack {
    position: absolute;
    bottom: -4px; right: -4px;
    background: #1a1a1a;
    border: 1px solid #b8862c;
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 0 3px;
    border-radius: 2px;
    line-height: 1.2;
    min-width: 12px;
    text-align: center;
    z-index: 10;
}
.il-flag-stem {
    flex: 1;
    width: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
    min-height: 4px;
    /* z-index가 통하려면 position 필요. .il-bar(z:3) 위로. */
    position: relative;
    z-index: 4;
}

/* ════════════════════════════════════════════════════════════
   공격대 생존기 (raid cooldowns) — 힐러 탭 섹션 2
   탱킹 탭 '리스크 분석' 패턴: 받은 피해 곡선 위에 공생기 마커 흩뿌리기.
   ════════════════════════════════════════════════════════════ */

/* 힐러 칩 행 — 탱킹의 .tk-hp-filter-row 룰을 그대로 재사용 (CSS 추가 없음). */

/* 캔버스 — .tk-hp-canvas와 동일 패턴 */
.rcd-canvas {
    position: relative;
}
.rcd-scroll .rcd-canvas,
.rcd-scroll .panel-timeline-axis {
    min-width: 100%;
}

.rcd-graph-svg {
    display: block;
    width: 100%;
    height: 140px;
}

/* 곡선 위 공생기 마커 — 그 순간 DTPS 위치에 안착. 탱킹 .tk-hp-marker--cd와 동일 톤. */
.rcd-cd-marker--anchor-left  { transform: translate(0, -50%); }
.rcd-cd-marker--anchor-right { transform: translate(-100%, -50%); }
.rcd-cd-marker {
    position: absolute;
    width: 24px; height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    box-sizing: border-box;
    overflow: visible;
    z-index: 2;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.rcd-cd-marker:hover {
    z-index: 5;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent);
}
.rcd-cd-marker img {
    display: block; width: 100%; height: 100%;
    border-radius: 3px;
    object-fit: cover;
}
.rcd-cd-marker-wh {
    position: absolute; inset: 0;
    z-index: 3;
}
.rcd-cd-marker-wh > * { display: none !important; }
.rcd-cd-marker--hidden,
.rcd-cd-marker--hidden-by-spell { display: none; }

/* 스펠 칩 전체 토글 — tk-hp-cd-chip 28×28 정사각과 동일. 안에 eye / eye-off 아이콘. */
.rcd-spell-toggle-all {
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.rcd-spell-toggle-all svg {
    width: 16px;
    height: 16px;
    display: block;
}
.rcd-spell-toggle-all .rcd-toggle-icon-off { display: none; }
.rcd-spell-toggle-all:not(.active) .rcd-toggle-icon-on { display: none; }
.rcd-spell-toggle-all:not(.active) .rcd-toggle-icon-off { display: block; }
.rcd-spell-toggle-all:not(.active) {
    opacity: 0.5;
    color: var(--text-muted);
}
.rcd-spell-toggle-all.active {
    border-color: var(--border-hover);
}
.rcd-spell-toggle-all:hover {
    border-color: var(--text-muted);
}

/* 캐스트 트랙 — lane-packing 결과를 가로 막대로 렌더. 그래프 아래 별도 영역.
   WCL 톤: 좌측에 아이콘, 우측은 단색 클래스 컬러 막대(지속시간). 텍스트 없음.
   배경: WCL 플레이어 리스트처럼 lane 높이(28px) 맞춘 교대 가로 스트라이프. */
.rcd-cast-track {
    position: relative;
    margin-top: 6px;
    border-radius: 4px;
    overflow: hidden;
    /* 그래프 SVG와 동일 베이스 컬러 — 한 패널처럼 느껴지게.
       lane 구분은 28px 단위로 한 행만 살짝 밝게 — 막대가 시각 주연이 되도록 매우 미세. */
    background-color: var(--bg-surface);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 28px,
        rgba(255, 255, 255, 0.018) 28px,
        rgba(255, 255, 255, 0.018) 56px
    );
}

.rcd-cast-bar {
    position: absolute;
    height: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 3px;
    background: var(--bar-color);
    overflow: hidden;
    z-index: 2;
    transition: filter 0.1s ease;
}
.rcd-cast-bar:hover { filter: brightness(1.12); }
/* 즉발 — 막대 없이 아이콘만. 클래스 컬러 외곽선으로 식별. */
.rcd-cast-bar--instant {
    width: 22px !important;
    background: transparent;
    border: 1px solid var(--bar-color);
}

/* 아이콘 래퍼 — 호버 시 wowhead 툴팁 트리거. 막대 본체는 단색이라 호버 영역 아님. */
.rcd-cast-icon-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.rcd-cast-icon {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    margin: 2px;
    display: block;
}
.rcd-cast-bar-wh {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.rcd-cast-bar-wh > * { display: none !important; }

.rcd-cast-bar--hidden,
.rcd-cast-bar--hidden-by-spell { display: none; }

/* ───── 인터셉트 메커니즘 (마력 깃든 깃) — mechanics-table 기본 위에 폭만 ─────
   컬럼 폭은 §3 가이드(이름 min-width 160px)에 맞춰 명시. auto만 두면 leftover가
   한 컬럼에 몰려 시각 균형이 깨짐(대상자 단일 플레이어 vs 휩쓸림 빈 셀). */
.intercept-cast-table .ic-time {
    width: 64px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.intercept-cast-table .ic-target {
    width: 22%;
    min-width: 160px;
}
.intercept-cast-table .ic-spell {
    width: 130px;
    color: var(--text-muted);
    white-space: nowrap;
}
.intercept-cast-table .ic-blocker {
    width: 28%;
    min-width: 200px;
}
.intercept-cast-table .ic-swept {
    width: 28%;
    min-width: 160px;
}
.intercept-cast-table .ic-spell-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 6px;
}
.intercept-cast-table .ic-spell-name {
    vertical-align: middle;
}

.ic-match-ok,
.ic-match-bad {
    display: inline-block;
    margin-left: 6px;
    font-weight: var(--fw-bold);
    font-size: var(--text-xs);
}
.ic-match-ok { color: var(--green); }
.ic-match-bad { color: var(--red); }

.ic-empty { color: var(--text-disabled); }


/* 음표 카드 — 데이터 한계 추정 주의 표시 (⚠) */
.mechanic-data-caveat {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: var(--yellow);
    vertical-align: middle;
    cursor: help;
}

/* 음표(징표) 표 — 컬럼 layout 명시 (mechanics-table 공통 col-name flex 영향 회피). */
.note-table {
    table-layout: auto;
}
.note-table .note-col-time {
    width: 60px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.note-table .note-col-targets {
    /* 마크된 player 5+명이 한 줄에 들어가게 */
    line-height: 1.8;
}
.note-table .note-col-outcome {
    width: 70px;
    text-align: center;
    white-space: nowrap;
}

/* 음표(징표) 라운드 — player별 status. ✗ = 실수자, missed = 마크 소멸. */
.note-player {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
.note-player--missed {
    opacity: 0.4;
}
.note-player--failure {
    /* 시인성 — 실수자 강조 */
}
.note-player--failure .healer-name {
    text-decoration: underline wavy var(--red);
    text-underline-offset: 3px;
}
.note-status-x {
    color: var(--red);
    font-weight: var(--fw-bold);
    margin-right: 2px;
}

/* 신화 음표 — 팀 묶음 (빨/파/현실 5+5+5). 한 round 셀 안에 3행 sub-block. */
.note-team {
    display: grid;
    /* 라벨 column은 내용에 맞춰 auto(뱃지 포함 길이 가변). chip column은 나머지 1fr. */
    grid-template-columns: minmax(56px, max-content) 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    border-left: 3px solid transparent;
    padding-left: 14px;
    transition: background-color 0.15s ease;
}
.note-team-label {
    white-space: nowrap;
}
.note-team + .note-team {
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.note-team--red    { border-left-color: var(--red); }
.note-team--blue   { border-left-color: var(--blue, #5470C6); }
.note-team--outside{ border-left-color: var(--text-dim); }
.note-team-label {
    font-size: var(--text-xs);
    color: var(--text-dim);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.note-team--red    .note-team-label { color: var(--red); }
.note-team--blue   .note-team-label { color: var(--blue, #5470C6); }
.note-team-count {
    display: inline-block;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
.note-team-members {
    line-height: 1.8;
}

/* 신화 음표 — 팀별 outcome 강조 (실패 팀만 빨간 배경) */
.note-team--failure {
    background: rgba(218, 54, 51, 0.06);
}
/* chip 앞 실패/의심 뱃지 (빨강·흰 글자) */
.note-player-badge {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}
.note-player-badge--fail {
    background: var(--red);
    color: #fff;
}


/* 드롭 표 원인 셀 — intercept 표 ic-spell-icon 패턴과 동일 (18px 인라인). */
.crystal-cause-cell {
    position: relative;  /* wh overlay anchor */
}
.crystal-cause-spell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}
.crystal-cause-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}
/* mass drop (페이즈 전환) — drop이 개별 hit이 아닌 일괄 mechanic임을 알리는 chip. */
.crystal-mass-chip {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 6px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    color: var(--bg-base);
    background: var(--text-secondary);
    border-radius: 8px;
    vertical-align: middle;
    cursor: help;
}
/* Wowhead 툴팁 트리거 — 셀 전체 덮어 호버 가능. tooltips.js가 이 href로 리치 툴팁 자동 표시. */
.crystal-cause-wh {
    position: absolute; inset: 0;
    z-index: 3;
}
.crystal-cause-wh > * { display: none !important; }


/* === 여명의 수정 (crystal_bearers) ===
   가로 스크롤 + 고정 픽셀 스케일(8px/sec) — 시간 축은 회피피해 graph 패턴 차용. */
.crystal-timeline-block {
    margin: 12px 0 18px;
}
.crystal-timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 4px;
}
.crystal-timeline-scroll::-webkit-scrollbar { height: 8px; }
.crystal-timeline-scroll::-webkit-scrollbar-track { background: var(--bg-surface); }
.crystal-timeline-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.crystal-timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
.crystal-timeline-inner {
    /* width는 inline style로 px 지정 (dur_sec * 8). flex가 아닌 block — 안쪽 absolute 막대들이 자연스럽게 정렬. */
    min-width: 100%;
}
.crystal-timeline-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crystal-radiance-track {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.crystal-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crystal-slot-label {
    width: 40px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: right;
}
.crystal-radiance-label {
    color: var(--orange, #f5a623);
}
.crystal-slot-track,
.crystal-radiance-strip {
    position: relative;
    flex-grow: 1;
    height: 24px;
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border-radius: 3px;
}
.crystal-radiance-strip {
    height: 18px;
    background: transparent;
}
.crystal-bar-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 2px;
    opacity: 0.85;
    transition: opacity 0.15s ease;
    cursor: help;
}
.crystal-bar-fill:hover {
    opacity: 1;
}
/* segment 시작 leading icon — 트랙 높이와 동일한 24px (강조보다 식별 위주). */
.crystal-bar-icon {
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    pointer-events: none;
    z-index: 1;
}
/* 우주 피해 피격 마커 — 클래스색 바 위에 띄우는 동그라미(흰 테두리 + 주황 채움). */
.crystal-drop-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--orange, #f5a623);
    border: 1.5px solid var(--bg-base, #1a1a1a);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.5);
    z-index: 2;
    cursor: help;
    transition: transform 0.12s ease;
}
.crystal-drop-dot:hover {
    transform: scale(1.35);
}
/* mass drop은 색을 다르게 (개별 cosmic hit과 시각적 구분) — muted gray. */
.crystal-drop-dot--mass {
    background: var(--text-secondary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
/* 시간 축 — graph-axis 패턴 차용 (potions/avoidable과 동일 외형). */
.crystal-axis-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}
.crystal-axis-spacer {
    width: 40px;
    flex-shrink: 0;
}
.crystal-axis {
    position: relative;
    flex-grow: 1;
    height: 18px;
}
.crystal-axis .graph-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: var(--text-2xs);
    font-family: monospace;
    color: var(--text-muted);
    pointer-events: none;
    white-space: nowrap;
}
.crystal-radiance-mark {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-sm);
    color: var(--orange, #f5a623);
    z-index: 2;
}
/* 눈물 발생 — 대상자 보유 바 위, 맞은 시각에 세로 보라 줄 (바 높이와 동일).
   흰 테두리 링으로 어떤 직업색 바 위에서도 분리되어 보이게. */
.crystal-tears-line {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 4px;
    transform: translateX(-50%);
    background: var(--purple, #9A60B4);
    border-radius: 1px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
    z-index: 3;
    cursor: help;
}

.crystal-pull-block {
    margin: 6px 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: 4px;
    padding: 6px 10px;
}
.crystal-pull-summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    list-style: none;
}
.crystal-pull-summary::-webkit-details-marker {
    display: none;
}
.crystal-pull-name {
    font-weight: var(--fw-semibold, 600);
}
.crystal-pull-stats {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.col-cause { width: 140px; }