/* ================================================================ */
/* ======    Toss Payments 상태 페이지 - 한글 가독성 및 디자인 개선    ====== */
/* ================================================================ */

/* Pretendard 웹폰트를 CDN을 통해 불러옵니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');


/* 1) 타이포그래피: 한국어 가독성 폰트 스택 + 밀도/행간 최적화 */
/* ---------------------------------------------------------------- */

/* :root -> CSS 전역에서 사용할 변수를 정의합니다. 색상, 폰트 등을 일관되게 관리할 수 있습니다. */
:root {
    /* 페이지의 주요 색상 시스템 변수들입니다. */
    --accent: #1463FF;
    /* 포인트 컬러 */
    --text: #1f2937;
    /* 본문 텍스트 */
    --muted: #6b7280;
    /* 보조 텍스트 */
    --bg: #F7F9FC;
    /* 페이지 배경 */
    --card: #ffffff;
    /* 카드 배경 */
    --border: #E5E7EB;
    /* 구분선 */

    /* 상태별 시멘틱 색상 변수입니다. */
    --success: #16a34a;
    /* 성공 (정상 작동) */
    --warn: #f59e0b;
    /* 경고 (성능 저하) */
    --danger: #ef4444;
    /* 위험 (부분/전체 장애) */
    --maint: #0ea5e9;
    /* 점검 */

    /* 토스 디자인 시스템에 맞춘 색상 변수들입니다. */
    --toss-blue: #0064FF;
    --toss-blue-dark: #0050CC;
    --toss-green: #22C55E;
    --toss-red: #F44336;
    --toss-orange: #FF9800;
    --toss-yellow: #FFC007;
    --toss-text-primary: #333D4B;
    --toss-text-secondary: #8B95A1;
    --toss-background: #F9FAFB;
    --toss-border: #E5E8EB;
    --toss-white: #FFFFFF;

    /* 기본 폰트 스택을 정의합니다. Pretendard를 우선으로 사용하고, 없을 경우 시스템 기본 폰트를 순차적으로 적용합니다. */
    --font-family-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

/* 페이지 전체의 기본 폰트, 글자 및 줄 간격, 색상을 설정합니다. */
html,
body {
    font-family: "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo",
        "Malgun Gothic", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important;
    letter-spacing: -0.15px;
    /* 한글 자간을 미세하게 조정하여 가독성을 높입니다. */
    line-height: 1.6;
    /* 기본 줄 간격을 설정합니다. */
    color: var(--text);
    /* 기본 텍스트 색상을 적용합니다. */
    background: var(--bg);
    /* 페이지 전체 배경색을 적용합니다. */
}
          
h2{
            font-size:25px !important;
          }

/* 모든 링크(<a> 태그)의 기본 스타일을 설정합니다. */
a {
    color: var(--toss-blue);
    /* 토스 블루 색상을 적용합니다. */
    text-decoration: none;
    /* 밑줄을 제거합니다. */
    transition: opacity 0.2s ease;
    /* 부드러운 전환 효과를 추가합니다. */
}

/* 링크에 마우스를 올렸을 때의 스타일입니다. */
a:hover {
    color: var(--toss-blue-dark);
    /* 더 진한 파란색으로 변경합니다. */
    text-decoration: none;
    opacity: 0.8;
    /* 투명도를 살짝 줍니다. */
}


/* 2. 헤더 및 상단 영역 */
/* ---------------------------------------------------------------- */

/* 페이지 최상단 헤더 영역의 스타일입니다. */
.masthead-container .masthead {
    border-bottom: 1px solid var(--toss-border);
    /* 헤더 하단에 1px 구분선을 추가합니다. */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    /* 부드러운 그림자 효과를 줍니다. */
    padding-right: 20px;
    /* 오른쪽 여백을 추가하여 균형을 맞춥니다. */
}

/* 'All Systems Operational' 상태 메시지 바를 숨겨서 페이지를 더 깔끔하게 보여줍니다. */
.page-status.status-none {
    display: none;
}


/* 4. 컴포넌트(서비스) 목록 - 카드 디자인 적용 */
/* ---------------------------------------------------------------- */

/* 컴포넌트 섹션 상단에 여백을 줍니다. */
.components-section {
    margin-top: 48px;
}

/* 각 서비스 상태를 나타내는 영역을 카드 형태로 디자인합니다. */
.components-container .component-container {
    background-color: var(--toss-white);
    /* 카드 배경색을 흰색으로 지정합니다. */
    border: 1px solid var(--toss-border);
    /* 옅은 회색 테두리를 추가합니다. */
    border-radius: 16px;
    /* 모서리를 둥글게 처리합니다. */
    padding: 16px 24px;
    /* 카드 내부 여백을 설정합니다. */
    margin-bottom: 12px;
    /* 카드 간의 하단 간격을 설정합니다. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    /* 은은한 그림자 효과를 줍니다. */
    transition: all 0.2s ease-in-out;
    /* 모든 속성 변경에 부드러운 전환 효과를 적용합니다. */
}

/* 카드에 마우스를 올렸을 때 살짝 위로 떠오르는 효과와 그림자 강조 효과를 추가합니다. */
.components-container .component-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* 카드 내부 컨테이너의 기본 패딩을 조정합니다. */
.component-inner-container {
    padding: 8px 0 !important;
}

/* 서비스 이름 텍스트의 스타일입니다. */
.component-inner-container .name {
    font-size: 1.1rem;
    /* 폰트 크기를 살짝 키웁니다. */
    font-weight: 600;
    /* 폰트 굵기를 두껍게 합니다. */
    color: var(--toss-text-primary) !important;
    /* 기본 텍스트 색상을 적용합니다. */
}

/* 서비스 상태 텍스트의 폰트 굵기를 설정합니다. */
.component-inner-container .component-status {
    font-weight: 600;
}

/* 'No incidents reported' 메시지를 숨겨서, 이슈가 없을 때 타임라인을 깔끔하게 유지합니다. */
.no-incidents {
    display: none;
}

/* 각 서비스 상태(정상, 성능 저하 등)를 나타내는 칩(Chip) 디자인입니다. */
/* 상태별로 다른 배경색과 테두리 색을 지정하여 시각적 구분을 명확하게 합니다. */

/* 정상 상태 (초록색) */
.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);

}

/* 'Scheduled Maintenance' 제목 앞에 한글 제목 '점검 예정 · '을 추가합니다. */
.scheduled-maintenances-container>h2.font-largest::before {
    content: "점검 예정 · ";
    margin-right: .1em;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* 'Past Incidents' 제목 앞에 한글 제목 '과거 이슈 · '를 추가합니다. */
.incidents-list.format-expanded>h2#past-incidents::before {
    content: "과거 이슈 · ";
    margin-right: .1em;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* 업데이트 상태(Resolved 등) 텍스트 뒤에 강제로 줄바꿈을 추가하여 본문 내용과 분리합니다. */
.update strong::after {
    content: "\A";
    /* 줄바꿈 문자 */
    white-space: pre;
    /* \A를 실제 개행으로 렌더링 */
}

/* Postmortem(사후 보고서) 링크 앞에 '자세히 보기 · ' 텍스트를 추가합니다. */
.update.postmortem a[href^="/incidents/"]::before {
    content: "자세히 보기 · ";
    font-weight: 500;
    letter-spacing: -0.2px;
}

/* 기본 영문 상태 텍스트를 한글로 대체하기 위해 ::before 가상 요소를 사용합니다. */
/* 각 상태에 맞는 한글 텍스트와 스타일을 지정합니다. */
.update strong {
    color: var(--text);
}

/* Resolved -> 해소 */
.resolved::before {
    content: "해소 | ";
    font-weight: bold;
    color: var(--text);
    left: 0;
}

/* Investigating -> 발생 */
.investigating::before {
    content: "발생 | ";
    color: var(--text);
    font-weight: bold;
    left: 0;
}

/* Identified -> 원인 확인 */
.identified::before {
    content: "원인 확인 | ";
    color: var(--text);
    font-weight: bold;
    left: 0;
}

/* Monitoring -> 모니터링 중 */
.monitoring::before {
    content: "모니터링 중 | ";
    color: var(--text);
    font-weight: bold;
    left: 0;
}

/* Postmortem -> 보고서 */
.postmortem::before {
    content: "보고서 | ";
    color: var(--text);
    font-weight: bold;
    left: 0;
}


/* 상태별로 다른 색상을 부여하여 시각적 구분을 돕습니다. */
.update.postmortem strong {
    color: var(--text);
}

.update.investigating strong {
    color: var(--text);
}

.update.identified strong {
    color: var(--text);
}

.update.monitoring strong {
    color: var(--text);
}

.update.resolved strong {
    color: var(--text);
}

/* 9) 인시던트 리스트: 제목/상태칩/타임라인 강조 */
/* ---------------------------------------------------------------- */

/* 장애/이슈 제목의 스타일을 정의합니다. flex를 이용해 정렬하고 폰트 굵기를 강조합니다. */
.incident-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
}

/* 제목 안의 링크 색상을 기본 텍스트 색상과 동일하게 맞춥니다. */
.incident-title a {
    color: var(--text) !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;
}

/* 각 업데이트 내용을 담는 컨테이너를 카드 형태로 꾸밉니다. */
.updates-container .update {
    position: relative;
    padding: 12px 12px 10px 14px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
}

/* 업데이트 카드 내의 상태 텍스트(strong 태그) 스타일입니다. */
.update strong {
    font-weight: 800;
    margin-right: 6px;
}


/* Past Incidents 전체를 옅게 처리 */
.incidents-list.format-expanded {
    opacity: 0.75; /* 80% 투명도로 설정. 0.7~0.9 사이에서 조절해 보세요. */
}

/* 8. 푸터 */
/* ---------------------------------------------------------------- */

/* 페이지 하단 푸터 영역의 스타일입니다. */
.page-footer {
    border-top: 1px solid var(--toss-border);
    /* 상단 구분선을 추가합니다. */
    color: var(--toss-text-secondary);
    /* 보조 텍스트 색상을 적용합니다. */
    margin-top: 60px;
    /* 위쪽 여백을 설정합니다. */
    padding-top: 30px;
    /* 안쪽 위 여백을 설정합니다. */
}

/* 푸터 내 링크 색상을 보조 텍스트 색상과 통일합니다. */
.page-footer a {
    color: var(--toss-text-secondary) !important;
}