/* ───────────────────────────────────────────────────────────────────
   랜딩 일곱 쪽(index·how·why·start·sources·privacy·terms)의 공용 배치.
   색은 전부 theme.css 의 --cw-* 를 쓴다. 여기에 색을 새로 적지 않는다
   (적는 순간 대시보드·로그인 화면과 갈라진다).

   한 파일인 이유: 페이지마다 <style> 을 들고 있으면 다섯 벌이 되고,
   다섯 벌은 반드시 갈라진다. 상단바가 페이지를 나누는 순간부터
   스타일의 단일 출처는 이 파일 하나다.
   ─────────────────────────────────────────────────────────────────── */
/* wattlayer.io 와 같은 Pretendard(OFL, 셀프호스팅 — CSP 가 외부 요청을 막는다).
   시스템 폰트(맑은 고딕)로 떨어지면 글자 폭이 달라져 AGI 카드 제목이 형제와 다른
   자리에서 줄바꿈된다 — 같은 크기 값이어도 화면이 다르게 보였던 원인이 이것이었다.

   파일 이름의 지문은 tools/subset_font.py 가 붙인다. 손으로 고치지 마라 —
   `python -m tools.subset_font` 가 파일과 이 줄과 각 페이지의 preload 를 함께 갱신한다.
   원본 2.06MB 를 상용 한글(KS X 1001)+실사용 글자로 잘라 낸 판이다. */
@font-face {
  font-family: 'Pretendard';
  src: url('./assets/Pretendard-ko-76a8a1eb4d.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ── 폴백의 자리를 Pretendard 에 맞춘다 ─────────────────────────────────
   여기가 하드리프레시 때 화면이 한 번 출렁이던 것의 진짜 해법이다.

   `swap` 은 폰트가 도착하기 전까지 폴백으로 그리라는 지시다. 그런데 맑은 고딕은 한글
   음절을 1.000em 으로, Pretendard 는 0.8643em 으로 그린다 — 같은 문장이 15.7% 넓어진다.
   줄 높이도 다르다(1.3301em vs 1.1933em). 그래서 폰트가 도착하는 순간 줄바꿈과 높이가
   전부 다시 계산되고 페이지가 통째로 흐른다.

   size-adjust 로 폴백을 86.4% 로 줄여 글자 폭을 맞추고, 줄어든 만큼 ascent/descent 를
   되돌려(0.9521/0.864 = 110.2%, 0.2412/0.864 = 27.9%) 줄 높이까지 맞춘다. 그러면 폰트가
   늦게 와도 **자리가 안 움직인다.** 글자 모양만 바뀐다.

   한국어 시스템 폰트는 관례상 한글 advance 가 1.000em 이라(맑은 고딕·Apple SD Gothic Neo·
   본고딕 모두) 이 값 한 벌로 세 플랫폼이 함께 맞는다. */
@font-face {
  font-family: 'Pretendard Fallback';
  src: local('Malgun Gothic'), local('맑은 고딕'), local('Apple SD Gothic Neo'),
       local('Noto Sans KR'), local('Segoe UI'), local('sans-serif');
  size-adjust: 86.4%;
  ascent-override: 110.2%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}

html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  /* 'Pretendard Fallback' 을 Pretendard 바로 뒤에 둔다. 그 뒤의 실물 이름들은 위
     local() 이 하나도 안 잡히는 환경(리눅스 등)을 위한 마지막 그물이다. */
  font-family: 'Pretendard', 'Pretendard Fallback', -apple-system, BlinkMacSystemFont,
    system-ui, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* 첫 화면은 한 칸이다. 폭·여백은 wattlayer.io 히어로(max-w-4xl=896, 좌우 24)와 같다 —
   그 안의 AGI 카드가 형제와 픽셀 단위로 같은 크기(데스크톱 848 · 375폰 327)가 되게 한다. */
.wrap-hero { max-width: 896px; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--cw-brand); color: var(--cw-on-brand);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* JS 가 없으면 조작 도구를 아예 내보내지 않는다. 눌러도 아무 일이 없는 버튼은
   고장난 것으로 읽히고, 그 옆의 멀쩡한 본문까지 의심받는다.

   '.jsonly{display:none} + .js .jsonly{display:block}' 로 적지 않는 이유:
   그러면 .cyc-track{display:flex} 같은 뒤에 오는 같은 등급(0,1,0) 규칙이 숨김을
   이겨서 JS 없이도 빈 껍데기가 남는다. 실제로 그랬다. 숨기는 쪽을
   (0,3,0) 으로 올려 두면 각 요소는 자기 display 를 그대로 쓰면서도 확실히 숨는다. */
:root:not(.js) .jsonly { display: none; }

/* ── 상단바 ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cw-bg);
  border-bottom: 1px solid var(--cw-line);
}
.nav .wrap { display: flex; align-items: center; gap: 10px; height: 58px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap;
  min-width: 0; padding: 6px 0; }
.brand b { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.brand span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--cw-text-3); }
.nav-sp { flex: 1; }
.nav .cw-btn { flex: none; }

/* 페이지 링크 — wattlayer.io 처럼 내용을 페이지로 나눠 상단바가 배분한다.
   좁은 화면에서는 줄을 바꾸지 않고 옆으로 민다(스크롤바는 숨긴다) —
   접는 버튼을 만들면 JS 가 죽는 날 메뉴가 통째로 사라진다. */
.nav-links { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  flex: none; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 700; color: var(--cw-text-2);
  text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: var(--cw-text); background: var(--cw-surface-2); }
.nav-links a[aria-current="page"] { color: var(--cw-brand-ink); background: var(--cw-brand-soft); }
/* 농장 등록 신청. 이 사이트가 받고 싶은 행동이라 다른 메뉴와 무게를 다르게 준다 —
   로그인 버튼 바로 왼쪽에 두되, 로그인(테두리 버튼)과 모양이 겹치지 않게 채움색으로. */
.nav-links a.is-cta { color: var(--cw-brand-ink); background: var(--cw-brand-soft); }
.nav-links a.is-cta:hover { color: var(--cw-on-brand); background: var(--cw-brand); }

/* ── 하위 페이지 머리 ───────────────────────────────────────────────
   홈 히어로만큼 크지 않다. 페이지 이름과 한 줄 안내만 둔다 —
   본문은 각 섹션의 sec-head 가 말한다. */
.page-head { padding: 40px 0 0; }
.page-head .kicker { font-size: 12px; font-weight: 800; letter-spacing: .13em; color: var(--cw-brand-ink); }
.page-head h1 { margin: 8px 0 0; font-size: clamp(27px, 5.6vw, 40px); line-height: 1.2; letter-spacing: -.03em; }
.page-head p { margin: 12px 0 0; max-width: 62ch; color: var(--cw-text-2); font-size: clamp(15px, 3.3vw, 17.5px); }

/* ── 히어로 ─────────────────────────────────────────────────────── */
.hero { position: relative; padding: 30px 0 62px; background-image: var(--cw-glow); border-top: 0; }
/* 은은한 격자. 장식이라 pointer-events 를 끄고, 아래로 갈수록 지워 본문과 섞이지 않게 한다. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--cw-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cw-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.hero > .wrap { position: relative; }

/* ── 히어로 맨 위: AGI 카드 ────────────────────────────────────────
   형제 서비스 wattlayer.io 의 같은 카드와 **크기까지** 맞춘다(오너 지시 2026-08-07).
   이 카드는 COWMAN 의 것이 아니라 그 위에서 도는 AGI 시스템(HANA)의 것이고,
   네 서비스가 같은 블록을 쓴다. 서비스마다 다르게 생기면 같은 시스템이
   운영한다는 사실이 화면에서 사라진다.

   그래서 여기만 페이지의 초록이 아니라 HANA 의 금색을 쓴다. 아래 값들은 그 카드
   안에서만 쓰이며 --cw-* 팔레트로 새지 않는다.

   이미지는 형제와 같은 파일(hana-agi.webp, wattlayer landing/public 에서 복사)이고
   배경도 형제와 같은 #0A1628 이다. 이미지에 배경이 구워져 있어도 카드가 같은 색이라
   이음매가 없다. filter·mix-blend-mode 를 걸지 마라 — 걸면 그림과 배경이 갈라진다.

   좁은 화면에서도 이 카드를 줄이지 않는다. 전에는 640px 아래에서 로고를 104px 로
   줄이고 하단 문구를 접었는데, 형제 카드와 크기가 달라져 걷어냈다(wattlayer 는
   모바일에서도 로고 160 · 패딩 24 · 문구 전부를 유지한다). */
.agi-card {
  --hana-gold: #E6B830;          /* 눈썹·강조·칩 글자·링크. #0A1628 위 9.6:1 */
  --hana-gold-line: rgba(212, 160, 23, .5);
  --hana-dark: #0A1628;          /* wattlayer --color-dark 와 같은 값 */
  display: block; margin: 0 0 40px; overflow: hidden;
  border-radius: 16px; text-decoration: none; text-align: left;
  background: var(--hana-dark); color: #FFFFFF;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  transition: box-shadow .16s ease;
}
.agi-card:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.agi-in { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; }
.agi-in > div { min-width: 0; }

/* 이미지가 카드 배경과 같은 색이라 그릇이 필요 없다. line-height: 0 은 인라인 이미지
   아래 생기는 글꼴 여백을 없앤다 — 카드 배경과 같은 색이라 보이지는 않지만 높이를 민다. */
.agi-img { flex: none; display: block; width: 160px; height: auto; line-height: 0; }

.agi-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--hana-gold);
}
.agi-h {
  margin: 6px 0 0; font-size: 20px; font-weight: 800;
  line-height: 1.375; color: #FFFFFF;
}
.agi-h em { font-style: normal; color: var(--hana-gold); }
/* 이 카드의 크기 값은 형제 사이트(wattlayer.io)와 같아야 한다. 가독성 손질로 줄 간격이나
   글자 크기를 올리지 마라 — 올리는 순간 같은 카드가 서비스마다 다른 높이로 뜬다. */
.agi-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.625; color: #CBD5E1; }
.agi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.agi-chips li {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hana-gold-line);
  font-size: 12px; font-weight: 600; color: var(--hana-gold);
}
.agi-foot { margin: 12px 0 0; font-size: 11px; line-height: 1.625; color: #94A3B8; }
.agi-go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  font-size: 12px; font-weight: 600; line-height: 16px; color: var(--hana-gold);
}
.agi-card:hover .agi-go { text-decoration: underline; text-underline-offset: 3px; }
.agi-card:focus-visible { outline: 3px solid var(--hana-gold); outline-offset: 3px; }

/* ── 히어로 본문 ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
  margin: 0 0 18px; padding: 7px 15px;
  border: 1px solid var(--cw-brand); border-radius: 999px; background: var(--cw-brand-soft);
  font-size: 13px; font-weight: 800; line-height: 1.5; color: var(--cw-brand-ink);
}
.pill span { font-size: 12.5px; font-weight: 600; color: var(--cw-text-2); }

h1 {
  margin: 0;
  font-size: clamp(31px, 6.9vw, 54px);
  line-height: 1.16; font-weight: 800; letter-spacing: -.038em;
}
h1 em { font-style: normal; color: var(--cw-brand-ink); }

/* 제목 바로 아래의 리드. 제품이 무엇을 해 주는지를 말하는 문단이고, 첫 화면에서
   h1 다음으로 큰 글이다. 아래 .hero-problem(문제 서술)보다 **반드시** 크고 진해야 한다 —
   둘의 무게가 뒤집히면 눈은 진한 쪽을 리드로 읽어서, 제품 설명이 부연으로 내려앉는다.
   실제로 그랬다: 리드가 옅은 본문색·보통 굵기였고 문제 문단이 진한 본문색·700 이었다. */
.lead { margin: 18px 0 0; font-size: clamp(17px, 4vw, 21px); line-height: 1.7; font-weight: 700; color: var(--cw-text); }
.lead span { display: block; }
.lead b { color: var(--cw-brand-ink); font-weight: 800; }

.hero-bul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hero-bul li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 11px;
  font-size: clamp(14.5px, 3.3vw, 16.5px); line-height: 1.72; color: var(--cw-text-2);
}
.hero-bul .ar { color: var(--cw-brand); font-weight: 800; }
.hero-bul b { color: var(--cw-text); font-weight: 800; }
.hero-bul .from { display: block; margin-top: 3px; font-size: 12.5px; color: var(--cw-text-3); }
.hero-bul .from a { color: var(--cw-text-3); text-decoration: underline; text-underline-offset: 2px; }
.hero-bul .from a:hover { color: var(--cw-text); }

/* 문제 서술이다. 이름이 'prod'(제품)이면 다음 사람이 여기에 제품 문장을 더 적는다 —
   클래스 이름은 그 자리에 무엇이 놓이는지를 말해야 한다. 리드 아래의 부연이므로
   본문 굵기·보조 본문색으로 둔다. */
.hero-problem {
  margin: 22px 0 0; font-size: clamp(15px, 3.3vw, 16.5px);
  line-height: 1.75; color: var(--cw-text-2); max-width: 56ch;
}

.hero-box {
  margin: 26px 0 0; padding: 18px 20px;
  border: 2px solid var(--cw-line-2); border-radius: var(--cw-radius);
}
.hero-box b { display: block; font-size: clamp(15.5px, 3.4vw, 17.5px); }
.hero-box p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.72; color: var(--cw-text-2); }

.hero-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ── 섹션 공통 ──────────────────────────────────────────────────── */
section { padding: 68px 0; border-top: 1px solid var(--cw-line); }
.sec-head { max-width: 62ch; margin-bottom: 32px; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .13em; color: var(--cw-brand-ink); }
h2 { margin: 10px 0 0; font-size: clamp(24px, 5.2vw, 35px); line-height: 1.26; font-weight: 800; letter-spacing: -.03em; }
h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sec-head p { margin: 12px 0 0; color: var(--cw-text-2); font-size: clamp(15px, 3.3vw, 18px); }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 출처 줄. 랜딩의 숫자에는 전부 이것이 붙는다 — 붙지 않은 숫자는 적지 않는다. */
.src { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cw-text-3); }
.src a { color: var(--cw-text-3); text-decoration: underline; text-underline-offset: 2px; }
.src a:hover { color: var(--cw-text); }

/* ── 큰 숫자 카드 ───────────────────────────────────────────────── */
.numgrid { margin-top: 38px; }
.num { padding: 24px 22px; }
.num-v {
  font-size: clamp(31px, 6.4vw, 43px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.045em; color: var(--cw-brand-ink); font-variant-numeric: tabular-nums;
}
.num-v .u { font-size: .5em; letter-spacing: -.01em; }
.num h3 { margin: 13px 0 0; font-size: 15.5px; }
.num p { margin: 8px 0 0; color: var(--cw-text-2); font-size: 15.5px; }

/* ── 재는 것 (히어로 마감) ──────────────────────────────────────────
   여기에 성능을 적지 않는다. 재는 대상과 재는 방식만 적는다. */
.proof {
  margin-top: 20px; padding: 20px 22px;
  border: 1px solid var(--cw-brand); border-radius: var(--cw-radius); background: var(--cw-surface);
}
.proof-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
/* 섹션 제목(h2)이 아니라 상자 제목이다. 크기는 상자에 맞추고 단만 h2 로 둔다. */
.proof-t { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.5; }
.proof-h span { font-size: 13.5px; color: var(--cw-text-2); }
.proof-grid { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-grid .v {
  font-size: clamp(24px, 5vw, 32px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.04em; color: var(--cw-brand-ink); font-variant-numeric: tabular-nums;
}
.proof-grid .v .u { font-size: .5em; letter-spacing: 0; }
.proof-grid h3 { margin: 8px 0 0; font-size: 15.5px; }
.proof-grid p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--cw-text-2); }
.hero-src { margin: 14px 0 0; font-size: 12px; line-height: 1.72; color: var(--cw-text-3); }

/* ── 근거 문단 ──────────────────────────────────────────────────── */
.claims { border-top: 1px solid var(--cw-line); }
.claim-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr);
  gap: 14px; padding: 18px 2px; border-bottom: 1px solid var(--cw-line);
}
.claim-row .ar { color: var(--cw-brand); font-weight: 800; line-height: 1.5; }
.claim-row p { margin: 0; font-size: clamp(15px, 3.4vw, 16.5px); line-height: 1.75; }
.claim-row p b { color: var(--cw-brand-ink); font-weight: 800; }
.claim-row .src { margin-top: 7px; }

/* ── AGI 네 요소 ────────────────────────────────────────────────── */
.agi { position: relative; padding: 24px; overflow: hidden; }
.agi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cw-brand); }
.agi .n { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--cw-brand-ink); }
.agi h3 { margin: 8px 0 0; font-size: 17px; }
.agi .claim { margin: 10px 0 0; font-size: clamp(17px, 3.6vw, 20px); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.agi p { margin: 10px 0 0; color: var(--cw-text-2); font-size: 15px; line-height: 1.75; }
/* '축사에서는 —' 한 줄. 머리(HANA)가 하는 일과 그 결과로 몸(COWMAN)에서 달라지는 것을
   눈으로도 갈라 준다. 이 구분이 없으면 카드 넉 장이 다시 제품 기능 설명으로 읽힌다. */
.agi .claim-sub {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--cw-brand-soft); color: var(--cw-brand-ink);
  font-size: 14px; font-weight: 700; line-height: 1.65;
}

/* ── 감지 항목 ──────────────────────────────────────────────────── */
.det { padding: 22px; }
.det .badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: var(--cw-brand-soft); color: var(--cw-brand-ink);
}
.det .badge.urgent { background: var(--cw-danger-soft); color: var(--cw-danger); }
.det h3 { margin: 12px 0 0; }
.det p { margin: 10px 0 0; color: var(--cw-text-2); font-size: 15px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--cw-surface-2); color: var(--cw-text-2); border: 1px solid var(--cw-line);
}
.sub-h { margin: 34px 0 0; font-size: 16px; font-weight: 800; }
.sub-h + p { margin: 6px 0 0; color: var(--cw-text-3); font-size: 15.5px; }

/* ── 만져 보는 도구 ─────────────────────────────────────────────── */
.tool { padding: 22px; }
.tool-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.tool-h h3 { font-size: 17px; }
.demo-tag {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--cw-warn-soft); color: var(--cw-warn); border: 1px solid var(--cw-line);
}
.tool > p { margin: 10px 0 0; color: var(--cw-text-2); font-size: 15.5px; }

.segtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.segbtn {
  min-height: 40px; padding: 8px 15px; border-radius: var(--cw-radius-sm); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
  background: var(--cw-surface-2); color: var(--cw-text-2); border: 1px solid var(--cw-line);
}
.segbtn:hover { border-color: var(--cw-line-2); color: var(--cw-text); }
.segbtn[aria-pressed="true"] { background: var(--cw-brand); color: var(--cw-on-brand); border-color: var(--cw-brand); }

.bar {
  display: flex; height: 34px; margin-top: 16px; overflow: hidden;
  border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm); background: var(--cw-surface-2);
}
.bar span { flex: 0 0 auto; min-width: 0; transition: width .35s ease; }
/* 마지막 칸만 남는 폭을 먹는다. 다섯 칸을 백분율로 적으면 반올림 때문에 합이
   99.99% 가 되고, 그 0.01% 틈으로 막대 배경이 한 줄 비쳐 보인다. */
.bar span:last-child { flex: 1 1 auto; }
.k-rum   { background: var(--cw-behavior-rumination); }
.k-eat   { background: var(--cw-behavior-eating); }
.k-lie   { background: var(--cw-behavior-lying); }
.k-walk  { background: var(--cw-behavior-walking); }
.k-stand { background: var(--cw-behavior-standing); }

.legend {
  list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.legend li {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 14px;
  background: var(--cw-surface); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm);
}
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend .v { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend .d { font-size: 12px; font-weight: 800; white-space: nowrap; }
.legend .d.up { color: var(--cw-accent); }
.legend .d.dn { color: var(--cw-warn); }
.tool-note { margin: 14px 0 0; padding: 12px 14px; font-size: 15px; line-height: 1.72;
  background: var(--cw-surface-2); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm); }

.cyc-track { display: flex; gap: 3px; margin-top: 18px; }
.cyc-track span {
  flex: 1 1 0; height: 13px; border-radius: 3px;
  background: var(--cw-surface-sunken); border: 1px solid var(--cw-line);
}
.cyc-track span.on { background: var(--cw-brand); border-color: var(--cw-brand); }
.cyc-track span.est { background: var(--cw-estrus); border-color: var(--cw-estrus); }
.cyc-scale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11.5px; color: var(--cw-text-3); }
.cyc-slider { width: 100%; height: 34px; margin: 4px 0 0; accent-color: var(--cw-brand); }
.cyc-out {
  margin-top: 14px; padding: 17px 19px; border-radius: var(--cw-radius);
  background: var(--cw-surface-2); border: 1px solid var(--cw-line);
}
.cyc-day { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--cw-brand-ink); }
.cyc-cost {
  margin: 5px 0 0; font-size: clamp(26px, 6vw, 38px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cyc-msg { margin: 8px 0 0; color: var(--cw-text-2); font-size: 15.5px; }

/* ── 동작 그림 ──────────────────────────────────────────────────────
   색을 SVG 속성(fill="…")에 적지 않고 CSS 규칙으로 준다. 표현 속성 안의 var()
   는 브라우저마다 되고 안 되고가 갈려서, 안 되는 쪽에서는 그림이 통째로 검게
   나온다. 규칙으로 주면 어느 쪽에서도 밝기 전환을 따라온다. */
.flow { padding: 20px; overflow-x: auto; }
/* min-width 는 viewBox 폭과 **같아야 한다.** SVG 는 폭이 줄면 글자만 남기고 줄어드는
   것이 아니라 그림 전체가 그 비율로 축소된다 — min-width 가 730 이던 동안 375·768px
   에서 배율이 0.73 이라 11px 라벨이 8.03px 로 그려졌다. 같은 화면 본문이 14~15px 이고,
   이 페이지가 스스로 드는 독자는 경영주 평균 67.7세다.
   그래서 폭을 viewBox 그대로 고정해 배율이 1 아래로 내려가지 않게 한다. 좁은 화면에서는
   이 그림 대신 아래 .flow-steps 세로 목록이 나온다 — 1000px 그림을 손가락으로 밀어
   보게 하는 것은 읽기가 아니다. */
.flow svg { display: block; min-width: 1000px; width: 100%; height: auto; font-family: inherit; }
.fl-box { fill: var(--cw-surface-2); stroke: var(--cw-line); }
.fl-box.is-end { fill: var(--cw-brand-soft); }
.fl-dot { fill: var(--cw-brand); }
.fl-dot.is-blue { fill: var(--cw-accent); }
.fl-link { fill: none; stroke: var(--cw-line-2); stroke-width: 2; stroke-dasharray: 5 5; }
.fl-t { fill: var(--cw-text); font-size: 15px; font-weight: 800; }
.fl-s { fill: var(--cw-text-2); font-size: 12.5px; }
.fl-m { fill: var(--cw-text-3); font-size: 12px; }
/* 카드 사이 간격은 72 다. 4글자 라벨('블루투스')이 13px 면 52 이라 양옆에 10 씩 남는다 —
   더 키우면 라벨이 카드에 닿는다. functions/test/landing_layout.test.js 가 그 여유를 잰다. */
.fl-lbl { fill: var(--cw-text-2); font-size: 13px; font-weight: 700; text-anchor: middle; }

/* ── 좁은 화면의 신호 흐름 ─────────────────────────────────────────
   위 그림과 **같은 네 단계**다. 한쪽만 고치지 마라 — 단계 이름과 연결 수단이
   어긋나면 landing_layout.test.js 가 잡는다.
   등장 효과(.reveal)를 걸지 않는다. display:none 인 동안에는 관찰이 '들어왔다'를
   보고하지 않아서, 화면을 좁히는 순간 투명한 채로 남는다. */
.flow-steps { display: none; margin: 0; padding: 20px; list-style: none; counter-reset: fs; }
.flow-steps li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 13px;
  counter-increment: fs;
}
.flow-steps li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cw-line); }
.flow-steps li::before {
  content: counter(fs); grid-column: 1; grid-row: 1 / span 3;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: var(--cw-brand); color: var(--cw-on-brand); font-size: 14px; font-weight: 800;
}
.flow-steps li > * { grid-column: 2; }
.flow-steps b { font-size: 16.5px; font-weight: 800; }
.flow-steps span { font-size: 15.5px; line-height: 1.72; color: var(--cw-text-2); }
.flow-steps i {
  font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--cw-brand-ink);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 인사이트 ───────────────────────────────────────────────────── */
.ins { padding: 22px; }
.ins .t { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--cw-accent); }
.ins h3 { margin: 9px 0 0; font-size: 17px; }
.ins p { margin: 10px 0 0; color: var(--cw-text-2); font-size: 15.5px; }
.ins ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ins li { display: flex; gap: 9px; font-size: 15px; color: var(--cw-text-2); }
.ins li b { color: var(--cw-text); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 도입 절차 ──────────────────────────────────────────────────── */
.step { padding: 20px; }
.step .no {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--cw-radius-sm);
  background: var(--cw-brand); color: var(--cw-on-brand); font-weight: 800; font-size: 14px;
}
.step h3 { margin: 12px 0 0; font-size: 16px; }
.step p { margin: 6px 0 0; color: var(--cw-text-2); font-size: 15.5px; }

/* ── 알림 상자 ──────────────────────────────────────────────────── */
.note {
  padding: 20px 22px; border-radius: var(--cw-radius);
  background: var(--cw-surface-2); border: 1px solid var(--cw-line);
}
.note b { display: block; margin-bottom: 6px; font-size: 15px; }
.note p { margin: 0; color: var(--cw-text-2); font-size: 15.5px; }
.note p + p { margin-top: 8px; }
/* 상자 사이 간격은 부모가 준다(그리드는 gap, 낱개는 인라인 margin-top).
   여기에 `.note + .note { margin-top }` 를 두면 그리드 안에서 조용히 어긋난다 —
   그리드 항목은 마진박스가 행에 맞춰 늘어나므로, 마진이 붙은 둘째·셋째 장만
   테두리가 12px 짧아지고 위 끝이 내려간다. 실제로 그렇게 보였다. */

/* ── 표 ─────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--cw-line); border-radius: var(--cw-radius); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--cw-line); vertical-align: top; }
thead th { background: var(--cw-surface-2); font-weight: 800; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
tbody th { font-weight: 400; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td:nth-child(2) { white-space: nowrap; font-weight: 700; color: var(--cw-brand-ink); }
td:nth-child(3) { color: var(--cw-text-2); }

/* ── 근거 목록 ──────────────────────────────────────────────────────
   내용은 evidence.g.js 에서 그린다. 여기에는 모양만 있다. */
.srcs { margin: 0; padding: 0 0 0 24px; display: grid; gap: 15px; font-size: 15px; color: var(--cw-text-2); }
.srcs li { padding-left: 4px; scroll-margin-top: 76px; }
.srcs b { display: block; color: var(--cw-text); font-size: 15.5px; font-weight: 800; }
.srcs .used { display: block; margin-top: 2px; }
.srcs a { display: inline-block; margin-top: 3px; color: var(--cw-accent); word-break: break-all; text-underline-offset: 2px; }
.srcs li:target { background: var(--cw-brand-soft); border-radius: 8px; box-shadow: 0 0 0 8px var(--cw-brand-soft); }
.srcs-empty { color: var(--cw-text-2); }
/* 근거의 성격표. 선행연구(.warn)는 다른 팀의 성적이지 이 제품의 성능이 아니다 —
   통계와 같은 모양으로 놓이면 그 구분이 사라지므로 색과 테두리로 갈라 둔다. */
.srcs .kind {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  color: var(--cw-text-2); background: var(--cw-surface-2); border: 1px solid var(--cw-line);
}
/* 글자색은 --cw-warn 이 아니라 --cw-text 다. 12px 굵은 글자를 옅은 호박색 면 위에
   호박색으로 얹으면 밝은 화면에서 대비가 기준 아래로 떨어진다 — 경고일수록 읽혀야 한다. */
.srcs .kind.warn { color: var(--cw-text); background: var(--cw-warn-soft); border-color: var(--cw-warn); }
/* 근거 목록을 못 그렸을 때 링크에서 벗겨진 글자. 링크처럼 보이면 안 되지만
   출처를 밝힌 문장이라는 것은 남아야 한다. */
.src-dead { color: var(--cw-text-2); }

/* ── 매일 수집한 축산 소식·논문 ─────────────────────────────────────
   판정 근거 목록(.srcs)과 **눈에 띄게 다르게** 생겨야 한다. 둘이 비슷하면 검증한 것과
   자동으로 긁어 온 것이 같은 무게로 읽힌다. 그래서 번호를 매기지 않고 카드로 눕힌다. */
.worlds { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.worlds li {
  padding: 14px 16px; border: 1px solid var(--cw-line); border-radius: var(--cw-radius);
  background: var(--cw-surface);
}
.worlds .w-t { display: block; font-size: 15px; font-weight: 700; color: var(--cw-text);
  text-decoration: none; line-height: 1.5; text-underline-offset: 2px; }
.worlds .w-t:hover { text-decoration: underline; }
.worlds .w-m { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--cw-brand-ink); }
.worlds .w-s { display: block; margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--cw-text-2); }
@media (min-width: 720px) { .worlds { grid-template-columns: 1fr 1fr; } }

/* ── 마무리 CTA ─────────────────────────────────────────────────── */
/* 페이지에서 --cw-ink 로 남는 자리. 마무리 한 판을 어둡게 두는 것은 밝기 설정과
   무관한 배치이고, 그래서 글자·선도 --cw-ink-* 를 쓴다. */
.cta {
  padding: 40px 28px; border-radius: var(--cw-radius-lg); text-align: center;
  background: var(--cw-ink); color: var(--cw-ink-text); border: 1px solid var(--cw-ink-line);
  box-shadow: var(--cw-ink-lift);
}
.cta h2 { color: var(--cw-ink-text); }
.cta p { margin: 12px auto 0; max-width: 46ch; color: var(--cw-ink-text-2); font-size: 15.5px; }
.cta .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
/* 테두리에 --cw-ink-line 을 쓰지 마라. 그 값은 면의 경계선용이라 --cw-ink 위에서
   1.45:1 이고, 버튼의 테두리는 그 버튼이 어디까지인지를 알려 주는 **유일한** 표시다
   (면도 없고 그림자도 없다). 비텍스트 대비 3:1 아래로 내려가면 밝은 곳에서 버튼이
   글자 두 낱말로만 보인다. 잉크면 위의 글자에 쓰는 값을 그대로 쓴다. */
.cta .cw-btn--ghost { background: transparent; color: var(--cw-ink-text); border-color: var(--cw-ink-text-2); }
.cta .cw-btn--ghost:hover { background: var(--cw-ink-hover); }
.cta :focus-visible { outline-color: var(--cw-green-300); }

/* ── 바닥 ───────────────────────────────────────────────────────── */
/* ── 법적 고지 페이지(개인정보처리방침·이용약관) ────────────────────
   읽으라고 만든 문서다. 본문 칸을 좁게 잡아 한 줄이 길어지지 않게 하고,
   조 사이를 넉넉히 띄워 눈이 어디를 읽는지 잃지 않게 한다. */
.wrap-doc { max-width: 820px; }
.doc { padding: 8px 0 56px; }
.doc h2 {
  margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--cw-line);
  font-size: 19px; letter-spacing: -.01em;
}
.doc h2:first-child { border-top: 0; padding-top: 0; margin-top: 28px; }
.doc p { margin: 0 0 12px; line-height: 1.85; color: var(--cw-text-2); }
.doc .tablewrap { margin: 16px 0 20px; }
.doc .note { margin: 18px 0; }
.doc-list { margin: 0 0 14px; padding-left: 20px; }
.doc-list li { margin: 0 0 9px; line-height: 1.8; color: var(--cw-text-2); }
.doc-list li b { color: var(--cw-text); }
.doc-date { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--cw-line);
  font-weight: 700; color: var(--cw-text-3); }
/* 사람이 다치거나 소를 잃을 수 있는 항목. 다른 안내와 같은 무게로 읽히면 안 된다. */
.note--strong { border-color: var(--cw-brand); background: var(--cw-brand-soft); }

/* ── 바닥 ───────────────────────────────────────────────────────────
   형제 사이트(wattlayer.io)와 같은 짜임이다: 왼쪽에 이름과 한 줄 소개,
   오른쪽에 갈래별 링크 두 칸, 가로줄 아래 저작권과 그룹 문구.
   전에는 링크가 한 줄로 늘어서 있어서 '제품을 보는 링크'와 '회사·법적 고지'가
   같은 무게로 읽혔다. */
footer { padding: 56px 0 40px; border-top: 1px solid var(--cw-line); color: var(--cw-text-3); font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px 24px; }
.foot-brand b { display: block; font-size: 19px; font-weight: 800; color: var(--cw-text); letter-spacing: .01em; }
.foot-brand b span { color: var(--cw-text-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-left: 7px; }
.foot-brand p { margin: 12px 0 0; max-width: 34ch; line-height: 1.75; color: var(--cw-text-2); }
.foot-col h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--cw-text-3); }
.foot-col nav { display: flex; flex-direction: column; gap: 0; }
footer a { display: inline-block; padding: 7px 0; color: var(--cw-text-2); text-decoration: none; width: fit-content; }
footer a:hover { color: var(--cw-text); text-decoration: underline; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--cw-line);
}
.foot-bot .tag { font-weight: 700; color: var(--cw-brand-ink); }
/* 사업자 표시. 법이 요구하는 것이라 눈에 띄지 않되 찾을 수는 있어야 한다. */
.foot-biz { margin-top: 14px; font-size: 12.5px; line-height: 1.9; color: var(--cw-text-3); }
.foot-biz span { white-space: nowrap; }
.foot-biz span + span::before { content: "·"; margin: 0 8px; color: var(--cw-line-2, #CBD5E1); }
@media (max-width: 720px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-biz span + span::before { content: none; }
  .foot-biz span { display: block; white-space: normal; }
}

/* ── 등장 효과 ──────────────────────────────────────────────────────
   숨기는 규칙에 .js 를 붙여 둔다. landing.js 가 첫 줄에서 <html> 에 .js 를 달기
   때문에, 스크립트가 막히거나 죽으면 이 규칙 자체가 걸리지 않아 본문이 그냥 보인다.
   (JS 가 켜야만 보이는 본문은 만들지 않는다.)

   **.reveal 은 그리드 안의 낱장이 아니라 그리드 자체에 건다.** 낱장마다 걸면 같은
   행의 카드가 각자 다른 순간에 올라와 행이 계단처럼 어긋나 보이고, 카드가 몇 장인지에
   따라 그 어긋남이 화면마다 달라진다. 새 그리드를 더할 때도 이 규칙을 따른다. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .bar span { transition: none; }
}
/* 인쇄물에는 등장 효과가 없다. 이 규칙이 없으면 종이가 백지로 나온다. */
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* ── 반응형 ─────────────────────────────────────────────────────── */
/* 640 은 wattlayer(Tailwind sm:)와 같은 경계다. 641 로 적으면 딱 640px 에서만
   형제와 다른 배치가 된다. */
@media (min-width: 640px) {
  /* 데스크톱에서는 로고가 왼쪽, 글이 오른쪽. 휴대폰에서는 세로로 쌓인다. */
  .agi-in { flex-direction: row; align-items: center; gap: 28px; padding: 28px; }
  .agi-img { width: 192px; }
  .agi-h { font-size: 24px; }
}
@media (max-width: 940px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 여기서부터는 그림 대신 목록이다. 이 폭에서 1000px 그림을 넣으면 상자 안에서만
     700px 넘게 옆으로 밀어야 하고, 줄여서 넣으면 라벨이 8px 로 그려진다. 둘 다 안 읽힌다. */
  .flow { display: none; }
  .flow-steps { display: block; }
}
@media (max-width: 640px) {
  section { padding: 52px 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .hero-btns .cw-btn { flex: 1 1 100%; }

  /* 상단바. 375px 에서 로고가 줄어들며 'BY WONBRAND' 가 메뉴 밑으로 들어가 글자가
     포개졌다(실측 2026-09-02, index·how·start 전부). 로고는 줄이지 않고 부제만 접는다 —
     메뉴는 원래 옆으로 밀리게 돼 있으니(위 .nav-links) 남는 폭은 그쪽이 흡수한다. */
  .nav .wrap { gap: 6px; }
  .brand { flex: none; }
  .brand span { display: none; }
  .nav-links a { padding: 8px 8px; font-size: 13px; }

  .hero { padding: 22px 0 46px; }

  /* AGI 카드는 여기서 줄이지 않는다 — 형제(wattlayer)와 크기까지 같아야 한다.
     휴대폰 첫 화면을 카드가 차지하는 대신, 상단바가 페이지를 나누므로
     본문이 밀리는 부담은 페이지 분배가 진다. */
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numgrid { margin-top: 28px; }
  .cyc-track { gap: 2px; }
  .cyc-track span { height: 16px; }
  .pill { margin-bottom: 12px; padding: 6px 13px; }
}

/* 자료 목록의 제목 — 원문으로 가는 링크다(안내문이 그렇게 말한다).
   굵기는 <b> 이던 시절과 같게 둔다. 링크라고 색까지 바꾸면 목록 전체가 파래져
   무엇이 제목이고 무엇이 인용인지 한눈에 안 갈린다. */
.srcs .src-t { font-weight: 700; color: inherit; text-decoration: none; }
.srcs .src-t:hover,
.srcs .src-t:focus-visible { text-decoration: underline; }

/* ── 자료 목록 쪽 넘기기 ─────────────────────────────────────────────────
   1,700건을 한 쪽에 그리면 페이지가 끝없이 길어져 아무도 안 읽는다. 자료는 매일
   늘어나므로 이 문제는 저절로 나빠진다(오너 지적 2026-08-23). */
.mat-nav{display:flex;align-items:center;gap:12px;margin:10px 0 26px;flex-wrap:wrap}
.mat-pg{padding:6px 14px;border:1px solid var(--line,#cfd8dc);background:#fff;
        border-radius:4px;font-size:14px;cursor:pointer;color:inherit}
.mat-pg:hover:not(:disabled){background:#f4f7f8}
.mat-pg:disabled{opacity:.4;cursor:default}
.mat-pg-n{font-size:13px;opacity:.75}

/* ── 자료 게시판 ─────────────────────────────────────────────────────────
   1,700건을 죽 늘어놓으면 아무도 안 읽는다. 갈래를 고르고 찾고 쪽으로 넘긴다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mat-search{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
            background:rgba(127,127,127,.06);padding:14px;border-radius:6px;margin:18px 0 12px}
.mat-search select,.mat-search input{padding:9px 12px;border:1px solid var(--line,#cfd8dc);
            border-radius:4px;font-size:14px;background:#fff;color:#222}
.mat-search input{flex:1 1 260px;min-width:0}
.mat-btn{padding:9px 18px;border:1px solid var(--line,#cfd8dc);background:#fff;color:inherit;
         border-radius:4px;font-size:14px;cursor:pointer}
.mat-btn.primary{background:#1a5c3a;border-color:#1a5c3a;color:#fff}
.mat-btn:hover{opacity:.88}
.mat-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;
          flex-wrap:wrap;font-size:13px;opacity:.8;margin-bottom:6px}
.mat-per select{padding:4px 8px;border:1px solid var(--line,#cfd8dc);border-radius:4px;
                background:#fff;color:#222}
/* 공용 table 규칙이 min-width:560px 를 건다(.tablewrap 안에서 옆으로 미는 표들 몫이다).
   이 표는 그 상자 밖에 있어서 그 값이 그대로 **페이지 전체**를 옆으로 밀었다. */
.mat-table{width:100%;min-width:0;border-collapse:collapse;font-size:14px}
.mat-table th{text-align:left;padding:10px 8px;border-bottom:2px solid var(--line,#cfd8dc);
              font-weight:600;white-space:nowrap}
.mat-table td{padding:10px 8px;border-bottom:1px solid rgba(127,127,127,.18);vertical-align:top}
.mat-table .c-no{width:64px;text-align:right;opacity:.65;white-space:nowrap}
.mat-table .c-kind{width:88px;white-space:nowrap}
.mat-table .c-src{width:210px;opacity:.8}
.mat-table .c-date{width:104px;white-space:nowrap;opacity:.7}
.mat-table tr:target td{background:rgba(26,92,58,.10)}
.mat-kind-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;
              background:rgba(26,92,58,.10);color:#1a5c3a;white-space:nowrap}
.mat-kind-tag.article{background:rgba(120,90,0,.12);color:#7a5b00}
.mat-cited{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;
           font-size:11px;background:rgba(26,92,58,.14);color:#1a5c3a}
.mat-quote{display:block;margin-top:4px;font-size:12.5px;opacity:.72;line-height:1.5}
.mat-empty{padding:22px 8px;opacity:.7}
.mat-pg{min-width:38px;padding:7px 11px;border:1px solid var(--line,#cfd8dc);background:#fff;
        border-radius:4px;font-size:14px;cursor:pointer;color:inherit}
.mat-pg.on{background:#8b1a1a;border-color:#8b1a1a;color:#fff;font-weight:600}
.mat-pg:disabled{opacity:.35;cursor:default}
@media (max-width:720px){
  .mat-table .c-src,.mat-table .c-date{display:none}
  /* 출처·날짜를 접어도 순번·갈래의 고정폭과 제목의 최소폭이 합쳐져 표가 화면보다
     넓어졌다(실측 390px 화면에서 표 560px). 표만 잘리는 게 아니라 **본문 전체가
     옆으로 밀린다** — 이 페이지를 손에 들고 보는 사람이 매 줄마다 좌우로 흔들게 된다. */
  .mat-table{table-layout:fixed}
  .mat-table .c-no{width:34px}
  .mat-table .c-kind{width:60px}
  .mat-table th,.mat-table td{overflow-wrap:anywhere}
}