* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #3c4043;
  font-family: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: #1a73e8; }

/* 헤더 */
.header { border-bottom: 1px solid #dadce0; background: #fff; }
.header__inner {
  max-width: 960px; margin: 0 auto; padding: 0 24px; height: 56px;
  display: flex; align-items: center; gap: 24px;
}
.header__title { font-size: 18px; color: #202124; }
.header__nav { display: flex; gap: 18px; margin-left: auto; }
.header__nav a { color: #5f6368; text-decoration: none; font-size: 13px; }
.header__nav a:hover, .header__nav a.active { color: #1a73e8; }

.container { max-width: 960px; margin: 0 auto; padding: 28px 24px; }

/* 요약 */
.summary { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
#summary-text { font-size: 16px; color: #202124; }
.summary__time { font-size: 12px; color: #5f6368; }

/* 상태 색 */
.st-operational { color: #1e8e3e; }
.st-operational::before { background: #1e8e3e; }
.st-maintenance { color: #1a73e8; }
.st-maintenance::before { background: #1a73e8; }
.st-degraded { color: #b06000; }
.st-degraded::before { background: #f9ab00; }
.st-down { color: #c5221f; }
.st-down::before { background: #d93025; }
[class*="st-"]::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  margin-right: 6px; vertical-align: middle;
}

/* 진행 중 장애 배너 */
.active-incidents { margin-bottom: 24px; }
.banner {
  border-left: 3px solid #d93025; background: #fce8e6;
  padding: 12px 16px; margin-bottom: 8px;
}
.banner--minor, .banner--maintenance { border-left-color: #f9ab00; background: #fef7e0; }
.banner--maintenance { border-left-color: #1a73e8; background: #e8f0fe; }
.banner__top { display: flex; align-items: baseline; gap: 10px; }
.banner__title { font-size: 14px; color: #202124; font-weight: 500; }
.banner__phase { font-size: 12px; color: #5f6368; }
.banner__msg { font-size: 13px; color: #5f6368; margin-top: 4px; }
.banner__time { font-size: 11px; color: #80868b; margin-top: 4px; }

/* 탭 */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid #dadce0; margin-bottom: 4px; }
.tab {
  background: none; border: none; padding: 10px 2px; font-size: 14px; color: #5f6368;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.tab--active { color: #1a73e8; border-bottom-color: #1a73e8; }

/* 일 탭 날짜 네비게이션 */
.day-nav { display: none; align-items: center; gap: 10px; margin: 14px 0 6px; }
.angle {
  width: 30px; height: 30px; border: 1px solid #dadce0; background: #fff;
  color: #3c4043; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 2px;
}
.angle:hover { background: #f1f3f4; }
.angle[disabled] { color: #bdc1c6; cursor: default; background: #fff; }
.day-nav input[type="date"] {
  padding: 6px 10px; border: 1px solid #dadce0; font-family: inherit; font-size: 13px; color: #3c4043;
}
.day-range { font-size: 13px; color: #5f6368; min-width: 200px; text-align: center; }

/* 컴포넌트 행 + 막대 */
.row { padding: 18px 0; border-bottom: 1px solid #ececec; }
.row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.row__name { font-size: 15px; color: #202124; }
.row__desc { font-size: 12px; color: #5f6368; margin-left: 8px; }
.row__status { font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.bar { flex: 1; height: 100%; background: #1e8e3e; min-width: 7px; border-radius: 1px; transition: opacity .1s; }
.bar--degraded { background: #f9ab00; }
.bar--down { background: #d93025; }
.bar--maintenance { background: #1a73e8; }
.bar--nodata { background: #dadce0; }
.bar:hover { opacity: 0.7; }

/* 준비 중 컴포넌트 (형식만 · 블러 · 상태색 숨김) */
.row--soon { opacity: 0.85; }
.row__status--soon { font-size: 13px; color: #80868b; }
.bars-wrap { position: relative; }
.bar--soon { background: #e8eaed !important; }
.bars--blur { filter: blur(4px); pointer-events: none; user-select: none; }
.bars__soon-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #5f6368; letter-spacing: 1px;
}

/* 커스텀 툴팁 */
.tip {
  position: fixed; z-index: 100; pointer-events: none;
  background: #202124; color: #fff; padding: 8px 10px; font-size: 12px;
  line-height: 1.5; max-width: 240px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tip__time { color: #bdc1c6; margin-bottom: 2px; }
.tip__note { color: #fdd663; margin-top: 2px; }

/* phase 배지 */
.badge--phase { background: #5f6368; }
.phase--ongoing { background: #1e8e3e; }
.phase--scheduled { background: #1a73e8; }
.phase--ended { background: #80868b; }
.bars__axis { display: flex; justify-content: space-between; font-size: 11px; color: #80868b; margin-top: 6px; }
.bars__axis span { white-space: nowrap; }

/* 섹션 제목 */
.section-title { font-size: 13px; color: #5f6368; margin: 32px 0 8px; text-transform: none; }

/* 장애 이력 리스트 */
.incident { padding: 16px 0; border-bottom: 1px solid #ececec; }
.incident__head { display: flex; align-items: baseline; gap: 10px; }
.incident__title { font-size: 15px; color: #202124; }
.badge {
  font-size: 11px; padding: 2px 8px; color: #fff; background: #5f6368; line-height: 1.6;
}
.badge--critical { background: #d93025; }
.badge--major { background: #e8710a; }
.badge--minor { background: #f9ab00; color: #3c4043; }
.badge--maintenance { background: #1a73e8; }
.incident__date { font-size: 12px; color: #80868b; margin-left: auto; }
/* 요약 카드 (클릭 → 전체 글) */
.incident-summary {
  display: block; text-decoration: none; color: inherit;
  padding: 16px 0; border-bottom: 1px solid #ececec;
}
.incident-summary:hover .incident__title { color: #1a73e8; }
.incident__summary { font-size: 13px; color: #5f6368; line-height: 1.6; margin: 6px 0 4px; }
.incident__more { font-size: 12px; color: #1a73e8; }

.create-link { margin-top: 12px; font-size: 13px; color: #1e8e3e; }
.create-link a { word-break: break-all; }

.incident__detail { font-size: 14px; color: #3c4043; line-height: 1.7; margin: 12px 0; white-space: pre-wrap; }
.ext-link { font-size: 12px; color: #1a73e8; text-decoration: none; margin-left: 6px; }
.ext-link:hover { text-decoration: underline; }
.update { padding: 8px 0 8px 16px; border-left: 2px solid #ececec; margin: 8px 0 0 4px; }
.update__phase { font-size: 12px; font-weight: 500; }
.update__msg { font-size: 13px; color: #3c4043; margin: 2px 0; }
.update__time { font-size: 11px; color: #80868b; }
.empty { color: #80868b; padding: 24px 0; }

/* 폼 / 관리자 */
.card { border: 1px solid #dadce0; padding: 20px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: #5f6368; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; font-size: 14px; font-family: inherit;
  border: 1px solid #dadce0; background: #fff; color: #3c4043;
}
.field textarea { min-height: 72px; resize: vertical; }
.checks { display: flex; gap: 16px; }
.checks label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #3c4043; }
.checks input { width: auto; }
.btn {
  padding: 8px 18px; font-size: 14px; font-family: inherit; cursor: pointer;
  border: 1px solid #1a73e8; background: #1a73e8; color: #fff;
}
.btn:hover { background: #1666c1; }
.btn--text { background: none; color: #1a73e8; border-color: transparent; }
.btn--danger { background: none; color: #c5221f; border-color: transparent; padding: 4px 8px; font-size: 12px; }
.msg-error { color: #c5221f; font-size: 13px; margin-top: 8px; }
.hidden { display: none; }
.admin-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.admin-bar .grow { flex: 1; }

/* 관리자 섹션/레이아웃 */
.admin-section { margin-top: 20px; }
.tabs--sub { gap: 18px; margin-bottom: 16px; }
.hint { font-size: 12.5px; color: #5f6368; line-height: 1.6; margin: 0 0 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
.comp-card { padding: 16px 20px; margin-bottom: 14px; }
.comp-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.comp-card__head b { font-size: 15px; color: #202124; }

/* 관리자 이벤트 카드 (얕은 그레이 보더 박스) */
.ev-card {
  border: 1px solid #e0e3e7; border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; background: #fff;
}
.ev-card--edit { border-color: #c6dafc; background: #fafbff; }
.ev-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ev-card__head .incident__title { font-size: 15px; }
.ev-edit { margin-left: auto; }
.ev-meta { font-size: 12.5px; color: #5f6368; margin: 3px 0; }
.ev-section { font-size: 12px; color: #80868b; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid #eee; }
.muted { color: #9aa0a6; font-size: 13px; }

/* 타임라인 (보기) */
.tl__item { padding: 8px 0 8px 12px; border-left: 2px solid #e8eaed; margin-bottom: 6px; }
.tl__msg { font-size: 13px; color: #3c4043; line-height: 1.5; }
.tl__time { font-size: 11px; color: #80868b; margin-top: 2px; }

/* 경과 추가 행 / 타임라인 수정 */
.ev-addrow { margin-top: 12px; }
.ev-addrow textarea, .tl-edit textarea {
  width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid #dadce0;
  font-family: inherit; font-size: 13px; resize: vertical;
}
.ev-addrow input[type="url"], .tl-edit input {
  width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid #dadce0; font-family: inherit; font-size: 13px;
}
.ev-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tl-edit { padding: 10px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 8px; background: #fff; }

/* 페이저 */
.pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pager__info { font-size: 12px; color: #5f6368; }
.btn[disabled] { color: #bdc1c6; cursor: default; }