/* =====================================================================
 * v1.11.0 L — 오와 열 맞추기 · 칸 사이 구분선 (sup-app-ui, KH 11-02 "위에는 3칸 밑에는 2칸… 미세한 줄을 넣던지 해서 분리")
 *   index.html CSS 맨 끝에 읽는다 (다른 파일·pcview.js 가 붙이는 <style> 보다 세게 #app 을 앞에 붙임).
 *
 * ① 오와 열: 한 화면의 위·아래 칸 줄이 같은 간격(--gx)·같은 좌우 가장자리를 쓰고, 칸 폭을 '같은 폭 칸'의 배수로 맞춘다.
 *    같은 폭 n칸 + 같은 간격 g 이면 i/n 경계는 언제나 (i/n)(W+g) 에 생긴다 → 3칸·4칸·2칸이 섞여도 공통 경계는 위아래로 한 줄.
 *    (예전처럼 1.1fr·1.35fr 같은 비율 칸이나 간격이 10·16·20·24 로 제각각이면 경계가 몇 px 씩 어긋났다)
 *    - 홈 PC: 위 4칸(같은 폭) · 아래 3칸 = [이슈 2칸 | 할 일 1칸 | 일정 1칸]   (예전 3칸+1.3 / 1.35·1·.85)
 *    - 홈 태블릿 세로: 위 3칸 · 아래 2칸 = [이슈 2칸 | 할 일·일정 1칸]          (예전 1.1·1)
 *    - 내 업무 PC(pcview): 위 4칸 · 아래 [표 2칸 | 상세 1칸 | 메모 1칸], 좁으면 [표 | 오른쪽] 반반, 상세 접으면 [표 3칸 | 메모 1칸]
 *    - .cols2(팀 보기·내 업무 태블릿) 는 반반, 숫자 칸·카드 2열·거르기 칸·달력 옆 칸은 같은 간격
 * ② 구분선: 좌우로 나뉜 칸 사이(목록|상세, 칸과 칸 사이) 간격 한가운데에 1px 선. 색은 테마 토큰 --line (테마 4종 × 라이트·다크 그대로 따라감, 새 토큰 없음).
 *    선은 그 묶음의 배경 그림(linear-gradient)으로 그려서 칸 HTML·JS 는 그대로. PC 목록|상세(.split)는 끌어 조절 손잡이(js/split.js)의 평소 모습을 1px 선으로.
 * ③ 폰(360)은 간격만 같은 규칙(--gx 10px), 칸 배치·선은 그대로(한 줄 카드).
 * ===================================================================== */

#app{--gx:10px}
#app.tabp{--gx:14px}
#app.tabl,#app.pc{--gx:16px}

/* ---------- ① 같은 간격 ---------- */
#app .nums,#app .cols2,#app .cols3,#app .grid2,#app .filt,#app .calgrid{gap:var(--gx)}
#app .tl-nums,#app .tl-g2,#app .tl-g3,#app .tl-g4,#app .tl-two{gap:var(--gx)}
#app .facts,#app .judge,#app .g2{gap:8px}
#app .nums + .v1find{display:block;margin-top:var(--gx)}

/* 칸 폭: 같은 폭 칸의 배수 */
#app .nums.pcnums{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
#app .cols3{grid-template-columns:repeat(4,minmax(0,1fr))}
#app .cols3>:first-child{grid-column:span 2}
#app.tabp .teamline + .cols2{grid-template-columns:repeat(3,minmax(0,1fr))}
#app.tabp .teamline + .cols2>:first-child{grid-column:span 2}

/* 내 업무 PC (js/pcview.js 의 .pcv3 — 칸 수·보이기 규칙은 그대로, 폭만 같은 칸 배수로) */
#app .pcv3{gap:var(--gx);grid-template-columns:repeat(2,minmax(0,1fr))}
@container pcv3 (min-width:1400px){
  #app .pcv3{grid-template-columns:repeat(4,minmax(0,1fr))}
  #app .pcv3>.pcvt{grid-column:1/span 2;grid-row:1}
  #app .pcv3>.pcvd{grid-column:3}
  #app .pcv3>.pcvm{grid-column:4}
  #app .pcv3.fold{grid-template-columns:repeat(4,minmax(0,1fr))}
  #app .pcv3.fold>.pcvt{grid-column:1/span 3}
  #app .pcv3.fold>.pcvm{grid-column:4}
}

/* 설정(화면·효과): 위 4칸 타일과 아래 2칸 묶음 같은 간격 */
@container (min-width:760px){.nws-tiles{gap:16px}.nws-rest{column-gap:16px}}

/* ---------- ② 칸 사이 1px 구분선 ----------
 * 같은 폭 n칸, 간격 g 에서 i/n 경계의 간격 한가운데 = f·W + (f − ½)·g  (f = i/n) → background-position calc(f·100% + (f − ½)·g) */
/* .cols2·.cols3 는 바로 위 숫자 칸에 붙어 있어 선을 간격(--gx)만큼 내려서 시작 */
#app .cols2{background:linear-gradient(var(--line),var(--line)) 50% var(--gx)/1px calc(100% - var(--gx)) no-repeat}
#app.tabp .teamline + .cols2{background:linear-gradient(var(--line),var(--line)) calc(66.667% + var(--gx) / 6) var(--gx)/1px calc(100% - var(--gx)) no-repeat}
#app .cols3{background:linear-gradient(var(--line),var(--line)) 50% var(--gx)/1px calc(100% - var(--gx)) no-repeat,linear-gradient(var(--line),var(--line)) calc(75% + var(--gx) / 4) var(--gx)/1px calc(100% - var(--gx)) no-repeat}
#app .pcv3{background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat}
#app .pcv3.fold{background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat}
@container pcv3 (min-width:1400px){
  #app .pcv3{background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) calc(75% + var(--gx) / 4) 0/1px 100% no-repeat}
  #app .pcv3.fold{background:linear-gradient(var(--line),var(--line)) calc(75% + var(--gx) / 4) 0/1px 100% no-repeat}
}
/* 일정: 달력 | 오른쪽 칸 (오른쪽 고정 폭 320 · 태블릿 가로 290) */
#app.pc .calgrid{background:linear-gradient(var(--line),var(--line)) right calc(320px + var(--gx) / 2) top 0/1px 100% no-repeat}
#app.tabl .calgrid{background:linear-gradient(var(--line),var(--line)) right calc(290px + var(--gx) / 2) top 0/1px 100% no-repeat}
/* 공구 2칸 (반반 · 1.25:1 · 오른쪽 400) — 위아래로 쌓일 때(태블릿·1600 아래 tl-in)는 선 없음 */
#app .tl-two:not(.r400):not(.r12):not(.tl-in){background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat}
#app.pc .tl-two.r12{background:linear-gradient(var(--line),var(--line)) calc(55.556% - var(--gx) / 18) 0/1px 100% no-repeat}
#app.pc .tl-two.r400{background:linear-gradient(var(--line),var(--line)) right calc(400px + var(--gx) / 2) top 0/1px 100% no-repeat}
@media (min-width:1600px){#app .tl-two.tl-in{background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat}}

/* 목록 | 상세 (.split): PC 는 끌어 조절 손잡이(js/split.js)가 경계 한가운데 있음 → 평소 1px 선, 올리거나 끌 때 2px 주색 */
.split-grip::after{left:7px;width:1px;background:var(--line)}
.split-grip:hover::after,.split-grip:focus-visible::after,.split-grip.drag::after{left:6px;width:2px;background:var(--pri)}
/* 표 화면(이슈 대장·업무지시 — js/pcview.js 가 손잡이를 숨기고 오른쪽 상세를 clamp(380px,34%,540px) 로 둠) → 같은 자리에 선, [상세 접기] 면 없음 */
#app.pc .split:has(> #lpane .pct){background:linear-gradient(var(--line),var(--line)) right calc(clamp(380px,34%,540px) + 12px) top 0/1px 100% no-repeat;background-origin:content-box}
#app.pc .split:has(> #lpane .pct.fold){background:none}
/* 태블릿 가로(.tabl)는 손잡이가 없음 → 왼쪽 칸(400px, css/app.css .split) 바로 뒤 간격 한가운데에 선 */
#app.tabl .split{background:linear-gradient(var(--line),var(--line)) calc(24px + 400px + 10px) 16px/1px calc(100% - 16px) no-repeat}