/* 공통 화면 부품(/kit/kit.css)에 MARKET NEXUS 색을 잇는다. 색 이름은 style.css 맨 위 토큰을 따르므로
   화면 모드(theme.js가 붙이는 <html data-theme="light|dark">)가 바뀌면 관리 화면·내 계정 창도 저절로 같이 바뀐다.
   관리 화면(admin.html)과 대시보드(index.html: 내 계정 창·새 비밀번호 창)가 함께 쓴다 */
:root {
  --ak-bg: var(--bg); --ak-card: var(--card); --ak-line: var(--line); --ak-text: var(--text); --ak-dim: var(--muted); --ak-faint: #6c7487;
  --ak-accent: var(--accent); --ak-accent-text: var(--on-accent); --ak-accent-soft: rgba(var(--accent-rgb), .13);
  --ak-good: #4cc38a; --ak-good-soft: rgba(76, 195, 138, .14);
  --ak-warn: #e8b13c; --ak-warn-soft: rgba(232, 177, 60, .14);
  --ak-bad: #f0554f; --ak-bad-soft: rgba(240, 85, 79, .15);
  --ak-radius: 10px; --ak-shadow: var(--card-shadow);
  --ak-font: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}
:root[data-theme="light"] {
  --ak-faint: #7a8291;
  --ak-good: #1f8a57; --ak-good-soft: #e3f4ea;
  --ak-warn: #a86e00; --ak-warn-soft: #fff3dc;
  --ak-bad: #d42a24; --ak-bad-soft: #fdeceb;
}
/* 머리줄 서비스 이름: 대시보드와 같은 무지개 글자 */
.ak-brand b { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .08em; font-size: 15px; }

/* ---------- MARKET NEXUS만의 화면 (관심종목 · 데이터 소스 · 이용) ---------- */
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ak-faint); flex: none; }
.st-dot.good { background: var(--ak-good); }
.st-dot.warn { background: var(--ak-warn); }
.st-dot.bad { background: var(--ak-bad); }
.st-bad { color: var(--ak-bad); }

/* 순위 (많이 담은 종목) */
.st-rank { display: grid; }
.st-rank-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ak-line); }
.st-rank-row:first-child { border-top: 0; }
.st-rank-n { font-weight: 700; color: var(--ak-dim); text-align: center; font-variant-numeric: tabular-nums; }
.st-rank-main { min-width: 0; display: grid; gap: 3px; }
.st-rank-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rank-main small { color: var(--ak-dim); font-size: 13px; }
.st-rank-end { font-variant-numeric: tabular-nums; color: var(--ak-dim); font-size: 14px; }
.st-bar { height: 4px; border-radius: 2px; background: var(--ak-line); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--ak-accent); border-radius: 2px; }

/* 사람별 관심종목 */
.st-wusers { display: grid; }
.st-wuser { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--ak-line); align-items: start; }
.st-wuser:first-child { border-top: 0; }
.st-wuser.on { background: var(--ak-accent-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.st-wuser-who { display: grid; color: var(--ak-text); text-decoration: none; min-width: 0; }
.st-wuser-who small { color: var(--ak-dim); font-size: 13px; }
.st-wuser .ak-chips { flex-wrap: wrap; }

/* 데이터 소스 카드 */
.st-group + .st-group { margin-top: 14px; }
.st-group h3 { margin: 0 0 8px; font-size: 14px; color: var(--ak-dim); font-weight: 600; }
.st-srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.st-src { border: 1px solid var(--ak-line); border-radius: 8px; padding: 10px 12px; background: var(--ak-bg); min-width: 0; }
.st-src.warn { border-color: var(--ak-warn); }
.st-src.bad { border-color: var(--ak-bad); }
.st-src-top { display: flex; align-items: center; gap: 8px; }
.st-src-top b { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-src-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--ak-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-src-msg { margin-top: 6px; font-size: 13px; color: var(--ak-warn); overflow-wrap: anywhere; }
.st-src.bad .st-src-msg { color: var(--ak-bad); }

/* 일일 점검 */
.st-checks { display: grid; }
.st-check { display: grid; grid-template-columns: 8px minmax(90px, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--ak-line); font-size: 14px; }
.st-check:first-child { border-top: 0; }
.st-check b { font-weight: 600; }
.st-check-detail { color: var(--ak-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-check.fail .st-check-detail { color: var(--ak-bad); white-space: normal; }

/* 장애 내역 (날짜별) */
#st-incidents { scroll-margin-top: 130px; }
.st-timeline { display: grid; }
.st-day { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--ak-dim); }
.st-day:first-child { margin-top: 4px; }
.st-ev { display: grid; grid-template-columns: 48px 10px minmax(0, 1fr); gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--ak-line); }
.st-day + .st-ev { border-top: 0; }
.st-ev time { color: var(--ak-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-ev .st-dot { margin-top: 7px; }
.st-ev-body { min-width: 0; display: grid; gap: 4px; }
.st-ev-body b { font-weight: 600; }
.st-ev-body p { margin: 0; color: var(--ak-dim); font-size: 13px; overflow-wrap: anywhere; }
.st-ev.open .st-ev-body b { color: var(--ak-bad); }
.st-ev.event { opacity: .7; }
.st-ev .ak-chips { flex-wrap: wrap; }

/* 사람별 이용 */
.st-ulist { display: grid; }
.st-urow { display: grid; grid-template-columns: minmax(0, 1.2fr) auto 120px; grid-template-areas: 'who seen spark' 'nums nums nums'; gap: 6px 12px; align-items: center;
  padding: 10px 6px; border-top: 1px solid var(--ak-line); color: var(--ak-text); text-decoration: none; border-radius: 6px; }
.st-urow:first-child { border-top: 0; }
@media (hover: hover) { .st-urow:hover { background: var(--ak-bg); } }
.st-urow-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.st-urow-who small { color: var(--ak-dim); font-size: 13px; }
.st-urow-seen { grid-area: seen; }
.st-spark { grid-area: spark; display: flex; align-items: flex-end; gap: 1px; height: 22px; }
.st-spark i { flex: 1; background: var(--ak-line); border-radius: 1px; min-width: 1px; }
.st-spark i.on { background: var(--ak-accent); }
.st-urow-nums { grid-area: nums; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
.st-urow-nums small { color: var(--ak-dim); font-size: 12px; margin-right: 4px; }

@media (max-width: 560px) {
  .st-wuser { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-urow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who seen' 'spark spark' 'nums nums'; }
  .st-check { grid-template-columns: 8px minmax(0, 1fr); }
  .st-check-detail { grid-column: 2; white-space: normal; }
  .st-ev { grid-template-columns: 42px 10px minmax(0, 1fr); }
}

/* ---------- 대시보드(index.html)에서 내 계정 창 위 글자 크기: 대시보드는 글자가 작아 부품 창만 보통 크기로 ---------- */
.dash-page .ak-sheet, .dash-page .ak-dialog { font-size: 16px; }
.dash-page { --ak-toast-fs: 16px; }

/* 로그인 화면의 가입 신청 안내 칸 */
.login-pending { width: 100%; margin: 0; padding: 22px; display: grid; gap: 14px; }
.login-pending h1 { font-size: 20px; }

/* 기능 사용 표 (관리 › 이용) */
.fu-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fu-list { display: grid; margin-top: 8px; }
.fu-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 72px 56px 64px 44px; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--ak-line); font-size: 14px; }
.fu-head { color: var(--ak-faint); font-size: 12px; border-top: 0; padding-top: 0; }
.fu-group { margin-top: 12px; padding: 4px; font-size: 13px; font-weight: 700; color: var(--ak-dim); }
.fu-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.fu-meter { height: 6px; border-radius: 3px; background: var(--ak-line); overflow: hidden; }
.fu-meter i { display: block; height: 100%; background: var(--ak-accent); }
.fu-nums { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-nums small { margin-left: 4px; color: var(--ak-faint); font-size: 12px; }
.fu-dim { color: var(--ak-faint); font-size: 13px; }
@media (max-width: 599.98px) {
  /* 휴대폰: 이름 한 줄, 아래에 막대·숫자 */
  .fu-row { grid-template-columns: minmax(0, 1fr) 64px 48px 40px; grid-template-areas: 'name name name name' 'meter users count last'; gap: 4px 8px; }
  .fu-row > :nth-child(1) { grid-area: name; } .fu-row > :nth-child(2) { grid-area: meter; } .fu-row > :nth-child(3) { grid-area: users; }
  .fu-row > :nth-child(4) { grid-area: count; } .fu-row > :nth-child(5) { display: none; } .fu-row > :nth-child(6) { grid-area: last; }
  .fu-head { display: none; }
}