/* 구분선 — 표 · 달력 · 구역  (사용자 지적 2026-09-17)
 *
 * 지적한 것
 *   "전체적으로 테이블에 라인이 없으니 구분이 잘 안 됨. 캘린더에서도 라인이 없으니 구분이
 *    잘 안 됨. 영역을 구분할 수 있도록 표에는 **연한 회색 라인**(이미 라인이 있는 표가 있음)을
 *    긋고, 업무 또는 구역별로는 간격이나 구분을 두어 영역을 알 수 있게."
 *
 * ★ 왜 파일을 따로 두는가
 *   이 앱은 `shell.css` → `linkbiz/*.css` 순서로 덮어쓴다. 가운데 파일에 선을 적으면
 *   링크비즈 테마가 뒤에서 도로 지운다(실제로 `table.list` 의 위쪽 보라선이 그렇게 지워져 있다).
 *   그래서 **선만 모아 맨 뒤에** 싣는다 — 되돌릴 때는 index.html 에서 이 한 줄만 뺀다.
 *
 * ★ 색을 하나로 묶는다
 *   표마다 다른 회색을 쓰면 "선이 있다" 가 아니라 "선이 제각각이다" 가 된다.
 *   칸 사이는 `--line`(이미 테두리가 있던 `table.kv`·`.card > table.list` 가 쓰던 색),
 *   바깥 테두리만 한 단계 진하게 — 영역이 **어디서 끝나는지**를 알리는 선이기 때문이다.
 */

:root{
  --grid-line: var(--line);      /* 칸 사이 — 연한 회색 */
  --grid-frame: #e2e0e8;         /* 영역의 끝 */
  --sec-line: #ebe9f0;           /* 구역 사이 */
}
body.theme-dark{ --grid-frame: var(--line-2); --sec-line: var(--line); }

/* ══ ① 표 — 바깥 테두리 + 세로 칸 구분선 ═══════════════════════════════════════
 * 가로선은 이미 있었다(`td{border-bottom}`). 없던 것은 **바깥 테두리와 세로선**이라,
 * 표가 배경에 녹아 어디까지가 표인지, 이 값이 어느 열의 것인지 읽히지 않았다.
 * `.ask` 도 함께 적는다 — 팝업 안의 표는 `.main` 밖에 그려진다. */
.main table.list, .main table.lbz-table, .main table.kv,
.ask  table.list, .ask  table.lbz-table, .ask  table.kv{
  border: 1px solid var(--grid-frame);
  /* 모서리를 둥글리고 테두리를 유지하려면 collapse 를 쓸 수 없다 */
  border-collapse: separate; border-spacing: 0;
}
.main table.list tr > * + *, .main table.lbz-table tr > * + *, .main table.kv tr > * + *,
.ask  table.list tr > * + *, .ask  table.lbz-table tr > * + *, .ask  table.kv tr > * + *{
  border-left: 1px solid var(--grid-line);
}
/* 자료가 없는 표도 **틀은 보인다** — 빈 표가 사라지면 "무엇이 비었는지" 조차 안 보인다 */
.main table.list thead th, .main table.lbz-table thead th{ border-bottom: 1px solid var(--grid-frame); }

/* ══ ② 달력 — 칸 선 ══════════════════════════════════════════════════════════
 * ★ 칸 테두리가 `var(--border)` 를 가리켰다 — 이 앱에 **없는 토큰**이다.
 *   값이 없는 var() 는 선언 전체를 무효로 만들고 border-style 은 초기값 none 이 된다.
 *   그래서 달력에 선이 하나도 없었다(색이 연한 것이 아니라 아예 그려지지 않았다).
 *   `shell.css` 쪽을 고쳤고, 여기서는 **칸끼리 선을 공유**하도록 격자로 맞춘다 —
 *   낱장 카드가 흩어진 모양보다 달력은 격자여야 주(週)가 읽힌다. */
.lbz-cal-grid{
  gap: 0;
  border: 1px solid var(--grid-frame); border-radius: var(--radius-sm, 6px);
  overflow: hidden; background: var(--surface);
}
.lbz-cal-dow{
  padding: 7px 0; font-weight: 600; color: var(--text-2, var(--muted));
  background: var(--surface-2); border-bottom: 1px solid var(--grid-frame);
}
.lbz-cal-grid > .lbz-cal-dow, .lbz-cal-grid > .lbz-cal-cell{
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
}
.lbz-cal-dow{ border-bottom-color: var(--grid-frame); }
.lbz-cal-cell{ border-top: 0; border-left: 0; border-radius: 0; padding: 6px; }
/* 7칸 격자라 **자식 순서 7의 배수**가 곧 오른쪽 끝이다(요일머리 7개 + 날짜칸) */
.lbz-cal-grid.view-month > *:nth-child(7n), .lbz-cal-grid.view-week > *:nth-child(7n),
.lbz-cal-grid.view-day > *{ border-right: 0; }
/* 마지막 줄은 바깥 테두리와 겹친다 — 두 줄로 보이지 않게 */
.lbz-cal-grid > *:nth-last-child(-n+7){ border-bottom: 0; }
/* 이번 달이 아닌 날 — 투명도로 흐리면 **선까지 흐려져** 격자가 끊긴다. 바탕으로 구분한다. */
.lbz-cal-cell.out{ opacity: 1; background: var(--surface-2); }
.lbz-cal-cell.out .lbz-cal-daynum{ opacity: .5; }
/* 오늘 — 테두리를 굵히면 칸이 밀린다. 안쪽 그림자로 표시한다. */
.lbz-cal-cell.today{ border-width: 1px; box-shadow: inset 0 0 0 2px var(--color09, #7554e0); }
.lbz-cal-legend{ padding: 2px 0 6px; }

/* ══ ③ 구역 — 업무 단위로 간격과 선을 둔다 ══════════════════════════════════
 * 한 화면에 목표·요구·현황·과제가 줄줄이 이어져, 제목 글씨만으로는 어디서 다음 일이
 * 시작되는지 보이지 않았다. 제목 위에 선 하나와 여백을 둔다 — 카드를 더 만들지 않는 이유는,
 * 카드 안에 카드가 겹치면 테두리가 두 겹이 되어 오히려 경계가 흐려지기 때문이다. */
/* ★ `.card` 안에만 적으면 아무 데도 걸리지 않는다 — 제품 R&D 같은 주요 화면의 구역은
 *   카드가 아니라 **맨 div** 안의 h3 로 이어 붙는다(`#prd-ws`). 실제로 그렇게 한 번 헛돌았고,
 *   브라우저 검사가 "구역 0개" 로 잡았다. 그래서 `.main` 전체의 h3 를 구역 제목으로 본다.
 *   팝업(`.ask`·`.help-pop`)과 화면 제목(`.ctx .lb-page-tit > h3`)은 `.main` 밖이라 그대로다. */
.main h3{ margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--sec-line); }
/* 첫 구역에 선을 그으면 제목보다 줄이 먼저 보인다 */
.main h3:first-child, .main .card h2 + h3, .main .tab-panel > h3:first-child{
  margin-top: 0; padding-top: 0; border-top: 0;
}
.main .card{ margin-bottom: 16px; }

/* ══ ④ 요약 표의 열 폭 — 한 칸이 폭을 다 먹지 않게 ══════════════════════════
 * 영양 요약 표(성분·총량·단위·비고)에서 비고 한 칸에 원료 id 가 줄줄이 들어가
 * 앞의 세 열이 찌그러졌다. 앞 세 열의 폭을 고정하고 비고만 남은 폭을 쓴다. */
#nut-summary-table{ table-layout: fixed; width: 100%; }
#nut-summary-table th:nth-child(1), #nut-summary-table td:nth-child(1){ width: 22%; }
#nut-summary-table th:nth-child(2), #nut-summary-table td:nth-child(2){ width: 14%; }
#nut-summary-table th:nth-child(3), #nut-summary-table td:nth-child(3){ width: 8%; }
#nut-summary-table td:nth-child(4){ white-space: normal; word-break: break-all; }
/* ISS-98 — 일 단위는 칸이 하나뿐이다. 월·주용 최소 높이(92px)를 두면 일정이 적은 날 아래 여백만 커진다 → 내용 높이에 맞춤 */
.lbz-cal-grid.view-day > .lbz-cal-cell{ min-height: auto; }