@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* Cloudlane 디자인 토큰 (화면설계서 V1.1 구조 + Cloudlane 스타일) — 전 화면 공유 */
:root{
  --background:#f2f6fa; --foreground:#162e40; --surface:#ffffff; --muted:#edf3f8;
  --muted-foreground:#6a7e90; --border:#e7edf2;
  --sidebar:#102f4b; --sidebar-accent:#224966;
  --primary:#145d91; --sky:#56a5dd; --aero:#77b4e4; --yellow:#ecc815; --cta-text:#162326;
  /* 비용 화면 전용 — 계열 6 + 상태 3. dataviz 검증기로 밝기 대역·채도·색각이상 분리·배경 대비를
     확인해 정했다(docs/비용_개발문서/03_데이터계약_표시규칙.md §8-1). 차트 계열에는 이 6개만
     쓴다 — --sky/--aero는 ΔE 5.5로 사실상 같은 색이고, --yellow는 흰 배경 대비 1.64로 거의
     안 보인다. */
  --cost-series-1:#1b6fa8; --cost-series-2:#c25d12; --cost-series-3:#5b3f9d;
  --cost-series-4:#1f8a52; --cost-series-5:#9c1458; --cost-series-6:#a08020;
  --cost-up:#b42318; --cost-warn:#b54708; --cost-down:#0f766e;
}
[data-theme="dark"]{
  --background:#0b1724; --foreground:#e5edf5; --surface:#142536; --muted:#203348;
  --muted-foreground:#a0b4c7; --border:#2a3d50;
  --sidebar:#10283e; --sidebar-accent:#224966;
  --primary:#77b4e4; --sky:#56a5dd; --aero:#77b4e4; --yellow:#ecc815; --cta-text:#162326;
  --cost-series-1:#4d9bd4; --cost-series-2:#cf801f; --cost-series-3:#9278d8;
  --cost-series-4:#45a045; --cost-series-5:#d6478a; --cost-series-6:#b08e1a;
  --cost-up:#fda29b; --cost-warn:#fdb022; --cost-down:#5eead4;
}

*{ box-sizing:border-box; }
/* Tailwind의 display 유틸리티(grid/flex 등)가 브라우저 기본 [hidden] 스타일보다 우선순위가
   높아서, hidden 속성과 grid/flex 클래스를 같이 쓴 요소는 hidden이어도 계속 보이는 문제가
   있었다(2026-09-22, provisioning.js의 GCP CDN "기존 버킷 연결" 입력칸에서 실사용 중 발견 —
   class="grid ..."/"flex ..."가 붙은 wrap만 재현되고, class="mt-2"뿐인 AWS AMI wrap은
   문제없었음). cost.css에는 이미 같은 규칙이 있었지만 이 페이지들엔 로드되지 않아 전 화면
   공유 파일(theme.css)로 옮긴다. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Malgun Gothic", sans-serif;
  background:var(--background);
  color:var(--foreground);
  transition: background-color .2s ease, color .2s ease;
}

/* 스크롤바: 기본은 연하게, 호버 시 진하게. scrollbar-gutter로 페이지마다 폭이 흔들리지 않게 고정 */
html{
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

html:hover{ scrollbar-color: var(--muted-foreground) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:9999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-foreground); }

/* select: 네이티브 화살표 대신 커스텀 셰브론 — 오른쪽 여백을 글자 왼쪽 여백(0.75rem)과 동일하게 */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7e90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.75rem center;
  padding-right:2rem !important;
}
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0b4c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}