/* ═══════════════════════════════════════════════════════════════════════
   COWMAN 팔레트 — 이 파일이 제품 색의 단일 출처다.
   랜딩(index.html)과 로그인 화면이 같은 값을 쓰도록 여기에만 색을 적는다.

   기준점은 로고다. web_dashboard/assets/agi-project.png 는 투명 배경이 아니라
   #0B1220 이 픽셀로 구워져 있다. 그래서 로고가 놓이는 자리의 배경은 반드시
   --cw-ink(=#0B1220) 여야 이음매가 보이지 않는다. 이 값은 이미지에 묶여 있으므로
   이미지를 다시 굽기 전에는 바꾸지 않는다.

   나머지 색은 축산에서 읽혀야 하는 것 — 생명(초록)과 신뢰(파랑) — 으로 잡았다.
   경고색으로 안전 노랑을 쓰지 않는다. 그 색은 다른 제품의 색이다.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── 원색: 라이트/다크에서 값이 같다 ───────────────────────────── */
  --cw-ink: #0B1220;          /* 로고가 구워진 색. 고정. */
  --cw-ink-2: #0E1728;
  --cw-ink-3: #142034;

  --cw-green-200: #B7EFD3;
  --cw-green-300: #7FE3B4;
  --cw-green-400: #4ED396;
  --cw-green-500: #22A96F;
  --cw-green-600: #15804F;
  --cw-green-700: #0E5F3A;

  --cw-blue-300: #9BD2F5;
  --cw-blue-400: #5FB0E6;
  --cw-blue-500: #2A7FBF;
  --cw-blue-600: #1C5F92;

  --cw-amber-300: #F6CE92;
  --cw-amber-400: #E9A94E;
  --cw-amber-600: #8F5600;

  --cw-red-400: #FF8C7D;
  --cw-red-600: #B3271A;

  /* ── 의미색: 라이트 기본값 ─────────────────────────────────────── */
  --cw-bg: #F4F7F5;
  --cw-bg-2: #E9EEEB;
  --cw-surface: #FFFFFF;
  --cw-surface-2: #F1F5F2;
  --cw-surface-sunken: #E9EEEB;

  --cw-text: #0D1117;
  --cw-text-2: #3A4550;
  --cw-text-3: #5A6773;   /* 밝은 배경에서 4.5:1 을 아슬아슬하게 넘기지 않도록 한 단계 어둡게 */

  --cw-line: #D7DFDA;
  --cw-line-2: #A6B3AB;

  --cw-brand: var(--cw-green-600);      /* 면(버튼 배경)에 쓰는 값 */
  --cw-brand-ink: var(--cw-green-700);  /* 글자에 쓰는 값 — 대비 7:1 이상 */
  --cw-brand-soft: #E3F3EA;
  --cw-on-brand: #FFFFFF;

  --cw-accent: var(--cw-blue-600);
  --cw-accent-soft: #E4EFF8;

  --cw-warn: var(--cw-amber-600);
  --cw-warn-soft: #FBF1E0;
  --cw-danger: var(--cw-red-600);
  --cw-danger-soft: #FBE9E7;

  /* ── 행동 배분 막대와 발정 ────────────────────────────────────────
     위 의미색과 달리 이 여섯은 등급이 아니라 **항목 구분**이다. 같은 지표가 앱과 웹에서
     다른 색이면 관리자는 그 둘을 다른 것으로 읽으므로, 아래 라이트 네 값은
     lib/app/core/theme/cowman_theme.dart 의 behavior* 와 글자 그대로 같아야 한다.
     그 대칭은 functions/test/theme_colors_mirror.test.js 가 지킨다 — 한쪽만 고치면 걸린다.

     standing 과 estrus 는 앱에 이름 붙은 상수가 없다(앱은 발정에 Material Colors.pink 를
     인라인으로 쓴다). 그래서 이 둘은 대칭 대상이 아니고 값도 웹 것이다.

     다크 값은 같은 색상(hue)을 어두운 면 위에서 읽히도록 올린 것이다. 앱은 지금
     라이트 테마 하나만 낸다(CowmanTheme.light) — 앱에 다크가 생기면 그때 다크도
     같은 방식으로 묶어야 한다. */
  --cw-behavior-rumination: #00897B;
  --cw-behavior-eating: #7CB342;
  --cw-behavior-lying: #546E7A;
  --cw-behavior-walking: #C79A2E;
  --cw-behavior-standing: #94A3B8;
  --cw-estrus: #DB2777;

  /* ── 어두운 면 위에 얹는 값 ───────────────────────────────────────
     최상단 AGI 띠와 마무리 CTA 는 밝은 화면에서도 --cw-ink 로 남는다(로고와 같은
     면이라서다). 그래서 그 위의 글자·선은 밝기 설정을 따라가면 안 된다 — 따라가면
     라이트에서 검은 글자가 검은 면에 얹힌다. 아래 넷은 라이트/다크에서 값이 같고,
     다크 블록에서 재정의하지 않는다. 그것이 이 토큰들의 존재 이유다. */
  --cw-ink-text: #E9F0EC;    /* #0B1220 위 대비 15.3:1 */
  --cw-ink-text-2: #A9BAC4;  /* #0B1220 위 대비 8.9:1 */
  --cw-ink-line: #23324B;
  --cw-ink-hover: #16233A;

  --cw-shadow: 0 1px 2px rgba(13, 17, 23, .05), 0 14px 34px -16px rgba(13, 17, 23, .22);
  --cw-glow: radial-gradient(62% 52% at 50% 0%, rgba(34, 169, 111, .13), transparent 72%);

  --cw-radius-sm: 10px;
  --cw-radius: 14px;
  --cw-radius-lg: 20px;
  --cw-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
             "Noto Sans KR", system-ui, "Segoe UI", sans-serif;
}

/* ── 다크: 로고 배경색을 그대로 페이지 배경으로 쓴다 ─────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cw-bg: #0B1220;
    --cw-bg-2: #0E1728;
    --cw-surface: #111C2E;
    --cw-surface-2: #17253A;
    --cw-surface-sunken: #0A101C;

    --cw-text: #E9F0EC;
    --cw-text-2: #BCC9D2;
    --cw-text-3: #94A4AE;

    --cw-line: #22304A;
    --cw-line-2: #52627A;

    --cw-brand: var(--cw-green-400);
    --cw-brand-ink: var(--cw-green-300);
    --cw-brand-soft: #0E2A21;
    --cw-on-brand: #04150C;

    --cw-accent: var(--cw-blue-400);
    --cw-accent-soft: #0D2237;

    --cw-warn: var(--cw-amber-400);
    --cw-warn-soft: #2A2013;
    --cw-danger: var(--cw-red-400);
    --cw-danger-soft: #2C1512;

    --cw-behavior-rumination: #26A69A;
    --cw-behavior-eating: #9CCC65;
    --cw-behavior-lying: #90A4AE;
    --cw-behavior-walking: #DAB862;
    --cw-behavior-standing: #A6B4C6;
    --cw-estrus: #F472B6;

    --cw-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 42px -18px rgba(0, 0, 0, .75);
    --cw-glow: radial-gradient(62% 52% at 50% 0%, rgba(78, 211, 150, .16), transparent 72%);
  }
}

/* 사용자가 화면에서 직접 고른 값은 기기 설정을 이긴다. */
:root[data-theme="dark"] {
  --cw-bg: #0B1220;
  --cw-bg-2: #0E1728;
  --cw-surface: #111C2E;
  --cw-surface-2: #17253A;
  --cw-surface-sunken: #0A101C;

  --cw-text: #E9F0EC;
  --cw-text-2: #BCC9D2;
  --cw-text-3: #94A4AE;

  --cw-line: #22304A;
  --cw-line-2: #52627A;

  --cw-brand: var(--cw-green-400);
  --cw-brand-ink: var(--cw-green-300);
  --cw-brand-soft: #0E2A21;
  --cw-on-brand: #04150C;

  --cw-accent: var(--cw-blue-400);
  --cw-accent-soft: #0D2237;

  --cw-warn: var(--cw-amber-400);
  --cw-warn-soft: #2A2013;
  --cw-danger: var(--cw-red-400);
  --cw-danger-soft: #2C1512;

  --cw-behavior-rumination: #26A69A;
  --cw-behavior-eating: #9CCC65;
  --cw-behavior-lying: #90A4AE;
  --cw-behavior-walking: #DAB862;
  --cw-behavior-standing: #A6B4C6;
  --cw-estrus: #F472B6;

  --cw-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 42px -18px rgba(0, 0, 0, .75);
  --cw-glow: radial-gradient(62% 52% at 50% 0%, rgba(78, 211, 150, .16), transparent 72%);
}

/* ═══════════════════════════════════════════════════════════════════════
   공용 기본기 — 이 파일을 링크하는 화면(랜딩·로그인)이 같은 감각을 갖도록
   최소한만 둔다. 화면별 배치는 각자의 <style> 에서 한다.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cw-bg);
  color: var(--cw-text);
  font-family: var(--cw-font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.01em;
  /* 한국어는 기본 줄바꿈이면 어절 한가운데가 끊긴다("합니 / 다"). */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cw-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── 버튼 ───────────────────────────────────────────────────────── */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.cw-btn:active { transform: translateY(1px); }

.cw-btn--primary { background: var(--cw-brand); color: var(--cw-on-brand); }
.cw-btn--primary:hover { background: var(--cw-green-500); }

.cw-btn--ghost {
  background: var(--cw-surface);
  color: var(--cw-text);
  border-color: var(--cw-line-2);
}
.cw-btn--ghost:hover { background: var(--cw-surface-2); }

.cw-btn--sm { min-height: 40px; padding: 9px 16px; font-size: 14px; border-radius: 10px; }

/* ── 카드 ───────────────────────────────────────────────────────── */
.cw-card {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
}

/* ── 입력칸 (로그인 화면용) ──────────────────────────────────────── */
.cw-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--cw-surface);
  color: var(--cw-text);
  border: 1px solid var(--cw-line-2);
  border-radius: 12px;
  font: inherit;
}
.cw-input::placeholder { color: var(--cw-text-3); }

/* ── 로고 자리 ──────────────────────────────────────────────────────
   agi-project.png 은 #0B1220 이 배경으로 구워진 600×641 이미지다.
   그래서 이 칸의 배경은 --cw-ink 로 고정하고, 색을 덧씌우거나 blend 하지
   않는다. 덧씌우면 구워진 배경과 그림이 서로 다른 색이 되어 사각형이 드러난다. */
.cw-logo-card {
  background: var(--cw-ink);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  margin: 0;
}
.cw-logo-card img {
  display: block;
  width: 100%;
  height: auto;      /* width/height 속성이 비율을 잡아 준다 — 레이아웃이 밀리지 않는다 */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}