/* ──────────────────────────────────────────────────────────────
   이 제품(허위·과장 광고 탐지)의 역할 파일. 이 제품만 쓰는 치수를 둔다.
   - 2026-10-12 사용자 결정(shared 패턴 결정 29 A안): 두 제품 이상이 같은 값으로 쓰는 것만 shared roles.css로 올리고,
     한 제품만 쓰는 치수는 그 제품의 역할 파일에 둔다. 값마다의 쓰임과 다른 제품의 값은 shared 결정 문서의 결정 29 표에 있다
     (shared/design-system/docs/research/krds-extensions-2026-09-27/pattern-decisions.html, 제출 기록 pattern-submissions/20261012-163433.json).
   - 불러오는 순서: krds.css → roles.css → components.css → product-roles.css → app.css → (목업) proto.css, patterns.css
   - 화면 CSS는 shared roles.css와 이 파일의 역할만 쓴다. 새 치수가 필요하면 여기에 쓰임과 함께 먼저 더한다.
   - 괄호 안은 값이 나온 셈이다. 값은 화면 폭에 따라 바뀌지 않는다.
   ────────────────────────────────────────────────────────────── */
:root {
  /* 틀 */
  --bar-h: 56px;          /* 상단 바와 메뉴 맨 위 줄의 높이(버튼 40 + 위아래 8). 민원AI는 같은 이름을 48로 써서 공유로 올리지 않는다 */
  --bar2-h: 56px;         /* 광고 검토에서 상단 바 아래에 붙는 둘째 헤더의 높이(40 + 8×2) */
  --side-w-min: 57px;     /* 접은 왼쪽 메뉴의 폭(아이콘 버튼 40 + 8×2 + 선 1). 민원AI는 48 */
  --aside-w: 360px;       /* 광고 검토의 검토 패널, 상세 화면의 오른쪽 보조 열(320 + 40) */
  --paper-w: 760px;       /* 보고서 편집 화면의 문서 폭, 입력 화면의 최대 폭. 민원AI는 같은 이름을 210mm로 쓴다 */
  /* 목록 */
  --col-w-check: 52px;    /* 목록 표의 체크 열 */
  --col-w-thumb: 140px;   /* 보고서 사례 목록에서 썸네일이 놓이는 열 */
  --row-h-thumb: 64px;    /* 썸네일이 들어가는 목록 행의 높이(48 + 16) */
  --toolbar-h: 52px;      /* 목록 위 필터와 검색이 놓이는 줄의 최소 높이(36 + 8×2) */
  --progress-h: 4px;      /* 건수 글자와 함께 쓰는 진행 막대의 두께 */
  /* 입력 */
  --textarea-h: 120px;    /* 여러 줄 입력란의 최소 높이: 기본(40×3) */
  --textarea-h-md: 80px;  /* 검토 의견 입력란(40×2) */
  --textarea-h-sm: 72px;  /* 검토 패널 안 의견 입력란(36×2) */
  --select-w-mid: 188px;  /* 상품군 드롭다운과 값이 적은 드롭다운 목록의 폭(140 + 48) */
  --zoom-btn-w: 96px;     /* 원본 보기의 배율 표시 버튼 최소 폭(48×2) */
  /* --side-w, --thumb-h, --field-border(결정 29)와 --pane-w-sm, --dialog-w-form(결정 4-3, 2026-10-13)은 shared roles.css의 역할을 쓴다 */
  /* 문서(docs/decisions.html 같은 결정 요청 문서) */
  --doc-w: 1040px;        /* 문서 본문 폭 */
  --doc-col-min: 240px;   /* 문서의 캡처·선택지 칸의 최소 폭(넓으면 여러 칸, 좁으면 한 칸) */
  --doc-shot-max-h: 520px; /* 문서 안 캡처의 최대 높이(더 크면 눌러서 크게 본다) */
  /* 틀에 맞춘 높이와 자리(2026-10-12 릴리스 검수: 화면 CSS에서 calc로 만들던 치수를 역할로 옮김). 화면 높이(dvh)와 %는 쓰는 자리에서 계산된다 */
  --banner-h: 44px;       /* 상단 안내 띠의 높이(작은 버튼 28 + 위아래 8) */
  --head-h: 60px;         /* 제품 화면 패널 헤더 높이(작은 버튼 28 + 위아래 16). 버튼이 있든 없든 나란한 패널의 헤더가 같은 줄에 선다 */
  --head-h-line: 61px;    /* 패널 헤더 최소 높이(헤더 60 + 아래 선 1) */
  --toast-min-h: 44px;    /* 알림 최소 높이(작은 버튼 28 + 위아래 8) */
  --float-max-w: calc(100vw - var(--space-block) * 2);   /* 화면 가운데 뜨는 알림과 드롭다운의 최대 폭(좌우 16을 남김) */
  --notice-pad-y: 2px;    /* 안내 문장 한 줄(24)을 작은 컨트롤 높이(28) 가운데에 두는 위아래 여백 */
  --tools-shift: -8px;    /* 배율 도구 줄을 아이콘(20)과 셀렉트(36) 차이의 절반만큼 당겨 헤더 글자와 맞춤 */
  --indent-icon: 28px;    /* 아이콘(20)과 간격(8) 뒤로 들여 쓰는 폭 */
  --indent-icon-sm: 22px; /* 작은 아이콘(18)과 간격(4) 뒤로 들여 쓰는 폭 */
  --line-h-body: calc(var(--type-body) * var(--type-body-lh));   /* 본문 한 줄의 높이(24). 라벨을 옆 본문 첫 줄에 맞출 때 */
  --radio-nudge: calc((1lh - var(--icon-inline)) / 2);           /* 라디오를 옆 글자 첫 줄 가운데에 두는 위 여백 */
  --frame-h: calc(100dvh - var(--bar-h));                        /* 상단 바 아래 화면 높이(광고 검토의 고정 틀) */
  --rv-src-h: calc(100dvh - var(--bar-h) - var(--bar2-h) - var(--space-block) * 2);   /* 1024~1279 폭 광고 검토에서 붙어 있는 원본 패널 높이 */
  --rv-verdict-basis: calc(100% - var(--ctl-h-lg) - var(--space-block));             /* 좁은 화면 광고 검토 헤더에서 판정 묶음의 폭(뒤로 가기 버튼 몫을 뺌) */
  --side-sticky-top: calc(var(--bar-h) + var(--space-section));                        /* 목업 화면에서 옆에 붙는 보조 열의 위 자리 */
  --side-sticky-max-h: calc(100dvh - var(--bar-h) - var(--space-section) * 2);         /* 그 보조 열의 최대 높이 */
  --tab-row-pad-l: 4px;   /* 탭 줄 왼쪽 여백: 탭 글자를 패널 여백(20)에 맞춤(20 - 탭 안 여백 16) */
  --tab-row-pad-l-narrow: 0px;   /* 좁은 화면 탭 줄 왼쪽 여백(16 - 16) */
  --tab-search-mr: 12px;  /* 탭 줄 검색 입력의 오른쪽 여백: 패널 여백(20)에 맞춤(20 - 줄 오른쪽 여백 8) */
  /* 음수와 위치(2026-10-13 릴리스 검수: 화면 CSS에 남은 calc를 모두 역할로 옮김) */
  --line-strong-neg: -2px;     /* 굵은 선(2) 두께만큼 안쪽으로: 초점 외곽선을 요소 안에 그릴 때 */
  --space-stack-neg: -8px;     /* 쌓인 줄 간격(8)만큼 당김 */
  --space-inline-neg: -4px;    /* 붙임 간격(4)만큼 당김: 드롭다운이 열리고 닫힐 때 움직이는 거리 */
  --space-block-neg: -16px;    /* 블록 간격(16)만큼 밖으로: 좁은 화면 저장 줄을 화면 끝까지 */
  --space-page-neg: -40px;     /* 페이지 위 여백(40)만큼: 광고를 넘길 때 옆으로 밀려 나가는 거리 */
  --space-page-x-neg: -24px;   /* 페이지 좌우 여백(24)만큼 밖으로: 저장 줄을 본문 폭 끝까지 */
  --space-page-end-neg: -80px; /* 페이지 아래 여백(80)만큼 밖으로: 저장 줄을 화면 바닥에 붙임 */
  --combo-icon-left: 18px;     /* 검색형 드롭다운 검색 아이콘의 왼쪽 자리(줄 여백 8 + 셰브론 안쪽 10) */
  --combo-clear-right: 12px;   /* 검색어 지우기 버튼의 오른쪽 자리(줄 여백 8 + 4) */
  --table-min-vers: 768px;     /* 법령 개정본 표의 최소 폭(기간 224 + 날짜 124×2 + 상태 128 + 담당 168) */
  /* 글 */
  --sum-max-w: 80ch;      /* 광고 검토의 판정 요약 한 줄의 최대 길이 */
}

/* 상단 높이는 안내 띠가 뜨면 달라진다(body.has-banner, app.js). 그 값에 붙는 자리도 같은 요소에서 다시 계산되도록 body에 둔다 */
body {
  --top-h: var(--bar-h);
  --sticky-top: calc(var(--top-h) + var(--space-section));               /* 제품 화면 원본 패널이 붙는 위 자리 */
  --sticky-h: calc(100dvh - var(--top-h) - var(--space-section) * 2);    /* 그 원본 패널의 높이 */
  --scroll-top: calc(var(--top-h) + var(--space-block));                 /* 결과로 스크롤할 때 위에 남기는 자리 */
}
body.has-banner { --top-h: calc(var(--bar-h) + var(--banner-h)); }