/* Agents View 공용 테마 — 색 토큰 · 서체 · 브랜드 로크업.
 *
 * 레퍼런스: `data/logref.png`(구조) + `data/grapahui.png`(톤 — 다크 바탕에 틸/시안 액센트).
 *
 * ## 왜 shell.css 에서 떼어냈나
 *
 * 이 블록은 원래 `llmopt/shell.css` 안에 있었다. 그래서 셸을 쓰는 화면(토폴로지·llmopt)만
 * 다크·틸이 되고, 셸 밖의 화면 — **로그인·회원가입·아이디/비밀번호 찾기** — 는 `base.css`
 * 기본값 그대로 라이트+핑크+Lato 로 떴다. 같은 서비스인데 로그인만 다른 제품처럼 보였다.
 * 토큰을 별도 파일로 빼서 셸과 인증 화면이 **같은 한 벌**을 읽게 한다. 색을 여기서 한 번
 * 고치면 양쪽이 함께 따라온다 — 복제해 두면 반드시 한쪽만 고쳐진다.
 *
 * ## base.css 를 고치지 않는다
 *
 * `base.css` 는 이 저장소 **전체가 쓰는** 디자인 시스템이다(tracking·홈 색인 포함). 거기서
 * 색을 바꾸면 이 서비스와 상관없는 화면까지 따라 바뀐다. 그래서 토큰을 **`body.app` 범위에서만**
 * 덮어쓴다 — base.css 와 이 서비스의 CSS 가 전부 `hsl(var(--...))` 만 쓰므로 이 한 블록으로
 * 버튼·입력·카드까지 전부 따라온다.
 *
 * 로드 순서: `base.css` → `app-theme.css` → 화면별 CSS.
 */

/* ## 서체 — IBM Plex Sans (+ KR)
 *
 * `base.css` 의 Lato 900 + 음수 자간 조합은 요즘 AI 제품이 죄다 쓰는 룩이라, 사내 도구인데
 * 마케팅 랜딩처럼 보였다. Plex 는 IBM 이 계기판·코드용으로 만든 서체라 숫자·모델 ID 가
 * 또렷하고 톤이 차분하다.
 *
 * **KR 을 같이 싣는다.** 이 화면의 글자는 대부분 한글이다. 라틴만 바꾸면 정작 눈에 들어오는
 * 부분은 그대로 시스템 고딕이라 «바꿨는데 그대로» 가 된다. Google Fonts 가 한글을
 * unicode-range 로 잘라 주므로 실제로 쓰는 조각만 내려온다.
 *
 * **굵기는 700 까지만 싣는다** — 800·900 을 안 실으면 브라우저가 가장 가까운 700 으로 그린다.
 * 과한 굵기가 «AI 스러움» 의 절반이라, CSS 쪽 선언도 700 으로 맞춰 뒀다. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

/* 레이아웃 치수. **색 토큰과 따로 둔다** — 색만 손보다가 이걸 함께 날려서 본문이 사이드바
   아래로 깔린 적이 있다(`width`·`margin-left` 가 무효가 되면 조용히 0 이 된다).
   `--appbar-h` 는 셸의 상단바와 인증 카드 머리(`.auth-head`)가 **같은 높이**여야 해서
   두 파일이 함께 읽는다 — 그래서 shell.css 가 아니라 여기에 있다. */
:root {
    --sidenav-w: 232px;
    --appbar-h: 56px;
}

body.app {
    /* 라틴은 Plex Sans, 한글은 Plex Sans KR. 뒤는 웹폰트가 못 뜰 때의 시스템 고딕. */
    font-family: 'IBM Plex Sans', 'IBM Plex Sans KR', 'Apple SD Gothic Neo',
        'Malgun Gothic', 'Noto Sans KR', sans-serif;
    /* --- 면: 캔버스(가장 어두움) < 카드 < 살짝 밝은 표면 --- */
    --background: 0 0% 8%;              /* #141414 — 파묻힌 면(그림판·입력) */
    --muted: 0 0% 11%;                  /* #1c1c1c — 캔버스 */
    --card: 0 0% 16%;                   /* #292929 — 카드·사이드바·표 */
    --secondary: 0 0% 22%;              /* #383838 — code 배경 */
    --accent: 184 42% 14%;              /* 틸 최연한 tint — 활성 내비·펼친 행 */

    /* --- 글자: 다크에서는 «강한 색» 이 밝은 색이다 --- */
    --foreground: 0 0% 90%;
    --card-foreground: 0 0% 90%;
    --secondary-foreground: 0 0% 90%;
    --muted-foreground: 0 0% 64%;
    --subtle-foreground: 0 0% 57%;
    --accent-foreground: 184 70% 58%;

    /* --- 브랜드: 틸 채움 + 시안 글자 --- */
    --primary: 181 74% 28%;             /* #12787c — 상단바·버튼 채움 */
    --primary-hover: 181 74% 34%;
    --primary-pressed: 181 74% 22%;
    --primary-vivid: 186 100% 45%;      /* #00b0e6 — 테두리·강조선 */
    --primary-text: 184 72% 56%;        /* 다크 위에서 읽히는 시안 */
    --primary-soft: 183 40% 26%;        /* 소속을 나타내는 세로선 */
    --primary-foreground: 0 0% 100%;

    /* --- 상태: tint 위 글자는 **밝은 쪽**이어야 한다 (라이트 테마와 반대) --- */
    --positive: 162 62% 40%;
    --positive-strong: 162 58% 62%;
    --warning: 33 95% 48%;              /* #f57c00 */
    --warning-strong: 36 95% 64%;
    --destructive: 0 82% 60%;
    --destructive-strong: 0 88% 72%;
    --destructive-foreground: 0 0% 100%;
    --info: 205 58% 62%;                /* #a8c4e0 계열 */
    --info-strong: 205 70% 74%;

    --border: 0 0% 24%;
    --border-strong: 0 0% 33%;
    --input: 0 0% 30%;
    --ring: 186 100% 50%;

    /* --- 그래프 노드 색 ---
     * **`llmopt/services/topology.py` 의 `CLASSDEFS` 와 같은 값이어야 한다.** 표의 칩이
     * 그림의 노드 색을 되풀이해 「주황 = LLM 노드」를 알려 주는 구실을 하기 때문이다.
     * 한쪽만 바꾸면 칩이 거짓말을 한다. */
    --node-plain: #127e8d;
    --node-plain-line: #2ec4d6;
    --node-llm: #9d660d;
    --node-llm-line: #f0b429;

    /* 브라우저에 «이 화면은 다크» 라고 알린다. 이게 없으면 우리가 색을 안 준 폼 요소
       (select 드롭다운 목록·체크박스·스크롤바)가 흰 바탕으로 뜬다 — 우리 CSS 가 닿지 않는
       부분이라 눈으로 볼 때까지 모른다. 비밀번호 관리자의 자동완성 배경도 여기에 딸려 온다. */
    color-scheme: dark;

    margin: 0;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    min-height: 100vh;
}

/* `<a class="btn">` 을 `<button class="btn">` 과 같은 모습으로 맞춘다. `base.css` 는 저장소
   공용이라 손대지 않고 이 서비스 범위에서만 보정한다.

   - `text-decoration` : base.css 의 `.btn` 에 리셋이 없어 링크 버튼만 밑줄을 달고 나온다.
   - `box-sizing`      : 이 저장소엔 전역 border-box 리셋이 없다. `<button>` 은 브라우저 기본
     스타일시트가 border-box 로 주지만 `<a>` 는 content-box 라, 같은 `.btn-full`(width:100%)
     을 붙여도 **링크 버튼만 좌우 padding 32px 만큼 부모를 삐져나갔다** (아이디 찾기 결과
     카드의 「로그인 하러 가기」). 폭을 안 주는 버튼은 auto 라 이 값에 영향받지 않는다. */
body.app .btn {
    text-decoration: none;
    box-sizing: border-box;
}

/* 우리 CSS 가 색을 주지 않은 폼 요소도 카드 위에서 읽히게 한다. */
body.app select,
body.app input,
body.app textarea {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border-color: hsl(var(--input));
}

/* ---- 브랜드 로크업 -------------------------------------------------------
 * 사이드바 최상단(`.brand`)과 인증 카드 머리(`.auth-head`)가 **같은 틸 띠**여야 한다.
 * 로그인 화면에서 이 띠가 없으면 「무슨 서비스에 로그인하는지」가 화면에 안 적혀 있다.
 * 두 곳이 같은 규칙을 공유하도록 여기서 한 번만 선언한다. */
.brand,
.auth-head {
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--appbar-h);
    padding: 0 18px;
    background: hsl(var(--primary));
    border-bottom: 1px solid hsl(var(--primary-pressed));
    text-decoration: none;
    color: hsl(var(--primary-foreground));
    flex: 0 0 auto;
}
.brand-lockup { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: hsl(var(--primary-vivid));
    box-shadow: 4px 0 0 -1px hsl(0 0% 100% / 0.35);
    flex: 0 0 auto;
}
.brand-text { font-weight: 600; font-size: 14.5px; letter-spacing: 0; }

/* `base.css` 의 `a:hover { color: hsl(var(--primary-hover)) }` 는 명시도가 (0,1,1) 이라
   `.brand` (0,1,0) 을 이긴다. 그래서 브랜드에 마우스를 올리면 글자가 틸 바탕과 같은 틸이 돼
   **대비 1.41:1 로 사라졌다** — 비hover 는 5.12:1 로 멀쩡하니 스크린샷 한 장으로는 안 잡힌다.
   `.brand:hover` (0,2,0) 로 글자색을 되찾고, 반응은 바탕을 **어둡게** 하는 쪽으로 준다 —
   밝히면 흰 글자와의 대비가 5.12 → 3.63 으로 떨어져 hover 가 오히려 읽기 나빠진다. */
.brand:hover {
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary-pressed));
}