/*
  두 화면(현재 상태 · 가동률)이 같이 쓰는 껍데기.

  색·글꼴·헤더·푸터·툴팁이 여기 있다. 한쪽만 고쳐서 두 화면이 달라 보이는 일이
  없게 하려고 뺐다.
*/
  :root{
    --bg:#f7f8fa; --surface:#fff; --line:#e4e7ec; --line-soft:#eef0f4;
    --fg:#101828; --muted:#667085; --faint:#98a2b3;
    --accent:#0891b2;
    --ok:#12a150; --degraded:#d9a209; --partial:#e2680f; --major:#d92d20;
    /* 서비스는 도는데 기능 하나가 안 되는 경우. 초록→노랑→주황→빨강 이 줄과
       섞이면 「얼마나 나쁜가」로 읽힌다. 그 줄 밖의 색을 써서 종류가 다름을 보인다. */
    --minor:#6d5ae6;
    --nodata:#e7eaee;
    --tip-bg:#1d2530; --tip-fg:#eef2f6; --tip-muted:#a7b2be; --tip-line:#333d4b;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#0f1115; --surface:#161a21; --line:#252b35; --line-soft:#1e232b;
      --fg:#e6edf3; --muted:#93a0ae; --faint:#6b7885;
      --accent:#22d3ee;
      --ok:#2ea86a; --degraded:#c99a12; --partial:#d4711d; --major:#e05353;
      --minor:#8b7bf0;
      --nodata:#232830;
      --tip-bg:#252b35; --tip-fg:#e6edf3; --tip-muted:#93a0ae; --tip-line:#39414d;
    }
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--bg);color:var(--fg);
    font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    line-height:1.55;-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:860px;margin:0 auto;padding:48px 20px 72px}

  /*
    이 상태판을 떠나 온 곳으로 돌아가는 줄. 헤더 위에 한 줄로 둔다.

    상자를 씌우지 않는다 — 아래가 전부 카드라 버튼까지 카드로 만들면
    화면이 상자 더미가 된다. 화살표와 이름만으로 눌러야 할 것으로 읽힌다.

    아래쪽 .back(가동률 화면의 「← 현재 상태」)과 이름이 다르다.
    그건 상태판 안에서 움직이는 링크고 이건 밖으로 나가는 링크다.
  */
  .back-site{display:inline-flex;align-items:baseline;gap:5px;margin-bottom:18px;
    font-size:12.5px;color:var(--muted);text-decoration:none}
  .back-site:hover{color:var(--fg)}
  .back-site .arrow{font-size:13.5px;line-height:1}

  /* 헤더 · 구독 */
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex-wrap:wrap;margin-bottom:30px}
  .brand{display:flex;align-items:center;gap:11px;min-width:0}
  .brand a{display:inline-flex;align-items:center;text-decoration:none}
  .brand img{height:27px;width:auto;display:block}
  /* 로고는 밝은 배경용·어두운 배경용 두 벌이다. 테마에 맞는 쪽만 남긴다. */
  .brand .logo-dark{display:none}
  @media (prefers-color-scheme:dark){
    .brand .logo-light{display:none}
    .brand .logo-dark{display:block}
  }
  .brand h1{font-size:15px;margin:0;font-weight:600;color:var(--muted);
    letter-spacing:-.01em;padding-left:11px;border-left:1px solid var(--line);
    white-space:nowrap}
  .subscribe{position:relative}
  .sub-btn{font:inherit;font-size:13px;font-weight:550;color:var(--fg);cursor:pointer;
    background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:8px 14px}
  .sub-btn:hover{background:var(--line-soft)}
  .sub-panel{position:absolute;right:0;top:calc(100% + 7px);width:272px;z-index:20;
    background:var(--surface);border:1px solid var(--line);border-radius:9px;
    padding:15px 16px;box-shadow:0 8px 24px rgba(16,24,40,.10);display:none}
  .sub-panel.open{display:block}
  .sub-panel p{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.65}
  .sub-panel a{display:inline-block;font-size:13px;color:var(--accent);text-decoration:none;font-weight:550}
  .sub-panel a:hover{text-decoration:underline}

  /* 범례 */
  .legend{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:12px;font-size:12px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .legend i{width:9px;height:9px;border-radius:2px;display:inline-block;background:var(--nodata)}
  .legend i.ok{background:var(--ok)} .legend i.degraded{background:var(--degraded)}
  .legend i.minor{background:var(--minor)}
  .legend i.partial{background:var(--partial)} .legend i.major{background:var(--major)}

  /* 호버 툴팁 */
  #tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .1s;
    background:var(--tip-bg);color:var(--tip-fg);border-radius:8px;padding:10px 13px;
    font-size:12.5px;line-height:1.6;max-width:270px;
    box-shadow:0 6px 20px rgba(16,24,40,.22)}
  #tip.show{opacity:1}
  #tip .t-date{font-weight:650;font-size:12.5px;margin-bottom:3px}
  #tip .t-state{display:flex;align-items:center;gap:6px;font-weight:550}
  #tip .t-state i{width:8px;height:8px;border-radius:2px;display:inline-block;background:var(--nodata)}
  #tip .t-state i.ok{background:var(--ok)} #tip .t-state i.degraded{background:var(--degraded)}
  #tip .t-state i.minor{background:var(--minor)}
  #tip .t-state i.partial{background:var(--partial)} #tip .t-state i.major{background:var(--major)}
  #tip .t-fix{margin-top:5px;padding-top:5px;border-top:1px solid var(--tip-line);color:var(--tip-muted);font-size:11px}
  #tip .t-sub{color:var(--tip-muted);font-size:12px;margin-top:2px}
  #tip .t-inc{margin-top:8px;padding-top:8px;border-top:1px solid var(--tip-line);font-size:12px}
  #tip .t-inc .t-inc-h{display:block;color:var(--tip-muted);margin-bottom:3px}
  #tip .t-inc b{display:block;font-weight:550;margin-bottom:2px;line-height:1.45}
  #tip .t-inc b:last-child{margin-bottom:0}

  .section-title{font-size:15px;font-weight:650;margin:40px 0 6px;letter-spacing:-.01em}
  .section-sub{margin:0 0 16px;font-size:12.5px;color:var(--muted)}

  footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);
    color:var(--faint);font-size:12.5px;line-height:1.8}
  footer p{margin:0}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--fg);text-decoration:underline}
  .foot-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:16px}

  @media (max-width:560px){
    .wrap{padding:34px 15px 56px}
    #tip{max-width:220px}
  }

  /* 화면 사이 이동. status.claude.com 의 Incidents | Uptime 자리다. */
  .tabs{display:flex;gap:20px;margin:36px 0 18px;border-bottom:1px solid var(--line)}
  .tabs a{font-size:13.5px;font-weight:550;color:var(--muted);text-decoration:none;
    padding:0 1px 9px;margin-bottom:-1px;border-bottom:2px solid transparent}
  .tabs a:hover{color:var(--fg)}
  .tabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
  .back{margin-top:32px;font-size:13px}
  .back a{color:var(--muted);text-decoration:none}
  .back a:hover{color:var(--fg);text-decoration:underline}

  /* 막대 위 한 줄. status.claude.com 의 「Uptime over the past 90 days.」 자리다. */
  .uptime-link{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
  .uptime-link a{color:var(--accent);text-decoration:none}
  .uptime-link a:hover{text-decoration:underline}