/* ================================================================
   Toss Payments Status Page — Unified CSS (2025-10-20, deduped)
   Includes:
   1) Core status page styles
   2) Status description box component
   ================================================================ */

.components-uptime-link {
    display: none;
}

.powered-by {
    mask-image: linear-gradient(transparent, transparent) !important;
    -webkit-mask-image: linear-gradient(transparent, transparent) !important;
    /* Safari 대비 */
    pointer-events: none !important;
}


/* =========================
   0) Design Tokens (:root)
   ========================= */

 :root {
    /* Typography */
    --font-family-main: 'Toss Product Sans', 'Tossface', -apple-system, BlinkMacSystemFont, 'Bazier Square', 'Noto Sans KR', 'Segoe UI', Apple SD Gothic Neo, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    /* Base colors */
    --text: #1f2937;
    --bg: #f7f8f9;
    --surface: #ffffff;
    --surface-muted: #f9f9f9;
    --border: #dee1e6;
    /* Brand */
    --brand: #3182f6;
    --brand-dark: #0050CC;
    /* Semantics */
    --success: #22C55E;
    --warn: #FFC007;
    --danger: #F44336;
    --maint: #3182f6;
    /* Text hues */
    --text-primary: #333D4B;
    --text-secondary: #8B95A1;
    /* Links */
    --link: #3182f6;
    /* Shadow */
    --shadow-rgb: 0, 0, 0;
    /* Radius */
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 5px;
}


/* =========================
   1) Global
   ========================= */

html,
body {
    font-family: var(--font-family-main) !important;
    letter-spacing: -0.15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

h2 {
    font-size: 25px !important;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    color: var(--brand-dark);
    text-decoration: none;
    opacity: 0.8;
}


/* =========================
   2) Header
   ========================= */

.masthead-container .masthead {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.03);
    padding-right: 20px;
    padding-bottom: 18px;
}

.page-status.status-none {
    display: none;
}


/* =========================
   3) Components (서비스 카드)
   ========================= */

.components-section {
    margin-top: 48px;
}

.components-container .component-container {
    background-color: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.02);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.component-inner-container {
    padding: 8px 0 !important;
}

.component-inner-container .name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary) !important;
}

.component-inner-container .component-status {
    font-weight: 600;
}

.status-green .component-status {
    color: var(--success);
}

.status-yellow .component-status {
    color: var(--warn);
}

.status-orange .component-status {
    color: #b45309;
}

.status-red .component-status {
    color: var(--danger);
}

.status-blue .component-status {
    color: var(--maint);
}


/* =========================
   4) Sections & Labels
   ========================= */

.scheduled-maintenances-container>h2.font-largest::before {
    content: "점검 예정 · ";
    margin-right: .1em;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.incidents-list.format-expanded>h2#past-incidents::before {
    content: "과거 이슈 · ";
    margin-right: .1em;
    font-weight: 600;
    letter-spacing: -0.2px;
}


/* =========================
   5) Updates
   ========================= */

.update strong::after {
    content: "\A";
    white-space: pre;
}

.update strong {
    font-weight: 800;
    margin-right: 6px;
    color: var(--text);
}

.update.postmortem strong,
.update.investigating strong,
.update.identified strong,
.update.monitoring strong,
.update.resolved strong {
    color: var(--text);
}

.updates-container .update {
    position: relative;
    padding: 12px 12px 10px 14px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.no-incidents {
    display: none;
}


/* 과거 이슈 영역 흐림 해제 */

.incidents-list.format-expanded {
    opacity: 1 !important;
}


/* =========================
   6) Incident list (월간)
   ========================= */

.month-content .incident-history .incident-list .incident-data a {
    color: var(--link) !important;
    font-weight: 500 !important;
}

.month-content .incident-history .incident-list .incident-data {
    position: relative;
    padding: 12px 12px 10px 14px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}


/* =========================
   7) Status summary list
   ========================= */

.status-list {
    position: relative;
    padding: 12px 12px 10px 14px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    opacity: 0.8;
    background: var(--surface-muted);
}


/* =========================
   8) Incident title + impact
   ========================= */

.incident-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
}

.incident-title a {
    color: var(--link) !important;
}

.incident-title.impact-minor {
    border-left: 6px solid var(--warn);
    padding-left: 10px;
}

.incident-title.impact-major {
    border-left: 6px solid var(--danger);
    padding-left: 10px;
}

.impact-major {
    color: #000 !important;
}


/* =========================
   9) Update rows (two-column)
   ========================= */

.update-row {
    position: relative;
    padding: 12px 20px 12px 0;
    margin: 5px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    opacity: 0.8;
    background: var(--surface);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.update-title {
    flex: 0 0 220px;
    margin-left: 0 !important;
    font-size: 24px !important;
}

.update-container {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================
   10) Footer
   ========================= */

.page-footer {
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    margin-top: 60px;
    padding-top: 30px;
}

.page-footer a {
    color: var(--text-secondary) !important;
}


/* =========================
   11) Layout tweaks
   ========================= */

.powered-by {
    display: none !important;
}

.row>.span9 {
    width: 100% !important;
}


/* =========================
   12) About section: Status description box
   ========================= */

.status-box {
    padding: 14px 18px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 620px;
    margin-bottom: -83px;
    margin-left: -17px;
    opacity: 0.9;
}

.status-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 16px;
}

.status-item {
    margin-bottom: 6px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 11px;
    color: #fff;
    min-width: 96px;
    text-align: center;
    opacity: 0.9;
}

.status-badge.operational {
    background-color: var(--brand);
}

.status-badge.degraded {
    background-color: var(--warn);
}

.status-badge.partial {
    background-color: #b35e14;
}

.status-badge.major {
    background-color: #e0311e;
}

@media (max-width: 600px) {
    .status-box {
        font-size: 14px;
        padding: 12px 14px;
    }
    .status-badge {
        font-size: 12px;
        min-width: 120px;
    }
}

.shared-partial.uptime-90-days-wrapper svg {
    height: 25px !important;
}


/* =========================
   One-column stacking (first card standalone, the rest grouped)
   ========================= */


/* 간격 제거 – 겹쳐 보이도록 */

.components-container.one-column .component-container {
    margin: 0;
}


/* 1) 첫 번째만 독립 카드 */

.components-container.one-column .component-container:first-of-type {
    border-radius: var(--radius-lg);
    margin-bottom: 40px;
}


/* 2) 두 번째부터 묶음 (윗선만) */

.components-container.one-column .component-container:nth-of-type(n+2) {
    border-radius: 0;
    border-top: 1px solid var(--border);
    border-bottom: 0 !important;
}


/* 3) 마지막 행 클로징 */

.components-container.one-column .component-container:nth-of-type(n+2):last-of-type {
    border-bottom: 1px solid var(--border) !important;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}


/* Hover */

.components-container.one-column .component-container:nth-of-type(n+2):hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.05);
}

.layout-content.status.status-index .components-section .component-container {
    padding: 1rem !important;
}

.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
    letter-spacing: 0px;
}

.spacer {
    display: none !important;
}


/* =========================
   13) Past Incidents — group updates into one card with timeline (Final v2)
   ========================= */


/* 날짜 헤더 */

.status-day .date {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 12px;
}


/* Incident 카드 */

.incidents-list.format-expanded .incident-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 14px 16px;
    margin: 16px 0;
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.02);
}


/* 타이틀: 임팩트 강조선 */

.incidents-list.format-expanded .incident-container .incident-title {
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 4px solid var(--warn);
}

.incidents-list.format-expanded .incident-container .incident-title.impact-major {
    border-left-color: var(--danger);
}

.incidents-list.format-expanded .incident-container .incident-title.impact-minor {
    border-left-color: var(--warn);
}

.incidents-list.format-expanded .incident-container .incident-title.impact-none {
    border-left-color: var(--brand);
}


/* 타임라인 */

.incidents-list.format-expanded .incident-container .updates-container {
    position: relative;
    margin-top: 6px;
    padding-left: 8px;
}

.incidents-list.format-expanded .incident-container .updates-container::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
    border-radius: 2px;
}


/* 업데이트 행 */

.incidents-list.format-expanded .incident-container .updates-container .update {
    position: relative;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 10px 12px 10px 34px;
}

.incidents-list.format-expanded .incident-container .updates-container .update+.update {
    border-top: 1px dashed var(--border);
}


/* 타임라인 점 */

.incidents-list.format-expanded .incident-container .updates-container .update::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 2px var(--surface);
    transform: translateX(-50%);
}


/* 상태별 점 색상 */

.incidents-list.format-expanded .incident-container .updates-container .update.investigating::before {
    background: var(--warn);
}

.incidents-list.format-expanded .incident-container .updates-container .update.identified::before {
    background: #b45309;
}

.incidents-list.format-expanded .incident-container .updates-container .update.monitoring::before {
    background: var(--maint);
}

.incidents-list.format-expanded .incident-container .updates-container .update.resolved::before {
    background: var(--success);
}

.incidents-list.format-expanded .incident-container .updates-container .update.postmortem::before {
    background: var(--text-secondary);
}


/* 상태 라벨 (한글) */

.resolved strong::before {
    content: "해소 | ";
    font-weight: 700;
    color: var(--text);
}

.investigating strong::before {
    content: "발생 | ";
    font-weight: 700;
    color: var(--text);
}

.identified strong::before {
    content: "원인 확인 | ";
    font-weight: 700;
    color: var(--text);
}

.monitoring strong::before {
    content: "모니터링 중 | ";
    font-weight: 700;
    color: var(--text);
}

.postmortem strong::before {
    content: "보고서 | ";
    font-weight: 700;
    color: var(--text);
}

.completed strong::before {
    content: "작업 완료 | ";
    font-weight: 700;
    color: var(--text);
}

.progress strong::before {
    content: "작업 중 | ";
    font-weight: 700;
    color: var(--text);
}

.scheduled strong::before {
    content: "작업 공지 | ";
    font-weight: 700;
    color: var(--text);
}


/* 타임스탬프 */

.incidents-list.format-expanded .incident-container .updates-container .update small {
    color: var(--text-secondary);
    font-size: 12px;
}


/* 첫 업데이트 강조 배경 제거 */

.incidents-list.format-expanded .incident-container .updates-container .update:first-child {
    background: transparent;
}

.layout-content.status .masthead-container .masthead {
    margin-bottom: 50px !important
}

#about-this-site {
    display: none;
}


/* Incident Detail — single card + timeline */

.incident-updates-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), .02);
    padding: 14px 16px;
    position: relative;
    padding-left: 8px;
}

.incident-updates-container>hr {
    display: none;
}

.incident-updates-container::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .06), rgba(0, 0, 0, .06));
    border-radius: 2px;
    margin-top: 30px;
    margin-bottom: 35px;
}

.incident-updates-container .row.update-row {
    position: relative;
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 12px 12px 12px 34px;
}

.incident-updates-container .row.update-row+.row.update-row {
    border-top: 1px dashed var(--border);
}

.incident-updates-container .row.update-row::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-secondary);
    box-shadow: 0 0 0 2px var(--surface);
    transform: translateX(-50%);
}


/* Typography */

.incident-updates-container .update-title {
    margin: 0 0 6px 0;
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.3;
}

.incident-updates-container .update-container .update-body {
    color: var(--text);
}

.incident-updates-container .update-container .update-timestamp {
    color: var(--text-secondary);
    margin-top: 6px;
}


/* Affected components footer */

.incident-updates-container .components-affected {
    margin-top: 12px;
    padding-left: 34px;
    border-top: 1px solid var(--border);
}

.components-affected {
    display: none;
}


/* =========================
   History (월별 리스트) — 단일 카드 + 타임라인
   DOM: .month .incident-history .incident-list (자식: .incident-data ...)
   ========================= */


/* 1) 리스트 전체를 하나의 카드로 */

.month .incident-history .incident-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.02);
    padding: 12px 16px;
    position: relative;
    padding-left: 8px;
    /* 좌측 레일 여백 */
    margin: 12px 0;
}


/* 좌측 세로 레일 */

.month .incident-history .incident-list::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .06), rgba(0, 0, 0, .06));
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 25px;
}


/* 2) 각 incident 행 평탄화 (개별 카드 느낌 제거) */

.month .incident-history .incident-list .incident-data.incident-container {
    position: relative;
    margin: 0;
    padding: 12px 12px 12px 34px;
    /* 타임라인 점 공간 */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


/* 행 구분선 (첫 행 제외) */

.month .incident-history .incident-list .incident-data.incident-container+.incident-data.incident-container {
    border-top: 1px dashed var(--border);
}


/* 3) 타임라인 점: 제목 앵커에 붙임 (impact 색상 적용) */

.month .incident-history .incident-list .incident-data .incident-title {
    display: block;
    margin: 0 0 4px 0;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1.35;
}

.month .incident-history .incident-list .incident-data .incident-title::before {
    content: "";
    position: absolute;
    /* 기준: .incident-data */
    left: 11px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    /* 기본색 */
    box-shadow: 0 0 0 2px var(--surface);
    transform: translateX(-50%);
    /* 레일 중앙 정렬 */
}


/* impact 별 점색 */

.month .incident-history .incident-list .incident-data .incident-title.impact-major::before {
    background: var(--danger);
}

.month .incident-history .incident-list .incident-data .incident-title.impact-minor::before {
    background: var(--warn);
}

.month .incident-history .incident-list .incident-data .incident-title.impact-maintenance::before {
    background: var(--brand);
}


/* 4) 메시지 영역 숨김 */

.month .incident-history .incident-list .incident-data .incident-body {
    display: none !important;
}


/* 5) 날짜(기간) 강조 */

.month .incident-history .incident-list .incident-data .secondary {
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.1px;
}


/* 6) 호버 살짝 띄우기 (리스트 전체가 아니라 각 행만) */

.month .incident-history .incident-list .incident-data.incident-container:hover {
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}


/* History timeline – hover & remove left color bars */


/* 1) 행 hover 배경 제거, 대신 제목 링크만 파란색 */

.month .incident-history .incident-list .incident-data.incident-container:hover {
    background: transparent;
}

.month .incident-history .incident-list .incident-data .incident-title:hover,
.month .incident-history .incident-list .incident-data .incident-title:focus-visible {
    color: var(--brand) !important;
    text-decoration: none;
    outline: none;
}


/* 2) 제목 앞 네모(좌측 컬러 바) 제거: 기존 글로벌 impact 스타일 무효화 */

.month .incident-history .incident-list .incident-data .incident-title {
    border-left: none !important;
    padding-left: 0 !important;
}


/* 혹시 행 자체에 왼쪽 보더가 들어오는 케이스도 방지 */

.month .incident-history .incident-list .incident-data.incident-container {
    border-left: none !important;
}

.history-nav {
    display: none;
}


/* =========================
   Unresolved Incidents — card style (match unified tone)
   ========================= */


/* 컨테이너 여백 */

.unresolved-incidents {
    margin: 18px 0 28px;
}


/* 1) 각 미해결 이슈를 "중립 카드"로 */

.unresolved-incidents .unresolved-incident {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface) !important;
    /* 노란 배경 제거 */
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.02);
    padding: 12px 16px;
}


/* 2) 제목 행: 왼쪽 점(●) + 오른쪽 Subscribe, 배경 제거 */

.unresolved-incidents .unresolved-incident .incident-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px 0;
    padding-left: 34px !important;
    text-shadow: none !important;
    /* 점 위치만큼 좌측 여백 */
    background: transparent !important;
    /* 노란 바 제거 */
    border: 0 !important;
}


/* 제목 앞 타임라인 점(●) — 기존 히스토리/타임라인과 동일 좌표 */

.unresolved-incidents .unresolved-incident .incident-title::before {
    content: "";
    position: absolute;
    left: 11px;
    /* 레일 중앙 정렬과 동일 */
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    /* 기본 */
    box-shadow: 0 0 0 2px var(--surface);
}


/* impact별 점 색상 */

.unresolved-incidents .unresolved-incident.impact-major .incident-title::before {
    background: var(--danger);
}

.unresolved-incidents .unresolved-incident.impact-minor .incident-title::before {
    background: var(--warn);
}

.unresolved-incidents .unresolved-incident.impact-maintenance .incident-title::before {
    background: var(--brand);
}


/* 제목 링크(hover 시 brand 컬러로) */

.unresolved-incidents .unresolved-incident .incident-title .actual-title {
    font-weight: 800;
    color: var(--text);
    line-height: 1.32;
}

.unresolved-incidents .unresolved-incident .incident-title .actual-title:hover,
.unresolved-incidents .unresolved-incident .incident-title .actual-title:focus-visible {
    color: var(--brand);
    text-decoration: none;
    outline: none;
}


/* 3) Subscribe 버튼: pill 버튼 톤 */

.unresolved-incidents .unresolved-incident .incident-title .subscribe {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    transition: box-shadow .2s ease, transform .2s ease;
}

.unresolved-incidents .unresolved-incident .incident-title .subscribe:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--shadow-rgb), .05);
    text-decoration: none;
}


/* 4) 최신 업데이트 영역 — 행 평탄화(카드 제거) + 점선 구분선 가능 */

.unresolved-incidents .unresolved-incident .updates .update {
    position: relative;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 6px 0 0 34px;
    /* 제목 행과 좌측 정렬 일치 */
    color: var(--text);
}

.unresolved-incidents .unresolved-incident .updates .update+.update {
    border-top: 1px dashed var(--border);
}


/* 상태 텍스트(한글 라벨은 기존 글로벌 규칙 유지) + 타임스탬프 */

.unresolved-incidents .unresolved-incident .updates .update strong {
    font-weight: 800;
    color: var(--text);
}

.unresolved-incidents .unresolved-incident .updates .update small {
    color: var(--text-secondary);
    font-size: 12px;
}


/* 5) 여러 미해결 이슈가 있을 때 균등 간격 */

.unresolved-incidents .unresolved-incident+.unresolved-incident {
    margin-top: 12px;
}


/* (선택) 모달 간단 톤 정리 – 기본 버튼 유지, 헤더 여백만 살짝 */

.modal.modal-open-incident-subscribe .modal-header {
    padding: 12px 16px;
}

.unresolved-incident .updates {
    border: none !important
}


/* Unresolved incident header 색상 정리 */

.unresolved-incidents .unresolved-incident {
    background: var(--surface) !important;
    /* 흰색 카드 */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}


/* 제목행 색상 통일 */

.unresolved-incidents .unresolved-incident .incident-title {
    background: transparent !important;
    /* 노란 배경 제거 */
    border: none !important;
}


/* 제목 링크 */

.unresolved-incidents .unresolved-incident .incident-title .actual-title {
    color: var(--text-primary) !important;
    font-weight: 800;
}

.unresolved-incidents .unresolved-incident .incident-title .actual-title:hover {
    color: var(--brand) !important;
}


/* 상태 점 (impact별 색상 유지) */

.unresolved-incidents .unresolved-incident .incident-title::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}

.unresolved-incidents .unresolved-incident.impact-major .incident-title::before {
    background: var(--danger);
}

.unresolved-incidents .unresolved-incident.impact-minor .incident-title::before {
    background: var(--warn);
}

.unresolved-incidents .unresolved-incident.impact-maintenance .incident-title::before {
    background: var(--brand);
}


/* Subscribe 버튼 – 얇은 선만 유지 */

.unresolved-incidents .unresolved-incident .incident-title .subscribe {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 12px;
}

.unresolved-incidents .unresolved-incident .incident-title .subscribe:hover {
    background: var(--surface-muted);
    text-decoration: none;
}


/* =========================
   LIVE feel for Unresolved Incident
   - Pulsing status dot
   - Indeterminate 1px progress bar
   - Emphasize latest update row
   - Reduced-motion friendly
   ========================= */


/* 0) 공통 여백 정돈 (이미 적용돼 있으면 생략 가능) */

.unresolved-incidents .unresolved-incident {
    position: relative;
    /* 진행바용 기준 */
    overflow: hidden;
    /* 진행바가 라운드 밖으로 새지 않게 */
}


/* 1) 맥박 점: 제목 왼쪽 ● 에 부드러운 호흡 애니메이션 */

@keyframes tp-pulse-dot {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: .5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .9;
    }
}

.unresolved-incidents .unresolved-incident .incident-title::before {
    animation: tp-pulse-dot 2.2s ease-in-out infinite;
}


/* 2) 인디터미넌트 1px 진행바(카드 상단) */

@keyframes tp-indeterminate {
    0% {
        background-position-x: -120%;
    }
    100% {
        background-position-x: 220%;
    }
}

.unresolved-incidents .unresolved-incident::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 8px;
    /* brand 계열 슬라이딩 하이라이트 */
    background-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 100, 255, .25) 45%, rgba(0, 100, 255, .55) 55%, rgba(0, 100, 255, .25) 65%, transparent 100%);
    background-size: 180% 100%;
    animation: tp-indeterminate 2.6s linear infinite;
    pointer-events: none;
}


/* (선택) 점검/유지보수만 노출 제한하고 싶다면 아래 주석 해제
  .unresolved-incidents .unresolved-incident.impact-maintenance::after { display: none; }
  */


/* 3) 최신 업데이트 행 강조: 첫 번째 update만 살짝 더 진하게 */

.unresolved-incidents .unresolved-incident .updates .update:first-child strong {
    color: var(--text);
    font-weight: 900;
}

.unresolved-incidents .unresolved-incident .updates .update:first-child small {
    color: var(--text-primary);
    font-weight: 600;
}

.unresolved-incidents .unresolved-incident .updates .update:first-child+.update {
    border-top: 1.5px dashed var(--border);
    /* 다음 행과의 경계만 살짝 진하게 */
}


/* 4) 상대시간(ago) 칩 스타일 – 작게, 눈에 띄게 */

.unresolved-incidents .unresolved-incident .updates .update small .ago {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-weight: 600;
}


/* 5) 접근성: 애니메이션 최소화 설정을 존중 */

@media (prefers-reduced-motion: reduce) {
    .unresolved-incidents .unresolved-incident .incident-title::before,
    .unresolved-incidents .unresolved-incident::after {
        animation: none !important;
    }
}
.unresolved-incidents{border-bottom: 1px solid #e0e0e0;
    padding-bottom: 54px;}