/* kousagi.moe 공용 스타일
   레이아웃 개념: 새벽 하늘(라이트)과 밤 하늘(다크) 위에 달 하나. 강조는 달빛 한 가지만 쓰고,
   상태 색(정상/주의/장애)은 강조색과 따로 둔다. 본문은 왼쪽 정렬. */

:root {
  /* 색 (라이트: 새벽) */
  --sky: #E9EBF3;        /* 배경 */
  --paper: #F7F8FB;      /* 떠 있는 면 */
  --ink: #1D2042;        /* 본문 */
  --ink-2: #575B7A;      /* 보조 글자 */
  --line: #CDD1E0;       /* 구분선 */
  --moon: #A97C12;       /* 달빛 강조 (라이트에서는 진하게) */
  --usagi: #B8405F;      /* 토끼 귀 색, 아주 작게만 */
  --moon-disc: #F4E6B6;
  --moon-mare: #C9B37A;
  --moon-shadow: rgba(29, 32, 66, .86);
  --ok: #24805F;
  --warn: #A56A10;
  --bad: #BE3A34;
  --off: #8A8FA8;
  --ok-bg: #DCEFE7;
  --warn-bg: #F6E9D1;
  --bad-bg: #F6DEDC;
  --off-bg: #E3E5EE;

  /* 글꼴 */
  --f-display: "M PLUS Rounded 1c", "IBM Plex Sans KR", system-ui, sans-serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* 크기 (1.25 배율) */
  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.563rem;
  --t-2xl: 1.953rem;
  --t-hero: clamp(3rem, 6.6vw, 6rem);

  --r-s: 6px;
  --r-m: 12px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #12142A; --paper: #1B1E38; --ink: #ECEAF6; --ink-2: #A3A6C4; --line: #2E3257;
    --moon: #F0D58A; --usagi: #F28DA6;
    --moon-disc: #F3E4B0; --moon-mare: #CBB57D; --moon-shadow: rgba(10, 11, 26, .9);
    --ok: #5CC79E; --warn: #E8B65A; --bad: #F07A70; --off: #6D7194;
    --ok-bg: #173A31; --warn-bg: #3B3020; --bad-bg: #3E2128; --off-bg: #23264A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #12142A; --paper: #1B1E38; --ink: #ECEAF6; --ink-2: #A3A6C4; --line: #2E3257;
  --moon: #F0D58A; --usagi: #F28DA6;
  --moon-disc: #F3E4B0; --moon-mare: #CBB57D; --moon-shadow: rgba(10, 11, 26, .9);
  --ok: #5CC79E; --warn: #E8B65A; --bad: #F07A70; --off: #6D7194;
  --ok-bg: #173A31; --warn-bg: #3B3020; --bad-bg: #3E2128; --off-bg: #23264A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.wrap { max-width: 1120px; margin-inline: auto; }

/* 상단 바 (메인·대시보드) */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px; flex-wrap: wrap;
}
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark svg { width: 30px; height: 30px; flex: none; }
.mark b { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); letter-spacing: -.01em; }
.mark small { font-family: var(--f-display); color: var(--ink-2); font-size: var(--t-sm); }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-sm); color: var(--ink-2);
}
.nav a:hover { color: var(--ink); background: var(--paper); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper); font-weight: 600; }

/* 계정 메뉴 */
.account { position: relative; }
.account > button {
  font: inherit; font-size: var(--t-sm); color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px 6px 6px; display: inline-flex; align-items: center; gap: 8px;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: var(--t-xs);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 220px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 6px; box-shadow: 0 10px 30px rgba(18, 20, 42, .18);
  display: grid;
}
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: var(--t-sm); }
.menu .who span { display: block; color: var(--ink-2); font-size: var(--t-xs); }
.menu a { text-decoration: none; padding: 8px 10px; border-radius: var(--r-s); font-size: var(--t-sm); }
.menu a:hover { background: var(--sky); }
.menu a.danger { color: var(--bad); }

/* 상태 표시 */
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; padding: 2px 10px 2px 8px; border-radius: 999px;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.bad { color: var(--bad); background: var(--bad-bg); }
.pill.off { color: var(--off); background: var(--off-bg); }
.pill.plain { color: var(--ink-2); background: transparent; border: 1px dashed var(--line); }
.pill.plain::before { display: none; }

.notice {
  border: 1px solid var(--line); border-left: 4px solid var(--warn); background: var(--paper);
  border-radius: var(--r-s); padding: 12px 16px; font-size: var(--t-sm);
}
.notice.bad { border-left-color: var(--bad); }
.preview-banner {
  font-size: var(--t-xs); color: var(--ink-2); text-align: left; padding-block: 8px;
  border-bottom: 1px dashed var(--line);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}