/* /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; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* 레이아웃 스타일은 wwwroot/css/app.css 의 전역 규칙(.app-header, .app-body 등)으로 관리.
   NavLink가 렌더하는 <a>에는 scope 속성이 안 붙어 scoped css가 안 먹으므로 전역에 둔다. */
/* /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: 70px;
    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;
}

.guide-tags[b-lptizj38ym],
.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;
}

.guide-tags span[b-lptizj38ym],
.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-tags[b-lptizj38ym] { margin-top: 9px; }
.guide-tags span[b-lptizj38ym] { border-color: transparent; color: var(--accent); }

.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-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-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; }
.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;
}

@media (max-width: 860px) {
    .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/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: .6rem; }
    .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);
    }
}