/* ══════════════════════════════════════════════════════════════════
   ACCRIVA SaaS — 계정 · 요금제 · 결제 · 운영 콘솔 화면
   ------------------------------------------------------------------
   **새 색을 만들지 않는다.** 여기 쓰이는 값은 전부 `theme-a.css` 의
   `body.ta` 토큰이다(DESIGN_SYSTEM §3). hex 를 새로 적으면 다음에
   팔레트를 갈 때 이 파일만 뒤처진다.

   **이름은 `sa-` 로 시작한다.** `.card`·`.btn`·`table.list` 는 공통
   부품이라 그대로 쓰고, 이 화면들에만 있는 것만 새로 짓는다
   → CLAUDE.md 「CSS 층은 넷이다」
   ══════════════════════════════════════════════════════════════════ */

/* ── 바깥 화면(소개·가격·가입) — 레일이 없다 ────────────────────
   **`body.ta.lg` 는 로그인 상자를 가운데 놓는 격자다**(`display:grid;
   place-items:center`). 소개·가격 화면이 그 위에 서면 폭이 상자 크기로
   눌려 요금제 카드 넷이 둘로 접힌다(2026-08-30 캡처로 확인). 그래서
   `sa` 를 함께 달아 격자를 푼다 — 종전 로그인 화면은 한 픽셀도 안 바뀐다. */
body.ta.lg.sa{display:block;place-items:initial;padding:0;background:var(--bg)}
body.ta.lg.sa .wrap{max-width:none;width:100%;margin:0;padding:0}
body.ta.lg .sa-pub{max-width:1080px;margin:0 auto;padding:0 24px 64px}
body.ta.lg .sa-narrow{max-width:420px;margin:0 auto;padding:0 24px 64px}

.sa-top{display:flex;align-items:center;justify-content:space-between;
  height:64px;margin-bottom:8px}
/* 브랜드 자물쇠는 마크와 이름이 나란히 선다 */
.sa-top>a{display:flex;align-items:center;gap:10px;min-width:0}
/* **밝은 바탕에서는 글자색을 뒤집는다.** 공통 `.ac-name b` 는 남색 레일에
   맞춰 흰색이라, 여기 그대로 두면 이름이 안 보인다(밑바탕이 off-white 다). */
body.ta.lg.sa .ac-name b{color:var(--ink)}
body.ta.lg.sa .ac-name em{color:var(--ink3)}
.sa-top nav{display:flex;align-items:center;gap:18px}
.sa-top nav a{color:var(--ink2);font-size:13px;text-decoration:none}
.sa-top nav a:hover{color:var(--ink)}

.sa-hero{padding:56px 0 40px;border-bottom:1px solid var(--line2)}
.sa-hero h1{font-size:34px;line-height:1.25;letter-spacing:-.01em;margin:0 0 14px}
.sa-hero p.lead{font-size:15px;color:var(--ink2);max-width:620px;margin:0 0 24px;line-height:1.7}
.sa-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.sa-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.sa-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.sa-sec{padding:40px 0;border-bottom:1px solid var(--line2)}
.sa-sec>h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;margin:0 0 18px}

/* ── 요금제 카드 ──────────────────────────────────────────────── */
.sa-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sa-plan{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:12px}
.sa-plan.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.sa-plan h3{margin:0;font-size:16px}
.sa-plan .tag{align-self:flex-start}
.sa-price{font-size:26px;font-weight:600;letter-spacing:-.02em}
.sa-price small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:4px}
.sa-price.na{font-size:15px;color:var(--ink2);font-weight:500}
.sa-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sa-plan li{font-size:12.5px;color:var(--ink2);display:flex;gap:7px;align-items:flex-start}
.sa-plan li::before{content:"·";color:var(--acc);font-weight:700}
.sa-plan .foot{margin-top:auto;padding-top:8px}

/* ── 설정 · 콘솔 — 왼쪽 차림표 + 오른쪽 본문 ──────────────────── */
.sa-page{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.sa-menu{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px}
.sa-menu .grp{font-size:10.5px;letter-spacing:.12em;color:var(--ink3);
  font-weight:600;margin:14px 0 4px;padding:0 8px}
.sa-menu .grp:first-child{margin-top:0}
.sa-menu a{display:block;padding:6px 8px;border-radius:var(--r-sm);font-size:13px;
  color:var(--ink2);text-decoration:none}
.sa-menu a:hover{background:var(--muted-bg);color:var(--ink)}
.sa-menu a.on{background:var(--acc-bg);color:var(--acc2);font-weight:600}
.sa-body{min-width:0;display:flex;flex-direction:column;gap:16px}

/* ── KPI 타일 ─────────────────────────────────────────────────── */
.sa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sa-kpi{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.sa-kpi .lb{font-size:11px;color:var(--ink3);display:block;margin-bottom:5px}
.sa-kpi .v{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sa-kpi .v small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:3px}
.sa-kpi .sub{font-size:11px;color:var(--ink3);margin-top:3px}
.sa-kpi.warn .v{color:var(--warn)}
.sa-kpi.bad .v{color:var(--bad)}

/* ── 사용량 막대 ──────────────────────────────────────────────── */
.sa-meter{display:flex;flex-direction:column;gap:4px}
.sa-meter .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.sa-meter .row b{font-weight:600}
.sa-meter .row span{color:var(--ink3);font-variant-numeric:tabular-nums}
.sa-bar{height:6px;border-radius:3px;background:var(--muted-bg);overflow:hidden}
.sa-bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.sa-bar.near i{background:var(--warn)}
.sa-bar.over i{background:var(--bad)}
.sa-bar.blocked i{background:var(--line3)}
.sa-bar.unlimited i{background:var(--ok)}

/* ── 잔 그래프 — 값이 있는 것만 그린다 ─────────────────────────── */
.sa-spark{display:flex;align-items:flex-end;gap:2px;height:56px}
.sa-spark i{flex:1;background:var(--acc-lite);border-top:2px solid var(--acc);
  min-height:2px;border-radius:1px 1px 0 0}
/* 값이 0 인 날도 자리를 남긴다 — 그래프가 끊기면 「그날은 없다」로 읽힌다 */
.sa-spark i.zero{background:var(--muted-bg);border-top-color:var(--line)}

/* ── 걸음 띠 (온보딩) ─────────────────────────────────────────── */
.sa-steps{display:flex;gap:0;margin-bottom:24px}
.sa-steps .st{flex:1;padding:8px 0;border-top:2px solid var(--line);
  font-size:11.5px;color:var(--ink3)}
.sa-steps .st.on{border-top-color:var(--acc);color:var(--acc2);font-weight:600}
.sa-steps .st.done{border-top-color:var(--acc-lite);color:var(--ink2)}

/* ── 양식 ─────────────────────────────────────────────────────── */
.sa-form{display:flex;flex-direction:column;gap:14px}
.sa-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink2)}
.sa-form label>input,.sa-form label>select,.sa-form label>textarea{
  height:32px;padding:0 9px;border:1px solid var(--inp);border-radius:var(--r-sm);
  background:var(--sf);color:var(--ink);font:inherit;font-size:13px}
.sa-form label>textarea{height:auto;padding:7px 9px;min-height:64px;resize:vertical}
.sa-form .hint{font-size:11.5px;color:var(--ink3)}
/* **라벨 안 곁말은 글자와 한 줄로 선다** (2026-09-06 신고 — *"회색 글씨 등
   세로 중간 정렬해, 위치가 다르잖아"*).

   `.hint` 는 계정층(`계정/static/style.css`)에서 **덩어리용**으로 잡혀 있다 —
   `margin-top:18px; display:grid`. 그런데 양식에서는 `<span class="hint">` 로
   **라벨 안 곁말**로도 쓴다(설정·관리자·가입 화면 열세 자리). 그 여백이 그대로
   남아 회색 글씨만 **9.0px 아래로** 처졌고(실측), `메일 admin` 처럼 짧은 것은
   grid 탓에 아예 다음 줄로 떨어졌다.

   `label` 안에 있는 `.hint` 는 언제나 곁말이다 — 덩어리로 쓰는 것은
   `<p class="hint">` 이고 라벨 밖에 선다. 그래서 **라벨 안에서만** 되돌린다.
   `.check` 줄은 `align-items:center` 라, 여백만 걷으면 저절로 가운데에 선다. */
.sa-form label .hint,label .hint{margin:0;display:inline}
.sa-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sa-form .check{flex-direction:row;align-items:center;gap:7px}
.sa-form .check input{height:auto}

/* ── 알림 줄 ──────────────────────────────────────────────────── */
.sa-note{padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;
  border:1px solid var(--line);background:var(--sunk);color:var(--ink2)}
.sa-note.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.sa-note.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.sa-note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

/* ── 「연결되지 않음」 — 아직 안 되는 것을 정직하게 적는 자리 ──── */
.sa-status{display:flex;flex-direction:column;gap:8px}
.sa-status .it{display:flex;gap:10px;align-items:flex-start;font-size:12.5px}
.sa-status .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;
  background:var(--line3)}
.sa-status .it.ok .dot{background:var(--ok)}
.sa-status .it.no .dot{background:var(--warn)}
.sa-status .it b{font-weight:600}
.sa-status .it .why{color:var(--ink3);display:block;margin-top:1px}

/* ── 표는 카드 폭을 다 쓴다 ───────────────────────────────────────
   `table.list` 는 기본이 내용 폭이라, 카드 안에 두면 열이 왼쪽에 뭉쳐
   「깨진 것」처럼 보인다. **이 화면들에서만** 폭을 채운다. */
.sa-body table.list,.sa-pub table.list{width:100%}

/* ── 표 안의 작은 것들 ────────────────────────────────────────── */
body.ta table.list td.money,body.ta table.list th.money{text-align:right;
  font-variant-numeric:tabular-nums}
.sa-mini{font-size:11px;color:var(--ink3)}
.sa-flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sa-between{display:flex;gap:12px;align-items:center;justify-content:space-between}
.sa-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:7px 14px;font-size:12.5px}
.sa-dl dt{color:var(--ink3)}
.sa-dl dd{margin:0;color:var(--ink)}

/* ── 좁은 화면 — 차림표를 위로 올린다 ─────────────────────────── */
@media (max-width:820px){
  .sa-page{grid-template-columns:1fr}
  .sa-menu{position:static;flex-direction:row;flex-wrap:wrap;
    border-bottom:1px solid var(--line2);padding-bottom:8px}
  .sa-menu .grp{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   법적 고지 문서 — 이용약관 · 개인정보 처리방침 · SLA · 데이터 처리 안내
   (2026-09-16)

   **읽으라고 만든 화면이지 훑으라고 만든 화면이 아니다.** 그래서 업무 화면
   보다 글자를 키우고(13.5px) 줄 사이를 넓혔다(1.85). 폭도 1080 이 아니라
   **860 으로 좁힌다** — 한 줄이 길면 다음 줄 첫머리를 눈이 놓친다.

   조문 번호는 `<h2>` 에 사람이 직접 적는다. CSS counter 로 매기지 않는 까닭은,
   다른 문서가 「이용약관 제12조」처럼 인용하는 자리라서 조문 하나만 끼워 넣어도
   인용이 통째로 어긋나기 때문이다.
   ══════════════════════════════════════════════════════════════════ */
body.ta.lg .lg-pub{max-width:860px}

/* ── 머리 ─────────────────────────────────────────────────────────── */
.lg-head{padding:48px 0 26px}
.lg-kind{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.lg-head h1{margin:0 0 12px;font-size:30px;line-height:1.3;letter-spacing:-.015em}
.lg-eff{margin:0;font-size:12.5px;color:var(--ink3)}
.lg-eff b{color:var(--ink2);font-variant-numeric:tabular-nums}
.lg-eff-sub{color:var(--ink3)}
.lg-lead{margin:16px 0 0;font-size:14px;line-height:1.8;color:var(--ink2)}
.lg-lead a{color:var(--acc)}

/* ── 안 채운 자리 알림 — **숨기지 않고 드러낸다** ────────────────── */
.lg-missing{margin:0 0 4px;padding:12px 14px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid var(--warn-line);
  font-size:12.5px;line-height:1.75;color:var(--warn)}
.lg-missing span{font-weight:600}
.lg-missing em{font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.06)}

/* ── 이웃 문서 ────────────────────────────────────────────────────── */
.lg-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:22px 0 0;
  border-bottom:1px solid var(--line2)}
.lg-tabs a{padding:9px 13px;font-size:12.5px;color:var(--ink3);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.lg-tabs a:hover{color:var(--ink2)}
.lg-tabs a.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}

/* ── 본문 ─────────────────────────────────────────────────────────── */
.lg-body{font-size:13.5px;line-height:1.85;color:var(--ink)}
.lg-art{padding:30px 0;border-bottom:1px solid var(--line2)}
.lg-art:last-child{border-bottom:none}
.lg-art>h2{margin:0 0 14px;font-size:16px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);line-height:1.5}
.lg-art h3{margin:22px 0 10px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.lg-art p{margin:0 0 12px}
.lg-art p:last-child{margin-bottom:0}
.lg-art a{color:var(--acc)}

/* **핵심 조문** — 이 서비스라서 꼭 있어야 하는 것들(산출물의 한계·자료의
   소유·비밀유지·수탁자 지위)에만 붙인다. 아무 데나 붙이면 표시가 뜻을 잃는다 */
.lg-art.lg-key{padding-left:16px;border-left:3px solid var(--acc);
  margin-left:-19px;padding-right:0}
.lg-art.lg-key>h2{color:var(--acc)}

/* ── 조문 안의 목록 — 번호를 매기는 자와 안 매기는 자 ──────────────── */
.lg-art ol{margin:0;padding-left:22px}
.lg-art ol>li{margin-bottom:9px;padding-left:3px}
.lg-art ol>li:last-child{margin-bottom:0}
/* 호(號) — 한 단 들어가고 괄호 번호로 */
.lg-art ol.lg-sub{margin:8px 0 4px;padding-left:22px;list-style:none;counter-reset:ho}
.lg-art ol.lg-sub>li{counter-increment:ho;position:relative;margin-bottom:6px}
/* **번호는 오른쪽 맞춤이다** (2026-09-16 실측 — 이용약관 제10조).
   번호를 `::before` 로 직접 그리면서 `left` 만 잡아 두면 **왼쪽 맞춤**이 된다.
   한 자리(10.4px)와 두 자리(17.8px)의 너비가 다르므로, 열 번째 항에서만
   번호가 왼쪽으로 삐져나와 위아래 줄과 안 맞는다(그림으로 확인). 브라우저가
   그리는 기본 `marker` 는 오른쪽 맞춤이라 안 겪던 일이다 — 자리를 잡아 주고
   오른쪽으로 민다. 자리는 **두 자리 + 마침표가 한 줄에 드는 만큼**이라야 한다 —
   16px 로 좁게 잡았더니 「10」과 「.」이 갈려 마침표가 다음 줄로 떨어졌다. */
.lg-art ol.lg-sub>li::before{content:counter(ho) ".";position:absolute;left:-22px;
  width:18px;text-align:right;white-space:nowrap;
  color:var(--ink3);font-variant-numeric:tabular-nums}
/* 정의 목록 — 번호 대신 가운뎃점 */
.lg-art ol.lg-def{padding-left:22px;list-style:none;counter-reset:df}
.lg-art ol.lg-def>li{counter-increment:df;position:relative;margin-bottom:10px}
.lg-art ol.lg-def>li::before{content:counter(df) ".";position:absolute;left:-22px;
  width:18px;text-align:right;white-space:nowrap;
  color:var(--ink3);font-variant-numeric:tabular-nums}
/* 번호가 필요 없는 줄 */
.lg-art ul.lg-plain{margin:8px 0 12px;padding-left:18px;list-style:none}
.lg-art ul.lg-plain>li{position:relative;margin-bottom:7px}
.lg-art ul.lg-plain>li::before{content:"–";position:absolute;left:-15px;color:var(--ink3)}
.lg-art ul.lg-hist{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink3)}

/* ── 테두리 친 덩어리 — 「이것만은 꼭 읽어야 하는」 자리 ───────────── */
.lg-frame{margin:12px 0;padding:16px 18px;border-radius:var(--r);
  background:var(--muted-bg);border:1px solid var(--line2)}
.lg-frame>p:last-child,.lg-frame>ol:last-child,.lg-frame>ul:last-child{margin-bottom:0}
.lg-frame>ol{margin-top:10px}

/* ── 주의 · 곁말 ──────────────────────────────────────────────────── */
.lg-warn{margin:12px 0;padding:12px 14px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.lg-warn a{color:inherit;font-weight:600}
.lg-note-in{margin:12px 0 0;padding:11px 13px;border-radius:var(--r);
  background:var(--muted-bg);font-size:12.5px;line-height:1.75;color:var(--ink2)}
.lg-more{margin:12px 0 0;font-size:12px;color:var(--ink3)}
.lg-basis{font-size:12px;color:var(--ink3)}

/* ── 셈식 ─────────────────────────────────────────────────────────── */
.lg-formula{margin:10px 0;padding:13px 16px;border-radius:var(--r);
  background:var(--muted-bg);border:1px solid var(--line2);
  font-size:12.5px;color:var(--ink2);line-height:1.7;
  font-variant-numeric:tabular-nums}

/* ── SLA 의 숫자 넷 ───────────────────────────────────────────────── */
.lg-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin:0 0 18px}
.lg-stat>div{padding:14px 16px;border-radius:var(--r);
  background:var(--muted-bg);border:1px solid var(--line2)}
.lg-stat b{display:block;font-size:20px;font-weight:600;color:var(--acc);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lg-stat span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink3)}

/* ── 표 ─────────────────────────────────────────────────────────────
   **표는 `div.lg-tw` 로 감싼다.** `<table>` 에 직접 `display:block` 과
   `max-width:100%` 를 주는 길을 먼저 갔다가 물렸다 — 계산된 값은 분명히
   `display:block`·`max-width:100%` 인데도 실제 폭이 760px 로 남았다(창 500px,
   2026-09-16 실측). 브라우저가 표 요소 안쪽에 제 표 상자를 그대로 세우기
   때문이며, 그래서 진짜 block 인 div 를 한 겹 두는 쪽이 확실하다.

   감싸는 일은 사람이 손으로 하지 않고 `<table class="list zebra">` 를 찾아
   한 번에 둘렀다. 조문에 표를 새로 넣을 때에도 **`div.lg-tw` 안에** 넣는다. */
.lg-tw{margin:10px 0 4px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lg-tw table.list{margin:0}
.lg-body table.list{width:100%;margin:10px 0 4px;font-size:12.5px;line-height:1.65}
.lg-body table.list th{font-weight:600;color:var(--ink2);text-align:left}
.lg-body table.list td,.lg-body table.list th{padding:9px 11px;vertical-align:top}
/* **줄바꿈을 되살린다** (2026-09-16 실측 — 창 500px 에서 표가 760px 로 벌어졌다).
   `style.css` 가 `table.list td:nth-child(2)`·`(4)` 에 `nowrap` 을 걸어 두었는데,
   그것은 **업무 목록**에서 파일 이름이 잘리지 않게 하려던 규칙이다. 조문의 표는
   그 칸에 긴 설명문이 들어가므로, 안 풀면 한 줄로 뻗어 문서 전체를 옆으로
   민다. 특이성이 저쪽과 같아 `:nth-child(n)` 을 붙여 한 겹 올렸다 —
   먼저 읽히느냐 나중에 읽히느냐에 기대면 파일 순서가 바뀌는 날 되돌아온다.

   **낱말은 안 쪼갠다** (2026-09-16 재실측). 한때 `overflow-wrap:anywhere` 로
   두었는데, 그것은 표가 760px 로 벌어지던 것을 여기서 막아 보려던 자리다.
   그 까닭은 아래 `min-width` 에서 뿌리로 고쳤으므로, 이제는 `break-word` 로
   낮춘다 — `anywhere` 는 「개인정보처리자」를 한 글자씩 세로로 쪼개 놓는다
   (창 500px 실측). 그래도 안 들어가는 표는 `.lg-tw` 가 굴린다. */
.lg-body table.list td:nth-child(n),.lg-body table.list th:nth-child(n){
  white-space:normal;word-break:keep-all;overflow-wrap:break-word}

/* ── 발치 — 사업자 정보 ───────────────────────────────────────────── */
.lg-co{margin-top:34px;padding-top:22px;border-top:1px solid var(--line2)}
.lg-co h2{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.lg-co dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px 24px;margin:0;font-size:12.5px}
.lg-co dl>div{display:flex;gap:10px;min-width:0}
.lg-co dt{flex:none;width:112px;color:var(--ink3)}
.lg-co dd{margin:0;color:var(--ink2);min-width:0;word-break:break-all}

/* ── 좁은 화면 ──────────────────────────────────────────────────────
   **표가 화면을 밀어낸다** (2026-09-16 실측 — 창 500px 에서 문서 폭이 784px).
   까닭은 조문 안의 표에 `style="width:230px"` 처럼 **열 폭을 박아 둔 것**인데,
   넓은 화면에서 열이 뭉치지 않게 하려고 넣은 그 값이 좁은 화면에서는 표를
   760px 로 벌린다.

   그래서 두 겹으로 막는다. ① 박아 둔 열 폭을 좁은 화면에서만 푼다. ② 그래도
   넘치는 표는 **제 상자 안에서만** 가로로 굴러가게 한다 — 문서 전체가 옆으로
   밀리면 본문 글줄까지 잘려 읽을 수 없게 되기 때문이다.

   ①만으로 끝내지 않는 까닭은 `table-layout:auto` 에서 **긴 열 하나가 표를 먹는**
   일이 있어서다(별도·연결 대사에서 겪었다). ②가 그 경우의 그물이다. */
@media (max-width:760px){
  /* 박아 둔 열 폭을 좁은 화면에서만 푼다. 넓은 화면에서는 그 값이 열을 고르게
     벌려 주므로 그대로 둔다. */
  .lg-tw table.list th[style],.lg-tw table.list td[style]{width:auto!important}
}
@media (max-width:640px){
  .lg-head{padding:34px 0 20px}
  .lg-head h1{font-size:24px}
  .lg-art.lg-key{margin-left:0;padding-left:13px}
  .lg-body table.list{font-size:12px}
  .lg-body table.list td,.lg-body table.list th{padding:7px 8px}
  .lg-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-co dt{width:96px}
}

/* ── 표를 **표로** 되돌린다 (2026-09-16 실측) ─────────────────────────
   찍어 보니 조문의 표가 머리글과 본문이 **서로 다른 자리에 열을 세우고**
   있었다(/privacy 제4조 — 머리글 `115~715` · 본문 `115~1008`). 까닭은
   `display` 였다:

     계정\static\style.css  `.list{…display:grid…}`   ← 목록(`<ul class="list">`)용
     static\style.css       `table.list{width:100%;border-collapse:collapse}`

   뒤엣것이 특이성은 높지만 **`display` 를 안 적어** 앞엣것을 못 덮는다. 그래서
   `<table class="list zebra">` 가 `display:grid` 로 서고, 표 상자를 잃은 thead·
   tbody 가 제각기 열을 세운다(실측 `getComputedStyle(table).display === 'grid'` ·
   표 폭 1436px / 판 860px).

   **업무 화면의 표는 안 건드린다** — 여기서 `.lg-body` 안쪽만 되돌린다. */
.lg-body table.list{display:table}
.lg-body table.list>thead{display:table-header-group}
.lg-body table.list>tbody{display:table-row-group}
.lg-body table.list tr{display:table-row}
.lg-body table.list th,.lg-body table.list td{display:table-cell}

/* **좁은 화면의 최소 폭은 조문 표에 안 건다** (2026-09-16 실측).

   `theme-a.css` 의 `@media(max-width:1100px){body.ta table.list{min-width:760px}}` 는
   **업무 목록** 표가 뭉개지지 않고 제 상자 안에서 구르게 하려는 규칙이다. 그런데
   조문의 표는 글이라 **줄바꿈으로 접히는 편이 옳다** — 안 풀면 창 500px 에서 표가
   760px 로 벌어져 오른쪽 열이 통째로 잘린다(실측 `표 760 / 판 500`).

   특이성으로 이긴다(`body.ta .lg-body table.list` 가 `body.ta table.list` 보다
   높다) — 파일이 읽히는 차례에 기대지 않는다. 그래도 넘치는 표는 `.lg-tw` 가
   제 상자 안에서 굴린다. */
@media (max-width:1100px){
  body.ta .lg-body table.list{min-width:0}
}