/* ══════════════════════════════════════════════════════════════════
   DSD Workspace — Design System · 겉옷 (원본 CSS 를 덮어쓰기만 한다)

   원본 `style.css`·`xbrl.css`·`roll.css` 는 한 글자도 안 고친다.
   이 파일이 **나중에 실려** 같은 클래스를 다시 칠한다.
   그래서 선택자는 전부 `body.ta` 를 앞에 달아 특이도를 한 단계 올렸다.

   **여기가 Design Token 한 자리다.** 색·글자·여백·반지름을 화면마다 따로
   적지 않는다 → `DESIGN_SYSTEM.md`

   2026-08-19 — v0 (`dsd-gold-eight.vercel.app`) 의 색·치수로 갈아탔다.
   **아래 규칙들은 한 줄도 안 고쳤다** — 전부 `var(--…)` 를 읽고 있어서
   값만 바꾸면 저절로 따라온다. 갈래마다 정해 둔 단추 색(초록 `okbtn` ·
   붉은 `needsave` · 어두운 `vfy` · 붉은 `danger`)은 **업무적 뜻이 있는 것**이라
   그대로 둔다(§60 — 기능이 v0 보다 우선).
   ══════════════════════════════════════════════════════════════════ */
body.ta{
  /* ══ 2026-08-30 Visual System 재정비 ══════════════════════════════
     Primary Ink(#18232F)가 브랜드의 중심이고, Mineral Blue(#3F6484)는
     **선택·활성·링크·검색 강조·정보·포커스** 여섯 자리에서만 나온다.
     내비게이션·카드·단추·딱지가 강조색을 다투게 두지 않는다.
     업무 뜻이 있는 색(XBRL 기간색·담당자 색·대사 판정·negate)은 여기 없다.
     `/welcome` 은 옛 값을 그대로 쓴다 → 파일 끝 `body.ta.sa-legacy`
     ═══════════════════════════════════════════════════════════════ */
  /* ── 바탕·표면 ── 업무 바탕은 순백이 아니다. 카드·표만 흰색이라
     그림자 없이도 층이 진다 ────────────────────────────────────── */
  --bg:#f7f7f5; --sf:#fff; --sunk:#f1f2f0; --muted-bg:#f1f2f0;
  /* ── 테두리 ── `--line3` 은 hover 에서 한 단계 진해지는 자리(border-strong) */
  --line:#d9dddc; --line2:#e0e3e2; --line3:#cbd1d2; --inp:#cbd1d2;
  /* ── 글자 ─────────────────────────────────────────────────── */
  --ink:#202528; --ink2:#697276; --ink3:#8a9295;
  /* ── 강조 — 여섯 자리 밖에서는 쓰지 않는다 ────────────────────── */
  --acc:#3f6484; --acc2:#345670; --acc-bg:#e9f0f5; --acc-line:#c7d6e1;
  /* ── 상태 — 채도를 낮춘다. **상태를 말할 때만** 쓴다 ──────────── */
  --ok:#48745f; --ok-bg:#e8f0eb; --ok-line:#cbdcd2;
  --warn:#94672b; --warn-bg:#f5eee3; --warn-line:#e3d5be;
  --bad:#994747; --bad-bg:#f5eaea; --bad-line:#e7cfcf;
  --info:#3f6484; --info-bg:#e9f0f5; --info-line:#cbdae4;
  --pub:#4c5b6a; --pub-bg:#edeff1; --pub-line:#d2d8dc;
  /* ── 잉크 — **브랜드 면과 Primary 단추.** 업무화면 바탕으로 쓰지 않는다.
     `--navy-mut` 은 검증 단추(`.btn.vfy`) **바탕**으로도 쓰인다 —
     투명값을 넣으면 그 단추가 통째로 사라진다. 반드시 불투명 잉크로 둔다. */
  --navy:#18232f; --navy-fg:#ffffff; --navy-mut:#3f4c58;
  --ink-deep:#101923;
  /* ── 레일 면 — Dark Ink Sidebar.
     고른 줄에 **밝은 파란 블록을 깔지 않는다.** 면 대비 10%와
     왼쪽 2.5px 표시선(`--acc-lite`)으로만 알린다. */
  --rail-bg:#18232f; --rail-line:#243040;
  --rail-ink:rgba(255,255,255,.88); --rail-ink2:rgba(255,255,255,.55);
  --rail-hov:rgba(255,255,255,.06); --rail-on-bg:rgba(255,255,255,.10);
  --rail-on:#ffffff;
  /* 레일이 넘칠 때 서는 **스크롤바** — 밝은 회색 기본 스크롤바가 어두운 면 위에서
     먼저 읽히지 않도록 레일 옷을 입힌다(2026-09-16). 면 위의 흰 투명이라 레일
     색을 갈아도 따라온다. */
  --rail-sb:rgba(255,255,255,.18); --rail-sb-on:rgba(255,255,255,.34);
  /* 어두운 면 위의 옅은 파랑 — 레일 표시선·로고 안 데이터 칸.
     `--acc`(#3f6484)를 잉크 위에 그으면 거의 안 보인다. */
  --acc-lite:#7fa3be;

  /* ── 반지름 — **6~8px 만.** 12·16·24px SaaS 카드 모양은 쓰지 않는다 ── */
  --r-sm:5px; --r:6px; --r-lg:8px;
  /* ── 그림자 — **떠 있는 것에만**(dropdown·modal·popover).
     위계는 바탕·테두리·여백이 만든다. 단추와 카드에는 안 쓴다.
     `--sh-1`·`--sh-2` 는 옛 이름이라 **없는 그림자**로 남겨 둔다. */
  --sh-1:none;
  --sh-2:none;
  --sh-3:0 6px 18px rgba(16,25,35,.10);
  /* ── 자리 — 이번 재정비는 레이아웃을 건드리지 않는다 ─────────── */
  --rail:236px; --gbar:48px; --brand-h:var(--gbar); --page-max:1152px;
  /* ── 글자체 — 한글 가독성이 먼저다. Pretendard 가 없으면 맑은 고딕 ─── */
  --font:"Pretendard Variable",Pretendard,"Malgun Gothic","맑은 고딕",
         system-ui,-apple-system,sans-serif;
  --mono:"SF Mono","JetBrains Mono",Consolas,ui-monospace,monospace;
  /* ── 여백 눈금 — 4px 배수 하나만 ──────────────────────────────── */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px;
  --sp-5:16px; --sp-6:20px; --sp-7:24px; --sp-8:32px;

  /* 목록 줄 음영 — 홀·짝 **둘 다** 칠한다(아래 `table.list.zebra` 참조).
     2026-08-16 지시로 들어온 것이라 **걷지 않는다**(줄이 일흔이 넘으면 흰
     바탕에서 눈이 줄을 놓친다). 흰 바탕과 채널 차이가 14 라 종전(11)보다
     한 단계 진하다. */
  --zeb1:#fff; --zeb2:#f1f2f0;

  /* ── 옛 이름 — `style.css` 가 이 이름으로 읽는다 ────────────────
     **한 값에서 나오게 한다.** 두 군데 적으면 한쪽만 바뀌어
     「색이 화면마다 다르다」가 된다 → [[feedback_css_two_places_hold_width]] */
  --surface:var(--sf); --radius:var(--r);
  --accent:var(--acc); --accent-2:var(--acc2);
  --accent-bg:var(--acc-bg); --accent-line:var(--acc-line);
}

body.ta{background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:13px;line-height:1.55}
/* 숫자는 자릿수가 맞아야 읽힌다 — 금액·시각 칸에 건다(§18) */
body.ta .tabular,body.ta table.list td.num,body.ta table.list td.tm{
  font-variant-numeric:tabular-nums}
body.ta .muted{color:var(--ink2)}
body.ta code{background:var(--sunk);border:1px solid var(--line2);border-radius:3px;
  padding:0 4px;font-size:12px}
.ta-hide{display:none !important}

/* ── 껍데기 자리 만들기 ─────────────────────────────────────
   바·레일은 `position:fixed` 라 흐름 밖이다. 자리는 body 의 padding 이 낸다 —
   **감싸지 않는다.** 감싸면 편집기·XBRL 의 flex 자식 관계가 끊어진다.

   2026-08-19 — **레일이 화면 높이를 다 쓴다**(v0 구조). 제품 이름이 위 띠에서
   레일 머리로 내려왔고, 위 띠는 레일 오른쪽에서 시작한다.

   **아래 `padding-bottom` 을 0 으로 내렸다.** 28px 은 화면 발치의 `ta-usage`
   띠 자리였는데, 그 띠는 **엔진 쪽 `_shell.html` 에만** 있어 계정판에서는 한 번도
   안 그려졌다(겉옷은 계정층 것이 이긴다) → [[feedback_shell_is_in_two_places]].
   아무도 안 쓰는 자리가 모든 화면에서 28px 을 먹고 있었다 — 업무 화면은 세로가
   곧 데이터다(§33·§51). 띠가 되살아나면 이 값도 함께 되살린다. */
body.ta{box-sizing:border-box;padding-top:var(--gbar);padding-left:var(--rail);padding-bottom:0}
body.ta:is(.ta-slim,.ta-narrow){--rail:52px}
body.ta.lg{padding:0}                    /* 로그인·알림은 껍데기가 없다 */

/* ── 위 띠 — 지금 어디에 있나 + 나는 누구인가 ─────────────────── */
body.ta .ta-bar{position:fixed;top:0;left:var(--rail);right:0;height:var(--gbar);z-index:9000;
  display:flex;align-items:center;gap:2px;padding:0 var(--sp-7);
  background:var(--sf);border-bottom:1px solid var(--line);
  transition:left .18s}
body.ta .ta-title{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.ta .ta-ctx{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:12.5px;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.ta .ta-ctx b{color:var(--ink);font-weight:600}
body.ta .ta-sep{color:var(--ink3);opacity:.6}
body.ta .ta-gap{margin-left:auto}
body.ta .ta-ro{flex:none;display:inline-flex;align-items:center;height:20px;
  padding:0 8px;border-radius:10px;font-size:11px;font-weight:700;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);cursor:help}
body.ta .ta-real{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 10px;
  border:1px solid var(--acc-line);background:var(--acc-bg);color:var(--acc2);
  border-radius:var(--r);font-size:12px;font-weight:600;text-decoration:none}
body.ta .ta-real:hover{background:#dbe2e8}
/* 사람 — 아바타 · 이름 · 소속/권한. 오른쪽 길 셋과는 얇은 선으로 가른다 */
body.ta .ta-me{flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;
  line-height:1.25;color:var(--ink2);margin-right:var(--sp-3);padding-right:var(--sp-4);
  border-right:1px solid var(--line)}
body.ta .ta-av{width:24px;height:24px;border-radius:50%;background:var(--acc-bg);
  color:var(--acc);display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
body.ta .ta-mename{color:var(--ink);font-weight:500}
body.ta .ta-merole{color:var(--ink2)}
/* 늘 쓰는 길 셋 — 화면마다 제 머리줄에 흩어져 있던 것을 여기 한 자리로 모은다(§63) */
body.ta .ta-act{flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r);font-size:12.5px;font-weight:500;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background .12s,color .12s}
body.ta .ta-act.mut{color:var(--ink2)}
body.ta .ta-act:hover{background:var(--muted-bg);color:var(--ink)}
body.ta .ta-act .ta-ic{color:currentColor;opacity:.75}
body.ta .ta-ic{width:16px;height:16px;flex:none}

/* ── 레일 — 업무 영역 이동 ─────────────────────────────────── */
/* **`--rail` 은 「레일이 차지하는 전체 폭」이다** (2026-09-08 신고 — *"여기 단차
   차이가 있어"*). 여기가 `content-box` 라 레일이 236+1=**237px** 을 먹었는데,
   레일 머리(`.ta-brand` · border-box)는 236 에서 끝나고 위 띠도 236 에서 시작했다.
   그래서 **위 띠 높이(48px)까지는 흰 띠가 레일의 오른쪽 테두리를 덮고**, 그 아래
   부터 테두리가 나타나 모서리가 1px 어긋나 보였다(캡처로 신고받았다).
   `--rail` 을 쓰는 자리 셋(body 의 padding-left · `.ta-bar` 의 left · 여기)이
   **같은 값을 다르게 읽던** 것이라, 이 자를 border-box 로 맞춘다 — 테두리가
   안으로 들어 레일 전체가 `--rail` 과 같아진다. 접힘(`--rail:52px`)도 함께 맞는다. */
body.ta .ta-rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:8900;
  box-sizing:border-box;
  background:var(--rail-bg);overflow:hidden;
  /* **겉을 테두리로 그리면 머리가 1px 작아진다** (2026-09-09 신고 — *"dsd
     워크스페이스 … 이 화면에서는 단차가 있다"*). 어제 레일을 border-box 로 맞추자
     이번엔 **오른쪽 테두리 1px 을 내용 상자가 빼고** 쓰게 되어, 레일
     머리(`.ta-brand`)가 235 에서 끝났다 — 레일은 236, 위 띠는 236 에서
     시작하는데 머리만 235. 그 1px 이 배율이 정수가 아닌 화면에서
     2px 으로 벌어져 눈에 밟힌다. **겉을 테두리가 아닌 안쪽 그림자로**
     그리면 내용 상자가 236 전체가 되어 머리·레일·위 띠가 한 자리에 선다.
     선 색·굵기는 그대로이고 차지하는 폭만 사라진다. */
  box-shadow:inset -1px 0 0 var(--rail-line);
  display:flex;flex-direction:column;transition:width .18s}
/* 레일 머리 — **제품 이름은 여기 한 자리다.** 눌러서 업무 홈으로 간다 */
body.ta .ta-brand{display:flex;color:var(--rail-ink);align-items:center;gap:10px;flex:none;
  height:var(--brand-h);padding:0 var(--sp-5);box-sizing:border-box;
  border-bottom:1px solid var(--rail-line);text-decoration:none;overflow:hidden}
body.ta .ta-bar .ta-pathbrand{height:var(--gbar);padding:0;margin:0;flex:1 1 auto;
  min-width:0;max-width:none;gap:8px;border-bottom:0;background:transparent;
  color:var(--ink2);text-decoration:none;justify-content:flex-start}
body.ta .ta-bar .ta-pathbrand:hover{background:transparent;box-shadow:none}
body.ta .ta-bar .ta-pathbrand a{color:var(--ink3);font-weight:500;text-decoration:none}
body.ta .ta-bar .ta-pathbrand a:hover{text-decoration:underline;text-underline-offset:3px}
body.ta .ta-bar .ta-pathbrand .sep{color:var(--ink3);opacity:.75;flex:none}
body.ta .ta-bar .ta-pathbrand .cur{color:var(--ink);font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ta:is(.ta-slim,.ta-narrow) .ta-bar .ta-pathbrand{justify-content:flex-start;
  padding:0;margin:0;gap:8px}
/* ── ACCRIVA lockup — 마크 + 이름 + 설명. 로그인·레일이 같은 것을 쓴다 ──
   글자 사이를 넓게(`letter-spacing`) 잡는다 — 대문자 여섯 자는 붙여 놓으면
   덩어리로 읽히고, 벌리면 institutional 하게 선다.

   **마크에 남색 타일을 두르지 않는다**(Concept 01). 마크 자체가 남색이라
   타일을 두르면 남색 위에 남색이 앉아 형태가 죽는다. 밝은 바탕에는 마크를
   그대로 놓고(Dark on Light), 어두운 면에서만 흰 마크로 뒤집는다.

   칠은 여기서만 한다 — 매크로는 모양만 낸다:
     `.mk-a` A 몸통 · `.mk-c` 데이터 칸 · `.mk-c.s` 옅은 칸(Sky) */
/* v0 실측 — `size-8`(32px) `rounded-md`(5px) `bg-navy` 타일에 19px 마크.
   타일 안에서는 마크를 **뒤집는다**(Light on Dark) — 남색 위 남색이 아니다. */
body.ta .ac-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:var(--navy);border-radius:var(--r-sm)}
body.ta .ac-mark .ac-mk{width:18px;height:18px;display:block}
body.ta .mk-a{fill:var(--navy-fg)}
body.ta .mk-c{fill:rgba(231,236,240,.62)}
body.ta .mk-c.s{fill:rgba(231,236,240,.34)}
body.ta .ac-name{display:flex;flex-direction:column;min-width:0;line-height:1.2}
body.ta .ac-name b{font-size:13.5px;font-weight:600;letter-spacing:-.025em;color:#fff;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.ta .ac-name em{font-size:10px;font-style:normal;font-weight:400;letter-spacing:.025em;
  color:var(--rail-ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 구르는 곳은 **가운데 목록뿐**이다 — 머리와 발치는 늘 제자리에 있어야 한다 */
body.ta .ta-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:var(--sp-4) 10px var(--sp-4);
  /* 파이어폭스 계열 — 가늘게, 엄지만 보이고 트랙은 레일 바탕 그대로 */
  scrollbar-width:thin;scrollbar-color:var(--rail-sb) transparent}
/* ── **레일의 스크롤바는 레일 옷을 입는다** (2026-09-16 신고 — *"왼쪽 목록에
   스크롤 할 수 있는 레일이 생기는데, 너무 다른 배경과 달라서 튀어"*).

   창을 줄이거나 배율을 올리면 `.ta-nav` 가 넘쳐(실측 내용 859px) 브라우저
   **기본 스크롤바**가 선다 — 밝은 회색 트랙에 위아래 화살표 단추까지 달려
   `#18232f` 바탕 위에서 그것이 먼저 읽힌다. 폭도 **15px** 이라 레일 236px 에서
   글자 자리를 그만큼 먹는다.

   트랙은 **안 칠한다**(투명) — 칠하면 레일 안에 세로 띠가 하나 더 생긴다.
   엄지는 테두리를 투명으로 두고 `background-clip:content-box` 로 안쪽만 칠해
   **양옆에 숨 쉴 자리**를 둔다(8px 중 실제 4px). 화살표 단추는 걷는다 — 이 목록은
   굴려서 보는 자리지 한 줄씩 누르는 자리가 아니다.

   **두 벌을 둔다** — 요즘 크롬은 `scrollbar-width`·`scrollbar-color` 가 적히면
   아래 `::-webkit-scrollbar` 를 **무시한다**(실측 폭 10px = `thin`). 그래도 아래를
   지우지 않는 까닭은 표준 속성을 늦게 받은 브라우저에서는 그쪽이 유일한 자이기
   때문이다. 되돌려 볼 때에는 **둘 다** 되돌려야 한다. */
body.ta .ta-nav::-webkit-scrollbar{width:8px}
body.ta .ta-nav::-webkit-scrollbar-track{background:transparent}
body.ta .ta-nav::-webkit-scrollbar-thumb{background:var(--rail-sb);
  border-radius:4px;border:2px solid transparent;background-clip:content-box}
body.ta .ta-nav::-webkit-scrollbar-thumb:hover{background:var(--rail-sb-on);
  background-clip:content-box}
body.ta .ta-nav::-webkit-scrollbar-button{display:none;width:0;height:0}
body.ta .ta-nav::-webkit-scrollbar-corner{background:transparent}
/* 무리 제목 — v0: 작은 대문자 회색.
   **2026-08-18 지시(「업무 줄과 같은 크기·파란 글씨」)를 이 이식이 덮는다.**
   묶음 이름이 업무 줄과 같은 무게로 서면 눈이 아홉 줄을 다 읽는다 — 무리는
   길잡이지 고를 것이 아니다. 되돌리려면 이 두 줄만 옛 값으로 바꾼다:
   `font-size:12.8px;font-weight:700;letter-spacing:0;color:var(--acc)` */
/* 무리 사이에 **금을 긋지 않는다**(v0). 밑바탕 CSS 가 `border-top` 을 걸고 있어
   여기서 끈다 — 아홉 줄짜리 레일에 금 셋이 더 그어지면 줄보다 금이 먼저 읽힌다. */
body.ta .ta-grp{padding:var(--sp-5) var(--sp-3) var(--sp-1);font-size:10.5px;font-weight:600;border-top:0;
  text-transform:uppercase;letter-spacing:.05em;color:var(--rail-ink2)}
body.ta .ta-nav>.ta-grp:first-child{padding-top:0}
/* 이름이 길면(「XBRL 공시본 찾기」) 두 줄이 된다 — **줄이 늘면 상자도 늘게**
   둔다. 붙박이 높이로 두면 글자가 상자 밖으로 새어 옆 줄과 겹친다(2026-08-17 캡처). */
body.ta .ta-i{position:relative;display:flex;align-items:center;gap:10px;
  box-sizing:border-box;min-height:32px;
  margin:1px 0;padding:3px var(--sp-3);border-radius:var(--r-sm);
  color:var(--rail-ink);font-size:13px;font-weight:500;text-decoration:none;
  transition:background .12s,color .12s}
body.ta .ta-i>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.ta .ta-i:hover{background:var(--rail-hov);color:var(--rail-on)}
body.ta .ta-i:hover .ta-ic{color:var(--rail-on)}
body.ta .ta-i.on{background:var(--rail-on-bg);color:var(--rail-on);font-weight:600}
body.ta .ta-i.on .ta-ic{color:#fff}
/* 선택된 줄 왼쪽의 파란 막대 — 색만으로 알리지 않는다(§76).
   `box-shadow` 를 쓰는 까닭: `border-left` 는 글자를 3px 밀어 줄이 덜컥 움직인다 */
body.ta .ta-i.on::before{content:'';position:absolute;left:0;top:50%;margin-top:-8px;
  width:2.5px;height:16px;border-radius:0 99px 99px 0;background:var(--acc)}
body.ta .ta-i .ta-ic{color:var(--rail-ink2);width:17px;height:17px;transition:color .12s}
/* 셈 딱지 — 레일에는 안 달지만(§55) 자리는 열어 둔다 */
body.ta .ta-i .ta-cnt{flex:none;font-variant-numeric:tabular-nums;
  padding:1px 6px;border-radius:var(--r-sm);font-size:10.5px;font-weight:600;
  background:var(--muted-bg);color:var(--ink2)}
body.ta .ta-i.on .ta-cnt{background:rgba(255,255,255,.14);color:#fff}
/* 밖으로 나가는 링크 표시 — 바로가기에만(§94) */
body.ta .ta-ext{width:13px;height:13px;flex:none;color:var(--rail-ink2);opacity:.6}
body.ta .ta-sepline{height:1px;background:var(--rail-line);margin:10px 12px}
body.ta .ta-foot{flex:none;margin-top:0;padding:var(--sp-3) 10px;
  border-top:1px solid var(--rail-line);display:flex;flex-direction:column;gap:1px}

/* ── 접기·펴기 손잡이 — **레일 오른쪽 테두리** (2026-08-18 지시 —
   *"레일이 너무 아래 있다 … 오른쪽 테두리에 가면 열고 접게 하는 그런거"*).

   어제는 레일 **발치**에 메뉴 줄처럼 두었는데 눈이 거기까지 안 내려간다.
   레일과 본문이 갈리는 **그 자리**에 붙이면 손이 저절로 간다.

   `<nav>` 밖에 있다(레일은 `overflow:auto` 라 안에 두면 잘린다). 자리는 `--rail`
   하나가 잡는다 — 접히면 41px, 펴지면 201px 로 **저절로 따라간다**
   → [[feedback_css_two_places_hold_width]]

   **늘 옅게 보인다.** 마우스를 올려야만 나타나게 하면 있는 줄도 모른다
   → [[feedback_feature_needs_entry_point]] 올리면 또렷해지고 파랗게 선다.
   손이 닿는 넓이는 `::before` 로 넓힌다 — 22px 짜리 알약만으로는 잡기 어렵다. */
/* **레일 한가운데에 선다** (2026-08-18 지시 — *"그걸 중간에 오게 해줘 음영을 좀
   칠하고, 넓게"*). 위쪽에 두었더니 첫 업무 줄과 눈이 겹쳤다.
   2026-08-19 — 레일이 이제 화면 높이를 다 쓰므로 **창 한가운데가 곧 레일
   한가운데**다.
   2026-09-09 — 사이에 「마지막 업무 줄에 맞추는」 판이 있었으나, 업무가 늘어
   그 줄이 스크롤에 잘리면서 손잡이가 발치까지 내려갔다(신고 *"너무 아래에 있다"*).
   자리는 여기 값 그대로 한가운데이고, `theme-a.js` 는 **바로가기 줄과 겹칠 때만**
   위로 비켜 세운다(`placeEdge`). */
body.ta .ta-edge{position:fixed;z-index:8950;
  /* 폭·반지름·왼쪽자리는 **한 값에서 나온다** — 22/2 = 11. 따로 적으면 손잡이가
     테두리를 가운데로 안 물고 한쪽으로 밀린다 → [[feedback_css_two_places_hold_width]] */
  left:calc(var(--rail) - 11px);
  top:50vh;
  transform:translateY(-50%);
  width:22px;height:78px;padding:0;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.18);background:#fff;border-radius:11px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink2);
  /* 음영 — 레일 테두리 위에 **떠 있는 것**으로 보여야 손잡이로 읽힌다 */
  box-shadow:0 1px 5px rgba(20,30,45,.16),0 0 0 3px var(--bg);
  opacity:.85;transition:opacity .12s,background .12s,color .12s,
                         border-color .12s,box-shadow .12s}
body.ta .ta-edge::before{content:'';position:absolute;top:-12px;bottom:-12px;
  left:-12px;right:-12px}                   /* 잡는 자리를 넓힌다(보이지는 않는다) */
body.ta .ta-edge:hover,body.ta .ta-edge:focus-visible{opacity:1;
  background:var(--acc-bg);color:var(--acc2);border-color:var(--acc-line);
  box-shadow:0 2px 9px rgba(24,37,54,.24),0 0 0 3px var(--bg)}
body.ta .ta-edge .ta-chev{width:13px;height:13px;transition:transform .12s}
/* 꺾쇠는 **접혔을 때 반대로** 돌린다 — 그 자리에서 무엇이 일어날지를 모양이 말한다 */
body.ta:is(.ta-slim,.ta-narrow) .ta-edge .ta-chev{transform:rotate(180deg)}
body.ta.lg .ta-edge{display:none}          /* 로그인·알림은 껍데기가 없다 */
/* 발치 — 업무 줄과 같은 모양을 쓴다(다른 모양이면 「다른 종류의 것」으로 읽힌다) */
body.ta .ta-foot a{display:flex;align-items:center;gap:10px;
  box-sizing:border-box;min-height:32px;
  padding:3px var(--sp-3);border-radius:var(--r-sm);color:var(--rail-ink);
  font-size:13px;font-weight:500;text-decoration:none;transition:background .12s,color .12s}
body.ta .ta-foot a:hover{background:var(--rail-hov);color:var(--rail-on)}
body.ta .ta-foot a .ta-ic{color:var(--rail-ink2)}
body.ta .ta-foot a:hover .ta-ic{color:var(--rail-on)}

/* ── 좁은 레일 — 아이콘만 ────────────────────────────────────
   **숨기지 않고 접는다**(52px) → [[feedback_rail_hidden_under_1100]] */
body.ta:is(.ta-slim,.ta-narrow) .ta-brand{justify-content:center;padding:0;gap:0}
body.ta:is(.ta-slim,.ta-narrow) .ac-name{display:none}
/* **로그인은 레일 접기와 무관하다** — 레일을 접어 둔 사람이 로그인 화면에 오면
   `ta-slim` 이 그대로 남아 ACCRIVA 글자가 통째로 사라졌다(2026-08-19 실측).
   껍데기가 없는 화면(`.lg`)에서는 접기 규칙을 되돌린다. */
body.ta.lg:is(.ta-slim,.ta-narrow) .ac-name{display:flex}
body.ta:is(.ta-slim,.ta-narrow) .ta-nav{padding-left:6px;padding-right:6px}
body.ta:is(.ta-slim,.ta-narrow) .ta-grp{height:1px;padding:0;margin:9px 6px;background:var(--rail-line);
  overflow:hidden;color:transparent;font-size:0}
body.ta:is(.ta-slim,.ta-narrow) .ta-i{justify-content:center;padding:0;margin:2px 0;height:32px}
body.ta:is(.ta-slim,.ta-narrow) .ta-i>span,
body.ta:is(.ta-slim,.ta-narrow) .ta-i .ta-ext,
body.ta:is(.ta-slim,.ta-narrow) .ta-i .ta-cnt{display:none}
body.ta:is(.ta-slim,.ta-narrow) .ta-i.on::before{display:none}
body.ta:is(.ta-slim,.ta-narrow) .ta-foot{padding:var(--sp-2) 6px}
body.ta:is(.ta-slim,.ta-narrow) .ta-foot a{justify-content:center;padding:0}
body.ta:is(.ta-slim,.ta-narrow) .ta-foot a>span{display:none}
/* 이름표가 없어졌으니 **마우스를 올리면 무엇인지 말해 준다** — `title` 이 이미 있다 */

body.ta .ta-usage{position:fixed;left:var(--rail);right:0;bottom:0;height:28px;z-index:8990;
  display:flex;align-items:center;gap:12px;padding:0 12px;box-sizing:border-box;
  background:var(--navy);color:var(--navy-fg);border-top:1px solid #2b3545;
  font-size:11.5px;white-space:nowrap;overflow:hidden}
body.ta .ta-usage[hidden]{display:none}
body.ta .ta-usage .ta-uitem{display:inline-flex;align-items:center;gap:4px;min-width:0}
body.ta .ta-usage b{color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis}
body.ta .ta-usage .ta-ustat{margin-left:auto;color:#98a5b3}
body.ta .ta-usage.warn{background:#3a1d18;border-top-color:#7a3128}
body.ta .ta-usage.warn .ta-ustat{color:#ffd0c7;font-weight:700}

/* ── 목록형 화면(.lib) ─────────────────────────────────────── */
/* **양옆 빈 자리를 좁힌다** (2026-08-13 지시 — 화면 왼쪽·오른쪽 흰 띠를 짚어 *"좁혀줘"*).
   여태 `1800px` 에서 멈춰, 2560px 짜리 화면에서는 **왼쪽 245px·오른쪽 245px** 이
   빈 채로 남고 표는 그만큼 접혔다(실측). 겉옷 왼쪽 띠(`--rail`)를 뺀 나머지를 거의 다 쓴다.
   2400px 에서 멈추는 까닭 — 그보다 넓어지면 파일 이름 한 줄이 화면 끝까지 늘어져
   눈이 줄을 따라가지 못한다. **폭을 잡는 자리는 여기와 `style.css` 둘**이다(겉옷이 이긴다). */
body.ta.lib .wrap{max-width:min(2400px,calc(100vw - var(--rail) - 28px));
  margin:0 auto;padding:0 14px 44px}
body.ta.lib .libtop{position:sticky;top:0;z-index:20;background:var(--bg);
  padding:13px 0 11px;margin-bottom:12px;border-bottom:1px solid var(--line);gap:12px}
body.ta.lib h1{font-size:17px;margin:0}
body.ta .sub{color:var(--ink2);font-size:12.5px;margin:0 0 14px;
  word-break:keep-all;overflow-wrap:break-word}

/* 카드 → 패널: 테두리 한 겹, 모서리 6px, 그림자 없음 */
body.ta .card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:12px;box-shadow:none}
body.ta .card>b{font-size:13px;margin-bottom:9px}
body.ta .card.step{display:flex;gap:11px}
body.ta .stepno{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
body.ta .stepbody .lbl{font-size:13px}

/* 표 */
body.ta table.list{font-size:12.5px}
body.ta table.list th{font-size:11px;font-weight:600;color:var(--ink3);background:var(--sunk);
  border-bottom:1px solid var(--line);padding:0 10px;height:28px;white-space:nowrap}
body.ta table.list td{padding:5px 10px;border-bottom:1px solid var(--line2)}
body.ta table.list.folders th{padding-left:8px;padding-right:8px}
body.ta table.list.folders td{padding-left:8px;padding-right:8px}
/* **이름 칸 오른쪽에 한 뼘** (2026-08-13 지시 — 노란 줄로 짚어 *"노란색 정도까지"*).
   `style.css` 에만 적었더니 **한 픽셀도 안 움직였다** — 바로 위 규칙(`body.ta table.list td`,
   0-3-1)이 `.nmcell`(0-2-1)을 이겨 padding 을 10px 로 되돌린다. 겉옷에도 적어야 산다. */
body.ta table.list td.nmcell{padding-right:64px}
body.ta table.list.folders td.nmcell{padding-right:56px}
/* **「파일명 변경」에 옅은 테두리** (2026-08-13 지시 *"테두리도 옅하게 칠해줘"*).
   `ghost` 는 이 겉옷에서 테두리까지 투명해 글자만 떠 있었다 — 줄마다 같은 자리에
   서게 됐으니 테두리가 있어야 「단추가 한 줄로 서 있다」가 보인다. */
body.ta table.list .renbtn{border-color:var(--line2);background:var(--sf);color:var(--ink2)}
body.ta table.list .renbtn:hover{border-color:var(--inp);background:var(--sunk);color:var(--ink)}
/* **줄마다 옅은 음영 — 홀·짝을 둘 다 칠한다** (2026-08-16 지시 — *"홀짝으로 음영을
   칠하자, 노란색보다 조금 옅은 음영으로 … 음영을 둘 다 넣어서 배경하고는 조금 다르게
   … 위 아래가 조금 구분되게"*).
   A안이 얼룩을 걷어냈던 자리다(여기 `transparent` 가 그것이었다). 줄이 일흔이 넘으니
   흰 바탕 위에서 눈이 줄을 놓쳤다.
   **한쪽만 칠하면 안 된다** — 나머지 줄이 카드 흰 바탕과 같아져 「줄이 반만 있는」
   표로 보인다. 그래서 둘 다 칠하고 **둘 사이만 조금 갈라 둔다**(채널 차이 4·8·16).
   색은 걷어낸 「방금 만든 줄」 노랑(#fff8e1)보다 **옅게** 잡았다.
   **`tr` 을 칠한다** — `td` 를 칠하면 마우스 음영(`tr:hover`)이 그 아래 깔려 안 보인다.
   자리는 마우스·프로젝트 머리줄 규칙보다 **앞**이라야 한다(특이도가 같아 차례가 가른다). */
body.ta table.list.zebra tbody tr:nth-child(odd){background:var(--zeb1)}
body.ta table.list.zebra tbody tr:nth-child(even){background:var(--zeb2)}
/* **커서가 짚은 줄은 한눈에 보여야 한다** (2026-08-11 지시: *"음영이 잘 안 나서
   버튼을 누르기가 힘들어"*). A안이 얼룩(zebra)을 걷어냈으므로 **줄을 알리는 것은
   이 음영 하나뿐**인데 `#f6f9fd` 는 흰 바탕과 채널 차이가 5뿐이라 사실상 안 보였다.
   → 파란 음영을 짙게(차이 25) + **맨 왼쪽에 파란 띠** + 아랫줄을 파랗게.
   `box-shadow` 를 쓰는 까닭: `border-left` 는 칸을 3px 밀어 **줄이 덜컥 움직인다**. */
body.ta table.list.zebra tbody tr:hover{background:var(--acc-bg)}
body.ta table.list.zebra tbody tr:hover>td{border-bottom-color:var(--acc-line)}
body.ta table.list.zebra tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
/* 줄 안의 흰 단추는 파란 바탕에 묻힌다 — 테두리만 조금 진하게 */
body.ta table.list.zebra tbody tr:hover .btn{border-color:var(--acc-line)}
body.ta .colhead th{background:var(--sunk);border-bottom:1px solid var(--line)}
/* 프로젝트 머리줄 — 원본은 **짙은 남색 바탕에 흰 글자**다.
   바탕만 밝히면 흰 글자가 그대로 남아 **이름이 통째로 안 보인다**(실측). 글자색도 함께 바꾼다. */
body.ta table.list.zebra tbody tr.foldrow,
body.ta table.list tbody tr.foldrow{background:var(--sunk)}
body.ta table.list tr.foldrow td{background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:6px 8px}
/* **프로젝트 줄도 파일 줄과 똑같이 물든다** (2026-08-11 지시: *"파일 선택되었을 때
   파란 음영과 테두리가 나오는 것처럼 폴더에 마우스가 가도 똑같이"*).
   여태 회색(`#eef2f7`)이라 **누를 수 있는 줄로 보이지 않았다** — 프로젝트 머리는
   눌러야 펴지는 줄인데 파일 줄보다 덜 반응하니 접힌 채로 두고 지나쳤다.
   `tr` 이 아니라 **`td` 를 칠한다** — 바로 위 줄에서 `td` 에 제 바탕(`--sunk`)을
   깔아 두었으므로 `tr` 만 칠하면 그 바탕에 가려 아무 일도 안 일어난 것처럼 보인다.
   (`tr.loosehead` 는 그대로 둔다 — 그 줄은 프로젝트가 아니라 「밖에 있는 것들」이라는
   알림이고, 눌러도 펴지지 않는다.) */
body.ta table.list.zebra tbody tr.foldrow:hover>td{background:var(--acc-bg);
  border-bottom-color:var(--acc-line);border-top-color:var(--acc-line)}
body.ta table.list.zebra tbody tr.foldrow:hover>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
body.ta .foldrow .foldhead,body.ta .foldrow .fcar,
body.ta .foldrow .foldhead:hover{color:var(--ink)}
body.ta .foldhead .fnm{font-weight:700;font-size:13px}
body.ta .foldhead .fnm::before{filter:grayscale(1);opacity:.5}
body.ta .fcnt{font-family:inherit;font-weight:400;font-size:11px;color:var(--ink3);
  background:var(--sf);border:1px solid var(--line)}
body.ta tr.foldrow .btn{color:var(--ink2);border-color:var(--line);background:var(--sf)}
body.ta tr.foldrow .btn:hover{background:var(--sunk)}
body.ta tr.loosehead td{background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:6px 8px}
body.ta .lhnm{color:var(--ink);font-size:12.5px}
body.ta .lhnm::before{filter:grayscale(1);opacity:.5}
/* 줄 끝 단추 일곱이 두 줄로 접히던 것 — 작게 만들어 한 줄에 세운다 */
body.ta .acts-cell{flex-wrap:nowrap;gap:4px}
body.ta .acts-cell .btn{height:23px;padding:0 7px;font-size:11.5px}
body.ta .grip{color:var(--ink3);opacity:.6}

/* 전기 이월/당기 정산표 전용 화면은 v0처럼 한 업무만 보인다. */
body.ta.roll-dedicated .roll-modes,
body.ta.roll-dedicated #modesub,
body.ta.roll-dedicated .crumb{display:none}
body.ta .roll-workbench{display:block}
/* ══════════════════════════════════════════════════════════════════
   Tools 걸음 레일 — v0 `/carryover`·`/worksheet` 실측 이식

   v0 는 **바깥 카드가 없다.** 걸음이 바탕 위에 서고, 번호 동그라미를
   **세로 이음선**이 꿰며, 지금 걸음만 흰 작업 카드로 열린다.
   앞선 판(넓은 카드 한 장)은 v0 와 달라 다시 짰다(2026-08-19 지시).

   **다른 점 하나** — v0 는 지나갈 걸음을 접어 두지만 이 시스템은 펴 둔다.
   걸음 2 가 「둘 중 하나 고르기」라 접으면 무엇을 고를 수 있는지가 사라지고,
   `roll.js` 는 「다음」이 아니라 **문서를 고르는 순간** 다음 걸음을 켠다.
   기능이 v0 닮음보다 앞선다(§78).
   ══════════════════════════════════════════════════════════════════ */
body.ta .roll-mainflow{min-width:0;max-width:720px;background:none;border:0;
  border-radius:0}
body.ta .roll-mainflow>.card.step{position:relative;display:flex;gap:14px;
  align-items:flex-start;background:none;border:0;border-radius:0;box-shadow:none;
  margin:0;padding:0 0 26px}
body.ta .roll-mainflow>.card.step:last-of-type{padding-bottom:0}
/* 이음선 — 동그라미 한가운데를 지나 다음 걸음까지. 마지막 걸음엔 안 긋는다 */
body.ta .roll-mainflow>.card.step::before{content:'';position:absolute;
  left:13px;top:30px;bottom:0;width:1px;background:var(--line)}
body.ta .roll-mainflow>.card.step:last-of-type::before{display:none}
body.ta .roll-mainflow>.card.step>.stepno{position:relative;z-index:1;flex:0 0 28px;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:600;
  background:var(--acc);color:#fff;border:0;margin:0}
/* 아직 못 밟는 걸음 — **흐린 테두리 동그라미**(v0). 색만으로 알리지 않는다 */
body.ta .roll-mainflow>.card.step.hidden{display:none}
/* v0 — **첫 걸음만 채우고 뒤 걸음은 테두리만**. 못 쓴다는 뜻이 아니라
   「나중 걸음」이라는 뜻이다(이 시스템은 뒤 걸음도 늘 눌린다). */
body.ta .roll-mainflow>.card.step:not(:first-of-type)>.stepno{
  background:var(--sf);color:var(--ink3);border:1px solid var(--line3)}
body.ta .roll-mainflow>.card.step>.stepbody{flex:1 1 auto;min-width:0;padding-top:2px}
body.ta .roll-mainflow>.card.step>.stepbody>b.lbl{display:block;font-size:14px;
  font-weight:600;color:var(--ink);margin:0 0 4px}
body.ta .roll-mainflow>.card.step>.stepbody>b.lbl span,
body.ta .roll-mainflow>.card.step>.stepbody>b.lbl .muted{font-weight:400;
  color:var(--ink2);font-size:12.5px}
/* 걸음의 **일하는 자리**는 흰 카드로 뜬다(v0 step 1) */
body.ta .roll-mainflow>.card.step>.stepbody>.synadd,
body.ta .roll-mainflow>.card.step>.stepbody>.roll-from,
body.ta .roll-mainflow>.card.step>.stepbody>.dropzone,
body.ta .roll-mainflow>.card.step>.stepbody>.pick3{background:var(--sf);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
  margin-top:10px}
body.ta .roll-mainflow>.card.step>.stepbody>.roll-from+.roll-from{margin-top:10px}
/* **오른쪽 설명 패널은 안 쓴다**(지시) — v0 에도 없다. 지우지 않고 감춘다.
   2026-08-19: 걸음 레일을 다시 짜면서 이 줄을 함께 지워 카드가 화면 발치에
   되살아났다 — 규칙 덩이를 통째로 갈 때는 안에 무엇이 들었는지 먼저 센다. */
body.ta .roll-aside{display:none}

/* 2026-08-20 — screen 9 `/carryover`: v0 reference alignment.
   Keep the existing form controls and JS ids, but make the page read as a
   completed workflow timeline instead of three heavy input panels. */
body.ta.roll-dedicated .wrap{max-width:1120px;margin-left:0;padding-top:24px}
body.ta.roll-dedicated .libtop{margin-bottom:22px}
body.ta.roll-dedicated .libtop h1::after{
  content:'대상 문서 · 전기 자료 · 반영';font-size:15px;font-weight:400;
  color:var(--ink2);margin-left:14px}
body.ta.tie-dedicated .libtop h1::after{content:'대상 문서 · 공시본 대사 · 결과'}
body.ta.sepcon-dedicated .libtop h1::after{content:'별도 문서 · 연결 문서 · 대사 결과'}
body.ta.roll-dedicated .roll-mainflow{max-width:760px;overflow:visible}
body.ta.tie-dedicated .roll-mainflow,
body.ta.sepcon-dedicated .roll-mainflow{max-width:860px}
body.ta.roll-dedicated .roll-mainflow>.card.step{
  overflow:visible;padding:0 0 24px 42px;display:block;min-height:0}
body.ta.roll-dedicated .roll-mainflow>.card.step::before{
  left:14px;top:32px;bottom:-2px;background:#d6dde5}
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepno{
  position:absolute;left:0;top:0;width:30px;height:30px;flex-basis:30px;
  font-size:13px;font-weight:800;background:var(--acc);color:#fff;border:0}
body.ta.roll-dedicated .roll-mainflow>.card.step.done>.stepno{
  background:var(--ok);color:transparent;border:0;position:absolute}
/* 숫자를 지우고 체크를 그린다 — v0 와 같은 손짓 */
body.ta.roll-dedicated .roll-mainflow>.card.step.done>.stepno::after{
  content:'';position:absolute;left:10px;top:7px;width:6px;height:12px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
body.ta.roll-dedicated .roll-mainflow>.card.step.current>.stepno{
  background:var(--acc);color:#fff;border:0}
body.ta.roll-dedicated .roll-mainflow>.card.step:not(.current):not(.done)>.stepno{
  background:#fff;color:var(--ink2);border:1px solid #d6dde5}
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepbody{padding-top:1px}
body.ta.roll-dedicated .stephead{display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;margin-bottom:10px}
body.ta.roll-dedicated .stephead .lbl{display:block;font-size:17px;
  font-weight:800;color:var(--ink);margin:0 0 4px}
body.ta.roll-dedicated .stephead .muted{display:block;font-size:13px;
  line-height:1.45;color:var(--ink2)}
body.ta.roll-dedicated .stepstatus{font-size:11px;font-weight:700;
  color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);
  border-radius:12px;padding:2px 8px;white-space:nowrap}
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepbody>.synadd,
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepbody>.roll-from,
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepbody>.dropzone,
body.ta.roll-dedicated .roll-mainflow>.card.step>.stepbody>.pick3{
  background:#fff;border:1px solid #d6dde5;border-radius:8px;
  padding:12px 16px;margin-top:8px;overflow:visible}
/* 끝난 걸음은 **고른 것만** 한 줄로 남긴다(v0). 고치려면 「이 단계 다시 하기」 */
body.ta.roll-dedicated .roll-mainflow>.card.step.done>.stepbody>.synadd,
body.ta.roll-dedicated .roll-mainflow>.card.step.done .carry-next{display:none}
body.ta.roll-dedicated .stepchip{display:flex;align-items:center;gap:8px;
  margin-top:8px;padding:10px 14px;background:#fff;border:1px solid #d6dde5;
  border-radius:8px;font-size:13px;color:var(--ink);min-width:0}
body.ta.roll-dedicated .stepchip b{font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
body.ta.roll-dedicated .stepchip .ic{flex:none;width:15px;height:15px;color:var(--ink3)}
body.ta.roll-dedicated .stepchip.hidden{display:none}
/* 걸음 3 요약 — v0 의 표. **아는 것만 적는다**(새 파일명은 서버가 정한다) */
body.ta.roll-dedicated .rollsum{margin-top:8px;background:#fff;
  border:1px solid #d6dde5;border-radius:8px;padding:4px 16px}
body.ta.roll-dedicated .rollsum dl{display:grid;grid-template-columns:auto 1fr;
  gap:0;margin:0;font-size:13px}
body.ta.roll-dedicated .rollsum dt{padding:10px 0;color:var(--ink2)}
body.ta.roll-dedicated .rollsum dd{padding:10px 0;margin:0;text-align:right;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ta.roll-dedicated .rollsum dt+dd+dt,
body.ta.roll-dedicated .rollsum dt+dd+dt+dd{border-top:1px solid var(--line2)}
body.ta.roll-dedicated .rollsum.hidden{display:none}
body.ta.roll-dedicated .roll-mainflow>.card.step:first-of-type>.stepbody>.synadd{
  display:flex;flex-direction:column;align-items:stretch;gap:6px}
body.ta.roll-dedicated .fieldcap{display:block;flex:none;
  font-size:12px;line-height:1.2;color:var(--ink2);font-weight:700;margin:0}
body.ta.roll-dedicated #doc{min-width:0!important;width:100%;max-width:100%}
body.ta.roll-dedicated #lb-making,
body.ta.roll-dedicated .synadd>label:has(#kind){display:none}
body.ta.tie-dedicated .synadd>label:has(#kind){
  display:inline-flex;align-items:center;gap:6px}
body.ta.tie-dedicated .roll-mainflow>.card.step:first-of-type>.stepbody>.synadd{
  flex-direction:row;align-items:center}
body.ta.tie-dedicated .roll-mainflow>.card.step:first-of-type>.stepbody>.synadd:first-of-type{
  align-items:flex-end}
body.ta.tie-dedicated .roll-mainflow>.card.step:has(+ #res.hidden)::before{
  display:none}
body.ta.sepcon-dedicated .roll-mainflow>.card.step:first-of-type>.stepbody>.synadd{
  flex-direction:row;align-items:center}
body.ta.tie-dedicated .roll-mainflow .tip,
body.ta.sepcon-dedicated .roll-mainflow .tip{font-size:12.5px;line-height:1.55}
body.ta.roll-dedicated .roll-from{
  position:relative;padding:10px 14px 10px 40px!important}
/* 라디오는 **고른 것만** 채운다 — 여태 둘 다 채워져 「둘 다 켜진」 것으로 보였다
   (2026-08-20 신고). 안 고른 것은 빈 동그라미다. */
body.ta.roll-dedicated .roll-from::before{
  content:'';position:absolute;left:17px;top:18px;width:14px;height:14px;
  border-radius:50%;border:2px solid var(--line3);background:#fff;
  box-shadow:none;transition:border-color .12s,background .12s,box-shadow .12s}
body.ta.roll-dedicated .roll-from.on::before{border-color:var(--acc);
  background:var(--acc);box-shadow:inset 0 0 0 3px #fff}
body.ta.roll-dedicated .roll-from{cursor:pointer}
body.ta.roll-dedicated .roll-from.on{border-color:var(--acc)!important;
  box-shadow:0 0 0 1px var(--acc)}
/* 안 고른 쪽의 실행 단추는 흐리게 — 눌러도 되지만 지금 길이 아니다 */
body.ta.roll-dedicated .roll-from:not(.on) .btn{opacity:.55}
body.ta.roll-dedicated .roll-from .rf-h{font-size:14px;font-weight:800;
  margin:0 0 5px;color:var(--ink)}
body.ta.roll-dedicated .roll-from .rf-h span{font-size:12px;color:var(--ink2);
  margin-top:2px}
body.ta.roll-dedicated .roll-from .tip{display:none}
body.ta.roll-dedicated .tipmore{display:none!important}
body.ta.roll-dedicated .roll-from .synadd{background:#fff;border:0;padding:0;
  margin-top:6px}
/* **찾는 칸을 감추지 않는다** — 감춰 두면 「공시본 찾기」를 눌러도 회사·연도를
   적을 데가 없어 아무 일도 안 일어난다(2026-08-20 신고). 한 줄로 세운다. */
body.ta.roll-dedicated .roll-from .synadd{display:flex;align-items:flex-end;
  gap:8px;flex-wrap:wrap;margin-top:8px}
body.ta.roll-dedicated .roll-from .rf-f{display:flex;flex-direction:column;gap:4px;
  font-size:12px;color:var(--ink2);font-weight:500}
body.ta.roll-dedicated .roll-from .rf-f input{height:30px;padding:0 10px;
  border:1px solid var(--inp);border-radius:var(--r);background:#fff;
  font-family:inherit;font-size:13px;color:var(--ink);min-width:170px}
body.ta.roll-dedicated .roll-from .rf-f.rf-yr input{min-width:0;width:92px}
/* ── 조회된 공시본 고르기 (2026-08-20) ───────────────────────────────
   전기 이월은 참조가 **둘**이라 두 벌을 각각 고른다. 서버가 고르던 것이
   맨 위에 미리 켜져 있고, 다르게 하고 싶을 때만 사람이 바꾼다. */
body.ta.roll-dedicated .refpick{margin-top:10px;display:flex;flex-direction:column;
  gap:12px}
body.ta.roll-dedicated .refpick.hidden{display:none}
body.ta.roll-dedicated .rfslot{border:1px solid var(--line);border-radius:var(--r);
  background:var(--sunk);padding:10px 12px}
body.ta.roll-dedicated .rfhead{font-size:12px;font-weight:600;color:var(--ink);
  margin-bottom:8px}
body.ta.roll-dedicated .rfhead .rfwhat{font-weight:400;color:var(--ink2)}
body.ta.roll-dedicated .rfopt{display:flex;align-items:flex-start;gap:9px;
  padding:8px 10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;margin-bottom:6px}
body.ta.roll-dedicated .rfopt:last-child{margin-bottom:0}
body.ta.roll-dedicated .rfopt.on{border-color:var(--acc);
  box-shadow:0 0 0 1px var(--acc)}
body.ta.roll-dedicated .rfopt input{margin:2px 0 0;accent-color:var(--acc);flex:none}
body.ta.roll-dedicated .rfbody{display:flex;flex-direction:column;gap:2px;min-width:0}
body.ta.roll-dedicated .rfname{font-size:12.5px;font-weight:600;color:var(--ink)}
body.ta.roll-dedicated .rfmeta{font-size:11.5px;color:var(--ink2)}
body.ta.roll-dedicated .rfopt .fixed{background:var(--warn-bg);color:var(--warn);
  border:1px solid var(--warn-line);border-radius:3px;padding:0 5px;font-size:11px}
body.ta.roll-dedicated .rfnone{font-size:11.5px;color:var(--ink2);padding:4px 2px}
body.ta.roll-dedicated #go1p{align-self:flex-start;height:32px}
body.ta.roll-dedicated .roll-from .rf-f input:focus{outline:none;
  border-color:var(--acc);box-shadow:0 0 0 3px rgba(49,91,125,.18)}
body.ta.roll-dedicated .roll-from .synadd .btn{height:30px;font-size:12.5px}
body.ta.roll-dedicated .roll-details{margin-top:10px;color:var(--ink2)}
body.ta.roll-dedicated .roll-details summary{display:inline-flex;align-items:center;
  gap:6px;height:26px;padding:0 10px;border:1px solid var(--line);
  border-radius:6px;background:#fff;color:var(--ink);font-size:12px;
  font-weight:600;cursor:pointer}
body.ta.roll-dedicated .roll-details p{margin:8px 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink2)}
body.ta.roll-dedicated .roll-details:not([open])>*:not(summary){display:none!important}
body.ta.roll-dedicated .linkbtn{border:0;background:transparent;color:var(--ink2);
  padding:0;margin:8px 0 0;font:inherit;font-size:12.5px;text-decoration:underline;
  cursor:pointer}
body.ta.roll-dedicated .carry-next{margin-top:10px}
/* 정산표 화면도 같은 손짓 — 걸음 2 는 「다음」을 눌러야 열린다 */
body.ta.roll-worksheet:not(.carry-step2-open) #pn-current .dropzone,
body.ta.roll-worksheet:not(.carry-step2-open) #pn-current .rollbar,
body.ta.roll-worksheet:not(.carry-step2-open) #pn-current .roll-steps,
body.ta.roll-worksheet:not(.carry-step2-open) #pn-current #srcbox,
body.ta.roll-worksheet:not(.carry-step2-open) #pn-current .tip,
body.ta.roll-dedicated:not(.carry-step2-open) #pn-roll .roll-from,
body.ta.roll-dedicated:not(.carry-step2-open) #pn-roll .roll-details,
body.ta.roll-dedicated:not(.carry-step2-open) #pn-roll .reset-step{display:none!important}
body.ta.roll-dedicated:not(.carry-step2-open) #pn-roll{padding-bottom:24px}
body.ta.roll-dedicated:not(.carry-step2-open) #pn-roll::before{bottom:0}
body.ta.roll-dedicated:not(.carry-step3-open) #res .stepbody>*:not(.stephead){display:none!important}
body.ta.roll-dedicated #res .pick3{display:none}
body.ta.roll-dedicated #res>.stepbody>.synadd{
  display:flex;background:#fff;border:1px solid #d6dde5;border-radius:8px;
  padding:14px 16px;margin-top:8px}
body.ta.roll-dedicated #res .tip{font-size:12px;line-height:1.55}
body.ta.roll-dedicated #res .tip:not(#pickhint){display:none}

body.ta .roll-help{padding:18px 20px;color:var(--ink2)}
body.ta .roll-help>b{display:block;color:var(--ink);font-size:17px;margin-bottom:8px}
body.ta .roll-help p{margin:0 0 12px;line-height:1.55}
body.ta .roll-help ul{margin:0;padding-left:18px;line-height:1.7}
body.ta.roll-carryover .roll-help-current,
body.ta.roll-worksheet .roll-help-roll{display:none}
@media (max-width:1100px){
  body.ta .roll-workbench{grid-template-columns:1fr}
  body.ta .roll-aside{position:static}
}

/* 단추 — 다섯 갈래로 줄인다 */
body.ta .btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border:1px solid var(--line);background:var(--sf);border-radius:var(--r);
  font-size:12.5px;color:var(--ink);white-space:nowrap;box-shadow:none}
body.ta .btn .btn-ic{width:14px;height:14px;flex:none}
body.ta .acts-cell .btn .btn-ic{width:13px;height:13px}
body.ta .btn:hover{background:var(--sunk);border-color:var(--inp)}
body.ta .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
body.ta .btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
body.ta .btn.openbtn,body.ta .btn.xbrl{background:var(--acc-bg);border-color:var(--acc-line);
  color:var(--acc2);font-weight:600}
body.ta .btn.openbtn:hover,body.ta .btn.xbrl:hover{background:#dbe2e8}
/* **초록 확인 단추(`okbtn`)는 겉옷이 덮으면 안 된다** (2026-08-11 신고 —
   *"저장하고 다른 부분으로 이동은 기존처럼 초록색 음영으로"*). `body.ta .btn` 은
   클래스 둘+요소 하나라 `style.css` 의 `.btn.okbtn`(클래스 둘)을 이겨 **바탕을 도로
   흰색으로 밝혔다** — 「저장하고 …」·「넣기」·확인창의 예 단추가 죄다 여느 단추가 됐다.
   붉은 `.btn.okbtn.needsave` 는 클래스가 셋이라 원래 이긴다 — 그것은 안 건드린다. */
body.ta .btn.okbtn{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
body.ta .btn.okbtn:hover{background:#3b6250;border-color:#3b6250;color:#fff}
/* **붉은 「안 저장됨」이 초록을 이겨야 한다.** `style.css` 에서는 `.btn.okbtn.needsave`
   (클래스 셋)가 `.btn.okbtn`(둘)을 이겼는데, 위 규칙은 `body.ta` 가 붙어 (0,3,1) 이라
   **거꾸로 초록이 이겼다** — 안 저장된 것이 있는데도 저장 단추가 초록이었다
   (2026-08-11 run_all 실측 `rgb(26,127,55)`). 같은 무게로 다시 얹는다. */
body.ta .btn.okbtn.needsave{background:#c0392b;border-color:#a5301f;color:#fff;font-weight:700}
body.ta .btn.okbtn.needsave:hover{background:#a5301f;border-color:#8c2718;color:#fff}
body.ta .btn.okbtn.needsave .dirtyn{color:#fff}
body.ta .btn.ghost{border-color:transparent;background:none;color:var(--ink2)}
body.ta .btn.ghost:hover{background:var(--sunk);color:var(--ink)}
/* **점검 단추 일곱은 진하게 채운다** (2026-08-13 지시 — *"버튼 색이 잘 안보이니까
   진한색으로 칠해놔"* · *"제출전점검, 최종관문 스키마 검증까지 음영 칠해"*).
   `ghost` 는 이 겉옷에서 **테두리까지 투명**해, 흰 머리띠 위에서는 단추인지
   그냥 글자인지 알 수 없었다. `body.ta .btn`(0,2,1)이 `style.css` 의 `.btn.vfy`(0,2,0)를
   이기므로 여기서 한 번 더 칠해야 한다 — 안 그러면 바탕이 도로 흰색으로 밝아진다
   (`okbtn` 이 똑같이 당했다, 위 주석). 파랑(`primary`)은 「지금 눌러야 하는 것」
   자리라 안 쓴다 — 창 안의 `고른 것 고치기` 가 그 색이다. */
body.ta .btn.vfy{background:var(--navy-mut);border-color:var(--navy-mut);color:#fff;font-weight:600}
body.ta .btn.vfy:hover{background:var(--navy);border-color:var(--navy);color:#fff}
/* **위험한 확인 단추도 겉옷이 덮으면 안 된다** — `body.ta .btn`(0,2,1)이
   `style.css` 의 `.btn.danger`(0,2,0)를 이겨 바탕을 도로 흰색으로 밝힌다
   (`okbtn` 이 당했던 그 자리). 표 도구모음의 어두운 붉은 띠는
   `body.ta.ed .tbar .btn.danger` 가 아래에서 다시 칠하므로 그대로다. */
body.ta .btn.danger{background:#c0392b;border-color:#a5301f;color:#fff;font-weight:700}
body.ta .btn.danger:hover{background:#a5301f;border-color:#8c2718;color:#fff}
body.ta .btn.del{color:var(--bad);border-color:var(--bad-line);background:var(--sf)}
body.ta .btn.del:hover{background:var(--bad-bg)}
/* ── 목록 줄 단추 띠 — **갈래마다 색** (2026-08-13 지시:
   *"초대부터 잠그기까지 글자색이나 음영을 좀 반영해보고"*)

   여덟 중 여섯이 똑같은 흰 단추였다. `style.css` 는 `.btn.dl`(파랑)·`.btn.frz`(호박)에
   색을 주고 있었지만 **겉옷의 `body.ta .btn`(0,2,1)이 그 둘(0,2,0)을 이겨** 도로 흰색으로
   밝혔다 — `okbtn`·`vfy`·`danger` 가 당했던 그 자리다(실측 글자 `rgb(25,32,42)`).
   클래스가 셋인 `.btn.dl.dlfoot`(0,3,0)만 살아남아 풋팅 하나가 초록이었다.

   **바탕을 채우는 것은 「편집 열기」 하나뿐**이다. 여덟을 다 칠하면 무지개가 되어
   정작 「들어가는 길」이 안 보인다 — 나머지는 글자·테두리만 물들이고 음영은 커서를
   올렸을 때만 깔린다. 색은 **뜻이 아니라 무리**로 나눈다(넷을 외울 필요는 없고,
   나란한 둘이 한 색이면 한 갈래라는 것만 눈에 들어오면 된다):

     보라   사람을 부르는 것   — ＋ 초대   (2026-08-13 지시 *"초대는 보라색으로"*)
     파랑   들어가는 길        — 편집 열기
     회색   받아 가는 것       — .dsd ▾ · 엑셀 ▾
     초록   재는 것            — 풋팅 ▾ · 전기대사   (템플릿 주석: *"둘 다 검증이라 같은 자리"*)
     빨강   되돌리기 어려운 것   — 잠그기 · 삭제

   **잠그기도 빨강이다** (2026-08-13 지시 *"잠그기도 빨간색이 어때?"*). 처음엔 호박(주의)을
   주었는데, 이 단추는 누르는 순간 **아무도 못 고치게** 만든다 — 「주의」가 아니라 삭제와
   같은 무게다. 둘이 같은 색이어도 헷갈리지 않는 까닭: 사이에 `.actgap` 한 칸이 비어 있고
   삭제는 줄 맨 오른쪽에 홀로 선다(그 한 칸이 원래 「실수로 눌리지 말라」고 둔 것이다).

   XBRL 목록도 같은 클래스를 쓰므로 함께 물든다 — 두 목록이 달라 보이면 안 된다. */
/* 초대만 **보라**다 — 문서를 다루는 단추들 사이에서 이것 하나만 「사람」을 다룬다.
   색은 이미 있는 딱지 토큰(`--pub`)을 그대로 쓴다(새 색을 만들지 않는다). */
body.ta .acts-cell .btn.invbtn{background:var(--sf);border-color:var(--pub-line);
  color:var(--pub);font-weight:600}
body.ta .acts-cell .btn.invbtn:hover{background:var(--pub-bg)}
body.ta .acts-cell .btn.dl{background:var(--sunk);border-color:var(--inp);color:var(--ink2)}
body.ta .acts-cell .btn.dl:hover{background:var(--muted-bg);color:var(--ink)}
body.ta .acts-cell .btn.dl.dlfoot,body.ta .acts-cell .btn.tiebtn{background:var(--sf);
  border-color:var(--ok-line);color:var(--ok);font-weight:600}
body.ta .acts-cell .btn.dl.dlfoot:hover,body.ta .acts-cell .btn.tiebtn:hover{background:var(--ok-bg)}
/* **글자가 길어져도 자리는 그대로다** (2026-08-13 지시 — *"잠금 풀기로 바뀌면 글자가
   오른쪽으로 나가게 해"*). 「잠그기」(3자)가 「잠금 풀기」(4자+빈칸)로 바뀌면 단추가
   12px 넓어지는데, 단추 띠는 오른쪽 끝을 기준으로 서므로 **그 줄만 앞의 단추가 죄다
   왼쪽으로 밀렸다** — 목록을 훑다 잠긴 줄에서 눈이 걸린다.
   긴 쪽에 맞춰 자리를 잡아 두면 두 글씨가 같은 상자를 쓰고, 늘어나는 만큼은 상자 안
   오른쪽으로만 간다. `flex:none` 은 띠가 좁아질 때 이 단추부터 찌그러지는 것을 막는다. */
body.ta .acts-cell .btn.frz{background:var(--sf);border-color:var(--warn-line);
  color:var(--warn);font-weight:600;min-width:66px;flex:none;justify-content:center}
body.ta .acts-cell .btn.frz:hover{background:var(--warn-bg)}
/* **이미 잠긴 줄은 단추를 채운다** — 「잠금 풀기」라고 적혀 있어도 흰 단추면 잠긴 줄과
   안 잠긴 줄이 같아 보인다. 채워 두면 목록을 훑을 때 잠긴 문서가 먼저 눈에 든다
   (자물쇠 딱지는 상태 칸에 따로 있지만, 손이 가는 곳은 이 단추다). */
body.ta .acts-cell .btn.frz[data-on="1"]{background:var(--warn-bg)}
body.ta .acts-cell .btn.del{background:var(--bad-bg);border-color:var(--bad-line);
  color:var(--bad);font-weight:700}
body.ta .acts-cell .btn.del:hover{background:#f7dada;border-color:#d98f92}
/* **줄에 커서를 올려도 제 색을 지킨다.** 위쪽 `tr:hover .btn{border-color:#b9cdea}`
   (0,5,4)가 이 규칙들(0,4,1)을 이겨, **정작 누르려고 손을 올린 순간** 테두리가 죄다
   같은 파랑으로 돌아갔다. 그 자리에서 색이 사라지면 칠한 뜻이 없다. */
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.invbtn{border-color:var(--pub-line)}
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.dl{border-color:var(--inp)}
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.dl.dlfoot,
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.tiebtn{border-color:var(--ok-line)}
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.frz{border-color:var(--warn-line)}
body.ta table.list.zebra tbody tr:hover .acts-cell .btn.del{border-color:var(--bad-line)}
/* 초대한 사람 알약 — 겉옷 토큰으로 다시 칠한다(줄 배경이 바뀌면 이것도 따라가야 한다) */
body.ta .invwho{background:var(--sunk);border-color:var(--line);color:var(--ink2)}
body.ta .invwho b{color:var(--ink)}
body.ta table.list.zebra tbody tr:hover .invwho{background:var(--sf);border-color:var(--acc-line)}
body.ta .btn.tiny,body.ta .btn.small{height:23px;padding:0 7px;font-size:11.5px}
body.ta .btn.mode{height:27px;border-radius:var(--r) var(--r) 0 0}
body.ta .btn.mode.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
body.ta .ta-ro-btn{opacity:.5;filter:grayscale(.4)}

/* 배지 — 판정색 넷으로 */
body.ta .tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:3px;
  font-size:11px;font-weight:600;line-height:1;border:1px solid var(--line);
  background:var(--sunk);color:var(--ink2)}
body.ta .tag.done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
body.ta .tag.wait,body.ta .tag.sgn,body.ta .tag.dmemo2{background:var(--warn-bg);
  border-color:var(--warn-line);color:var(--warn)}
body.ta .tag.bad,body.ta .tag.brk,body.ta .tag.hold{background:var(--bad-bg);
  border-color:var(--bad-line);color:var(--bad)}
body.ta .tag.lock{background:var(--muted-bg);border-color:var(--line);color:var(--ink2)}
body.ta .tag.pub{background:var(--pub-bg);border-color:var(--pub-line);color:var(--pub)}
body.ta .tag.prog{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc2)}
body.ta .tag.prog.zero{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
body.ta .tag.prog.full{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
/* 점검 신호등 — 세로로 접히지 않게 못 박는다 */
body.ta .lamps{display:inline-flex;gap:3px;white-space:nowrap}
body.ta .lp{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:3px;
  font-size:10.5px;font-style:normal;font-weight:600;border:1px solid transparent;
  white-space:nowrap}
body.ta .lp.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
body.ta .lp.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
body.ta .lp.none{background:var(--sunk);color:var(--ink3);border-color:var(--line)}
body.ta .state-cell{white-space:nowrap}

/* 입력 */
body.ta input[type=text],body.ta input[type=password],body.ta input[type=number],
body.ta input:not([type]),body.ta select{height:28px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--sf);padding:0 8px;font-size:12.5px;color:var(--ink);
  outline:0}
body.ta input:focus,body.ta select:focus{border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-bg)}
body.ta .dropzone{border:1px dashed var(--line);border-radius:var(--r);background:var(--sunk);
  padding:16px;color:var(--ink2)}
body.ta .dropzone:hover,body.ta .dropzone.on{border-color:var(--acc);background:var(--acc-bg)}
body.ta .dropzone .ico{font-size:20px;opacity:.55}
body.ta .dropzone b{font-size:13px;color:var(--ink)}

/* 메인(업무 고르기) 카드 — 그룹 안에서 높이를 맞추고 그림자를 없앤다 */
body.ta .hm-glab{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink3);
  margin-bottom:7px}
body.ta .pick2{gap:10px;margin:0 0 16px;align-items:stretch}
body.ta .pick2card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;box-shadow:none;display:flex;flex-direction:column;gap:5px;min-height:104px}
body.ta .pick2card:hover{border-color:var(--acc-line);background:var(--sunk);box-shadow:none;
  transform:none}
body.ta .pick2card .ico{font-size:17px;margin:0 0 2px}
body.ta .pick2card b{font-size:14px;margin:0}
body.ta .pick2card p{font-size:12.3px;color:var(--ink2);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 그림 글자(이모지) 자리는 겉옷이 선 아이콘으로 바꿔 끼운다 */
body.ta .pick2card .ico,body.ta .dropzone .ico{display:flex;align-items:center;
  color:var(--acc);font-size:0}
body.ta .dropzone .ico{color:var(--ink3);justify-content:center}
body.ta .pick2card .ico svg{width:18px;height:18px}
body.ta .dropzone .ico svg{width:20px;height:20px}
body.ta .pick2card .cnt{margin-top:auto;background:none;color:var(--ink3);padding:0;
  font-family:var(--mono);font-size:11.5px}
body.ta .hm-share{margin-top:6px;border-top:1px solid var(--line);border-radius:0;
  background:none;padding:14px 0 0}
body.ta .share{font-family:var(--mono);font-size:12.5px;background:var(--sunk);
  border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px}

/* 걸음·셈 표시 */
body.ta .tallies>*,body.ta .chip{border-radius:13px;border:1px solid var(--line);
  background:var(--sf);color:var(--ink2);font-size:12px;padding:3px 9px}
body.ta .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
body.ta .rollbar .rb-track{background:var(--line2);border-radius:3px}
body.ta .rollbar .rb-fill{background:var(--acc)}

/* ── 편집기(.ed) ───────────────────────────────────────────── */
body.ta.ed{padding-top:var(--gbar);padding-left:var(--rail);height:100vh}
body.ta.ed .top{background:var(--sf);border-bottom:1px solid var(--line);padding:6px 12px;gap:8px}
body.ta.ed .top .ttl{display:flex;align-items:center;gap:10px;flex:0 999 auto;min-width:160px;overflow:hidden}          /* 문서명과 파일명을 같은 줄에 둔다 */
/* **머리띠의 단추는 단추로 보여야 한다** (2026-08-13 신고 *"버튼 색이 잘 안보이니까"*).
   점검 일곱은 `vfy` 로 진하게 채웠고, 남은 것들(검토 완료·원본으로·초대)은
   `ghost` 라 **테두리도 바탕도 없어** 글자만 떠 있었다.
   여기만 테두리와 바탕을 되살린다 — 목록·창 안의 `ghost` 는 그대로 둔다(줄마다
   테두리가 서면 그것대로 시끄럽다). 글자도 `--ink2`(회색)에서 `--ink` 로 올린다. */
body.ta.ed .top .acts .btn.ghost{border-color:var(--line);background:var(--sf);color:var(--ink)}
body.ta.ed .top .acts .btn.ghost:hover{background:var(--sunk);border-color:var(--inp)}
body.ta.ed .docbar{background:var(--sunk);border-bottom:1px solid var(--line2);
  justify-content:flex-start}
body.ta.ed .docbar .whereis{flex:0 1 auto;min-width:0}
body.ta.ed .docbar .frozen{margin-left:0;margin-right:auto;color:var(--ink2);
  font-weight:600;display:inline-flex;align-items:center;gap:7px}
body.ta.ed .docbar .frozen:not(:empty)::before{content:"잠김";height:18px;
  padding:0 6px;border:1px solid var(--line2);border-radius:999px;
  background:var(--sf);color:var(--acc2);font-size:10.5px;font-weight:700;
  line-height:16px}
body.ta.ed .docbar:has(.frozen:empty):has(.whereis:empty){display:none}
body.ta.ed .side{background:var(--sf);border-right:1px solid var(--line);min-width:0}
body.ta.ed .sidehead{border-bottom:1px solid var(--line2);padding:8px 10px;min-width:0;box-sizing:border-box}
body.ta.ed .sidehead input{width:100%;min-width:0;box-sizing:border-box}
body.ta.ed .secs li{height:27px;font-size:12.4px;border-left:2px solid transparent;
  padding:0 10px;gap:7px}
body.ta.ed .secs li:hover{background:var(--sunk)}
body.ta.ed .secs li.on{background:var(--acc-bg);border-left-color:var(--acc);
  color:var(--ink);font-weight:600}
body.ta.ed .secbar{background:var(--sf);border-bottom:1px solid var(--line);padding:6px 12px}
/* §8-3 — 표 편집 툴바는 **검은 띠를 지킨다.**
   겉옷이 흰색으로 덮었더니 원본의 흰 글자(`.tbar #tpos{color:#fff}`)가 그대로 남아
   **글자가 안 보였다**(실측). 원본 색을 그대로 두고 여백만 맞춘다. */
body.ta.ed .tbar{padding:6px 12px}
body.ta.ed .tbar .btn{background:#293138;border-color:#3b444d;color:#fff}
body.ta.ed .tbar .btn:hover{background:#3b444d;border-color:#4a545e}
body.ta.ed .tbar .btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
body.ta.ed .tbar .btn.danger{background:#5b2320;border-color:#7a2f2b;color:#ffd9d5}
/* 「검토 완료」가 눌려 있는 상태 — 이 테마는 나중에 실려 style.css 의 규칙을 덮으므로
   여기에도 둔다(안 두면 어두운 단추가 그대로라 눌러 둔 티가 안 난다) */
body.ta.ed #btnDone.on{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);
  font-weight:700}
body.ta.ed .tbar .btn.danger:hover{background:#7a2f2b}
/* ── **칸 음영·글자색 색판** (2026-09-09 지시) ────────────────────────────
   자리·크기는 `style.css` 에 있고 여기는 **색만** 적는다.

   **색판은 밝은 면이다.** 도구 띠는 어두운데(`#293138` 계열) 색판까지 어두우면
   옅은 회색 음영들(`#F2F2F2`·`#DEDEDE`)이 서로 안 갈린다 — 그 색들은 흰 종이 위에서
   쓰는 색이라 흰 면에 놓아야 실제로 어떻게 보일지 눈에 들어온다.

   **`body.ta.ed .tbar .btn` 을 되돌려야 한다** — 그 규칙이 띠 안의 모든 단추를
   어둡게 칠하는데(자릿수 (0,4,1)) 색판은 밝은 면 위라 그대로 두면 「색 없음」 단추가
   면과 안 갈린다. 같은 자릿수로는 못 이기므로 `.cpal` 을 한 칸 더 얹어 (0,5,1)로 둔다. */
body.ta.ed .tbar .cpal{background:var(--sf);border:1px solid var(--line);
                       border-radius:var(--r-lg);box-shadow:var(--sh-3)}
body.ta.ed .tbar .cpal-h{color:var(--ink2)}
body.ta.ed .tbar .cpal-f{border-top:1px solid var(--line2)}
body.ta.ed .tbar .cpal .cs{border:1px solid var(--line3)}
body.ta.ed .tbar .cpal .cs:hover{outline:2px solid var(--acc);outline-offset:1px}
body.ta.ed .tbar .cpal .btn{background:var(--sf);border-color:var(--line3);color:var(--ink)}
body.ta.ed .tbar .cpal .btn:hover{background:var(--muted-bg);border-color:var(--line3)}
body.ta.ed .tbar .cpal-more{color:var(--ink)}
body.ta.ed .tbar .cpal-more input[type=color]{border:1px solid var(--line3);
                                              border-radius:var(--r-sm);background:var(--sf)}
/* 단추에 달린 색 표시 — 어두운 띠 위에 서므로 테두리를 옅은 잉크로 준다 */
body.ta.ed .tbar .cchip{border:1px solid var(--navy-mut)}
body.ta.ed .tbar .cchip-f{background:var(--sf)}
body.ta.ed .pane{background:var(--bg)}
body.ta.ed .stbtn{border:1px solid var(--line);background:var(--sf);border-radius:var(--r);
  height:23px;font-size:11.5px;color:var(--ink2)}
body.ta.ed .stbtn.on{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc2);
  font-weight:700}
body.ta.ed .ff{border:1px solid var(--line);background:var(--sf);border-radius:11px;height:21px;
  font-size:11px;color:var(--ink2)}
body.ta.ed .ff.on{background:var(--ink);border-color:var(--ink);color:#fff}
body.ta.ed .savestat{font-size:11.5px;color:var(--ink3)}

/* ── XBRL(.xb) ───────────────────────────────────────────────
   여기가 색이 가장 많이 남는 자리다 — 단추마다 제 색을 들고 있어
   (`#negbtn` 분홍 · `#unitbtn` 노랑 · `#textbtn` 파랑 · `.pick.on` 노랑…)
   한 화면에 예닐곱 색이 뜬다. **판정이 아닌 색은 전부 걷는다.** */
body.ta.xb{background:var(--bg)}
body.ta.xb.xgrid{padding-top:var(--gbar);padding-left:var(--rail);height:100vh}
body.ta.xb .xtop{background:var(--sf);border-bottom:1px solid var(--line);padding:7px 12px;gap:9px}
body.ta.xb .xtop .xname{font-size:13.5px;font-weight:700}
body.ta.xb .xbar{background:var(--sf);border-bottom:1px solid var(--line)}
body.ta.xb .xnav{background:var(--sf);border-right:1px solid var(--line)}
body.ta.xb .xhint{background:var(--info-bg);border:0;border-bottom:1px solid var(--info-line);
  color:var(--info);font-size:12.5px;padding:7px 12px}
body.ta.xb .xhint.xbadhint{background:var(--bad-bg);border-bottom-color:var(--bad-line);
  color:var(--bad)}
body.ta.xb .xhint .muted{color:inherit;opacity:.85}

/* 【뒤집힌 결정 2026-08-15】 **단추 빛깔을 도로 살린다**
   (지시 — *"전체태깅, 되돌리기도 버튼에 똑같이 테두리 해주고, 이주석태깅부터
   엑셀 추출까지 각자 다른 옅은 음영 반영해줘"*).

   여기서 `#negbtn`·`#textbtn`·`#unitbtn`·`#blockbtn`·`#savebtn` 의 바탕과 테두리를
   **한 벌(`--sf`)로 덮고 있었다** — 위 머리글에 적힌 「판정이 아닌 색은 전부 걷는다」
   가 그것이다. 그런데 이 띠는 **단추가 열이 넘는 자리**라, 한 벌로 두니 글자만 읽고
   자리를 외워야 했다(게다가 `ghost` 인 「전체 태깅」·「되돌리기」는 겉옷의
   `body.ta .btn.ghost{border-color:transparent}` 에 걸려 **테두리마저 없었다**).

   이제 빛깔은 **`xbrl.css` 한 곳에서만** 정한다 — 여기서 덮지 않는다
   ([[feedback_css_two_places_hold_width]] — 두 군데에 적어 두면 하나만 고칠 때 안 움직인다).
   **상태를 말하는 색은 그대로 여기 남는다**(`#savebtn.hot`·`#discardbtn`) —
   그것은 「지금 어떤가」를 나르는 색이라 가만히 있을 때의 빛깔 위를 덮어야 한다. */
body.ta.xb #discardbtn{color:var(--bad);border-color:var(--bad-line)}
body.ta.xb #discardbtn:hover{background:var(--bad-bg);color:var(--bad)}
body.ta.xb #savebtn.hot{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
body.ta.xb #savebtn.hot:hover{background:var(--acc2);border-color:var(--acc2)}
body.ta.xb .xbar .pick{background:var(--sf);border:1px solid var(--line);color:var(--ink2);
  border-radius:var(--r);font-size:12.5px}
body.ta.xb .xbar .pick.on,body.ta.xb .xbar .pick.on.neg{background:var(--acc-bg);
  border-color:var(--acc-line);color:var(--acc2);font-weight:600}
body.ta.xb .xbar .keys{font-size:11.5px;color:var(--ink3)}
/* **자판 딱지는 mono 를 쓰지 않는다** (2026-09-06 신고 — *"Shift+방향키·끌기의
   글자체가 맑은 고딕이 아니네"*). `--mono` 는 한글 글꼴이 없어(SF Mono·JetBrains
   Mono·Consolas 모두) `Shift+방향키·끌기` 의 한글만 브라우저 대체 글꼴로 떨어졌다 —
   한 줄 안에서 글자 모양이 갈렸다. 이 딱지는 자판만 적는 자리가 아니라
   **자판과 우리말이 한 덩이**로 서는 자리라, 기본 글자체(`--font`)를 그대로 물려받는다.
   딱지의 생김새는 바탕·테두리·크기가 이미 말하므로 글꼴까지 갈 필요가 없다.
   실측(2026-09-06 `getComputedStyle`) — 이 화면에서 기본 글자체가 아닌 자리는
   이 딱지 열 개뿐이었다. */
body.ta.xb .xbar .keys b{background:var(--sunk);border:1px solid var(--line);color:var(--ink2);
  font-size:11px}
/* **Negated 안내의 빛깔은 `xbrl.css` 가 정한다 — 여기서 덮지 않는다**
   (2026-09-02 지시: *"이게 살짝 노란색 음영인데, negate의 붉은색 음영으로 해줘"*).

   여기서 경고 팔레트(`--warn-bg` 옅은 노랑)로 덮고 있었다. 그러나 이 안내가 말하는
   것은 경고가 아니라 **negate** 이고, negate 는 격자에서 **붉은 음영**(`td.hasneg`
   `#f9c6bc`)으로 선다. 색이 갈리면 「저 붉은 칸이 이 얘기」가 눈으로 안 이어진다 —
   띠에는 노란 계열이 따로 있어(중복 태깅) 뜻이 겹치기까지 했다.
   `xbrl.css` 에 그 붉은색의 **한 단계 옅은 짝**(`#fdeae6`·`#eb9c8c`·`#7d2a1d`)이
   이미 적혀 있으므로, 덮지만 않으면 제 색으로 선다.
   업무 뜻이 있는 색은 팔레트에 맞추지 않는다 — 위 단추 빛깔과 같은 결이다.
   모양(둥근 모서리·글자 크기)만 여기서 맞춘다. */
body.ta.xb .xbar .barneg{border-radius:var(--r);font-size:12px}
body.ta.xb .xnav .tag,body.ta.xb .xnote .tag{font-weight:600}

/* ── 로그인·알림(.lg) ──────────────────────────────────────── */
body.ta.lg{background:var(--bg);display:grid;place-items:center;min-height:100vh}
body.ta.lg .loginbox{width:340px;background:var(--sf);border:1px solid var(--line);
  border-radius:8px;padding:26px 24px;box-shadow:0 1px 3px rgba(20,30,45,.06)}
body.ta.lg h1{font-size:15px;margin:0 0 6px}
body.ta.lg .err-box{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);
  border-radius:var(--r);padding:8px 10px;font-size:12.3px}

/* ── 좁은 화면 ──────────────────────────────────────────────
   **숨기지 않는다. 접는다.** (2026-08-18 신고 *"서버에 안보여"*)

   여태 1100px 아래에서는 레일을 통째로 `display:none` 했다. 그러면 접기·펴기 단추만
   없어지는 게 아니라 **업무를 옮길 길이 통째로 사라진다** — 노트북 창을 조금만
   줄여도(실측 1102px 은 보이고 1082px 은 사라졌다) 왼쪽이 통째로 없어져
   「만들었는데 안 보인다」가 된다.

   대신 **아이콘만 남긴다**(52px). 접힌 모양은 `ta-slim` 이 이미 아는 것이라
   선택자를 `:is(.ta-slim,.ta-narrow)` 로 넓혀 **한 벌만** 둔다 — 여기서 다시
   적으면 두 곳이 갈린다 → [[feedback_css_two_places_hold_width]]
   `ta-narrow` 는 `theme-a.js` 가 창 폭을 보고 붙인다(사람이 「펴기」로 정해 두었으면
   안 붙인다 — 좁아도 펴 보고 싶을 수 있고, 그것은 사람 뜻이다). */
@media (max-width:1100px){
  body.ta.lib .wrap{max-width:calc(100vw - var(--rail) - 20px)}
}

/* 「다음 행동」 띠는 걷었다 (2026-08-18) — 결과가 없는데 「완료」라고 적었고,
   남는 단추 둘은 왼쪽 레일에 이미 있었다. 규칙도 함께 지웠다. */

/* ── 화면 헤더 (§13-2) — 업무명은 한 번만 ─────────────────────
   글로벌 바는 앱 껍데기(제품명·검색·알림·사용자)만 말하고,
   「지금 무슨 업무를 어느 문서에 하고 있나」는 여기서만 말한다. */
body.ta .ta-head{background:var(--sf);border-bottom:1px solid var(--line);
  padding:8px 14px;display:flex;flex-direction:column;gap:2px;flex:none}
/* 머리줄은 **한 줄**이다 — 업무명 · 딱지 · 문서 이름이 나란히 선다(2026-08-12 지시).
   `min-width:0` 이 없으면 긴 문서 이름이 상자를 밀어 화면이 옆으로 구른다
   (flex 자식의 최소 폭은 제 내용이라, 줄이라고 말해 주어야 줄어든다). */
body.ta .ta-head .l1{display:flex;align-items:center;gap:8px;min-width:0}
body.ta .ta-head h1{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;
  flex:none;white-space:nowrap}
body.ta .ta-hb{display:inline-flex;align-items:center;height:18px;padding:0 6px;
  border-radius:3px;font-size:11px;font-weight:600;background:var(--acc-bg);
  border:1px solid var(--acc-line);color:var(--acc2);flex:none;white-space:nowrap}
/* 좁아질 때 줄어드는 자리는 **여기 하나뿐**. 잘리면 `title` 로 온전히 읽는다. */
body.ta .ta-head .l2{font-size:12px;color:var(--ink2);
  flex:1 1 auto;min-width:0;padding-left:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ta .ta-find{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  font-size:12px;color:var(--ink3)}
body.ta .ta-find kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);
  border-radius:3px;padding:0 3px;background:var(--sf);white-space:nowrap}

/* ── 좁은 화면 (지시서 §14 — 가로 스크롤 없음) ────────────────
   실측(뷰포트 504px)에서 넘치던 자리 둘:
   ① `min-width:360px` 를 못 박은 문서 고르기 칸 → 화면 폭을 넘겼다
   ② 문서 목록·XBRL 목록의 넓은 표(1,261px·1,013px)
   표는 줄여 봐야 못 읽는다 — **표만 제 상자 안에서 옆으로 구르게** 한다.
   페이지가 통째로 밀리면 위쪽 띠·레일까지 어긋난다. */
/* **넓은 표는 폭에 상관없이 제 상자 안에서 구른다** (2026-08-14 신고 — 그림으로
   *"화면의 크기가 바뀌면 오른쪽이 저렇게 벗어나버리는데"*).
   이 규칙이 여태 `max-width:1100px` 안에 갇혀 있었다. 그런데 문서 목록 표는
   **1,600~1,800px** 이라, **1100~1800px 사이**에서는 아무도 안 잡아 줘서 페이지가
   통째로 옆으로 굴렀다 — 그러면 왼쪽 세로 띠(`position:fixed`)가 제자리에 남아
   **본문 왼쪽을 덮는다**(제목이 「업편집기」로 잘려 보인 까닭).
   상자가 구르면 띠·머리줄은 그대로 있고 표만 움직인다.
   내리닫이 차림표(`.dlmenu`)는 `body` 에 붙으므로 상자에 안 잘린다. */
body.ta .card,body.ta .panel{overflow-x:auto}

@media (max-width:1100px){
  body.ta select,body.ta input:not([type=checkbox]):not([type=radio]){max-width:100%}
  body.ta table.list{min-width:760px}
}

/* 로그인 사용자 표시 — 메인 화면 오른쪽 구분자 없이, 회사명과 이름을 뚜렷하게 분리한다. */
body.ta .ta-user-name{margin-left:18px;display:inline-flex;align-items:center;gap:24px;white-space:nowrap;font-size:13px;font-weight:800;color:var(--ink)}
body.ta .ta-company,body.ta .ta-person{display:inline-flex;align-items:center;line-height:1;height:26px}
body.ta .ta-company{color:var(--ink);font-weight:800}
body.ta .ta-person{color:var(--acc2);font-weight:900}
body.ta.ed .top .ttl b{flex:none;white-space:nowrap;overflow:visible;text-overflow:clip;font-weight:800;color:var(--ink)}
body.ta.ed .top .ttl .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink2)}


/* ── 웹사이트 바로가기 (2026-08-18) ──────────────────────────────────────
   레일 발치의 제 목록. **지우기(×)는 자리를 미리 잡아 둔다** — 마우스를 올릴 때만
   생기게 하면 줄이 흔들린다 → [[feedback_row_transient_indicator]] */
/* **＋ 는 제목 바로 옆에 붙인다** (2026-08-18 지시 — *"오른쪽 서랍 단추와 간섭돼"*).
   오른쪽 끝으로 밀면 레일 테두리의 접기 단추(`.ta-edge`)와 손이 겹친다. */
body.ta .ta-lnkhd{display:flex;align-items:center;justify-content:flex-start;gap:4px}
body.ta .ta-lnkplus{border:0;background:none;color:var(--ink3);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px;border-radius:4px}
body.ta .ta-lnkplus:hover{background:var(--sunk);color:var(--ink)}
body.ta .ta-lnk{display:flex;align-items:center}
body.ta .ta-lnk .ta-i{flex:1;min-width:0}
body.ta .ta-lnk .ta-i>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ta .ta-lnk form{flex:none;margin:0}
body.ta .ta-lnkdel{border:0;background:none;color:transparent;cursor:pointer;
  font-size:14px;line-height:1;width:20px;padding:0;border-radius:4px}
body.ta .ta-lnk:hover .ta-lnkdel{color:var(--ink3)}
body.ta .ta-lnkdel:hover{background:var(--sunk);color:#c0392b}
body.ta .ta-lnkform{display:flex;flex-direction:column;gap:4px;margin:4px 6px 2px}
body.ta .ta-lnkform input{font:inherit;font-size:12px;padding:4px 6px;
  border:1px solid var(--line);border-radius:5px;min-width:0}
body.ta .ta-lnkform button{font:inherit;font-size:12px;padding:4px 6px;cursor:pointer;
  border:1px solid var(--line);border-radius:5px;background:var(--sunk)}
body.ta .ta-lnkform[hidden]{display:none}
/* 접힌 레일(52px)에서는 **아이콘만** — 이름·지우기·넣기 칸은 들어갈 자리가 없다 */
body.ta:is(.ta-slim,.ta-narrow) .ta-lnkhd>span,
body.ta:is(.ta-slim,.ta-narrow) .ta-lnkplus,
body.ta:is(.ta-slim,.ta-narrow) .ta-lnkdel,
body.ta:is(.ta-slim,.ta-narrow) .ta-lnkedit,
body.ta:is(.ta-slim,.ta-narrow) .ta-lnkform{display:none}


/* ── 무리마다 구분선 (2026-08-18 지시 — *"각 업무 별로 구분선 넣어줘"*) ────────
   묶음 제목(`.ta-grp`) 위에 선을 그어 **업무 · DSD 기초 작업 · DART 에서 찾기 ·
   웹사이트 바로가기**가 눈으로 갈린다. 맨 위(업무)에는 안 긋는다 — 위에 가를 것이 없다.
   **접힌 레일(52px)에서는 안 긋는다** — 거기서는 `.ta-grp` 자체가 이미 1px 선이라
   덧그으면 두 줄이 된다. */
body.ta:not(.ta-slim):not(.ta-narrow) .ta-rail .ta-grp{
  border-top:1px solid var(--line2);margin-top:6px;padding-top:11px}
body.ta:not(.ta-slim):not(.ta-narrow) .ta-rail .ta-grp:first-of-type{
  border-top:0;margin-top:0;padding-top:0}

/* 줄 안 단추가 **접기 단추 뒤로 숨지 않게** 오른쪽을 비워 둔다 (2026-08-18 신고 —
   *"서랍단추(레일)과 겹쳐서 x가 안보여"*). 레일 테두리의 `.ta-edge` 는 세로 한가운데
   붙박이라, 하필 그 자리에 온 줄의 단추를 덮는다. */
body.ta .ta-lnk{padding-right:14px}   /* 접기 단추와 살짝만 거리를 둔다 */
body.ta:is(.ta-slim,.ta-narrow) .ta-lnk{padding-right:0;justify-content:center}
body.ta:is(.ta-slim,.ta-narrow) .ta-lnk .ta-i{flex:0 0 100%}
/* **늘 보인다** — 마우스를 올려야 나타나면 있는 줄도 모른다
   → [[feedback_feature_needs_entry_point]] */
body.ta .ta-lnkdel,body.ta .ta-lnkedit{color:var(--ink3)}
body.ta .ta-lnkedit{border:0;background:none;cursor:pointer;font-size:11px;
  line-height:1;width:20px;padding:0;border-radius:4px}
body.ta .ta-lnkedit:hover{background:var(--sunk);color:var(--acc2)}


/* ══════════════════════════════════════════════════════════════════
   §5 공통 부품 (Base Components) — 2026-08-19 v0 이식
   여기부터는 **한 자리에서** 단추·칸·표·딱지·상태를 정한다.
   화면마다 제 색·제 모서리를 다시 짓지 않는다 → `DESIGN_SYSTEM.md`
   ══════════════════════════════════════════════════════════════════ */

/* ── 화면 머리줄 (Page Header) ────────────────────────────────────
   제목 한 번 · 짧은 설명 한 줄 · 오른쪽에 이 화면의 핵심 action.
   **위 띠가 이미 화면 이름을 들고 있다** — 여기 제목은 그보다 크고 자세한 것. */
/* ── v0 Compact Header (§13·§80) ───────────────────────────────────
   **한 줄**이다 — 제목 19px · 회색 셈 · 오른쪽에 이 화면의 핵심 action 둘.
   설명 문단은 제목 `title` 로 옮겼고(§52), 다른 업무로 가는 단추(`btn.go`)와
   휴지통·설명서·로그아웃은 **레일과 위 띠가 이미 들고 있어** 걷었다(§63). */
body.ta.lib .libtop{position:sticky;top:0;z-index:20;background:var(--bg);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:var(--sp-4) 0 var(--sp-4);margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--line)}
body.ta.lib .libtop h1{font-size:19px;font-weight:600;letter-spacing:-.025em;
  color:var(--ink);margin:0}
/* 제목 옆 셈 — v0 「프로젝트 5 · 문서 12」. 딱지가 아니라 **맨 글자**다.

   **2026-09-11 에 `-1px` → `+1px` 로 돌렸다** (신고: *"제목열에서 오른쪽 글자의
   위치가 세로 중간 정렬이 아니야. 이 화면 뿐만 아니라 다른 모든 화면도 같아"*).

   2026-08-28 에 「아래로 처져 보인다」는 신고로 1px 올렸는데, **그 방향이 과했다.**
   4배로 찍어 **잉크가 앉은 자리**를 화면 넷에서 재니(`getBoundingClientRect` 로는
   못 잰다 — 상자는 이미 맞아 있다) 곁말이 제목보다 **2.88px 위로** 떠 있었다.

   | 제목            | `-1px`(옛) | `0` | **`+1px`** | `+2px` |
   |-----------------|-----------|-----|-----------|--------|
   | DSD Com**p**are | −2.88     | −1.88 | −0.88   | +0.12  |
   | XBRL Works**p**ace | −2.62  | −1.62 | −0.62   | +0.38  |
   | KAM Finder      | −0.75     | +0.25 | +1.25   | +2.25  |
   | Note Finder     | −0.75     | +0.25 | +1.25   | +2.25  |

   **한 눈금으로 완벽히는 못 맞춘다** — 제목에 내림꼬리(`p`)가 있으면 그 잉크가
   아래로 늘어 중심이 2px 내려간다. `+1px` 이 **모든 화면을 1.25px 안쪽**에 넣는
   자리다(옛 `-1px` 은 최대 2.88px).

   **바닥선 맞추기(`align-self:baseline`)는 재 보고 접었다** — +2.75~+4.50 으로 더
   나빴다. 폰트 메트릭 기준이라 한글이 상자를 꽉 채우며 내려앉는다(2026-08-28 주석의
   「상자를 맞추면 한글이 내려앉는다」와 같은 까닭). */
body.ta .ptmeta{margin-right:auto;font-size:12.5px;color:var(--ink2);
  position:relative;top:1px;
  font-variant-numeric:tabular-nums}
body.ta .libacts{margin-left:auto;display:flex;align-items:center;gap:8px}
body.ta .libacts .btn.on{background:var(--acc2);border-color:var(--acc2)}
/* 「다른 업무로 가는 단추」·발치 길 — 레일이 같은 것을 들고 있다(§63).
   지우지 않고 감춘다 — 되돌리기가 이 덩이를 지우는 것으로 끝난다. */
body.ta .libtop .btn.go,body.ta .libgo,body.ta .crumb{display:none}
/* 표 바로 위 이름표 — 표 머리글이 이미 「문서 · 프로젝트」라고 적는다 */
body.ta .listtop-bare{display:none}
body.ta .sub{color:var(--ink2);font-size:13px;line-height:1.625;margin:0 0 var(--sp-5);
  max-width:72ch;word-break:keep-all;overflow-wrap:break-word}
/* 화면 안 구역 제목 — 작은 대문자 + 실선 (v0 「핵심 업무」 줄) */
body.ta .seclab{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-7) 0 var(--sp-3)}
body.ta .seclab>span{flex:none;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink2)}
body.ta .seclab::after{content:'';flex:1 1 auto;height:1px;background:var(--line)}

/* **위 띠가 이미 들고 있는 길은 머리줄에서 걷는다** (§63 — 같은 뜻의 action 은
   한 자리에). 화면 열다섯이 저마다 「사용 설명서 · 로그아웃」을 달고 있었다.
   지우지 않고 **감춘다** — 되돌리기가 이 한 덩이를 지우는 것으로 끝난다. */
body.ta .libtop a[href="/logout"],
body.ta .libtop a[href="/help"],
body.ta .libtop a[href="/trash"],
body.ta .libtop a[href="/admin"]{display:none}

/* ── 단추 ────────────────────────────────────────────────────────
   기본 28px 은 **그대로 둔다** — 이 화면들은 촘촘한 업무도구다(§33·§51).
   v0 의 36px 은 「화면의 핵심 action」 자리에만 쓴다(아래 `.libtop .btn`). */
body.ta .btn{border-radius:var(--r);box-shadow:var(--sh-1);
  font-weight:500;transition:background .12s,border-color .12s,color .12s}
body.ta .btn:hover{background:var(--muted-bg);border-color:var(--line3)}
body.ta .btn:active{transform:translateY(1px)}
body.ta .btn:focus-visible{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(49,91,125,.35)}
body.ta .btn.primary{box-shadow:none}
body.ta .btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
body.ta .btn.ghost{box-shadow:none}
/* 화면의 핵심 action — 머리줄에 선 것만 크게(v0 h-9 · radius 8) */
body.ta .libtop .btn{height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-lg)}
/* 아이콘만 있는 단추 — **반드시 `title` 을 단다**(§21) */
body.ta .ibtn{display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;background:none;border-radius:var(--r);color:var(--ink2);cursor:pointer}
body.ta .ibtn:hover{background:var(--muted-bg);color:var(--ink)}

/* ── 줄 끝 단추 접기 (§33 Pattern A) ───────────────────────────────
   `theme-a.js` 가 접히는 것을 같은 칸 안의 `.actmenu` 로 옮긴다.
   **여기서는 그 판의 모양만 정한다.** */
body.ta .actbar{position:relative}
body.ta .actbar .actmore{flex:0 0 26px;width:26px;min-width:26px;padding:0;
  font-size:15px;line-height:1;color:var(--ink2);letter-spacing:.06em}
body.ta .actbar.open .actmore{background:var(--muted-bg);border-color:var(--line3);
  color:var(--ink)}
body.ta .actmenu{display:none}
body.ta .actbar.open .actmenu{display:flex;flex-direction:column;align-items:stretch;
  position:absolute;top:calc(100% + 4px);right:0;z-index:70;min-width:150px;
  padding:4px;gap:2px;background:var(--sf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3)}
/* 판 안에서는 **줄 목록**이다 — 단추 모양을 버리고 왼쪽 맞춤 한 줄씩 */
body.ta .actbar.open .actmenu>*{margin:0}
body.ta .actbar.open .actmenu .btn{display:flex;width:100%;min-width:0;height:30px;
  justify-content:flex-start;padding:0 8px;border:0;background:none;box-shadow:none;
  border-radius:var(--r-sm);font-size:12.5px;color:var(--ink);flex:0 0 auto}
body.ta .actbar.open .actmenu .btn:hover{background:var(--muted-bg)}
body.ta .actbar.open .actmenu .btn.del{color:var(--bad)}
body.ta .actbar.open .actmenu .btn.del:hover{background:var(--bad-bg)}
body.ta .actbar.open .actmenu .btn.xoff{color:var(--ink3)}
body.ta .actbar.open .actmenu form.inline{margin:0;display:block;width:100%}

/* ── 목록 표는 1440 안에 든다 (§37·§50) ─────────────────────────────
   실측(2026-08-19) — 칸 일곱이 1,525px 을 먹어 **「작업」 칸이 통째로 화면 밖**
   (@1579)에 있었다. 표가 가로로 굴러 닿기는 하나, 거기 단추가 있는 줄을 모른다.

   두 자리를 줄인다:
     ① 파일명 칸 `min-width:400 max-width:700 padding-right:64`(style.css)
        → 280~380 · 오른쪽 여백 12. 이름은 이미 `…` 로 잘리게 돼 있다.
     ② 「프로젝트 멤버」·「작업」 칸은 **속에 든 것 만큼만**(`width:1%`).
   업무 자료 칸(올린 시각·수정자·수정 일시·상태)은 **한 자도 안 건드린다**(§64). */
body.ta table.list td.nmcell{min-width:280px;max-width:380px;padding-right:12px}
body.ta table.list td.nmcell .nmtx{max-width:250px}
body.ta table.list th.invth,body.ta table.list td.inv-cell,
body.ta table.list th.acth,body.ta table.list td.acts-cell{width:1%;white-space:nowrap}

/* 2026-08-19 — DSD 목록은 올린 시각 칸을 덜어 냈으므로 파일명을 다시 다 보인다.
   2026-09-10 — **`min-width` 를 440 에서 240 으로 낮췄다** (지시 — *"배율이 다른
   화면으로 옮겨도 기본 화면 처럼 나오게"*).

   이 한 줄이 표가 좁아지는 것을 통째로 막고 있었다. 표는 `table-layout:auto` 라
   자리가 모자라면 각 칸이 제 min-content 까지 줄어야 하는데, 파일명 칸만 440px 을
   버티니 표 전체가 1,732px 에서 한 치도 안 줄고 옆으로 넘쳤다(실측 1920 화면
   100% 에서 96px · 125% 480px · 1366 노트북 650px). 게다가 넘치는 폭이 다른 칸으로
   퍼져 「작업」 칸이 532px, 「프로젝트 멤버」가 380px 로 벌어져 있었다 —
   그 둘은 `width:1%` 로 **속에 든 것 만큼만** 쓰기로 해 둔 칸인데도 그랬다.

   240 은 파일 이름이 두세 마디는 보이는 폭이다. 더 긴 이름은 `white-space:normal`
   이라 여러 줄로 접히고, 온전한 이름은 칸 딸림표에 그대로 있다. */
body.ta.lib table.list.folders{width:100%;min-width:100%;table-layout:auto}
body.ta.lib table.list.folders td.nmcell{
  min-width:240px;max-width:none;white-space:normal;padding-left:24px;padding-right:12px
}
body.ta.lib table.list.folders td.nmcell .nmbox{align-items:center}
body.ta.lib table.list.folders td.nmcell .nmtx{
  max-width:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35
}
body.ta.lib .docsearch{margin:0 0 10px}
body.ta.lib .docsearch input{
  width:100%;height:34px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:var(--sf);padding:0 12px;
  font:inherit;color:var(--ink)
}
body.ta.lib .docsearch input:focus{outline:2px solid rgba(49,104,142,.18);border-color:var(--acc)}

/* DSD 문서 목록 — 폴더/칼럼/파일 행의 층위를 다시 분리한다. */
body.ta.lib table.list.folders tr.foldrow td{
  background:var(--sunk);border-top-color:var(--line);border-bottom-color:var(--line);
  box-shadow:inset 3px 0 0 var(--acc)
}
body.ta.lib table.list.folders tr.colhead th{
  background:var(--sunk);border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line);
  color:var(--ink3);font-weight:600
}
body.ta.lib table.list.folders .fcnt{
  margin-left:8px;padding:0;border:0;background:transparent;color:#7b8794;
  font-size:11px;font-weight:600
}
body.ta.lib table.list.folders tr.docrow:hover>td{
  background:var(--acc-bg);border-bottom-color:var(--acc-line)
}
body.ta.lib table.list.folders tr.docrow:hover>td:first-child{
  box-shadow:inset 3px 0 0 var(--acc)
}
body.ta.lib table.list.folders tr.docrow:hover .btn{border-color:var(--acc-line)}
body.ta.lib table.list.folders th:nth-child(2),
body.ta.lib table.list.folders td:nth-child(2){min-width:58px;padding-left:6px;padding-right:6px}
body.ta.lib table.list.folders th:nth-child(3),
body.ta.lib table.list.folders td:nth-child(3){min-width:108px;padding-left:6px;padding-right:6px}
body.ta.lib table.list.folders th:nth-child(4),
body.ta.lib table.list.folders td:nth-child(4){min-width:110px;padding-left:6px;padding-right:6px}
/* **못 박은 열 폭을 낮췄다** (2026-09-10 지시 — *"배율이 다른 화면으로 옮겨도
   기본 화면 처럼 나오게"*).

   여기 적힌 520·360 은 **줄 끝 단추 여섯이 나란히 서 있을 때** 맞춘 값이었다.
   이제 그 단추들은 `⋯` 안으로 접히므로(`library.html` 의 `data-keep`) 실제로
   필요한 폭은 **192px** 이다(편집열기 62 · ⋯ 26 · 띄우개 14 · 받는자리 42 ·
   삭제 34 · 사이 24). 멤버 칸도 초대 단추와 이름 몇을 담으면 되니 180px 이면 된다.

   **표 셀에는 `max-width` 가 안 듣는다** — `display:table-cell` 이라 그렇다.
   그래서 칸을 좁히는 자는 `min-width` 하나뿐이고, 이 값이 곧 표가 요구하는 폭이 된다.
   못 박은 값이 남아 있으면 배율을 올려도 표는 한 치도 안 줄고 그대로 넘친다
   (그것이 이번 신고의 절반이었다 · 나머지 절반은 파일명 칸의 `min-width:440px`). */
body.ta.lib table.list.folders th.invth,
body.ta.lib table.list.folders td.inv-cell{
  width:auto;min-width:180px;padding-left:6px;padding-right:14px
}
body.ta.lib table.list.folders th.invth{min-width:180px;padding-left:6px;padding-right:14px}
body.ta.lib table.list.folders th.acth,
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell){
  width:200px;min-width:200px;padding-left:6px;padding-right:6px
}
body.ta.lib table.list.folders th.acth{text-align:left}
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell){text-align:left}
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .actbar{
  display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;width:auto
}
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .btn{
  height:22px;padding-left:6px;padding-right:6px;font-size:11px
}
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .btn.del{
  width:34px;min-width:34px;padding-left:0;padding-right:0;justify-content:center
}
/* **띄우개는 늘지 않는다** (2026-08-19 신고 — 「삭제」 앞이 크게 비었다).
   `flex:1 1 auto` 라 남는 자리를 다 먹어 실측 **143px** 이 되고, 그만큼 「삭제」가
   줄 오른쪽 끝으로 밀렸다. `style.css` 도 같은 자리에서 한 번 겪고 못 박아 뒀는데
   (거기 주석 참조) 겉옷이 다시 늘려 놓았다. 못 박는다 — 삭제를 떨어뜨려 두는 데는
   14px 이면 넉넉하다. */
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .actgap{flex:0 0 14px!important;min-width:0!important}
/* 받는 동안의 막대 자리 — **비워 두되 넉넉히 두지는 않는다**(막대가 56px).
   자리를 아예 없애면 받을 때 줄이 넓어져 옆 단추가 흔들린다. */
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .dlslot{flex:0 0 42px!important}
body.ta.lib table.list.folders td.acts-cell:not(.inv-cell) .actbar>form.inline{flex:none!important;margin-left:6px!important;margin-right:0!important}
body.ta.lib table.list.folders td.inv-cell .invslot{min-width:86px}
body.ta.lib table.list.folders td.inv-cell .invbtn{flex:none}
body.ta.lib table.list.folders td.inv-cell .invwho{
  max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap
}

/* XBRL Workspace 목록은 작업 흐름 자체가 핵심이라 `⋯` 로 접지 않는다.
   준비 → 태깅 → 최종대사 → 구조검증 → 엑셀 추출 → 잠그기 → 초기화 → 삭제를
   DSD 목록처럼 한 줄에서 바로 고르게 한다. */
/* **「작업」 칸은 오른쪽 붙박이로 되돌린다** (2026-08-27 — 초대 칸을 되살리며 실측).
   이 표는 열이 일곱이라 **어떻게 줄여도 창 안에 다 안 들어간다**(초대 칸을 216px 로
   접고도 1,706px · 창 1,682px). 붙박이가 아니면 넘친 쪽 끝에 있는 **단추 여덟이 통째로
   화면 밖**이라, 목록에서 「준비」도 「① 태깅」도 못 누른다(캡처로 확인).
   협업 목록이 진작 이렇게 하고 있다 — 표는 굴러도 **할 일 단추는 늘 보인다.**

   2026-08-24 에 이 붙박이를 껐던 까닭은 「대사 상태와 작업 사이에 빈 칸」이었는데,
   **그 까닭은 붙박이가 아니었다** — `td.state{display:flex}` 라 칸이 제 열을 안 채운
   것이었고(아래 §대사 상태 주석), 그 자리는 `display:table-cell` 로 이미 고쳤다.
   고친 뒤에도 빈 칸이 없는 것은 재서 확인했다(상태 칸 오른쪽 끝과 작업 칸 왼쪽 끝의
   틈 0px). → [[feedback_measure_the_screen_path]] */
body.ta.lib #xdoctbl th.acth,
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell){
  width:400px;min-width:400px;padding-left:4px;padding-right:4px
}
/* **단추 띠는 「작업」 제목 아래에서 시작한다** (2026-09-09 지시 — *"제목에 작업과
   그 밑에 딱지의 열이 안맞는다. 밑에 버튼 들을 다시 기존대로 옮기고 작업과 열
   맞춰"*).

   여기 `flex-start` 는 2026-08-28 부터 있었는데, **아래쪽에 `flex-end` 를 적은
   블록이 하나 더 있어**(2026-08-25 지시 *"작업 딲지 오른쪽으로 옮기고"*) 나중에
   실리는 그것이 이기고 있었다. 칸 폭(`--xacts` 440px)은 단추가 실제로 쓰는 386px
   보다 **50px 넓어**, 오른쪽에 붙이면 그 남는 자리가 통째로 왼쪽에 몰린다.
   그래서 제목 「작업」은 1113px 에서 시작하는데 첫 단추 「준비」는 1163px 에서 서서,
   창 폭을 어떻게 바꿔도 **늘 50px 어긋났다**(1366·1600·1920 실측 모두 50px).

   같은 속성을 두 자리에서 잡으면 한쪽만 고쳤을 때 안 움직인다
   → [[feedback_css_two_places_hold_width]]. 그래서 아래 블록은 걷고 **여기 한
   자리로** 모았다. 고친 뒤 제목 칸과 단추 칸은 왼쪽 모서리 1113px·안쪽 여백 4px
   로 같고, 첫 단추가 1117px 에서 선다(어긋남 0). */
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .actbar{
  display:flex;align-items:center;justify-content:flex-start;gap:2px;
  flex-wrap:nowrap;white-space:nowrap;width:100%
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .actmore,
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .actmenu{
  display:none!important
}
/* **글자 크기는 DSD 목록에 맞춘다** (2026-08-28 지시 — *"DSD의 버튼 글자 크기
   기준으로 맞춰"*). 재 보니 DSD·사업보고서 목록은 11px 인데 여기만 10.5px 이었다.
   키우면 칸이 넓어지므로 아래 `--xacts` 를 함께 올려야 한다 — 두 값은 한 몸이다
   → [[feedback_css_two_places_hold_width]] */
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .btn{
  height:22px;padding-left:4px;padding-right:4px;font-size:11px
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .btn.frz{
  flex:0 0 50px;min-width:50px
}
/* **초기화·삭제는 칸 오른쪽 끝에 붙는다** (2026-08-25 지시 *"초기화 삭제는 끝으로"*
   · 2026-09-09 *"처음처럼 해"*). 되돌릴 수 없는 둘이라 걸음 다섯과 떼어 놓는다.

   미는 자는 **초기화에 걸린 `margin-left:auto`** 다 — 띠 전체를 `flex-end` 로
   밀면 앞쪽 단추까지 딸려 가 「작업」 제목과 어긋난다(그것이 2026-09-09 신고였다).
   앞은 왼쪽에 붙인 채로 뒤 둘만 보내려면 여기 `auto` 라야 한다.
   `xbrl.css` 에도 같은 `auto` 가 있었으나 나중에 실리는 이 값(2px)이 이겨
   죽어 있었다 → [[feedback_css_two_places_hold_width]] */
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .btn.rstbtn{
  flex:0 0 38px;min-width:38px;margin-left:auto
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .btn.del{
  width:34px;min-width:34px;padding-left:0;padding-right:0;justify-content:center
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .actgap{
  flex:0 0 4px!important;width:4px!important;min-width:0!important
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .dlslot{
  flex:0 0 4px!important;width:4px!important
}
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell) .actbar>form.inline{
  flex:none!important;margin-left:2px!important;margin-right:0!important
}
body.ta.lib #xdoctbl{
  width:100%;min-width:100%;table-layout:auto
}
/* **「마지막 수정자·수정 일시」 두 칸은 되살린다** (2026-08-27 지시 —
   *"마지막 수정일시, 수정자 이것도 dsd와 같이 넣어줘"*).
   두 칸은 지금까지 **글자는 그려 놓고 겉옷이 덮고 있었다** — 화면에서 안 보이는
   것과 값이 없는 것은 다른데, 여기서는 둘이 같아 보였다. 서버(`app.xbrl_list`)는
   진작 `it.last` 를 채워 왔고 템플릿에도 칸이 있으므로 **덮개만 걷으면 된다.**
   → [[feedback_css_rule_wrong_ancestor]]

   폭은 **DSD 문서 목록과 같은 값**을 쓴다(`xbrl.css` §xdoctbl — 88px · 118px).
   `width:1%` 는 「가능한 좁게」라는 말이고, 실제 폭은 하한이 정한다 — 이 표는
   이름 칸이 `width:1%;min-width:440px` 로 같은 짜임이라 결이 어긋나지 않는다.

   **「프로젝트 멤버」도 같이 살린다** (2026-08-27 이어진 지시 — *"같이 해야지"*).
   그 칸 안에 초대 단추가 있어, 덮여 있는 동안 **XBRL 일감은 목록에서 남을 부를 수
   없었다.** 단추가 없는 것이 아니라 덮개가 가린 것이라, 화면만 보고서는 「이 업무에는
   초대가 없다」로 읽힌다. 덮개는 이제 한 줄도 남지 않는다.

   이 칸 폭은 **엔진이 이미 정해 두었다**(`xbrl.css` — `width:1%;white-space:nowrap`
   · 이름은 `.invwho{max-width:120px}` 로 잘린다). 협업 목록처럼 하한(360px)을 주지
   않는다: 이 줄은 단추가 여덟이라 그만큼 자리가 좁고, `width:1%` 는 「속에 든 것
   만큼만」이라는 말이라 사람이 없는 줄에서는 자리를 거의 안 먹는다. */
body.ta.lib #xdoctbl th.whocell,
body.ta.lib #xdoctbl td.whocell{
  display:table-cell;width:1%;min-width:88px;
  padding-left:6px;padding-right:6px;
  text-align:left;vertical-align:middle;white-space:nowrap
}
body.ta.lib #xdoctbl th.whencell,
body.ta.lib #xdoctbl td.whencell{
  display:table-cell;width:1%;min-width:118px;
  padding-left:6px;padding-right:6px;
  text-align:left;vertical-align:middle;white-space:nowrap
}
/* **초대 칸은 이 표에서 다시 좁힌다** (2026-08-27 — 덮개를 걷고 나서 실측).
   덮개를 걷자마자 표가 **1,869px** 이 되어 창(1,682px)을 187px 넘었고, 넘친 쪽
   끝에 있던 **「작업」 단추 여덟이 통째로 화면 밖으로 나갔다**(캡처로 확인).
   까닭은 이 표도 `table.list.folders` 라서, 협업 목록에 준 두 규칙을 함께 받은
   것이다 — 칸 하한 `min-width:360px` 과 이름 묶음 `max-width:none`.

   협업 목록은 단추가 셋이라 그 자리가 나오지만 **이 줄은 단추가 여덟이라 안 나온다.**
   엔진은 진작 `#xdoctbl .invwho{max-width:120px}` 로 좁혀 두었는데(`xbrl.css` §②)
   겉옷이 그 위에 `none` 을 덮어 무력했다. 엔진이 정한 자로 되돌린다:
   칸은 **속에 든 것 만큼만**(`width:1%`), 이름 묶음은 120px 에서 `…` 로 접히고
   전체 이름은 칸의 딸림표에 그대로 있다.
   → [[feedback_css_rule_wrong_ancestor]] · [[feedback_row_transient_indicator]] */
body.ta.lib #xdoctbl th.invth,
body.ta.lib #xdoctbl td.inv-cell{
  width:1%;min-width:0;white-space:nowrap;padding-left:6px;padding-right:14px
}
body.ta.lib #xdoctbl td.inv-cell .invwho{
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* **초대 칸도 작업 칸 옆에 붙박이로 세운다** (2026-08-27 — 붙박이를 켜고 실측).
   작업 칸만 붙박이로 두었더니 그 칸이 **초대 칸을 통째로 덮었다** — 되살린 초대
   단추가 화면에서 다시 사라져, 고치기 전과 같은 자리로 돌아왔다(캡처로 확인).

   이 표는 열이 일곱이라 어느 한 칸을 좁혀서는 창 안에 다 못 넣는다(카드 1,416px ↔
   필요 1,552px). 그래서 **늘 보여야 하는 둘**(사람 부르기 · 할 일 단추)을 오른쪽에
   나란히 못 박고, 구르는 것은 파일명·수정자·일시·상태 쪽이 맡는다.

   `right` 는 작업 칸 폭 그대로다 — 그 칸은 단추 여덟이 정하는 **제 자연 폭 424px**
   에서 안 움직인다(창 1,700 · 1,400 둘 다 실측 같은 값). 겹치지 않는 것은
   초대 칸 오른쪽 끝과 작업 칸 왼쪽 끝을 재어 확인한다.
   그림자는 **작업 칸에만** 둔다 — 붙박이 둘에 다 주면 줄 한가운데 선이 두 줄 선다. */
/* **폭을 잡는 자리는 하나다** — 작업 칸 폭과 초대 칸이 물러설 거리는 같은 값이라야
   한다. 두 곳에 숫자를 따로 적으면 한쪽만 고치는 날 **두 칸이 겹친다**(실측으로 그랬다:
   `min-width:424px` 을 줬더니 칸 안쪽이 424 이고 좌우 여백 4+4 가 더 붙어 432px 이
   되어, `right:424px` 인 초대 칸이 8px 만큼 작업 칸 밑으로 들어갔다).
   그래서 ① 값을 변수 하나에 두고 ② 여백을 폭 **안쪽**으로 세게 한다(`border-box`).
   → [[feedback_css_two_places_hold_width]] */
/* 424 → 440 (2026-08-28). 단추 글자를 11px 로 키운 만큼 자연 폭이 늘었다.
   **424 로 두면 초대 칸이 작업 칸 밑으로 들어간다** — 실측 10.5px 일 때도 이미
   4px 겹쳐 있었고 11px 이면 14px 겹친다. 440 에서 겹침 0(1600px 창에서 실측). */
body.ta.lib #xdoctbl{--xacts:440px}
body.ta.lib #xdoctbl th.acth,
body.ta.lib #xdoctbl td.acts-cell:not(.inv-cell){
  box-sizing:border-box;width:var(--xacts);min-width:var(--xacts)
}
/* **바탕은 여기서 정하지 않는다** (2026-08-28 신고 — *"제목에 음영이 있어"* ·
   *"커서 올리면 프로젝트 멤버 열만 파란색으로 안 나와"*).
   여기 `background-color:inherit` 를 적으면 **`#xdoctbl` 이 붙은 만큼 세어** 줄에
   손 올린 색(`tr:hover`)과 제목 바탕을 둘 다 이긴다 — 실측으로 이 칸만 제목이
   `#f4f5f5`(다른 제목은 흰색)이고, 커서를 올려도 혼자 흰색으로 남았다.
   바탕은 옆 「작업」 칸과 **같은 자리**(아래 `.card>table.list td.acts-cell`)에
   맡긴다. 이 칸은 `acts-cell` 이기도 하므로 그 규칙을 그대로 받는다. */
body.ta.lib .card>table.list#xdoctbl th.invth,
body.ta.lib .card>table.list#xdoctbl td.inv-cell{
  position:sticky;right:var(--xacts);z-index:5;box-shadow:none
}
/* **이름 칸을 DSD 목록과 같은 폭으로 못 박는다** (2026-08-25 지시 —
   *"dsd 화면하고 폭은 맞춰야지"*). 실측하면 DSD 목록의 이름 칸은 **476px**
   인데 이 표는 **1,049px** 이었다. 까닭은 이 표에서만 열 셋(마지막 수정자·
   수정 일시·프로젝트 멤버)을 `display:none` 으로 걷었기 때문이다 — 그 자리
   약 570px 이 갈 곳을 잃고 첫 칸으로 몰렸고, 그래서 「사본 만들기」부터가
   오른쪽 끝으로 밀렸다.
   **`width:auto` 는 「남는 자리를 내가 받겠다」는 말**이라 상한을 줘도
   소용없다(`max-width:620px` 이 있는데도 1,049px 이었다). `1%`(가능한
   좁게)로 두고 **하한으로 폭을 정한다** — 이 표에서 실측으로 맞춘 값이다. */
body.ta.lib #xdoctbl td.nmcell{
  width:1%;min-width:440px;padding-right:12px
}
/* (단추 띠를 어느 쪽에 붙이나 — 위 `#xdoctbl … .actbar` 한 자리에서 정한다.
   2026-09-09 에 여기 있던 `justify-content:flex-end` 를 걷었다. 까닭은 그 규칙 옆
   주석에 적었다.) */
body.ta.lib #xdoctbl td.nmcell .nmtx{
  flex:0 1 auto;max-width:none
}
body.ta.lib #xdoctbl td.nmcell .nmacts{
  display:none!important
}
body.ta.lib #xdoctbl th.copyh,
body.ta.lib #xdoctbl td.copycell{
  width:78px;min-width:78px;max-width:78px;
  padding-left:6px;padding-right:6px;
  text-align:left;vertical-align:middle;white-space:nowrap
}
body.ta.lib #xdoctbl td.copycell .cpyslot{
  display:inline-flex;align-items:center;justify-content:flex-start;
  width:100%;min-width:0;flex:0 0 auto
}
body.ta.lib #xdoctbl td.copycell .cpybtn,
body.ta.lib #xdoctbl td.copycell .cpyoff{
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;min-width:74px;padding-left:6px;padding-right:6px;
  font-size:11px;line-height:1;white-space:nowrap
}
/* **표 셀로 둔다.** `display:grid` 를 주면 그 칸이 표의 열 흐름에서 빠져,
   브라우저가 익명 셀로 감싸며 열 계산이 어긋난다 — 「대사 상태」와 「작업」 사이에
   아무것도 없는 회색 칸이 섰다(2026-08-24 신고, 실측 119px).
   세로로 쌓는 것은 grid 없이도 된다: 자식을 블록 수준으로 두면 한 줄씩 선다. */
/* **딱지는 한 줄에 선다** (2026-08-25 지시 — *"대사상태의 딱지도 한행에
   나오게 하고, 대사상태와 작업 사이에 빈공간이 있는 것 같은데"*).
   빈 자리의 까닭은 **`display:flex` 였다** — 아래 §14 의
   `body.ta .state{display:flex}`(빈·오류 상자용)와 이름이 겹쳐 이 칸이
   flex 가 되었고, **flex 인 `td` 는 제 열을 꽉 채우지 않는다.** 열은
   235px 인데 칸이 124px 만 그려져 그 차이 111px 이 「대사 상태」와 「작업」
   사이에 빈 자리로 남았다(실측). 표 칸으로 되돌리면 열을 꽉 채운다.
   → [[feedback_dsd_editor_css_ns]] 「뜻이 다르면 이름을 겹치면 안 된다」 */
body.ta.lib #xdoctbl th.stateh,
body.ta.lib #xdoctbl td.state{
  display:table-cell;
  width:1%;min-width:212px;text-align:left;vertical-align:middle;
  padding-left:8px;padding-right:8px;font-size:0;line-height:1.25;
  white-space:nowrap
}
body.ta.lib #xdoctbl th.stateh{font-size:10.5px}
body.ta.lib #xdoctbl td.state .muted,
body.ta.lib #xdoctbl td.state .tag{
  display:inline-flex;width:fit-content;align-items:center;
  justify-content:flex-start;
  height:22px;box-sizing:border-box;font-size:10.5px;line-height:1;
  white-space:nowrap;vertical-align:middle
}
/* 둘 이상이면 **옆으로** 벌린다 — 여태 `margin-top` 이라 세로로 쌓였다 */
body.ta.lib #xdoctbl td.state>*+*{margin-top:0;margin-left:4px}
/* **긴 안내 글은 접는다.** 「최종본 올리면 대사됩니다」는 108px 칸을 넘어
   「작업」 단추를 덮는다(빈 열을 없애기 전에는 그 자리로 흘러 가려져 있었다).
   태그는 짧으므로 한 줄로 둔다. */
body.ta.lib #xdoctbl td.state .muted{
  /* **글자를 상자 가운데 놓는다** (2026-08-28 신고 — *"대사상태에 최종본을 올리면
     대사됩니다. 이것도 가운데가 아니라 약간 위에"*). `min-height` 로 상자를 22px 로
     늘려 놓고 `display:block` 이면 줄(14.2px)이 **위에서부터 쌓여** 글자만 8px 위에
     남는다 — 상자는 가운데인데 글자가 아니었다.
     `line-height` 를 22px 로 못 박으면 **두 줄일 때 간격이 벌어지므로** 줄 높이는
     그대로 두고 flex 로 가운데에 놓는다. */
  display:flex;align-items:center;
  white-space:normal;height:auto;min-height:22px;line-height:1.35
}
body.ta.lib #xdoctbl td.state .tag{
  padding:0 7px;border-radius:6px
}

/* ── 「작업」 칸은 **오른쪽에 붙박이**로 둔다 ────────────────────────
   업무 자료 칸을 더 깎기보다(§64·§78 밀도가 v0 닮음보다 앞선다) 표를 굴리되
   **할 일 단추는 늘 보이게** 한다. 구르는 통은 `.card`(overflow-x:auto)다.
   바탕은 줄에서 물려받는다 — 얼룩·손 올린 줄 색이 붙박이 칸에서 끊기면
   줄이 두 도막으로 보인다 → [[feedback_sticky_cell_paints_1px_short]] */
body.ta.lib .card>table.list td.acts-cell,
body.ta.lib .card>table.list th.acth{position:sticky;right:0;z-index:6;
  background-color:inherit;
  box-shadow:-1px 0 0 var(--line),-10px 0 12px -10px rgba(20,30,45,.16)}
body.ta.lib .card>table.list td.inv-cell,
body.ta.lib .card>table.list th.invth{position:static;right:auto;z-index:auto;box-shadow:none}

/* (2026-08-24 에 여기서 XBRL 목록의 붙박이를 한 번 더 껐다 — 「대사 상태와 작업
   사이가 빈다」는 까닭이었다. 그 빈 칸은 붙박이가 아니라 `td.state{display:flex}`
   때문이었고 그 자리는 고쳤으므로, 2026-08-27 에 이 규칙을 걷고 협업 목록과 같은
   붙박이로 되돌렸다. 위 §「작업」 칸 주석 참조.) */
body.ta.lib .card>table.list thead th.acth{z-index:8}
body.ta.lib table.list.zebra tbody tr{background-color:var(--zeb1)}
body.ta.lib table.list.zebra tbody tr:nth-child(even){background-color:var(--zeb2)}

/* 네이티브 칸(체크·라디오·진행·범위)의 강조색도 **한 자리에서** 온다.
   안 걸면 윈도 크롬이 제 파랑(#0075ff)을 써서 화면에 남의 파랑이 섞인다. */
body.ta{accent-color:var(--acc)}
/* 관리자 두 판이 나란히 설 때 — **키를 맞추지 않는다**(2026-08-19 캡처:
   「회사 추가」 칸이 옆 판 높이만큼 늘어나 가운데가 크게 비었다). */
body.ta.lib .admin-grid{align-items:start}
/* 권한 칸 이름은 **줄이 넘어가도 된다** — `white-space:nowrap` 이라 이름이
   길어지자 옆 칸을 덮었다(2026-08-19 캡처). 덮는 것보다 두 줄이 낫다. */
body.ta .work-checks label,body.ta .work-chipgrid label{white-space:normal;
  align-items:flex-start;line-height:1.35}
body.ta .work-checks,body.ta .work-chipgrid{align-items:start}

/* ══════════════════════════════════════════════════════════════════
   XBRL 구조 검증 — Level C (§22·§43)
   위는 v0 (Summary → Filter → Toolbar), 아래 이슈 표·셈·갈래·이동은 이 시스템.

   ① **갈래 스물한 개가 카드였다** — 세 줄 290px 을 먹어 정작 볼 이슈 표가
      화면 밖에서 시작했다(§87 카드 회귀 금지 · §97). 여느 거르개와 같은
      **알약 한 줄**로 낮춘다. 셈·점·이름은 한 글자도 안 바뀐다.
   ② **0건 갈래는 흐리게**(§48) — 눌러도 볼 것이 없다는 말이 색으로 먼저 온다.
   ③ **「항목」 칸이 한 글자씩 끊겨 내려갔다**(실측 — `ifrs-full_EquityMember`
      가 열두 줄). 줄 높이가 부풀어 화면이 262,000px 이 됐다(§59).
      제 폭을 주고 **아무 데서나 접히게** 한다.
   ══════════════════════════════════════════════════════════════════ */
body.ta .autiles{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-4) 0 var(--sp-5)}
body.ta .autile{display:inline-flex;align-items:center;gap:7px;height:28px;
  box-sizing:border-box;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sf);cursor:pointer;
  font-size:12.5px;color:var(--ink);transition:background .12s,border-color .12s}
body.ta .autile:hover{background:var(--muted-bg);border-color:var(--line3)}
body.ta .autile .n{margin:0;font-size:12.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
body.ta .autile .t{margin:0;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;line-height:1;color:var(--ink2)}
body.ta .autile.on{background:var(--acc);border-color:var(--acc);color:#fff}
body.ta .autile.on .t{color:#fff}
body.ta .autile.zero{opacity:.45}
/* 0건 갈래는 「더보기」 뒤로 — `theme-a.js` 가 단추를 만든다 */
body.ta .autiles .autile.au-hid{display:none}
body.ta .autiles.au-open .autile.au-hid{display:inline-flex}
body.ta .autile.aumore{opacity:1;border-style:dashed;color:var(--ink2)}
body.ta .autile.aumore .n{font-weight:600;color:var(--ink3)}
body.ta .autile.zero:hover{opacity:.7}
/* 등급 셋 — 여기도 알약. 뜻이 있는 색(붉음·주황·노랑)은 그대로 둔다(§54) */
body.ta .augrades{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:var(--sp-4) 0 0}
body.ta .augrade{height:28px;padding:0 11px;border-radius:99px;font-size:12.5px}
/* 이슈 표 — 「항목」 칸(넷째)에 제 폭을 준다 */
body.ta .autbl th:nth-child(4),body.ta .autbl td:nth-child(4){min-width:186px;
  overflow-wrap:anywhere;word-break:normal}
body.ta .autbl td{vertical-align:top}

/* ── 도구 띠 무리짓기 (§18·§41·§44) ────────────────────────────────
   **무리는 이미 마크업에 있다**(`.bgrp` 다섯) — 여태 눈에만 안 보였다.
   얇은 금 하나로 가른다. 단추 차례·이름·손짓은 한 글자도 안 바뀐다.
     ① 자동으로 잇기 ② 저장·되돌리기 ③ 한 칸 손보기 ④ 보기 ⑤ 내보내기 */
body.ta.xb .bgrp+.bgrp{margin-left:10px;padding-left:10px;
  border-left:1px solid var(--line)}
/* DSD 편집기 — 검증 무리(어두운 `vfy` 일곱) 다음부터는 **검토 무리**다 */
body.ta.ed .top .acts .btn.vfy+:not(.vfy){margin-left:10px;padding-left:10px;
  border-left:1px solid var(--line)}

/* 걸음 번호끼리 **세로선으로 잇는다**(v0 Step Rail) — 카드 셋이 따로 뜬 것이
   아니라 한 흐름이라는 것이 모양으로 읽힌다. 마지막 걸음에는 안 긋는다. */
body.ta .card.step{position:relative}
body.ta .card.step:not(:last-of-type)::before{content:'';position:absolute;
  left:calc(var(--sp-6) + 13px);top:calc(var(--sp-5) + 28px);bottom:-1px;width:1px;
  background:var(--line);pointer-events:none}

/* ── Tools 걸음 설명 접기 (§24·§92) — `theme-a.js` 가 「자세히」를 만든다 */
body.ta .card.step .tip-fold{display:none;margin-top:6px}
body.ta .card.step .tip-fold.open{display:block}
body.ta .tipmore{display:inline-flex;align-items:center;height:22px;padding:0 7px;
  margin-top:2px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sf);color:var(--ink2);font-family:inherit;font-size:11.5px;
  cursor:pointer;transition:background .12s,color .12s}
body.ta .tipmore:hover{background:var(--muted-bg);color:var(--ink)}

/* ── 글자체는 **요소로 준다** (2026-08-28) ────────────────────────
   `<button>`·`<input>`·`<select>`·`<textarea>` 는 글자체를 물려받지 않는다.
   안 주면 브라우저 기본(Arial)이 되고, 한글은 대체 글꼴로 그려져 **글자 지표가
   달라 세로 가운데가 3px 내려앉는다**(실측 353곳 · 화면 열여덟).

   2026-08-27 에 입력칸만 고치며 「목록을 늘리는 것이 고침」이라 적었는데, 그 방식
   이라 **`button` 이 통째로 빠졌다** — 새 칸이 생길 때마다 또 빠진다. 목록이 아니라
   요소로 준다. 아래 입력칸 규칙은 테두리·크기를 맡고, 글자체는 여기 한 자리에 있다. */
body.ta button,body.ta input,body.ta select,body.ta textarea{font-family:inherit}

/* ── 입력칸 ────────────────────────────────────────────────────── */
body.ta input:not([type]),body.ta input[type=text],body.ta input[type=search],
body.ta input[type=password],body.ta input[type=email],body.ta input[type=number],
body.ta input[type=date],body.ta input[type=time],body.ta input[type=month],
body.ta input[type=tel],body.ta input[type=url],
body.ta select,body.ta textarea{
  border:1px solid var(--inp);border-radius:var(--r);background:var(--sf);
  color:var(--ink);font-family:inherit;font-size:13px}
body.ta input[type=date],body.ta input[type=time],body.ta input[type=month]{
  font-variant-numeric:tabular-nums}
body.ta input:not([type]):focus,body.ta input[type=text]:focus,
body.ta input[type=date]:focus,body.ta input[type=time]:focus,
body.ta input[type=month]:focus,body.ta input[type=tel]:focus,
body.ta input[type=url]:focus,
body.ta input[type=search]:focus,body.ta input[type=password]:focus,
body.ta input[type=email]:focus,body.ta input[type=number]:focus,
body.ta select:focus,body.ta textarea:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
body.ta textarea{resize:vertical}

/* ── 카드 — **기본 layout 이 아니다**(§16) ─────────────────────── */
body.ta .card{border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* ── 표 ──────────────────────────────────────────────────────────
   머리글은 v0 의 **작은 대문자 회색**. 줄 높이는 **그대로 둔다**(밀도 §33). */
body.ta table.list th{font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink2);background:var(--sunk);border-bottom:1px solid var(--line)}
body.ta table.list td{border-bottom:1px solid var(--line2)}
/* 숫자·시각은 오른쪽으로, 자릿수를 맞춘다(§18) */
body.ta table.list td.num,body.ta table.list th.num{text-align:right;
  font-variant-numeric:tabular-nums}

/* ── 상태 딱지 ────────────────────────────────────────────────────
   `style.css` 의 `.tag` 는 알약(radius 10px)에 제 색을 갖고 있었다.
   모서리와 색만 이 팔레트로 옮긴다 — **어떤 말이 어떤 뜻인지는 안 건드린다.** */
body.ta .tag{border-radius:var(--r-sm);padding:1px 6px;font-size:11px;font-weight:500;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
body.ta .tag.done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
body.ta .tag.hold,body.ta .tag.lock{background:var(--bad-bg);color:var(--bad);
  border-color:var(--bad-line)}
body.ta .tag.prog{background:var(--acc-bg);color:var(--acc2);border-color:var(--acc-line)}
body.ta .tag.prog.zero{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
body.ta .tag.prog.full{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
/* 새로 쓰는 딱지 — 갈래를 클래스로 적는다(색만으로 뜻을 나르지 않는다 §76) */
body.ta .badge{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  border:1px solid var(--line);background:var(--muted-bg);color:var(--ink2);
  border-radius:var(--r-sm);padding:1px 6px;font-size:11px;font-weight:500}
body.ta .badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
body.ta .badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
body.ta .badge.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
body.ta .badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
body.ta .badge.pub{background:var(--pub-bg);color:var(--pub);border-color:var(--pub-line)}
/* 「살아 움직이는 상태」(작업중·검토중)에만 앞에 점을 붙인다 */
body.ta .badge.live::before{content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.8;flex:none}

/* ── 빈 · 기다림 · 오류 (§14) ─────────────────────────────────────
   기능마다 제각각 메시지 상자를 만들지 않는다. */
/* **`[hidden]` 이 이겨야 한다** — `display:flex` 가 그것을 덮는다. 화면은 상자를
   감췄다고 여기는데 눈에는 그대로 보인다(2026-08-30 My Research 실측: `hidden`
   인데 116px 로 그려져 담은 것이 넷인 표 아래 「아직 담아 둔 것이 없습니다」가
   함께 섰다) → [[feedback_css_rule_wrong_ancestor]] 「display 적는 자리엔 [hidden] 도」 */
body.ta .state[hidden]{display:none}
body.ta .state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);padding:var(--sp-8) var(--sp-5);text-align:center;color:var(--ink2)}
body.ta .state .sti{width:32px;height:32px;color:var(--ink3);opacity:.6}
body.ta .state b{font-size:13.5px;font-weight:600;color:var(--ink)}
body.ta .state p{margin:0;font-size:12.5px;color:var(--ink2);max-width:52ch}
body.ta .state.error b{color:var(--bad)}
/* 기다림 — **진행률을 모르면 지어내지 않는다**(§36). 도는 표시 + 지금 하는 일. */
body.ta .spin{display:inline-block;width:16px;height:16px;flex:none;
  border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;
  animation:ta-spin .7s linear infinite}
@keyframes ta-spin{to{transform:rotate(360deg)}}
body.ta [disabled],body.ta .off{opacity:.5;pointer-events:none}

/* ── 단계 (Step Workflow · Pattern B) ────────────────────────────── */
body.ta .stepno{background:var(--muted-bg);color:var(--ink2);font-weight:600}
body.ta .card.step.on .stepno,body.ta .card.step.cur .stepno{background:var(--acc);color:#fff}
body.ta .card.step.done .stepno{background:var(--ok);color:#fff}

/* ══════════════════════════════════════════════════════════════════
   업무 홈 — **Professional Work Portal** (§11·§87·§88)

   v0 실측(1440×900, `getComputedStyle`) 을 그대로 옮긴 값이다. 눈대중 아님:
     폭 1152 · 안여백 32/28 · 눈썹 12/500 · 제목 20/600
     무리 제목 11/600 대문자 자간 .1em + 실선 · 상자 반지름 5 테두리 #d4d8dc
     칸 머리 32px `--sunk` 11/600 자간 .08em · **줄 56px** 안여백 14
     이름 13.5/500 · 셈 12/600 · 꺾쇠 15px

   카드가 아니라 **줄**이다(§87 카드 회귀 금지). 아이콘에 색 타일을 두르지
   않는다 — 파란 네모 아홉이 화면을 SaaS 로 만든다(§84).
   ══════════════════════════════════════════════════════════════════ */
body.ta.lib .wrap.page-narrow{max-width:var(--page-max);
  padding:28px var(--sp-8) 44px}
/* **위 띠와 제목 사이를 다른 화면과 같이 둔다** (2026-08-31). 눈썹 줄을 걷고 나니
   제목이 위 띠에 붙어 48px 에 섰는데, 다른 업무 화면은 73px 이다(브레드크럼이
   위 띠로 올라간 자리만큼). 홈만 답답해 보이지 않게 그만큼을 여백으로 채운다. */
body.ta .hm-hero{padding:var(--sp-7) 0 var(--sp-2)}
body.ta .hm-hero .hm-eyebrow{font-size:12px;font-weight:500;letter-spacing:.025em;
  color:var(--ink2);margin-bottom:2px}
body.ta .hm-hero h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.025em;
  color:var(--ink)}
/* 무리 제목 — 글자 뒤로 실선이 이어져 「여기까지가 한 묶음」을 긋는다 */
body.ta .hm-sec{display:flex;align-items:center;gap:var(--sp-4);
  margin:var(--sp-7) 0 var(--sp-3)}
body.ta .hm-sec h2{margin:0;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink2)}
body.ta .hm-sec::after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
body.ta .hm-box{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sf);overflow:hidden}
/* DSD | XBRL 은 한 표가 아니라 **독립된 두 Workspace 박스**로 읽혀야 한다.
   **높이는 제 내용에 맞춘다**(2026-08-20 지시) — 격자의 기본값(`stretch`)은
   같은 줄에 선 칸을 제일 높은 것에 맞춰 늘리므로, 줄이 하나뿐인 XBRL 칸이
   DSD 칸(줄 둘) 높이까지 늘어나 **아래가 통째로 빈 상자**가 됐다.
   `start` 로 두면 칸마다 제 줄 수만큼만 차지한다. */
body.ta .hm-box.hm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;
  align-items:start;
  border:0;border-radius:0;background:transparent;overflow:visible}
body.ta .hm-cols>.hm-col{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sf);overflow:hidden}
body.ta .hm-colhd{display:flex;align-items:center;height:32px;box-sizing:border-box;
  padding:0 var(--sp-4);border-bottom:1px solid var(--line);background:var(--sunk);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink2)}
/* Workspace 칸 머리 — 이름 + 셈 한 줄 (IA v2 §19·§20).
   여느 칸 머리(`.hm-colhd`)보다 한 단 높다 — 여기 서는 것은 갈래 이름이 아니라
   **제품의 핵심 작업환경 이름**이라 무게가 다르다. */
body.ta .hm-wshd{display:flex;align-items:center;gap:8px;height:40px;
  box-sizing:border-box;padding:0 14px;border-bottom:1px solid var(--line);
  background:var(--sunk)}
body.ta .hm-wshd b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
body.ta .hm-wshd span{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
/* 레일 발치 무리 이름 — 위 묶음 셋과 같은 글씨, 다만 위 여백을 줄인다 */
body.ta .ta-grp.ta-grp-foot{padding:2px var(--sp-3) var(--sp-1)}
/* Workspace 안쪽 이동 띠 (Documents | Compare) — XBRL 걸음 띠와 같은 부품 */
body.ta .wsnav{margin:0 0 var(--sp-4)}
body.ta .wsnav .modes{display:inline-flex;gap:6px}

body.ta .hm-row{display:flex;color:var(--ink);align-items:center;gap:10px;height:56px;box-sizing:border-box;
  padding:0 14px;text-decoration:none;transition:background .12s}
body.ta .hm-rows>.hm-row+.hm-row{border-top:1px solid var(--line)}
body.ta .hm-row:hover{background:var(--sunk)}
body.ta .hm-ic{width:17px;height:17px;flex:none;color:var(--ink2);transition:color .12s}
body.ta .hm-row:hover .hm-ic{color:var(--acc)}
body.ta .hm-row>b{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;
  color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 셈 — **뜻이 있을 때만** 색이 붙는다. 진행 중인 XBRL 만 강조색(§54) */
body.ta .hm-cnt{flex:none;font-size:12px;font-weight:600;color:var(--ink2);
  font-variant-numeric:tabular-nums}
body.ta .hm-cnt.on{color:var(--acc)}
body.ta .hm-chev{width:15px;height:15px;flex:none;color:var(--ink3);transition:color .12s}
body.ta .hm-row:hover .hm-chev{color:var(--acc)}
body.ta .hm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
body.ta .hm-grid2 .hm-sec{margin-top:var(--sp-7)}
/* 무리 이름이 상자 **안**(`.hm-wshd`)으로 들어오면서 눈썹 줄이 없어졌다
   (2026-08-30 지시 — Research·Tools 에도 제목행). 위 여백을 눈썹이 대신
   내던 것이라 여기서 낸다 — 안 그러면 Workspaces 상자에 바로 붙는다. */
body.ta .hm-grid2{margin-top:var(--sp-7)}
/* 옛 카드(`pick2`)는 이제 안 쓴다 — 규칙을 지우지 않고 **줄로 낮춘다.**
   되살릴 일이 있으면 이 덩이만 지운다. */
body.ta .pick2{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sf);overflow:hidden}
body.ta .pick2card{display:flex;align-items:center;gap:10px;height:56px;
  box-sizing:border-box;padding:0 14px;border-radius:0;background:none;
  text-decoration:none;transition:background .12s}
body.ta .pick2card+.pick2card{border-top:1px solid var(--line)}
body.ta .pick2card:hover{background:var(--sunk)}
body.ta .pick2card .ico{width:17px;height:17px;flex:none;display:grid;place-items:center;
  background:none;box-shadow:none;border-radius:0;color:var(--ink2);font-size:15px;margin:0}
body.ta .pick2card .ico .ta-ic{width:17px;height:17px}
body.ta .pick2card>b{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;
  color:var(--ink);margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.ta .pick2card>p{display:none}
body.ta .pick2card .cnt{flex:none;margin:0;padding:0;background:none;border:0;
  font-size:12px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════
   §18~§23 로그인 — 제품의 첫인상. 여기만 조금 더 표현적이어도 된다.
   다만 업무화면과 같은 남색·파랑·글자체·테두리·단추를 쓴다.
   왼쪽 그림은 **업무화면에 되풀이하지 않는다.**
   ══════════════════════════════════════════════════════════════════ */
/* **`body.ta.lg` 가 `display:grid;place-items:center` 다**(옛 작은 로그인 상자를
   화면 한가운데 세우던 규칙). 그대로 두면 새 두 칸 짜임이 내용 크기로 오그라들어
   화면 양옆에 흰 띠가 생긴다 — 실측 1440 창에서 폭 1118px(양쪽 152px 빔).
   규칙을 읽지 말고 **픽셀로 재서** 잡았다 → [[feedback_css_rule_wrong_ancestor]] */
body.ta.lgn{padding:0;background:var(--sf);display:block;place-items:initial}
body.ta.lgn .wrap{max-width:none;width:100%;margin:0;padding:0}
/* 왼쪽 58% · 오른쪽 42% (§18 — 56~60 / 40~44) */
body.ta.lgn .lgn-grid{display:grid;grid-template-columns:58fr 42fr;
  min-height:100vh;height:100vh}
@media (max-width:1023px){
  body.ta.lgn .lgn-grid{grid-template-columns:1fr}
  body.ta.lgn .lgn-art{display:none}
}

/* ── 왼쪽 — 남색 면 ─────────────────────────────────────────────── */
body.ta.lgn .lgn-art{position:relative;display:flex;flex-direction:column;
  justify-content:flex-start;gap:var(--sp-6);overflow:hidden;
  padding:42px 56px 44px 84px;background:var(--navy);color:var(--navy-fg)}
/* 옅은 격자 — 재무 자료의 「칸」을 뜻한다. 눈에 띄면 안 된다 */
body.ta.lgn .lgn-art::before{content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px}
body.ta.lgn .lgn-art>*{position:relative}
body.ta.lgn .lgn-art-top{display:flex;align-items:center;gap:12px;flex:none}
/* 남색 면 위의 마크 — **흰 마크로 뒤집는다**(Light on Dark).
   타일을 두르지 않는다. 칸은 색을 더 쓰지 않고 흰색의 투명도로만 가른다 —
   남색 위에서 파랑을 겹치면 탁해진다. */
/* 남색 면 위의 타일 — v0: `size-9`(36px) `bg-white/[.08]` `ring-white/12` */
body.ta.lgn .lgn-art .ac-mark{width:36px;height:36px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
body.ta.lgn .lgn-art .ac-mark .ac-mk{width:22px;height:22px}
body.ta.lgn .lgn-art .mk-a{fill:#fff}
body.ta.lgn .lgn-art .mk-c{fill:rgba(255,255,255,.8)}
body.ta.lgn .lgn-art .mk-c.s{fill:rgba(255,255,255,.45)}
body.ta.lgn .lgn-art .ac-name b{font-size:15px;color:#fff;letter-spacing:-.025em}
body.ta.lgn .lgn-art .ac-name em{font-size:11px;letter-spacing:.025em;color:rgba(255,255,255,.5)}

body.ta.lgn .lgn-art-mid{min-width:0;margin-top:84px;max-width:704px}
body.ta.lgn .lgn-flow{margin:0 0 14px;font-size:11.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
body.ta.lgn .lgn-art h2{margin:0 0 15px;font-size:34px;line-height:1.26;font-weight:600;
  letter-spacing:0;color:#fff;word-break:keep-all}
body.ta.lgn .lgn-lead{margin:0 0 34px;max-width:54ch;font-size:14px;line-height:1.65;
  color:rgba(255,255,255,.5);word-break:keep-all}

/* ── 그림 — DSD에서 공시까지 이어지는 하나의 재무보고 흐름 ─────────────── */
body.ta.lgn .lgn-viz{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:11px;align-items:stretch;width:min(704px,100%);min-height:260px;padding-top:34px}
body.ta.lgn .lgn-track{position:absolute;left:3px;right:3px;top:10px;height:28px;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
body.ta.lgn .lgn-track::before{content:'';position:absolute;left:8%;right:8%;top:13px;
  height:1px;background:rgba(255,255,255,.20)}
body.ta.lgn .lgn-track span{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;
  background:var(--navy);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 5px rgba(255,255,255,.035)}
body.ta.lgn .lgn-track span::after{content:'';position:absolute;left:9px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--acc-lite)}
body.ta.lgn .lgn-step{position:relative;min-width:0;min-height:226px;padding:15px 12px 13px;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.045);
  box-shadow:0 18px 36px rgba(0,0,0,.10)}
body.ta.lgn .lgn-step::after{content:'›';position:absolute;right:-13px;top:103px;
  font-size:24px;line-height:1;color:rgba(255,255,255,.42)}
body.ta.lgn .lgn-step:last-child::after{display:none}
body.ta.lgn .lgn-step-k{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--acc-lite)}
body.ta.lgn .lgn-step h3{margin:8px 0 4px;font-size:15.5px;line-height:1.2;font-weight:650;
  letter-spacing:0;color:#fff}
body.ta.lgn .lgn-step p{margin:0 0 13px;font-size:10.8px;line-height:1.45;color:rgba(230,235,244,.56);
  word-break:keep-all}
body.ta.lgn .lgn-doc{height:108px;padding:12px;border-radius:6px;background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10)}
body.ta.lgn .lgn-doc b{display:block;margin-bottom:13px;font-size:12px;color:rgba(255,255,255,.78)}
body.ta.lgn .lgn-doc span{display:block;height:7px;margin-top:9px;border-radius:2px;
  background:rgba(255,255,255,.22)}
body.ta.lgn .lgn-doc span:nth-child(3){width:72%}
body.ta.lgn .lgn-doc span.wide{width:92%;background:rgba(121,163,197,.45)}
body.ta.lgn .review ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body.ta.lgn .review li{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.72)}
body.ta.lgn .review i{width:15px;height:15px;flex:none;border-radius:50%;background:rgba(107,168,130,.18);
  position:relative}
body.ta.lgn .review i::after{content:'';position:absolute;left:5px;top:3px;width:3px;height:7px;
  border:solid #78b08d;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
body.ta.lgn .lgn-tags{display:flex;flex-wrap:wrap;gap:8px}
body.ta.lgn .lgn-tags span{padding:7px 9px;border-radius:5px;background:rgba(121,163,197,.14);
  border:1px solid rgba(121,163,197,.22);font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.78)}
body.ta.lgn .lgn-report{height:108px;padding:12px;border-radius:6px;background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10)}
body.ta.lgn .lgn-report b{display:block;margin-bottom:8px;font-size:12px;color:rgba(255,255,255,.78)}
body.ta.lgn .lgn-report span{display:block;height:6px;margin-top:7px;border-radius:2px;
  background:rgba(255,255,255,.18)}
body.ta.lgn .lgn-report span.head{width:58%;height:8px;background:rgba(121,163,197,.42)}
body.ta.lgn .lgn-report span.wide{width:88%}
body.ta.lgn .lgn-report em{display:inline-block;margin-top:9px;padding:4px 7px;border-radius:4px;
  background:rgba(121,163,197,.16);font-style:normal;font-size:10.5px;color:rgba(255,255,255,.72)}
body.ta.lgn .lgn-file{height:108px;padding:12px;border-radius:6px;background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10)}
body.ta.lgn .lgn-file b{display:block;width:30px;height:36px;margin-bottom:11px;border-radius:4px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.34))}
body.ta.lgn .lgn-file span{display:block;height:7px;margin-top:8px;border-radius:2px;background:rgba(255,255,255,.18)}
body.ta.lgn .lgn-file span:nth-child(3){width:70%}
body.ta.lgn .lgn-file em{display:inline-block;margin-top:12px;padding:5px 8px;border-radius:4px;
  background:rgba(107,168,130,.16);font-style:normal;font-size:11px;color:#9fd0ae}

body.ta.lgn .lgn-art-foot{position:absolute;left:84px;bottom:40px;flex:none;font-size:11.5px;letter-spacing:.025em;
  color:rgba(255,255,255,.35)}

/* ── 오른쪽 — 로그인 (§23 폼 400~420px) ───────────────────────────── */
body.ta.lgn .lgn-form{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-7);padding:44px 40px;background:var(--sf)}
body.ta.lgn .lgn-box{width:100%;max-width:400px}
/* 오른쪽 compact lockup — 마크 + 이름까지만(§12). 설명은 안 붙인다 */
body.ta.lgn .lgn-lock{display:flex;align-items:center;gap:8px;margin-bottom:36px}
body.ta.lgn .lgn-lock .ac-mark{width:28px;height:28px}
body.ta.lgn .lgn-lock .ac-mark .ac-mk{width:17px;height:17px}
body.ta.lgn .lgn-lock .ac-name b{font-size:13px;letter-spacing:-.025em;color:var(--ink)}
body.ta.lgn .lgn-box h1{margin:0 0 6px;font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink)}
body.ta.lgn .lgn-sub{margin:0 0 32px;font-size:13.5px;color:var(--ink2)}
body.ta.lgn .lgn-fields{display:flex;flex-direction:column;gap:14px}
body.ta.lgn .lgn-fields label{display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;font-weight:500;color:var(--ink2)}
body.ta.lgn .lgn-fields input{height:36px;padding:0 12px;font-size:13px;
  border:1px solid var(--inp);border-radius:var(--r);background:var(--sf);color:var(--ink)}
body.ta.lgn .lgn-fields .pw{position:relative;display:block}
body.ta.lgn .lgn-fields .pw input{width:100%;padding-right:38px;box-sizing:border-box}
body.ta.lgn .lgn-go{height:36px;margin-top:8px;border:0;border-radius:var(--r-lg);
  background:var(--acc);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .12s}
body.ta.lgn .lgn-go:hover{background:var(--acc2)}
body.ta.lgn .lgn-go:active{transform:translateY(1px)}
body.ta.lgn .lgn-err{margin:0;padding:9px 11px;border-radius:var(--r);font-size:12.5px;
  background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
body.ta.lgn .lgn-note{margin:20px 0 0;font-size:11.5px;color:var(--ink3)}
/* 법적 고지 (2026-09-16) — 로그인 칸의 주인은 폼이므로 **작게 둔다**(§23).
   가운데가 아니라 폼과 같은 왼쪽 금에 맞춘다 — 가운데로 두면 제 무리가 아닌
   것처럼 떠 보인다. 좁은 화면에서는 줄이 바뀌므로 row-gap 을 따로 준다. */
body.ta.lgn .lgn-legal{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:7px;row-gap:4px;margin:14px 0 0;font-size:11.5px;color:var(--ink3)}
body.ta.lgn .lgn-legal a{color:var(--ink3);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
body.ta.lgn .lgn-legal a:hover{color:var(--ink);border-bottom-color:var(--line)}
/* 개인정보 처리방침은 **법이 구별해 보이라고 한 것**이라 굵게 둔다 */
body.ta.lgn .lgn-legal a.em{color:var(--ink2);font-weight:600}
body.ta.lgn .lgn-legal a.em:hover{color:var(--ink)}
body.ta.lgn .lgn-legal span{color:var(--line2)}
/* v0: `mt-10 border-t pt-5` — 폼과 배서 사이에 금 하나 */
body.ta.lgn .lgn-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  width:100%;max-width:400px;font-size:11.5px;color:var(--ink3)}
/* 눈 단추는 기존 것을 그대로 쓴다 — 자리만 이 칸 높이에 맞춘다 */
body.ta.lgn .lgn-fields .pw-eye{position:absolute;right:4px;top:50%;
  transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;
  border:0;background:none;color:var(--ink3);cursor:pointer;border-radius:var(--r)}
body.ta.lgn .lgn-fields .pw-eye:hover{background:var(--muted-bg);color:var(--ink)}
body.ta.lgn .lgn-fields .pw-eye svg{width:17px;height:17px}
body.ta.lgn .lgn-fields .pw-eye .off-ic{display:none}
body.ta.lgn .lgn-fields .pw-eye.on .on-ic{display:none}
body.ta.lgn .lgn-fields .pw-eye.on .off-ic{display:block}
body.ta.lgn .lgn-fields .pw-eye.on .off-ic{display:block}

/* ══════════════════════════════════════════════════════════════════
   §25·§72 관리자 — **일반 화면과 같은 부품**을 쓴다.
   admin 이라고 별도 theme 를 만들지 않는다. 다만 밀도는 Dense Workspace 가
   아니라 여느 업무 폼/표 밀도다.
   ══════════════════════════════════════════════════════════════════ */
body.ta.lib .wrap>.headline{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-5);padding:var(--sp-6) 0 var(--sp-4);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line)}
body.ta .headline h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink)}
body.ta .headline p{margin:4px 0 0;font-size:13px;line-height:1.625;color:var(--ink2)}
body.ta .headline .back{font-size:12.5px;color:var(--ink2);text-decoration:none}
body.ta .headline .back:hover{color:var(--acc)}
body.ta .panel-head{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line2)}
body.ta .panel-head h2{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
body.ta .panel-head span{font-size:11.5px;color:var(--ink3)}
/* 계정층 화면의 맨 단추 — 겉옷의 `.btn` 과 같은 모양으로 맞춘다.
   **폭을 늘리지 않는다**(`justify-self:start`) — 계정층 CSS 는 이 단추들을
   칸 너비만큼 늘려, 관리자 화면이 파란 띠 여럿으로 보였다(2026-08-19 캡처).
   한 화면에 Primary 가 여럿이면 어느 것이 「지금 할 일」인지 사라진다(§48). */
/* 로그인은 뺀다 — 거기 단추는 칸 너비만큼 늘어나야 한다(§23). 안 빼면
   `align-self:start` 가 로그인 단추까지 오그라뜨린다(2026-08-19 캡처). */
body.ta:not(.lgn) .wrap form button,
body.ta:not(.lgn) .wrap .newbox button,
body.ta:not(.lgn) .wrap .mini button{
  height:32px;padding:0 14px;border:1px solid var(--acc);border-radius:var(--r);
  background:var(--acc);color:#fff;font-family:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;transition:background .12s,border-color .12s;
  width:auto;justify-self:start;align-self:start}
body.ta:not(.lgn) .wrap form button:hover{background:var(--acc2);border-color:var(--acc2)}
body.ta:not(.lgn) .wrap form button:active{transform:translateY(1px)}
body.ta:not(.lgn) .wrap .acts-cell form button.btn.del{
  height:23px;padding:0 7px;border-radius:var(--r-sm);font-size:11.5px;
  background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad);
  font-weight:700;align-self:center
}
body.ta:not(.lgn) .wrap .acts-cell form button.btn.del:hover{
  background:#f7dada;border-color:#d98f92;color:var(--bad)
}
body.ta .wrap label{font-size:12.5px;font-weight:500;color:var(--ink2)}
/* **체크박스·라디오는 뺀다** (2026-08-28 실측) — 글자 칸 크기를 그대로 주면
   체크박스가 13×32 로 **세로만 늘어나** 옆 글자와 안 맞는다(「내 작업만」 19.6px).
   같은 갈래를 아래 `max-width` 규칙은 진작 이렇게 빼 두었다. */
body.ta .wrap input:not([type=checkbox]):not([type=radio]),
body.ta .wrap select{height:32px;padding:0 10px}
body.ta .wrap .err{padding:9px 11px;border-radius:var(--r);font-size:12.5px;
  background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
body.ta .wrap .err.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
body.ta .wrap .empty{padding:var(--sp-8);text-align:center;font-size:12.5px;color:var(--ink2);
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--sf)}
/* 프로젝트 카드 — 목록형(Pattern A) 과 같은 결 */
body.ta .project{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sf);
  box-shadow:var(--sh-2);text-decoration:none;transition:border-color .12s,box-shadow .12s}
body.ta .project:hover{border-color:var(--acc-line);box-shadow:var(--sh-3)}
body.ta .project h2{font-size:14.5px;font-weight:600;color:var(--ink)}
body.ta .project .meta{font-size:11.5px;color:var(--ink3)}

/* ── Dark rail follow-up (2026-08-20) ────────────────────────────
   v0 proposal에서 고른 남색 레일을 실제 앱 전체에 적용한다. 레일은 작업 화면
   바탕과 다른 면이므로 흰 본문과 분명히 갈라져야 한다. */
body.ta .ta-brand{background:var(--rail-bg);border-bottom-color:rgba(255,255,255,.08)}
body.ta .ta-brand:hover{background:var(--rail-hov)}
body.ta .ta-grp{color:var(--rail-ink2)}
body.ta .ta-sepline{background:rgba(255,255,255,.08)}
body.ta .ta-foot{border-top-color:rgba(255,255,255,.08)}
body.ta .ta-foot a{color:var(--rail-ink)}
body.ta .ta-foot a .ta-ic{color:var(--rail-ink2)}
body.ta .ta-foot a:hover{background:var(--rail-hov);color:#fff}
body.ta .ta-foot a:hover .ta-ic{color:#fff}
body.ta:is(.ta-slim,.ta-narrow) .ta-grp{background:rgba(255,255,255,.08)}
body.ta .ta-ext{color:var(--rail-ink2);opacity:.72}
body.ta .ta-lnkplus,body.ta .ta-lnkedit,body.ta .ta-lnkdel{color:var(--rail-ink2)}
body.ta .ta-lnkplus:hover,body.ta .ta-lnkedit:hover{color:#fff;background:rgba(255,255,255,.08)}
body.ta .ta-lnkdel:hover{color:#ffb4b4;background:rgba(244,67,54,.12)}

/* ── Modal title rows ───────────────────────────────────────────
   팝업은 떠 있는 레이어라 레일처럼 남색 면을 쓰지 않는다. 낮고 밝게 둔다. */
body.ta .modal .mbox{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-3)}
body.ta .modal .mhead{background:var(--sunk);color:var(--ink);border-bottom:1px solid var(--line);padding:8px 12px}
body.ta .modal .mhead b{color:var(--ink);font-weight:700}
body.ta .modal .mhead button{color:var(--ink2);border-radius:var(--r-sm);width:26px;height:26px;display:grid;place-items:center}
body.ta .modal .mhead button:hover{background:var(--muted-bg);color:var(--ink)}
body.ta .modal .mbody{background:#fff;color:var(--ink)}


body.ta .ta-i.on::before{display:none}

/* ── Dark rail logo tile and native dialogs ─────────────────────── */
body.ta .ta-brand .ac-mark{background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
body.ta .ta-brand .mk-a{fill:var(--navy)}
body.ta .ta-brand .mk-c{fill:#6f879f}
body.ta .ta-brand .mk-c.s{fill:#a9bacb}
body.ta .ta-brand .ac-name b{color:#fff}
body.ta .ta-brand .ac-name em{color:var(--rail-ink)}
body.ta dialog .mhead,
body.ta .dinv .mhead,
body.ta .invite-modal .mhead{background:var(--sunk);color:var(--ink);border-bottom:1px solid var(--line);padding:8px 12px}
body.ta dialog .mhead b,
body.ta .dinv .mhead b,
body.ta .invite-modal .mhead b{color:var(--ink);font-weight:700}

/* ── DSD editor toolbar refresh (2026-08-20) ─────────────────────
   기능 id/data-op 는 그대로 두고, 버튼만 아이콘+업무용 Neutral 체계로 정리한다. */
body.ta.ed .top .acts,
body.ta.ed .secbar .right{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap
}
body.ta.ed .top .acts .btn,
body.ta.ed .top .acts button.btn,
body.ta.ed .secbar .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:30px;min-height:0;padding:0 9px;border-radius:7px;font-weight:600
}
body.ta.ed .top .acts .btn.vfy{
  background:#f7f9fb;border-color:#cbd5df;color:var(--ink)
}
/* **단추에 붙는 자판 딱지** (2026-08-25 — 합계 검증 `F3`).
   툴팁에만 적으면 마우스를 올려야 보이므로 아무도 안 배운다 → 단추 안에 세운다.
   생김새는 이미 있는 `.ta-find kbd` 와 같은 결로 맞췄다(mono · 작은 글씨 ·
   테두리 한 줄) — 자판을 말하는 딱지가 화면마다 다르면 눈이 두 번 배운다.
   `.btn` 이 `inline-flex`(gap:6px)라 사이 여백은 저절로 벌어진다.
   `flex:none` 은 좁아질 때 딱지가 찌그러지는 것을 막는다. */
body.ta.ed .top .acts .btn .btnkey{
  flex:none;font-family:var(--mono);font-size:10px;line-height:1.4;font-weight:600;
  padding:0 4px;border:1px solid var(--line);border-radius:3px;
  background:var(--sf);color:var(--ink3);white-space:nowrap
}
body.ta.ed .top .acts .btn.vfy:hover,
body.ta.ed .secbar .btn.ghost:hover{
  background:#f5f7fa;border-color:#b8c5d2;color:var(--navy)
}
body.ta.ed .top .acts #btnGate{
  background:#f7f9fb;border-color:#cbd5df;color:var(--ink)
}
body.ta.ed .top .acts #btnGate:hover{background:#f5f7fa;border-color:#b8c5d2;color:var(--navy)}
body.ta.ed .top .acts #btnDone.on{
  background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)
}
body.ta.ed .top .acts form.inline button.btn.ghost,
body.ta.ed .secbar .btn.ghost{
  background:#fff;border-color:#d3dbe4;color:var(--ink2);font-weight:500
}
body.ta.ed .top .acts .btn::before,
body.ta.ed .top .acts form.inline button.btn::before,
body.ta.ed .secbar .btn::before,
body.ta.ed .tbar .btn::before{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;flex:none;font-size:12px;line-height:1;
  color:currentColor;opacity:.82
}
body.ta.ed #btnSect::before{content:"▦"}
body.ta.ed #btnFoot::before{content:"Σ";font-weight:800}
body.ta.ed #btnTypo::before{content:"Aa";font-size:10px;font-weight:800}
body.ta.ed #btnNote::before{content:"#";font-weight:800}
body.ta.ed #btnPre::before{content:"☑"}
body.ta.ed #btnValidate::before{content:"◇"}
body.ta.ed #btnGate::before{content:"↗";font-weight:800}
body.ta.ed #btnDone::before{content:none}
body.ta.ed .top .acts form.inline button.btn::before{content:"↺";font-weight:800}
body.ta.ed #btnSnap::before{content:"▣"}
body.ta.ed #btnMemo::before{content:"◌"}
body.ta.ed #btnSecDiff::before{content:"⇄"}

body.ta.ed #tbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:none;padding:5px 10px;color:var(--ink)
}
body.ta.ed #tbar .tgrp{
  display:inline-flex;align-items:center;height:26px;margin-right:1px;
  color:var(--ink2);font-size:11px;font-weight:700
}
body.ta.ed #tbar .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:28px;padding:0 8px;border-radius:7px;
  background:#fff;border-color:var(--line3);color:var(--ink);font-size:12px;font-weight:500
}
body.ta.ed #tbar .btn:hover{
  background:var(--sunk);border-color:var(--line3);color:var(--navy)
}
body.ta.ed #tbar .btn.on{
  background:var(--navy);border-color:var(--navy);color:#fff
}
body.ta.ed #tbar .btn.danger{
  background:#fff;border-color:var(--bad-line);color:var(--bad);font-weight:600
}
body.ta.ed #tbar .btn.danger:hover{
  background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)
}
body.ta.ed #tbar .tsep{
  width:1px;height:18px;background:var(--line3);margin:0 5px
}
body.ta.ed #tbar .tbreak{
  flex:1 0 100%;height:0
}
body.ta.ed #tbar .tpair,
body.ta.ed #tbar .tset{
  display:inline-flex;align-items:center;gap:5px
}
body.ta.ed #tbar .tpos{
  color:#6b7480;font-size:11.5px
}
body.ta.ed #tbar #tpos{
  display:none
}
body.ta.ed #tbar .tpos:not(#tpos){
  flex:1 1 360px;min-width:260px;height:28px;display:inline-flex;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
body.ta.ed #tbar .tguide-label{
  margin-left:4px
}
body.ta.ed #tbar .tpos b{color:var(--ink)}
body.ta.ed #tbar.nosel .btn[data-op]{opacity:.48}
body.ta.ed #tbar .btn[data-op="row_insert_above"]::before,
body.ta.ed #tbar .btn[data-op="row_insert_below"]::before{content:none}
body.ta.ed #tbar .btn[data-op="row_delete"]::before{content:"−";font-weight:900}
body.ta.ed #tbar .btn[data-op="col_insert_left"]::before,
body.ta.ed #tbar .btn[data-op="col_insert_right"]::before{content:none}
/* 열은 **세로**로 서 있으니 지우는 표시도 세로선이다 (2026-09-01 지시).
   행 삭제(`−`)와 같은 기호를 쓰면 둘이 안 갈린다 — 행은 가로, 열은 세로.

   **글자를 갈지 않고 행 삭제의 `−` 를 그대로 돌린다.** 세로 막대 글자들은
   재 보니 하나같이 기준보다 길었다 — 잉크 길이가 `|` 12px · `│` 12px ·
   `❘` 10px · `∣` 9px 인데 기준인 `−` 의 잉크는 **7px** 이다(2026-09-01 실측,
   같은 글꼴·같은 크기로 캔버스에 그려 잼). 같은 글자를 돌리면 길이도 굵기도
   **정확히 같아진다**. `transform` 은 자리를 안 바꾸므로 상자 폭은 `width` 로
   기준과 맞춘다 — 안 그러면 돌아간 상자가 18.6px 로 벌어져 단추가 넓어진다. */
body.ta.ed #tbar .btn[data-op="col_delete"]::before{
  content:"−";font-weight:900;
  display:inline-block;width:7px;text-align:center;transform:rotate(90deg)}
body.ta.ed #tbar .btn[data-op="cell_merge"]::before{content:"⧉"}
body.ta.ed #tbar .btn[data-op="cell_split"]::before{content:"⊞"}
body.ta.ed #tbar .btn[data-op="cell_align"]::before,
body.ta.ed #tbar .btn[data-op="cell_valign"]::before{content:none}
body.ta.ed #btnNewTbl::before{content:"▦"}
body.ta.ed #tbar .btn[data-op="table_delete"]::before{content:"▦"}
body.ta.ed #btnNewPara::before,
body.ta.ed #btnDelPara::before{content:"T";font-weight:800}

/* 2026-08-21 - 목록/도구 화면 상단 높이 통일.
   Breadcrumb는 고정 상단바에 두고, 본문 제목 줄은 DSD/KAM/전기이월/당기반영에서
   같은 y축으로 시작하게 한다. */
body.ta.lib:not(.ed):not(.xb) .ta-bar .ta-pathbrand{
  height:var(--gbar);
  display:flex;
  align-items:center;
  font-size:13px;
  line-height:1.2;
}
body.ta.lib:not(.ed):not(.xb) .wrap{
  padding-top:0;
}
body.ta.lib:not(.ed):not(.xb) .libtop{
  min-height:74px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:0;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
body.ta.lib:not(.ed):not(.xb) .libtop h1{
  font-size:19px;
  line-height:1.2;
  margin:0;
}
body.ta.lib:not(.ed):not(.xb) .libtop .ptmeta,
body.ta.lib:not(.ed):not(.xb) .libtop>span:not(.libacts):not(.libgo){
  align-self:center;
  line-height:1.2;
}
body.ta.roll-dedicated .wrap{
  padding-top:0;
}
body.ta.roll-dedicated .libtop{
  margin-bottom:14px;
}

/* 2026-08-22 worksheet source map wide
   정산표 반영 화면은 상단 업로드·요약은 기존 폭으로 읽히게 두고,
   그 아래 위치 수정/매핑 표만 넓혀 줄바꿈을 줄인다. */
body.ta.roll-worksheet #srcbox{overflow:visible}
body.ta.roll-worksheet #srcbox .fs-map-scroll{
  width:min(calc(100vw - var(--rail) - 64px), 1180px);
  max-width:min(calc(100vw - var(--rail) - 64px), 1180px);
  overflow-x:auto;
  padding-bottom:4px;
}
body.ta.roll-worksheet #srcbox .fs-map-scroll table.fs-map{
  width:100%;
  min-width:1060px;
  table-layout:fixed;
}
body.ta.roll-worksheet #srcbox table.fs-map th,
body.ta.roll-worksheet #srcbox table.fs-map td{
  vertical-align:top;
  line-height:1.55;
}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(1),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(1){width:76px}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(2),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(2){width:36%}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(3),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(3){width:36%}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(4),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(4){width:220px}
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(2),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(3){word-break:keep-all}
body.ta.roll-worksheet #srcbox table.fs-map .pmeta{line-height:1.55}

/* 2026-08-22 worksheet note map wide
   당기 주석 짝짓기 표도 정산표 매핑 표처럼 넓게 펼쳐 긴 주석명·근거의 줄바꿈을 줄인다. */
body.ta.roll-worksheet #srcbox .note-map-wrap{
  width:min(calc(100vw - var(--rail) - 64px), 1220px);
  max-width:min(calc(100vw - var(--rail) - 64px), 1220px);
}
body.ta.roll-worksheet #srcbox .note-map-sec .tblscroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  padding-bottom:4px;
}
body.ta.roll-worksheet #srcbox table.note-map{
  width:100%;
  min-width:1120px;
  table-layout:fixed;
}
body.ta.roll-worksheet #srcbox table.note-map th,
body.ta.roll-worksheet #srcbox table.note-map td{
  vertical-align:top;
  line-height:1.55;
}
body.ta.roll-worksheet #srcbox table.note-map th:nth-child(1),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(1){width:22%}
body.ta.roll-worksheet #srcbox table.note-map th:nth-child(2),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(2){width:22%}
body.ta.roll-worksheet #srcbox table.note-map th:nth-child(3),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(3){width:24%}
body.ta.roll-worksheet #srcbox table.note-map th:nth-child(4),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(4){width:20%}
body.ta.roll-worksheet #srcbox table.note-map th:nth-child(5),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(5){width:190px}
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(1),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(2),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(3),
body.ta.roll-worksheet #srcbox table.note-map td:nth-child(4){word-break:keep-all}
body.ta.roll-worksheet #srcbox table.note-map select[data-note]{max-width:100%;width:100%}

/* 2026-08-22 worksheet source cards wide
   정산표 요약 카드 5개를 아래 매핑 표 폭에 맞춰 한 행으로 펼친다. */
body.ta.roll-worksheet #srcbox .source-summary{
  width:min(calc(100vw - var(--rail) - 64px), 1180px);
  max-width:min(calc(100vw - var(--rail) - 64px), 1180px);
}
body.ta.roll-worksheet #srcbox .source-cards{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  width:100%;
  margin:8px 0 4px;
}
body.ta.roll-worksheet #srcbox .source-card{
  min-width:0;
  height:100%;
}
body.ta.roll-worksheet #srcbox .source-card .sname,
body.ta.roll-worksheet #srcbox .source-card .pmeta{
  white-space:normal;
  word-break:keep-all;
}
body.ta.roll-worksheet #srcbox .source-card .stag{
  top:7px;
  right:8px;
}
@media (max-width: 1100px){
  body.ta.roll-worksheet #srcbox .source-cards{grid-template-columns:repeat(3, minmax(0, 1fr));}
}





/* 2026-08-22 worksheet map spacing compact
   요약 카드가 아래 위치 수정 표와 붙지 않게 띄우고, 당기 열을 왼쪽으로 당긴다. */
body.ta.roll-worksheet #srcbox .source-summary{
  margin-bottom:16px;
}
body.ta.roll-worksheet #srcbox .source-cards{
  margin-bottom:14px;
}
body.ta.roll-worksheet #srcbox .srcmap{
  clear:both;
  margin-top:14px;
}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(1),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(1){width:72px}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(2),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(2){width:30%}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(3),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(3){width:38%}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(4),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(4){width:220px}

/* 2026-08-22 worksheet map folded and tighter current column */
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(2),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(2){width:26%}
body.ta.roll-worksheet #srcbox table.fs-map th:nth-child(3),
body.ta.roll-worksheet #srcbox table.fs-map td:nth-child(3){width:42%}

/* ══════════════════════════════════════════════════════════════════
   이미 올려 둔 문서에서 XBRL 업무 시작 (2026-08-28)
   「보고서 업로드」 카드 안, 끌어다 놓는 자리 **밑**에 선다.
   새 색·반지름을 만들지 않는다 — 카드 안의 가른 줄이라 위에 선만 하나 긋는다.
   ══════════════════════════════════════════════════════════════════ */
body.ta .fromdoc{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
body.ta .fromdoc>b{display:block;margin-bottom:6px}
body.ta .fromdoc-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
/* 파일 이름이 길다 — 고르는 칸이 남는 자리를 다 쓰되 단추는 안 줄어든다 */
body.ta .fromdoc-row select{flex:1 1 auto;min-width:0}
body.ta .fromdoc-row .btn{flex:none}
body.ta .fromdoc>.muted{display:block}

/* ══════════════════════════════════════════════════════════════════
   업무 홈 「오늘」 (2026-08-28)
   여느 홈 줄(`.hm-row`)을 그대로 쓰고 **셈 칸 하나만** 앞에 더한다.
   새 색·반지름을 만들지 않는다 — 붉은 자리는 이미 있는 `--bad` 를 쓴다.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   놓을 자리 — **끌고 있는 동안 어느 폴더가 받는지** (2026-08-28 지시:
   *"문서를 폴더로 이동시킬 때 해당 폴더를 표시하는게 잘 안보여서
   잘 이동시켰는지 확인이 어려워"*)

   **재 보니 폴더 머리줄은 색이 한 번도 안 바뀌고 있었다.** `style.css` 는
   `tr.foldrow` 에 칠하는데 그 위를 겉옷의 `tr.foldrow td` 가 덮는다 —
   실제로 보이던 것은 얇은 파선 하나뿐이었다(실측: 머리칸 `rgb(248,250,252)` 가
   끌기 전후 그대로). 게다가 그 색 `#0d141c` 는 이식 전 다크 팔레트의 잔재다.
   → [[feedback_css_rule_wrong_ancestor]] · [[feedback_measure_the_screen_path]]

   그래서 **칠하는 자리를 칸(`td`)으로 옮기고**, 색만으로 말하지 않고
   **「여기에 놓습니다」라고 적는다.**
   ══════════════════════════════════════════════════════════════════ */
body.ta table.list.folders tbody.fgrp.dropok{
  outline:2px solid var(--acc);outline-offset:-2px;background:transparent
}
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow>td,
body.ta.lib table.list.folders tbody.fgrp.dropok>tr.foldrow>td,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead>td{
  background:var(--acc-bg);color:var(--acc2);
  box-shadow:inset 4px 0 0 var(--acc);
  border-top-color:var(--acc);border-bottom-color:var(--acc);
  position:relative
}
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow>td b,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead>td b{color:var(--acc2)}
/* **색만으로 말하지 않는다** — 끄는 동안 그 자리에 무엇이 일어나는지 적는다.
   **자리는 왼쪽(폴더 이름 옆)다** — 오른쪽 끝에 붙였더니 표가 창보다 넓어
   (실측 1,732px ↔ 1,582px) 땅지가 **화면 밖**에 그려졌다. 이름은 늘 왼쪽에
   있으므로 그 옆이면 어느 폭에서도 보인다 → [[feedback_row_transient_indicator]] */
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow .foldhead::after,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead>td::after{
  content:'여기에 놓습니다';margin-left:10px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  color:#fff;background:var(--acc);border-radius:9px;padding:2px 9px;
  pointer-events:none
}

/* 옮긴 **뒤** — 어디로 갔는지 그 줄을 잠깐 밝힌다.
   다시 그린 화면에서 사람이 눈으로 좇을 수 있어야 「잘 옮겼나」가 확인된다. */
body.ta tr.justmoved>td{
  background:var(--acc-bg) !important;
  transition:background 1.2s ease
}
/* **세로 막대는 줄 맨 앞에 한 번만** (2026-09-20 신고: *"파일 이동 시키면 저렇게
   파랗게 나오는데 왜 그래?"*).

   여태 `tr.justmoved>td` 에 `inset 3px 0 0` 을 주어 **칸마다** 왼쪽에 파란 막대가
   그어졌다 — 「사본 만들기」 앞, 「—」 앞, 「—」 앞에 줄줄이 서서 **표가 깨진 것처럼**
   보였다. 밝히려는 것은 「이 줄」이지 「이 칸들」이 아니다. */
body.ta tr.justmoved>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
/* **사그라들 때 막대도 함께 걷는다** — 바탕만 지우면 2.6초 뒤부터 4초까지
   **막대만 남아** 더 눈에 띈다(그 사이가 오히려 이상해 보였다). */
body.ta tr.justmoved.fade>td{background:transparent !important}
body.ta tr.justmoved.fade>td:first-child{box-shadow:none}

/* 옮긴 뒤 한 줄 — 화면 아래쪽에 잠깐 떴다 사라진다(`movedhint.js`).
   기존 말하기 자리(`xsay`)가 화면마다 달라, 셋이 함께 쓸 자리를 하나 둔다. */
body.ta .movedbar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);
  z-index:80;max-width:min(640px,90vw);
  background:var(--navy,#182536);color:#fff;font-size:12.5px;line-height:1.5;
  padding:9px 15px;border-radius:8px;box-shadow:0 6px 20px rgba(24,37,54,.28);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease
}
body.ta .movedbar.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════════════════════════════════
   2026-08-30 — Visual System 재정비 보정

   토큰만 갈아서는 안 되는 자리들이다. **원래 규칙을 고치지 않고**
   여기서 다시 칠한다(파일 끝이라 늦게 실린다). 되돌릴 때는 이 블록만
   지우고 위 토큰 블록을 `백업\소스백업\비주얼재정비_20260830` 것으로
   되돌리면 된다.

   `/welcome` 은 지시로 빼 두었다 — 규칙마다 `:not(.sa-legacy)` 를 달고,
   맨 아래에서 옛 토큰 값을 통째로 되돌려 준다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 레일 표시선 — 잉크 위에서 `--acc`(#3f6484)는 거의 안 보인다 ──── */
body.ta:not(.sa-legacy) .ta-i.on::before{background:var(--acc-lite)}

/* ── Primary 단추는 **강조색이 아니라 잉크**다 ─────────────────────
   화면에서 「지금 눌러야 하는 것」은 하나뿐이고, 그 하나가 파랑을
   쓰면 링크·선택·정보가 같은 색으로 묻힌다. */
body.ta:not(.sa-legacy) .btn.primary{background:var(--navy);border-color:var(--navy)}
body.ta:not(.sa-legacy) .btn.primary:hover{background:var(--ink-deep);border-color:var(--ink-deep)}

/* ── 검증 단추 일곱은 **칠한 채로 둔다** (2026-08-13 지시 —
   *"버튼 색이 잘 안보이니까 진한색으로 칠해놔"*). 흰 Secondary 로
   내리면 그 지시를 되돌리는 것이 된다. 대신 Primary 보다 한 단계
   옅은 잉크(`--navy-mut`)로 두어 위계만 만든다. */

/* ── 위험한 단추 — 붉게 두되 채도를 내린다 ────────────────────────── */
body.ta:not(.sa-legacy) .btn.danger{background:var(--bad);border-color:var(--bad);
  color:#fff;font-weight:700}
body.ta:not(.sa-legacy) .btn.danger:hover{background:#853d3d;border-color:#853d3d;color:#fff}

/* ── Soft 단추(편집 열기·XBRL) hover — 하드코딩 파랑을 걷는다 ────── */
body.ta:not(.sa-legacy) .btn.openbtn:hover,
body.ta:not(.sa-legacy) .btn.xbrl:hover{background:#dce6ee;border-color:var(--acc-line)}

/* ── 편집기 머리의 남은 파란 회색들 — 중립으로 옮긴다 ──────────── */
body.ta.ed:not(.sa-legacy) .top .acts #btnGate,
body.ta.ed:not(.sa-legacy) .top .acts #btnGate:hover{background:var(--sunk);
  border-color:var(--line3);color:var(--navy)}
body.ta.ed:not(.sa-legacy) #tbar .btn.danger{background:var(--bad-bg);
  border-color:var(--bad-line);color:var(--bad)}

/* ── `/welcome` 은 종전 그대로 (2026-08-30 지시 — *"이 화면은 일단 빼자"*)
   `body.ta.sa-legacy`(0,2,1)가 `body.ta`(0,1,1)를 이기므로 차례와 무관하다.
   나중에 이 화면까지 옮길 때는 **이 블록만 지우면 된다.** */
body.ta.sa-legacy{
  --bg:#f3f4f4; --sf:#fff; --sunk:#fafaf9; --muted-bg:#eceeef;
  --line:#d4d8dc; --line2:#e1e4e7; --line3:#b9c0c7; --inp:#c9cfd4;
  --ink:#20252b; --ink2:#606870; --ink3:#858c93;
  --acc:#315b7d; --acc2:#26465f; --acc-bg:#e7ecf0; --acc-line:#bfccd7;
  --ok:#2f6b45; --ok-bg:#eef4ef; --ok-line:#bed2c4;
  --warn:#9a5b12; --warn-bg:#f8f0e6; --warn-line:#e0cbb1;
  --bad:#b4232a; --bad-bg:#fbeeee; --bad-line:#e9bbbd;
  --info:#315b7d; --info-bg:#e7ecf0; --info-line:#bfccd7;
  --pub:#4c5b8a; --pub-bg:#edeff5; --pub-line:#c5cada;
  --navy:#182536; --navy-fg:#f8fafc; --navy-mut:#9aa5b3;
  --rail-bg:#182536; --rail-line:#101927; --rail-ink:#c7ced8;
  --rail-ink2:#8994a3; --rail-hov:#243245; --rail-on-bg:#344255; --rail-on:#ffffff;
  --acc-lite:#7f9db5;
  --r-sm:5px; --r:6px; --r-lg:7px;
  --sh-3:0 4px 12px rgba(16,24,40,.08);
  --zeb1:#fff; --zeb2:#f4f5f5;
}


/* ═══════════════════════════════════════════════════════════════════
   한국어 문장은 어절 단위로 끊는다 — 화면 본문 그릇에 건다 (2026-09-01)
   ═══════════════════════════════════════════════════════════════════

   **왜 여기인가.** 2026-08-05 에 `style.css` 가 class 스물넷을 짚어 걸었는데,
   그 목록은 **화면 셋을 훑어** 고른 것이었다(그때 주석에 그렇게 적혀 있다).
   그 뒤 화면이 예순하나가 되어, 2026-09-01 실측에서는 문장이 놓인 자리
   1,711곳 가운데 `keep-all` 이 닿는 곳이 **9%뿐**이었다. 그릇을 하나씩 더하면
   새 화면마다 같은 일이 되풀이되므로, **화면 본문 그릇**에 걸어 그 안이
   물려받게 한다(`word-break` 는 상속되는 속성이다).

   **몸(body)에는 안 건다.** 2026-08-05 에 그렇게 했다가 되돌렸다 — 왼쪽 목차처럼
   좁은 칸에 이름이 놓이는 자리는 어절로 끊으면 줄을 다 못 채우고 일찍 갈려
   들쭉날쭉해진다. 본문 그릇에 걸면 레일·위 띠·격자가 처음부터 비켜 간다.

   **두 속성은 반드시 함께 쓴다.** `keep-all` 만 걸면 긴 낱말이 칸 밖으로
   삐져나가므로 `overflow-wrap` 이 받아 주어야 한다.

   **어디에 거는지는 재서 골랐다** — 화면 서른여섯 곳에서 문장이 놓인 자리의
   조상을 훑어, 스물여덟 화면이 `.wrap` 하나를 쓰고 나머지 넷이 저마다 다른
   그릇을 쓴다는 것을 확인했다. 조사표는
   `Desktop\Claude 생성파일\ACCRIVA_줄바꿈_전수조사.html`.
   ─────────────────────────────────────────────────────────────────── */

/* ① 본문 그릇 `.wrap` — 목록·Finder·조회서·운영 콘솔·SaaS·설명서가 다 쓴다
   (`div.wrap` 과 `main.wrap` 둘 다 이 이름이다) */
body.ta .wrap{word-break:keep-all;overflow-wrap:break-word}

/* ② `.wrap` 을 안 쓰는 화면 넷 */
body.ta.xb:not(.xgrid) .au,        /* XBRL 코드 검증 — 끊김이 가장 많던 화면 */
body.ta.tfwin .tfbody,             /* 택사노미 찾기(팝업 창) */
body.ta.br-body .br-wrap,          /* 사업보고서 편집기 */
body.ta.lg .loginbox{              /* 로그인 · 안내 화면(`알림.html`) */
  word-break:keep-all;overflow-wrap:break-word}

/* ③ DSD 편집기는 PROTECTED 다 — 빈 안내문 둘만 짚는다.
   문서 면(`.pane .dp`)은 `style.css` 에서 이미 걸려 있다(2026-09-01 실측 확인). */
body.ta.ed .rv-empty,
body.ta.ed .wtb-empty{word-break:keep-all;overflow-wrap:break-word}

/* ④ `ask.js` 는 제 창을 몸통에 직접 붙인다 — 본문 그릇 밖이라 따로 건다 */
body.ta #askwrap,body.ta #askbox,body.ta #askbody{
  word-break:keep-all;overflow-wrap:break-word}

/* ④-2 초대 메일 미리보기 — **상속으로는 안 닿는다.**
   `계정/static/style.css` 가 `pre{word-break:break-word}` 를 **그 요소에 직접**
   적어 두었고, 직접 선언은 물려받은 값을 이긴다(2026-09-01 실측에서 이 자리만
   남았다). 그래서 짚어서 다시 적는다. 메일 본문에 접속 주소가 들어 있어
   `anywhere` 로 받는다 — 주소는 어디서 끊겨도 되고 끊겨야 칸을 안 넘는다. */
body.ta .outbox pre{word-break:keep-all;overflow-wrap:anywhere}

/* ⑤ 되돌리는 자리 — **이름과 꼬리표는 글자 단위로 채운다.**
   긴 이름 하나가 줄을 다 못 채우고 일찍 끊기면 오른쪽에 빈 자리가 남는다
   (2026-08-05 실측). 표에 「이름」으로 놓이는 것만 골랐다.
   `nowrap` 이 걸린 자리(문서 목차 `.secs li .t`·격자 `td.lbl`·구조사전 `.c1`)는
   줄바꿈 자체가 막혀 있어 여기 안 적는다. */
body.ta .wrap .ptmeta,             /* 「프로젝트 9 · 문서 222」 셈 꼬리표 */
body.ta .wrap .kam-item-meta,      /* 「BGF · 유가증권시장 · FY2025」 */
body.ta .wrap .cf-to-no,           /* 「조회번호: SC - 1」 */
body.ta .wrap .dfhrow .nm,         /* DSD 비교 — 견주는 파일 이름 */
body.ta .wrap .dzrow .nm{          /* 올린 파일 이름 */
  word-break:normal}

/* ⑥ XBRL 코드 검증 안에서 되돌리는 둘 (2026-09-01 지시) —
   `.auref` 는 element 코드가 놓이는 칸이고 `.aulabel` 은 택사노미 한글 라벨이다.
   둘 다 우리가 쓴 글이 아니라 **표준이 정해 준 이름**이라 그대로 둔다. */
body.ta.xb .auref,
body.ta.xb .aulabel{word-break:normal}

/* ══════════════════════════════════════════════════════════════════
   프로젝트 목록 색조합 — 「모래와 잉크」 (2026-09-02 지시)

   신고는 *"폴더와 파일명·멤버가 적힌 제목행과 각 파일의 행 음영이 같아서
   3개가 구분이 안 된다"* 였다. 재 보니 **네 층 가운데 셋이 `--sunk` 한 값**이었다 —
   폴더 머리줄·미분류 머리줄·칸 이름 줄이 모두 `#f1f2f0` 이고 파일 짝수 줄
   (`--zeb2`)까지 그 값이라, 층이 넷인데 화면에는 두 색밖에 없었다.
   2026-08-30 비주얼 재정비에서 원본의 검은 폴더 띠(`#2b3440`)와 회색 미분류 띠
   (`#6b7480`)를 모두 `--sunk` 로 누른 자리다.

     폴더 · 미분류 머리줄   Cool Ink `--grp` #2b3742 · 흰 글자
     칸 이름 줄             녹색 음영 `--sand` #ddf0e5 · 글자 #1f5c3c
     파일 줄                흰색 ↔ `--zeb2` #f1f2f0   ← **손대지 않는다**(지시)
     손 올린 줄             `--acc-bg` #e9f0f5        ← **손대지 않는다**(지시)

   다섯 안을 두 판 견준 끝에 정해졌다. 파일 줄과 손 올린 줄을 지금 값으로 둔 것은
   사용자가 고른 것이다 — 얼룩은 흰색과 채널 차이가 14·13·15 라 또렷하고,
   손짓은 편집기·XBRL·조회서 목록과 같은 뜻으로 남는다.

   **이 블록만 지우면 통째로 되돌아간다.** 위쪽 규칙은 한 줄도 안 고쳤다.
   되돌리기 사본 : `백업\소스백업\목록색조합_20260902\`

   걸리는 화면은 `.colhead`·`tr.foldrow` 를 쓰는 곳이다 — DSD 목록 · XBRL 목록 ·
   조회서 홈. (`body.ta.lib` 의 `lib` 은 DSD 전용이 아니라 **로그인한 모든 화면**에
   붙는다 → `계정/templates/base.html`.) 조회서 홈은 머리줄 글자 클래스가 달라
   `confirm.css` 끝에서 따로 맞춘다 — 그 파일이 이 파일 **뒤에** 실린다.
   ══════════════════════════════════════════════════════════════════ */
body.ta{
  --grp:#2b3742;        /* Cool Ink — 폴더·미분류 머리줄 */
  --grp-hov:#3c4751;    /* 손 올린 머리줄 — 레일과 같이 한 단계 밝아진다 */
  /* ── 칸 이름 줄은 **회녹색**이다 (2026-09-08 지시 → 2026-09-09
     *"문서목록에 모래색을 저번에 얘기한 녹색 계열로 바꿔줘, 글자색도"*).

     2026-09-08 에 바탕만 모래 `#ece4d6` 에서 회녹색 `#e7ebe5` 로 옮기고
     글자와 아랫변은 따뜻한 모래 계열로 두었는데, 그 뒤 바탕이 옛 값으로
     되돌아가 있었다. 이번에는 **셋을 한 계열로** 적어 둔다 — 하나만
     옮겨 두면 다음에 또 갈린다.

     이름은 `sand` 그대로 둔다. 값을 읽는 자리가 `tr.colhead` 둘뿐이지만
     그 이름을 갈면 되돌리기 사본(목록색조합_20260902)과 어긋난다. */
  --sand:#ddf0e5;       /* 칸 이름 줄 — 전기 자료 줄(`--pv-bg`) 계열에 녹색을 더 넣었다 */
  --sand-ink:#1f5c3c;   /* 그 위의 글자 — 같은 계열로 짙게 (대비 7.2:1) */
  --sand-line:#bde0cb;  /* 아랫변 — 바탕보다 한 단계 짙은 녹색 */
}

/* ── ① 머리줄 둘 — 같은 잉크. 아이콘과 글자가 둘을 가른다 ──────────────
   위 §「프로젝트 머리줄」이 `td` 에 `--sunk` 를 깔아 두었으므로 여기서도
   **`td` 에 칠한다** — `tr` 만 칠하면 그 바탕에 가려 아무 일도 안 일어난다.
   틈은 `--sf`(카드 바탕)로 준다. 표는 카드 **안**이라 `--bg` 를 주면 회색이 비친다. */
body.ta table.list tr.foldrow td,
body.ta.lib table.list.folders tr.foldrow td,
body.ta tr.loosehead td{
  background:var(--grp);color:#fff;
  border-top:5px solid var(--sf);border-bottom:0;box-shadow:none
}
/* 손을 올리면 **한 단계 밝아진다** — 레일의 `--rail-hov` 와 같은 손짓이다.
   표시선을 `--acc`(#3f6484)로 그으면 잉크 위에서 거의 안 보인다(§3.1-b) →
   어두운 면 위의 옅은 파랑 `--acc-lite` 로 긋는다. */
body.ta table.list.zebra tbody tr.foldrow:hover>td{
  background:var(--grp-hov);border-top-color:var(--sf);border-bottom-color:transparent
}
body.ta table.list.zebra tbody tr.foldrow:hover>td:first-child{
  box-shadow:inset 3px 0 0 var(--acc-lite)
}
/* 글자·꺾쇠·아이콘·알약·단추 — 잉크 위에서는 전부 흰 쪽으로 뒤집는다.
   **바탕만 바꾸고 글자를 두면 이름이 통째로 안 보인다**(2026-08-30 실측). */
/* 미분류 머리줄도 접히게 되면서 꺾쇠와 누르는 단추가 생겼다 (2026-09-09) —
   그 둘도 잉크 띄 위에 서므로 함께 흰쪽으로 뒤집는다. */
body.ta .foldrow .foldhead,body.ta .foldrow .fcar,
body.ta .foldrow .foldhead:hover,
body.ta .loosehead .foldhead,body.ta .loosehead .fcar,
body.ta .loosehead .foldhead:hover,
body.ta .lhnm,body.ta .lhnm b{color:#fff}
body.ta .foldhead .fnm::before,body.ta .lhnm::before{
  filter:grayscale(1) brightness(2.6);opacity:.85
}
body.ta .fcnt{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff
}
body.ta tr.foldrow .btn,body.ta tr.loosehead .btn{
  color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)
}
body.ta tr.foldrow .btn:hover,body.ta tr.loosehead .btn:hover{
  background:rgba(255,255,255,.28)
}
body.ta tr.loosehead .muted{color:rgba(255,255,255,.72)}

/* ── ② 칸 이름 줄 — Sand ────────────────────────────────────────────
   `body.ta .colhead th` (0,2,2) 하나로는 못 이긴다 — 표 머리글 전역 규칙
   `body.ta table.list th` 가 (0,2,3)이라 요소 하나 차이로 앞선다.
   그래서 `tr.colhead` 를 낀 선택자로 적는다. */
body.ta table.list tr.colhead th,
body.ta.lib table.list.folders tr.colhead th{
  background:var(--sand);color:var(--sand-ink);
  border-top:0;border-bottom:1px solid var(--sand-line)
}

/* ── ③ 파일 줄·손 올린 줄 — **손대지 않는다**(2026-09-02 지시) ──────────
   `--zeb1:#fff` · `--zeb2:#f1f2f0` · hover `--acc-bg` 가 위에 그대로 서 있다.
   머리줄 색은 `td` 에 걸리고 얼룩은 `tr` 에 걸리므로 서로 덮지 않는다. */

/* ── ④ 끌어다 놓는 중 — 파란 강조 위에서는 글자를 도로 어둡게 ───────────
   놓을 자리 규칙(위 §「놓을 자리」)이 `td` 를 `--acc-bg` 로 칠하는데, ① 이
   글자를 흰색으로 못 박아 두어 그대로 두면 **끄는 동안 이름이 사라진다.** */
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow .foldhead,
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow .fcar,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead .lhnm,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead .lhnm b{color:var(--acc2)}
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow .fnm::before,
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead .lhnm::before{
  filter:grayscale(1);opacity:.5
}
body.ta table.list.folders tbody.fgrp.dropok .fcnt{
  background:var(--sf);border-color:var(--acc-line);color:var(--acc2)
}
body.ta table.list.folders tbody.fgrp.dropok>tr.foldrow .btn{
  color:var(--ink2);border-color:var(--line);background:var(--sf)
}
body.ta table.list.folders tbody.fgrp.dropok>tr.loosehead .muted{color:var(--ink2)}

/* ══════════════════════════════════════════════════════════════════
   맥락 도움말 — 「왜 이렇게 도는가」를 접어 둔다 (4단계, 2026-09-08)

   화면마다 주 행동 앞에 배경 설명이 서너 줄씩 서 있었다(이월 화면은 1,019자).
   그것은 **처음 한 번** 읽을 말이고, 매일 쓰는 사람에게는 고를 것을 가린다.

   **접는 것은 배경 설명뿐이다.** 지금 무엇을 고르는지에 필요한 값 — 기간·출처·
   범위·실패·잘림·개수 — 은 접지 않는다. 그것을 감추면 사람이 잘못 고른다.

   `roll-details`(이월 화면 전용)와 같은 모양이라 두 화면이 한 손짓으로 읽힌다.
   ══════════════════════════════════════════════════════════════════ */
body.ta .tiphelp{margin:8px 0 0;color:var(--ink2)}
body.ta .tiphelp>summary{display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--sf);color:var(--ink2);font-size:11.5px;font-weight:600;
  cursor:pointer;user-select:none;list-style:none}
body.ta .tiphelp>summary::-webkit-details-marker{display:none}
body.ta .tiphelp>summary::before{content:"?";display:inline-flex;
  align-items:center;justify-content:center;width:13px;height:13px;
  border:1px solid currentColor;border-radius:50%;font-size:9px;line-height:1}
body.ta .tiphelp>summary:hover{color:var(--ink);border-color:var(--line3)}
body.ta .tiphelp[open]>summary{background:#fff;color:var(--ink)}
body.ta .tiphelp p{margin:8px 0 0;font-size:12.5px;line-height:1.65;
  color:var(--ink2)}
body.ta .tiphelp p+p{margin-top:6px}
/* 접혀 있을 때 안쪽이 새어 나오지 않게 — `roll-details` 와 같은 빗장 */
body.ta .tiphelp:not([open])>*:not(summary){display:none!important}

/* ── 좁히기 상자 — 검색 조건을 접어서 한 자리에 (4단계, 2026-09-08)
   `.tiphelp`(맥락 도움말)와 짝이다. 그쪽은 **읽을 것**을 접고 이쪽은
   **고를 것**을 접는다. 색은 여기 토큰에서만 온다(feature CSS 에 hex 금지). */
body.ta .findmore{margin:8px 0 0}
body.ta .findmore>summary{display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--sf);color:var(--ink2);font-size:12px;font-weight:600;
  cursor:pointer;user-select:none;list-style:none}
body.ta .findmore>summary::-webkit-details-marker{display:none}
body.ta .findmore>summary::after{content:"▾";font-size:10px;opacity:.7}
body.ta .findmore[open]>summary::after{content:"▴"}
body.ta .findmore>summary:hover{color:var(--ink);border-color:var(--line3)}
/* 조건이 걸려 있으면 접혀 있어도 눈에 띈다 — 안 그러면 「왜 결과가 적지」를 못 푼다 */
body.ta .findmore.on>summary{border-color:var(--acc-line);background:var(--acc-bg);
  color:var(--acc2)}
body.ta .findmore .fm-sum{font-weight:500;color:var(--acc)}
body.ta .findmore:not([open])>*:not(summary){display:none!important}
body.ta .fm-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  margin-top:8px;padding:10px 12px;border:1px solid var(--line2);
  border-radius:8px;background:var(--bg)}
body.ta .fm-f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;
  color:var(--ink2)}
body.ta .fm-f select,body.ta .fm-f input{height:30px;padding:0 8px;
  border:1px solid var(--inp);border-radius:6px;background:var(--sf);
  font-size:12.5px;color:var(--ink)}
body.ta .fm-corp input{width:200px}
body.ta .fm-body .btn.tiny{height:30px}

/* ── 짝이 안 맞는 두 문서를 견줄 때의 띠 (T04, 2026-09-08)
   차이 숫자보다 먼저 읽혀야 하므로 요약 상자 안에서 한 줄을 통째로 쓴다.
   **경고는 접지 않는다**(CLAUDE.md — 오류·경고·검증 결과는 안 접는다). */
body.ta .sc-pairwarn{flex:1 0 100%;margin:0 0 8px;padding:10px 12px;
  border:1px solid var(--bad-line);border-left:4px solid var(--bad);
  border-radius:6px;background:var(--bad-bg);color:var(--bad);
  font-size:12.5px;line-height:1.55}
body.ta .sc-pairwarn b{display:block;margin-bottom:3px;font-size:13px}
body.ta .sc-pairwarn .muted{color:var(--ink2);font-size:11.5px;margin-top:4px}

/* ── Workspace 아래 딸린 줄 (IA v3, 2026-09-09 지시)
   Finder 들이 제 Workspace 안으로 들어가면서 레일에 층이 하나 생겼다.
   **접히는 층이 아니라 소속을 보이는 들여쓰기**다 — 누르면 바로 그 화면으로
   가고, 누르는 횟수는 종전과 같다(§15 깊이를 안 늘린다).

   들여쓰기는 **아이콘이 아니라 줄 전체**를 민다. 아이콘만 밀면 선택 막대
   (`.ta-i.on::before`)와 어긋나 층이 두 자리에서 다르게 읽힌다.

   **접힌 레일(`ta-slim`·`ta-narrow`)에서는 들여쓰기를 끈다** — 폭이 52px 뿐이라
   한 칸만 밀어도 아이콘이 잘린다. */
body.ta .ta-i.ta-sub{margin-left:14px;font-size:12.5px}
body.ta .ta-i.ta-sub .ta-ic{width:15px;height:15px}
body.ta.ta-slim .ta-i.ta-sub,
body.ta.ta-narrow .ta-i.ta-sub{margin-left:0}

/* **이름뿐인 머리줄** (2026-09-09 지시 — Audit Workspace 는 눌러도 갈 화면이
   없다). 자리와 글자 크기는 다른 Workspace 줄과 똑같이 두어 층이 같게 읽히되,
   **누를 수 있다는 신호만 걷는다** — 손가락 커서와 얹었을 때의 바탕색이 그것이다.
   그 둘을 남겨 두면 눌러 보고서야 아무 일도 안 일어남을 알게 된다. */
body.ta .ta-i.ta-hd{cursor:default}
body.ta .ta-i.ta-hd:hover{background:transparent;color:var(--rail-ink)}
body.ta .ta-i.ta-hd:hover .ta-ic{color:var(--rail-ink2)}

/* Audit Workspace 홈 — 감사 업무 넷을 한자리에 세운 카드 줄.
   업무 홈(`.hm-*`)과 **같은 부품**을 쓰므로 여기서는 아무 색도 새로 만들지 않는다. */
body.ta .aud-lead{margin:0 0 14px;color:var(--ink2);font-size:13px;line-height:1.7}

/* Workspace 무리를 가르는 줄 (2026-09-09 지시 — *"다 붙어있어서 헷갈려"* ·
   이어서 *"구분자를 흰색으로 해주고, 대신 칸을 띄우지마 레일 공간이 모자라"*).

   **위아래 여백이 없다.** 무리가 넷이라 5px 씩만 줘도 아래 무리(TOOLS·EXTERNAL)가
   그만큼 화면 밖으로 밀린다. 여백 대신 **선을 또렷하게** 해서 가른다 —
   레일 바탕이 어두운 잉크라 흰 선 한 줄이면 여백 없이도 무리가 갈린다
   (여느 구분선은 `rgba(255,255,255,.08)` 로 거의 안 보인다).

   `body.ta .ta-nav .ta-sepline` (0,3,1)이라 파일 위쪽 다크 보정
   `body.ta .ta-sepline` (0,2,1)을 차례와 무관하게 이긴다. */
body.ta .ta-nav .ta-sepline{margin:0 12px;background:rgba(255,255,255,.5)}

/* ══════════════════════════════════════════════════════════════════
   문서 목록이 **배율을 따라간다** (2026-09-10 지시 — *"배율이 다른 화면으로
   옮겨도 기본 화면 처럼 나오게"* · *"자동으로"*)

   **까닭** — 열 폭이 어느 배율에서도 1,732px 로 붙박이였다. 배율을 올리면
   쓸 수 있는 폭만 줄고 표는 그대로라 옆으로 넘쳤다(실측: 1920 화면 100% 에서
   96px · 125% 480px · 1366 노트북 650px). 넘친 표는 가로로 굴러 닿기는 하지만
   **거기 무엇이 있는지 모른 채** 굴려야 한다.

   **가르는 자를 따로 두지 않는다.** 미디어 쿼리로 「몇 px 아래면」을 적으면
   레일을 접었을 때(236px → 52px) 어긋나고, 배율·창 크기·레일이 저마다 다른
   자를 타게 된다. 대신 **표가 스스로 상자에 맞게** 만든다 —
     ① 줄 끝 단추는 늘 접는다(`data-keep` · `library.html`)
     ② 다른 칸은 제 폭을 지키고
     ③ **파일명 칸이 남는 폭을 먹고, 모자라면 제일 먼저 줄어든다**
   그러면 배율이 얼마든 표는 늘 상자 안에 들어오고, 모습도 늘 같다.
   ══════════════════════════════════════════════════════════════════ */

/* **파일명 칸의 `min-width` 는 위 §DSD 목록에서 240 으로 낮췄다** — 여기에 또
   적지 않는다. 이 파일 안에 같은 칸을 짚는 규칙이 이미 둘 있고(`body.ta
   table.list td.nmcell` · `body.ta.lib table.list.folders td.nmcell`), 셋이 되면
   다음 사람이 어느 것이 이기는지부터 세어야 한다.
   (처음에 여기 `max-width:0;width:100%` 를 적었다가 걷었다 — 특이도가 (0,3,1)
   이라 (0,4,1) 인 `.lib` 규칙에 져서 한 픽셀도 안 움직였다.
   → [[feedback_css_rule_wrong_ancestor]]) */

/* **프로젝트 멤버 칸은 제 몫만 쓴다.** `.invslot` 이 `flex:1 1 auto` 라 남는
   자리를 다 먹는다. 이름은 딸림표에 온전히 있고, 화면에는 몇이 보이면 된다.
   좁아지면 `.invwho` 가 먼저 줄고 초대 단추는 남는다. */
body.ta.lib table.list.folders td.inv-cell { max-width: 190px; }
body.ta.lib table.list.folders td.inv-cell .invslot { min-width: 0; }
body.ta.lib table.list.folders td.inv-cell .invwho { max-width: 110px; }

/* 수정자·수정일시는 **손대지 않는다** — 둘이 합쳐 222px 이라 이미 좁고
   (실측 102 · 120), 좁다고 감추면 「누가 언제 고쳤나」를 못 본다.
   이 목록에서 그 두 칸은 클래스가 없어 짚을 자리도 마땅치 않다. */