/* ═══════════════════════════════════════════════════════════════
   WEF × 경기도형 에이전틱 지식 채널 — 디자인 토큰 정본
   v0.6 · 2026-10-19 · 세계: Material AI
   (v0.3: 모션을 아침 브리핑 리더 승인값으로 상향, --font-mono 한글 폴백 승격.
    v0.4: 필터 재배치 값 추가. v0.5: 가리킴·누름(hover·press) 값 추가. v0.6: 하단 탭·툴팁·표지 전환 값 추가.
    이전 판은 work/tokens-v0.2-머티리얼.css, work/tokens-v0.3-모션상향.css, work/tokens-v0.4-재배치.css, work/tokens-v0.5-가리킴누름.css)

   이 파일이 색·타이포·간격·모션의 단일 소스다.
   과업이행요청서 §2.1 — "스타일 토큰(색·타이포·간격)을 코드 곳곳에
   흩지 않고 한 곳에서 관리해, 브랜드 변경이 국소 수정으로 끝나도록 구성"

   ── 왜 @theme 인가 ──────────────────────────────────────────────
   Tailwind 4의 @theme은 토큰을 한 번 선언하면 두 가지로 동시에 쓰인다.
     ① 유틸리티      <div class="bg-surface text-ink">
     ② 순수 CSS      background: var(--color-surface)
   발주처가 단일 파일 HTML·CSS를 직접 전달하는 이 프로젝트에서는 ②가
   주 경로이고, 수행사가 컴포넌트를 짤 때 ①을 함께 쓸 수 있다.

   ── 적용 순서 ──────────────────────────────────────────────────
   app/globals.css 최상단에서:
     @import "tailwindcss";
     @import "./tokens.css";
   그 뒤에 화면별 CSS를 둔다. 토큰을 재정의하지 않는다.

   ── 이전 판 ────────────────────────────────────────────────────
   v0.1(기관 도면형 — 크림 종이·네이비·앰버)은 work/tokens-도면형.css에 보존.
   ═══════════════════════════════════════════════════════════════ */

@theme {

  /* ── 표면 ─────────────────────────────────────────────────────
     순수 흰 배경을 페이지 바탕으로 쓰지 않는다. 카드가 바탕에서
     떠 보이려면 바탕이 반 톤 어두워야 한다. */

  --color-bg:        #F8F9FA;  /* 페이지 바탕 */
  --color-surface:   #FFFFFF;  /* 카드·패널·드로어 */
  --color-surface-2: #F1F3F4;  /* 눌린 면·비활성·칩 배경 */
  --color-line:      #DADCE0;  /* 1px 테두리 */
  --color-line-2:    #E8EAED;  /* 목록 행 사이 옅은 선 */

  /* ── 글자 ─────────────────────────────────────────────────────
     괄호 안은 흰 카드(#FFFFFF) 위 실측 대비비.
     값을 바꾸면 반드시 다시 잰다. AA 일반 텍스트 기준 4.5:1. */

  --color-ink:   #202124;  /* 제목 (16.10:1) */
  --color-body:  #3C4043;  /* 본문 (10.47:1) */
  --color-muted: #5F6368;  /* 보조·메타 (6.05:1) */
  --color-faint: #6F7378;  /* 비활성·플레이스홀더 (4.77:1) */

  /* ── 팔레트 ───────────────────────────────────────────────────
     네 색을 의미 축에 배치한다. 장식으로 쓰지 않는다.
       파랑 = 강조·링크·선택   초록 = 성공·갱신됨·통과
       노랑 = 주의·보류·미등록  빨강 = 오류·파괴적 동작

     각 색은 세 변형을 가진다.
       기본(fill)  — 흰 글자를 얹는 면
       -ink        — 밝은 면 위의 글자
       -soft       — 옅은 배경면

     주의: 원색 #4285F4는 흰 글자 대비 3.56:1로 AA 미달이다.
     그래서 fill을 #1967D2(5.37:1 · 채도 79%)로 내렸고, 이 값이
     design.md의 「채도 상한 80%」 규칙도 동시에 만족한다. */

  --color-blue:        #1967D2;  --color-blue-ink:   #1967D2;  --color-blue-soft:   #E8F0FE;
  --color-green:       #34A853;  --color-green-ink:  #14672D;  --color-green-soft:  #E6F4EA;
  --color-yellow:      #FBBC05;  --color-yellow-ink: #976900;  --color-yellow-soft: #FEF7E0;
  --color-red:         #EA4335;  --color-red-ink:    #C5221F;  --color-red-soft:    #FCE8E6;

  /* 글자가 얹히지 않는 장식 전용 — 브랜드 마크·추세 막대. 텍스트 금지 */
  --color-blue-bright: #4285F4;

  /* ── 활자 ─────────────────────────────────────────────────────
     Roboto에는 한글 글리프가 없다. 그대로 두면 본문이 시스템 폰트로
     떨어지므로 Pretendard를 앞에 세우고 Roboto가 영문·숫자를 받는다.
     모노는 JetBrains Mono — 숫자·경로·메타데이터 전용이며
     '기술적으로 보이려고' 본문에 쓰지 않는다. */

  --font-sans: "Pretendard Variable", Pretendard, Roboto,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  /* 한글 글리프는 JetBrains Mono에 없다. 끝에 Pretendard를 두지 않으면
     한글 마이크로 라벨이 시스템 폰트로 뭉개진다 (v0.16 화면 보정을 v0.3에서 승격) */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas,
               "Pretendard Variable", Pretendard, "Malgun Gothic", monospace;

  /* 밀도 약 6/10 기준 스케일. 본문 14px 화면이다.
     원본 스펙은 3/10(Airy)이지만 이 채널은 랜딩이 아니라
     스트림 43항목·축 30여 개를 다루는 작업대다. */
  --text-micro: 9.5px;   /* 배지·계보 라벨 */
  --text-meta:  10.5px;  /* 메타데이터·카운트 */
  --text-label: 11.5px;  /* 필터 라벨·주석 */
  --text-cap:   12.5px;  /* 요약·보조 문단 */
  --text-base:  14px;    /* 본문 */
  --text-item:  17px;    /* 목록 제목 */
  --text-lead:  16px;    /* 상세 리드 문단 */

  /* ── 간격·치수 ────────────────────────────────────────────────
     작업대 3열의 폭은 임의값이 아니다. 좌열은 축 라벨과 카운트
     배지가 한 줄에 들어가는 최소, 우열은 흐름 제목이 3줄을 넘지
     않는 최소로 잡았다. */

  --spacing-shell:  1560px;  /* 최대 콘텐츠 폭 */
  --spacing-axis:   264px;   /* 작업대 좌열 — 축 필터 */
  --spacing-feed:   336px;   /* 작업대 우열 — 오늘의 흐름 */
  --spacing-meta:   344px;   /* 상세 우열 — 문서 정보 */
  --spacing-header: 64px;    /* 상단 바. sticky top 기준값 */
  --spacing-touch:  44px;    /* 모바일 최소 터치 타깃 */

  /* ── 형태 ─────────────────────────────────────────────────────
     칩·버튼처럼 높이가 작고 옆으로 긴 것은 99px(알약),
     카드·패널은 16px, 드로어·검색바는 24px. */

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 99px;

  /* 그림자는 z축 위치를 말할 때만 쓴다. 장식용 글로우 금지.
     색을 입히지 않고 검정에 낮은 투명도만 준다. */
  --shadow-card: 0 2px 12px rgba(0,0,0,.06);
  --shadow-lift: 0 4px 18px rgba(0,0,0,.10);

  /* ── 브레이크포인트 ───────────────────────────────────────────
     기본 sm/md/lg는 건드리지 않고 구조가 실제로 바뀌는 세 지점만
     이름을 준다. max-* 변형으로 쓴다. */

  --breakpoint-workbench: 1180px;  /* 3열 폭 축소 */
  --breakpoint-split:     1080px;  /* 상세 2열 → 1열 */
  --breakpoint-stack:      900px;  /* 작업대 3열 → 세로 스택 */

  /* ── 모션 ─────────────────────────────────────────────────────
     v0.3 (2026-10-16 대표님 지시): 아침 브리핑 리더 승인값(2026-10-15)으로
     올렸다. 미세 효과는 "전혀 느껴지지 않는다"는 교정이 있었다.
       카드 등장   32px · .98→1 · 560ms · 같은 배치 안 75ms 간격, 지연 상한 225ms
                   처음 화면에 들어올 때 한 번만. 이미 본 카드는 다시 재생하지 않는다.
       패널·서랍   32px · 420ms
       보기 전환   방향에 따라 48px · 480ms (리더 승인 범위 42~52px · 460~500ms)
       상태 변화   220ms (hover·선택 색)
     반동(넘침 곡선)은 쓰지 않는다. transform·opacity만 애니메이션한다.
     예외: 형광펜(background-size)은 줄바꿈되는 구절을 칠할 방법이 이것뿐이다. */

  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --duration-state: 220ms;
  --duration-enter: 560ms;
  --distance-enter: 32px;
  --scale-enter: .98;
  --duration-stagger: 75ms;
  --stagger-cap: 225ms;
  --duration-panel: 420ms;
  --distance-panel: 32px;
  --duration-switch: 480ms;
  --distance-switch: 48px;

  /* 필터 재배치 (v0.4, 2026-10-16 대표님 지시)
     남는 카드는 새 자리로 420ms 동안 미끄러지고, 앞쪽부터 30ms 간격(상한 180ms).
     빠지는 카드는 260ms 동안 .85로 작아지며 사라지고(가속 곡선), 새 카드는 .92에서 커지며
     나타난다(지연 상한은 카드 등장과 같은 --stagger-cap). */
  --duration-reflow: 420ms;
  --duration-exit: 260ms;
  --scale-exit: .85;
  --reflow-step: 30ms;
  --reflow-cap: 180ms;

  /* 가리킴·누름 (v0.5, 2026-10-16 대표님: "마우스를 올려도 아무 움직임이 없다" · 2026-10-19 승인: "이 정도 강도로 가자")
     지금까지의 모션은 '처음 나타날 때'와 '상태가 바뀔 때'뿐이었다. 손이 닿는 순간의 반응을 더한다.
       가리킴      180ms. 행은 2px, 카드 4px, 표지 타일 6px 들린다. 표지는 1.06배.
       레일        강조 칸이 커서를 따라 260ms에 미끄러지고, 커서 바로 아래 아이콘은 1.18배·이웃 1.06배(가우스 감쇠).
       누름        .97배로 살짝 들어가고, 누른 자리에서 잉크 물결이 번진다(480ms).
       표지 타일   설명 막이 커서가 들어온 변에서 320ms에 덮인다.
       미리보기    목록 행의 표지가 커서 옆에 떠서 초당 9의 비율로 따라온다(원본 276).
     전부 transform·opacity. 동작 줄이기에서는 즉시 최종 상태. */
  --duration-hover: 180ms;
  --lift-row: -2px;
  --lift-card: -4px;
  --lift-tile: -6px;
  --scale-cover: 1.06;
  --scale-press: .97;
  --duration-ripple: 480ms;
  --rail-follow: 260ms;
  --rail-magnify: 1.18;
  --rail-neighbor: 1.06;
  --duration-overlay: 320ms;
  --preview-follow: 9;

  /* 모션 2차 (v0.6, 2026-10-19 · Lucian #041·#328·#076 번안)
       하단 탭     휴대폰(900px 이하)에서 고른 탭으로 둥근 강조가 240ms에 미끄러지고 아이콘이 2px 들린다(반동 없음).
       툴팁        배지에 머무른 뒤 400ms에 떠오르고, 떠 있는 동안 옆 배지로는 지연 없이 220ms에 미끄러진다.
       표지 전환   눌린 표지가 상세의 머리 표지로 420ms(패널과 같은 값)에 커져 간다 — 교차 문서 View Transition, 미지원이면 그냥 이동. */
  --duration-tab: 240ms;
  --tooltip-delay: 400ms;
  --duration-tooltip: 220ms;
  --duration-cover: 420ms;
}

/* ═══════════════════════════════════════════════════════════════
   base — 제작 공예 하한선
   90_SYSTEM/DESIGN.md §4. 화풍이 바뀌어도 이 항목은 유지한다.
   ═══════════════════════════════════════════════════════════════ */

@layer base {

  html {
    /* 모바일 사파리가 가로 방향에서 글자를 임의 확대하는 것을 막는다 */
    text-size-adjust: 100%;
    /* 가로 넘침은 스크롤이 아니라 잘라낸다 — 작업대는 가로 스크롤이 없다 */
    overflow-x: clip;
  }

  body {
    background: var(--color-bg);
    color: var(--color-body);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    /* 한국어 조판 — 어절 중간에서 끊지 않는다 */
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  /* 숫자는 자릿수가 흔들리지 않아야 한다. 필터 카운트·용량·페이지 수 */
  .mono, code, kbd, samp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; border: 0; background: none; }
  button, input, select, textarea { font: inherit; color: inherit; }

  /* 키보드 사용자에게만 보이는 초점 표시 */
  :focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* 모션 축소 요청을 존중한다 */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   components — 두 화면 이상에서 반복된 패턴만 올린다.
   한 화면에만 나오는 것은 그 화면 CSS에 둔다.
   ═══════════════════════════════════════════════════════════════ */

@layer components {

  /* 콘텐츠 폭 */
  .shell {
    width: min(var(--spacing-shell), 100%);
    margin-inline: auto;
    padding-inline: 24px;
  }

  /* 스크린리더 전용 */
  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }

  /* 진입 — 목록은 --duration-stagger 간격으로 지연을 준다.
     fill은 backwards: 끝난 뒤에는 원래 transform(hover 들림 등)이 살아 있어야 한다 */
  @keyframes rise {
    from { opacity: 0; transform: translateY(var(--distance-enter)) scale(var(--scale-enter)); }
    to   { opacity: 1; transform: none; }
  }
  .rise { animation: rise var(--duration-enter) var(--ease-out) backwards; }

  /* 카드 — 표면·테두리·그림자 한 벌 */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }

  /* 칩 — 상태를 색만이 아니라 글자로도 표시한다.
     색각 이상 사용자와 흑백 인쇄를 위해 텍스트가 항상 함께 간다. */
  .chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-line);
    font-family: var(--font-mono); font-size: var(--text-micro);
    color: var(--color-muted);
  }
  .chip-blue   { background: var(--color-blue-soft);   border-color: transparent; color: var(--color-blue-ink); }
  .chip-green  { background: var(--color-green-soft);  border-color: transparent; color: var(--color-green-ink); }
  .chip-yellow { background: var(--color-yellow-soft); border-color: transparent; color: var(--color-yellow-ink); }
  .chip-solid  { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); font-weight: 600; }

  /* 미등록 — 약속됐지만 아직 없는 것. 점선으로 '자리는 있다'를 보인다 */
  .pending {
    padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--color-yellow-soft);
    font-family: var(--font-mono); font-size: var(--text-micro);
    color: var(--color-yellow-ink); white-space: nowrap;
  }

  /* 주 버튼 */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--radius-pill);
    background: var(--color-blue); color: #fff;
    font-size: 13px; font-weight: 600;
    transition: background var(--duration-state) var(--ease-out),
                box-shadow var(--duration-state) var(--ease-out),
                transform 90ms ease;
  }
  .btn:hover  { background: #155BB5; box-shadow: var(--shadow-lift); }
  .btn:active { transform: translateY(1px); }

  .btn-ghost {
    background: transparent; color: var(--color-muted);
    border: 1.5px solid var(--color-line);
  }
  .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-ink); box-shadow: none; }

  /* 목록 행 — 아카이브·관계·출처가 공유 */
  .row-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 14px; align-items: center;
    padding: 12px; border-radius: var(--radius-sm);
    transition: background var(--duration-state) var(--ease-out);
  }
  .row-item:hover { background: var(--color-surface-2); }
  .row-item + .row-item { border-top: 1px solid var(--color-line-2); }

  /* 공식 마크 슬롯 — 원본이 없으면 비슷한 걸 그리지 않고 자리만 남긴다.
     DESIGN.md §8. 파일은 10_RAW/Assets/브랜드 로고/ 에 둔다. */
  .logo-slot { flex: none; display: block; line-height: 0; }
  .logo-slot img { display: block; height: 34px; width: auto; }
  .logo-slot em { display: none; }
  .logo-slot[data-missing] img { display: none; }
  .logo-slot[data-missing] {
    display: grid; place-items: center; height: 34px; padding: 0 12px;
    border: 1px dashed var(--color-line); border-radius: var(--radius-sm);
    background: var(--color-surface-2);
  }
  .logo-slot[data-missing] em {
    display: block; font-style: normal;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--color-faint); white-space: nowrap;
  }

  /* 스키마 공백 고지 — 지금 데이터로는 켤 수 없는 기능을 정직하게 표시.
     시안에서 빈 화면을 그럴듯하게 채우지 않기 위한 장치다. */
  .gap-note {
    padding: 15px 16px; border-radius: var(--radius-sm);
    background: var(--color-yellow-soft);
    font-size: var(--text-cap); line-height: 1.7; color: var(--color-body);
  }
  .gap-note b { display: block; margin-bottom: 6px; color: var(--color-yellow-ink); }
}

/* ═══════════════════════════════════════════════════════════════
   utilities
   ═══════════════════════════════════════════════════════════════ */

/* 작업대 열 — 뷰포트 안에서 각 패널이 자체 스크롤한다.
   min-height:0 이 없으면 grid 자식이 축소되지 않아 페이지가 늘어난다. */
@utility col-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* 상태 전환 — 색·배경·테두리만. transform·opacity 외 애니메이션 금지 */
@utility t-state {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--duration-state);
  transition-timing-function: var(--ease-out);
}

/* 한국어 제목 조판 — 어절 단위 줄바꿈 + 균형 배치 */
@utility ko-head {
  word-break: keep-all;
  text-wrap: balance;
  letter-spacing: -.03em;
}