/* 줄 목록 화면(메일 모양) - 2026-10-23 사용자 "연락처 메뉴 구성이 마음에 든다, 메일 화면처럼 UI를 고쳐줘 - 대시보드·스케줄도".
   메일 사이트(phpmailapi)에서 다듬은 모양을 공통으로 올렸다. 규칙: claude_common/ui/line-list.md. 동작: line-list.js
   세 조각:
     1) 종이 틀   .app-shell.is-paper - 메뉴·머리줄은 옅은 바탕 하나, 본문은 위 모서리만 둥근 흰 종이(테두리·그림자 없음)
     2) 큰 단추   .app-side-action    - 왼쪽 메뉴 맨 위 [메일 쓰기]·[연락처 추가] 같은 그 서비스의 첫 할 일
     3) 줄 목록   .line-card > .line-toolbar + .line-table - 도구 줄(머리줄 아래 붙음) + 평평한 줄, 체크 칸으로 고르면 도구 줄이 고른 것 메뉴로 바뀐다 */

/* ── 1) 종이 틀 ── */
.app-shell.is-paper { background: var(--uk-surface); }
.app-shell.is-paper .app-sidebar { border-right: 0; }
.app-shell.is-paper .app-topbar { background: var(--uk-surface); box-shadow: none; }
.app-shell.is-paper .app-content { margin-right: 8px; padding: 0; background: var(--uk-paper); border-radius: var(--uk-r-lg) var(--uk-r-lg) 0 0; }
.app-shell.is-paper.is-side-collapsed .app-content { margin-left: 8px; }
.app-shell.is-paper .app-nav-item.is-active { background: var(--uk-brand-light); color: var(--uk-fg); font-weight: 700; box-shadow: none; }
.app-shell.is-paper .app-nav-item.is-active > .count { background: none; color: var(--uk-fg); }
.app-shell.is-paper .app-nav-item > .count { flex: none; margin-left: auto; }
.app-shell.is-paper .app-nav-item > span:not(.count) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count.is-muted { background: none; color: var(--uk-muted); font-weight: 500; }   /* 메뉴의 개수 그대로 보이기(안 읽음 같은 알림이 아닌 것) */
.app-shell.is-paper .app-nav-item > svg { flex: none; color: var(--uk-muted); }
.app-shell.is-paper .app-nav-item.is-active > svg { color: currentColor; }
/* 종이 안에서 화면 머리·카드를 쓸 때(설정류 화면) - 종이 가장자리와 띄운다 */
.app-shell.is-paper .app-content > .line-pad { padding: 16px 20px; }

/* ── 2) 큰 단추 ── */
.app-side-action { display: flex; align-items: center; gap: 4px; width: calc(100% - 28px); height: 40px; margin: 4px 14px 12px; padding: 0 16px;
  border: 1px solid var(--uk-border); border-radius: var(--uk-r-md); background: var(--uk-paper); box-shadow: none;
  color: var(--uk-fg); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.app-side-action:hover { background: var(--uk-head); }
.app-side-action > svg { flex: none; width: 18px; height: 18px; } /* 그림 한 값 18(PHP Icon::svg(…, 18)과 같다) - 앱이 size 숫자를 넘기지 않는다(2026-10-23 채팅 [새 대화]가 20이었다) */
.app-side-action { flex: none; } /* 왼쪽 칸이 길어 넘쳐도 눌리지 않게(2026-10-23 스케줄 캘린더가 많으면 40 → 24px로 납작해졌다) */

/* ── 3) 줄 목록 ── */
.line-card { position: relative; }
.line-toolbar { position: sticky; top: var(--app-topbar-h); z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-height: 52px; margin: 0; padding: 8px 12px;
  background: var(--uk-paper); border-bottom: 1px solid var(--uk-line); border-radius: var(--uk-r-lg) var(--uk-r-lg) 0 0; }
.line-toolbar-end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.line-count { padding: 0 6px; font-size: 13px; color: var(--uk-muted); white-space: nowrap; }
/* 글자 단추(정렬·그룹 이름 바꾸기 …) - 테두리·그림자 없이, 마우스를 올리면 바탕 */
.line-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--uk-r-sm); background: none;
  color: var(--uk-muted); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.line-btn:hover { background: var(--uk-head); color: var(--uk-fg); }
.line-btn.is-on { background: var(--uk-brand-light); color: var(--uk-brand-dark); }
.line-btn.is-danger { color: var(--uk-danger); }
/* 보내는 중 - 누른 단추에 붙였다 뗀다(button.css .button.is-loading과 같은 도는 표시, 글자는 그대로 - 2026-10-23 공유링크 [보관하기]) */
.line-btn.is-loading, .line-btn.is-loading[disabled] { background: var(--uk-head); color: var(--uk-fg); pointer-events: none; cursor: progress; opacity: 1; }
.line-btn.is-loading::before { content: ""; flex: none; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .8s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .line-btn.is-loading::before { animation-duration: 2.4s; } }
.line-btn[hidden], .line-icon-btn[hidden] { display: none; } /* 위 inline-flex가 hidden을 이기지 않게(휴지통을 비운 뒤 [휴지통 비우기] 숨김, 2026-10-23) */
/* 단추 안 그림은 한 크기 18(같은 자리 같은 크기, 2026-10-23 - 화면마다 Icon::svg 숫자가 16·17·18로 달랐다). .button svg도 18(button.css) */
.line-btn > svg, .line-icon-btn > svg { flex: none; width: 18px; height: 18px; }
/* 그림 단추 + 마우스를 올리면 이름 말풍선(data-tip) */
.line-icon-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--uk-muted); cursor: pointer; text-decoration: none; }
.line-icon-btn:hover:not(:disabled) { background: var(--uk-head); color: var(--uk-fg); }
.line-icon-btn.is-danger { color: var(--uk-danger); }
.line-icon-btn:disabled { opacity: .45; cursor: default; }
/* 보내는 중 - 그림 단추도 .line-btn.is-loading과 같은 도는 표시를 그림 자리에(글자 없는 단추라 그림을 감추고 돈다, 2026-10-23 휴지통 [복구]·[영구 삭제]·링크 끊기) */
.line-icon-btn.is-loading, .line-icon-btn.is-loading[disabled] { background: var(--uk-head); pointer-events: none; cursor: progress; opacity: 1; visibility: visible; }
.line-icon-btn.is-loading > svg { visibility: hidden; }
.line-icon-btn.is-loading::before { content: ""; position: absolute; inset: 0; width: 13px; height: 13px; margin: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .line-icon-btn.is-loading::before { animation-duration: 2.4s; } }
/* 말풍선은 올렸을 때만 만든다 - 늘 투명하게 그려 두면 화면 끝 단추의 말풍선이 페이지 폭을 늘려 가로 스크롤·오른쪽 빈 띠가 생겼다
   (2026-10-23 스케줄 좁은 창 "왼쪽은 여백이 없고 오른쪽은 여백이 있고"). 0.35초 뒤 나타나기는 animation으로.
   화면 끝 단추는 line-list.js가 올린 순간 말풍선 폭을 재어 --tip-x만큼 안쪽으로 비킨다(사용자 "스크롤이 생기지 않는 위치에 말풍선") */
.line-icon-btn[data-tip]:hover::after, .line-icon-btn[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; z-index: 30;
  transform: translateX(calc(-50% + var(--tip-x, 0px))); padding: 4px 8px; border-radius: var(--uk-r-xs); background: var(--uk-tip-bg); color: var(--uk-tip-fg);
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; animation: line-tip-in .12s .35s both; }
@keyframes line-tip-in { from { opacity: 0; } to { opacity: 1; } }
@media (hover: none) { .line-icon-btn[data-tip]::after { display: none; } }
.line-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--uk-line); }
/* 체크 칸 - 도구 줄의 전체 고르기·줄마다 */
.line-check { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; cursor: pointer; }
.line-check input { cursor: pointer; } /* 모양·크기(16 그린 체크)는 form.css 한 벌 - form.css를 같이 싣는다 */
/* 고르는 동안: 평소 도구(.line-tools)는 숨고 고른 것 메뉴(.line-picked)가 나온다 */
.line-picked { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 2px; }
.line-picked[hidden] { display: none; }
.line-picked-count { margin-right: 8px; font-size: 13px; font-weight: 600; color: var(--uk-pick-dark); white-space: nowrap; }
.line-card.is-selecting .line-tools { display: none; }
.line-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
/* 종이 안 알림(오류·경고 notice.css) - 안내 한 줄(.line-note)과 같은 자리(2026-10-23, 화면마다 style="margin: 8px 12px"를 달던 것) */
.line-card > .notice, .app-shell.is-paper .app-content > .notice { margin: 8px 12px; }
/* 안내 한 줄(검색 결과·휴지통 설명) */
.line-note { display: flex; align-items: center; gap: 8px; margin: 8px 12px; padding: 8px 14px; font-size: 13px; color: var(--uk-muted); background: var(--uk-sunk); border-radius: var(--uk-r-md); }
.line-note-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--uk-brand); text-decoration: none; white-space: nowrap; }

/* 표 - 공통 표(table.table) 위에 평평한 줄 모양만 얹는다 */
.line-table-box { container-type: inline-size; overflow-x: auto; }
.line-table { width: 100%; table-layout: fixed; }
.line-table th, .line-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-table thead th { color: var(--uk-muted); font-weight: 500; font-size: 13px; }
.line-table td { padding-top: 10px; padding-bottom: 10px; }
.line-table .col-check { width: 52px; padding-left: 8px; padding-right: 4px; text-align: center; overflow: visible; }
.line-table tbody tr { cursor: pointer; }
/* 올린 줄 바탕도 줄(tr) 한 덩어리 - 좁은 카드 줄(PC 좁은 창)에서도 같다. 고른 줄(table.css :has)은 올려도 고른 바탕 그대로 */
.line-table tbody tr:hover { background: var(--uk-head); }
.line-table tbody tr:hover > td { background: none; }
/* 고른 줄 바탕은 공통 표(table.css) 한 벌 - 줄(tr) 한 덩어리에 깔려 좁은 카드 줄에서도 테두리 안을 빈틈없이 채운다(2026-10-24) */
.line-table tbody tr.is-unread .line-strong, .line-table tbody tr.is-unread .line-time { font-weight: 700; color: var(--uk-fg); }
.line-strong { color: var(--uk-fg); }
.line-muted { color: var(--uk-muted); }
.line-time { width: 120px; font-size: 13px; color: var(--uk-muted); font-variant-numeric: tabular-nums; text-align: right; }
.line-table .line-time { width: 120px; }
/* 날짜+시각("2026-09-18 19:12")을 다 보여야 하는 칸 - 화면마다 폭을 따로 덮지 않고 이 변형 하나(2026-10-23 공유링크 160·휴지통 140이 달랐다) */
.line-table .line-time.is-long { width: 160px; }
/* 줄 끝 단추(수정·되살리기 …) - PC는 마우스를 올린 줄에만 보인다.
   칸 폭은 단추 수(--line-actions-n, 기본 2)로 정한다: 단추 32 + 단추 사이 공백 4 = 36씩 + 칸 좌우 여백 24 (2026-10-23 연락처 3개가 96에 안 들어가 오른쪽 끝이 잘렸다).
   화면 CSS는 폭을 덮지 말고 변수만 바꾼다: .line-table .line-actions { --line-actions-n: 3; } */
.line-table .line-actions { width: calc(var(--line-actions-n, 2) * 36px + 24px); text-align: right; overflow: visible; }
.line-actions .line-icon-btn { width: 32px; height: 32px; }
@media (hover: hover) {
  .line-table tbody tr:not(:hover):not(.is-checked) .line-actions .line-icon-btn:not(.is-loading) { visibility: hidden; }
}
.line-tag { display: inline-block; max-width: 100%; margin-right: 4px; padding: 1px 8px; border-radius: var(--uk-r-pill); background: var(--uk-sunk); color: var(--uk-fg);
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.line-more { display: flex; justify-content: center; padding: 12px 0 16px; }

/* 좁은 칸(표를 담은 .line-table-box 폭 기준 - PC 좁은 창도, 2026-10-23 사용자 "좁은 화면 때문에 오른쪽이 잘리면 안 된다"):
   720px 이하면 덜 중요한 칸(.line-hide-m - th·td 둘 다에)을 빼고, 600px 이하면 휴대폰과 같은 카드 줄. 고정 폭 칸이 남는 폭을 다 먹어 제목이 0이 되거나
   관리 칸이 가로 스크롤로 밀리지 않는다 */
@container (max-width: 720px) {
  .line-table .line-hide-m { display: none; }
}
@container (max-width: 600px) {
  .line-table, .line-table tbody { display: block; width: 100% !important; }
  .line-table thead { display: none; }
  .line-table tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "check top time" "check main main" "check sub act";
    gap: 2px 8px; padding: 8px 10px 8px 2px; border-bottom: 1px solid var(--uk-line); }
  .line-table tbody tr > td { display: block; padding: 0; border: 0; width: auto !important; background: none !important; }
  .line-table .col-check { grid-area: check; padding-top: 2px; }
  .line-table .line-top { grid-area: top; }
  .line-table .line-time, .line-table .line-time.is-long { grid-area: time; width: auto; }
  .line-table .line-main { grid-area: main; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .line-table .line-sub { grid-area: sub; }
  .line-table .line-actions { grid-area: act; width: auto; }
  .line-table .line-sub.line-hide-m { display: block; } /* 표에서 뺀 칸이라도 아래 줄(.line-sub)이면 카드에는 자리가 있어 다시 보인다(연락처 그룹, 2026-10-23) */
}

/* 휴대폰 - 표를 카드 줄로(머리글 없음). 칸 이름: 체크 | 위 줄(.line-top) 오른쪽 시각(.line-time) | 내용(.line-main) | 아래 줄(.line-sub) */
@media (max-width: 767px) {
  /* 좁은 화면은 종이가 창 양끝에 붙으니 모서리를 둥글리지 않는다(2026-10-23 사용자 "화면이 작아지면 라운드 제거" - 메일 사이트와 같게) */
  .app-shell.is-paper .app-content, .app-shell.is-paper.is-side-collapsed .app-content { margin: 0; border-radius: 0; }
  .line-toolbar { padding: 6px 8px; border-radius: 0; }
  .line-table, .line-table tbody { display: block; width: 100% !important; }
  .line-table thead { display: none; }
  .line-table tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "check top time" "check main main" "check sub act";
    gap: 2px 8px; padding: 8px 10px 8px 2px; border-bottom: 1px solid var(--uk-line); }
  .line-table tbody tr > td { display: block; padding: 0; border: 0; width: auto !important; background: none !important; }
  .line-table .col-check { grid-area: check; padding-top: 2px; }
  .line-table .line-top { grid-area: top; }
  .line-table .line-time, .line-table .line-time.is-long { grid-area: time; width: auto; }
  .line-table .line-main { grid-area: main; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .line-table .line-sub { grid-area: sub; }
  .line-table .line-actions { grid-area: act; width: auto; }
  .line-table .line-hide-m { display: none; }
  .line-table .line-sub.line-hide-m { display: block; }
}

/* ── 4) 대시보드형 줄 - 왼쪽 그림 칸 + 고르기 동그라미 + 세 줄(2026-10-24 사용자 "같은 항목은 어디서나 같은 줄, 대시보드 기준") ──
   규칙 ui/line-list.md "줄 모양"·"고르기". 값은 대시보드 줄(phpdashapi custom.css .dash-row-*)에서 그대로 옮겼다 - 새 숫자를 두지 않는다.
   좁은 줄: [그림 45 + 왼쪽 위 동그라미] 1줄 이름 … [☆][⚑] 날짜 / 2줄 내용(흐림) / 3줄 더(흐림)  ← 대시보드 공유링크·연락처·메일 줄
   넓은 표: [그림 32] 이름 ┃ 내용 ┃ 정보 ┃ [☆][⚑] 날짜  ← 대시보드 넓은 목록(.is-cols-mix) */
.line-lead { --line-lead: 45px; --line-lead-icon: 32px;
  position: relative; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--line-lead); height: var(--line-lead);
  border: 1px solid var(--uk-border); border-radius: 40%; background: var(--uk-head); color: var(--uk-fg); vertical-align: top; }
/* 종류 그림 - <svg>, 단색 그림 자리(.line-lead-icon + --icon: url(…) - 사이트 그림 파일을 mask로, 아이콘 테마 nt-line-<이름>도 같은 자리), 형식 그림 img.is-icon */
.line-lead > svg, .line-lead > img.is-icon, .line-lead > .line-lead-icon { width: var(--line-lead-icon); height: var(--line-lead-icon); }
.line-lead-icon { display: inline-block; flex: none; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* 사진(프로필·썸네일) - 칸을 꽉 채운다. 동그라미가 칸 밖으로 조금 나가므로 칸은 자르지 않고 그림만 둥글린다 */
.line-lead.is-photo { border: 0; }
.line-lead.is-photo > img:not(.is-icon) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* 고르기 동그라미 - 그림 왼쪽 위. 대시보드형은 선택 모드(.is-picking)일 때만 보이고, 고른 줄(.is-picked)은 파랑 + 흰 체크.
   메일형은 체크 칸 대신 이 동그라미를 늘 보인다: <label class="line-pick is-box"><input type="checkbox" data-line-check aria-label="고르기"></label> */
.line-pick { position: absolute; top: -2px; left: -2px; z-index: 5; display: none; box-sizing: border-box; width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--uk-surface); border-radius: 50%; background: color-mix(in srgb, var(--uk-muted) 35%, var(--uk-surface)); pointer-events: none; }
.line-pick::after { content: ""; position: absolute; inset: 0; background-color: var(--uk-on-strong); opacity: 0; transition: opacity .1s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.is-picking .line-pick, .line-pick.is-box, .line-pick.is-static { display: block; }
.is-picked .line-pick, .line-pick.is-box:has(input:checked), .is-checked .line-pick.is-box { background: var(--uk-pick); }
.is-picked .line-pick::after, .line-pick.is-box:has(input:checked)::after, .is-checked .line-pick.is-box::after, .line-pick.is-static::after { opacity: 1; }
.line-pick.is-box { pointer-events: auto; cursor: pointer; }
.line-pick.is-box > input { position: absolute; inset: -6px; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; } /* 누르는 자리는 동그라미보다 조금 넓게 */
/* [선택] 단추 - 목록 머리(정렬·건수 줄) 오른쪽 끝. 앞 동그라미는 줄의 고르기 동그라미와 같은 부품(늘 체크, 켜지면 파랑) */
.line-pick-start { gap: 4px; }
.line-pick.is-static { position: relative; top: auto; left: auto; flex: none; border-color: transparent; }
.line-pick-start.is-active .line-pick.is-static { background: var(--uk-pick); }

/* 1줄 오른쪽 별·중요 - 날짜 바로 왼쪽. 누르면 줄을 열지 않고 그 자리에서 켜고 끈다(꺼진 것은 흐린 회색으로 자리를 지킨다) */
.line-flags { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; }
.line-flag { display: inline-flex; align-items: center; padding: 0; margin: 0; border: 0; border-radius: var(--uk-r-pill); background: none; line-height: 0; cursor: pointer; }
.line-flag > img, .line-flag > svg { width: 20px; height: 20px; }
.line-flag:hover { opacity: .75; }
.line-flag:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 1px; }
.line-flag.is-off > img, .line-flag.is-off > svg { filter: grayscale(1); opacity: .4; }

/* 고른 줄 바탕 - 줄 한 덩어리(표는 tr, 대시보드는 줄 상자). 칸마다 따로 깔지 않는다 */
.line-table tbody tr.is-picked, .line-table tbody tr.is-checked { background: var(--uk-pick-light); } /* 올린 줄 바탕(위 :hover)보다 뒤 - 고른 줄은 올려도 고른 바탕(메일형 .is-checked 포함, 2026-10-24) */
.line-table tbody tr.is-picked > td, .line-table tbody tr.is-checked > td { background: none; }
/* 선택 모드에서는 Shift+누르기가 글자를 긁지 않게 */
.is-picking [data-line-row], .is-picking [data-line-row] * { -webkit-user-select: none; user-select: none; }

/* 표에 그림 칸을 둔 대시보드형 표(.line-table.has-lead) - 넓으면 열, 좁으면(600px 이하 칸·767px 이하 화면) 대시보드 줄 */
.line-table.has-lead .line-lead { --line-lead: 32px; --line-lead-icon: 20px; } /* 넓은 표 = 대시보드 넓은 목록 값 */
.line-table.has-lead td { padding-top: 6px; padding-bottom: 6px; }
.line-table .line-lead-cell { width: calc(32px + 24px); overflow: visible; }
/* 별·중요 칸 폭 = 그림 수(--line-flags-n, 기본 2 - 별·중요) × (그림 20 + 사이 4) - 마지막 사이 4 + 칸 왼쪽 여백(표 .6rem). 끌지 않고 줄지 않는 칸(table.js COL_TOOL) */
.line-table .line-flags-cell { width: calc(var(--line-flags-n, 2) * 24px - 4px + .6rem); overflow: visible; text-align: right; padding-right: 0; }
.line-table .line-c-name { color: var(--uk-fg); font-weight: 600; }
.line-table .line-c-text, .line-table .line-c-more { color: var(--uk-muted); }
.line-table .line-c-text.line-strong { color: var(--uk-fg); font-weight: 600; } /* 메일 보낸사람 - 2줄이 이름 몫(대시보드 메일 줄 .dash-row-counter: 제목 줄과 같은 크기·굵기) */
.line-table tbody tr.is-unread .line-c-name { font-weight: 800; }
@container (max-width: 600px) {
  .line-table.has-lead tbody tr { grid-template-columns: var(--line-lead-w, 45px) minmax(0, 1fr) auto auto; grid-template-areas: "lead name flags time" "lead text text text" "lead more more more";
    gap: 0 .6rem; padding: 8.8px 16px; }
  .line-table.has-lead tbody tr > td, .line-table.has-lead thead + tbody tr:first-child > td { align-self: baseline; padding: 0; }
  .line-table.has-lead .line-lead { --line-lead: 45px; --line-lead-icon: 32px; }
  .line-table.has-lead .line-lead-cell { grid-area: lead; grid-row: 1 / span 2; align-self: start; margin-right: calc(12px - .6rem); }
  .line-table.has-lead .line-c-name { grid-area: name; font-size: 1.0625rem; line-height: 1.4; }
  .line-table.has-lead .line-flags-cell { grid-area: flags; align-self: center; }
  .line-table.has-lead .line-time, .line-table.has-lead .line-time.is-long { grid-area: time; font-size: .8125rem; line-height: 1.4; }
  .line-table.has-lead .line-c-text { grid-area: text; font-size: .9375rem; line-height: 1.4; }
  .line-table.has-lead .line-c-text.line-strong { font-size: 1.0625rem; }
  .line-table.has-lead .line-c-more { grid-area: more; font-size: .9375rem; line-height: 1.4; }
  .line-table.has-lead .line-hide-m:not(.line-c-text):not(.line-c-more) { display: none; }
  .line-table.has-lead .line-c-text, .line-table.has-lead .line-c-more { display: block; } /* 표에서 뺀 칸(.line-hide-m)이라도 2·3줄이면 줄에는 보인다 */
}
@media (max-width: 767px) {
  .line-table.has-lead tbody tr { grid-template-columns: var(--line-lead-w, 45px) minmax(0, 1fr) auto auto; grid-template-areas: "lead name flags time" "lead text text text" "lead more more more";
    gap: 0 .6rem; padding: 8.8px 16px; }
  .line-table.has-lead tbody tr > td, .line-table.has-lead thead + tbody tr:first-child > td { align-self: baseline; padding: 0; }
  .line-table.has-lead .line-lead { --line-lead: 45px; --line-lead-icon: 32px; }
  .line-table.has-lead .line-lead-cell { grid-area: lead; grid-row: 1 / span 2; align-self: start; margin-right: calc(12px - .6rem); }
  .line-table.has-lead .line-c-name { grid-area: name; font-size: 1.0625rem; line-height: 1.4; }
  .line-table.has-lead .line-flags-cell { grid-area: flags; align-self: center; }
  .line-table.has-lead .line-time, .line-table.has-lead .line-time.is-long { grid-area: time; font-size: .8125rem; line-height: 1.4; }
  .line-table.has-lead .line-c-text { grid-area: text; font-size: .9375rem; line-height: 1.4; }
  .line-table.has-lead .line-c-text.line-strong { font-size: 1.0625rem; }
  .line-table.has-lead .line-c-more { grid-area: more; font-size: .9375rem; line-height: 1.4; }
  .line-table.has-lead .line-hide-m:not(.line-c-text):not(.line-c-more) { display: none; }
  .line-table.has-lead .line-c-text, .line-table.has-lead .line-c-more { display: block; } /* 표에서 뺀 칸(.line-hide-m)이라도 2·3줄이면 줄에는 보인다 */
}

/* ── 5) 고른 것 막대(대시보드형) - 화면 아래. 1줄 N개 선택·[전체선택]·동작들 … [✕ 취소], 넘치면 단추째 다음 줄(대시보드 .dash-pickbar에서 옮김) ──
   해당 없는 동작은 흐리게 꺼진다(disabled - 감추지 않는다). 단추 모양은 공통 .button(button.css) */
.line-pickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--line-pickbar-z, 400);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--uk-surface); border-top: 1px solid var(--uk-line); border-radius: var(--uk-r-xs); box-shadow: var(--uk-up-lg);
  color: var(--uk-fg); font-size: 1rem; white-space: nowrap; }
.line-pickbar[hidden] { display: none; }
.line-pickbar > .button { flex: none; }
.line-pickbar-count { flex: none; font-size: 13px; font-weight: 600; color: var(--uk-fg); white-space: nowrap; }
.line-pickbar > .line-pickbar-cancel { margin-left: auto; }

/* ── 6) 줄 메뉴 - 길게 누르기 = 우클릭(대시보드 관리 모달에서 옮김): 가운데 작은 창, 제목 = 그 줄 이름, 항목 = 막대와 같은 동작 ── */
dialog.line-menu { box-sizing: border-box; width: min(360px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0;
  border-radius: var(--uk-r-win); background: var(--uk-surface); color: var(--uk-fg); box-shadow: var(--uk-up-lg); overflow: hidden; }
dialog.line-menu[open] { display: flex; flex-direction: column; }
dialog.line-menu::backdrop { background: var(--uk-backdrop); }
.line-menu-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 56px; padding: 0 20px; }
.line-menu-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem; font-weight: 700; }
.line-menu-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--uk-muted); cursor: pointer; }
.line-menu-close:hover { background: var(--uk-head); color: var(--uk-fg); }
.line-menu-close > svg { width: 20px; height: 20px; }
.line-menu-list { display: flex; flex-direction: column; gap: .18rem; padding: .6rem; overflow-y: auto; }
.line-menu-item { width: 100%; padding: .75rem .96rem; border: 0; border-radius: var(--uk-r-md); background: none; color: var(--uk-fg); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.line-menu-item:hover:not(:disabled) { background: var(--uk-sunk); }
.line-menu-item:disabled { opacity: .45; cursor: default; }
.line-menu-item.is-danger { color: var(--uk-danger); }
.line-menu-sep { flex: none; margin: 6px 0; border: 0; border-top: 1px solid var(--uk-line); }
/* 터치 화면에서 줄을 길게 누르는 것은 "메뉴"라는 뜻 - 손가락 아래 글자가 파랗게 골라지거나 기본 길게 누르기 메뉴가 뜨지 않게(대시보드 dash-theme.css에서 옮김).
   마우스 화면은 그대로 - 글자를 끌어 복사할 수 있다 */
@media (hover: none) and (pointer: coarse) {
  [data-line-pick] [data-line-row], dialog.line-menu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* 줄 상자(표가 아닌 목록 - li·div, React판 LineRow·메일 목록 등): 대시보드 줄 그대로 - [그림] 1줄 이름 … [별·중요] 날짜 / 2줄 내용 / 3줄 더.
   목록(ul)에 선택 모드면 .is-picking, 고른 줄은 .is-picked(바탕은 줄 한 덩어리) */
.line-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8.8px 16px; border-bottom: 1px solid var(--uk-line); list-style: none; cursor: pointer; }
.line-row:hover { background: var(--uk-head); }
.line-row.is-picked, .line-row.is-checked { background: var(--uk-pick-light); }
.line-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.line-row-top { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.line-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--uk-fg); }
.line-row.is-unread .line-row-name { font-weight: 800; }
.line-row-top > .line-flags { margin-left: auto; align-self: center; }
.line-row-time { flex: none; font-size: .8125rem; line-height: 1.4; color: var(--uk-muted); white-space: nowrap; }
.line-row-text, .line-row-more { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; line-height: 1.4; color: var(--uk-muted); }