/* /Components/GuildWarAttackCardEditor.razor.rz.scp.css */
/* 길드전 공략 추가·고치기 — 카드 위 편집 칸 모양은 GuildWarSetupCard.razor.css(.editing) */
.gwa-edit-hint[b-rmiubn0fq5] {
    margin: -4px 0 0;
    color: var(--text-dim);
    font-size: .78rem;
}

.gwa-editor[b-rmiubn0fq5] {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--accent);
    border-radius: 12px;
    background: var(--bg);
}

.gwa-status[b-rmiubn0fq5] {
    margin: 6px 0 10px;
    padding: 8px 11px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: .86rem;
}

.gwa-actions[b-rmiubn0fq5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gwa-btn[b-rmiubn0fq5] {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.gwa-btn.primary[b-rmiubn0fq5] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.gwa-btn.danger[b-rmiubn0fq5] {
    border-color: color-mix(in srgb, #e05d67 50%, var(--border));
    color: #ff8a93;
}

.gwa-btn.small[b-rmiubn0fq5] {
    padding: 4px 9px;
    font-size: .78rem;
}

.gwa-btn:disabled[b-rmiubn0fq5] {
    opacity: .5;
    cursor: default;
}

.gwa-editor h3[b-rmiubn0fq5] {
    margin: 0;
    font-size: 1rem;
}

.gwa-editor fieldset[b-rmiubn0fq5] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.gwa-editor legend[b-rmiubn0fq5] {
    padding: 0 4px;
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 800;
}

.gwa-grid[b-rmiubn0fq5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 10px;
}

.gwa-editor label[b-rmiubn0fq5] {
    display: grid;
    gap: 3px;
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 700;
}

.gwa-editor label.wide[b-rmiubn0fq5] {
    grid-column: 1 / -1;
}

.gwa-editor input[b-rmiubn0fq5],
.gwa-editor select[b-rmiubn0fq5],
.gwa-editor textarea[b-rmiubn0fq5] {
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .86rem;
    font-weight: 400;
}

.gwa-editor[b-rmiubn0fq5] {
    margin-top: 8px;
}

@media (max-width: 440px) {
    .gwa-editor[b-rmiubn0fq5] {
        padding: 10px 8px;
    }

    /* 폰: 입력 칸 두 줄씩(한 줄씩이면 영웅 셋만으로 화면 열 장이 넘었다), 겹친 테두리 안쪽 여백은 줄인다 */
    .gwa-grid[b-rmiubn0fq5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
    }

    .gwa-editor fieldset[b-rmiubn0fq5] {
        padding: 6px;
    }

}

/* 펫 — 전설 펫 그림 단추 */
.gwa-pet[b-rmiubn0fq5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.gwa-pet-label[b-rmiubn0fq5] {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
}

.gwa-pet-btn[b-rmiubn0fq5],
.gwa-pet-pick button[b-rmiubn0fq5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.gwa-pet-btn img[b-rmiubn0fq5],
.gwa-pet-pick img[b-rmiubn0fq5] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.gwa-pet-btn.on[b-rmiubn0fq5],
.gwa-pet-pick button.on[b-rmiubn0fq5] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.gwa-pet-pick[b-rmiubn0fq5] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    padding: 6px;
    border: 1px dashed var(--accent);
    border-radius: 9px;
}
/* /Components/GuildWarAttackCardList.razor.rz.scp.css */
/* 길드전 공격 공략 카드 목록(상세 줄의 공략을 펼친 곳). 카드 안 세팅 모양은 GuildWarSetupCard.razor.css. */
.gwa-status[b-kt6idsqh3c] {
    margin: 6px 0 10px;
    padding: 8px 11px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: .86rem;
}

.gwa-card[b-kt6idsqh3c] {
    display: grid;
    gap: 8px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}

.gwa-card-head[b-kt6idsqh3c] {
    display: grid;
    gap: 4px;
}

.gwa-card-head h3[b-kt6idsqh3c] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.gwa-meta[b-kt6idsqh3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--text-dim);
    font-size: .78rem;
}

.gwa-src[b-kt6idsqh3c] {
    padding: 0 7px;
    border-radius: 999px;
    font-weight: 800;
}

.gwa-src.builtin[b-kt6idsqh3c] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

.gwa-src.server[b-kt6idsqh3c] { background: color-mix(in srgb, #3fb37f 18%, transparent); color: #3fb37f; }

.gwa-src.local[b-kt6idsqh3c] { background: color-mix(in srgb, #f0a14a 20%, transparent); color: #f0a14a; }

.gwa-notes[b-kt6idsqh3c] {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.gwa-actions[b-kt6idsqh3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gwa-btn[b-kt6idsqh3c] {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.gwa-btn.primary[b-kt6idsqh3c] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.gwa-btn.danger[b-kt6idsqh3c] {
    border-color: color-mix(in srgb, #e05d67 50%, var(--border));
    color: #ff8a93;
}

.gwa-btn.small[b-kt6idsqh3c] {
    padding: 4px 9px;
    font-size: .78rem;
}

.gwa-btn:disabled[b-kt6idsqh3c] {
    opacity: .5;
    cursor: default;
}

.gwa-card + .gwa-card[b-kt6idsqh3c] {
    margin-top: 10px;
}

.gwa-add[b-kt6idsqh3c] {
    justify-self: start;
    margin-top: 8px;
}

@media (max-width: 440px) {
    .gwa-card[b-kt6idsqh3c] {
        padding: 10px 8px;
    }
}
/* /Components/GuildWarGearPanel.razor.rz.scp.css */
.gwg[b-q1qydflfss] {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.gwg-card[b-q1qydflfss] {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gwg-card h3[b-q1qydflfss] {
    margin: 0 0 10px;
    font-size: 1.02rem;
    font-weight: 800;
}

.gwg-heading[b-q1qydflfss] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.gwg-heading span[b-q1qydflfss] {
    color: var(--text-dim);
    font-size: .78rem;
}

.gwg-kpis[b-q1qydflfss] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.gwg-kpis div[b-q1qydflfss] {
    display: grid;
    gap: 2px;
    padding: 9px 6px;
    border-radius: 9px;
    background: var(--bg);
    text-align: center;
}

.gwg-kpis strong[b-q1qydflfss] { font-size: 1.15rem; }
.gwg-kpis span[b-q1qydflfss] { color: var(--text-dim); font-size: .72rem; }

.gwg-verdict[b-q1qydflfss] {
    margin: 12px 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

.gwg-recommend[b-q1qydflfss],
.gwg-signals[b-q1qydflfss] {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gwg-recommend li[b-q1qydflfss] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 3px;
}

.gwg-recommend small[b-q1qydflfss] {
    grid-column: 2;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.45;
}

.gwg-tag[b-q1qydflfss] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.gwg-set[b-q1qydflfss] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.gwg-set img[b-q1qydflfss] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.gwg-spec[b-q1qydflfss] {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.gwg-note[b-q1qydflfss] {
    margin: 9px 0 0;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.5;
}

.gwg-stats[b-q1qydflfss] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
}

.gwg-stat[b-q1qydflfss] {
    display: grid;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--bg);
}

.gwg-stat span[b-q1qydflfss] { color: var(--text-dim); font-size: .74rem; }
.gwg-stat strong[b-q1qydflfss] { font-size: 1rem; }
.gwg-stat small[b-q1qydflfss] { color: var(--text-dim); font-size: .72rem; }

.gwg-table[b-q1qydflfss] {
    display: grid;
    gap: 6px;
}

.gwg-row[b-q1qydflfss] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(60px, 1fr) 44px auto;
    align-items: center;
    gap: 9px;
    font-size: .86rem;
}

.gwg-row > span:first-child[b-q1qydflfss] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gwg-row strong[b-q1qydflfss] { text-align: right; }
.gwg-row small[b-q1qydflfss] { color: var(--text-dim); font-size: .74rem; white-space: nowrap; }

.gwg-bar[b-q1qydflfss] {
    height: 8px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
}

.gwg-bar i[b-q1qydflfss] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.gwg-signals li[b-q1qydflfss] {
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--bg);
    font-size: .86rem;
    line-height: 1.5;
}

.gwg-method p[b-q1qydflfss] {
    margin: 0;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .gwg-card[b-q1qydflfss] { padding: 12px; }
    .gwg-kpis[b-q1qydflfss] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gwg-row[b-q1qydflfss] {
        grid-template-columns: minmax(0, 1fr) 44px;
        row-gap: 3px;
    }
    .gwg-row .gwg-bar[b-q1qydflfss] { grid-column: 1 / -1; order: 3; }
    .gwg-row small[b-q1qydflfss] { grid-column: 1 / -1; order: 4; }
}
/* /Components/GuildWarSetPicker.razor.rz.scp.css */
/* 시뮬레이터 길드전 탭 '대표 대진' 검색. 색은 app.css 테마 변수(다크·라이트)만 쓴다. */
.gws[b-jz4xseyrx7] {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gws-head[b-jz4xseyrx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-bottom: 8px;
}

.gws-title[b-jz4xseyrx7] {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
}

.gws-sub[b-jz4xseyrx7] {
    font-size: .8rem;
    color: var(--text-dim);
}

/* 검색칸 — 목록은 칸 바로 아래에 겹쳐 뜬다 */
.gws-box[b-jz4xseyrx7] {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 720px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
}

.gws-box:focus-within[b-jz4xseyrx7] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.gws-box.open[b-jz4xseyrx7] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gws-icon[b-jz4xseyrx7] {
    flex: 0 0 auto;
    margin-left: 12px;
    color: var(--text-dim);
}

.gws-input[b-jz4xseyrx7] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 8px 0 10px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
}

.gws-input[b-jz4xseyrx7]::placeholder {
    color: var(--text-dim);
    opacity: .8;
}

.gws-clear[b-jz4xseyrx7] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.gws-clear:hover[b-jz4xseyrx7] {
    background: var(--tab-hover);
    color: var(--text);
}

.gws-list[b-jz4xseyrx7] {
    position: absolute;
    top: 100%;
    left: -1.5px;
    right: -1.5px;
    z-index: 40;
    max-height: min(420px, 60vh);
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 1.5px solid var(--accent);
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

.gws-item[b-jz4xseyrx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.gws-item.active[b-jz4xseyrx7] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.gws-faces[b-jz4xseyrx7] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.gws-team[b-jz4xseyrx7] {
    display: inline-flex;
    gap: 2px;
}

.gws-team img[b-jz4xseyrx7],
.gws-noface[b-jz4xseyrx7] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    object-fit: cover;
}

.gws-noface[b-jz4xseyrx7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: .62rem;
}

.gws-vs[b-jz4xseyrx7] {
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.gws-info[b-jz4xseyrx7] {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    min-width: 0;
}

.gws-names[b-jz4xseyrx7] {
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.gws-names i[b-jz4xseyrx7],
.gws-chip i[b-jz4xseyrx7] {
    margin: 0 3px;
    color: var(--text-dim);
    font-style: normal;
    font-weight: 600;
    font-size: .78em;
}

.gws-meta[b-jz4xseyrx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--text-dim);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.gws-badge[b-jz4xseyrx7] {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #f0a020 22%, transparent);
    color: #f2b544;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

html[data-theme="light"] .gws-badge[b-jz4xseyrx7] {
    color: #8a5300;
}

.gws-badge-order[b-jz4xseyrx7] {
    background: color-mix(in srgb, #2dd4bf 20%, transparent);
    color: #5eead4;
}

html[data-theme="light"] .gws-badge-order[b-jz4xseyrx7] {
    color: #0f6e63;
}

.gws-norecord[b-jz4xseyrx7] {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim) 18%, transparent);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.gws-empty[b-jz4xseyrx7],
.gws-more[b-jz4xseyrx7] {
    padding: 10px 10px;
    color: var(--text-dim);
    font-size: .84rem;
}

.gws-more[b-jz4xseyrx7] {
    padding: 8px 10px 6px;
    border-top: 1px dashed var(--border);
    font-size: .76rem;
}

/* 입력이 비었을 때 많이 나온 대진 칩 */
.gws-chips[b-jz4xseyrx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.gws-chips-label[b-jz4xseyrx7] {
    color: var(--text-dim);
    font-size: .76rem;
    margin-right: 2px;
}

.gws-chip[b-jz4xseyrx7] {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.gws-chip:hover[b-jz4xseyrx7] {
    border-color: var(--accent);
    color: var(--accent);
}

.gws-status[b-jz4xseyrx7] {
    margin: 8px 0 0;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .gws[b-jz4xseyrx7] {
        padding: 10px;
    }

    .gws-input[b-jz4xseyrx7] {
        height: 42px;
        font-size: 16px;   /* iOS 가 입력칸을 눌렀을 때 화면을 키우지 않게 */
    }

    .gws-team img[b-jz4xseyrx7],
    .gws-noface[b-jz4xseyrx7] {
        width: 26px;
        height: 26px;
    }

    .gws-chip[b-jz4xseyrx7] {
        font-size: .76rem;
    }
}
/* /Components/GuildWarSetupCard.razor.rz.scp.css */
/* 길드전 세부 세팅 카드 — 방어 덱·공격 공략 카드 공용. Pages/GuildWarDefenseSetup.razor.css 에서 옮겼다. */

.gwd-portrait[b-qqalujs9h5] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg);
    vertical-align: middle;
}

.gwd-portrait.tiny[b-qqalujs9h5] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.gwd-portrait.missing[b-qqalujs9h5] {
    display: inline-grid;
    place-items: center;
    color: var(--text-dim);
    font-weight: 700;
    font-size: .8rem;
}

.gwd-condition[b-qqalujs9h5] {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
}

.gwd-ring-chip[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 3px;
    border-radius: 999px;
    background: color-mix(in srgb, #f5b642 20%, transparent);
    color: #f0c46a;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gwd-ring-chip img[b-qqalujs9h5] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gwd-pos[b-qqalujs9h5] {
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
}

.gwd-pos.back[b-qqalujs9h5] {
    background: color-mix(in srgb, #4f8cff 22%, transparent);
    color: #7fb0ff;
}

.gwd-pos.front[b-qqalujs9h5] {
    background: color-mix(in srgb, #ff7a59 22%, transparent);
    color: #ff9b7f;
}

/* ---------------------------------------------------------------- 세부 세팅 카드(진형·배치도 / 영웅마다 세로 카드) */
/* N·N-1 카드가 한 줄에 나란히 서도록 넓이는 다른 카드와 같다. 카드 폭(컨테이너)이 넓으면 영웅 셋을 나란히, 좁으면 위아래로 쌓는다.
   영웅 카드 위쪽은 게임 스킬 예약 화면(둥근 초상 옆 스킬 세 칸, 순서 있는 칸에 '예약 N'), 배치도는 게임 방어팀 목록 모양. */
.gwd-setup-wrap[b-qqalujs9h5] {
    container-type: inline-size;
    --gwd-hl: #f0a14a;           /* 맞출 수치 강조(게임 창의 주황 숫자) */
}

html[data-theme="light"] .gwd-setup-wrap[b-qqalujs9h5] {
    --gwd-hl: #c96a12;
}

.gwd-setup[b-qqalujs9h5] {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.gwd-setup-head[b-qqalujs9h5] {
    display: grid;
    justify-items: start;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
}

.gwd-setup-top[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.gwd-setup-top .gwd-condition[b-qqalujs9h5] {
    margin-bottom: 0;
}

/* 속공 순서 — 게임 '팀 속공' 아이콘(잎 모양 초상 사이에 굵은 꺾쇠) */
.gwd-speed[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}

.gwd-speed i[b-qqalujs9h5] {
    margin-right: 2px;
    color: var(--text-dim);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
}

.gwd-speed b[b-qqalujs9h5] {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.gwd-portrait.speed[b-qqalujs9h5] {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, #c9a76a 70%, var(--border));
    border-radius: 11px 3px;     /* 잎 모양 */
}

.gwd-setup-formation[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 800;
}

.gwd-setup-formation img[b-qqalujs9h5] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.gwd-setup-line[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gwd-setup-key[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .8rem;
}

.gwd-setup-pet img[b-qqalujs9h5] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    object-fit: cover;
}

/* 배치도 — 다섯 칸, 위 후열 줄·아래 전열 줄, 오른쪽에 펫 */
.gwd-place[b-qqalujs9h5] {
    display: flex;
    justify-self: stretch;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}

.gwd-place-board[b-qqalujs9h5] {
    position: relative;
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 420px;
    height: 92px;
    --lanes: calc(100% - 38px);  /* 오른쪽 끝 '후열·전열' 표시 자리를 뺀 폭 */
}

.gwd-lane[b-qqalujs9h5] {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
}

.gwd-lane.back[b-qqalujs9h5] {
    top: 30px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #e07a7a 55%, transparent));
}

.gwd-lane.front[b-qqalujs9h5] {
    top: 66px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #7a9ee0 55%, transparent));
}

.gwd-lane i[b-qqalujs9h5] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface);
    font-size: .62rem;
    font-style: normal;
    font-weight: 800;
}

.gwd-lane.back i[b-qqalujs9h5] {
    border: 1px solid color-mix(in srgb, #e07a7a 70%, transparent);
    color: #ff9b8f;
}

.gwd-lane.front i[b-qqalujs9h5] {
    border: 1px solid color-mix(in srgb, #7a9ee0 70%, transparent);
    color: #8fb4ff;
}

html[data-theme="light"] .gwd-lane.back i[b-qqalujs9h5] {
    color: #c0453a;
}

html[data-theme="light"] .gwd-lane.front i[b-qqalujs9h5] {
    color: #2f63c4;
}

.gwd-place-hero[b-qqalujs9h5],
.gwd-place-empty[b-qqalujs9h5] {
    position: absolute;
    left: calc((var(--col) - .5) * var(--lanes) / 5);
    transform: translateX(-50%);
}

.gwd-place-hero.back[b-qqalujs9h5] {
    top: 4px;
}

.gwd-place-hero.front[b-qqalujs9h5] {
    top: 42px;
}

.gwd-portrait.seat[b-qqalujs9h5] {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* 빈 칸은 그 진형에서 그 칸이 서는 줄에 — 초상(46px, 후열 top 4·전열 top 42)과 가운데를 맞춘다 */
.gwd-place-empty[b-qqalujs9h5] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-dim) 18%, transparent);
}

.gwd-place-empty.back[b-qqalujs9h5] {
    top: 7px;
}

.gwd-place-empty.front[b-qqalujs9h5] {
    top: 45px;
}

.gwd-place-pet[b-qqalujs9h5] {
    display: grid;
    justify-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.gwd-place-pet img[b-qqalujs9h5] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.gwd-place-pet small[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 700;
}

/* 영웅 세로 카드 — 기본은 셋 나란히(카드 폭이 좁으면 아래 컨테이너 규칙으로 쌓는다) */
.gwd-setup-heroes[b-qqalujs9h5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 8px;
}

/* 공성전(Columns=5): 넓으면 다섯 장을 한 줄에. 카드 폭이 좁으면 셋씩 줄바꿈해 아래 좁은 카드 규칙과 같이 간다(다섯이면 장비 네 칸이 카드를 넘는다). */
.cols-5 .gwd-setup-heroes[b-qqalujs9h5] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@container (max-width: 720px) {
    .cols-5 .gwd-setup-heroes[b-qqalujs9h5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gwd-setup-col[b-qqalujs9h5] {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;  /* 세 카드의 같은 줄이 같은 높이 — 스탯·반지·전용장비 줄이 가로로 맞는다 */
    row-gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.gwd-col-top[b-qqalujs9h5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 4px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.gwd-col-face[b-qqalujs9h5] {
    display: grid;
    align-self: start;      /* 이름이 두 줄인 칸('카마도 탄지로')이 있어도 세 칸의 초상·이름 줄이 같은 높이 */
    justify-items: center;
    gap: 3px;
    min-width: 0;
}

.gwd-portrait.round[b-qqalujs9h5] {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, #c9a76a 60%, var(--border));
}

.gwd-setup-name[b-qqalujs9h5] {
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.gwd-sk-stack[b-qqalujs9h5] {
    display: grid;
    gap: 7px;
}

.gwd-sk[b-qqalujs9h5] {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
}

.gwd-sk img[b-qqalujs9h5] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.gwd-sk.on[b-qqalujs9h5] {
    border-color: #f0b84a;
    box-shadow: 0 0 0 1px #f0b84a, 0 0 8px color-mix(in srgb, #f0b84a 35%, transparent);
}

.gwd-sk-res[b-qqalujs9h5] {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 4px;
    border-radius: 999px;
    background: #1f2c45;
    color: #e3ecff;
    font-size: .56rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* 세트 그림·이름 — 장비 네 칸 위에 한 번만 */
.gwd-col-sets[b-qqalujs9h5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.gwd-setup-set[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.gwd-setup-set img[b-qqalujs9h5] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.gwd-setup-or[b-qqalujs9h5],
.gwd-setup-slash[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .62rem;
}

.gwd-col-sets[b-qqalujs9h5] {
    flex-wrap: wrap;
    row-gap: 3px;
}

/* 무기1·무기2·방어구1·방어구2 */
.gwd-setup-items[b-qqalujs9h5] {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;      /* 무기1·무기2 가 왼쪽 열, 방어구1·방어구2 가 오른쪽 열 → 줄로 보면 무기1·방어구1 / 무기2·방어구2 */
    grid-auto-columns: minmax(0, 54px);
    justify-content: center;
    gap: 5px;
}

.gwd-setup-item[b-qqalujs9h5] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    aspect-ratio: 1;
    min-width: 0;
    padding: 2px;
    /* 10-11 사용자: 회색 말고 세트 아이콘(추적자·암살자·성기사)처럼 붉은 바탕 — 두 테마 같은 색 */
    border: 1px solid #9a3060;
    border-radius: 9px;
    background: linear-gradient(180deg, #5c1b3c, #3a0f26);
    color: #fff;
}

.gwd-setup-item img[b-qqalujs9h5] {
    width: 15px;
    height: 15px;
    opacity: .95;
}

.gwd-item-copy[b-qqalujs9h5] {
    display: grid;
    justify-items: center;
    min-width: 0;
    line-height: 1.15;
}

.gwd-item-copy small[b-qqalujs9h5] {
    color: #f3b9d6;
    font-size: .54rem;
    font-weight: 700;
    white-space: nowrap;
}

.gwd-item-copy b[b-qqalujs9h5] {
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

/* 스탯·반지·전용장비 — 좁은 열이라 이름표를 위에, 내용을 아래에 */
.gwd-col-row[b-qqalujs9h5] {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    font-size: .82rem;
}

.gwd-col-label[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 700;
}

.gwd-col-body[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    min-width: 0;
}

.gwd-setup-stats .gwd-col-body[b-qqalujs9h5] {
    display: grid;
    justify-items: start;
    gap: 2px;
}

.gwd-stat[b-qqalujs9h5] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.gwd-setup-stats i[b-qqalujs9h5] {
    font-style: normal;
    font-weight: 700;
}

.gwd-setup-stats b[b-qqalujs9h5] {
    color: var(--gwd-hl);
    font-weight: 800;
}

.gwd-setup-stats small[b-qqalujs9h5],
.gwd-setup-note[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .72rem;
}

.gwd-setup-rings .gwd-ring-chip[b-qqalujs9h5] {
    gap: 4px;
    padding: 2px 10px 2px 3px;
    font-size: .84rem;
}

.gwd-setup-rings .gwd-ring-chip img[b-qqalujs9h5] {
    width: 26px;
    height: 26px;
}

/* 금지 반지: 같은 칩을 붉게, 반지 그림 위에 X */
.gwd-setup-rings .gwd-ring-chip.ban[b-qqalujs9h5] {
    border: 1px solid color-mix(in srgb, #e05d67 45%, var(--border));
    background: color-mix(in srgb, #e05d67 12%, transparent);
    color: #ff8a93;
}

.gwd-ring-x[b-qqalujs9h5] {
    position: relative;
    display: inline-flex;
}

.gwd-ring-x img[b-qqalujs9h5] {
    filter: grayscale(.6);
    opacity: .75;
}

.gwd-ring-x[b-qqalujs9h5]::before,
.gwd-ring-x[b-qqalujs9h5]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 3px;
    border-radius: 2px;
    background: #ff4d5a;
    box-shadow: 0 0 2px rgba(0, 0, 0, .6);
}

.gwd-ring-x[b-qqalujs9h5]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.gwd-ring-x[b-qqalujs9h5]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

html[data-theme="light"] .gwd-setup-rings .gwd-ring-chip[b-qqalujs9h5] {
    background: color-mix(in srgb, #f5b642 26%, transparent);
    color: #8a5a00;
}

html[data-theme="light"] .gwd-setup-rings .gwd-ring-chip.ban[b-qqalujs9h5] {
    color: #c0353f;
}

.gwd-setup-pick[b-qqalujs9h5] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 5px;
}

.gwd-setup-dot[b-qqalujs9h5] {
    color: var(--text-dim);
}

.gwd-setup-rank[b-qqalujs9h5] {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gwd-hl) 18%, transparent);
    color: var(--gwd-hl);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.gwd-setup-opt[b-qqalujs9h5] {
    font-weight: 700;
    white-space: nowrap;
}

/* 폰(화면 640px 이하)에서 고치는 중인 카드: 영웅 카드를 위아래로 쌓고 글씨·그림을 키운다(우선순위 목록을 고르기 쉽게).
   보기 화면은 폰에서도 아래 작은 모양으로 세 영웅을 한 줄에 둔다(10-05 사용자). */
@media (max-width: 640px) {
@container (max-width: 470px) {
    /* 조건·진형·속공 — 한 줄에 안 들어가면 속공을 다음 줄로(글자가 세로로 쪼개지지 않게) */
    .editing .gwd-setup-top[b-qqalujs9h5] {
        gap: 6px;
    }

    .editing .gwd-setup-top > *[b-qqalujs9h5] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .editing .gwd-setup-formation[b-qqalujs9h5] {
        padding: 2px 9px 2px 3px;
        font-size: .8rem;
        white-space: nowrap;
    }

    .editing .gwd-setup-formation img[b-qqalujs9h5] {
        width: 20px;
        height: 20px;
    }

    .editing .gwd-speed[b-qqalujs9h5] {
        gap: 3px;
        padding: 2px 8px 2px 6px;
    }

    .editing .gwd-portrait.speed[b-qqalujs9h5] {
        width: 22px;
        height: 22px;
        border-radius: 9px 3px;
    }

    /* 배치도는 카드 폭을 다 쓰고 펫은 그 아래 오른쪽에 작게 — 펫이 옆에 있으면 다섯 칸이 좁아져 초상이 겹쳤다 */
    .editing .gwd-place[b-qqalujs9h5] {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 6px 8px;
    }

    .editing .gwd-place-board[b-qqalujs9h5] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .editing .gwd-place-pet[b-qqalujs9h5] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

    .editing .gwd-place-pet img[b-qqalujs9h5] {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .editing .gwd-setup-heroes[b-qqalujs9h5] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .editing .gwd-setup-col[b-qqalujs9h5] {
        grid-row: auto;
        grid-template-rows: none;
        padding: 8px;
        row-gap: 10px;
    }

    .editing .gwd-col-label[b-qqalujs9h5] {
        padding-top: 2px;
    }

    /* 초상 옆 스킬 칸은 가로로 — 세로로 쌓으면 머리 칸만 화면 반을 먹었다 */
    .editing .gwd-col-top[b-qqalujs9h5] {
        gap: 14px;
        padding: 8px 8px 15px;
    }

    .editing .gwd-sk-stack[b-qqalujs9h5] {
        grid-auto-flow: column;
    }

    .editing .gwd-portrait.round[b-qqalujs9h5] {
        width: 60px;
        height: 60px;
    }

    .editing .gwd-setup-name[b-qqalujs9h5] {
        font-size: .9rem;
    }

    .editing .gwd-sk[b-qqalujs9h5] {
        width: 38px;
        height: 38px;
    }

    .editing .gwd-sk-res[b-qqalujs9h5] {
        font-size: .62rem;
        padding: 1px 6px;
    }

    .editing .gwd-setup-set[b-qqalujs9h5] {
        font-size: .86rem;
    }

    .editing .gwd-setup-items[b-qqalujs9h5] {
        grid-auto-columns: minmax(0, 64px);
    }

    .editing .gwd-setup-item img[b-qqalujs9h5] {
        width: 18px;
        height: 18px;
    }

    .editing .gwd-item-copy small[b-qqalujs9h5] {
        font-size: .6rem;
    }

    .editing .gwd-item-copy b[b-qqalujs9h5] {
        font-size: .86rem;
    }

    .editing .gwd-col-row[b-qqalujs9h5] {
        grid-template-columns: 4.6em minmax(0, 1fr);
        align-items: start;
        gap: 0 8px;
        font-size: .88rem;
    }

    /* 쌓인 카드에선 줄 맞출 일이 없으니 빈 줄(주옵 없음·스탯 없음 등)은 자리도 차지하지 않는다 */
    .editing .gwd-col-row:not(:has(*))[b-qqalujs9h5],
    .editing .gwd-col-sets:not(:has(*))[b-qqalujs9h5],
    .editing .gwd-setup-items:not(:has(*))[b-qqalujs9h5] {
        display: none;
    }

    .editing .gwd-col-label[b-qqalujs9h5] {
        font-size: .78rem;
    }
}
}

/* 카드가 좁을 때(길드전 방어 덱의 1·1-1·1-2 처럼 한 줄에 카드 셋, 폰): 세 영웅을 한 줄에 둔 채 그림·여백을 줄인다.
   넓은 화면에서 고치는 중인 카드는 줄 전체 폭으로 펼쳐 이 규칙에 걸리지 않고, 폰에서는 위 .editing 규칙이 이긴다. */
@container (max-width: 470px) {
    .gwd-setup-heroes[b-qqalujs9h5] {
        gap: 0 4px;
    }

    .gwd-setup-col[b-qqalujs9h5] {
        row-gap: 6px;
        padding: 5px;
        border-radius: 10px;
    }

    .gwd-col-top[b-qqalujs9h5] {
        gap: 4px;
        padding: 6px 2px 11px;
    }

    .gwd-portrait.round[b-qqalujs9h5] {
        width: 64px;
        height: 64px;
        border-radius: 10px;
    }

    .gwd-setup-name[b-qqalujs9h5] {
        font-size: .72rem;
        white-space: normal;      /* '카마도 탄지로'처럼 긴 이름은 두 줄 — 한 줄이면 스킬 칸이 카드 밖으로 밀렸다 */
        word-break: keep-all;
        text-align: center;
        line-height: 1.15;
    }

    .gwd-sk-stack[b-qqalujs9h5] {
        gap: 6px;
    }

    .gwd-sk[b-qqalujs9h5] {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

    .gwd-sk img[b-qqalujs9h5] {
        border-radius: 4px;
    }

    .gwd-sk-res[b-qqalujs9h5] {
        bottom: -6px;
        padding: 0 3px;
        font-size: .5rem;
    }

    .gwd-setup-set[b-qqalujs9h5] {
        font-size: .66rem;
    }

    .gwd-setup-set img[b-qqalujs9h5] {
        width: 13px;
        height: 13px;
    }

    .gwd-setup-items[b-qqalujs9h5] {
        grid-auto-columns: minmax(0, 42px);
        gap: 3px;
    }

    .gwd-setup-item[b-qqalujs9h5] {
        padding: 1px;
        border-radius: 7px;
    }

    .gwd-setup-item img[b-qqalujs9h5] {
        width: 11px;
        height: 11px;
    }

    .gwd-item-copy small[b-qqalujs9h5] {
        font-size: .46rem;
    }

    .gwd-item-copy b[b-qqalujs9h5] {
        font-size: .64rem;
    }

    .gwd-col-row[b-qqalujs9h5] {
        font-size: .72rem;
    }

    .gwd-col-label[b-qqalujs9h5] {
        font-size: .62rem;
    }

    .gwd-setup-stats small[b-qqalujs9h5],
    .gwd-setup-note[b-qqalujs9h5] {
        font-size: .62rem;
    }

    .gwd-setup-rings .gwd-ring-chip[b-qqalujs9h5] {
        gap: 2px;
        padding: 1px 6px 1px 2px;
        font-size: .7rem;
    }

    .gwd-setup-rings .gwd-ring-chip img[b-qqalujs9h5] {
        width: 18px;
        height: 18px;
    }
}

/* 아주 좁은 카드(360px 폰): 배치도 칸을 줄인다 */
@container (max-width: 340px) {
    .gwd-place-board[b-qqalujs9h5] {
        min-width: 170px;
    }

    .gwd-portrait.seat[b-qqalujs9h5] {
        width: 38px;
        height: 38px;
    }

    .gwd-place-hero.front[b-qqalujs9h5] {
        top: 46px;
    }

    .gwd-place-empty[b-qqalujs9h5] {
        width: 34px;
        height: 34px;
    }

    .gwd-place-empty.back[b-qqalujs9h5] {
        top: 6px;
    }

    .gwd-place-empty.front[b-qqalujs9h5] {
        top: 48px;
    }

    .gwd-place-pet img[b-qqalujs9h5] {
        width: 40px;
        height: 40px;
    }
}


/* ---------------------------------------------------------------- 공략 편집(Edit) — 같은 카드 위에서 고친다 */
.editing .gwd-setup-col[b-qqalujs9h5] {
    grid-row: auto;
    grid-template-rows: none;
    align-content: start;
}

/* 편집 중엔 이름 아래 속공 고르기가 머리 칸을 넓혀 좁은 폰에서 스킬 칸이 카드 밖으로 밀렸다 — 넘치면 스킬 칸을 아래 줄로 */
.editing .gwd-col-top[b-qqalujs9h5] {
    flex-wrap: wrap;
    row-gap: 10px;
}

.editing .gwd-setup-col[b-qqalujs9h5],
.editing .gwd-gear-edit[b-qqalujs9h5] {
    min-width: 0;
    overflow-wrap: anywhere;
}

button.gwd-sk[b-qqalujs9h5],
button.gwd-setup-item[b-qqalujs9h5] {
    color: inherit;
    font: inherit;
    cursor: pointer;
}

button.gwd-sk[b-qqalujs9h5] {
    padding: 0;
}

button.gwd-sk:not(.on)[b-qqalujs9h5] {
    border-style: dashed;
}

button.gwd-setup-item[b-qqalujs9h5] {
    position: relative;
}

button.gwd-setup-item.on[b-qqalujs9h5] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.gwd-edit-setbtn[b-qqalujs9h5],
.gwd-set-pick button[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}

.gwd-edit-setbtn img[b-qqalujs9h5],
.gwd-set-pick img[b-qqalujs9h5] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gwd-edit-setbtn.on[b-qqalujs9h5],
.gwd-set-pick button.on[b-qqalujs9h5] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.gwd-set-pick[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px;
    border: 1px dashed var(--accent);
    border-radius: 9px;
}

.gwd-edit-speed[b-qqalujs9h5] {
    max-width: 100%;
    margin-top: 2px;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .7rem;
}

.gwd-gear-edit[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 6px 8px;
    border: 1px dashed var(--accent);
    border-radius: 9px;
    font-size: .78rem;
}

.gwd-gear-edit label[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
    font-weight: 700;
}

.gwd-gear-edit select[b-qqalujs9h5] {
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.gwd-edit-close[b-qqalujs9h5],
.gwd-prio-add[b-qqalujs9h5] {
    padding: 2px 8px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.gwd-prio[b-qqalujs9h5] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gwd-prio-row[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.gwd-prio-on[b-qqalujs9h5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 3px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.gwd-prio-on b[b-qqalujs9h5] {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .66rem;
    white-space: nowrap;
}

.gwd-prio-val[b-qqalujs9h5] {
    width: 7.5em;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .76rem;
}

.gwd-prio-more[b-qqalujs9h5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gwd-prio-ban[b-qqalujs9h5] {
    color: #ff8a93;
    font-size: .68rem;
    font-weight: 800;
}

/* 아주 좁은 카드(360px 폰, 카드 316px): 세 영웅 머리 칸이 넘치지 않게 한 번 더 줄인다 */
@container (max-width: 330px) {
    .gwd-setup-col[b-qqalujs9h5] {
        padding: 4px;
    }

    .gwd-col-top[b-qqalujs9h5] {
        gap: 2px;
        padding: 5px 1px 10px;
    }

    .gwd-portrait.round[b-qqalujs9h5] {
        width: 52px;
        height: 52px;
        border-radius: 9px;
    }

    .gwd-sk[b-qqalujs9h5] {
        width: 19px;
        height: 19px;
    }

    .gwd-setup-items[b-qqalujs9h5] {
        grid-auto-columns: minmax(0, 40px);
    }
}

.gwd-prio-max[b-qqalujs9h5] {
    color: var(--text-dim);
    font-size: .7rem;
}
/* /Components/HeroSearchFilters.razor.rz.scp.css */
.hero-search-filters[b-crqynta1k2] {
    display: grid;
    gap: 9px;
    min-width: 0;
    color: var(--text);
}

.search-filter-row[b-crqynta1k2],
.growth-options[b-crqynta1k2],
.effect-group[b-crqynta1k2] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.search-filter-row > legend[b-crqynta1k2],
.growth-options > legend[b-crqynta1k2],
.effect-group > legend[b-crqynta1k2] {
    float: none;
    width: auto;
    margin: 0 0 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-dim);
}

.search-chip-list[b-crqynta1k2],
.search-extra-row[b-crqynta1k2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.search-chip[b-crqynta1k2],
.effect-option[b-crqynta1k2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 8px 4px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
}

.search-chip:hover[b-crqynta1k2],
.effect-option:hover[b-crqynta1k2] {
    background: var(--tab-hover);
}

.search-chip.active[b-crqynta1k2],
.effect-option.active[b-crqynta1k2] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.hero-search-filters input[type="checkbox"][b-crqynta1k2],
.hero-search-filters input[type="radio"][b-crqynta1k2] {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.search-chip > img[b-crqynta1k2],
.effect-option > img[b-crqynta1k2] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
}

.filter-reset[b-crqynta1k2] {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .71rem;
    line-height: 1.4;
}

.filter-reset:not(:disabled):hover[b-crqynta1k2] {
    color: var(--accent);
    border-color: var(--accent);
}

.filter-reset:disabled[b-crqynta1k2] {
    opacity: .45;
}

.reset-all[b-crqynta1k2] { margin-left: auto; }
.detailed-toggle[b-crqynta1k2] { color: var(--accent); }

.detailed-search-panel[b-crqynta1k2] {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    min-width: 0;
}

.detailed-search-toolbar[b-crqynta1k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.effect-category[b-crqynta1k2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
}

.effect-category select[b-crqynta1k2] {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.growth-options[b-crqynta1k2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.growth-options label[b-crqynta1k2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
}

.search-help[b-crqynta1k2] {
    margin: 8px 0 10px;
    color: var(--text-dim);
    font-size: .7rem;
    line-height: 1.5;
}

.effect-groups[b-crqynta1k2] {
    display: grid;
    gap: 15px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
}

.effect-group > legend[b-crqynta1k2] { color: var(--text); }

.effect-grid[b-crqynta1k2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.effect-option[b-crqynta1k2] {
    border-radius: 6px;
    padding: 7px;
    min-width: 0;
    font-weight: 400;
}

.effect-option > span[b-crqynta1k2] { overflow-wrap: anywhere; }

@media (max-width: 650px) {
    .effect-grid[b-crqynta1k2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detailed-search-panel[b-crqynta1k2] { padding: 9px; }
    .effect-groups[b-crqynta1k2] { max-height: 260px; }
    .effect-category[b-crqynta1k2] { flex-wrap: wrap; }
}
/* /Components/UpcomingHeroCards.razor.rz.scp.css */
.upcoming-heroes[b-3mt8x8gj1t] {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.upcoming-head[b-3mt8x8gj1t] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.upcoming-head h2[b-3mt8x8gj1t] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.upcoming-date[b-3mt8x8gj1t] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    font-size: .8rem;
    font-weight: 700;
}

.upcoming-note[b-3mt8x8gj1t] {
    margin: 6px 0 12px;
    color: var(--text-dim);
    font-size: .88rem;
}

.upcoming-grid[b-3mt8x8gj1t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 12px;
}

.upcoming-card[b-3mt8x8gj1t] {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.upcoming-top[b-3mt8x8gj1t] {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.upcoming-portrait[b-3mt8x8gj1t] {
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    border-radius: 10px;
    object-fit: cover;
}

.upcoming-copy[b-3mt8x8gj1t] {
    min-width: 0;
}

.upcoming-copy small[b-3mt8x8gj1t] {
    color: var(--text-dim);
}

.upcoming-copy h3[b-3mt8x8gj1t] {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
}

.upcoming-copy p[b-3mt8x8gj1t] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .82rem;
}

.upcoming-role[b-3mt8x8gj1t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
}

.upcoming-role img[b-3mt8x8gj1t] {
    width: 18px;
    height: 18px;
}

.upcoming-stats[b-3mt8x8gj1t] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.upcoming-stats th[b-3mt8x8gj1t],
.upcoming-stats td[b-3mt8x8gj1t] {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    text-align: right;
}

.upcoming-stats th:first-child[b-3mt8x8gj1t] {
    text-align: left;
    color: var(--text-dim);
    font-weight: 600;
}

.upcoming-stats thead th[b-3mt8x8gj1t] {
    color: var(--text-dim);
    font-weight: 700;
}

.upcoming-skills[b-3mt8x8gj1t] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.upcoming-skills li[b-3mt8x8gj1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.upcoming-skills img[b-3mt8x8gj1t] {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 6px;
}

.upcoming-skills span[b-3mt8x8gj1t] {
    display: grid;
    min-width: 0;
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.upcoming-skills small[b-3mt8x8gj1t] {
    color: var(--text-dim);
    font-size: .74rem;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* 레이아웃 스타일은 wwwroot/css/app.css 의 전역 규칙(.app-header, .app-body 등)으로 관리.
   NavLink가 렌더하는 <a>에는 scope 속성이 안 붙어 scoped css가 안 먹으므로 전역에 둔다. */
/* /Pages/Archive.razor.rz.scp.css */
.archive-page[b-tzggqn07p0] {
    display: grid;
    gap: 14px;
    max-width: 1320px;
    margin: 0 auto;
    color: var(--text);
}

/* ---------------------------------------------------------------- 머리 */
.archive-heading[b-tzggqn07p0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.archive-heading h1[b-tzggqn07p0] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.archive-lede[b-tzggqn07p0] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.archive-meta[b-tzggqn07p0] {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    color: var(--text-dim);
    font-size: .84rem;
}

.archive-message[b-tzggqn07p0] {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .88rem;
}

.archive-message.error[b-tzggqn07p0] {
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
    color: #e05d67;
}

/* ---------------------------------------------------------------- 본문 */
.archive-section[b-tzggqn07p0] {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.archive-intro[b-tzggqn07p0] {
    margin: 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.55;
}

.drop-block[b-tzggqn07p0] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.drop-head h3[b-tzggqn07p0] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.drop-head p[b-tzggqn07p0] {
    margin: 3px 0 0;
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.5;
}

/* 오른쪽에 열이 더 있으면 가장자리에 그림자가 보인다(끝까지 밀면 사라짐) */
.drop-scroll[b-tzggqn07p0] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        linear-gradient(to left, var(--surface) 40%, transparent) right / 36px 100% no-repeat local,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent) right / 14px 100% no-repeat scroll,
        var(--surface);
}

html[data-theme="light"] .drop-scroll[b-tzggqn07p0] {
    background:
        linear-gradient(to left, var(--surface) 40%, transparent) right / 36px 100% no-repeat local,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), transparent) right / 14px 100% no-repeat scroll,
        var(--surface);
}

.drop-table[b-tzggqn07p0] {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.drop-table th[b-tzggqn07p0],
.drop-table td[b-tzggqn07p0] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}

.drop-table tbody tr:last-child td[b-tzggqn07p0] { border-bottom: 0; }

.drop-table thead th[b-tzggqn07p0] {
    background: var(--header-bg);
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
    vertical-align: bottom;
}

.drop-table thead th.group[b-tzggqn07p0] {
    color: var(--text);
    border-left: 1px solid var(--border);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
}

.drop-table tbody tr:hover td[b-tzggqn07p0] { background: var(--tab-hover); }

/* 긴 글자 칸(장비·재료)은 띄어쓰기 자리에서만 줄을 바꾼다 */
.drop-table td.kind-text[b-tzggqn07p0] {
    white-space: normal;
    min-width: 5.5em;
}

.drop-table td.empty[b-tzggqn07p0] {
    color: var(--text-dim);
    opacity: .45;
}

/* 첫 열(단계·보스)은 옆으로 밀어도 보이게 고정 */
.drop-table th:first-child[b-tzggqn07p0],
.drop-table td:first-child[b-tzggqn07p0] {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border);
    font-weight: 700;
}

.drop-table td:first-child[b-tzggqn07p0] { background: var(--surface); }
.drop-table thead th:first-child[b-tzggqn07p0] { background: var(--header-bg); }

.archive-notes[b-tzggqn07p0] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 12px 14px 12px 30px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .86rem;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .archive-heading[b-tzggqn07p0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .archive-meta[b-tzggqn07p0] { flex-wrap: wrap; }

    .drop-table[b-tzggqn07p0] { font-size: .8rem; }

    .drop-table th[b-tzggqn07p0],
    .drop-table td[b-tzggqn07p0] { padding: 6px 8px; }
}
/* /Pages/BattleRules.razor.rz.scp.css */
.br-page[b-zlarsum2fm] {
    display: grid;
    gap: 14px;
    max-width: 1180px;
    min-width: 0;
    margin: 0 auto;
    color: var(--text);
}

/* ---------------------------------------------------------------- 머리 */
.br-heading[b-zlarsum2fm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 20px;
    flex-wrap: wrap;
}

.br-heading h1[b-zlarsum2fm] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.br-lede[b-zlarsum2fm] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.br-meta[b-zlarsum2fm] {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .84rem;
}

/* ---------------------------------------------------------------- 검색 */
.br-tools[b-zlarsum2fm] {
    display: grid;
    gap: 6px;
}

.br-search[b-zlarsum2fm] {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;          /* 폰에서 16px 아래면 입력할 때 화면이 확대된다 */
}

.br-search[b-zlarsum2fm]::placeholder {
    color: var(--text-dim);
}

.br-search:focus[b-zlarsum2fm] {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.br-count[b-zlarsum2fm] {
    margin: 0;
    color: var(--text-dim);
    font-size: .82rem;
}

.br-message[b-zlarsum2fm] {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .88rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 분류(왼쪽 목록, 폰은 위쪽 버튼 묶음) */
.br-layout[b-zlarsum2fm] {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.br-cats[b-zlarsum2fm] {
    position: sticky;
    top: calc(var(--header-h) + 12px);
    display: grid;
    gap: 2px;
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.br-cat[b-zlarsum2fm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    word-break: keep-all;
}

.br-cat:hover[b-zlarsum2fm] {
    background: var(--tab-hover);
    color: var(--text);
    text-decoration: none;
}

.br-cat.active[b-zlarsum2fm] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 800;
}

.br-cat-count[b-zlarsum2fm] {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim) 16%, transparent);
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 800;
    text-align: center;
}

.br-cat.active .br-cat-count[b-zlarsum2fm] {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
}

/* ---------------------------------------------------------------- 오른쪽 본문 */
.br-main[b-zlarsum2fm] {
    display: grid;
    gap: 12px;
    min-width: 0;
    /* 분류를 바꾸면 이 위치로 스크롤된다. 고정 헤더에 가리지 않게 */
    scroll-margin-top: calc(var(--header-h) + 12px);
}

.br-cat-head h2[b-zlarsum2fm] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    word-break: keep-all;
}

.br-cat-head p[b-zlarsum2fm] {
    margin: 3px 0 0;
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 효과 탭(불굴·즉사·감전 …) */
.br-topics[b-zlarsum2fm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.br-topic-tab[b-zlarsum2fm] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    word-break: keep-all;
}

.br-topic-tab:hover[b-zlarsum2fm] {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.br-topic-tab.active[b-zlarsum2fm] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);   /* 다크 강조색 위 흰 글자는 대비가 낮아 바탕색을 쓴다 */
    font-weight: 800;
}

.br-topic[b-zlarsum2fm] {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--header-h) + 12px);
}

.br-topic-head h3[b-zlarsum2fm] {
    margin: 8px 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    word-break: keep-all;
}

.br-topic-head p[b-zlarsum2fm] {
    margin: 4px 0 0;
    font-size: .95rem;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 함께 보기 */
.br-related[b-zlarsum2fm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.br-related-label[b-zlarsum2fm] {
    margin-right: 2px;
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
}

.br-related-link[b-zlarsum2fm] {
    padding: 3px 10px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    word-break: keep-all;
}

.br-related-link:hover[b-zlarsum2fm] {
    border-color: var(--accent);
    text-decoration: none;
}

/* ---------------------------------------------------------------- 카드 */
.br-rules[b-zlarsum2fm] {
    display: grid;
    /* 넓은 화면은 두 줄, 폰은 한 줄. 360px 폰에서도 카드가 본문 폭을 넘지 않게 최소 폭은 본문 폭까지 */
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 10px;
    align-items: start;
}

.br-card[b-zlarsum2fm] {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.br-card h4[b-zlarsum2fm] {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.br-card p[b-zlarsum2fm],
.br-card li[b-zlarsum2fm] {
    font-size: .92rem;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.br-card p[b-zlarsum2fm] {
    margin: 0;
}

.br-card ul[b-zlarsum2fm] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 1.1em;
}

.br-example[b-zlarsum2fm] {
    display: grid;
    gap: 3px;
    margin-top: 9px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.br-example-tag[b-zlarsum2fm] {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 800;
}

.br-card .br-example p[b-zlarsum2fm] {
    font-size: .88rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- 검색 결과 */
.br-hits[b-zlarsum2fm] {
    display: grid;
    gap: 16px;
}

.br-hit[b-zlarsum2fm] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.br-crumb[b-zlarsum2fm] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    justify-self: start;
    max-width: 100%;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 800;
    text-decoration: none;
    word-break: keep-all;
}

.br-crumb:hover[b-zlarsum2fm] {
    color: var(--accent);
    text-decoration: none;
}

.br-crumb-cat[b-zlarsum2fm] {
    color: var(--text-dim);
    font-size: .86rem;
    font-weight: 700;
}

.br-crumb-sep[b-zlarsum2fm] {
    color: var(--text-dim);
}

/* ---------------------------------------------------------------- 폰·좁은 화면: 분류를 위쪽 버튼 묶음으로 */
@media (max-width: 860px) {
    .br-layout[b-zlarsum2fm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .br-cats[b-zlarsum2fm] {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: 4px;
        max-height: none;
        overflow: visible;
        padding: 6px;
    }

    .br-cat[b-zlarsum2fm] {
        padding: 7px 9px;
        font-size: .86rem;
    }
}

@media (max-width: 640px) {
    .br-heading[b-zlarsum2fm] {
        align-items: flex-start;
    }

    .br-card[b-zlarsum2fm] {
        padding: 11px 12px;
    }

    .br-topic-tab[b-zlarsum2fm] {
        padding: 6px 11px;
        font-size: .86rem;
    }
}
/* /Pages/Feedback.razor.rz.scp.css */
.fb-page[b-nhcr25ydqm] {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text);
}

.fb-heading[b-nhcr25ydqm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fb-heading h1[b-nhcr25ydqm] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.fb-lede[b-nhcr25ydqm] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.fb-new[b-nhcr25ydqm] {
    flex: 0 0 auto;
    margin-top: 6px;
    white-space: nowrap;
}

.fb-card[b-nhcr25ydqm] {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* ---------------------------------------------------------------- 글 쓰기 */
.fb-form[b-nhcr25ydqm] {
    display: grid;
    gap: 10px;
}

.fb-row[b-nhcr25ydqm] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.fb-field[b-nhcr25ydqm] {
    display: grid;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.fb-field > span[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 600;
}

.fb-field > span small[b-nhcr25ydqm] {
    font-weight: 500;
}

.fb-field input[b-nhcr25ydqm],
.fb-field select[b-nhcr25ydqm],
.fb-field textarea[b-nhcr25ydqm],
.fb-admin-unlock input[b-nhcr25ydqm] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
}

.fb-field textarea[b-nhcr25ydqm] {
    resize: vertical;
    line-height: 1.5;
}

.fb-field input:focus[b-nhcr25ydqm],
.fb-field select:focus[b-nhcr25ydqm],
.fb-field textarea:focus[b-nhcr25ydqm],
.fb-admin-unlock input:focus[b-nhcr25ydqm] {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 1px;
}

.fb-actions[b-nhcr25ydqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fb-actions small[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .78rem;
    line-height: 1.45;
    max-width: 640px;
}

.fb-submit[b-nhcr25ydqm],
.fb-ghost[b-nhcr25ydqm],
.fb-danger[b-nhcr25ydqm],
.fb-close[b-nhcr25ydqm] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.fb-submit[b-nhcr25ydqm] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.fb-close[b-nhcr25ydqm] {
    border-color: color-mix(in srgb, #8957e5 60%, var(--border));
    background: color-mix(in srgb, #8957e5 18%, transparent);
    color: #c3a6ff;
}

.fb-submit:disabled[b-nhcr25ydqm],
.fb-ghost:disabled[b-nhcr25ydqm] {
    opacity: .5;
    cursor: default;
}

.fb-danger[b-nhcr25ydqm] {
    border-color: color-mix(in srgb, #e05d67 50%, var(--border));
    color: #ff8a93;
}

.fb-status[b-nhcr25ydqm] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .85rem;
}

.fb-status.success[b-nhcr25ydqm] {
    color: #3fb778;
    border-color: color-mix(in srgb, #3fb778 45%, var(--border));
}

.fb-status.error[b-nhcr25ydqm],
.fb-empty.error[b-nhcr25ydqm],
.fb-inline-error[b-nhcr25ydqm] {
    color: #e05d67;
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
}

.fb-banner[b-nhcr25ydqm] {
    margin-bottom: 16px;
    background: var(--surface);
}

/* ---------------------------------------------------------------- 첨부 고르기 */
.fb-file[b-nhcr25ydqm] {
    width: 100%;
    padding: 7px 9px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-dim);
    font: inherit;
    font-size: .85rem;
}

.fb-file[b-nhcr25ydqm]::file-selector-button {
    margin-right: 10px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.fb-picked[b-nhcr25ydqm] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb-picked li[b-nhcr25ydqm] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .84rem;
}

.fb-picked li.bad .fb-picked-name[b-nhcr25ydqm] {
    text-decoration: line-through;
    color: var(--text-dim);
}

.fb-picked-name[b-nhcr25ydqm] {
    overflow-wrap: anywhere;
}

.fb-picked-size[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .78rem;
}

/* ---------------------------------------------------------------- 첨부 보기 */
.fb-attachments[b-nhcr25ydqm] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fb-att[b-nhcr25ydqm] {
    display: grid;
    gap: 4px;
    margin: 0;
    max-width: 100%;
}

.fb-att img[b-nhcr25ydqm],
.fb-att video[b-nhcr25ydqm] {
    display: block;
    max-width: min(100%, 520px);
    max-height: 340px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #000;
}

.fb-att img[b-nhcr25ydqm] {
    cursor: zoom-in;
    object-fit: contain;
}

.fb-att-wait[b-nhcr25ydqm] {
    display: grid;
    place-items: center;
    width: 220px;
    max-width: 100%;
    height: 120px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: .82rem;
}

.fb-att-wait.error[b-nhcr25ydqm] {
    color: #e05d67;
}

.fb-att figcaption[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 이슈 목록 */
.fb-list[b-nhcr25ydqm] {
    padding: 0;
    overflow: hidden;
}

.fb-tabs[b-nhcr25ydqm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 60%, var(--surface));
    flex-wrap: wrap;
}

.fb-tabs [role="tab"][b-nhcr25ydqm] {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.fb-tabs [role="tab"] b[b-nhcr25ydqm] {
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim) 22%, transparent);
    font-size: .78rem;
}

.fb-tabs [role="tab"].on[b-nhcr25ydqm] {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface);
}

.fb-tabs-spacer[b-nhcr25ydqm] {
    flex: 1 1 auto;
}

.fb-mine-toggle[b-nhcr25ydqm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--text-dim);
    font-size: .84rem;
    cursor: pointer;
}

.fb-tabs .fb-ghost[b-nhcr25ydqm] {
    padding: 5px 11px;
    font-size: .82rem;
}

.fb-empty[b-nhcr25ydqm] {
    margin: 12px;
    padding: 11px 13px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    font-size: .88rem;
}

.fb-issues[b-nhcr25ydqm] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fb-issue + .fb-issue[b-nhcr25ydqm] {
    border-top: 1px solid var(--border);
}

.fb-issue-row[b-nhcr25ydqm] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fb-issue-row:hover[b-nhcr25ydqm],
.fb-issue.open .fb-issue-row[b-nhcr25ydqm] {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.fb-state[b-nhcr25ydqm] {
    font-size: .95rem;
    line-height: 1;
    text-align: center;
}

.fb-state.open[b-nhcr25ydqm] { color: #3fb778; }
.fb-state.closed[b-nhcr25ydqm] { color: #a371f7; }

.fb-issue-main[b-nhcr25ydqm] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fb-issue-title[b-nhcr25ydqm] {
    font-size: .98rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fb-issue.closed .fb-issue-title[b-nhcr25ydqm] {
    color: var(--text-dim);
}

.fb-issue-meta[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .78rem;
}

.fb-chip[b-nhcr25ydqm] {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.fb-chip.cat-bug[b-nhcr25ydqm] { background: color-mix(in srgb, #e05d67 22%, transparent); color: #ff8a93; }
.fb-chip.cat-idea[b-nhcr25ydqm] { background: color-mix(in srgb, #4f8cff 22%, transparent); color: #7fb0ff; }
.fb-chip.cat-etc[b-nhcr25ydqm] { background: color-mix(in srgb, var(--text-dim) 22%, transparent); color: var(--text-dim); }

/* ---------------------------------------------------------------- 펼친 상세 */
.fb-detail[b-nhcr25ydqm] {
    display: grid;
    gap: 10px;
    padding: 4px 14px 14px 46px;
}

.fb-detail .fb-empty[b-nhcr25ydqm] {
    margin: 0;
}

.fb-post-body[b-nhcr25ydqm] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .92rem;
    line-height: 1.55;
}

.fb-post-contact[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .82rem;
}

.fb-reply[b-nhcr25ydqm] {
    display: grid;
    gap: 4px;
    padding: 9px 11px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    white-space: pre-wrap;
    font-size: .9rem;
    line-height: 1.5;
}

.fb-reply-label[b-nhcr25ydqm] {
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
}

.fb-post-actions[b-nhcr25ydqm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 관리자 */
.fb-admin-unlock[b-nhcr25ydqm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fb-admin-unlock small[b-nhcr25ydqm] {
    flex: 1 1 200px;
    color: var(--text-dim);
    font-size: .8rem;
}

.fb-admin-label[b-nhcr25ydqm] {
    font-size: .88rem;
    font-weight: 700;
}

.fb-admin-unlock input[b-nhcr25ydqm] {
    width: 240px;
}

.fb-admin-edit[b-nhcr25ydqm] {
    display: grid;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.fb-reply-edit[b-nhcr25ydqm] {
    display: grid;
    gap: 4px;
    margin: 0;
}

.fb-reply-edit > span[b-nhcr25ydqm] {
    color: var(--text-dim);
    font-size: .78rem;
    font-weight: 600;
}

.fb-reply-edit textarea[b-nhcr25ydqm] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    resize: vertical;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 600px) {
    .fb-heading[b-nhcr25ydqm] {
        flex-direction: column;
    }

    .fb-row[b-nhcr25ydqm] {
        grid-template-columns: 1fr;
    }

    .fb-admin-unlock input[b-nhcr25ydqm] {
        width: 100%;
    }

    .fb-issue-row[b-nhcr25ydqm] {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 12px;
    }

    .fb-issue-row .fb-chip[b-nhcr25ydqm] {
        grid-column: 2;
        justify-self: start;
    }

    .fb-detail[b-nhcr25ydqm] {
        padding-left: 12px;
    }
}
/* /Pages/GuildWar.razor.rz.scp.css */
.guild-war-page[b-myozz0wtz1] {
    max-width: 1320px;
    margin: 0 auto;
    color: var(--text);
}

/* ---------------------------------------------------------------- 머리 */
.gw-heading[b-myozz0wtz1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.gw-heading h1[b-myozz0wtz1] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.gw-lede[b-myozz0wtz1] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.gw-meta[b-myozz0wtz1] {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    color: var(--text-dim);
    font-size: .84rem;
}

.gw-message[b-myozz0wtz1],
.gw-empty[b-myozz0wtz1] {
    padding: 11px 13px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.55;
}

.gw-message[b-myozz0wtz1] {
    margin-bottom: 12px;
    border-style: solid;
    background: var(--surface);
}

.gw-message.error[b-myozz0wtz1] {
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
    color: #e05d67;
}

/* ---------------------------------------------------------------- 필터 */
.gw-filters[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(160px, 220px) auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gw-filters label[b-myozz0wtz1] {
    display: grid;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.gw-filters label > span[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 600;
}

.gw-filters input[b-myozz0wtz1],
.gw-filters select[b-myozz0wtz1] {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
}

.gw-filters input:focus[b-myozz0wtz1],
.gw-filters select:focus[b-myozz0wtz1] {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- 배치 */
.gw-layout[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.gw-defense-list[b-myozz0wtz1] {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    scrollbar-width: thin;
}

.gw-list-head[b-myozz0wtz1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 6px 8px;
    color: var(--text-dim);
    font-size: .84rem;
}

.gw-list-head strong[b-myozz0wtz1] {
    color: var(--text);
    font-size: .95rem;
}

.gw-defense-item[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 4px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.gw-defense-item:hover[b-myozz0wtz1] {
    background: var(--tab-hover);
}

.gw-defense-item.selected[b-myozz0wtz1] {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.gw-defense-copy[b-myozz0wtz1] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gw-defense-copy strong[b-myozz0wtz1] {
    font-size: .9rem;
    word-break: keep-all;
}

.gw-defense-copy small[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .77rem;
}

.gw-difficulty[b-myozz0wtz1] {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-difficulty.hard[b-myozz0wtz1] {
    border-color: color-mix(in srgb, #e05d67 50%, var(--border));
    color: #e05d67;
}

.gw-difficulty.easy[b-myozz0wtz1] {
    border-color: color-mix(in srgb, #3fb27f 50%, var(--border));
    color: #3fb27f;
}

.gw-difficulty.guide[b-myozz0wtz1] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    color: var(--accent);
}

/* ---------------------------------------------------------------- 공격 공략(GuildWarAttackGuide) */
.gw-round-toggle[b-myozz0wtz1] {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    height: 38px;
    align-self: end;
    padding: 0 4px;
    color: var(--text);
    font-size: .88rem;
    white-space: nowrap;
}

.gw-round-toggle input[b-myozz0wtz1] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.gw-round-toggle small[b-myozz0wtz1] {
    color: var(--text-dim);
}

.gw-guide-card[b-myozz0wtz1] {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.gw-guide-row[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.gw-guide-copy[b-myozz0wtz1] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.gw-guide-copy strong[b-myozz0wtz1] {
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.gw-guide-pets[b-myozz0wtz1] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: .8rem;
}

.gw-guide-pet[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}

.gw-guide-pet img[b-myozz0wtz1] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.gw-guide-steps[b-myozz0wtz1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gw-step-group[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gw-step[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.gw-step .gw-portraits img[b-myozz0wtz1],
.gw-step .gw-portraits .gw-portrait-missing[b-myozz0wtz1] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.gw-skill-icon[b-myozz0wtz1] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.gw-step-no[b-myozz0wtz1] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
}

.gw-step-no.awaken[b-myozz0wtz1] {
    background: #c98bff;
    color: #2a1140;
}

.gw-arrow[b-myozz0wtz1] {
    color: var(--text-dim);
}

.gw-guide-note[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.5;
}

.gw-guide-note.alt[b-myozz0wtz1] {
    color: var(--text);
}

.gw-guide-note.rows[b-myozz0wtz1] {
    color: var(--accent);
    font-weight: 600;
}

.gw-detail-panel[b-myozz0wtz1] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* 넓은 화면은 오른쪽 칸에, 좁은 화면은 고른 항목 바로 아래에 상세를 보인다 */
.gw-inline-detail[b-myozz0wtz1] {
    display: none;
}

/* ---------------------------------------------------------------- 초상 */
.gw-portraits[b-myozz0wtz1] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
}

.gw-portraits img[b-myozz0wtz1],
.gw-portrait-missing[b-myozz0wtz1] {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    object-fit: cover;
}

.gw-portraits.small img[b-myozz0wtz1],
.gw-portraits.small .gw-portrait-missing[b-myozz0wtz1] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.gw-portraits.large img[b-myozz0wtz1],
.gw-portraits.large .gw-portrait-missing[b-myozz0wtz1] {
    width: 58px;
    height: 58px;
    border-radius: 11px;
}

.gw-portrait-missing[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- 상세 */
.gw-detail-head[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.gw-detail-title[b-myozz0wtz1] {
    min-width: 0;
}

.gw-kicker[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 700;
}

.gw-detail-title h2[b-myozz0wtz1] {
    word-break: keep-all;
    margin: 1px 0 6px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.gw-stats[b-myozz0wtz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--text-dim);
    font-size: .84rem;
}

.gw-stats b[b-myozz0wtz1] {
    color: var(--text);
}

.gw-attack-toolbar[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 8px;
}

.gw-attack-toolbar > span[b-myozz0wtz1] {
    font-size: .95rem;
    font-weight: 700;
}

.gw-seg[b-myozz0wtz1] {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
}

.gw-seg button[b-myozz0wtz1] {
    padding: 5px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-dim);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.gw-seg button.on[b-myozz0wtz1] {
    background: var(--accent);
    color: #fff;
}

.gw-attack-list[b-myozz0wtz1] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gw-attack[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: 26px auto minmax(0, 1fr) 92px 118px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 45%, var(--surface));
}

.gw-rank[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}

.gw-attack-copy[b-myozz0wtz1],
.gw-record[b-myozz0wtz1] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gw-attack-copy strong[b-myozz0wtz1] {
    font-size: .92rem;
    word-break: keep-all;
}

.gw-attack-copy small[b-myozz0wtz1],
.gw-record small[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .76rem;
}

.gw-record[b-myozz0wtz1] {
    text-align: right;
}

.gw-record strong[b-myozz0wtz1] {
    font-size: .9rem;
    white-space: nowrap;
}

.gw-small-sample[b-myozz0wtz1] {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, #d99b25 20%, transparent);
    color: #d99b25;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-score[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.gw-score-num[b-myozz0wtz1] {
    font-size: .95rem;
    font-weight: 800;
    text-align: right;
}

.gw-score-bar[b-myozz0wtz1] {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.gw-score-fill[b-myozz0wtz1] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.gw-more[b-myozz0wtz1] {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.gw-more:hover[b-myozz0wtz1] {
    background: var(--tab-hover);
}

/* ---------------------------------------------------------------- 보는 법 */
.gw-help[b-myozz0wtz1] {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .85rem;
    line-height: 1.6;
}

.gw-help h2[b-myozz0wtz1] {
    margin: 0 0 6px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
}

.gw-help ul[b-myozz0wtz1] {
    margin: 0;
    padding-left: 18px;
}

.gw-help strong[b-myozz0wtz1] {
    color: var(--text);
}

/* ---------------------------------------------------------------- 좁은 화면 */
/* 1000px 이하(태블릿·폴드 세로, 약 770px 포함): 왼쪽 목록 + 오른쪽 상세 두 칸은 유지한다.
   칸이 좁아지므로 목록 항목과 공격 행은 쌓는 배치로 바꾼다.
   (처음엔 900px 이하를 전부 폰 배치로 풀었더니 폴드를 세로로 세웠을 때 목록이 왼쪽에 고정되지 않아 불편했다) */
/* 상세 목록 줄(공격·방어 조합 한 줄)을 순위 | 초상·점수 / 이름 / 전적으로 쌓는다.
   1001~1090px 에서도 다섯 칸 한 줄이면 이름 칸이 40~60px 로 줄어 전적과 겹쳐 1180px 부터 쌓는다 */
@media (max-width: 1180px) {
    .gw-attack[b-myozz0wtz1] {
        grid-template-columns: 22px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank portraits score"
            "rank copy copy"
            "rank record record";
        row-gap: 5px;
    }

    .gw-attack .gw-rank[b-myozz0wtz1] { grid-area: rank; align-self: start; margin-top: 7px; }   /* 파란 원(26px)이라 안쪽 여백을 주면 숫자만 내려간다 — 원째 내린다 */
    .gw-attack .gw-portraits[b-myozz0wtz1] { grid-area: portraits; }
    .gw-attack-copy[b-myozz0wtz1] { grid-area: copy; }
    .gw-score[b-myozz0wtz1] { grid-area: score; width: 116px; }

    .gw-record[b-myozz0wtz1] {
        grid-area: record;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        text-align: left;
    }
}

@media (max-width: 1000px) {
    .gw-layout[b-myozz0wtz1] {
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
        gap: 10px;
    }

    .gw-detail-panel[b-myozz0wtz1] {
        padding: 12px;
    }

    /* 난이도 칩은 이름 줄 오른쪽에, 전적은 아래 줄 전체에 둔다(좁은 칸에서 전적 글자가 두 줄로 꺾이지 않게) */
    .gw-defense-item[b-myozz0wtz1] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "portraits name chip"
            "portraits stats stats";
        gap: 3px 8px;
    }

    .gw-defense-item > .gw-portraits[b-myozz0wtz1] { grid-area: portraits; }
    .gw-defense-copy[b-myozz0wtz1] { display: contents; }
    .gw-defense-copy strong[b-myozz0wtz1] { grid-area: name; }
    .gw-defense-copy small[b-myozz0wtz1] { grid-area: stats; align-self: center; }
    .gw-difficulty[b-myozz0wtz1] { grid-area: chip; justify-self: end; align-self: start; }

    .gw-rank[b-myozz0wtz1] { grid-area: rank; align-self: start; margin-top: 7px; }
}

/* 700px 이하(폰): 한 칸. 고른 항목 바로 아래에 상세를 펼친다 */
@media (max-width: 700px) {
    .gw-layout[b-myozz0wtz1] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 폰은 목록이 화면 전체 폭이라 이름을 한 줄로 두고, 난이도 칩을 전적 줄 오른쪽에 둔다 */
    .gw-defense-item[b-myozz0wtz1] {
        grid-template-areas:
            "portraits name name"
            "portraits stats chip";
    }

    .gw-difficulty[b-myozz0wtz1] { align-self: center; }

    .gw-defense-list[b-myozz0wtz1] {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .gw-detail-panel[b-myozz0wtz1] {
        display: none;
    }

    .gw-inline-detail[b-myozz0wtz1] {
        display: block;
        margin: 2px 0 10px;
        padding: 12px 10px;
        border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
        border-radius: 10px;
        background: var(--bg);
        scroll-margin-top: calc(var(--header-h) + 8px);
    }
}

@media (max-width: 650px) {
    .gw-heading[b-myozz0wtz1] {
        display: block;
    }

    .gw-meta[b-myozz0wtz1] {
        margin-top: 6px;
    }

    .gw-filters[b-myozz0wtz1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .gw-detail-head[b-myozz0wtz1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .gw-detail-title h2[b-myozz0wtz1] {
        font-size: 1.12rem;
    }

    .gw-portraits.large img[b-myozz0wtz1],
    .gw-portraits.large .gw-portrait-missing[b-myozz0wtz1] {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }

    .gw-attack-toolbar[b-myozz0wtz1] {
        flex-direction: column;
        align-items: stretch;
    }

    .gw-seg[b-myozz0wtz1] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .gw-attack-copy small[b-myozz0wtz1] {
        white-space: normal;
    }
}

/* 갤럭시 기본 폭(360px) 이하에서는 초상 3장(120px) 옆에 점수 막대(116px)가 들어갈 자리가 없어
   점수가 초상 위에 겹쳤다. 좁은 폰에서는 막대를 빼고 '추천 63' 글자만 두고, 초상을 조금 줄인다. */
@media (max-width: 440px) {
    .gw-attack[b-myozz0wtz1] {
        gap: 6px 8px;
        padding: 8px;
    }

    .gw-attack .gw-portraits img[b-myozz0wtz1],
    .gw-attack .gw-portraits .gw-portrait-missing[b-myozz0wtz1] {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .gw-score[b-myozz0wtz1] {
        width: auto;
        grid-template-columns: auto;
    }

    .gw-score-bar[b-myozz0wtz1] {
        display: none;
    }

    .gw-score-num[b-myozz0wtz1] {
        padding: 2px 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 18%, transparent);
        color: var(--accent);
        font-size: .82rem;
        white-space: nowrap;
    }

    .gw-score-num[b-myozz0wtz1]::before {
        content: "승률 ";
        font-weight: 600;
    }
}

/* ---------------------------------------------------------------- 이번 라운드 1인 5칼 */
/* 여백·글자 크기는 길드전 방어의 고점덱 우선순위와 같게 맞춘다 */
.gw-round[b-myozz0wtz1] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gw-round-head[b-myozz0wtz1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.gw-round-head[b-myozz0wtz1] {
    margin-bottom: 8px;
}

.gw-round-head h2[b-myozz0wtz1] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.gw-round-date[b-myozz0wtz1] {
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
}

.gw-round-head span[b-myozz0wtz1] {
    flex: 1 1 100%;
    margin-top: 0;
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.5;
}

.gw-round-tiers[b-myozz0wtz1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.gw-round-tier[b-myozz0wtz1] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.gw-round-tier h3[b-myozz0wtz1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .96rem;
    font-weight: 800;
}

.gw-round-tier h3 small[b-myozz0wtz1] {
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
}

.gw-round-tier ol[b-myozz0wtz1] {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.gw-round-tier li[b-myozz0wtz1] {
    font-size: .86rem;
}

.gw-round-team[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.gw-round-team strong[b-myozz0wtz1] {
    font-weight: 700;
}

.gw-round-team .gw-portraits img[b-myozz0wtz1],
.gw-round-team .gw-portrait-missing[b-myozz0wtz1] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.gw-round-target[b-myozz0wtz1] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--text-dim);
}

.gw-round-target b[b-myozz0wtz1] {
    color: var(--text);
    font-weight: 600;
}

.gw-round-target em[b-myozz0wtz1] {
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
}

.gw-round-warn[b-myozz0wtz1] {
    list-style: none;
    margin: 0 0 8px;
    padding: 9px 12px;
    display: grid;
    gap: 3px;
    border: 1px solid color-mix(in srgb, #f0b84a 45%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, #f0b84a 12%, transparent);
    font-size: .86rem;
    font-weight: 700;
}

.gw-round-warn li[b-myozz0wtz1]::before {
    content: "주의 ";
    color: #f0b84a;
    font-size: .78rem;
}

.gw-round-mix[b-myozz0wtz1] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.gw-round-chip[b-myozz0wtz1] {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-round-chip.outer[b-myozz0wtz1] { border-color: color-mix(in srgb, #3fb778 55%, var(--border)); color: #3fb778; }
.gw-round-chip.inner[b-myozz0wtz1] { border-color: color-mix(in srgb, #4f8cff 55%, var(--border)); color: #7fb0ff; }
.gw-round-chip.main[b-myozz0wtz1] { border-color: color-mix(in srgb, #e05d67 55%, var(--border)); color: #ff8a93; }

/* ---------------------------------------------------------------- 공략 진형 */
.gw-guide-formation[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.gw-form-icon[b-myozz0wtz1] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.gw-form-name[b-myozz0wtz1] {
    font-size: .84rem;
    font-weight: 700;
    color: var(--accent);
}

.gw-form-board[b-myozz0wtz1] {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
}

.gw-form-slot[b-myozz0wtz1] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--gw-slot, 26px);
    height: var(--gw-slot, 26px);
}

.gw-form-slot img[b-myozz0wtz1],
.gw-form-slot .gw-portrait-missing[b-myozz0wtz1] {
    width: var(--gw-slot, 26px);
    height: var(--gw-slot, 26px);
    border-radius: 5px;
    border: 1px solid var(--border);
}

.gw-form-slot.empty[b-myozz0wtz1] {
    width: 9px;
    height: 9px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    opacity: .55;
}

.gw-form-slot i[b-myozz0wtz1] {
    display: none;
}

/* ---------------------------------------------------------------- 진형 배치 */
.gw-form[b-myozz0wtz1] {
    display: inline-grid;
    justify-items: start;
    gap: 3px;
}

.gw-form-lines[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gw-form-line[b-myozz0wtz1] {
    display: grid;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--text-dim) 10%, transparent);
}

.gw-form-hero[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
}

.gw-form-hero b[b-myozz0wtz1] {
    font-weight: 700;
    white-space: nowrap;
}

.gw-form-line.front[b-myozz0wtz1] {
    background: color-mix(in srgb, #e05d67 14%, transparent);
}

.gw-form-line small[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gw-form-line.front small[b-myozz0wtz1] {
    color: #ff8a93;
}

.gw-form-hero img[b-myozz0wtz1],
.gw-form-hero .gw-portrait-missing[b-myozz0wtz1] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--bg);
}

.gw-form-row[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gw-form-tag[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-form-tag img[b-myozz0wtz1] {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.gw-round-item[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gw-round-copy[b-myozz0wtz1] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gw-round-item .gw-round-team[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gw-round-arrow[b-myozz0wtz1] {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 800;
}

.gw-chips[b-myozz0wtz1] {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.gw-chip-hero[b-myozz0wtz1] {
    display: grid;
    justify-items: center;
    gap: 1px;
}

.gw-chip-hero b[b-myozz0wtz1] {
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dim);
}

.gw-chip-hero img[b-myozz0wtz1],
.gw-chip-hero .gw-portrait-missing[b-myozz0wtz1] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--bg);
}

.gw-round-item .gw-round-target[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
}

/* 진형마다 사람 수가 달라도 칸 크기는 같게 — 빈 자리는 자리만 잡는다 */
.gw-form-line[b-myozz0wtz1] {
    justify-items: center;
}

.gw-form.boxed[b-myozz0wtz1] {
    justify-items: center;
    gap: 4px;
    padding: 6px 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-dim) 6%, transparent);
}

.gw-form.boxed .gw-form-lines[b-myozz0wtz1] {
    align-items: stretch;
}

.gw-form.boxed .gw-form-line[b-myozz0wtz1] {
    flex: 0 0 46px;
    width: 46px;
}

.gw-form.boxed .gw-form-line.vacant[b-myozz0wtz1] {
    background: transparent;
}

.gw-form.boxed .gw-form-line.vacant small[b-myozz0wtz1] {
    opacity: .35;
}

.gw-form-cells[b-myozz0wtz1] {
    display: grid;
    justify-items: center;
    gap: 2px;
}

/* 사람이 적어도 칸 높이는 같게, 영웅은 가운데로 */
.gw-form.boxed .gw-form-cells[b-myozz0wtz1] {
    height: 129px;
    align-content: center;
}

/* ---------------------------------------------------------------- 최적 5조합 */
.gw-plan[b-myozz0wtz1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.gw-plan-row .gw-rank[b-myozz0wtz1] {
    flex: 0 0 26px;
}

.gw-plan-row[b-myozz0wtz1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
}

.gw-plan-row:first-child[b-myozz0wtz1] {
    border-top: 0;
}

.gw-rank[b-myozz0wtz1] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.gw-plan-arrow[b-myozz0wtz1] {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 800;
}

.gw-plan-seats[b-myozz0wtz1] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-plan-seats i[b-myozz0wtz1] {
    margin-right: 4px;
    color: var(--text-dim);
    font-style: normal;
    font-size: .8rem;
    font-weight: 600;
}

.gw-plan-row .gw-portraits[b-myozz0wtz1] {
    gap: 4px;
}

.gw-plan-row .gw-portraits img[b-myozz0wtz1],
.gw-plan-row .gw-portrait-missing[b-myozz0wtz1] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.gw-plan[b-myozz0wtz1] {
    max-width: 980px;
}

/* 상대 1인 5칼 계획: 계획 고르기, 조합마다 잡을 수 있는 방어 여러 개 */
.gw-plan-note[b-myozz0wtz1] {
    margin: 0 0 8px;
    color: var(--text-dim);
    font-size: .85rem;
}

.gw-plan-tabs[b-myozz0wtz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.gw-plan-tabs button[b-myozz0wtz1] {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.gw-plan-tabs button.on[b-myozz0wtz1] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.gw-plan-row[b-myozz0wtz1] {
    flex-wrap: wrap;
}

.gw-plan-record[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-plan-aims[b-myozz0wtz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    flex: 1 1 260px;
    min-width: 0;
}

.gw-plan-aim[b-myozz0wtz1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gw-plan-aim b[b-myozz0wtz1] {
    font-size: .8rem;
    white-space: nowrap;
}

/* 이번 라운드 계획(source "round"): 안내 줄, 조합의 성 등급, 목표 덱의 팀 수 */
.gw-plan-guide[b-myozz0wtz1] {
    margin: 0 0 10px;
    padding: 9px 12px 9px 28px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: .86rem;
}

.gw-plan-tier[b-myozz0wtz1] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.gw-plan-aim-tier[b-myozz0wtz1],
.gw-plan-aim-count[b-myozz0wtz1] {
    color: var(--text-dim);
    font-size: .76rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.gw-plan-row .gw-plan-aim .gw-portraits img[b-myozz0wtz1],
.gw-plan-row .gw-plan-aim .gw-portrait-missing[b-myozz0wtz1] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

@media (max-width: 680px) {
    .gw-plan-row[b-myozz0wtz1] {
        gap: 7px;
        padding: 7px 8px;
        flex-wrap: wrap;
    }

    .gw-plan-seats[b-myozz0wtz1] {
        gap: 7px;
        font-size: .8rem;
    }
}

/* ---------------------------------------------------------------- 방어 조합 · 공격 조합 탭 */
.gw-tabs[b-myozz0wtz1] {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(120px, auto));
    gap: 4px;
    margin: 0 0 12px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.gw-tabs button[b-myozz0wtz1] {
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
}

.gw-tabs button:hover[b-myozz0wtz1] {
    color: var(--text);
}

.gw-tabs button.on[b-myozz0wtz1] {
    background: var(--accent);
    color: #fff;
}

.gw-difficulty.plan[b-myozz0wtz1] {
    border-color: color-mix(in srgb, #f0b84a 55%, var(--border));
    color: #f0b84a;
}

/* 상세 목록: 공략이 있는 줄은 눌러서 그 아래에 공략을 펼치고, 다시 눌러 접는다 */
.gw-attack-item[b-myozz0wtz1] {
    display: grid;
    gap: 6px;
}

button.gw-attack[b-myozz0wtz1] {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

button.gw-attack:hover[b-myozz0wtz1] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.gw-attack-item.open > .gw-attack[b-myozz0wtz1] {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.gw-attack-guide[b-myozz0wtz1] {
    margin: 0 0 4px 30px;
}

.gw-guide-hint[b-myozz0wtz1] {
    margin: -2px 0 8px;
    color: var(--text-dim);
    font-size: .78rem;
}

.gw-no-record[b-myozz0wtz1] {
    color: var(--text-dim);
}

.gw-tag-line[b-myozz0wtz1] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gw-tag[b-myozz0wtz1] {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gw-tag.plan[b-myozz0wtz1] {
    border-color: color-mix(in srgb, #f0b84a 55%, var(--border));
    color: #f0b84a;
}

.gw-tag.guide[b-myozz0wtz1] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    color: var(--accent);
}

.gw-chevron[b-myozz0wtz1] {
    display: inline-block;
    transition: transform .15s ease;
}

.gw-attack-item.open .gw-chevron[b-myozz0wtz1] {
    transform: rotate(180deg);
}

@media (max-width: 650px) {
    .gw-tabs[b-myozz0wtz1] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gw-attack-guide[b-myozz0wtz1] {
        margin-left: 0;
    }
}

/* 320px 폰: 펼친 상세의 줄에서 '승률 100%' 알약이 셋째 초상에 겹쳤다 */
@media (max-width: 380px) {
    .gw-inline-detail[b-myozz0wtz1] {
        padding: 12px 6px;
    }

    .gw-attack .gw-portraits img[b-myozz0wtz1],
    .gw-attack .gw-portraits .gw-portrait-missing[b-myozz0wtz1] {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }
}
/* /Pages/GuildWarDefenseSetup.razor.rz.scp.css */
.gwd-page[b-awa53kxjea] {
    max-width: 1100px;
    margin: 0 auto;
    color: var(--text);
}

.gwd-heading[b-awa53kxjea] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gwd-meta[b-awa53kxjea] {
    flex: 0 0 auto;
    margin-bottom: 16px;
    color: var(--text-dim);
    font-size: .84rem;
}

.gwd-heading h1[b-awa53kxjea] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.gwd-lede[b-awa53kxjea] {
    margin: 6px 0 16px;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.gwd-message[b-awa53kxjea] {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .88rem;
}

/* ---------------------------------------------------------------- 초상 */
.gwd-portrait[b-awa53kxjea] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg);
    vertical-align: middle;
}

.gwd-portrait.large[b-awa53kxjea] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

.gwd-portrait.small[b-awa53kxjea] {
    width: 44px;
    height: 44px;
}

.gwd-portrait.tiny[b-awa53kxjea] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.gwd-portrait.missing[b-awa53kxjea] {
    display: inline-grid;
    place-items: center;
    color: var(--text-dim);
    font-weight: 700;
    font-size: .8rem;
}

.gwd-portraits[b-awa53kxjea] {
    display: inline-flex;
    gap: 4px;
}

/* ---------------------------------------------------------------- 우선순위 */
.gwd-priority[b-awa53kxjea] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gwd-priority h2[b-awa53kxjea],
.gwd-deck-head h2[b-awa53kxjea],
.gwd-help h2[b-awa53kxjea] {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 800;
}

.gwd-priority-when[b-awa53kxjea] {
    margin: 0 0 8px;
    color: var(--text-dim);
    font-size: .78rem;
    font-weight: 600;
    text-align: right;
}

.gwd-priority-note[b-awa53kxjea] {
    margin: 10px 0 0;
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.55;
}

.gwd-priority ol[b-awa53kxjea] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.gwd-priority li[b-awa53kxjea] {
    display: grid;
    grid-template-columns: 38px auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
}

.gwd-priority li:first-child[b-awa53kxjea] {
    border-top: 0;
}

.gwd-rank[b-awa53kxjea] {
    display: inline-grid;
    place-items: center;
    min-width: 26px;     /* '4-1' 처럼 조건으로 나뉜 순위도 들어가게 가로로 늘어난다 */
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.gwd-priority-copy[b-awa53kxjea] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gwd-priority-copy strong[b-awa53kxjea] {
    font-size: .95rem;
}

.gwd-priority-copy small[b-awa53kxjea] {
    color: var(--text-dim);
    font-size: .8rem;
}

/* ---------------------------------------------------------------- 덱 */
.gwd-deck[b-awa53kxjea] {
    margin-bottom: 20px;
}

.gwd-deck-head[b-awa53kxjea] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.gwd-deck-head h2[b-awa53kxjea] {
    margin: 0;
    font-size: 1.25rem;
}

.gwd-deck-head p[b-awa53kxjea] {
    margin: 0;
    color: var(--text-dim);
    font-size: .88rem;
}

.gwd-variants[b-awa53kxjea] {
    display: grid;
    /* 넓은 화면에선 덱 카드 셋(1·1-1·1-2)이 한 줄 — 좁은 카드는 GuildWarSetupCard 의 작은 모양으로 세 영웅을 한 줄에 둔다.
       auto-fill 이라 카드가 하나·둘인 덱도 늘어나지 않고 같은 폭(빈 칸은 비워 둠).
       360px 폰에서 본문이 340px 보다 좁아 카드가 넘치지 않게 최소 폭은 본문 폭까지로 제한 */
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 12px;
}

.gwd-card[b-awa53kxjea] {
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gwd-condition[b-awa53kxjea] {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
}

.gwd-members[b-awa53kxjea] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;          /* 대체 영웅 칸이 있는 열 때문에 다른 열이 늘어나 아래가 비지 않게 */
    gap: 8px;
    margin-bottom: 10px;
}

.gwd-member[b-awa53kxjea] {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.gwd-member-main[b-awa53kxjea] {
    display: grid;
    justify-items: center;
    align-content: start;        /* 이름·배지 사이에 남는 공간이 벌어지지 않게 */
    gap: 3px;
    padding: 8px 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.gwd-name[b-awa53kxjea] {
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}

.gwd-pos[b-awa53kxjea] {
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
}

.gwd-pos.back[b-awa53kxjea] {
    background: color-mix(in srgb, #4f8cff 22%, transparent);
    color: #7fb0ff;
}

.gwd-pos.front[b-awa53kxjea] {
    background: color-mix(in srgb, #ff7a59 22%, transparent);
    color: #ff9b7f;
}

/* 영웅 카드 아래 장비 세트·주옵·권하는 반지 */
.gwd-gear[b-awa53kxjea] {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 6px 4px 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    text-align: center;
}

.gwd-gear-sets[b-awa53kxjea] {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.3;
}

.gwd-gear-stats[b-awa53kxjea] {
    color: var(--text);
    font-size: .74rem;
    line-height: 1.35;
    word-break: keep-all;
}

.gwd-gear-rings[b-awa53kxjea] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.gwd-ring-chip[b-awa53kxjea] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 3px;
    border-radius: 999px;
    background: color-mix(in srgb, #f5b642 20%, transparent);
    color: #f0c46a;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gwd-ring-chip img[b-awa53kxjea] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gwd-gear-inline[b-awa53kxjea] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
}

/* 우선순위의 '또는' 줄 — 순위 칸은 비우고 아래에 붙인다 */
.gwd-or-mark[b-awa53kxjea] {
    justify-self: center;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
}

.gwd-alts[b-awa53kxjea] {
    display: grid;
    gap: 6px;
    margin: -4px 0 10px;
}

.gwd-member-alt[b-awa53kxjea] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: .82rem;
}

.gwd-alt-slot[b-awa53kxjea] {
    color: var(--text-dim);
    font-weight: 500;
    font-size: .76rem;
}

.gwd-or[b-awa53kxjea] {
    color: var(--text-dim);
    font-size: .74rem;
}

.gwd-alt-copy[b-awa53kxjea] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.gwd-alt-copy small[b-awa53kxjea] {
    color: var(--text-dim);
    font-size: .72rem;
    line-height: 1.35;
}

.gwd-meta[b-awa53kxjea] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 12px;
    margin: 0;
    font-size: .88rem;
}

.gwd-meta dt[b-awa53kxjea] {
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}

.gwd-meta dd[b-awa53kxjea] {
    margin: 0;
    min-width: 0;
}

.gwd-meta dd.gwd-notes[b-awa53kxjea] {
    grid-column: 1 / -1;
}

.gwd-steps[b-awa53kxjea] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gwd-step-group[b-awa53kxjea] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gwd-step[b-awa53kxjea] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}

.gwd-step-no[b-awa53kxjea] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
}

.gwd-step-no.awaken[b-awa53kxjea] {
    background: #c98bff;
    color: #2a1140;
}

.gwd-skill-icon[b-awa53kxjea] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg);
    object-fit: cover;
}

.gwd-arrow[b-awa53kxjea] {
    color: var(--text-dim);
}

.gwd-pet[b-awa53kxjea] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gwd-pet img[b-awa53kxjea] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    object-fit: cover;
}

/* ---------------------------------------------------------------- 세부 세팅 카드 */
/* 카드 안 모양은 공용 컴포넌트 Components/GuildWarSetupCard.razor.css 에 있다. 여기선 카드 칸 넓이만. */
.gwd-card.setup[b-awa53kxjea] {
    container-type: inline-size;
}

/* ---------------------------------------------------------------- 장신구 금지 */
.gwd-ban-chips[b-awa53kxjea] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

.gwd-ban-chip[b-awa53kxjea] {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #e05d67 45%, var(--border));
    background: color-mix(in srgb, #e05d67 12%, transparent);
    color: #ff8a93;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.gwd-ban[b-awa53kxjea] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #e05d67 40%, var(--border));
    border-radius: 12px;
    background: var(--surface);
}

.gwd-ban h2[b-awa53kxjea] {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ff8a93;
}

.gwd-ban > p[b-awa53kxjea] {
    margin: 0 0 10px;
    color: var(--text-dim);
    font-size: .86rem;
    line-height: 1.5;
}

.gwd-ban-groups[b-awa53kxjea] {
    display: grid;
    gap: 10px;
}

.gwd-ban-group h3[b-awa53kxjea] {
    margin: 0 0 6px;
    font-size: .92rem;
}

.gwd-ban-group h3 small[b-awa53kxjea] {
    margin-left: 6px;
    color: var(--text-dim);
    font-weight: 500;
}

.gwd-ban-heroes[b-awa53kxjea] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gwd-ban-hero[b-awa53kxjea] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: .82rem;
}

.gwd-ban-hero .gwd-portrait.small[b-awa53kxjea] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* ---------------------------------------------------------------- 도움말 */
.gwd-help[b-awa53kxjea] {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gwd-help ul[b-awa53kxjea] {
    margin: 0;
    padding-left: 18px;
    color: var(--text-dim);
    font-size: .86rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 440px) {
    .gwd-portrait.large[b-awa53kxjea] {
        width: 58px;
        height: 58px;
    }

    .gwd-members[b-awa53kxjea] {
        gap: 5px;
    }

    .gwd-meta[b-awa53kxjea] {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .gwd-meta dt[b-awa53kxjea] {
        margin-top: 6px;
    }

    /* 방어덱 순서: 이름을 초상 아래로 — 초상 옆 좁은 칸에서 '선란 · 여포 ·/클레미스'처럼 이름이 쪼개졌다 */
    .gwd-priority[b-awa53kxjea] {
        padding: 10px;
    }

    .gwd-priority li[b-awa53kxjea] {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 4px 10px;
    }

    .gwd-priority-copy[b-awa53kxjea] {
        grid-column: 2;
    }
}

/* 관리자 — 로그인했을 때만 카드 아래에 고치기·원래대로 */
.gwd-admin-btn[b-awa53kxjea] {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

.gwd-admin-btn.danger[b-awa53kxjea] {
    color: #ef6b6b;
}

.gwd-admin-actions[b-awa53kxjea] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
}

.gwd-admin-status[b-awa53kxjea] {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
}

/* 고치는 중인 카드는 줄 전체 폭으로 — 좁은 카드 안에서 우선순위 목록을 고르기 어렵다 */
.gwd-card.editing[b-awa53kxjea] {
    grid-column: 1 / -1;
}
/* /Pages/GuildWarPlacement.razor.rz.scp.css */
.gwp-page[b-1fq3x15hgh] {
    max-width: 1000px;
    margin: 0 auto;
    color: var(--text);
}

.gwp-heading h1[b-1fq3x15hgh] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.gwp-lede[b-1fq3x15hgh] {
    margin: 6px 0 16px;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.gwp-card[b-1fq3x15hgh] {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.gwp-lock h2[b-1fq3x15hgh] {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
}

.gwp-lock-row[b-1fq3x15hgh] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gwp-lock-row input[b-1fq3x15hgh] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.gwp-primary[b-1fq3x15hgh],
.gwp-ghost[b-1fq3x15hgh] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.gwp-primary[b-1fq3x15hgh] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.gwp-primary:disabled[b-1fq3x15hgh] {
    opacity: .5;
    cursor: default;
}

.gwp-status[b-1fq3x15hgh] {
    margin: 10px 0 0;
    font-size: .88rem;
}

.gwp-status.error[b-1fq3x15hgh] { color: #e05d67; }
.gwp-status.success[b-1fq3x15hgh] { color: #3fb778; }

.gwp-meta[b-1fq3x15hgh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .86rem;
    color: var(--text-dim);
}

.gwp-meta-main[b-1fq3x15hgh] {
    margin-right: 10px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.gwp-caret[b-1fq3x15hgh] {
    color: var(--text-dim);
}

.gwp-chip[b-1fq3x15hgh] {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-size: .74rem;
    font-weight: 700;
}

.gwp-sub[b-1fq3x15hgh] {
    color: var(--text-dim);
    font-size: .78rem;
}

.gwp-sub.legend[b-1fq3x15hgh] { color: #f0b84a; }

.gwp-note[b-1fq3x15hgh] {
    margin: 14px 0 0;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- 적 배치 */
.gwp-enemy-head[b-1fq3x15hgh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.gwp-enemy-head h2[b-1fq3x15hgh] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.gwp-enemy-head span[b-1fq3x15hgh] {
    color: var(--text-dim);
    font-size: .82rem;
}

.gwp-sub.warn[b-1fq3x15hgh] {
    color: #f0b84a;
}

/* ---------------------------------------------------------------- 라운드 결과 */
.gwp-log-sum[b-1fq3x15hgh] {
    display: grid;
    gap: 3px;
    margin: 6px 0 2px;
    font-size: .88rem;
}

.gwp-log-sum b[b-1fq3x15hgh] {
    display: inline-block;
    min-width: 66px;
    color: var(--accent);
}

.gwp-log-cols[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.gwp-log-cols h3[b-1fq3x15hgh] {
    margin: 0 0 6px;
    font-size: .95rem;
    font-weight: 800;
}

.gwp-log-list[b-1fq3x15hgh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.gwp-log-list li[b-1fq3x15hgh] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg);
    font-size: .84rem;
}

.gwp-log-when[b-1fq3x15hgh] {
    flex: 0 0 52px;
    color: var(--text-dim);
    font-size: .76rem;
}

.gwp-log-who[b-1fq3x15hgh] {
    flex: 0 0 104px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.gwp-log-res[b-1fq3x15hgh] {
    font-weight: 700;
}

.gwp-log-list li.good .gwp-log-res[b-1fq3x15hgh] { color: #3fb778; }
.gwp-log-list li.bad .gwp-log-res[b-1fq3x15hgh] { color: #e05d67; }

.gwp-log-view[b-1fq3x15hgh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.gwp-log-view button[b-1fq3x15hgh] {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-dim);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.gwp-log-view button.on[b-1fq3x15hgh] {
    border-color: var(--accent);
    color: var(--text);
}

.gwp-log-members[b-1fq3x15hgh] {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.gwp-log-member[b-1fq3x15hgh] {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    overflow: hidden;
}

.gwp-log-member-head[b-1fq3x15hgh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gwp-log-member-head .gwp-caret[b-1fq3x15hgh] {
    margin-left: auto;
    font-size: .8rem;
}

.gwp-log-member .gwp-log-list[b-1fq3x15hgh] {
    padding: 0 10px 10px;
}

.gwp-log-member .gwp-log-list li[b-1fq3x15hgh] {
    background: var(--surface);
}

.gwp-log-comp[b-1fq3x15hgh] {
    color: var(--accent);
    font-weight: 600;
}

/* 시즌 1·2·3등 — 게임 랭킹 화면의 등수 띠 그림(asset/ui/rank/rank_1~3.png, 숫자는 글자로 얹음). 종목 다섯이 가로로, 종목마다 띠 셋이 세로로 */
.gwp-hall[b-1fq3x15hgh] {
    margin: 14px 0 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.gwp-podiums[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    --gwp-rank-bg: color-mix(in srgb, var(--surface) 60%, var(--bg));
    --gwp-rank-border: var(--border);
    --gwp-band-1: #d98a2e;
    --gwp-band-2: #7f64b8;
    --gwp-band-3: #c9707e;
}

html[data-theme="light"] .gwp-podiums[b-1fq3x15hgh] {
    --gwp-rank-bg: #fbf8f2;
    --gwp-rank-border: #e8e0d3;
}

.gwp-podium h3[b-1fq3x15hgh] {
    margin: 0 0 6px;
    font-size: .92rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gwp-podium-none[b-1fq3x15hgh] {
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

.gwp-rank[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 46px;
    margin-bottom: 6px;
    border: 1px solid var(--gwp-rank-border);
    border-radius: 10px;
    background: var(--gwp-rank-bg);
    overflow: hidden;
}

.gwp-rank-no[b-1fq3x15hgh] {
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 8px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    background: var(--gwp-band-img) left center / auto 100% no-repeat;
}

.gwp-rank-1[b-1fq3x15hgh] { --gwp-band-img: url(asset/ui/rank/rank_1.png); border-color: color-mix(in srgb, var(--gwp-band-1) 45%, var(--gwp-rank-border)); }
.gwp-rank-2[b-1fq3x15hgh] { --gwp-band-img: url(asset/ui/rank/rank_2.png); border-color: color-mix(in srgb, var(--gwp-band-2) 45%, var(--gwp-rank-border)); }
.gwp-rank-3[b-1fq3x15hgh] { --gwp-band-img: url(asset/ui/rank/rank_3.png); border-color: color-mix(in srgb, var(--gwp-band-3) 45%, var(--gwp-rank-border)); }
.gwp-rank-4[b-1fq3x15hgh] { --gwp-band-img: url(asset/ui/rank/rank_4.png); border-color: var(--gwp-rank-border); }
.gwp-rank-5[b-1fq3x15hgh] { --gwp-band-img: url(asset/ui/rank/rank_4.png); border-color: var(--gwp-rank-border); }

.gwp-rank-name[b-1fq3x15hgh] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 5px 8px 0 0;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 값 두 줄(주 수치 위·보조 아래)은 띠의 grid 칸에 바로 앉는다 */
.gwp-rank-val[b-1fq3x15hgh] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 0 8px 5px 0;
}

.gwp-rank-val b[b-1fq3x15hgh] {
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.gwp-rank-val small[b-1fq3x15hgh] {
    min-width: 0;
    color: var(--text-dim);
    font-size: .7rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .gwp-podiums[b-1fq3x15hgh] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .gwp-podiums[b-1fq3x15hgh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .gwp-rank[b-1fq3x15hgh] { grid-template-columns: 40px minmax(0, 1fr); column-gap: 6px; }
    .gwp-rank-no[b-1fq3x15hgh] { padding-right: 6px; font-size: 1.15rem; }
    .gwp-rank-name[b-1fq3x15hgh] { font-size: .78rem; }
    .gwp-rank-val b[b-1fq3x15hgh] { font-size: .8rem; }
}

/* 시즌 누적 — 길드원마다 공격 승패, 점수, 방어 횟수 한 줄 */
.gwp-season[b-1fq3x15hgh] {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: .86rem;
}

.gwp-season th[b-1fq3x15hgh],
.gwp-season td[b-1fq3x15hgh] {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.gwp-season th[b-1fq3x15hgh] {
    color: var(--text-dim);
    font-size: .78rem;
    font-weight: 700;
}

.gwp-season td:first-child[b-1fq3x15hgh] {
    font-weight: 700;
    white-space: normal;
    word-break: keep-all;
}

.gwp-season .num[b-1fq3x15hgh] {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--accent);
}

/* 공격권을 남긴 길드원 */
.gwp-season .gwp-unused[b-1fq3x15hgh] {
    color: #e0564f;
    font-weight: 800;
}

@media (max-width: 560px) {
    .gwp-season th[b-1fq3x15hgh],
    .gwp-season td[b-1fq3x15hgh] {
        padding: 5px 4px;
    }

    .gwp-season[b-1fq3x15hgh] {
        font-size: .8rem;
    }
}

/* 라운드 탭·라운드별 방어 배치(길드원 단위) */
.gwp-round-tabs[b-1fq3x15hgh] {
    margin: 0 0 10px;
}

.gwp-lineup-pick[b-1fq3x15hgh] {
    width: 100%;
    max-width: 360px;
    margin: 6px 0 2px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
}

.gwp-log-member > .gwp-log-member-head[b-1fq3x15hgh] {
    cursor: default;
}

/* 조합 순위 — 많이 쓴 조합부터 */
.gwp-combo-list[b-1fq3x15hgh] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.gwp-combo-list li[b-1fq3x15hgh] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--bg);
    font-size: .85rem;
}

.gwp-combo-rank[b-1fq3x15hgh] {
    flex: 0 0 22px;
    color: var(--text-dim);
    font-weight: 700;
    text-align: right;
}

.gwp-combo-count[b-1fq3x15hgh] {
    font-weight: 800;
}

/* 우리 팀 → 시뮬레이터 */
.gwp-sim-links[b-1fq3x15hgh] {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.gwp-sim-btn[b-1fq3x15hgh] {
    padding: 2px 9px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

.gwp-sim-btn:hover[b-1fq3x15hgh] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.gwp-sim-btn.on[b-1fq3x15hgh] {
    background: var(--accent);
    color: #fff;
}

.gwp-sim-bar[b-1fq3x15hgh] {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--surface);
    font-size: .84rem;
}

.gwp-sim-bar b[b-1fq3x15hgh] {
    margin-right: 4px;
    color: var(--accent);
}


/* 공격 정리 — 뚫은 조합·성별 주력 조합·유저별 */
.gwp-summary h3[b-1fq3x15hgh] {
    margin: 14px 0 4px;
    font-size: .95rem;
    font-weight: 800;
}


.gwp-sum-users[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.gwp-sum-user[b-1fq3x15hgh] {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .84rem;
}

.gwp-sum-user-head[b-1fq3x15hgh] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 3px;
}

.gwp-sum-tier i[b-1fq3x15hgh] {
    font-style: normal;
    font-weight: 800;
    color: var(--accent);
    margin-right: 5px;
}

/* 조합 = 영웅 아이콘 + 줄임말(브브 여 칼), 결과 = N승 N패 */
.gwp-face-list[b-1fq3x15hgh] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.gwp-face-list > li[b-1fq3x15hgh] {
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--bg);
}

.gwp-face-row[b-1fq3x15hgh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .85rem;
}

.gwp-face-row b[b-1fq3x15hgh],
.gwp-chip b[b-1fq3x15hgh] {
    font-weight: 800;
    white-space: nowrap;
}

.gwp-face-chips[b-1fq3x15hgh] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.gwp-chip[b-1fq3x15hgh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .8rem;
    background: var(--surface);
}

.gwp-chip i[b-1fq3x15hgh] {
    font-style: normal;
    font-weight: 700;
    padding-left: 4px;
}

.gwp-team[b-1fq3x15hgh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gwp-faces[b-1fq3x15hgh] {
    display: inline-flex;
    gap: 2px;
}

.gwp-faces img[b-1fq3x15hgh],
.gwp-face-missing[b-1fq3x15hgh] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--bg);
}

.gwp-team.small .gwp-faces img[b-1fq3x15hgh],
.gwp-team.small .gwp-face-missing[b-1fq3x15hgh] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
}

.gwp-faces .gwp-pet-face[b-1fq3x15hgh] {
    border-radius: 50%;
}

.gwp-face-missing[b-1fq3x15hgh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
}

.gwp-team-name[b-1fq3x15hgh] {
    font-weight: 800;
    white-space: nowrap;
}

.gwp-lost[b-1fq3x15hgh] {
    color: #e0564f;
    font-weight: 800;
    white-space: nowrap;
}

.gwp-held[b-1fq3x15hgh] {
    color: #3fae6a;
    font-weight: 800;
    white-space: nowrap;
}

.gwp-phase[b-1fq3x15hgh] {
    min-width: 88px;
    font-weight: 800;
    color: var(--text-dim);
}

.gwp-sum-tier[b-1fq3x15hgh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}

/* 목록에 다 못 보인 나머지 합 */
.gwp-face-list > li.gwp-rest[b-1fq3x15hgh] {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-dim);
}

/* 폰: 시즌 누적 표가 360px 에서 63px 넘쳤다 — 표만 옆으로 밀어 보게 */
@media (max-width: 480px) {
    .gwp-season[b-1fq3x15hgh] {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* 길드원 조합별 승패 — 시즌 누적 표(이름 누름)와 라운드 '길드원별' 펼침 */
.gwp-season-name[b-1fq3x15hgh] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.gwp-season tr.open td[b-1fq3x15hgh] {
    border-bottom-color: transparent;
}

.gwp-season-detail td[b-1fq3x15hgh] {
    padding-top: 0;
    white-space: normal;
}

/* 폰에서 시즌 표가 옆으로 밀릴 때도 펼친 조합표는 화면 폭 안에 붙어 있게 */
.gwp-season-detail .gwp-combo[b-1fq3x15hgh] {
    position: sticky;
    left: 0;
    max-width: min(100%, calc(100vw - 80px));   /* 표 좌우 여백(카드·쪽 여백 합 약 74px) 안쪽 */
}

.gwp-combo[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 6px 16px;
    margin: 4px 0 8px;
    font-size: .8rem;
}

.gwp-combo-col b[b-1fq3x15hgh] {
    display: block;
    margin-bottom: 3px;
    color: var(--text-dim);
    font-size: .74rem;
}

.gwp-combo ul[b-1fq3x15hgh] {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gwp-combo li[b-1fq3x15hgh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.gwp-combo-name[b-1fq3x15hgh] {
    font-weight: 700;
    word-break: keep-all;
}

.gwp-combo-rec[b-1fq3x15hgh] {
    white-space: nowrap;
}

.gwp-combo-rec em[b-1fq3x15hgh] {
    font-style: normal;
    font-weight: 800;
}

.gwp-combo-rec em.good[b-1fq3x15hgh] {
    color: #4fc27a;
}

.gwp-combo-rec em.bad[b-1fq3x15hgh] {
    color: #ef6b6b;
}

/* 길드를 나간 길드원 표 */
.gwp-left[b-1fq3x15hgh] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim, #888) 22%, transparent);
    color: var(--text-dim, #888);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.gwp-formerly[b-1fq3x15hgh] {
    margin-left: 4px;
    font-weight: 500;
}

/* 스펙 현황 탭 — 전적/스펙 현황 전환, 길드원 줄을 누르면 팀마다 영웅 셋(초상 · 초월 · 반지) */
.gwp-page-tabs[b-1fq3x15hgh] {
    margin-top: 12px;
}

.gwp-spec td.num[b-1fq3x15hgh] {
    text-align: center;
}

.gwp-spec-team[b-1fq3x15hgh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

.gwp-spec-team:last-child[b-1fq3x15hgh] {
    border-bottom: 0;
}

.gwp-spec-hero[b-1fq3x15hgh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.gwp-spec-hero img[b-1fq3x15hgh] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

.gwp-spec-copy[b-1fq3x15hgh] {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.gwp-spec-copy b[b-1fq3x15hgh] {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gwp-spec-copy small[b-1fq3x15hgh] {
    color: var(--text-dim);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gwp-spec-tr[b-1fq3x15hgh] {
    margin-left: 4px;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
}

.gwp-spec-tr.max[b-1fq3x15hgh] {
    color: #e0a43a;
}

@media (max-width: 560px) {
    .gwp-spec-team[b-1fq3x15hgh] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gwp-spec-note[b-1fq3x15hgh] {
    margin: 4px 0 0;
}

.gwp-spec td.gwp-spec-txt[b-1fq3x15hgh] {
    min-width: 9em;
    font-size: .76rem;
    color: var(--text-dim);
    white-space: normal;
    word-break: keep-all;
}

.gwp-spec-head[b-1fq3x15hgh] {
    margin: 8px 0 2px;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
}

.gwp-spec-extra[b-1fq3x15hgh] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding-bottom: 4px;
}

.gwp-spec-chip[b-1fq3x15hgh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .76rem;
    white-space: nowrap;
}

.gwp-spec-chip img[b-1fq3x15hgh] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.gwp-spec-chip small[b-1fq3x15hgh] {
    color: var(--text-dim);
    font-size: .68rem;
}

.gwp-spec-chip.small[b-1fq3x15hgh] {
    font-size: .72rem;
}

.gwp-spec-chip.small img[b-1fq3x15hgh] {
    width: 18px;
    height: 18px;
}
/* /Pages/HeroGuide.razor.rz.scp.css */
.hero-guide-page[b-lptizj38ym] {
    max-width: 1180px;
    margin: 0 auto;
    color: var(--text);
}

.guide-heading[b-lptizj38ym] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.guide-heading h1[b-lptizj38ym] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.catalog-date[b-lptizj38ym] {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .84rem;
}

.guide-message[b-lptizj38ym] {
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.55;
}

.guide-message.warning[b-lptizj38ym] {
    border-color: color-mix(in srgb, #d99b25 55%, var(--border));
    color: #d99b25;
}

.guide-message.error[b-lptizj38ym] {
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
    color: #e05d67;
}

.guide-filters[b-lptizj38ym] {
    display: grid;
    /* 공통 영웅 필터는 검색·정렬 아래의 전체 너비를 쓴다. */
    grid-template-columns: minmax(190px, 1fr) minmax(155px, 205px);
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.search-field[b-lptizj38ym],
.sort-field[b-lptizj38ym] {
    display: grid;
    gap: 5px;
    color: var(--text-dim);
    font-size: .79rem;
    font-weight: 700;
}

.search-field input[b-lptizj38ym],
.sort-field select[b-lptizj38ym] {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--bg);
    color: var(--text);
}

.search-field input:focus[b-lptizj38ym],
.sort-field select:focus[b-lptizj38ym] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-category-filters[b-lptizj38ym] {
    grid-column: 1 / -1;
    min-width: 0;
}

.role-badge-icon[b-lptizj38ym],
.effect-badge-icon[b-lptizj38ym] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    object-fit: contain;
}

.guide-layout[b-lptizj38ym] {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.hero-browser[b-lptizj38ym],
.guide-detail[b-lptizj38ym] {
    min-width: 0;
}

.hero-browser[b-lptizj38ym] {
    position: sticky;
    top: calc(var(--header-h) + 14px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.browser-head[b-lptizj38ym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}

.browser-head span[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .78rem;
}

.hero-list[b-lptizj38ym] {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 6px;
}

.hero-list-item[b-lptizj38ym] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.hero-list-item:hover[b-lptizj38ym] {
    background: var(--tab-hover);
}

.hero-list-item.selected[b-lptizj38ym] {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.hero-list-item:focus-visible[b-lptizj38ym] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.hero-list-item > img[b-lptizj38ym] {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--bg);
    object-fit: contain;
}

.hero-list-copy[b-lptizj38ym] {
    display: grid;
    min-width: 0;
}

.hero-list-copy strong[b-lptizj38ym],
.hero-list-copy small[b-lptizj38ym] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-list-copy strong[b-lptizj38ym] { font-size: .91rem; }
.hero-list-copy small[b-lptizj38ym] { margin-top: 2px; color: var(--text-dim); font-size: .73rem; }

.hero-list-badges[b-lptizj38ym],
.hero-badges[b-lptizj38ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hero-list-badges[b-lptizj38ym] { margin-top: 4px; }

.team-immunity-group[b-lptizj38ym] {
    display: grid;
    gap: 3px;
    margin-top: 6px;
}

.team-immunity-group .hero-list-badges[b-lptizj38ym] { margin-top: 0; }
.team-immunity-label[b-lptizj38ym] { color: var(--text-dim); font-size: .68rem; }
.immunity-badge[b-lptizj38ym] { border-color: color-mix(in srgb, #47b98b 45%, var(--border)); }

.hero-role-badge[b-lptizj38ym],
.hero-trait-badge[b-lptizj38ym] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    color: var(--text-dim);
    font-size: .69rem;
    line-height: 1;
    white-space: nowrap;
}

.hero-role-badge[b-lptizj38ym] { color: var(--text); }
.role-defender[b-lptizj38ym] { border-color: color-mix(in srgb, #4d9cff 45%, var(--border)); }
.role-attacker[b-lptizj38ym] { border-color: color-mix(in srgb, #e86a58 45%, var(--border)); }
.role-supporter[b-lptizj38ym], .role-healer[b-lptizj38ym] { border-color: color-mix(in srgb, #47b98b 45%, var(--border)); }
.role-ranger[b-lptizj38ym] { border-color: color-mix(in srgb, #c891e8 45%, var(--border)); }
.role-magic[b-lptizj38ym] { border-color: color-mix(in srgb, #7a8bff 45%, var(--border)); }
.role-hybrid[b-lptizj38ym] { border-color: color-mix(in srgb, #d3a74d 45%, var(--border)); }

.trait-awakening[b-lptizj38ym] { color: #d49a38; }
.trait-empowerment[b-lptizj38ym] { color: #9d80f4; }
.trait-immortal[b-lptizj38ym] { color: #d46d6d; }
.trait-revive[b-lptizj38ym] { color: #48ae87; }
.trait-immunity[b-lptizj38ym] { color: #5aa9d6; }
.trait-invulnerability[b-lptizj38ym], .trait-physical-immunity[b-lptizj38ym] { color: #5aa9d6; }
.trait-indomitable[b-lptizj38ym] { color: #d49a38; }
.trait-stealth[b-lptizj38ym] { color: #8f97a8; }
.trait-taunt[b-lptizj38ym] { color: #d97a4a; }
.trait-blessing[b-lptizj38ym] { color: #d6c34a; }

.guide-presence[b-lptizj38ym] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.guide-presence.ready[b-lptizj38ym] { background: #3fb778; }
.guide-presence.pending[b-lptizj38ym] { background: var(--border); }

.browser-empty[b-lptizj38ym],
.detail-empty[b-lptizj38ym] {
    padding: 36px 18px;
    color: var(--text-dim);
    text-align: center;
}

.guide-detail[b-lptizj38ym] {
    display: grid;
    gap: 14px;
}

.hero-overview[b-lptizj38ym] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 150px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface) 62%);
}

.hero-portrait[b-lptizj38ym] {
    align-self: flex-end;
    width: 116px;
    height: 126px;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .26));
}

.hero-overview-copy[b-lptizj38ym] { min-width: 0; }
.hero-kicker[b-lptizj38ym] { color: var(--text-dim); font-size: .85rem; }

.hero-overview h2[b-lptizj38ym] {
    margin: 2px 0 8px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.value-chips[b-lptizj38ym],
.inline-sources[b-lptizj38ym],
.guide-meta[b-lptizj38ym],
.source-meta[b-lptizj38ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.value-chips span[b-lptizj38ym] {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    color: var(--text-dim);
    font-size: .76rem;
}

.hero-release[b-lptizj38ym] {
    display: inline-block;
    margin-top: 9px;
    color: var(--accent);
    font-size: .78rem;
    text-decoration: none;
}

.hero-release:hover[b-lptizj38ym] { text-decoration: underline; }

.guide-meta[b-lptizj38ym] {
    padding: 3px 2px;
    color: var(--text-dim);
    font-size: .78rem;
}

.status-pill[b-lptizj38ym],
.confidence-pill[b-lptizj38ym],
.freshness-pill[b-lptizj38ym] {
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.status-pill.current[b-lptizj38ym],
.confidence-pill.high[b-lptizj38ym],
.freshness-pill.fresh[b-lptizj38ym] {
    background: color-mix(in srgb, #3fb778 18%, var(--surface));
    color: #3fb778;
}

.status-pill.review-needed[b-lptizj38ym],
.confidence-pill.medium[b-lptizj38ym],
.freshness-pill.aging[b-lptizj38ym] {
    background: color-mix(in srgb, #d99b25 18%, var(--surface));
    color: #d99b25;
}

.status-pill.draft[b-lptizj38ym],
.confidence-pill.low[b-lptizj38ym],
.confidence-pill.unknown[b-lptizj38ym],
.freshness-pill.unknown[b-lptizj38ym],
.freshness-pill.stale[b-lptizj38ym] {
    background: color-mix(in srgb, #e05d67 16%, var(--surface));
    color: #e05d67;
}

.detail-card[b-lptizj38ym] {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.summary-card[b-lptizj38ym],
.detail-empty-card[b-lptizj38ym],
.tips-card[b-lptizj38ym],
.cautions-card[b-lptizj38ym] {
    padding: 16px;
}

.detail-card h3[b-lptizj38ym],
.detail-card h4[b-lptizj38ym],
.detail-section h3[b-lptizj38ym] {
    margin: 0;
    color: var(--text);
}

.summary-card h3[b-lptizj38ym],
.detail-empty-card h3[b-lptizj38ym],
.tips-card h3[b-lptizj38ym],
.cautions-card h3[b-lptizj38ym] {
    margin-bottom: 8px;
    font-size: 1rem;
}

.summary-card p[b-lptizj38ym],
.detail-empty-card p[b-lptizj38ym] {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.68;
}

/* 상세 보기 전환 탭: 가이드 / 길드전 */
.detail-tabs[b-lptizj38ym] {
    display: flex;
    gap: 6px;
    margin: 14px 0 12px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}

.detail-tab[b-lptizj38ym] {
    flex: 1 1 0;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}

.detail-tab:hover[b-lptizj38ym] { color: var(--text); }

.detail-tab.on[b-lptizj38ym] {
    background: var(--accent);
    color: #fff;
}

.detail-tab-body.is-hidden[b-lptizj38ym] { display: none; }

.detail-section[b-lptizj38ym] {
    display: grid;
    gap: 9px;
}

.ring-editor-card[b-lptizj38ym],
.tuning-editor-card[b-lptizj38ym] {
    padding: 15px;
}

.ring-priority-grid[b-lptizj38ym] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ring-priority-grid label[b-lptizj38ym] {
    display: grid;
    gap: 7px;
    color: var(--text-dim);
    font-size: .78rem;
}

.ring-priority-grid label strong[b-lptizj38ym] {
    margin-right: 5px;
    color: var(--accent);
    font-size: .86rem;
}

.ring-priority-grid input[b-lptizj38ym],
.ring-priority-grid select[b-lptizj38ym] {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--bg);
    color: var(--text);
}

.ring-priority-grid input:focus[b-lptizj38ym],
.ring-priority-grid select:focus[b-lptizj38ym] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 추천 반지 고르기 — 시뮬레이터 반지 창과 같은 목록(등급 배경 + 아이콘 + 이름 + 설명)과 세공 줄 */
.ring-choice[b-lptizj38ym] {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.ring-choice-caption[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .82rem;
}

.ring-choice-caption strong[b-lptizj38ym] {
    margin-right: 5px;
    color: var(--accent);
}

.ring-choice-button[b-lptizj38ym] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 5px 11px 5px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.ring-choice-button:hover[b-lptizj38ym],
.ring-choice-button.open[b-lptizj38ym] {
    border-color: var(--accent);
}

.ring-choice-name[b-lptizj38ym] {
    overflow: hidden;
    font-size: .92rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ring-choice-name.empty[b-lptizj38ym] {
    color: var(--text-dim);
    font-weight: 500;
}

.ring-choice-name small[b-lptizj38ym] {
    color: var(--text-dim);
    font-weight: 500;
}

.ring-choice-caret[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .8rem;
}

.ring-thumb[b-lptizj38ym] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
}

.ring-thumb img[b-lptizj38ym] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ring-thumb.none[b-lptizj38ym] {
    border: 1px dashed var(--border);
    color: var(--text-dim);
    font-size: .9rem;
}

.ring-pick-list[b-lptizj38ym] {
    display: grid;
    gap: 3px;
    max-height: 320px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 9px;
    background: var(--bg);
    scrollbar-width: thin;
}

.ring-pick-row[b-lptizj38ym] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.ring-pick-row:hover[b-lptizj38ym] {
    background: var(--tab-hover);
}

.ring-pick-row.on[b-lptizj38ym] {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.ring-pick-text[b-lptizj38ym] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.ring-pick-name[b-lptizj38ym] {
    font-size: .88rem;
    font-weight: 700;
}

.ring-pick-desc[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .74rem;
    line-height: 1.35;
}

.ring-gem-row[b-lptizj38ym] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ring-gem-label[b-lptizj38ym] {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
}

/* 세공 버튼은 반지 버튼보다 한 단계 작게 */
.ring-gem-row .ring-choice-button[b-lptizj38ym] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
}

.ring-thumb.small[b-lptizj38ym] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

/* 장비 세트 아이콘은 등급 배경이 없다 */
.ring-thumb.set[b-lptizj38ym] {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.ring-choice-text[b-lptizj38ym] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.ring-choice-desc[b-lptizj38ym] {
    overflow: hidden;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ring-pick-note[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .72rem;
}

.ring-editor-footer[b-lptizj38ym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
}

.ring-editor-footer small[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .73rem;
    line-height: 1.45;
}

.ring-editor-actions[b-lptizj38ym] {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
}

.ring-editor-actions button[b-lptizj38ym] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 750;
    cursor: pointer;
}

.ring-clear-button[b-lptizj38ym] {
    background: transparent;
    color: var(--text-dim);
}

.ring-save-button[b-lptizj38ym] {
    border-color: var(--accent) !important;
    background: var(--accent);
    color: #fff;
}

.ring-editor-actions button:hover[b-lptizj38ym] { filter: brightness(1.08); }

.ring-editor-actions button:focus-visible[b-lptizj38ym] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ring-save-status[b-lptizj38ym] {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
    color: var(--text-dim);
    font-size: .76rem;
}

.ring-save-status.success[b-lptizj38ym] { color: #3fb778; }
.ring-save-status.dirty[b-lptizj38ym] { color: #d99b25; }

/* 장신구 금지 — 패시브와 겹치는 반지 (Models/RingRestrictions.cs) */
.ring-forbidden-card[b-lptizj38ym] {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    border-color: color-mix(in srgb, #e05d67 45%, var(--border));
}

.ring-forbidden-card > strong[b-lptizj38ym] {
    color: #e05d67;
    font-size: .9rem;
}

.ring-forbidden-list[b-lptizj38ym] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ring-forbidden-item[b-lptizj38ym] {
    display: grid;
    gap: 2px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, #e05d67 40%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, #e05d67 10%, transparent);
    font-size: .85rem;
}

.ring-forbidden-item b[b-lptizj38ym] {
    color: #ff8a93;
}

.ring-forbidden-item small[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .76rem;
}
.ring-save-status.error[b-lptizj38ym] { color: #e05d67; }

.archive-note[b-lptizj38ym] {
    margin: 0 2px;
    color: var(--text-dim);
    font-size: .77rem;
    line-height: 1.5;
}

.skill-grid[b-lptizj38ym] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.skill-card[b-lptizj38ym] {
    min-width: 0;
    padding: 14px;
}

.skill-card.passive-card[b-lptizj38ym] {
    border-color: color-mix(in srgb, #9a78df 46%, var(--border));
}

.skill-card-header[b-lptizj38ym] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.skill-card-header img[b-lptizj38ym] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    object-fit: cover;
}

.skill-card-header h4[b-lptizj38ym] {
    margin-top: 3px;
    font-size: .96rem;
    font-weight: 800;
}

.skill-kind[b-lptizj38ym] {
    color: #9a78df;
    font-size: .7rem;
    font-weight: 800;
}

.skill-kind.basic[b-lptizj38ym] { color: var(--text-dim); }
.skill-kind.active[b-lptizj38ym] { color: var(--accent); }
.skill-kind.awakening[b-lptizj38ym] { color: #e28b38; }

.skill-facts[b-lptizj38ym] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.skill-facts span[b-lptizj38ym] {
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    color: var(--text-dim);
    font-size: .69rem;
}

.skill-description[b-lptizj38ym] {
    color: var(--text);
    font-size: .82rem;
    line-height: 1.62;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.skill-upgrade[b-lptizj38ym] {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.skill-upgrade strong[b-lptizj38ym] {
    color: var(--accent);
    font-size: .72rem;
}

.skill-upgrade span[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre-line;
}

.skill-upgrade.transcendence[b-lptizj38ym] {
    background: color-mix(in srgb, #9a78df 10%, var(--bg));
}

.skill-upgrade.transcendence strong[b-lptizj38ym] { color: #9a78df; }

.section-heading[b-lptizj38ym] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

.section-heading h3[b-lptizj38ym] { font-size: 1.05rem; font-weight: 800; }
.section-heading span[b-lptizj38ym] { color: var(--text-dim); font-size: .75rem; }

.build-grid[b-lptizj38ym],
.use-grid[b-lptizj38ym],
.source-list[b-lptizj38ym] {
    display: grid;
    gap: 9px;
}

.build-card[b-lptizj38ym],
.use-card[b-lptizj38ym],
.source-card[b-lptizj38ym] {
    padding: 14px;
}

.card-title-row[b-lptizj38ym] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.card-title-row h4[b-lptizj38ym] { font-size: .97rem; font-weight: 800; }

.card-title-meta[b-lptizj38ym] {
    display: grid;
    justify-items: end;
    gap: 6px;
    max-width: 60%;
}

.card-context[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .74rem;
    line-height: 1.45;
    text-align: right;
}

.confidence-pill[b-lptizj38ym] {
    color: var(--text-dim);
    font-size: .71rem;
    white-space: nowrap;
}

.guide-field[b-lptizj38ym] {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-top: 9px;
}

.guide-field > strong[b-lptizj38ym] {
    padding-top: 4px;
    color: var(--text-dim);
    font-size: .76rem;
}

.guide-field.text-field > span[b-lptizj38ym] {
    color: var(--text);
    font-size: .85rem;
    line-height: 1.55;
}

.compact-list[b-lptizj38ym],
.tips-card ul[b-lptizj38ym],
.cautions-card ul[b-lptizj38ym] {
    margin: 11px 0 0;
    padding-left: 1.15rem;
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.62;
}

.compact-list li + li[b-lptizj38ym],
.tips-card li + li[b-lptizj38ym],
.cautions-card li + li[b-lptizj38ym] { margin-top: 4px; }

.inline-sources[b-lptizj38ym] {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
    font-size: .75rem;
}

.inline-sources > span[b-lptizj38ym] { color: var(--text-dim); }

.inline-sources a[b-lptizj38ym] {
    color: var(--accent);
    text-decoration: none;
}

.inline-sources a:hover[b-lptizj38ym] { text-decoration: underline; }

.tips-grid[b-lptizj38ym] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.tips-card[b-lptizj38ym] { border-left: 3px solid #3fb778; }
.cautions-card[b-lptizj38ym] { border-left: 3px solid #d99b25; }

.source-card[b-lptizj38ym] {
    display: flex;
    align-items: center;
}

.source-copy[b-lptizj38ym] { display: grid; gap: 4px; min-width: 0; }

.source-copy > a[b-lptizj38ym],
.source-copy > strong[b-lptizj38ym] {
    color: var(--text);
    font-size: .91rem;
    font-weight: 750;
    text-decoration: none;
}

.source-copy > a:hover[b-lptizj38ym] { color: var(--accent); text-decoration: underline; }
.source-copy > small[b-lptizj38ym] { color: var(--text-dim); font-size: .73rem; }

.source-meta span[b-lptizj38ym] {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
}

.source-empty[b-lptizj38ym] {
    padding: 18px;
    color: var(--text-dim);
    text-align: center;
}

/* 860px 이하(태블릿·폴드 세로, 약 770px): 영웅 목록은 왼쪽에 그대로 두고 칸만 좁힌다.
   상세 칸이 좁아지므로 두 칸짜리 카드 격자는 한 칸으로 쌓는다.
   (예전에는 여기서부터 목록을 위로 올려 한 칸 배치로 풀어, 세로로 세우면 목록이 왼쪽에 없었다) */
@media (max-width: 860px) {
    .guide-layout[b-lptizj38ym] { grid-template-columns: 240px minmax(0, 1fr); gap: 10px; }
    .tips-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
    .skill-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
    .ring-priority-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
}

/* 700px 이하(폰): 목록을 위로 올린 한 칸 배치 */
@media (max-width: 700px) {
    .guide-layout[b-lptizj38ym] { grid-template-columns: 1fr; }
    .hero-browser[b-lptizj38ym] { position: static; }
    .hero-list[b-lptizj38ym] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 280px;
    }
}

@media (max-width: 650px) {
    .guide-heading[b-lptizj38ym] { align-items: flex-start; flex-direction: column; gap: 6px; }
    .guide-filters[b-lptizj38ym] { grid-template-columns: 1fr 1fr; }
    .tips-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
    .skill-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
    .ring-priority-grid[b-lptizj38ym] { grid-template-columns: 1fr; }
    .ring-editor-footer[b-lptizj38ym] { align-items: flex-start; flex-direction: column; }
    .card-title-row[b-lptizj38ym] { display: grid; }
    .card-title-meta[b-lptizj38ym] { max-width: none; justify-items: start; }
    .card-context[b-lptizj38ym] { text-align: left; }
}

@media (max-width: 470px) {
    .guide-filters[b-lptizj38ym] { grid-template-columns: 1fr; }
    .hero-list[b-lptizj38ym] { grid-template-columns: 1fr; }
    .hero-overview[b-lptizj38ym] { min-height: 130px; padding: 13px; }
    .hero-portrait[b-lptizj38ym] { width: 91px; height: 105px; }
    .guide-field[b-lptizj38ym] { grid-template-columns: 1fr; gap: 3px; }
    .guide-field > strong[b-lptizj38ym] { padding-top: 0; }
}

.tuning-editor-footer[b-lptizj38ym] { justify-content: flex-end; }
.tuning-section button:disabled[b-lptizj38ym] { opacity: .55; cursor: wait; }
/* /Pages/Index.razor.rz.scp.css */
.home-page[b-un9oga6b4c] {
    display: grid;
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--text);
}

/* ---------------------------------------------------------------- 첫 칸 */
.home-hero[b-un9oga6b4c] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 34px 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 65%);
}

.home-hero > :not(.home-hero-art)[b-un9oga6b4c] {
    position: relative;
    z-index: 1;
}

/* 신규 영웅 일러스트 — 오른쪽 빈자리에, 왼쪽으로 갈수록 배경에 녹아들게 */
.home-hero-art[b-un9oga6b4c] {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 0;
    width: min(460px, 52%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
    mask-image: linear-gradient(to right, transparent 0, #000 34%);
}

.art-glow[b-un9oga6b4c] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 46%, rgba(255, 196, 64, .28), transparent 46%),
        radial-gradient(circle at 36% 58%, rgba(52, 168, 120, .3), transparent 50%);
}

.home-hero-art img[b-un9oga6b4c] {
    position: absolute;
    bottom: -6%;
    height: 118%;
    aspect-ratio: 1;
    object-fit: cover;
    pointer-events: none;
    transition: transform .5s ease, filter .5s ease;
}

/* 그림마다 잘린 가장자리(젠이츠 왼쪽 망토, 탄지로 칼끝·오른쪽 옷자락)를 흐리게 */
.art-back[b-un9oga6b4c] {
    right: -8%;
    filter: brightness(.82) saturate(.95);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

.art-front[b-un9oga6b4c] {
    right: 30%;
    filter: drop-shadow(-10px 0 18px rgba(0, 0, 0, .45));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 78%, transparent 100%);
}

.home-hero-art:hover .art-front[b-un9oga6b4c] { transform: translateY(-4px) scale(1.02); }
.home-hero-art:hover .art-back[b-un9oga6b4c] { transform: translateY(-2px); filter: brightness(.95); }

.art-caption[b-un9oga6b4c] {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(10, 12, 16, .62);
    color: #f1f3f6;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.01em;
    backdrop-filter: blur(4px);
}

.art-caption b[b-un9oga6b4c] {
    margin-right: 4px;
    color: #ffd25e;
    font-weight: 800;
}

.home-hero h1[b-un9oga6b4c] {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.home-hero p[b-un9oga6b4c] {
    margin: 0;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.6;
}

.home-hero-actions[b-un9oga6b4c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.home-btn[b-un9oga6b4c] {
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.home-btn:hover[b-un9oga6b4c] { border-color: var(--accent); color: var(--text); }

.home-btn.primary[b-un9oga6b4c] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.home-btn.primary:hover[b-un9oga6b4c] { color: #fff; opacity: .9; }

/* ---------------------------------------------------------------- 칸 공통 */
.home-block[b-un9oga6b4c] {
    display: grid;
    align-content: start;   /* 옆 칸이 더 길어도 제목과 목록 사이가 벌어지지 않게 */
    gap: 10px;
    min-width: 0;
}

.home-block h2[b-un9oga6b4c] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

/* ---------------------------------------------------------------- 바로가기 */
.home-shortcuts[b-un9oga6b4c] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.home-card[b-un9oga6b4c] {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.home-card-title[b-un9oga6b4c] {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 800;
    text-decoration: none;
}

.home-card-title:hover[b-un9oga6b4c] { color: var(--accent); }

.home-card p[b-un9oga6b4c] {
    margin: 4px 0 10px;
    color: var(--text-dim);
    font-size: .84rem;
    line-height: 1.5;
}

.home-card ul[b-un9oga6b4c] {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-card li a[b-un9oga6b4c] {
    display: block;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
}

.home-card li a:hover[b-un9oga6b4c] { background: var(--tab-hover); }

/* ---------------------------------------------------------------- 소식·일정 목록 */
.home-block-head[b-un9oga6b4c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.home-block-head a[b-un9oga6b4c] {
    color: var(--text-dim);
    font-size: .84rem;
    text-decoration: none;
    white-space: nowrap;
}

.home-block-head a:hover[b-un9oga6b4c] { color: var(--accent); }

.home-list[b-un9oga6b4c] {
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.home-list li + li[b-un9oga6b4c] { border-top: 1px solid var(--border); }

.home-list a[b-un9oga6b4c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}

.home-list a:hover[b-un9oga6b4c] { background: var(--tab-hover); }

.home-list-title[b-un9oga6b4c] {
    min-width: 0;
    font-size: .92rem;
    line-height: 1.45;
    word-break: keep-all;
}

.home-list-meta[b-un9oga6b4c] {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .8rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 소식·일정 두 칸, 불러오는 중·빈 상태 */
.home-columns[b-un9oga6b4c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-placeholder[b-un9oga6b4c] {
    padding: 26px 18px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .9rem;
    text-align: center;
}

.home-placeholder a[b-un9oga6b4c] { color: var(--accent); }

@media (max-width: 900px) {
    .home-shortcuts[b-un9oga6b4c] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .home-hero[b-un9oga6b4c] { padding: 24px 18px; }
    /* 폰: 글 뒤에 깔지 않고 배너 위쪽 띠로 */
    .home-hero-art[b-un9oga6b4c] {
        position: relative;
        display: block;
        width: auto;
        height: 150px;
        margin: -24px -18px 14px;
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    }
    .home-hero-art img[b-un9oga6b4c] { height: 150%; bottom: -36%; }
    .art-front[b-un9oga6b4c] { right: 40%; }
    .art-back[b-un9oga6b4c] { right: 2%; }
    .art-caption[b-un9oga6b4c] { bottom: 26px; }
    .home-shortcuts[b-un9oga6b4c],
    .home-columns[b-un9oga6b4c] { grid-template-columns: 1fr; }
    .home-list a[b-un9oga6b4c] { flex-direction: column; gap: 2px; }
}
/* /Pages/SenaCalendar.razor.rz.scp.css */
.calendar-page[b-0hrr28yzvf] {
    display: grid;
    gap: 14px;
    max-width: 1240px;
    margin: 0 auto;
    color: var(--text);
}

.calendar-page h2[b-0hrr28yzvf],
.calendar-page h3[b-0hrr28yzvf] {
    margin: 0;
    color: var(--text);
}

.calendar-page button:focus-visible[b-0hrr28yzvf],
.calendar-page a:focus-visible[b-0hrr28yzvf] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- 카테고리 색
   두 테마에서 모두 읽히는 중간 채도. 라이트 테마에서 흐린 색만 조금 진하게 바꾼다. */
.cat-update[b-0hrr28yzvf] { --cat: #5b8def; }
.cat-hero[b-0hrr28yzvf] { --cat: #e3a13b; }
.cat-content[b-0hrr28yzvf] { --cat: #2aa58f; }
.cat-platform[b-0hrr28yzvf] { --cat: #8d96a8; }
.cat-anniversary[b-0hrr28yzvf] { --cat: #d77bc8; }
.cat-guildwar[b-0hrr28yzvf] { --cat: #dc5f5f; }
.cat-guildwar-battle[b-0hrr28yzvf] { --cat: #ef8354; }
.cat-totalwar[b-0hrr28yzvf] { --cat: #9a72e6; }
.cat-arena-elite[b-0hrr28yzvf] { --cat: #c9a43a; }
.cat-arena-realtime[b-0hrr28yzvf] { --cat: #33b1d4; }
.cat-arena-weekly[b-0hrr28yzvf] { --cat: #7d98b8; }
.cat-ordeal-tower[b-0hrr28yzvf] { --cat: #5cb35f; }
.cat-abyss-rotation[b-0hrr28yzvf] { --cat: #6c7ee0; }
.cat-pickup[b-0hrr28yzvf] { --cat: #e0609f; }
.cat-event[b-0hrr28yzvf] { --cat: #a3b536; }
.cat-story[b-0hrr28yzvf] { --cat: #bc8b5f; }
.cat-battlepass[b-0hrr28yzvf] { --cat: #4d97c7; }
.cat-costume[b-0hrr28yzvf] { --cat: #b77ad8; }
.cat-costume-sale[b-0hrr28yzvf] { --cat: #a58fb8; }
.cat-sena-chess[b-0hrr28yzvf] { --cat: #979766; }

html[data-theme="light"] .cat-hero[b-0hrr28yzvf] { --cat: #c9831a; }
html[data-theme="light"] .cat-platform[b-0hrr28yzvf] { --cat: #737d90; }
html[data-theme="light"] .cat-arena-elite[b-0hrr28yzvf] { --cat: #a8851c; }
html[data-theme="light"] .cat-arena-realtime[b-0hrr28yzvf] { --cat: #1f97b8; }
html[data-theme="light"] .cat-ordeal-tower[b-0hrr28yzvf] { --cat: #3f9a45; }
html[data-theme="light"] .cat-event[b-0hrr28yzvf] { --cat: #7f9322; }
html[data-theme="light"] .cat-sena-chess[b-0hrr28yzvf] { --cat: #7b7b4a; }

.swatch[b-0hrr28yzvf] {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 3px;
    background: var(--cat, var(--text-dim));
}

/* ---------------------------------------------------------------- 공통 */
.calendar-heading[b-0hrr28yzvf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.calendar-heading h1[b-0hrr28yzvf] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.catalog-date[b-0hrr28yzvf] {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .84rem;
}

.guide-message[b-0hrr28yzvf] {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.55;
}

.guide-message.warning[b-0hrr28yzvf] {
    border-color: color-mix(in srgb, #d99b25 55%, var(--border));
    color: #d99b25;
}

.guide-message.error[b-0hrr28yzvf] {
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
    color: #e05d67;
}

.panel[b-0hrr28yzvf] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.section-heading[b-0hrr28yzvf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-heading h2[b-0hrr28yzvf] {
    font-size: 1.05rem;
    font-weight: 800;
}

.section-heading span[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .75rem;
}

.empty-note[b-0hrr28yzvf] {
    padding: 18px 8px;
    color: var(--text-dim);
    font-size: .84rem;
    text-align: center;
}

.plain-button[b-0hrr28yzvf] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.plain-button:hover:not(:disabled)[b-0hrr28yzvf] { background: var(--tab-hover); }
.plain-button:disabled[b-0hrr28yzvf] { opacity: .5; cursor: default; }

.cat-label[b-0hrr28yzvf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
}

.basis-badge[b-0hrr28yzvf] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    color: var(--text-dim);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.basis-official[b-0hrr28yzvf] { border-color: color-mix(in srgb, #3fb778 45%, var(--border)); color: #3fb778; }
.basis-client[b-0hrr28yzvf] { border-color: color-mix(in srgb, #4a9eff 45%, var(--border)); color: #4a9eff; }
.basis-rule[b-0hrr28yzvf] { border-color: color-mix(in srgb, #d99b25 45%, var(--border)); color: #d99b25; }
.basis-observed[b-0hrr28yzvf] { border-color: color-mix(in srgb, #b58ce0 45%, var(--border)); color: #b58ce0; }

html[data-theme="light"] .basis-official[b-0hrr28yzvf] { color: #17703f; }
html[data-theme="light"] .basis-client[b-0hrr28yzvf] { color: #1a6fd1; }
html[data-theme="light"] .basis-rule[b-0hrr28yzvf] { color: #9a6400; }
html[data-theme="light"] .basis-observed[b-0hrr28yzvf] { color: #7d4dc0; }

.state-pill[b-0hrr28yzvf],
.confidence-pill[b-0hrr28yzvf] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 750;
    line-height: 1.45;
    white-space: nowrap;
}

.state-pill.state-ongoing[b-0hrr28yzvf],
.confidence-pill.high[b-0hrr28yzvf] {
    background: color-mix(in srgb, #3fb778 18%, var(--surface));
    color: #3fb778;
}

.state-pill.state-upcoming[b-0hrr28yzvf] {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
}

.state-pill.state-ended[b-0hrr28yzvf] {
    background: color-mix(in srgb, var(--text-dim) 14%, var(--surface));
    color: var(--text-dim);
}

.confidence-pill.medium[b-0hrr28yzvf] {
    background: color-mix(in srgb, #d99b25 18%, var(--surface));
    color: #d99b25;
}

.confidence-pill.low[b-0hrr28yzvf],
.confidence-pill.unknown[b-0hrr28yzvf] {
    background: color-mix(in srgb, #e05d67 16%, var(--surface));
    color: #e05d67;
}

html[data-theme="light"] .state-pill.state-ongoing[b-0hrr28yzvf],
html[data-theme="light"] .confidence-pill.high[b-0hrr28yzvf] { color: #17703f; }
html[data-theme="light"] .state-pill.state-upcoming[b-0hrr28yzvf] { color: #1557b0; }
html[data-theme="light"] .confidence-pill.medium[b-0hrr28yzvf] { color: #9a6400; }
html[data-theme="light"] .confidence-pill.low[b-0hrr28yzvf],
html[data-theme="light"] .confidence-pill.unknown[b-0hrr28yzvf] { color: #c23b46; }

/* ---------------------------------------------------------------- 지금 진행 중 · 다가오는 일정 */
.now-section[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 14px;
}

.season-grid[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 9px;
}

.now-card[b-0hrr28yzvf] {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--cat);
    border-radius: 10px;
    background: color-mix(in srgb, var(--cat) 7%, var(--surface));
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.now-card:hover[b-0hrr28yzvf] { border-color: color-mix(in srgb, var(--cat) 55%, var(--border)); border-left-color: var(--cat); }
.now-card.state-upcoming[b-0hrr28yzvf] { background: var(--surface); }
.now-card.selected[b-0hrr28yzvf] { outline: 2px solid var(--accent); outline-offset: 1px; }

.card-top[b-0hrr28yzvf],
.card-bottom[b-0hrr28yzvf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-bottom[b-0hrr28yzvf] { margin-top: 2px; }

.card-title[b-0hrr28yzvf] {
    font-size: .93rem;
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.card-phase[b-0hrr28yzvf] {
    color: color-mix(in srgb, var(--cat) 65%, var(--text));
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
}

.card-phase small[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 500;
}

.card-time[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.card-remaining[b-0hrr28yzvf] {
    font-size: .86rem;
    font-weight: 800;
}

.sub-heading[b-0hrr28yzvf] {
    margin: 14px 0 6px !important;
    color: var(--text-dim) !important;
    font-size: .84rem;
    font-weight: 800;
}

.ending-list[b-0hrr28yzvf],
.upcoming-list[b-0hrr28yzvf],
.agenda-day ul[b-0hrr28yzvf],
.source-list[b-0hrr28yzvf],
.phase-timeline[b-0hrr28yzvf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.line-item[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: 10px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.line-item:hover[b-0hrr28yzvf] { background: var(--tab-hover); }
.line-item.selected[b-0hrr28yzvf] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.line-cat[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .74rem;
    white-space: nowrap;
}

.line-title[b-0hrr28yzvf] {
    overflow: hidden;
    font-size: .85rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-meta[b-0hrr28yzvf] {
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.upcoming-item[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px dashed var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.upcoming-list li:last-child .upcoming-item[b-0hrr28yzvf] { border-bottom: 0; }
.upcoming-item:hover[b-0hrr28yzvf] { background: var(--tab-hover); }
.upcoming-item.selected[b-0hrr28yzvf] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.upcoming-time[b-0hrr28yzvf] {
    padding-top: 1px;
    color: var(--text-dim);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.upcoming-copy[b-0hrr28yzvf] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.upcoming-title[b-0hrr28yzvf] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.upcoming-copy small[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .72rem;
    line-height: 1.35;
}

.more-toggle[b-0hrr28yzvf] {
    width: 100%;
    margin-top: 8px;
}

/* ---------------------------------------------------------------- 필터 */
.filter-head[b-0hrr28yzvf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.filter-head h2[b-0hrr28yzvf] {
    font-size: 1rem;
    font-weight: 800;
}

.filter-groups[b-0hrr28yzvf] {
    display: grid;
    gap: 8px;
}

.filter-group[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.filter-group-name[b-0hrr28yzvf] {
    padding-top: 6px;
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 700;
}

.filter-chips[b-0hrr28yzvf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cat-chip[b-0hrr28yzvf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font-size: .78rem;
    font-weight: 650;
    cursor: pointer;
}

.cat-chip:hover[b-0hrr28yzvf] { background: var(--tab-hover); }

.cat-chip:not(.on) .swatch[b-0hrr28yzvf] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--cat);
    opacity: .75;
}

.cat-chip.on[b-0hrr28yzvf] {
    border-color: color-mix(in srgb, var(--cat) 60%, var(--border));
    background: color-mix(in srgb, var(--cat) 14%, var(--surface));
    color: var(--text);
}

/* ---------------------------------------------------------------- 월 달력 */
.calendar-toolbar[b-0hrr28yzvf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.month-nav[b-0hrr28yzvf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-nav h2[b-0hrr28yzvf] {
    min-width: 118px;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

.icon-button[b-0hrr28yzvf] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.icon-button:hover[b-0hrr28yzvf] { background: var(--tab-hover); }

.calendar[b-0hrr28yzvf] {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.weekday-row[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}

.weekday[b-0hrr28yzvf] {
    padding: 7px 0;
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 800;
    text-align: center;
}

.weekday.wd-0[b-0hrr28yzvf],
.day-cell.wd-0 .day-number[b-0hrr28yzvf] { color: #e0666f; }

.weekday.wd-6[b-0hrr28yzvf],
.day-cell.wd-6 .day-number[b-0hrr28yzvf] { color: #5b9cf0; }

html[data-theme="light"] .weekday.wd-0[b-0hrr28yzvf],
html[data-theme="light"] .day-cell.wd-0 .day-number[b-0hrr28yzvf] { color: #c9414b; }

html[data-theme="light"] .weekday.wd-6[b-0hrr28yzvf],
html[data-theme="light"] .day-cell.wd-6 .day-number[b-0hrr28yzvf] { color: #2f6fd0; }

.week[b-0hrr28yzvf] {
    --day-head: 28px;
    --lane: 22px;
    --more: 20px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 108px;
    border-bottom: 1px solid var(--border);
}

.week:last-child[b-0hrr28yzvf] { border-bottom: 0; }

/* 날짜 칸은 버튼이지만 넓은 화면에서는 막대를 누르므로 포인터를 받지 않는다(좁은 화면에서만 켠다). */
.day-cell[b-0hrr28yzvf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row: 1 / -1;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: inherit;
    font: inherit;
    pointer-events: none;
}

.day-cell.wd-6[b-0hrr28yzvf] { border-right: 0; }
.day-cell.other-month[b-0hrr28yzvf] { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.day-cell.other-month .day-number[b-0hrr28yzvf] { opacity: .7; }
.day-cell.today[b-0hrr28yzvf] { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.day-number[b-0hrr28yzvf] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 흰 글자 명암비 4.5:1 이상이 되게 강조색을 어둡게 섞는다. */
.day-cell.today .day-number[b-0hrr28yzvf],
html[data-theme="light"] .day-cell.today .day-number[b-0hrr28yzvf] {
    background: color-mix(in srgb, var(--accent) 72%, #000);
    color: #fff;
}

.bar[b-0hrr28yzvf] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    height: calc(var(--lane) - 3px);
    margin: 1px 3px 2px;
    padding: 0 6px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cat) 50%, transparent);
    border-left: 3px solid var(--cat);
    border-radius: 5px;
    background: color-mix(in srgb, var(--cat) 22%, var(--surface));
    color: var(--text);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.bar:hover[b-0hrr28yzvf] { background: color-mix(in srgb, var(--cat) 34%, var(--surface)); }

.bar-text[b-0hrr28yzvf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 주 경계에서 이어지는 쪽은 모서리를 펴고 색을 흐려 이어짐을 보인다. */
.bar.cont-before[b-0hrr28yzvf] {
    margin-left: 0;
    padding-left: 9px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bar.cont-after[b-0hrr28yzvf] {
    margin-right: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bar.cont-before[b-0hrr28yzvf]::before,
.bar.cont-after[b-0hrr28yzvf]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    opacity: .75;
}

.bar.cont-before[b-0hrr28yzvf]::before { left: 0; background: linear-gradient(to right, var(--cat), transparent); }
.bar.cont-after[b-0hrr28yzvf]::after { right: 0; background: linear-gradient(to left, var(--cat), transparent); }

.bar.point[b-0hrr28yzvf] {
    gap: 4px;
    padding-left: 5px;
    border-left-width: 1px;
    border-radius: 999px;
}

.bar.point[b-0hrr28yzvf]::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--cat);
}

.bar.low-confidence[b-0hrr28yzvf] { border-style: dashed; }
.bar.is-future[b-0hrr28yzvf] { opacity: .62; }

.bar.selected[b-0hrr28yzvf] {
    z-index: 2;
    outline: 2px solid var(--accent);
    outline-offset: 0;
    opacity: 1;
}

.more-button[b-0hrr28yzvf] {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: start;
    margin: 0 5px;
    padding: 0 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.more-button:hover[b-0hrr28yzvf] { background: var(--tab-hover); color: var(--text); }
.more-button.less[b-0hrr28yzvf] { justify-self: end; }

.calendar-legend[b-0hrr28yzvf] {
    margin: 8px 2px 0;
    color: var(--text-dim);
    font-size: .74rem;
}

/* ---------------------------------------------------------------- 이 달의 일정 */
.agenda-list[b-0hrr28yzvf] {
    display: grid;
}

.agenda-day[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.agenda-day:first-child[b-0hrr28yzvf] { border-top: 0; }

.agenda-date[b-0hrr28yzvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: start;
    gap: 6px;
    padding-top: 7px;
    font-size: .84rem;
    font-weight: 800;
    scroll-margin-top: 72px;
}

.agenda-day.carried .agenda-date[b-0hrr28yzvf] { color: var(--text-dim) !important; }
.agenda-day.today .agenda-date[b-0hrr28yzvf] { color: var(--accent) !important; }

.today-tag[b-0hrr28yzvf] {
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 72%, #000);
    color: #fff;
    font-size: .66rem;
}

.agenda-day ul[b-0hrr28yzvf] {
    display: grid;
    gap: 2px;
}

.agenda-item[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-left: 3px solid var(--cat);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.agenda-item:hover[b-0hrr28yzvf] { background: var(--tab-hover); }
.agenda-item.low-confidence[b-0hrr28yzvf] { border-left-style: dashed; }
.agenda-item.selected[b-0hrr28yzvf] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.agenda-time[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.agenda-copy[b-0hrr28yzvf] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.agenda-title[b-0hrr28yzvf] {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.agenda-copy small[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .72rem;
}

/* ---------------------------------------------------------------- 상세 패널 */
.detail-backdrop[b-0hrr28yzvf] { display: none; }

.detail-panel[b-0hrr28yzvf] {
    position: fixed;
    z-index: 1020;
    top: 68px;
    right: max(16px, calc((100vw - 1280px) / 2 + 16px));
    display: grid;
    align-content: start;
    gap: 12px;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 84px);
    padding: 14px 16px 16px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-top: 4px solid var(--cat);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    color: var(--text);
}

.detail-head[b-0hrr28yzvf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.close-button[b-0hrr28yzvf] {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.close-button:hover[b-0hrr28yzvf] { background: var(--tab-hover); }

.detail-panel h2[b-0hrr28yzvf] {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.detail-period[b-0hrr28yzvf] {
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.detail-status[b-0hrr28yzvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 700;
}

.future-note[b-0hrr28yzvf] {
    padding: 7px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, #d99b25 14%, var(--surface));
    color: #d99b25;
    font-size: .78rem;
    font-weight: 700;
}

html[data-theme="light"] .future-note[b-0hrr28yzvf] { color: #9a6400; }

.detail-block[b-0hrr28yzvf] {
    display: grid;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.detail-block h3[b-0hrr28yzvf] {
    color: var(--text-dim) !important;
    font-size: .8rem;
    font-weight: 800;
}

.phase-timeline li[b-0hrr28yzvf] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 6px 0 6px 18px;
}

.phase-timeline li[b-0hrr28yzvf]::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
}

.phase-timeline li[b-0hrr28yzvf]::after {
    content: "";
    position: absolute;
    top: 21px;
    bottom: -6px;
    left: 6px;
    width: 1px;
    background: var(--border);
}

.phase-timeline li:last-child[b-0hrr28yzvf]::after { display: none; }

.phase-timeline time[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.phase-label[b-0hrr28yzvf] {
    grid-column: 1;
    font-size: .83rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.phase-timeline .basis-badge[b-0hrr28yzvf] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.phase-timeline li.past[b-0hrr28yzvf] { opacity: .6; }

.phase-timeline li.current[b-0hrr28yzvf]::before {
    background: var(--cat);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 30%, transparent);
}

.phase-timeline li.current .phase-label[b-0hrr28yzvf] { font-weight: 800; }

.now-tag[b-0hrr28yzvf] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cat) 24%, var(--surface));
    color: var(--text);
    font-size: .66rem;
    font-weight: 800;
}

.now-tag.next[b-0hrr28yzvf] {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 60%, var(--border));
}

.basis-row[b-0hrr28yzvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.detail-text[b-0hrr28yzvf] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.detail-text.dim[b-0hrr28yzvf] { color: var(--text-dim); }

.source-list[b-0hrr28yzvf] {
    display: grid;
    gap: 6px;
}

.source-list li[b-0hrr28yzvf] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.source-list a[b-0hrr28yzvf] {
    color: var(--accent);
    text-decoration: none;
}

.source-list a:hover[b-0hrr28yzvf] { text-decoration: underline; }

/* ---------------------------------------------------------------- 데이터 기준과 출처 */
.basis-section h2[b-0hrr28yzvf] {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 800;
}

.basis-legend[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.basis-legend div[b-0hrr28yzvf] {
    display: grid;
    justify-items: start;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.basis-legend dt[b-0hrr28yzvf],
.basis-legend dd[b-0hrr28yzvf] { margin: 0; }

.basis-legend dd[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .78rem;
    line-height: 1.5;
}

.basis-notes[b-0hrr28yzvf] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.65;
}

.basis-notes a[b-0hrr28yzvf] { color: var(--accent); }

/* ---------------------------------------------------------------- 폰에서 쓰기 */
.phone-section h2[b-0hrr28yzvf] {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 800;
}

.phone-cards[b-0hrr28yzvf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.phone-card[b-0hrr28yzvf] {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.phone-card h3[b-0hrr28yzvf] {
    font-size: .92rem;
    font-weight: 800;
}

.phone-text[b-0hrr28yzvf] {
    margin: 0;
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.phone-actions[b-0hrr28yzvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.install-button[b-0hrr28yzvf] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.install-button:hover:not(:disabled)[b-0hrr28yzvf] { background: color-mix(in srgb, var(--accent) 84%, #000); }

.phone-status[b-0hrr28yzvf] {
    color: var(--text-dim);
    font-size: .78rem;
    line-height: 1.5;
}

.phone-steps[b-0hrr28yzvf] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: .78rem;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.phone-steps li + li[b-0hrr28yzvf] { margin-top: 3px; }

.phone-steps strong[b-0hrr28yzvf] {
    color: var(--text);
    font-weight: 700;
}

.subscribe-row[b-0hrr28yzvf] {
    display: flex;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.subscribe-url[b-0hrr28yzvf] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: .78rem;
}

.subscribe-url:focus[b-0hrr28yzvf] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.webcal-link[b-0hrr28yzvf] {
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 900px) {
    .now-section[b-0hrr28yzvf] { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .calendar-heading[b-0hrr28yzvf] { align-items: flex-start; flex-direction: column; gap: 6px; }
    .panel[b-0hrr28yzvf] { padding: 12px; }

    .filter-group[b-0hrr28yzvf] { grid-template-columns: 1fr; gap: 4px; }
    .filter-group-name[b-0hrr28yzvf] { padding-top: 0; }

    .upcoming-item[b-0hrr28yzvf] { grid-template-columns: 82px minmax(0, 1fr); }
    .upcoming-item .basis-badge[b-0hrr28yzvf] { display: none; }
    .line-title[b-0hrr28yzvf] { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }

    /* 달력은 한눈에 보는 용도로 줄이고, 막대 글자 대신 색 줄과 점만 남긴다. */
    .week[b-0hrr28yzvf] { --day-head: 24px; --lane: 8px; --more: 16px; min-height: 64px; }
    .day-cell[b-0hrr28yzvf] { padding: 3px 1px; align-items: center; }
    .day-number[b-0hrr28yzvf] { min-width: 20px; height: 20px; font-size: .72rem; }
    .bar[b-0hrr28yzvf],
    .bar:hover[b-0hrr28yzvf] {
        height: 5px;
        margin: 1.5px 1px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: var(--cat);
    }
    .bar-text[b-0hrr28yzvf] { display: none; }
    .bar.cont-before[b-0hrr28yzvf]::before,
    .bar.cont-after[b-0hrr28yzvf]::after,
    .bar.point[b-0hrr28yzvf]::before { display: none; }
    .bar.point[b-0hrr28yzvf] { justify-self: center; width: 6px; height: 6px; border-radius: 50%; }
    .bar.low-confidence[b-0hrr28yzvf] { background: repeating-linear-gradient(90deg, var(--cat) 0 4px, transparent 4px 6px); }
    .bar.selected[b-0hrr28yzvf] { outline-offset: 1px; }
    .more-button[b-0hrr28yzvf] { justify-self: center; margin: 0; padding: 0 2px; font-size: .66rem; }
    .calendar-legend[b-0hrr28yzvf] { font-size: .7rem; }
    /* 5px 색 줄은 누르기 어려워 날짜 칸 전체를 누르게 한다. 누르면 그날 목록으로 옮긴다. */
    .bar[b-0hrr28yzvf] { pointer-events: none; }
    .day-cell:not(.other-month)[b-0hrr28yzvf] { pointer-events: auto; cursor: pointer; }

    .agenda-day[b-0hrr28yzvf] { grid-template-columns: 1fr; gap: 4px; }
    .agenda-date[b-0hrr28yzvf] { padding-top: 0; }
    .agenda-item[b-0hrr28yzvf] { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
    .agenda-item .state-pill[b-0hrr28yzvf] { grid-column: 2; justify-self: start; }

    .detail-backdrop[b-0hrr28yzvf] {
        position: fixed;
        z-index: 1019;
        inset: 0;
        display: block;
        background: rgba(0, 0, 0, .45);
    }
    .detail-panel[b-0hrr28yzvf] {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 82vh;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
    }
}
/* /Pages/Strategy.razor.rz.scp.css */
.strategy-page[b-1bg5l0ls9d] {
    display: grid;
    gap: 14px;
    max-width: 1320px;
    margin: 0 auto;
    color: var(--text);
}

.strategy-page h1[b-1bg5l0ls9d] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.strategy-ready[b-1bg5l0ls9d] {
    padding: 28px 22px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-dim);
    text-align: center;
    line-height: 1.6;
}

.strategy-ready strong[b-1bg5l0ls9d] {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 1.05rem;
}

.strategy-ready p[b-1bg5l0ls9d] { margin: 0; }
.strategy-ready a[b-1bg5l0ls9d] { color: var(--accent); }

/* 저장한 공략 목록(강림원정대) */
.strategy-note[b-1bg5l0ls9d] {
    margin: 0;
    color: var(--text-dim);
    font-size: .9rem;
    line-height: 1.6;
}
.strategy-note a[b-1bg5l0ls9d] { color: var(--accent); }

.strategy-card[b-1bg5l0ls9d] {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.strategy-card-head[b-1bg5l0ls9d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.strategy-card-head strong[b-1bg5l0ls9d] { font-size: 1.1rem; }
.strategy-date[b-1bg5l0ls9d] { margin-left: 8px; color: var(--text-dim); font-size: .85rem; }
.strategy-card-actions[b-1bg5l0ls9d] { display: flex; gap: 6px; }

.strategy-stats[b-1bg5l0ls9d] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: .9rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.strategy-stats b[b-1bg5l0ls9d] { color: var(--text); }

.strategy-round[b-1bg5l0ls9d] { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.strategy-round h2[b-1bg5l0ls9d] { margin: 0; font-size: .95rem; font-weight: 700; }

.strategy-heroes[b-1bg5l0ls9d] { display: flex; flex-wrap: wrap; gap: 8px; }
.strategy-hero[b-1bg5l0ls9d] { display: grid; justify-items: center; gap: 2px; width: 64px; font-size: .72rem; text-align: center; }
.strategy-hero img[b-1bg5l0ls9d] { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.strategy-plan[b-1bg5l0ls9d] { display: flex; flex-wrap: wrap; gap: 4px; }
.strategy-step[b-1bg5l0ls9d] {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 2px;
    width: 66px;
    padding: 3px 2px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .7rem;
    text-align: center;
    word-break: keep-all;
    line-height: 1.15;
}
.strategy-step-turn[b-1bg5l0ls9d] { font-weight: 700; color: var(--text-dim); }
.strategy-step img[b-1bg5l0ls9d] { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

.strategy-memo[b-1bg5l0ls9d] { margin: 0; white-space: pre-wrap; color: var(--text); font-size: .92rem; line-height: 1.55; }

.strategy-failures[b-1bg5l0ls9d] { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: .82rem; line-height: 1.5; }

/* 게시판형 목록 — 제목 · 내용 첫 줄 · 날짜. 누르면 그 아래로 내용이 펼쳐진다. */
.strategy-notice[b-1bg5l0ls9d] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: .9rem;
}
.post-section-title[b-1bg5l0ls9d] { margin: 10px 0 0; font-size: 1.05rem; font-weight: 800; }
.post-list[b-1bg5l0ls9d] {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}
.post-empty[b-1bg5l0ls9d] { padding: 22px 16px; color: var(--text-dim); text-align: center; font-size: .92rem; }
.post + .post[b-1bg5l0ls9d] { border-top: 1px solid var(--border); }
.post[b-1bg5l0ls9d] { scroll-margin-top: calc(var(--header-h) + 12px); }   /* 성별 1위 편성 펼침의 '글 전체 보기' 링크로 올 때 머리글에 가리지 않게 */
.post-row[b-1bg5l0ls9d] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.post-row:hover[b-1bg5l0ls9d] { background: var(--tab-hover); }
.post-title[b-1bg5l0ls9d] { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-snippet[b-1bg5l0ls9d] { color: var(--text-dim); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-date[b-1bg5l0ls9d] { color: var(--text-dim); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.post.open > .post-row[b-1bg5l0ls9d] { background: var(--tab-hover); }
.post-body[b-1bg5l0ls9d] { display: grid; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.post-content[b-1bg5l0ls9d] { margin: 0; white-space: pre-wrap; line-height: 1.6; font-size: .95rem; }
.post-content-empty[b-1bg5l0ls9d] { color: var(--text-dim); font-size: .88rem; }
.post-actions[b-1bg5l0ls9d] { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

@media (max-width: 640px) {
    /* 폰: 제목과 날짜를 한 줄에, 내용 첫 줄은 그 아래 줄에 */
    .post-row[b-1bg5l0ls9d] { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
    .post-snippet[b-1bg5l0ls9d] { grid-column: 1 / -1; grid-row: 2; }
}

/* 영웅별 스펙 표 — 속공 순서대로, 메인 딜러 줄은 강조. 폰에서는 가로로 밀어 본다. */
.strategy-spec-summary[b-1bg5l0ls9d] { display: grid; gap: 3px; font-size: .88rem; line-height: 1.5; }
.strategy-spec-summary b[b-1bg5l0ls9d] { margin-right: 6px; color: var(--text-dim); font-weight: 700; }
.strategy-spec-wrap[b-1bg5l0ls9d] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.strategy-spec[b-1bg5l0ls9d] {
    border-collapse: collapse;
    width: 100%;
    min-width: 900px;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.strategy-spec th[b-1bg5l0ls9d], .strategy-spec td[b-1bg5l0ls9d] { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.strategy-spec th[b-1bg5l0ls9d] { color: var(--text-dim); font-weight: 700; }
.strategy-spec th:nth-child(-n+2)[b-1bg5l0ls9d], .strategy-spec td:nth-child(-n+2)[b-1bg5l0ls9d],
.strategy-spec th:nth-last-child(-n+4)[b-1bg5l0ls9d], .strategy-spec td:nth-last-child(-n+4)[b-1bg5l0ls9d] { text-align: left; }
.strategy-spec td.hero[b-1bg5l0ls9d] { font-weight: 700; }
.strategy-spec td.hero .slot[b-1bg5l0ls9d] { color: var(--text-dim); font-weight: 400; font-size: .74rem; }
.strategy-spec td.hero .sub[b-1bg5l0ls9d] { margin-left: 4px; color: var(--text-dim); font-weight: 400; font-size: .74rem; }
.strategy-spec tr.dealer td[b-1bg5l0ls9d] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.badge-dealer[b-1bg5l0ls9d] { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; }

.strategy-spec-summary .sub[b-1bg5l0ls9d] { margin-left: 4px; color: var(--text-dim); font-size: .78rem; }

.strategy-spec th.group[b-1bg5l0ls9d] { text-align: center; border-bottom: 0; }
.strategy-spec th.sub-th[b-1bg5l0ls9d] { font-weight: 600; font-size: .74rem; padding-top: 0; }
.strategy-spec td.extra[b-1bg5l0ls9d] { color: var(--text-dim); }
.strategy-spec td.total[b-1bg5l0ls9d], .strategy-spec th.total[b-1bg5l0ls9d] { font-weight: 700; color: var(--text); }
.strategy-spec-note[b-1bg5l0ls9d] { margin: 0; color: var(--text-dim); font-size: .78rem; line-height: 1.5; }
.strategy-spec-note b[b-1bg5l0ls9d] { color: var(--text); }

/* 성별 1위 편성 — 날짜마다 성 다섯 줄, 초상화와 점수만. 닉네임은 담지 않는다. */
.siege-top[b-1bg5l0ls9d] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.siege-top-head[b-1bg5l0ls9d] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;          /* 폰 폭에서 제목과 날짜가 한 줄에 안 들어간다 */
    gap: 2px 10px;
}

.siege-top-head h2[b-1bg5l0ls9d] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.siege-top-when[b-1bg5l0ls9d] {
    font-size: .8rem;
    color: var(--text-dim);
}

.siege-top-day[b-1bg5l0ls9d] {
    display: grid;
    place-items: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 999px;
    background: var(--border);
    font-size: .8rem;
    font-weight: 800;
}

.siege-top-list[b-1bg5l0ls9d] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.siege-top-list li[b-1bg5l0ls9d] {
    display: grid;
    grid-template-columns: auto 6.5em 1fr auto auto;   /* 요일 · 성 · 초상 · (공략 단추) · 점수 */
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--surface-2, transparent);
}

.siege-top-castle[b-1bg5l0ls9d] {
    font-size: .84rem;
    font-weight: 700;
}

.siege-top-portraits[b-1bg5l0ls9d] {
    display: flex;
    gap: 3px;
    min-width: 0;
}

.siege-top-portraits img[b-1bg5l0ls9d],
.siege-top-missing[b-1bg5l0ls9d] {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.siege-top-missing[b-1bg5l0ls9d] {
    display: grid;
    place-items: center;
    background: var(--border);
    font-size: .78rem;
    font-weight: 700;
}

.siege-top-score[b-1bg5l0ls9d] {
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    font-weight: 800;
}

/* 요일 가이드가 있는 줄(일곱 요일)의 '공략' 단추 — 누르면 그 줄 바로 아래에 펼쳐진다(한 번에 한 요일) */
.siege-top-guide[b-1bg5l0ls9d] {
    padding: 2px 9px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.siege-top-guide:hover[b-1bg5l0ls9d] {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.siege-top-guide.on[b-1bg5l0ls9d] {
    background: var(--accent);
    color: #fff;
}

.siege-top-list li.open[b-1bg5l0ls9d] {
    background: var(--tab-hover);
}

/* 펼침 — 줄의 모든 칸 아래 한 줄 전체. 장비 세팅(.siege-guide)과 라운드별 스킬 순서(.siege-skills)를 폰·태블릿은 위아래로,
   데스크톱(1000px 이상)은 1:1 두 칸으로(10-10 사용자). 오른쪽이 길면 패널이 그만큼 늘어난다. */
.siege-top-panel[b-1bg5l0ls9d] {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 2px 0 6px;
}

/* 오른쪽(또는 아래) 칸 — 제목 · 1~3라운드 스킬 칸 · 영웅별 스킬 피해 표(머리에 엔진 평균 점수) */
.siege-skills[b-1bg5l0ls9d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* 이 칸의 스킬 칸은 글 펼침(.strategy-step 66px·그림 44px)보다 작게(60px·그림 28px) — 1:1 칸(1000 창 약 420px ~ 1280 창 약 560px)에 한 줄 6~8칸.
   60px 은 '레이첼 아래'(.62rem 약 53px)가 한 줄에 드는 폭. 아래 글 목록의 글 펼침은 그대로다. */
.siege-skills .strategy-round[b-1bg5l0ls9d] {
    gap: 4px;
    padding-top: 6px;
}

.siege-skills .strategy-round h2[b-1bg5l0ls9d] {
    font-size: .88rem;
}

.siege-skills .strategy-plan[b-1bg5l0ls9d] {
    gap: 3px;
}

.siege-skills .strategy-step[b-1bg5l0ls9d] {
    gap: 1px;
    width: 60px;
    padding: 2px 1px 3px;
    border-radius: 6px;
    font-size: .62rem;
}

.siege-skills .strategy-step-turn[b-1bg5l0ls9d] {
    font-size: .58rem;
}

/* 7자 이상 이름표('헤브니아 아래')는 .62rem 이면 60px 을 넘어 두 줄이 된다 — 글자만 줄여 한 줄로 */
.siege-skills .strategy-step-label.long[b-1bg5l0ls9d] {
    font-size: .54rem;
}

.siege-skills .strategy-step img[b-1bg5l0ls9d] {
    width: 28px;
    height: 28px;
    border-radius: 5px;
}

/* 1·2라운드는 한 줄에 반반(각각 제목 + 스킬 칸), 3라운드는 그 아래 전체 폭(10-10 사용자). 1·2라운드는 칸이 하나씩이라 폰(반 칸 약 170px)도 반반이 든다. */
.siege-rounds[b-1bg5l0ls9d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.siege-rounds .strategy-round:nth-child(n+3)[b-1bg5l0ls9d] {
    grid-column: 1 / -1;
}

/* 영웅별 스킬 피해 표 — 3라운드 아래. 열 = 영웅 · 평타 · 아래 · 위 · 각성 · (그 밖) · 합계, 칸 = 스킬 이름(작게) + 평균 피해.
   1:1 칸(1000 창 약 420px)에 여섯 열이 들도록 글자 .72rem·칸 여백 3/4px, 그보다 좁으면 표 안에서만 가로 스크롤. */
.siege-skill-damage[b-1bg5l0ls9d] {
    display: grid;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.siege-skill-damage .siege-guide-head h2[b-1bg5l0ls9d] {
    font-size: .88rem;
}

.siege-skill-damage .siege-guide-head span[b-1bg5l0ls9d] {
    font-size: .72rem;
}

.siege-skill-damage-wrap[b-1bg5l0ls9d] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.siege-skill-damage table[b-1bg5l0ls9d] {
    width: 100%;
    border-collapse: collapse;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.siege-skill-damage th[b-1bg5l0ls9d],
.siege-skill-damage td[b-1bg5l0ls9d] {
    padding: 3px 4px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.siege-skill-damage th[b-1bg5l0ls9d] {
    color: var(--text-dim);
    font-size: .68rem;
    font-weight: 700;
}

.siege-skill-damage th:first-child[b-1bg5l0ls9d],
.siege-skill-damage td:first-child[b-1bg5l0ls9d] {
    padding-left: 0;
    text-align: left;
}

.siege-skill-damage .hero-cell[b-1bg5l0ls9d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

.siege-skill-damage .hero-cell img[b-1bg5l0ls9d] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: cover;
}

.siege-skill-damage td small[b-1bg5l0ls9d] {
    display: block;
    color: var(--text-dim);
    font-size: .6rem;
}

.siege-skill-damage td b[b-1bg5l0ls9d] {
    font-weight: 600;
}

.siege-skill-damage td.none[b-1bg5l0ls9d] {
    color: var(--text-dim);
}

.siege-skill-damage td.total[b-1bg5l0ls9d],
.siege-skill-damage th.total[b-1bg5l0ls9d] {
    padding-right: 0;
    font-weight: 800;
}

.siege-skill-damage-note[b-1bg5l0ls9d] {
    margin: 0;
    color: var(--text-dim);
    font-size: .7rem;
    line-height: 1.4;
}

@media (min-width: 1000px) {
    /* 두 상자는 위 맞춤 — 한쪽이 길어도 다른 쪽을 늘리지 않고 빈 자리는 그 아래로(10-10 사용자) */
    .siege-top-panel[b-1bg5l0ls9d] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    /* 1:1 이면 왼쪽 칸이 좁아(1000 창 약 450px · 1440 창 약 490px · 1280 창 약 590px) 영웅 카드 다섯 장을 한 줄에 두려면
       카드를 GuildWarSetupCard.razor.css 의 좁은 카드(470px 이하) 묶음보다 더 줄인다(카드 80~107px: 초상 40, 장비 칸 32~36 2×2, 값 글자만 크게).
       공성(cols-5) 펼침에서만 쓰고 길드전 페이지는 건드리지 않는다. */
    .siege-top-panel[b-1bg5l0ls9d]  .gwd-setup-wrap.cols-5 .gwd-setup-heroes {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0 4px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-col {
        row-gap: 5px;
        padding: 5px;
        border-radius: 9px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-col-top {
        gap: 3px;
        padding: 5px 2px 7px;
        border-radius: 8px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-portrait.round {
        width: 40px;
        height: 40px;
        border-radius: 9px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-name {
        font-size: .7rem;
        white-space: normal;
        word-break: keep-all;
        text-align: center;
        line-height: 1.15;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-col-sets {
        gap: 2px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-set {
        padding: 1px 5px 1px 2px;
        font-size: .6rem;
        line-height: 1.2;
        white-space: normal;      /* '탱커 세트 아무거나'는 좁은 카드에서 두 줄 */
        word-break: keep-all;
        text-align: center;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-set img {
        width: 12px;
        height: 12px;
    }

    /* 장비 네 칸 2×2 — 칸은 최대 36px(1000 창은 32px), 자리 글자('무기1')는 아주 작게·값('치확')만 크게 */
    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-items {
        grid-auto-columns: minmax(0, 36px);
        gap: 3px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-item {
        gap: 0;
        padding: 1px 0;
        border-radius: 6px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-item img {
        width: 9px;
        height: 9px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-item-copy small {
        font-size: .42rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-item-copy b {
        font-size: .6rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-col-row {
        gap: 2px;
        font-size: .62rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-col-label {
        font-size: .56rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-stat {
        gap: 3px;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-stats small,
    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-note {
        font-size: .56rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-rings .gwd-ring-chip {
        gap: 2px;
        padding: 1px 5px 1px 2px;
        font-size: .62rem;
    }

    .siege-top-panel[b-1bg5l0ls9d]  .cols-5 .gwd-setup-rings .gwd-ring-chip img {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 560px) {
    /* 폰 폭에서는 줄 하나가 부모보다 넓어져 화면이 통째로 옆으로 밀린다. 칸을 좁힌다. */
    .siege-top[b-1bg5l0ls9d] {
        padding: 12px 10px;
    }

    .siege-top-list li[b-1bg5l0ls9d] {
        grid-template-columns: auto auto 1fr auto auto;
        gap: 5px;
        padding: 4px 4px;
    }

    .siege-top-guide[b-1bg5l0ls9d] {
        padding: 1px 6px;
        font-size: .7rem;
    }

    .siege-top-portraits[b-1bg5l0ls9d] {
        gap: 2px;
    }

    .siege-top-portraits img[b-1bg5l0ls9d],
    .siege-top-missing[b-1bg5l0ls9d] {
        width: 25px;
        height: 25px;
        border-radius: 6px;
    }

    .siege-top-castle[b-1bg5l0ls9d],
    .siege-top-score[b-1bg5l0ls9d] {
        font-size: .74rem;
    }
}

/* 영웅별 장비 옵션 */
.strategy-gear[b-1bg5l0ls9d] { margin: 6px 0 2px; font-size: .84rem; }
.strategy-gear summary[b-1bg5l0ls9d] { cursor: pointer; color: var(--text-dim); font-weight: 700; }
.strategy-gear-grid[b-1bg5l0ls9d] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px; margin-top: 6px; }
.strategy-gear-hero[b-1bg5l0ls9d] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.strategy-gear-name[b-1bg5l0ls9d] { margin-bottom: 4px; font-weight: 800; }
.strategy-gear-piece[b-1bg5l0ls9d] { display: grid; gap: 1px; padding: 3px 0; border-top: 1px dashed var(--border); line-height: 1.45; }
.strategy-gear-piece .kind[b-1bg5l0ls9d] { color: var(--text-dim); font-size: .74rem; }
.strategy-gear-piece .main[b-1bg5l0ls9d] { font-weight: 700; }
.strategy-gear-piece .subs[b-1bg5l0ls9d] { color: var(--text-dim); overflow-wrap: anywhere; }

/* 요일 장비 세팅 가이드(목·금·토) — 길드전 방어 세팅 가이드 카드(GuildWarSetupCard)를 글 맨 위에 둔다. */
.siege-guide[b-1bg5l0ls9d] {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.siege-guide-head[b-1bg5l0ls9d] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
}

.siege-guide-head h2[b-1bg5l0ls9d] { margin: 0; font-size: 1rem; font-weight: 800; }
.siege-guide-head span[b-1bg5l0ls9d] { color: var(--text-dim); font-size: .8rem; }

/* 카드의 조건 칩(요일·성)은 줄 라벨에 이미 있어 여기서는 비워 두고 감춘다(10-10 사용자) */
.siege-guide[b-1bg5l0ls9d]  .gwd-condition { display: none; }

.siege-guide-meta[b-1bg5l0ls9d] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 12px;
    margin: 0;
    font-size: .88rem;
}

.siege-guide-meta dt[b-1bg5l0ls9d] { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.siege-guide-meta dd[b-1bg5l0ls9d] { margin: 0; min-width: 0; line-height: 1.5; }
.siege-guide-meta dd.siege-notes[b-1bg5l0ls9d] { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .siege-guide[b-1bg5l0ls9d],
    .siege-skills[b-1bg5l0ls9d] { padding: 10px; }
    .siege-guide-meta[b-1bg5l0ls9d] { grid-template-columns: 1fr; gap: 3px; }
    .siege-guide-meta dt[b-1bg5l0ls9d] { margin-top: 6px; }
}

/* 레이드·강림 보스별 줄(10-11 사용자: 공성전과 똑같이) — 공성 줄과 같은 모양이되 요일·점수 칸이 없다: 보스 · 턴 배지 · 초상 · '공략' 단추.
   강림은 1라 팀·2라 팀을 '1라'·'2라' 칩으로 묶고, 폰 폭에서는 두 묶음이 줄바꿈한다. */
.siege-top-list.raid-list li[b-1bg5l0ls9d] {
    grid-template-columns: auto auto 1fr auto;
}

.raid-turn[b-1bg5l0ls9d] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--border);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.raid-list .siege-top-portraits[b-1bg5l0ls9d] {
    flex-wrap: wrap;
    gap: 3px 10px;
}

.raid-team[b-1bg5l0ls9d] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.raid-round-chip[b-1bg5l0ls9d] {
    margin-right: 2px;
    font-style: normal;
    font-size: .7rem;
    font-weight: 800;
    color: var(--text-dim);
    white-space: nowrap;
}

.siege-top-empty[b-1bg5l0ls9d] {
    padding: 6px 8px;
    color: var(--text-dim);
    font-size: .88rem;
}

/* 강림 펼침의 '1라운드 팀'·'2라운드 팀' 머리(장비 세팅 카드 위, 영웅별 스킬 피해 표 위) */
.siege-team-title[b-1bg5l0ls9d] {
    margin: 2px 0 0;
    font-size: .86rem;
    font-weight: 800;
    color: var(--text-dim);
}

/* 돌발 레이드는 라운드가 하나라 스킬 칸이 전체 폭. 강림은 1라운드 칸(두세 칸)이 2라운드 칸(열 몇 칸)보다 짧아 위에 붙인다(가운데로 내려오지 않게). */
.siege-rounds.single .strategy-round[b-1bg5l0ls9d] {
    grid-column: 1 / -1;
}

.siege-rounds .strategy-round[b-1bg5l0ls9d] {
    align-content: start;
}

/* 관리자 전용 — 이 브라우저 공략을 서버에 올리는 칸(관리 비밀번호를 기억한 브라우저에서만 보인다) */
.siege-admin[b-1bg5l0ls9d] {
    display: grid;
    gap: 6px;
    padding: 12px 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.siege-admin h2[b-1bg5l0ls9d] {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
}

.siege-admin-row[b-1bg5l0ls9d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: .88rem;
}

@media (max-width: 560px) {
    .raid-turn[b-1bg5l0ls9d] {
        padding: 0 6px;
        font-size: .68rem;
    }

    .raid-list .siege-top-portraits[b-1bg5l0ls9d] {
        gap: 2px 6px;
    }
}
/* /Pages/TotalWar.razor.rz.scp.css */
.total-war-page[b-0mahxs5zl8] {
    max-width: 1100px;
    margin: 0 auto;
    color: var(--text);
}

/* ---------------------------------------------------------------- 머리 */
.tw-heading[b-0mahxs5zl8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.tw-heading h1[b-0mahxs5zl8] {
    margin: 0;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.tw-lede[b-0mahxs5zl8] {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.5;
}

.tw-meta[b-0mahxs5zl8] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-dim);
    font-size: .84rem;
}

.tw-message[b-0mahxs5zl8],
.tw-empty[b-0mahxs5zl8] {
    padding: 11px 13px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.55;
}

.tw-message[b-0mahxs5zl8] {
    margin-bottom: 12px;
    border-style: solid;
    background: var(--surface);
}

.tw-message.error[b-0mahxs5zl8] {
    border-color: color-mix(in srgb, #e05d67 55%, var(--border));
    color: #e05d67;
}

/* ---------------------------------------------------------------- 필터 */
.tw-filters[b-0mahxs5zl8] {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.tw-filters label[b-0mahxs5zl8] {
    display: grid;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.tw-filters label > span[b-0mahxs5zl8] {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 600;
}

.tw-filters input[b-0mahxs5zl8] {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
}

.tw-filters input:focus[b-0mahxs5zl8] {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 1px;
}

.tw-seg[b-0mahxs5zl8] {
    display: inline-flex;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
}

.tw-seg button[b-0mahxs5zl8] {
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-dim);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.tw-seg button.on[b-0mahxs5zl8] {
    background: var(--accent);
    color: #fff;
}

/* ---------------------------------------------------------------- 목록 */
.tw-list[b-0mahxs5zl8] {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.tw-list-head[b-0mahxs5zl8] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 6px 8px;
    color: var(--text-dim);
    font-size: .84rem;
}

.tw-list-head strong[b-0mahxs5zl8] {
    color: var(--text);
    font-size: .95rem;
}

.tw-row[b-0mahxs5zl8] {
    display: grid;
    grid-template-columns: 34px auto minmax(0, 1fr) 132px;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-top: 1px solid var(--border);
}

.tw-rank[b-0mahxs5zl8] {
    color: var(--text-dim);
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
}

.tw-portraits[b-0mahxs5zl8] {
    display: inline-flex;
    gap: 3px;
}

.tw-portraits img[b-0mahxs5zl8],
.tw-portrait-missing[b-0mahxs5zl8] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg);
}

.tw-portrait-missing[b-0mahxs5zl8] {
    display: inline-grid;
    place-items: center;
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
}

.tw-copy[b-0mahxs5zl8] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tw-copy strong[b-0mahxs5zl8] {
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.tw-copy small[b-0mahxs5zl8] {
    color: var(--text-dim);
    font-size: .78rem;
}

.tw-count[b-0mahxs5zl8] {
    display: grid;
    gap: 4px;
    justify-items: end;
    font-size: .82rem;
    color: var(--text-dim);
}

.tw-count b[b-0mahxs5zl8] {
    color: var(--text);
    font-size: 1.05rem;
}

.tw-bar[b-0mahxs5zl8] {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent) var(--w, 0%), color-mix(in srgb, var(--border) 70%, transparent) var(--w, 0%));
}

.tw-more[b-0mahxs5zl8] {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    font-size: .88rem;
    cursor: pointer;
}

.tw-more:hover[b-0mahxs5zl8] {
    color: var(--text);
    border-style: solid;
}

/* ---------------------------------------------------------------- 도움말 */
.tw-help[b-0mahxs5zl8] {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.tw-help h2[b-0mahxs5zl8] {
    margin: 0 0 8px;
    font-size: 1rem;
}

.tw-help ul[b-0mahxs5zl8] {
    margin: 0;
    padding-left: 18px;
    color: var(--text-dim);
    font-size: .86rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 700px) {
    .tw-heading[b-0mahxs5zl8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tw-filters[b-0mahxs5zl8] {
        grid-template-columns: 1fr;
    }

    .tw-seg[b-0mahxs5zl8] {
        justify-self: start;
    }

    .tw-row[b-0mahxs5zl8] {
        grid-template-columns: 26px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank portraits count"
            "rank copy copy";
        row-gap: 4px;
    }

    .tw-row .tw-rank[b-0mahxs5zl8] { grid-area: rank; }
    .tw-row .tw-portraits[b-0mahxs5zl8] { grid-area: portraits; }
    .tw-row .tw-copy[b-0mahxs5zl8] { grid-area: copy; }
    .tw-row .tw-count[b-0mahxs5zl8] { grid-area: count; }

    .tw-count .tw-bar[b-0mahxs5zl8] {
        display: none;
    }
}

@media (max-width: 440px) {
    .tw-portraits img[b-0mahxs5zl8],
    .tw-portrait-missing[b-0mahxs5zl8] {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 360px) {
    .tw-portraits img[b-0mahxs5zl8],
    .tw-portrait-missing[b-0mahxs5zl8] {
        width: 34px;
        height: 34px;
    }
}