/* Pretendard 1.3.9 — SIL Open Font License; public/fonts/pretendard/LICENSE.txt */
@font-face{
  font-family:"Pretendard Variable";
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("/fonts/pretendard/PretendardVariable.woff2") format("woff2");
}

/* ================================================================
   디자인 토큰 — PRD v0.4 §11
   ================================================================ */
:root{
  /* grey */
  --grey50:#F8F9FB; --grey100:#F2F4F6; --grey200:#E5E8EB; --grey300:#D9DDE2;
  --grey400:#C3C8CF; --grey500:#9AA1AB; --grey600:#7A828D; --grey700:#4E5764;
  --grey800:#333B45; --grey900:#1B222B;
  /* blue */
  --blue50:#EEF4FE; --blue100:#DCE8FD; --blue400:#5B95F5; --blue500:#3577F0;
  --blue600:#2563DB; --blue700:#1D53BC;
  /* green (적합) */
  --green50:#EEFAF2; --green100:#D5F2E0; --green500:#17A45C; --green700:#13804A; --green900:#0D5730;
  /* red (확인필요) */
  --red50:#FDF0F0; --red100:#F9D9D9; --red500:#E0393E; --red700:#B32226; --red800:#951B1F;
  /* orange (입력 확인 · 반려 안내 · 규칙 심각도 '보통') */
  --orange50:#FEF5EC; --orange100:#FBE4CC; --orange500:#EE7D22;
  /* yellow (개인정보 안내) */
  --yellow50:#FFFBEA; --yellow100:#F3E6A1; --yellow900:#5C4B00;
  /* opacity */
  --shadow-1:0 1px 2px rgba(27,34,43,.05), 0 2px 8px rgba(27,34,43,.04);
  --shadow-2:0 4px 16px rgba(27,34,43,.10);
  --scrim:rgba(27,34,43,.56);

  --font:"Pretendard Variable", sans-serif;

  /* ── 타입 스케일 — 5단계, 단계마다 1.25배 ──────────────────
     이전 10단계는 11~22px에 몰려 인접 단계 차이가 6~13%였다. 22·20·18·17px가
     사실상 같은 크기로 읽혀, 위계를 크기가 아니라 회색 농담이 떠받치고 있었다.
     훑는 화면이므로 위계는 크기와 여백이 지고, 색은 상태에만 쓴다.

     display 30 ─ page 24 ─ title 19 ─ body 16 ─ micro 13

     아래 옛 이름들은 호출부 200여 곳을 건드리지 않으려고 남긴 별칭이다.
     새로 쓸 때는 --fs-* / --lh-* 를 직접 쓴다. */
  --fs-display:30px; --lh-display:40px;   /* 계약 상세 제목 */
  --fs-page:24px;    --lh-page:33px;      /* 페이지 제목 · 스탯 수치 */
  --fs-title:19px;   --lh-title:27px;     /* 판정 문구 · 모달/카드/빈상태 제목 */
  --fs-body:16px;    --lh-body:24px;      /* 본문 · 표 본문 · 버튼 · 입력 */
  --fs-micro:13px;   --lh-micro:19px;     /* 보조 설명 · 라벨 · 칩 · 배지 · 표 머리글 */

  --t3-size:var(--fs-display); --t3-lh:var(--lh-display);
  --t4-size:var(--fs-page);    --t4-lh:var(--lh-page);
  --s9-size:var(--fs-title);   --s9-lh:var(--lh-title);
  --t5-size:var(--fs-title);   --t5-lh:var(--lh-title);
  --t6-size:var(--fs-body);    --t6-lh:var(--lh-body);
  --s11-size:var(--fs-body);   --s11-lh:var(--lh-body);
  --t7-size:var(--fs-micro);   --t7-lh:var(--lh-micro);
  --s12-size:var(--fs-micro);  --s12-lh:var(--lh-micro);
  --s13-size:var(--fs-micro);  --s13-lh:var(--lh-micro);

  /* radius — 겉면 --r, 겉면 안에 드는 면 --r-sm, 창처럼 큰 면만 --r-lg.
     안쪽 면이 바깥 면과 같은 값을 쓰면 모서리 호가 서로 어긋난다. */
  --r:6px; --r-sm:3px; --r-lg:8px;
  --sidebar-w:236px;
  --sidebar-offset:var(--sidebar-w);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:var(--t6-size); line-height:var(--t6-lh);
  color:var(--grey900); background:var(--grey100);
  letter-spacing:-.01em; word-break:keep-all;
}
button{font-family:inherit; letter-spacing:inherit; cursor:pointer}
input,textarea,select{font-family:inherit; letter-spacing:inherit}
code,pre,kbd,samp{font-family:inherit}
.num{font-variant-numeric:tabular-nums}
a{color:var(--blue600); text-decoration:none}
a:hover{color:var(--blue700); text-decoration:underline}
:focus-visible{outline:2px solid var(--blue500); outline-offset:2px}
[hidden]{display:none !important}

/* ================================================================
   앱 셸
   ================================================================ */
.app{display:flex; min-height:100vh}

/* ---- 사이드바 (전역) ---- */
.sidebar{
  --sb-bg:var(--grey100); --sb-active:var(--blue100);
  --sb-text:var(--grey900); --sb-muted:var(--grey800);
  /* 황금비에 가까운 5·8·13px 여백. 글자 크기와 색은 가독성을 우선한다. */
  --sb-space-xs:5px; --sb-space-sm:8px; --sb-space-md:13px;
  --sb-font-size:14px; --sb-line-height:22px;
  width:var(--sidebar-w); flex:none;
  background:var(--sb-bg); color:var(--sb-text); border-right:1px solid var(--grey200);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
}
.sb-head{flex:none}
.sidebar-toggle{display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:none; width:40px; height:40px; border:1px solid var(--grey300); border-radius:var(--r); background:#fff; color:var(--grey700)}
.sidebar-toggle:hover{background:var(--grey100)}
.sb-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:transparent transparent}
.sb-scroll:hover,.sb-scroll:focus-within{scrollbar-color:rgba(158,178,198,.45) transparent}
.sb-scroll::-webkit-scrollbar{width:5px}
.sb-scroll::-webkit-scrollbar-track{background:transparent}
.sb-scroll::-webkit-scrollbar-thumb{background:transparent; border-radius:99px}
.sb-scroll:hover::-webkit-scrollbar-thumb,.sb-scroll:focus-within::-webkit-scrollbar-thumb{background:rgba(158,178,198,.45)}
.sb-expand{border-color:transparent; background:transparent}
.sb-drawer-close{display:none}
.sidebar-backdrop{display:none}
body.sidebar-collapsed{--sidebar-offset:0px}
body.sidebar-collapsed .sidebar{display:none}
/* 사이드바는 넘침을 자르므로 손잡이는 바깥 형제로 두고 경계선 위에 걸친다.
   topbar의 메뉴 버튼과 나란히 붙어 중복처럼 보이지 않도록 topbar 아래로 내린다.
   평소엔 화살표만, 가리키면 원이 드러나 누를 수 있는 단추임을 알린다.
   밝은 사이드바와 본문 사이에서는 진한 화살표와 얇은 흰 테두리로 구분한다. */
.sidebar-handle{
  position:fixed; left:calc(var(--sidebar-w) - 16px); top:80px; z-index:30;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--grey800);
  transition:background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}
.sidebar-handle::before{content:""; position:absolute; inset:-6px; border-radius:50%}
.sidebar-handle svg{filter:none}
.sidebar-handle .halo{stroke:#fff}
.sidebar-handle:hover svg,.sidebar-handle:focus-visible svg{filter:none}
.sidebar-handle:hover,.sidebar-handle:focus-visible{background:#fff; border-color:var(--grey300); box-shadow:var(--shadow-1); color:var(--blue600)}
body.sidebar-collapsed .sidebar-handle{display:none}
body.sidebar-drawer-open{overflow:hidden}
/* 홈으로 가는 버튼이다 — 로고를 누르면 첫 화면이라는 흔한 약속을 지킨다.
   메뉴 항목처럼 면을 깔면 상단이 무거워져, 밝기만 움직여 누를 수 있음을 알린다. */
.sb-brand{
  display:block; padding:5px 10px 9px; overflow:hidden;
  width:100%; border:none; background:none; text-align:left;
}
/* 밝은 원본(2033px)의 그림 범위 약 246~1796px를 좌우 10px 안쪽에 맞춘다.
   사이드바 236px 기준 그림 폭을 180px에서 216px로 20% 키운다.
   원본의 흰 바탕은 multiply로 옅은 회색 사이드바에 자연스럽게 이어 준다. */
.sb-logo-img{
  display:block; width:131.16%; max-width:none; height:auto; margin-left:-15.87%;
  mix-blend-mode:multiply;
  transition:opacity .12s;
}
.sb-brand:hover .sb-logo-img{opacity:.82}

/* 메뉴의 왼쪽 여백(그룹 · 제목 · 들여쓰기 · 항목 · 선택 막대)은 같은 비율로 함께 줄인다 — 하나만 줄이면 단이 어긋난다 */
.sb-group{padding:0 var(--sb-space-md) 0 var(--sb-space-sm)}
.sb-group + .sb-group{margin-top:var(--sb-space-md)}
.sb-scroll > .sb-group:first-child{margin-top:var(--sb-space-sm)}
.sb-cap{
  font-size:13px; line-height:21px; font-weight:700;
  color:#000; letter-spacing:0; padding:var(--sb-space-xs) 10px var(--sb-space-xs) 6px;
}
button.sb-cap{display:flex; align-items:center; justify-content:space-between; width:100%; border:none; background:transparent; text-align:left; cursor:pointer; border-radius:var(--r)}
button.sb-cap:hover{background:var(--grey200); color:#000}
button.sb-cap::before{content:""; flex:none; width:5px; height:5px; margin-right:8px; border-radius:1.5px; background:currentColor}
button.sb-cap .sb-chev{margin-left:auto}
.sb-chev{flex:none; transition:transform .15s}
.sb-cap[aria-expanded="false"] .sb-chev{transform:rotate(-90deg)}
.sb-body[hidden]{display:none}
.sb-body{padding-left:7px}
.sb-item{
  display:flex; align-items:center; gap:var(--sb-space-sm); width:100%;
  padding:var(--sb-space-xs) 10px var(--sb-space-xs) 6px; border:none; background:transparent; border-radius:var(--r);
  color:var(--sb-text); font-size:var(--sb-font-size); line-height:var(--sb-line-height); font-weight:500;
  text-align:left; position:relative;
}
.sb-item svg{flex:none; color:var(--sb-muted)}
.sb-item:hover{background:var(--grey200); color:var(--grey900)}
.sb-item[aria-current="page"]{background:var(--sb-active); color:var(--blue700); font-weight:600}
.sb-item[aria-current="page"]::before{
  content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:3px;
  border-radius:0 2px 2px 0; background:var(--blue600);
}
.sb-item:hover svg,.sb-item[aria-current="page"] svg{color:currentColor}
.sb-count{
  margin-left:auto; font-size:12px; line-height:16px; font-weight:650;
  padding:1px 6px; border-radius:99px; background:var(--grey200); color:var(--sb-muted);
}
.sb-item[aria-current="page"] .sb-count:not(.warn):not(.doc){background:#fff; color:var(--blue700)}
.sb-count.warn{background:var(--red700); color:#fff}
.sb-count.doc{background:var(--orange100); color:#8A4000}
.sb-item.disabled{opacity:.38; cursor:default}
.sb-item.disabled:hover{background:transparent; color:var(--sb-text)}
.sb-m5{margin-left:auto; font-size:var(--s13-size); line-height:1; color:var(--sb-muted); border:1px solid var(--grey300); border-radius:var(--r-sm); padding:2px 5px}

/* 보조 링크는 단색 배경과 작은 아이콘으로 구분한다. */
/* 두 버튼은 같은 폭으로 정렬한다. 기존 좌우 여백 약 31.35px를 40% 줄인다. */
.sb-links{flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:4.8px;padding:12px 18.8px}
.sb-cta{
  height:35px;
  padding:0 12px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--cta-border); border-radius:calc(var(--r) * 1.3);
  background:var(--cta-bg); color:var(--grey800); text-decoration:none; text-align:center;
  font-family:var(--font); font-size:14px; line-height:22px; font-weight:600;
  letter-spacing:-.02em;
  transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;
}
/* 마우스를 올리면 배경·테두리·글자·아이콘이 한 단계씩 진해진다. */
.sb-guide{
  --cta-bg:var(--blue50);
  --cta-border:color-mix(in srgb,var(--blue100) 50%,var(--blue500)); --cta-accent:var(--blue700);
  --cta-hover:var(--blue100); --cta-hover-border:color-mix(in srgb,var(--blue500) 50%,var(--blue700));
  --cta-icon-hover:var(--blue700);
}
.sb-hotline{
  --cta-bg:var(--grey50);
  --cta-border:color-mix(in srgb,var(--grey300) 50%,var(--grey700)); --cta-accent:var(--grey700);
  --cta-hover:var(--red100); --cta-hover-border:color-mix(in srgb,var(--red500) 50%,var(--red800));
  --cta-icon-hover:var(--red800);
}
.sb-cta:hover{background:var(--cta-hover); border-color:var(--cta-hover-border); color:var(--grey900); text-decoration:none}
.sb-cta:focus-visible{background:var(--cta-hover); border-color:var(--cta-accent)}
.sb-guide:is(:hover,:focus-visible){border-color:var(--cta-hover-border); box-shadow:0 0 0 2px rgba(53,119,240,.16),0 3px 10px rgba(29,83,188,.18)}
.sb-hotline:is(:hover,:focus-visible){border-color:var(--cta-hover-border); box-shadow:0 0 0 2px rgba(224,57,62,.16),0 3px 10px rgba(179,34,38,.18)}
.sb-cta-icon{flex:none; width:16px; height:16px}
.sb-guide .sb-cta-icon{color:var(--blue700)}
.sb-hotline .sb-cta-icon{color:var(--red700)}
.sb-cta:is(:hover,:focus-visible) .sb-cta-icon{color:var(--cta-icon-hover)}
.sb-cta-label{min-width:0; overflow-wrap:anywhere; color:var(--cta-accent)}
@media (forced-colors:active){
  .sb-cta-label,.sb-cta:is(:hover,:focus-visible) .sb-cta-label{background:none; color:LinkText; -webkit-text-fill-color:currentColor}
}

/* 메뉴만 스크롤하고 로그인 정보는 링크 아래 최하단에 둔다. */
.sb-account{
  display:flex; align-items:flex-start; gap:10px; flex:none;
  margin:0 16px; padding:14px 0 max(16px,env(safe-area-inset-bottom));
  border-top:1px solid var(--grey200);
}
.sb-account .avatar{
  flex:none; background:var(--blue100); color:var(--blue700); margin-top:2px;
}
.sb-user{min-width:0; font-size:13px; line-height:20px; color:var(--sb-muted); overflow-wrap:anywhere}
.sb-user b{display:block; color:var(--sb-text); font-weight:600; font-size:13px}
.sb-user span{display:block; margin-top:1px}

/* ---- 메인 ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:4px 32px; background:#fff; border-bottom:1px solid var(--grey200);
  position:sticky; top:0; z-index:20;
}
/* 지금 어디에 있는지를 말하는 줄이라 본문 크기로 읽는다.
   마디 사이 여백은 gap이 준다 — 구분자 앞뒤로 한 칸씩. */
.crumb{font-size:var(--fs-body); line-height:var(--lh-body); color:var(--grey600); display:flex; align-items:center; gap:6px; min-width:0}
.crumb b,.topbar-date{color:var(--grey900); font-weight:600; white-space:nowrap}
.crumb b{overflow:hidden; text-overflow:ellipsis}
.crumb .sep{color:var(--grey400)}
.crumb button{border:none; background:none; color:var(--grey600); font-size:var(--fs-body); padding:0}
.crumb button:hover{color:var(--blue600); text-decoration:underline}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.topbar-date{font-size:calc(var(--fs-body) - 2px); line-height:var(--lh-body)}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--blue100); color:var(--blue700);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; line-height:1;
}

/* 1120px 은 글의 읽기 폭이다 — 한 줄이 이보다 길면 줄을 바꿀 때 다음 줄 첫 글자를
   놓친다. 검토 결과·기준정보처럼 문장이 주인공인 화면은 이 폭을 지킨다.
   계약 현황은 표가 주인공이라 칸이 잘리는 쪽이 더 나쁘므로 폭을 넓게 준다. */
.content{padding:26px 32px 60px; max-width:1120px; width:100%; margin:0 auto}
/* 열이 많은 추출·검토 대조표는 기본 읽기 폭보다 넓은 작업 공간을 쓴다. */
.content.wide{max-width:1600px}
/* 사이드바를 제외한 본문 기준: 계약 현황은 좌우 7.5%, 계약 상세는 좌우 10%. */
@media screen{
  .content:has(> #screen-detail.active){max-width:none; padding-inline:10%}
  .content:has(> :is(#screen-ledger, #screen-home).active){max-width:none; padding-inline:7.5%}
}

.screen{display:none}
.screen.active{display:block; animation:fadein .18s ease}
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none}}

/* ================================================================
   공통 컴포넌트
   ================================================================ */
.page-head{margin-bottom:18px}
#screen-ledger > .page-head{margin-bottom:14px}
.page-title{font-size:var(--t4-size); line-height:var(--t4-lh); font-weight:800; letter-spacing:-.02em}
.page-sub{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600); margin-top:3px}
/* 뒤로 — 제목 위에 조용히 놓이는 글자 단추. 지금까지 스타일이 없어 브라우저 기본
   단추(테두리·회색 면)로 나왔고, 그래서 화면에서 가장 눌러야 할 것처럼 보였다.
   실제로는 나가는 길일 뿐이므로 면도 테두리도 두지 않고, 화살표는 글자가 아니라
   선으로 그린다 — 글자 '←'는 서체마다 굵기와 높이가 달라 제목과 어긋난다. */
.back-btn{
  display:inline-flex; align-items:center; gap:7px;
  margin:0 0 12px -8px; padding:5px 9px 5px 8px;
  border:none; border-radius:var(--r-sm); background:none;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:var(--grey600);
}
.back-btn::before{
  content:''; flex:none; width:7px; height:7px; margin-top:1px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.back-btn:hover{background:var(--grey200); color:var(--grey900)}

.card{
  background:#fff; border:1px solid var(--grey200); border-radius:var(--r);
  box-shadow:var(--shadow-1);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600;
  padding:8px 16px; border-radius:var(--r); border:1px solid transparent;
  transition:background .12s;
}
.btn-primary{background:var(--blue500); color:#fff}
.btn-primary:hover{background:var(--blue600)}
.btn-ghost{background:#fff; color:var(--grey800); border-color:var(--grey300)}
.btn-ghost:hover{background:var(--grey50)}
/* 아직 하지 않았지만 지금 시작할 수 있는 일 — 파랑은 쓰되 면은 비운다.
   이미 나와 있는 결과를 여는 단추(채운 파랑)와 색이 같으면 둘을 구분할 수 없다. */
.btn-outline{background:#fff; color:var(--blue600); border-color:var(--blue400)}
.btn-outline:hover{background:var(--blue50); border-color:var(--blue500)}
.btn-sm{font-size:var(--t7-size); line-height:var(--t7-lh); padding:5px 11px}
.btn:disabled{opacity:.5; cursor:default}

/* 판정 마크 — ✓ / ! / 점선 빈칸 */
.mark{
  width:22px; height:22px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; line-height:1;
}
.mark.pass{background:var(--green500); color:#fff}
.mark.review{background:var(--red500); color:#fff}
.mark.none{background:transparent; border:1.5px dashed var(--grey400)}
.mark.doc{background:var(--orange500); color:#fff}
.mark.sm{width:18px; height:18px; font-size:11px}

/* 출처 배지 */
.src{
  display:inline-flex; align-items:center;
  font-size:var(--s13-size); line-height:1; font-weight:600;
  padding:3px 6px; border-radius:var(--r-sm); vertical-align:middle;
}
.src.orig{background:var(--grey100); color:var(--grey700); border:1px solid var(--grey200)}
.src.ocr{background:var(--blue50); color:var(--blue700); border:1px solid var(--blue100)}
.src.manual{background:var(--grey100); color:var(--grey700); border:1px dashed var(--grey400)}

/* 상태 칩 */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--s13-size); line-height:1; font-weight:600;
  padding:4px 8px; border-radius:var(--r-sm);
}
.chip .dot{width:5px; height:5px; border-radius:50%; flex:none}
.chip.pass{background:var(--green50); border:1px solid var(--green100); color:var(--green900)}
.chip.pass .dot{background:var(--green500)}
.chip.review{background:var(--red50); border:1px solid var(--red100); color:var(--red700)}
.chip.review .dot{background:var(--red500)}
/* 주황 칩 — 확인필요(빨강)와 미검토(회색) 사이. 규칙 관리의 '보통' 심각도가 쓴다 */
.chip.mid{background:var(--orange50); border:1px solid var(--orange100); color:var(--grey800)}
.chip.mid .dot{background:var(--orange500)}
.chip.idle{background:var(--grey100); border:1px solid var(--grey200); color:var(--grey600)}
.chip.idle .dot{background:var(--grey400)}
.chip.work{background:var(--blue50); border:1px solid var(--blue100); color:var(--blue700)}
.chip.work .dot{background:var(--blue500)}
.chip.confirmed{background:var(--blue50); border:1px solid var(--blue100); color:var(--blue700); font-weight:700}
.chip.confirmed .chip-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:var(--blue600); color:#fff; font-size:10px; line-height:1; font-weight:800;
}
.chip.done{background:var(--grey100); border:1px solid var(--grey200); color:var(--grey700)}
.chip.done .dot{background:var(--grey600)}

/* 신뢰도 5단계 점 */
.conf{display:inline-flex; gap:2.5px; align-items:center}
.conf i{width:4.5px; height:4.5px; border-radius:50%; background:var(--grey300)}
.conf i.on{background:var(--blue500)}
.conf.low i.on{background:var(--orange500)}

/* 보이지 않지만 화면 낭독기는 읽는 글 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ================================================================
   홈 — 로그인하면 처음 서는 자리
   ================================================================ */
/* 줄을 바꾸는 기준은 화면이 아니라 홈의 폭이다 — 사이드바를 접고 펴도 같은 자리에서 바뀐다.
   양옆은 계약 현황과 같은 자리에 맞추되, 아주 넓은 화면에서는 한 줄이 늘어지지 않게 멈춘다. */
#screen-home{--home-review:#D4882A; --home-review-ink:#805C28; --home-sheen:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 65%); container:home / inline-size; max-width:1480px; margin-inline:auto}
.home-head{margin-bottom:20px}
.home-head .page-title{min-height:var(--t4-lh)}

/* 시작하기 — 한 장의 카드를 두 칸으로 나눈다. 왼쪽은 계약 신규 등록(받는 창을 여는 파란 단추 하나),
   오른쪽은 사전 검토 네 기능을 한 줄로. 두 칸 모두 '이름표 → 단추' 순서라 단추가 같은 높이에 선다. */
.home-start{margin-bottom:16px}
.home-start-body{display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2.8fr)}
.home-start-col{min-width:0; display:flex; flex-direction:column; gap:10px; padding:18px 20px}
.home-start-col + .home-start-col{border-left:1px solid var(--grey100)}
/* 계약 신규 등록 단추 — 홈과 계약 전체현황이 같은 단추를 쓴다(파랑·더하기·굵은 글씨).
   크기는 놓인 자리를 따른다: 홈에서는 칸을 채우고, 계약 전체현황에서는 도구 막대 높이에 맞춘다. */
.btn-cta{gap:8px; font-weight:700; white-space:nowrap}
.home-cta{width:100%; min-height:46px}
.home-preview-fns{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.home-preview-fns button{
  display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:46px;
  padding:0 12px; border:1px solid var(--grey300); border-radius:var(--r);
  background:#fff; color:var(--grey800); white-space:nowrap;
  font-size:15px; line-height:22px; font-weight:600;
  transition:border-color .12s, background .12s, color .12s;
}
.home-preview-fns button > span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.home-preview-fns .home-no{color:var(--blue600)}
.home-preview-fns button:hover{border-color:var(--blue400); background:var(--blue50); color:var(--blue700)}
.home-preview-fns button:hover .home-no{color:var(--blue700)}

/* 계약 신규 등록 창 — 점선 칸 하나. 누르면 파일을 고르고, 끌어다 놓아도 받는다 */
.modal.upload-modal{max-width:520px}
.upload-modal-body{padding:20px 22px 22px}
.upload-drop{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:40px 20px 36px; border:1.5px dashed var(--blue400); border-radius:var(--r-lg);
  background:var(--blue50); color:var(--grey800);
  transition:border-color .15s, background .15s;
}
.upload-drop:hover,.upload-drop.drag{border-color:var(--blue600); background:var(--blue100)}
.upload-drop:focus-visible{outline-offset:3px}
.upload-drop-icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--blue600); box-shadow:var(--shadow-1);
  transition:transform .15s;
}
.upload-drop:hover .upload-drop-icon,.upload-drop.drag .upload-drop-icon{transform:translateY(-2px)}
.upload-drop-title{font-size:var(--fs-body); line-height:var(--lh-body); font-weight:700; color:var(--blue700); text-align:center}
.upload-formats{display:flex; flex-wrap:wrap; justify-content:center; gap:5px}
.upload-formats .fmt{background:#fff; border-color:var(--blue100); color:var(--grey700)}

/* 기능 번호 — 테두리 숫자. 원문자(①)는 작은 글씨에서 점처럼 뭉개진다 */
.home-no{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:16px; height:16px; border-radius:50%; border:1.3px solid currentColor;
  font-size:11px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums;
}

/* 그래프의 확인필요는 도넛과 같은 채도의 호박색이다(도넛의 주황·노랑과 같은 거리로 떨어뜨렸다). 뱃지는 차분한 황토색을 그대로 쓴다.
   막대·범례 점·도넛에는 위에서 내려오는 옅은 빛(--home-sheen)을 얹는다 — 색 자체는 바꾸지 않는다. */
.home-dot{display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background-color:var(--grey300)}
.home-dot.review{background-color:var(--home-review)}
.home-dot.done{background-color:var(--blue600)}
.home-dot,.home-donut-dot{background-image:var(--home-sheen)}

/* 패널 — 머리줄(제목·바로 가기)과 목록. 목록 줄은 통째로 눌리는 단추다 */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-bottom:16px}
.home-panel{min-width:0; display:flex; flex-direction:column; overflow:hidden}
.home-panel-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px;
  padding:14px 20px 12px; border-bottom:1px solid var(--grey100);
}
/* 제목은 꺾지 않는다 — 폭이 모자라면 옆의 범례·바로 가기가 다음 줄로 내려간다 */
.home-panel-head h2{display:flex; align-items:center; gap:8px; white-space:nowrap}
.home-panel-head h2,.home-start .home-cap{font-size:var(--fs-body); line-height:var(--lh-body); font-weight:700; color:var(--grey900)}
.home-title-label{display:inline-flex; align-items:center; gap:8px; vertical-align:middle; white-space:nowrap}
.home-title-icon{flex:none; color:var(--grey800)}
.home-list + .home-panel-head{border-top:1px solid var(--grey200)}
.home-count{
  padding:0 7px; border-radius:99px; font-size:12px; line-height:18px; font-weight:700;
  background:#F5EFE5; border:1px solid transparent; color:var(--home-review-ink);
}
.home-more{
  flex:none; display:inline-flex; align-items:center; gap:1px;
  margin-right:-6px; padding:3px 4px 3px 6px; border:0; border-radius:var(--r-sm); background:none;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:var(--grey600);
  transition:color .12s, background .12s;
}
.home-more:hover{color:var(--blue600); background:var(--blue50)}
.home-list{list-style:none}
.home-list > li + li{border-top:1px solid var(--grey100)}
.home-empty{padding:18px 20px; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey500)}

/* 확인필요 계약 — 한 줄 요약을 펼쳐 확인 사유와 미검토 항목을 함께 읽는다.
   글자 위계는 카드 제목(16) > 계약명(15) > 펼친 사유(14) > 딸린 정보(13) > 상태 표시(12)다.
   줄 높이(54px)는 계약 다섯 줄이 옆 공지사항·참고자료 카드와 아래 끝을 맞추는 값이다. */
.home-row{
  display:flex; align-items:center; gap:10px; width:100%; list-style:none; cursor:pointer;
  padding:15px 20px 15px 28px; border:0; background:none; text-align:left; color:inherit;
  transition:background .12s;
}
.home-row::-webkit-details-marker{display:none}
.home-row::marker{content:''}
.home-row:hover,.home-contract[open] > .home-row{background:var(--grey50)}
.home-row:focus-visible,.home-post:focus-visible{outline-offset:-2px}
.home-row-bullet{flex:none; width:5px; height:5px; border-radius:50%; background:var(--grey600)}
.home-row-head{flex:1; display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap}
.home-row-name{
  flex:0 1 auto; min-width:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:15px; line-height:24px; font-weight:700; color:var(--grey900);
  transition:color .12s;
}
.home-row:hover .home-row-name{color:var(--blue700)}
.home-tag{
  flex:none; padding:1px 6px; border-radius:var(--r-sm);
  font-size:12px; line-height:18px; font-weight:600;
  color:var(--blue700); background:var(--blue50); border:1px solid var(--blue100);
}
.home-row-head .home-row-meta{margin-left:2px}
.home-row-meta{display:flex; flex:0 1 auto; min-width:0; font-size:13px; line-height:20px; color:var(--grey600)}
.home-row-meta > span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.home-row-meta > .home-meta-site,.home-row-meta > .home-meta-amount{flex:none}
.home-row-meta > span + span::before{content:'·'; margin:0 6px; color:var(--grey400)}
.home-chev{flex:none; color:var(--grey400); transition:transform .12s, color .12s}
.home-row:hover .home-chev{color:var(--blue600)}
.home-contract[open] > .home-row .home-chev{transform:rotate(90deg)}
/* 펼친 내용은 계약명 첫 글자(왼쪽 28 + 점 5 + 간격 10 = 43px)에 맞춰 들여 쓴다 */
.home-contract-body{padding:0 20px 16px 43px; background:var(--grey50)}
.home-checks{list-style:none; display:grid; gap:9px; padding-top:14px; border-top:1px solid var(--grey200)}
.home-check{display:grid; grid-template-columns:108px minmax(0,1fr) auto; gap:12px; align-items:center; font-size:14px; line-height:22px}
/* 펼친 내용의 글자는 검정, 상태 뱃지는 굵게 */
.home-check-label{color:#000}
.home-check-reason{color:#000; overflow-wrap:anywhere}
.home-check-state{padding:0 8px; border-radius:var(--r-sm); background:#F5EFE5; color:var(--home-review-ink); font-size:12px; line-height:22px; font-weight:700; white-space:nowrap}
.home-check.is-idle .home-check-state{background:var(--grey200); color:var(--grey700)}
.home-contract-actions{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px}
.home-contract-actions .home-more{margin-left:auto}
@media(prefers-reduced-motion:reduce){.home-contract .home-chev{transition:none}}

/* 공지사항 · 참고자료 — 제목 한 줄과 날짜. 넘치는 제목은 말줄임하고, 전체 제목은 글에서 읽는다.
   점·들여쓰기·글자 크기는 확인필요 계약 줄과 같고, 굵기는 보통이다. */
.home-post{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:11px 20px 11px 28px; border:0; background:none; text-align:left;
  font-size:15px; line-height:24px; color:var(--grey900);
  transition:background .12s;
}
.home-post > .home-row-bullet{margin-right:2px}
.home-post:hover{background:var(--grey50)}
.home-post-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .12s}
.home-post:hover .home-post-title{color:var(--blue700)}
.home-pin{flex:none; color:var(--blue600)}
.home-new{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; background:var(--red500); color:#fff;
  font-size:11px; line-height:1; font-weight:800;
}
.home-post-date{flex:none; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey500)}

/* 검토 현황 — 공구별·기능별 표. 막대는 상태별로 쌓고, 상태마다 숫자 칸을 따로 둔다. 0은 하이픈으로 보통 굵기로 적는다. */
.home-status{margin-bottom:16px}
/* 소제목 — 확인필요 계약의 계약명과 같은 점·굵기·색, 크기는 14.5px. 범례는 기능별 칸 소제목의 오른쪽 끝에 둔다 */
.home-sec-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:6px}
.home-sec-cap{display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:22px; font-weight:700; color:var(--grey900)}
.home-legend{display:flex; flex-wrap:wrap; gap:4px 10px; list-style:none; font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700; color:var(--grey600)}
.home-legend li{display:flex; align-items:center; gap:6px}
.home-status-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* 공구별 계약현황 — 도넛과 범례 줄. 범례 줄이 이름·건수를 늘 적으므로 옅은 색 조각도 색만으로 읽히지 않는다.
   조각 사이는 흰 틈 2px, 가리킨 조각만 굵어지고 나머지는 옅어진다. */
/* 범례 줄은 오른쪽 기능별 표의 줄과 높이(34px)·시작 위치가 같다 — 1공구 줄과 건설업 면허 줄이 한 높이에 선다 */
.home-donut{display:flex; align-items:flex-start; gap:20px; padding-left:16px}
/* 도넛 크기는 여기서 정한다(그림은 viewBox 로 따라 줄고 는다) */
/* 범례는 위에 붙여 기능별 표와 줄을 맞추고, 도넛은 범례 첫 줄 윗선과 끝 줄 아랫선의 한가운데에 둔다 */
.home-donut-chart{position:relative; flex:none; align-self:center; width:128px; height:128px}
.home-donut-chart svg{display:block; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.home-donut-track{fill:none; stroke:var(--grey100); stroke-width:18}
.home-donut-seg{fill:none; stroke-width:18; cursor:pointer; transition:stroke-width .15s, opacity .15s; animation:home-donut-in .8s ease-out both}
@keyframes home-donut-in{from{stroke-dasharray:0 1000; opacity:0}}
.home-donut.is-focus .home-donut-seg:not(.is-active){opacity:.35}
.home-donut-seg.is-active{stroke-width:22}
.home-donut-sheen{fill:none; stroke-width:18; pointer-events:none}
.home-donut-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center}
/* 가운데 글자는 모두 검정 */
.home-donut-label{max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:#000}
.home-donut-center b{font-size:24px; line-height:30px; font-weight:800; color:#000}
.home-donut-center b small{margin-left:1px; font-size:12px; font-weight:600; color:#000}
.home-donut-n small{margin-left:1px; font-size:12px; font-weight:600; color:var(--grey600)}
.home-donut-sub{min-height:var(--lh-micro); font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:#000}
/* 줄마다 칸 폭이 같도록 목록이 칸을 정하고 줄은 그 칸을 물려받는다. 칸은 내용 폭만 쓰고 남는 폭은 칸 사이에 고루 나눈다 */
.home-donut-legend{flex:1; min-width:0; list-style:none; display:grid; grid-template-columns:auto minmax(64px,auto) repeat(4,auto); justify-content:space-between; gap:0 10px}
.home-donut-legend > li{display:contents}
.home-donut-row{
  grid-column:1/-1; display:grid; grid-template-columns:subgrid; align-items:center;
  width:100%; height:36px; padding:0 6px; border:0; border-radius:var(--r-sm); background:none; text-align:left;
  font-size:14px; line-height:20px; color:var(--grey900); transition:background .12s;
}
.home-donut-row.is-active{background:var(--grey50)}
.home-donut-row.is-link.is-active .home-donut-name{color:var(--blue700)}
.home-donut-site{display:flex; align-items:center; gap:10px; white-space:nowrap}
.home-donut-dot{flex:none; width:8px; height:8px; border-radius:50%}
.home-donut-prime{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--grey700)}
.home-donut-name{min-width:0; padding-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.home-donut-n{text-align:right; font-weight:700}
.home-donut-pct,.home-donut-amt{text-align:right; font-size:var(--fs-micro); color:var(--grey600)}
.home-donut-review{justify-self:end; padding:0 6px; border-radius:var(--r-sm); background:#F5EFE5; color:var(--home-review-ink); font-size:11px; line-height:18px; font-weight:600; white-space:nowrap}
@media(prefers-reduced-motion:reduce){.home-donut-seg{animation:none; transition:none}}
/* 칸이 좁으면 도넛을 붙이고 비율 칸을 뺀다 — 비율은 조각을 가리키면 가운데에 뜬다 */
@container homecol (max-width:530px){
  .home-donut{padding-left:8px; gap:16px}
  .home-donut-legend{grid-template-columns:auto minmax(64px,auto) repeat(3,auto); column-gap:8px}
  .home-donut-row{padding-inline:4px}
  .home-donut-pct{display:none}
}
/* 더 좁으면 도넛을 줄이고 금액 칸도 뺀다(줄의 풍선 도움말에 남는다) */
@container homecol (max-width:420px){
  .home-donut-chart{width:104px; height:104px}
  .home-donut-center b{font-size:20px; line-height:26px}
  .home-donut-legend{grid-template-columns:auto minmax(64px,auto) repeat(2,auto)}
  .home-donut-amt{display:none}
}
.home-status-col{min-width:0; padding:14px 20px 16px; container:homecol / inline-size}
.home-status-col + .home-status-col{border-left:1px solid var(--grey100)}
.home-status-col > .home-empty{padding:8px 0}
/* 칸 이름표 — 시작하기·검토 현황이 같은 이름표를 쓴다. 덧말은 한 단계 옅게 */
.home-cap{caption-side:top; margin-bottom:4px; text-align:left; font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700; color:var(--grey600)}
.home-start .home-cap{margin-bottom:0}
.home-cap-note{font-size:calc(var(--fs-micro) + 1.5px); line-height:var(--lh-micro); font-weight:500; color:var(--grey600)}
.home-cap-note::before{content:'·'; margin:0 6px; color:var(--grey400)}
.home-tbl{width:100%; border-collapse:collapse}
.home-tbl th,.home-tbl td{padding:7px 0 7px 12px; white-space:nowrap; vertical-align:middle; font-size:14px; line-height:20px}
.home-tbl th{width:1%; padding-left:0; text-align:left; font-weight:600; color:var(--grey800)}
.home-tbl td.b{width:100%}
/* 기능별 표 줄은 공구별 범례 줄과 같은 36px */
.home-status .home-tbl tr{height:36px}
.home-tbl td.t{font-weight:700; color:var(--grey900)}
.home-tbl td.t.zero{font-weight:400}
.home-tbl-fn{display:inline-flex; align-items:center; gap:6px}
.home-tbl-fn .home-no{color:var(--grey600)}
.home-bar{display:block; height:10px; border-radius:5px; background:var(--grey100); overflow:hidden}
.home-bar-fill{
  display:flex; gap:2px; height:100%; border-radius:5px; overflow:hidden;
  transform-origin:left center; animation:homeGrow .55s cubic-bezier(.2,.7,.2,1) both;
}
.home-bar-fill > span{min-width:3px}
.home-bar-fill > .review{background-color:var(--home-review)}
.home-bar-fill > .done{background-color:var(--blue600)}
.home-bar-fill > .idle{background-color:var(--grey300)}
.home-bar-fill > span{background-image:var(--home-sheen)}
@keyframes homeGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.home-tally{display:inline-flex; align-items:center; gap:5px}

/* 불러오는 동안 — 자리만 잡아 두어 숫자가 들어올 때 화면이 밀리지 않게 한다 */
.home-skel{
  height:52px; margin:12px 20px; border-radius:var(--r);
  background:linear-gradient(90deg,var(--grey100) 25%,var(--grey50) 50%,var(--grey100) 75%);
  background-size:200% 100%; animation:homeShimmer 1.3s ease-in-out infinite;
}
.home-skel.sm{height:20px}
.home-list > li.home-skel + li.home-skel{border-top:0}
.home-status-col > .home-skel{margin:12px 0}
@keyframes homeShimmer{from{background-position:200% 0} to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.home-skel,.home-bar-fill{animation:none}}

/* 검토 현황의 두 표는 칸이 많아 다른 카드보다 먼저 위아래로 쌓는다 — 막대가 너무 짧아지기 전에 */
/* 시작하기는 네 단추가 한 줄에 들어갈 폭이 모자라기 전에 두 칸을 위아래로 쌓는다 */
@container home (max-width:860px){
  .home-start-body{grid-template-columns:minmax(0,1fr)}
  .home-start-col + .home-start-col{border-left:0; border-top:1px solid var(--grey100)}
}
@container home (max-width:820px){
  .home-status-body{grid-template-columns:minmax(0,1fr)}
  .home-status-col + .home-status-col{border-left:0; border-top:1px solid var(--grey100)}
}
@container home (max-width:780px){
  .home-grid{grid-template-columns:minmax(0,1fr)}
}
@container home (max-width:620px){
  .home-preview-fns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container home (max-width:560px){
  .home-row,.home-post,.home-panel-head,.home-status-col,.home-start-col{padding-inline:16px}
  .home-row,.home-post{padding-left:22px}
  .home-donut{flex-direction:column; align-items:stretch; gap:12px; padding-left:0}
  .home-donut-chart{align-self:center}
  .home-tbl td{padding-left:9px}
  /* 좁은 화면에서는 딸린 정보를 계약명 아래 둘째 줄로 내려 계약명이 잘리지 않게 한다.
     점과 화살표는 첫 줄(계약명)에 맞춘다. */
  .home-row{gap:8px; padding-block:12px; align-items:flex-start}
  .home-row-bullet{margin-top:8.5px}
  .home-row > .home-chev{margin-top:3px}
  .home-row-head{gap:2px 5px; flex-wrap:wrap}
  .home-row-name{font-size:14px; line-height:22px; min-width:35px}
  .home-post{font-size:14px; line-height:22px}
  .home-row-meta{font-size:12px; line-height:18px}
  .home-row-head .home-tag{font-size:11px; line-height:16px; padding-inline:4px}
  .home-row-head .home-row-meta{margin-left:0; flex-basis:100%}
  .home-row-meta > span + span::before{margin-inline:4px}
  /* 왼쪽 22 + 점 5 + 간격 8 = 35px — 좁은 화면에서도 계약명 첫 글자에 맞춘다 */
  .home-contract-body{padding-inline:35px 16px}
  .home-check{grid-template-columns:88px minmax(0,1fr); gap:4px 10px; font-size:13px; line-height:20px}
  .home-check-state{grid-column:2; justify-self:start; font-size:11px; line-height:20px}
}

/* ================================================================
   화면 1 · 계약 현황
   ================================================================ */
/* 받는 자리 — 이 화면에서 담당자가 가장 먼저 해야 할 한 가지다. 흰 면에 회색
   점선이면 표 위에 얹힌 빈 칸으로 보여 무엇을 해야 할지 알리지 못한다.
   면은 한 가지 색으로 평평하게 둔다 — 깊이는 색의 기울기가 아니라 점선 테두리와
   여백이 짓는다. 눈길은 안쪽 글자 크기 차이가 끌어온다. */
.upload-tray{
  border:1.5px dashed var(--blue400); border-radius:var(--r);
  /* 유리면 — 반투명 파란 면에 뒤를 흐린다. 위쪽 안쪽 하이라이트가 빛을 받은 모서리,
     아래 그림자가 떠 있는 높이를 만든다. 그림자는 blur를 넓게 벌리지 않고
     띄운 만큼만 둔다(2px 접촉 + 16px 확산). */
  background:rgba(220,232,253,.65);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 4px rgba(27,34,43,.06), 0 8px 16px rgba(27,34,43,.09);
  /* 위아래 여백은 글 크기를 따라간다 — 글이 작아졌는데 여백만 그대로면
     작은 글자가 빈 상자 한복판에 떠 보인다 */
  padding:13px 24px; width:100%;
  display:flex; align-items:center; gap:18px; text-align:left;
  transition:border-color .12s, background .12s, box-shadow .12s;
  cursor:pointer; margin-bottom:20px;
}
.upload-tray:hover, .upload-tray.drag{
  border-color:var(--blue600); background:rgba(203,221,251,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 3px 6px rgba(27,34,43,.08), 0 12px 22px rgba(27,34,43,.12);
}
/* 아이콘은 아이콘으로 둔다 — 제 색의 옅은 타일에 담지 않는다.
   올릴 수 있다는 신호는 점선 테두리가 이미 하고 있고,
   색이 짙어지는 것은 받을 준비가 됐다는 뜻이다.
   기본색은 회색이다 — 검토 준비 화면의 드롭 존(.up-zone.tray)이 같은 아이콘을
   쓰는데, 거기서는 색이 바뀌는 것이 유일한 안내이기 때문이다. */
.ut-icon{
  width:44px; height:44px; flex:none; color:var(--grey500);
  display:flex; align-items:center; justify-content:center;
  transition:color .12s;
}
.upload-tray .ut-icon{color:var(--blue600)}
.upload-tray:hover .ut-icon, .upload-tray.drag .ut-icon{color:var(--blue700)}
.ut-body{flex:1; min-width:0}
.ut-title{font-size:var(--t6-size); line-height:var(--t6-lh); font-weight:700}
.ut-desc{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600); margin-top:2px}
.ut-desc b{color:var(--grey800); font-weight:600}
/* 트레이 안내는 두 줄이다. 아랫줄(무엇을 올릴지)이 파랑 기울기를 쓰고,
   윗줄 '시작하기'는 한 급 크게·먹색으로 앞에 선다 — 부름이 먼저 읽히고
   무엇을 올릴지가 뒤따른다. 기울기의 끝점은 blue700→blue500까지만 간다:
   유리면(실효 #E4ECFB) 위에서 blue500이 3.50:1, blue700이 5.87:1로 큰 글자
   기준(3:1)을 지나지만 blue400은 2.50:1로 미달이라 쓰지 않았다.
   검토 준비 화면의 드롭 존은 이 서식을 쓰지 않으므로 .upload-tray 안으로 한정한다. */
.upload-tray .ut-title{
  font-size:calc(var(--fs-title) - 3px); line-height:1.55;
  font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(100deg, var(--blue700) 0%, var(--blue500) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.upload-tray .ut-start{
  font-size:calc(var(--fs-title) + 1px);
  color:var(--grey900); -webkit-text-fill-color:var(--grey900);
}
.ut-formats{display:flex; gap:5px; flex:none}
.fmt{
  font-size:var(--s13-size); line-height:1; font-weight:600; color:var(--grey600);
  background:var(--grey100); border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:4px 7px;
}
/* 파란 면 위에서는 회색 배지가 탁해 보인다 — 흰 면으로 띄운다.
   반려 안내 창의 같은 배지는 흰 바탕이라 그대로 둔다. */
.upload-tray .fmt{background:#fff; border-color:var(--blue100); color:var(--grey700)}

/* 스탯 스트립 */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px}
.stat{
  background:#fff; border:1px solid var(--grey200); border-radius:var(--r);
  padding:13px 16px; text-align:left; box-shadow:var(--shadow-1);
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:10px; position:relative;
}
.stat:hover{border-color:var(--grey400)}
.stat .lbl{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--grey600); letter-spacing:.02em; display:flex; align-items:center; gap:6px; white-space:nowrap}
.stat .lbl .dot{width:6px; height:6px; border-radius:50%}
.stat .val{font-size:var(--t4-size); line-height:var(--t4-lh); font-weight:800; white-space:nowrap}
.stat[data-f="all"] .val{color:var(--grey900)}
.stat[data-f="idle"] .lbl .dot{border:1.5px dashed var(--grey400); width:5px; height:5px}
.stat[data-f="review"] .lbl .dot{background:var(--red500)}
.stat[data-f="review"] .val{color:var(--red700)}
/* 확인완료는 끝난 일이라 초록으로 둔다 — 남은 일(빨강)과 눈으로 갈린다 */
.stat[data-f="done"] .lbl .dot{background:var(--green500)}
.stat[data-f="done"] .val{color:var(--green900)}
.stat.on{border-color:var(--blue500); box-shadow:0 0 0 1px var(--blue500) inset}

/* 도구 막대 */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:12px}
/* 계약 전체현황은 등록 단추까지 한 줄에 서므로, 폭이 모자라면 단추가 다음 줄로 내려간다 */
#screen-ledger .toolbar{flex-wrap:wrap}
.search{flex:1; max-width:340px; position:relative}
.search input{
  width:100%; padding:8px 12px 8px 34px;
  font-size:var(--s11-size); line-height:var(--s11-lh);
  border:1px solid var(--grey300); border-radius:var(--r); background:#fff;
}
.search input::placeholder{color:var(--grey500)}
.search input:focus{outline:none; border-color:var(--blue500); box-shadow:0 0 0 3px var(--blue100)}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--grey500)}
.sort-sel{
  font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey800);
  padding:8px 30px 8px 12px; border:1px solid var(--grey300); border-radius:var(--r); background:#fff;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A828D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}

/* 대장 표에서 쓰는 보조 조각 (칩 · 오버플로 메뉴) */
.row-sub{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); margin-top:1px}
.fn-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--s12-size); line-height:1; font-weight:500;
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--grey50); border:1px solid var(--grey200); color:var(--grey700);
}
.fn-chip .no{
  font-weight:700; font-size:var(--s13-size); color:var(--grey500);
  width:15px; height:15px; border:1px solid var(--grey300); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.fn-chip.pass{background:var(--green50); border-color:var(--green100); color:var(--green900)}
.fn-chip.pass .no{border-color:var(--green500); color:var(--green900)}
.fn-chip.review{background:var(--red50); border-color:var(--red100); color:var(--red700); font-weight:600}
.fn-chip.review .no{border-color:var(--red500); color:var(--red700)}
.fn-chip.work{background:var(--blue50); border-color:var(--blue100); color:var(--blue700)}
.fn-chip.work .no{border-color:var(--blue400); color:var(--blue700)}

/* 표 뷰 */
.tbl-wrap{overflow-x:auto; background:#fff; border:1px solid var(--grey200); border-radius:var(--r); box-shadow:var(--shadow-1)}
table.ledger{width:100%; border-collapse:collapse; min-width:920px}
/* 머리글은 칸 가운데에 놓고 본문(12px)보다 1px 키워 진하게 둔다.
   값은 성격대로 왼쪽·오른쪽에 붙지만, 칸 이름은 칸을 가리키는 이름표다. */
table.ledger th{
  font-size:14px; line-height:20px; font-weight:700; color:var(--grey700);
  text-align:center; padding:10px 14px; background:var(--grey50);
  border-bottom:1px solid var(--grey200); white-space:nowrap; letter-spacing:.02em;
}
/* 값은 가운데가 기본이다. 왼쪽에 붙여야 하는 것은 눈이 첫 글자를 훑는 계약명뿐이고,
   오른쪽에 붙여야 하는 것은 자릿수를 위아래로 견주는 금액뿐이다. */
table.ledger td{
  font-size:var(--s11-size); line-height:var(--s11-lh); padding:11px 14px;
  border-bottom:1px solid var(--grey100); vertical-align:middle; white-space:nowrap;
  text-align:center;
}
table.ledger tr:last-child td{border-bottom:none}
table.ledger tr:hover td{background:var(--grey50)}
table.ledger .t-no{color:var(--grey600)}
table.ledger .t-name{font-weight:600; color:var(--grey900); white-space:normal; min-width:220px; text-align:left}
table.ledger .t-name button{background:none; border:none; font:inherit; color:inherit; padding:0; text-align:left; cursor:pointer}
table.ledger .t-name button:hover{color:var(--blue600); text-decoration:underline}
table.ledger td.r{text-align:right}
/* 계약 현황은 읽기 쉬운 글자 크기를 유지하고 셀 여백으로 폭을 줄인다. */
#screen-ledger table.ledger th{font-size:13.6px;line-height:20px;padding:12px 10px;white-space:normal}
#screen-ledger table.ledger td{font-size:calc(var(--s11-size) * .9);line-height:var(--s11-lh);padding:9px 7px}
/* 칸 폭은 fitLedgerColumns()가 정한다 — 칸마다 내용(가장 긴 값·머리글) 폭을 재고, 남는 폭을 모든 칸
   양옆에 똑같이 나눈다(--ledger-pad). 어느 칸이든 내용 양옆 빈 자리가 같아진다. 머리글은 <br>에서만 줄을 바꾼다. */
#screen-ledger table.ledger{table-layout:fixed; min-width:0}
/* 표 상자는 표 내용 때문에 넓어지지 않는다 — 폭이 모자라면 상자 안에서 가로로 넘긴다 */
#tblView{contain:inline-size}
#screen-ledger table.ledger th{white-space:nowrap}
#screen-ledger table.ledger th,#screen-ledger table.ledger td{padding-inline:var(--ledger-pad, 10px)}
/* 재는 동안에는 줄을 바꾸지 않고 내용 그대로의 폭을 드러낸다. 배치에서 잠시 빼 바깥 영역이 따라 넓어지지 않게 한다 */
#screen-ledger table.ledger.measuring{table-layout:auto; width:auto!important; position:absolute; visibility:hidden}
#screen-ledger table.ledger.measuring th,#screen-ledger table.ledger.measuring td,#screen-ledger table.ledger.measuring td *{white-space:nowrap}
#screen-ledger table.ledger td:nth-child(7){border-left:1px dashed var(--grey200)}
#screen-ledger table.ledger .amount-unit{font-size:calc(1em - 3px)}
#screen-ledger table.ledger .t-name{min-width:260px;word-break:keep-all;overflow-wrap:anywhere}
#screen-ledger table.ledger .contract-change-badge{
  display:inline-block; margin-left:6px; padding:2px 5px; vertical-align:middle;
  font-size:calc(1em - 4px); line-height:1.4; font-weight:600; white-space:nowrap;
  color:var(--blue700); background:var(--blue50); border:1px solid var(--blue100); border-radius:var(--r-sm);
}
#screen-ledger table.ledger .t-orig,#screen-ledger table.ledger .t-sub{white-space:normal;overflow-wrap:anywhere}
#screen-ledger table.ledger .chip{font-size:calc(var(--s13-size) * .9);padding:3px 5px;gap:3px}
#screen-ledger table.ledger .fn-chip{font-size:calc(var(--s12-size) * .9);padding:3px 5px}

/* 페이지네이션 */
/* 저작권 표시 — 화면 아래에 한 줄. 본문과 섞이지 않게 괘선으로 끊고 옅게 둔다. */
.site-foot{
  margin-top:40px; padding-top:16px; border-top:1px solid var(--grey200);
  font-size:var(--s13-size); line-height:var(--s13-lh); color:var(--grey600); text-align:center;
}

.pager{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.pager .info{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600)}
.pager .pages{display:flex; gap:4px}
.pager .pages button{
  min-width:28px; height:28px; padding:0 6px; border:1px solid var(--grey300); border-radius:var(--r-sm);
  background:#fff; color:var(--grey700); font-size:var(--s12-size); font-weight:600;
}
.pager .pages button.on{background:var(--grey900); border-color:var(--grey900); color:#fff}
.pager .pages button:disabled{opacity:.4; cursor:default}

/* 빈 상태 */
.empty{
  background:#fff; border:1px solid var(--grey200); border-radius:var(--r);
  box-shadow:var(--shadow-1); padding:54px 24px; text-align:center;
}
.empty .mark.none{width:34px; height:34px; margin:0 auto 14px}
.empty h2{font-size:var(--t5-size); line-height:var(--t5-lh); font-weight:800}
.empty p{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600); margin-top:5px}
.empty .actions{margin-top:16px; display:flex; gap:8px; justify-content:center}
#noMatch:not([hidden]){display:flex;align-items:center;justify-content:center;min-height:180px;padding:24px;text-align:center}

/* ================================================================
   화면 2 · 계약 상세 (검토 허브)
   ================================================================ */
.detail-head{margin-bottom:16px}
.dh-top{display:flex; align-items:center; gap:8px; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600)}
.dh-top .divb{color:var(--grey300)}
.dh-title-row{display:flex; align-items:flex-start; gap:12px; margin-top:5px; flex-wrap:wrap}
.dh-title{font-size:var(--t3-size); line-height:var(--t3-lh); font-weight:800; letter-spacing:-.02em}
.risk-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:var(--t7-size); line-height:1; font-weight:700;
  padding:7px 11px; border-radius:var(--r-sm);
  background:var(--red50); border:1px solid var(--red100); color:var(--red700);
}
.risk-chip .mark{width:16px; height:16px; font-size:10px}
.risk-chip.pass{background:var(--green50); border-color:var(--green100); color:var(--green900)}
.risk-chip.idle{background:var(--grey100); border-color:var(--grey200); color:var(--grey600)}
.dh-site{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600); margin-top:4px}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--grey200); margin-bottom:20px}
.tab{
  border:none; background:none; padding:9px 14px 11px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey600);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--grey900)}
.tab.on{color:var(--blue600); border-bottom-color:var(--blue600)}
.tabpane{display:none}
.tabpane.on{display:block}

.sec-title{
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700; color:var(--grey800);
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.sec-title .hint{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:500; color:var(--grey600)}

.basics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--grey200); border:1px solid var(--grey200); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-1); margin-bottom:26px;
}
.b-cell{background:#fff; padding:13px 16px}
.b-cell .k{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--grey600); letter-spacing:.02em; display:flex; align-items:center; gap:6px}
.b-cell .v{font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey900); margin-top:4px}
.b-cell .v .sub{display:block; font-weight:400; color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.b-actions{display:flex;flex-direction:column;justify-content:flex-start}
.contract-actions{display:flex;gap:8px;flex-wrap:nowrap;margin-top:4px}
/* 값 줄(24px)과 같은 높이로 맞춰 9개 칸 높이를 통일 */
.contract-actions .btn{height:24px; padding:0 12px; line-height:22px; font-size:var(--s13-size)}
.contract-edit-dialog{width:min(680px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:0;border-radius:var(--r-lg);padding:24px;margin:auto;color:var(--grey900);box-shadow:var(--shadow-2)}
.contract-edit-dialog::backdrop{background:var(--scrim)}
.contract-edit-dialog h2{font-size:20px;margin:0 0 16px}
.contract-edit-dialog p{font-size:14px;line-height:1.6;color:var(--grey600);margin:0 0 20px}
.contract-edit-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contract-edit-fields label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px;font-weight:600}
.contract-edit-fields input,.contract-edit-fields select{width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--grey300);border-radius:var(--r-sm);font:inherit;font-weight:400;background:#fff;color:var(--grey900)}
.contract-edit-wide{grid-column:1/-1}
.contract-edit-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.contract-edit-dialog .contract-edit-error{margin:16px 0 0;color:var(--red700)}
@media(max-width:520px){.contract-edit-fields{grid-template-columns:minmax(0,1fr)}}

/* 계약별 담당자 메모 */
.contract-memos{margin-top:26px}
.contract-memos-box{padding:18px}
/* 입력 칸과 등록 단추를 한 줄에 둔다. 칸은 한 줄 높이로 시작하고 끌어서 늘릴 수 있으며,
   늘리면 단추는 칸의 아래쪽에 맞춰 선다. */
.contract-memo-form{display:flex;align-items:flex-end;gap:8px}
.contract-memo-form textarea{display:block;flex:1 1 auto;min-width:0;height:49px;min-height:49px;padding:11px 12px;border:1px solid var(--grey300);border-radius:var(--r-sm);background:#fff;color:var(--grey900);font:inherit;font-size:var(--s11-size);line-height:var(--s11-lh);resize:vertical}
.contract-memo-form textarea::placeholder{color:var(--grey500)}
.contract-memo-form textarea:focus{outline:none;border-color:var(--blue500);box-shadow:0 0 0 3px var(--blue100)}
.contract-memo-form .btn{flex:none;height:49px;min-width:76px}
.contract-memo-list{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--grey200)}
.contract-memo{padding:16px 0;border-bottom:1px solid var(--grey100)}
.contract-memo:first-child{padding-top:0}
.contract-memo:last-child{border-bottom:0;padding-bottom:0}
.contract-memo-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:var(--s12-size);line-height:var(--s12-lh)}
.contract-memo-meta strong{color:var(--grey800);font-weight:600}
.contract-memo-meta time{color:var(--grey500);font-variant-numeric:tabular-nums}
.contract-memo-content{margin-top:6px;color:var(--grey900);font-size:var(--s11-size);line-height:var(--s11-lh);white-space:pre-wrap;overflow-wrap:anywhere}
.contract-memo-edited{color:var(--grey500)}
/* 수정·삭제 — 게시판 댓글과 같은 글자 단추로, 메모 머리줄 오른쪽 끝에 둔다 */
.contract-memo-actions{display:flex;gap:4px;margin-left:auto}
.contract-memo-actions[hidden]{display:none}
.contract-memo-actions button{padding:2px 4px;border:0;border-radius:var(--r-sm);background:none;color:var(--grey600);font-size:var(--s12-size);line-height:var(--s12-lh)}
.contract-memo-actions button:hover{color:var(--blue700);background:var(--blue50)}
.contract-memo-actions button[data-memo-delete]:hover{color:var(--red700);background:var(--red50)}
.contract-memo-edit{white-space:normal}
.contract-memo-edit textarea{display:block;width:100%;min-height:74px;padding:11px 12px;border:1px solid var(--grey300);border-radius:var(--r-sm);background:#fff;color:var(--grey900);font:inherit;font-size:var(--s11-size);line-height:var(--s11-lh);resize:vertical}
.contract-memo-edit textarea:focus{outline:none;border-color:var(--blue500);box-shadow:0 0 0 3px var(--blue100)}
.contract-memo-edit > div{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}

/* 검토 카드 */
.fn-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.fn-card{background:#fff; border:1px solid var(--grey200); border-radius:var(--r); box-shadow:var(--shadow-1); padding:18px; display:flex; flex-direction:column; gap:12px}
.fn-card .head{display:flex; align-items:flex-start; gap:5px}
.fn-card .head>div{min-width:0}
.fn-card .chip{white-space:normal;overflow-wrap:anywhere}
.fn-no{
  width:24px; height:24px; flex:none; color:var(--grey800);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:600; line-height:1; margin-top:1px;
}
.fn-card h3{font-size:calc(var(--t6-size) + 1px); line-height:var(--t6-lh); font-weight:700; letter-spacing:-.01em}
.fn-card .stat-line{margin-top:3px}
.doclist{display:flex; flex-direction:column; gap:5px; padding:11px 12px; background:var(--grey50); border:1px solid var(--grey100); border-radius:var(--r-sm)}
.doclist .cap{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--grey600); letter-spacing:.02em; margin-bottom:2px}
.doc-item{display:flex; align-items:center; gap:7px; font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey800)}
.doc-item .st{width:15px; flex:none; text-align:center; font-weight:800; font-size:12px; line-height:1}
.doc-item .st.ok{color:var(--green500)}
.doc-item .st.no{color:var(--grey400)}
.doc-item.missing{color:var(--grey500)}
/* 필요 서류 목록의 길이가 카드마다 달라도 버튼은 아래에 나란히 선다 */
.fn-card .btn{width:100%; margin-top:auto}

/* 서류함 / 이력 */
.filebox{display:flex; flex-direction:column}
.filebox .f-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--grey100); font-size:var(--s11-size); line-height:var(--s11-lh)}
.filebox .f-row:last-child{border-bottom:none}
.f-ico{width:30px; height:30px; flex:none; border-radius:var(--r-sm); background:var(--grey100); color:var(--grey600); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; line-height:1}
.f-name{flex:1; min-width:0; font-weight:600; color:var(--grey900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-meta{font-size:var(--s12-size); color:var(--grey600); flex:none}
.hist .f-name{font-weight:500}
.filebox .none{padding:22px 16px; font-size:var(--t7-size); color:var(--grey600); text-align:center}

/* ================================================================
   화면 3 · 기능① 준비
   ================================================================ */
/* 기능①·② 업로드 영역 아래 간격은 기능③의 입력란 앞 간격과 맞춘다. */
.prep-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
/* 받을 서류가 하나뿐인 화면 — 반 칸에 덩그러니 두지 않고 폭을 다 쓴다 */
.prep-grid.one{grid-template-columns:1fr}
.up-zone{
  border:1.5px dashed var(--grey300); border-radius:var(--r); background:#fff;
  padding:20px; display:flex; flex-direction:column; gap:4px; cursor:pointer; text-align:left;
}
.up-zone:hover, .up-zone.drag{border-color:var(--blue500); background:var(--blue50)}
.up-zone .z-top{display:flex; align-items:center; gap:8px; font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700}
.up-zone .req{font-size:var(--s13-size); line-height:1; font-weight:700; color:var(--red700); background:var(--red50); border:1px solid var(--red100); border-radius:var(--r-sm); padding:2px 6px}
.up-zone .opt{font-size:var(--s13-size); line-height:1; font-weight:600; color:var(--grey600); background:var(--grey100); border:1px solid var(--grey200); border-radius:var(--r-sm); padding:2px 6px}
.up-zone p{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600)}
.up-zone.attached{border-style:solid; border-color:var(--green100); background:var(--green50)}
.up-zone.attached p{color:var(--green900)}
/* 기능②의 여섯 서류함도 다른 업로드 화면과 같은 올리기 마크를 왼쪽에 둔다. */
#screen-fn2-prep .up-zone{flex-direction:row; align-items:flex-start; gap:12px; padding:18px}
#screen-fn2-prep .up-zone .ut-icon{width:36px; height:36px; color:var(--blue600)}
#screen-fn2-prep .up-zone:hover .ut-icon,
#screen-fn2-prep .up-zone.drag .ut-icon{color:var(--blue700)}
#screen-fn2-prep .up-zone .ut-body{padding-top:1px}
/* 담당자에게 무엇을 하라고 이르는 한 줄 — 화면 곳곳에서 같은 서식으로 쓴다.
   ※ 로 시작하고 본문보다 한 급 크고 굵으며 파랑이다. 회색으로 묻어 두면
   정작 해야 할 일이 안내문 사이에 섞여 읽히지 않는다. */
.hint-em{font-size:calc(var(--fs-micro) + 1px); font-weight:700; color:var(--blue700)}
/* 업종 체크 안내만 한 급 더 크다 — 담당자가 이 화면에서 직접 손대야 하는 유일한
   입력이고, 여기서 체크한 것이 그대로 판정에 쓰이기 때문이다 */
.lic-note .hint-em{font-size:calc(var(--fs-micro) + 2px)}
.attached-file{display:flex; align-items:center; gap:8px; margin-top:6px; font-size:var(--t7-size); line-height:var(--t7-lh); font-weight:600; color:var(--grey900)}
.attached-file .st{color:var(--green500); font-weight:800}
/* 판독하고도 읽지 못한 쪽 — 첨부에 성공한 칸 안에서만 나오는 단서라 조용히 붙인다 */
.up-zone .z-note{margin-top:6px; font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--orange900)}
/* 받을 서류가 하나뿐인 준비 화면 — 계약 현황의 업로드 트레이와 같은 가로 서식으로 둔다.
   아이콘·제목·설명·형식 칩은 .ut-* 를 그대로 쓰고, 여기서는 배치만 되돌린다. */
.up-zone.tray{flex-direction:row; align-items:center; gap:18px; padding:26px 24px}
/* 테두리와 면 색은 계약 현황의 시작하기 트레이와 같은 값을 쓴다 — 두 화면에서
   '여기에 올린다'가 같은 자리로 읽혀야 한다. 그림자와 유리 흐림은 옮겨오지 않는다:
   저기는 화면에 하나뿐인 출발점이고 여기는 준비 단계의 한 칸이다. */
.up-zone.tray{border-color:var(--blue400); background:rgba(220,232,253,.65)}
.up-zone.tray .ut-icon{color:var(--blue600)}
.up-zone.tray:hover, .up-zone.tray.drag{border-color:var(--blue600); background:rgba(203,221,251,.78)}
.up-zone.tray:hover .ut-icon, .up-zone.tray.drag .ut-icon{color:var(--blue700)}
/* 첨부가 끝나면 초록으로 넘어간다 — 파랑(받는 자리)보다 뒤에 두어 상태가 이긴다 */
.up-zone.tray.attached{border-color:var(--green100); background:var(--green50)}
.up-zone.tray .ut-title{display:flex; align-items:center; gap:8px}
.up-zone.tray.attached .ut-desc{color:var(--green900)}
/* 기능①은 제목·설명 두 줄뿐이라 공용 트레이 높이를 그대로 쓰면 위아래가 비어 보인다. */
#screen-fn1-prep .up-zone.tray{padding:12px 20px; gap:14px}
/* 둘째 줄은 곁들이는 말이 아니라 지켜야 할 조건이다(집계표 제외) — 제목과 같은 크기·검정으로
   두어 눈이 건너뛰지 않게 한다. 굵기는 올리지 않는다. 제목이 무엇을 올리는 자리인지 말하고
   이 줄은 어떻게 올리는지를 말하므로, 둘의 무게가 같아지면 읽는 차례가 사라진다.
   첨부가 끝나 트레이가 초록으로 넘어가도 이 줄은 검정을 지킨다 — 상태가 아니라 조건이라서다. */
#screen-fn1-prep .up-zone.tray .ut-desc{
  font-size:var(--t6-size); line-height:var(--t6-lh); color:var(--grey900); font-weight:400;
}
/* 지켜야 할 세 가지(무엇을 · 무엇을 빼고 · 어떤 파일)만 굵게 짚는다. 공용 .ut-desc b 는
   회색 보조 설명 안에서 쓰라고 grey800·600 으로 눌러 둔 값이라, 여기서는 줄과 같은
   검정에 한 단 더 굵게 되돌린다 — 짚은 낱말이 나머지보다 옅어지면 강조가 뒤집힌다. */
#screen-fn1-prep .up-zone.tray .ut-desc b{color:inherit; font-weight:700}
#screen-fn1-prep .up-zone.tray .ut-icon{width:36px; height:36px}

.lic-panel{padding:20px; margin-bottom:16px}
.lic-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--orange50); border:1px solid var(--orange100); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:16px;
  font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey800);
}
.lic-note .mark{width:18px; height:18px; font-size:11px; margin-top:1px}
.lic-note.confirmed{background:var(--green50); border-color:var(--green100); color:var(--green900)}
.lic-group + .lic-group{margin-top:16px}
.lic-cap{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700; color:var(--grey600); letter-spacing:.04em; margin-bottom:8px}
.lic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.lic-item{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border:1px solid var(--grey200); border-radius:var(--r-sm);
  font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey800); cursor:pointer;
  background:#fff; user-select:none;
}
.lic-item:hover{border-color:var(--grey400)}
.lic-item input{width:15px; height:15px; accent-color:var(--blue500); flex:none}
.lic-item.checked{border-color:var(--blue400); background:var(--blue50); font-weight:600}
.lic-item .src{margin-left:auto}
.prep-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.prep-foot .note{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600)}

/* 사전 검토 — 저장되지 않는 검토라는 사실을 화면마다 같은 띠로 말한다 */
.preview-band{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; padding:10px 14px;
  border:1px solid var(--orange100); border-radius:var(--r-sm); background:var(--orange50);
  font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey800);
}
.preview-band[hidden]{display:none}
.preview-band-text{flex:1 1 240px; min-width:0}
.preview-band-tag{
  flex:none; padding:2px 8px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--orange500); color:var(--grey900);
  font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700;
}
.dh-top .preview-band-tag{margin-right:2px}
#screen-preview .page-head{margin-bottom:16px}
#screen-preview .preview-guide{margin-top:0; margin-bottom:16px}
#screen-preview .preview-basic-note{
  margin-bottom:16px; padding:16px 20px;
  border:1px solid var(--yellow100); border-radius:var(--r); background:var(--yellow50);
  color:#000; font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700;
}
#screen-preview .preview-form{padding:20px 22px}
#screen-preview .preview-form .contract-edit-fields label{font-size:var(--t7-size)}
#screen-preview .preview-form .contract-edit-error{margin:14px 0 0; color:var(--red700)}
#screen-preview .preview-foot{justify-content:flex-start; margin-top:20px}
@media (max-width:640px){
  #screen-preview .preview-form .contract-edit-fields{grid-template-columns:minmax(0,1fr)}
}

/* 안내 상자 — 화면이 무엇을 왜 받는지, 받은 것을 어떻게 다루는지 밝힌다.
   기능②의 제출 근거와 기능③의 개인정보 처리 안내가 같은 상자를 쓴다: 담당자에게는
   둘 다 "이 화면이 나에게 알려 주는 사실"이라 생김새가 갈릴 이유가 없다.
   (예전 이름 .fn2-submit-guide — 기능② 전용이 아니게 되어 이름을 옮겼다.) */
.guide-note{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px;
  margin:-4px 0 22px; padding:16px 18px;
  border:1px solid var(--blue100); border-radius:var(--r); background:var(--blue50);
}
.guide-note .guide-mark{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--blue600); color:#fff;
  font-size:var(--s11-size); line-height:1; font-weight:800; font-family:var(--font);
}
.guide-note .guide-body{min-width:0}
.guide-note .guide-body>strong{
  display:block; margin-bottom:5px; color:var(--blue700);
  font-size:var(--s11-size); line-height:var(--s11-lh);
}
.guide-note .guide-lines{
  margin:0; padding-left:20px; color:var(--grey900);
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 3px);
}
.guide-note .guide-lines strong{font-weight:800}
.guide-note .guide-detail{
  display:flex; gap:7px; margin-top:5px; padding-left:20px; color:var(--grey800);
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 3px);
}
/* 붙임표만 자기 칸을 갖고, 문장은 통째로 다음 칸에 온다 — 줄이 넘어가도 글머리가
   붙임표 아래로 흘러내리지 않는다. 문장 안의 강조는 조문 인용과 같은 표시를 쓴다. */
.guide-note .guide-detail>.guide-dash{flex:none; font-weight:700; color:var(--blue700)}
.guide-note .guide-detail strong{font-weight:800; color:var(--blue700)}
.guide-note .guide-clause-text{
  margin-top:8px; padding-left:20px; color:var(--grey900);
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 3px); font-weight:600;
}
.guide-note .guide-clause-text strong{font-weight:800; color:var(--blue700)}

/* 진행 오버레이 (§8.9 진행 스텝) */
.progress-card{
  width:100%; max-width:400px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:24px;
}
.progress-card h2{font-size:var(--t5-size); line-height:var(--t5-lh); font-weight:800; margin-bottom:14px}
.p-step{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey500)}
.p-step .st{width:18px; height:18px; flex:none; border-radius:50%; border:1.5px dashed var(--grey300)}
.p-step.doing{color:var(--grey900); font-weight:600}
.p-step.doing .st{border:2px solid var(--blue500); border-top-color:transparent; animation:spin .7s linear infinite}
.p-step.done{color:var(--grey700)}
.p-step.done .st{border:none; background:var(--green500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1}
.license-progress-card{max-width:580px; max-height:calc(100dvh - 48px); overflow-y:auto; outline:none}
.license-progress-head{display:flex; align-items:baseline; gap:12px; justify-content:space-between}
.license-progress-head h2{margin-bottom:0}
.license-progress-head>.num{flex:none; color:var(--grey600); font-size:12px}
.license-progress-status{margin:8px 0 18px; color:var(--grey600); font-size:13px; line-height:1.6}
/* 기능③ 진행 창은 두 줄뿐이다 — 기능①처럼 제목·설명이 위에 서지 않으므로 카드를
   그 줄 수에 맞춰 좁히고, 경과 시간은 걸린 줄 끝에 붙인다. */
.fn3-ai-card{max-width:360px; padding:20px 22px}
.fn3-ai-card .p-step .num{flex:none; color:var(--grey600); font-size:12px; font-weight:500}
.license-ai-detail{margin:5px 0 12px 28px; padding:16px; border:1px solid var(--blue100); border-radius:12px; background:var(--blue50)}
.license-ai-heading{display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--blue700); font-size:14px}
.license-ai-badge{flex:none; padding:3px 7px; border-radius:6px; background:#fff; color:var(--blue700); font-size:11px; font-weight:700}
.license-ai-intro{margin:7px 0 13px; font-size:12px; line-height:1.65; color:var(--grey700)}
.license-ai-metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:11px; border-radius:8px; background:#fff}
.license-ai-metrics dt{margin-bottom:4px; color:var(--grey600); font-size:11px}
.license-ai-metrics dd{margin:0; color:var(--grey900); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.license-ai-metrics dd b{color:var(--blue700)}
.license-ai-metrics dd small{margin-left:4px; font-size:11px; font-weight:500; color:var(--grey600)}
.license-ai-metrics dd.license-ai-time{font-size:12px; line-height:22px}
.license-ai-current{margin-top:13px; color:var(--grey800); font-size:12px; line-height:1.65}
.license-ai-current>span{font-weight:700}
.license-ai-current ul{list-style:none; padding:0; margin:5px 0 0}
.license-ai-current li{padding:6px 0; overflow-wrap:anywhere; white-space:pre-line; border-top:1px solid var(--blue100)}
.license-ai-current>p{margin:4px 0 0; color:var(--grey600); font-size:11px}
.license-ai-summary{margin:12px 0 0; font-size:12px; color:var(--blue700); font-weight:700}
.license-ai-footnote{margin:7px 0 0; font-size:11px; color:var(--grey600); line-height:1.6}
.license-ai-note{margin:5px 0 12px 28px; padding:12px 14px; border-radius:8px; background:var(--grey100); color:var(--grey700); font-size:12px; line-height:1.6}
.license-ai-note p{margin:4px 0 0; font-weight:400}
.license-ai-detail.warn,.license-ai-note.warn{border-color:var(--orange100); background:var(--orange50)}
.license-ai-warning{margin:6px 0 0; color:var(--grey800); font-size:12px; line-height:1.6}
@media(max-width:520px){
  .license-progress-card{padding:18px}
  .license-progress-head{align-items:flex-start; flex-wrap:wrap; gap:4px}
  .license-progress-card .p-step{align-items:flex-start; font-size:12px; line-height:1.6}
  .license-progress-card .p-step .st{margin-top:1px}
  .license-ai-detail,.license-ai-note{margin-left:0; padding:12px}
  .license-ai-metrics{grid-template-columns:1fr 1fr; padding:11px; gap:12px}
}
@media(prefers-reduced-motion:reduce){.license-progress-card .p-step.doing .st{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 계약서 읽기 진행률 — 판독은 오래 걸리므로 몇 %인지 숫자로 알린다 */
.prs-file{
  font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600);
  margin:-8px 0 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prs-meter{display:flex; align-items:center; gap:12px}
.prs-pct{
  flex:none; min-width:62px;
  font-size:var(--t4-size); line-height:var(--t4-lh); font-weight:800;
  color:var(--grey900); letter-spacing:-.01em;
}
.prs-track{flex:1; height:6px; border-radius:99px; background:var(--grey200); overflow:hidden}
.prs-fill{
  height:100%; width:0; border-radius:99px; background:var(--blue500);
  transition:width .35s ease-out;
}
.prs-step{
  display:flex; align-items:baseline; gap:10px; margin-top:12px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey900);
}
.prs-step .prs-page{margin-left:auto; flex:none; color:var(--grey600); font-weight:600}
.prs-note{
  margin-top:14px; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--orange50); border:1px solid var(--orange100); color:var(--grey800);
  font-size:var(--t7-size); line-height:var(--t7-lh);
}
/* 선별 인용 교정 실황 — 초와 조항 수가 보여 실제 호출 중임을 알린다 */
.prs-ai{
  margin-top:6px; font-weight:500; color:var(--grey600);
  font-size:var(--t7-size); line-height:var(--t7-lh); font-variant-numeric:tabular-nums;
}
.prs-ai-main{display:block; color:var(--grey800); font-weight:700}
.prs-ai-detail{display:block; margin-top:2px; color:var(--grey600)}
.prs-ai.warn{color:var(--orange600, #b45309)}
.prs-ai.warn .prs-ai-main,.prs-ai.warn .prs-ai-detail{color:inherit}
@media (prefers-reduced-motion:reduce){ .prs-fill{transition:none} }

/* 기능② 백그라운드 상태바 — 본문과 내비게이션을 가리지 않는 전역 작업 표시 */
.fn2-jobbar{
  position:fixed; z-index:90; left:calc(var(--sidebar-offset) + 20px); right:20px; bottom:18px;
  min-height:66px; display:flex; align-items:center; gap:12px;
  padding:6px 12px; border:1px solid var(--blue100); border-radius:var(--r-lg);
  background:rgba(255,255,255,.98); box-shadow:0 8px 28px rgba(27,34,43,.18);
  backdrop-filter:blur(8px);
}
.fn2-job-icon{
  width:28px; height:28px; flex:none; border-radius:50%;
  border:3px solid var(--blue100); border-top-color:var(--blue500);
  animation:spin .8s linear infinite;
}
.fn2-job-body{flex:1; min-width:0}
.fn2-job-head{display:flex; align-items:center; gap:12px; color:var(--grey900)}
.fn2-job-head b{font-size:var(--t7-size); line-height:var(--t7-lh); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fn2-job-head .num{margin-left:auto; color:var(--blue700); font-size:var(--t7-size); font-weight:800}
.fn2-job-status{display:flex; align-items:baseline; gap:8px; min-width:0; margin-top:1px; white-space:nowrap}
.fn2-job-stage{flex:none; color:var(--grey900); font-size:var(--s12-size); line-height:var(--s12-lh); font-weight:800}
.fn2-job-meta{min-width:0; color:var(--grey600); font-size:var(--s13-size); line-height:var(--s13-lh); overflow:hidden; text-overflow:ellipsis}
.fn2-job-track{height:4px; margin-top:4px; border-radius:99px; background:var(--grey200); overflow:hidden}
.fn2-job-fill{height:100%; width:0; border-radius:99px; background:var(--blue500); transition:width .35s ease-out}
.fn2-job-close{align-self:flex-start; width:28px; height:28px; flex:none; border:0; border-radius:50%; background:none; color:var(--grey500); font-size:15px}
.fn2-job-close:hover{background:var(--grey100); color:var(--grey900)}
.fn2-job-cancel{color:var(--red700); border-color:var(--red100)}
.fn2-job-cancel:hover{color:var(--red800); border-color:var(--red500); background:var(--red50)}
.fn2-jobbar.done{border-color:var(--green100)}
.fn2-jobbar.done .fn2-job-icon{border:0; background:var(--green500); animation:none; position:relative}
.fn2-jobbar.done .fn2-job-icon::after{content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800}
.fn2-jobbar.done .fn2-job-fill{background:var(--green500)}
.fn2-jobbar.error{border-color:var(--red100)}
.fn2-jobbar.error .fn2-job-icon{border:0; background:var(--red500); animation:none; position:relative}
.fn2-jobbar.error .fn2-job-icon::after{content:'!'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800}
.fn2-jobbar.error .fn2-job-fill{background:var(--red500)}
.fn2-jobbar.cancelled{border-color:var(--grey300)}
.fn2-jobbar.cancelled .fn2-job-icon{border:0; background:var(--grey500); animation:none; position:relative}
.fn2-jobbar.cancelled .fn2-job-icon::after{content:'■'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:10px}
.fn2-jobbar.cancelled .fn2-job-fill{background:var(--grey500)}
body.fn2-job-visible .content{padding-bottom:124px}
body.fn2-job-visible .toast{bottom:100px}
@media (prefers-reduced-motion:reduce){.fn2-job-icon{animation:none}.fn2-job-fill{transition:none}}

/* ================================================================
   화면 4 · 기능① 결과
   ================================================================ */
.verdict{
  border-radius:var(--r); border:1px solid var(--red100); background:var(--red50);
  padding:20px 22px; display:flex; gap:16px; align-items:flex-start; margin-bottom:22px;
  box-shadow:var(--shadow-1);
}
.verdict.pass{border-color:var(--green100); background:var(--green50)}
.verdict .mark{width:30px; height:30px; font-size:16px; margin-top:2px}
.verdict-body{flex:1; min-width:0}
.verdict-line{font-size:var(--s9-size); line-height:var(--s9-lh); font-weight:800; color:var(--red700); letter-spacing:-.01em}
.verdict.pass .verdict-line{color:var(--green900)}
.verdict-line .reason{font-weight:700}
.verdict-sum{font-size:var(--t6-size); line-height:var(--t6-lh); color:var(--grey900); margin-top:4px}
/* 없는 업종의 이름은 요약문에서도 지적 설명에서도 같은 표시를 쓴다 — 담당자가
   화면을 내려가며 찾는 낱말이 자리마다 다르게 보이면 눈이 다시 배워야 한다. */
.verdict-sum .missing-license,
.finding .desc .missing-license{font-weight:800; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px}
.verdict-meta{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); margin-top:9px; display:flex; flex-wrap:wrap; gap:4px 14px}
#screen-fn1-result>.verdict{padding-top:16px; padding-bottom:16px; margin-bottom:20px}
/* 검인 도장(§11.5)은 걷어냈다 — 판정 마크·판정 문구와 같은 말을 세 번째로
   반복하면서 가장 크고(86px) 가장 튀어(기울인 이중 원) CTA보다 시선을 먼저
   가져갔다. 인쇄에서는 감춰져 최종 산출물에 남지도 않았다. */

.res-sec{margin-bottom:24px}
.res-card{padding:18px 20px}

.lic-chips{display:flex; flex-wrap:wrap; gap:7px}
.lic-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t7-size); line-height:1; font-weight:600; color:var(--grey900);
  background:var(--grey50); border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:8px 11px;
}

table.cmp{width:100%; border-collapse:collapse}
table.cmp th{
  font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--grey600);
  letter-spacing:.02em; text-align:left; padding:9px 14px;
  background:var(--grey50); border-bottom:1px solid var(--grey200); white-space:nowrap;
}
table.cmp td{
  font-size:var(--s11-size); line-height:var(--s11-lh); padding:11px 14px;
  border-bottom:1px solid var(--grey100); vertical-align:middle;
}
table.cmp tr:last-child td{border-bottom:none}
/* 판정이 줄마다 갈리는 대조표는 줄 사이를 눈에 보이는 선으로 긋는다. 공용 하이라인
   (grey100)은 흰 바탕에서 거의 사라져, 줄이 길고 셀이 여러 층인 표에서는 어느 판정에
   딸린 설명인지 눈이 아래로 흘러내린다. 기능①의 업종별 대조표와 기능③의 검토결과 표가
   같은 것을 묻는 표라 같은 선을 쓴다. */
table.cmp.cmp-ruled td, table.cmp.cmp-ruled th[scope="row"]{border-bottom:1px solid var(--grey200)}
table.cmp.cmp-ruled tr:last-child td, table.cmp.cmp-ruled tr:last-child th{border-bottom:none}
table.cmp td.r, table.cmp th.r{text-align:right}
table.cmp .cell-ref{
  font-size:var(--s12-size); line-height:1; font-weight:600; color:var(--blue600);
  background:var(--blue50); border:1px solid var(--blue100); border-radius:var(--r-sm);
  padding:3px 6px; white-space:nowrap;
}
table.cmp tr.hl td{background:var(--red50)}
table.cmp .warn-lic{color:var(--red700); font-weight:700}
table.cmp .warn-note{display:block; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); font-weight:400; margin-top:1px}
table.cmp .pass-note{display:block; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); font-weight:400; margin-top:1px}
.lname-btn{
  background:none; border:none; padding:0; font:inherit; text-align:left;
  color:var(--blue600); cursor:pointer;
}
.lname-btn:hover{color:var(--blue700); text-decoration:underline}

/* 지적사항 */
.finding{padding:18px 20px}
.finding + .finding{margin-top:10px}
.finding .f-head{display:flex; align-items:flex-start; gap:10px}
.finding .mark{width:20px; height:20px; font-size:12px; margin-top:2px}
.finding h4{font-size:var(--t6-size); line-height:var(--t6-lh); font-weight:700}
.finding .desc{font-size:var(--t6-size); line-height:var(--t6-lh); color:var(--grey800); margin-top:6px}
/* 몇 건이 걸렸는지는 문장에서 가장 먼저 잡혀야 하는 값이다 */
.finding .desc b{font-weight:700; color:var(--grey900)}
/* 지적이 없을 때도 지적이 있을 때와 같은 크기로 읽힌다 — 한쪽만 작아지면
   '별일 아니다'로 읽히는데, 이것도 담당자가 확인하고 넘어가야 하는 결론이다. */
.res-card.no-finding{font-size:var(--t6-size); line-height:var(--t6-lh); color:var(--grey800); font-weight:700}
.evi{
  margin-top:12px; background:var(--grey50); border-left:3px solid var(--grey400);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:11px 14px;
}
.evi .e-cap{
  font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700; color:var(--grey600);
  letter-spacing:.04em; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.evi q{
  display:block; font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey800);
  margin-top:5px; quotes:"“" "”";
}
.law{margin-top:9px; font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey700)}
.law b{font-weight:700; color:var(--grey800)}

/* 담당자 의견 */
.confirm-box{padding:20px}
.radio-row{display:flex; gap:10px; margin-bottom:12px}
.radio-pill{
  flex:1; display:flex; align-items:center; gap:9px;
  border:1px solid var(--grey300); border-radius:var(--r-sm); padding:11px 14px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey800);
  cursor:pointer; background:#fff;
}
.radio-pill input{accent-color:var(--blue500); width:15px; height:15px}
.radio-pill.sel{border-color:var(--blue500); background:var(--blue50); color:var(--blue700)}
.confirm-box textarea{
  width:100%; min-height:74px; resize:vertical;
  font-size:var(--s11-size); line-height:var(--s11-lh);
  border:1px solid var(--grey300); border-radius:var(--r-sm); padding:10px 12px; color:var(--grey900);
}
.confirm-box textarea::placeholder{color:var(--grey500)}
.confirm-box textarea:focus{outline:none; border-color:var(--blue500); box-shadow:0 0 0 3px var(--blue100)}
.confirm-foot{display:flex; align-items:center; gap:10px; margin-top:12px}
.confirm-foot .who{margin-left:auto; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600)}
.confirm-locked{display:flex; align-items:center; gap:10px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey800)}
.confirm-locked .meta{font-size:var(--s12-size); color:var(--grey600); margin-left:auto}

.out-row{display:flex; gap:10px; margin-top:18px}
/* ================================================================
   기능②·③ — 범위, 인용, 계산, 입력
   ================================================================ */
.scope-note,.mode-note{
  padding:14px 16px; margin-bottom:18px; display:flex; align-items:flex-start; gap:14px;
  font-size:var(--t7-size); line-height:var(--t7-lh);
}
.scope-note b,.mode-note b{flex:none; color:var(--grey900)}
.scope-note span,.mode-note span{color:var(--grey600)}
.mode-note{background:var(--blue50); border-color:var(--blue100)}
.mode-note span{color:var(--blue700)}
/* 배치된 사람을 다 본 자리에서, 이 화면이 보지 않은 것을 알린다 — 표 아래에 붙는다 */
.fn3-kiscon-note{
  padding:13px 16px; margin:16px 0 0;
  background:var(--yellow50); border-color:var(--yellow100); color:var(--yellow900);
  font-size:15px; line-height:var(--t7-lh); font-weight:600;
}
.table-scroll{overflow:auto}
.ok-text{color:var(--green900); font-weight:700}
.warn-text{color:var(--red700); font-weight:700}
/* 인용면 — 카드 안에서 유일하게 자기 면을 갖는다. 남의 문서에서 옮겨 온 글이라
   실제로 다른 물건이고, 왼쪽 괘선은 앱 전역이 쓰는 인용 표시다.
   계약서 본문이 이 화면의 주인공이므로 글자는 본문 크기(16px)로 세운다 —
   설명·라벨(13px)보다 한 급 위에 두어야 무엇을 먼저 읽어야 하는지가 보인다. */
.quote-box{
  margin-top:10px; padding:16px 18px; border-radius:var(--r-sm);
  background:var(--grey50); border-left:3px solid var(--grey400);
}
/* 인용 표시는 회색 면과 왼쪽 괘선이 이미 하고 있다 — 따옴표까지 붙이면
   조문 앞뒤에 낱말도 아닌 글자가 하나씩 끼어들어 읽기가 끊긴다.
   줄 사이를 본문보다 넉넉히 벌린다. 조문은 한 줄이 화면 끝까지 가는 긴 글이라,
   행간이 좁으면 눈이 다음 줄 첫머리를 되찾지 못하고 같은 줄을 두 번 읽는다. */
.quote-box q{
  display:block; white-space:pre-wrap; quotes:none;
  font-size:var(--fs-body); line-height:28px; color:var(--grey800);
}
.q-meta{margin-bottom:9px; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--red700)}
/* 의심 문장 — 세 쪽 넘는 조문에서 어디가 걸린 문장인지 찾는 것이 이 화면의 첫 일이다.
   굵기만으로는 3,800자 안에서 눈에 걸리지 않아 옅은 바탕을 함께 깐다.
   같은 계열에서 한 단 진한 바탕(--orange100)이 그 안의 요건 낱말을 다시 짚으므로,
   문장 → 낱말 두 단계가 한 색의 농담으로 읽힌다. 크기는 건드리지 않는다 —
   조문 한복판에서 글자 크기가 오르내리면 줄이 고르지 않게 읽힌다. */
.q-hit{
  font-weight:700; color:var(--grey900); background:var(--orange50);
  box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:1px 0;
}
/* 모든 계약의 탐지된 핵심 문구만 적색 면과 굵기로 표시한다. 안쪽 요건 낱말은
   별도 음영·밑줄을 지워 문제 구간 전체가 하나의 연속된 강조로 읽히게 한다. */
.q-hit.uf-critical{background:#F5C2C4; color:var(--grey900); font-weight:700}
.q-hit.uf-critical .uf-term{
  background:transparent; border-bottom:0; padding:0; font-weight:inherit; text-decoration:none;
}

/* ── 조문의 층 — 조 › 항 › 호 › 목 ──────────────────────
   법령은 조 아래에 항, 항 아래에 호, 호 아래에 목이 걸리는 구조다. 줄을 왼쪽 끝에
   나란히 붙여 놓으면 그 층이 보이지 않아, 어느 호가 어느 항에 딸린 것인지 세어 가며
   읽어야 한다. 층마다 한 칸씩 들여 그 관계를 눈으로 읽게 한다.
   되박은 들여쓰기(text-indent 음수)를 함께 쓴다 — 줄이 넘어갈 때 번호 아래가 아니라
   글 아래로 붙어야 번호가 왼쪽에 홀로 서서 층이 계속 보인다. */
.cl{display:block}
.cl:empty{height:.55em}
.cl-d1{padding-left:34px; text-indent:-17px}
.cl-d2{padding-left:51px; text-indent:-17px}
.cl-d3{padding-left:68px; text-indent:-17px}
/* 조문명 한 줄 — 한 급 키우고 굵게. 조문이 여러 개 이어질 때 어디서 새 조문이
   시작하는지가 훑는 눈의 첫 기준점이 된다. */
.cl-art{
  font-size:calc(var(--fs-body) + 1px); font-weight:700; color:var(--grey900);
  margin-bottom:4px;
}
.standard-box{margin-top:12px; padding:11px 13px; border:1px solid var(--grey200); background:var(--grey50); border-radius:var(--r-sm)}
.standard-box b,.standard-box span{display:block; font-size:var(--t7-size); line-height:var(--t7-lh)}
.standard-box b{color:var(--grey900)}.standard-box span{color:var(--grey700); margin-top:3px}
.standard-compare{padding:0; overflow:hidden}
.standard-source{padding:12px 14px; border-bottom:1px solid var(--grey200)}
.standard-source span{color:var(--grey600)}
.standard-ref{padding:12px 14px; background:#fff}
.standard-ref+.standard-ref{border-top:1px solid var(--grey200)}
.standard-ref-head{display:flex; align-items:flex-start; gap:10px}
.standard-ref-head b{flex:1}
.standard-ref-head .standard-score{display:inline-flex; flex:none; margin:0; color:var(--grey600); font-size:var(--fs-micro); font-weight:700}
.standard-ref p,.standard-full{white-space:pre-wrap; margin-top:8px; color:var(--grey800); font-size:var(--t7-size); line-height:var(--t7-lh)}
.standard-ref details{margin-top:8px; border-top:1px dashed var(--grey200); padding-top:7px}
.standard-ref summary{cursor:pointer; color:var(--blue700); font-size:var(--s13-size); font-weight:600}
.standard-full{max-height:360px; overflow:auto; padding:10px 12px; border-radius:var(--r-sm); background:var(--grey50)}
.standard-rule-source{padding:14px 16px; border-bottom:1px solid var(--grey100)}
.standard-rule-source b,.standard-rule-source span{display:block}.standard-rule-source span{margin-top:3px; color:var(--grey600); font-size:var(--s13-size)}
.standard-rule-ref summary{cursor:pointer; color:var(--blue700); font-weight:600}
.standard-rule-ref p{white-space:pre-wrap; margin-top:7px; color:var(--grey700)}
.link-btn{border:none; background:none; padding:0; color:var(--blue600); font:inherit; font-weight:600; cursor:pointer}
.link-btn:hover{text-decoration:underline; color:var(--blue700)}
/* AI 판단 근거는 접어 둔다. 화면에 나가는 서술은 문장 틀이 만든다(AI가 쓰지 않는다) */
.ai-note{margin-top:12px; font-size:var(--s13-size); line-height:var(--s13-lh)}
.ai-note summary{cursor:pointer; font-weight:600; color:var(--grey600)}
.ai-note p{margin-top:7px; padding:10px 12px; border-radius:var(--r-sm); background:var(--grey50); color:var(--grey700)}

/* ================================================================
   화면 9 · 부당특약 검토 결과 — 지적 목록
   ----------------------------------------------------------------
   면은 유형 카드 하나뿐이다. 그 안의 조문·설명·근거는 각자 상자를 두르지 않고
   여백과 실선 한 줄로만 나뉜다. 상자를 겹쳐 두르면 안쪽으로 갈수록 여백이
   쌓여 정작 읽어야 할 조문이 좁아지고, 무엇이 무엇에 딸린 것인지도 흐려진다.
   유일한 예외가 인용면이다 — 남의 문서에서 옮겨 온 글이라 실제로 다른 물건이다.

   색은 상태(판단 대기·판독본 등)에만 쓴다. 규칙표의 high/mid 심각도는 지적
   정렬 순서에만 쓰이고 화면에는 나타나지 않는다 — 유형에 고정된 값이라 조항의
   실제 심각도를 말하지 않는데, 등급으로 보이면 담당자가 '보통'을 미뤄도 될
   판단으로 잘못 읽을 수 있다.
   위계는 크기와 여백이 진다 — 계약서 본문 16px, 그것을 설명하는 말 13px.
   ================================================================ */
/* 구역 제목 아래 한 줄 — 이 목록이 무엇인지, 담당자가 무엇을 해야 하는지만 적는다 */
.sec-note{
  margin:-6px 0 14px; max-width:76ch;
  font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600);
}

/* 검토 범위 — 요약 한 줄로 접어 둔다 */
.cov-fold{margin-bottom:22px}
.cov-fold>summary{
  padding:13px 18px;
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 2px);
}
.cov-fold .table-scroll{border-top:1px solid var(--grey100)}
.cov-fold table.cmp th{padding-top:7px; padding-bottom:7px}
.cov-fold table.cmp td{padding-top:8px; padding-bottom:8px}
.cov-fold table.cmp td{vertical-align:top}

/* ── 페이지 구역 제목 — 이 화면만 한 급 키운다 ─────────
   카드가 여덟 장 쌓이면 구역 제목이 카드 제목과 같은 크기로는 묻힌다.
   19 → 16 → 15 로 세 단을 두어 어디가 구역이고 어디가 카드인지 크기가 말하게 한다. */
#screen-fn2-result .res-sec,#screen-fn4-result .res-sec{margin-bottom:34px}
#screen-fn2-result .sec-title,#screen-fn4-result .sec-title{
  font-size:var(--fs-title); line-height:var(--lh-title); color:var(--grey900);
  margin-bottom:14px;
}
/* 재현용 버전 줄을 뺀 판정 블록은 위아래 안쪽 여백도 한 단 줄여 균형을 맞춘다. */
#screen-fn2-result>.verdict{padding-top:16px; padding-bottom:16px}
#screen-fn4-result>.verdict{padding-top:16px; padding-bottom:16px}
/* 구역 표시 — 담는 틀 없이 글리프만 둔다. 빨강은 확인필요라는 기존 뜻을 쓴다. */
#screen-fn2-result .sec-ico,#screen-fn4-result .sec-ico{flex:none}
#screen-fn2-result .sec-ico.review,#screen-fn4-result .sec-ico.review{color:var(--red500)}
#screen-fn4-result .sec-ico.done{color:var(--green500)}
#screen-fn2-result .sec-ico.cand{color:var(--grey500)}
/* 건수 배지 — 실제로 센 수만 담는다. 한 가지 모양, 중립 면, 앱의 작은 모서리값.
   알약(999px)으로 만들지 않는 이유는 이 화면의 다른 모서리와 어긋나기 때문이다. */
.sec-badge{
  flex:none; padding:2px 8px; border-radius:var(--r-sm);
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700;
  background:var(--grey100); color:var(--grey700);
}

/* ── 유형 카드 — 이 화면의 유일한 면 ─────────────────
   가장자리는 실선 한 줄이 짓는다. 실선과 그림자를 함께 쓰면 경계를 두 번
   그리는 셈이고, 그림자만으로는 카드가 몇 장이든 같은 높이로 떠 보인다.

   머리에만 면 색을 깔고 본문은 흰 면으로 둔다. 확인필요 조항은 앱의 강조색
   (파랑)을 가장 옅게 써서 한 목록으로 훑을 수 있게 한다. */
.uf-card{background:#fff; border:1px solid var(--grey300); border-radius:var(--r); overflow:hidden}
.uf-card+.uf-card{margin-top:12px}
.uf-card[open]{border-color:var(--blue400)}
/* 머리 면의 기울기 — 위가 옅고 아래가 짙다. 방향과 이유가 있는 기울기다:
   머리는 흰 본문 위에 얹힌 다른 판이고, 아래로 갈수록 짙어져 본문과 만나는
   경계를 스스로 그린다. 색은 한 계통에서 이웃한 두 단(blue50→blue100)만 쓰고
   두 색을 섞지 않는다 — 여러 색을 걸친 기울기는 뜻 없는 분위기가 된다. */
.uf-head{
  cursor:pointer; padding:15px 18px; list-style:none;
  background:linear-gradient(180deg, var(--blue50) 0%, var(--blue100) 100%);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
}
.uf-head::-webkit-details-marker{display:none}
.uf-card>.uf-head:hover{background:linear-gradient(180deg, var(--blue100) 0%, #CBDDFB 100%)}
.uf-card[open]>.uf-head{border-bottom:1px solid var(--blue400)}

/* 펼침 표시 — 카드에 여닫는 장치가 있다는 것을 눈에 보이게 한다.
   오른쪽 끝에 두어 제목과 위치 정보를 밀지 않고, 색은 머리 면 색을 따라간다. */
.uf-head::after{
  content:''; flex:none; order:99; align-self:center; width:8px; height:8px;
  margin:0 2px 3px 2px;
  border-right:2px solid var(--blue600); border-bottom:2px solid var(--blue600);
  transform:rotate(45deg); transition:transform .12s;
}
.uf-card[open]>.uf-head::after{transform:rotate(-135deg); margin:3px 2px 0 2px}
@media (prefers-reduced-motion:reduce){ .uf-head::after{transition:none} }
/* 유형 이름이 카드에서 가장 큰 글자다 — 훑을 때 이것부터 읽힌다 */
.uf-name{
  flex:0 1 auto; min-width:0; overflow-wrap:anywhere;
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:700; color:var(--grey900);
}
/* 제목 앞 불릿 — 확인필요 목록의 항목이라는 작은 표시다. */
.uf-name::before{
  content:''; display:inline-block; vertical-align:middle;
  width:7px; height:7px; margin:-2px 9px 0 0; border-radius:50%;
  background:var(--blue600);
}
/* 판독본 — 원문 이미지와 대조해야 하는 조문이라는 뜻이다. 상태이므로 딱지를 두되
   면은 중립으로 두고 글자 하나에만 색을 준다 */
.uf-tag{
  flex:none; padding:1px 6px; border-radius:var(--r-sm);
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700;
  background:var(--grey100); color:var(--grey700);
}
.uf-tag.warn{color:var(--red700)}
/* 걸린 조문 수는 상태가 아니라 분량이다 — 딱지 대신 글로 적는다 */
.uf-count{
  flex:none; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600);
}
.uf-count b{font-weight:700; color:var(--grey800)}
/* 위치와 판단 상태는 한 덩어리로 다닌다 — 제목이 길어 줄이 넘어갈 때 둘이 흩어지면
   카드마다 머리 모양이 달라져, 목록을 훑는 눈이 매번 자리를 다시 찾아야 한다. */
.uf-meta{flex:none; margin-left:auto; display:flex; align-items:baseline; gap:10px}
.uf-loc,.uf-route{
  flex:none; white-space:nowrap;
  font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600);
}
/* 카드를 펼치면 위치는 '관련 조문' 옆 배지가 맡는다 — 접힌 줄에서만 필요한 정보다 */
.uf-card[open]>.uf-head .uf-loc{display:none}
/* 요건에 닿은 낱말 — 실제 주석이므로 표시는 남기되, 바탕 하나와 밑줄 하나로 끝낸다.
   바탕·글자색·굵기·밑줄을 한꺼번에 쓰면 짚은 곳이 조문보다 크게 읽힌다.
   밑줄은 인쇄와 색각 이상에서 바탕이 사라져도 남으라고 둔다. */
.uf-term{background:var(--orange100); border-bottom:1px solid var(--orange500); padding:0 1px}

.uf-body{padding:18px}

/* ── 걸린 조문들 — 카드를 열면 가장 먼저 나온다 ──────────────
   설명보다 계약서 원문이 먼저다. 무엇이라고 적혀 있는지 읽고 나서야
   그 문구가 왜 문제인지가 판단 자료가 된다. */
/* 카드 본문의 네 구역(관련 조문·부당특약 의심 사유·관련 법령·참고자료) 제목 —
   유형 이름(--fs-body)보다 한 단 작게, 검게 두어 본문 설명(회색)과 뚜렷이 갈린다.
   회색이면 라벨처럼 읽혀 눈이 건너뛰고, 유형 이름과 같은 크기면 카드 안에 제목이
   둘로 보인다. */
.uf-cap{
  font-size:calc(var(--fs-body) - 1px); line-height:var(--lh-body);
  font-weight:700; color:var(--grey900);
  display:flex; align-items:center; gap:8px;
}
/* 구역 표시 — 담는 틀 없이 글리프만. 제목보다 한 톤 낮춰 글자가 먼저 읽히게 하고,
   색은 넷 다 같은 중립으로 둔다. 넷에 각각 다른 색을 주면 뜻이 아니라 사탕이 된다. */
.cap-ico{flex:none; color:var(--grey600)}
.uf-clauses>.uf-cap{margin-bottom:10px}
/* 조문끼리는 실선 한 줄로만 가른다 — 하나하나 상자에 넣으면 카드 안에 카드가 된다.
   구역을 가르는 선(grey200)보다 옅게 두어, 같은 구역 안의 나눔임을 굵기가 말한다. */
.uf-clause+.uf-clause{margin-top:22px; padding-top:22px; border-top:1px solid var(--grey100)}
.uf-clause-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 10px}
.uf-clause-art{
  flex:0 1 auto; min-width:0; overflow-wrap:anywhere;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700; color:var(--grey900);
}
/* 위치부터 오른쪽으로 민다 — 조문명이 길어 줄이 넘어가도 위치와 판단 상태는 붙어 다닌다 */
.uf-clause-head .uf-loc{margin-left:auto}

/* 조문 표시 설정 — 기존 보조 버튼과 중립색을 쓰고 본문과 시각적으로 분리한다. */
.uf-clause-head .uf-visibility{margin-left:auto; flex:none; min-height:32px; color:var(--grey700)}
.uf-clause-head .uf-loc~.uf-visibility{margin-left:0}
.uf-visibility:hover{color:var(--blue700); background:var(--blue50)}
.uf-visibility:focus-visible,#ufHiddenToggle:focus-visible,#ufVisibilityUndo:focus-visible{
  outline:2px solid var(--blue600); outline-offset:3px;
}
.uf-list-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px}
#screen-fn2-result .uf-list-head>.sec-title{margin:0}
.uf-list-tools{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; white-space:nowrap}
.uf-visible-count,.uf-hidden-note{font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600)}
.uf-visible-count b{color:var(--grey800)}
.uf-hidden-items{margin-top:20px; padding-top:16px; border-top:1px solid var(--grey200)}
.uf-hidden-items[hidden],.uf-visibility-notice[hidden],#ufVisibilityUndo[hidden]{display:none}
.uf-hidden-note{margin:0 0 12px}
.uf-hidden-items .uf-head{background:var(--grey50)}
.uf-visibility-notice{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px; padding:8px 12px; border-radius:var(--r-sm); background:var(--blue50); color:var(--grey800); font-size:var(--fs-micro)}
.uf-visibility-notice .btn{color:var(--blue700)}
.uf-print-only{display:none}
.uf-screen-head .page-title{text-align:left}
.uf-report-head .page-title{text-align:center}
.uf-report-contract{margin:16px 0 0; font-size:var(--fs-body); line-height:var(--lh-body)}
.uf-report-contract>div{display:flex; gap:12px; margin-top:6px}
.uf-report-contract dt{flex:0 0 4em; font-weight:700; color:var(--grey700)}
.uf-report-contract dd{margin:0; min-width:0; overflow-wrap:anywhere}
/* 기능②의 결과서 서식을 네 기능에서 공유한다. 날짜·주소·쪽번호는 인쇄창에서 끈다. */
@page unfair-result{
  margin:20mm 15mm;
}
@media print{
  body:has(.review-report.active){page:unfair-result}
  .review-report,
  .review-report *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .uf-visibility,.uf-visibility-notice,#ufHiddenToggle,.uf-hidden-items{display:none !important}
  #screen-fn2-result .uf-screen-head,
  #screen-fn2-result .uf-screen-banner,
  #screen-fn2-result .cov-fold,
  #screen-fn2-result .uf-list-tools,
  #screen-fn2-result .uf-around,
  #screen-fn2-result .uf-gset,
  #screen-fn2-result .uf-reviewer-section,
  #screen-fn2-result .uf-empty{display:none !important}
  .review-report .report-screen-only{display:none !important}
  .review-report .uf-print-only{display:block}
  #screen-fn2-result .uf-head{break-after:avoid}
  .review-report .uf-report-head{break-inside:avoid; break-after:avoid}
}

/* 의심 사유 — 조문 바로 아래에 노란 면으로 앉힌다. 이 화면에서 노랑은 줄곧 '의심'을
   뜻해 왔다(의심 문장 바탕 → 요건 낱말 → 이 상자). 같은 색이 같은 뜻을 이어 가므로
   담당자는 노란 것만 따라가면 왜 걸렸는지가 모인다.
   카드 안에서 면을 갖는 것은 인용면과 이 상자 둘뿐이다 — 곁들이 상자를 늘리지 않는다. */
.uf-why{
  margin-top:20px; padding:15px 17px;
  background:var(--orange50); border:1px solid var(--orange100);
  border-radius:var(--r-sm);
}
.uf-why-note{margin-top:8px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--grey800)}
.uf-why-note b{font-weight:700; color:var(--grey900)}

/* 요건에 닿은 낱말을 한 문장으로 — 유형 일반론과 이 조항 사이를 잇는 줄이다 */
.uf-why-lead{
  margin-top:8px; font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--grey900); font-weight:600;
}

/* 구조 안내 — 인용 범위를 믿어도 되는지 인용 바로 위에서 먼저 말한다 */
.uf-struct-note{
  margin-top:10px; padding:8px 11px; border-radius:var(--r-sm);
  font-size:var(--fs-micro); line-height:var(--lh-micro);
  background:var(--grey50); color:var(--grey700);
}
.uf-struct-note.warn{background:var(--orange50); border:1px solid var(--orange100); color:var(--grey800)}
.uf-struct-note b{font-weight:700; color:var(--grey900)}

/* 같은 조문의 앞뒤 항 — 기본은 접어 둔다. 펼치면 지금 보던 항이 그 안에서 굵게 남아
   어디가 이어지는지 눈으로 따라갈 수 있다. */
.uf-around{margin-top:10px}
.uf-around>summary{
  cursor:pointer; font-size:var(--fs-micro); line-height:var(--lh-micro);
  color:var(--grey700); font-weight:600;
}
.uf-around-n{margin-left:6px; color:var(--grey500); font-weight:400}
.quote-box.around{margin-top:8px; max-height:420px; overflow-y:auto}
.quote-box.around .q-shown{font-weight:700; color:var(--grey900)}

/* 같은 조항이 다른 유형에도 걸린 자리 — 전문은 한 번만 싣고 여기서는 지적 문장만 */
.uf-repeat-note{
  margin-top:8px; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600);
}
.uf-repeat-note b{font-weight:700; color:var(--grey800)}
.quote-box.short{margin-top:8px}

/* 확인할 요건 — 법령이 무엇을 묻는지 순서대로. 담당자가 원문을 짚어 갈 차례표다 */
.uf-elements{margin-top:14px; font-size:var(--fs-micro); line-height:var(--lh-micro)}
.uf-elements>b{font-weight:700; color:var(--grey700)}
.uf-elements ol{margin:6px 0 0 17px; display:flex; flex-direction:column; gap:4px}
.uf-elements li{color:var(--grey700)}

/* 관련 법령 · 참고자료 — 카드 안의 다른 구역과 같은 층에 나란히 선다. 법령은
   법령끼리 이어 놓아야 "이런 법들이 이렇게 정하고 있다"로 한 번에 읽히고,
   참고자료(지침·표준계약서·판단 사례)는 그 법을 어떻게 적용해 왔는지를 말하는
   같은 성격의 자료라 한자리에 둔다. 종류 딱지를 넷으로 쪼개면 눈이 그만큼 나뉜다.
   둘 다 접어 둔다 — 관련 조문과 부당특약 의심 사유만 읽어도 판단이 서는 경우가
   많고, 법령 원문·사례 출처는 필요할 때 펼쳐 보는 참고 자료이기 때문이다. */
/* 접히는 구역은 카드 너비를 가로지르는 한 줄짜리 행으로 쌓인다 — 접힌 상태에서
   제목 줄이 나란히 이어져, 무엇을 더 펼쳐 볼 수 있는지가 목록으로 한눈에 보인다.
   여백이 아니라 행 전체가 눌리는 자리이므로 좌우 여백도 summary가 가진다. */
.uf-gset{margin:0 -18px; border-top:1px solid var(--grey200)}
/* 노란 상자와 첫 접힘 행 사이는 벌려 둔다 — 상자 테두리와 행 구분선이 붙으면 선이 겹쳐 보인다 */
.uf-why+.uf-gset{margin-top:22px}
/* 마지막 행이면 본문 아래 여백을 먹는다 — 행의 자기 여백이 곧 카드 아래 여백이 된다 */
.uf-gset:last-child{margin-bottom:-18px}
.uf-gset>summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  padding:15px 18px;
}
.uf-gset>summary::-webkit-details-marker{display:none}
.uf-gset>summary:hover{background:var(--grey50)}
/* 아래 화살표는 오른쪽 끝에 둔다 — 카드 머리와 같은 자리, 같은 모양, 같은 회전이다.
   여닫는 장치는 화면 전체에서 한 가지 말로만 해야 어디를 눌러야 하는지 매번 배우지 않는다.
   앞자리는 무엇에 관한 구역인지 말하는 글리프가 가진다. */
.uf-gset>summary::after{
  content:''; flex:none; margin:0 0 3px auto; width:8px; height:8px;
  border-right:2px solid var(--grey500); border-bottom:2px solid var(--grey500);
  transform:rotate(45deg); transition:transform .12s;
}
.uf-gset[open]>summary::after{transform:rotate(-135deg); margin:3px 0 0 auto}
@media (prefers-reduced-motion:reduce){ .uf-gset>summary::after{transition:none} }
.uf-gset-list{
  list-style:none; display:flex; flex-direction:column; gap:12px;
  padding:2px 18px 18px;
}
/* 항목마다 점 하나 — 출처가 여럿일 때 어디서 한 건이 끝나고 다음이 시작하는지
   눈이 세지 않아도 되게 한다. 첫 줄 글자 높이에 맞춰 얹는다. */
.uf-gset-list li{position:relative; padding-left:14px}
.uf-gset-list li::before{
  content:''; position:absolute; left:1px; top:7px;
  width:5px; height:5px; border-radius:50%; background:var(--grey400);
}
.uf-gset-list li b{
  display:block; font-size:calc(var(--fs-micro) + 1px); line-height:calc(var(--lh-micro) + 2px);
  font-weight:700; color:var(--grey800); overflow-wrap:anywhere;
}
/* 참고자료 안에서 사례만 딱지를 단다 — 지침·표준계약서는 규범을 풀어 쓴 자료이고
   사례는 실제로 그렇게 판단된 건이라, 읽는 무게가 다르기 때문이다. */
.gset-badge{
  display:inline-block; margin-right:6px; padding:1px 6px; border-radius:var(--r-sm);
  font-size:calc(var(--fs-micro) + 1px); line-height:calc(var(--lh-micro) + 2px); font-weight:700;
  background:var(--grey200); color:var(--grey700); vertical-align:1px;
}
.uf-gset-list li p{
  margin-top:2px; font-size:calc(var(--fs-micro) + 1px); line-height:calc(var(--lh-micro) + 2px); color:var(--grey700);
}
/* 설명 단락이 없고 조문명만 있는 관계 법령 — 같은 목록에 두되 무게를 낮춘다 */
.uf-gset-list li.cite-only b{font-weight:600; color:var(--grey600)}

/* 근거 서랍 — 표준계약서 조문 전문·사례를 한 줄씩 눕혀 둔다.
   위 구역들과 같은 행 리듬을 쓰되, 글자는 작고 파랗게 두어 1급 구역이 아니라
   더 들여다볼 자료라는 것이 크기와 색으로 읽히게 한다. */
.uf-folds{margin:0 -18px -18px; border-top:1px solid var(--grey200)}
.uf-fold>summary{
  cursor:pointer; padding:12px 18px; list-style:none;
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:var(--blue700);
}
.uf-fold>summary::-webkit-details-marker{display:none}
.uf-folds>.uf-fold>summary:hover{background:var(--grey50)}
.uf-fold>summary::before{
  content:''; flex:none; width:6px; height:6px; margin-right:1px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg); transition:transform .12s;
}
.uf-fold[open]>summary::before{transform:rotate(45deg)}
.uf-fold>summary:hover{color:var(--blue600)}
.uf-fold>summary b{font-weight:700; color:var(--grey600)}
.uf-fold>summary span{font-weight:500; color:var(--grey600)}
.uf-folds>.uf-fold+.uf-fold{border-top:1px solid var(--grey100)}
.uf-folds .quote-box,.uf-folds .standard-box{margin:2px 18px 16px}
.uf-ai-opinion{
  margin-top:12px; padding:7px 11px 8px;
  border-radius:var(--r-lg); background:var(--blue50);
}
.uf-ai-label{display:flex; align-items:center; gap:7px; color:var(--blue700)}
.uf-ai-label>b{
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 2px); font-weight:700;
}
.uf-ai-arrow{flex:none; color:var(--blue600)}
.uf-ai{
  margin:3px 0 0 20px; padding:0; background:none; border:0;
  display:grid; grid-template-columns:20px minmax(0,1fr) 20px; align-items:start; gap:7px;
  color:#253C63; font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 4px);
}
.uf-ai p{margin:0; padding-top:1px; font-weight:700}
.uf-ai-quote{flex:none; color:var(--blue400)}
.uf-ai-quote.close{align-self:end; transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .uf-fold>summary::before{transition:none} }


.engineer-form{padding:18px; margin-bottom:12px}.eng-head{display:flex; align-items:center; margin-bottom:13px}.eng-head .link-btn{margin-left:auto}
/* 카드 주인의 이름표 — 면을 두른 알약 하나로 세운다. 이 카드가 누구의 것인지가 그 자체로
   구역을 나누므로, 아래에 선을 한 줄 더 긋지 않는다. 선과 이름표가 함께 있으면 같은 경계를
   두 번 말하게 된다. */
/* 소제목의 그림표는 글자와 한 덩어리로 움직인다 — 옆의 배지(자동산출)는 별개 항목이다 */
.sec-title>.fn3-cap{font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; gap:8px}
.eng-head .fn3-cap{
  padding:5px 13px 5px 10px; border-radius:999px;
  background:var(--grey100); border:1px solid var(--grey200);
}
.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.form-grid label{font-size:var(--s13-size); font-weight:600; color:var(--grey600)}
.form-grid input,.form-grid select{
  width:100%; margin-top:5px; border:1px solid var(--grey300); border-radius:var(--r-sm); background:#fff;
  padding:9px 10px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey900);
}
.form-grid input:focus,.form-grid select:focus{outline:none; border-color:var(--blue500); box-shadow:0 0 0 3px var(--blue100)}
/* 기술인 카드의 다섯 칸. 트랙 수를 못 박으면 화면 폭에 따라 칸이 앞쪽 좁은 트랙에 몰리고
   오른쪽이 통째로 빈다. 들어온 칸 수만큼만 트랙을 만들되(auto-fit) 한 칸이 260px를 넘지 않게
   묶어 왼쪽부터 같은 폭으로 채운다. */
.engineer-form .form-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 260px));
  justify-content:start;
}
/* 라벨 길이가 제각각이라(자격종목 ↔ 해당 직무분야 자격·실무 경력(일)) 그냥 두면 라벨이
   접히는 칸만 입력칸이 아래로 밀린다. 라벨은 위에 두고 입력칸을 바닥에 붙여 윗변을 맞춘다. */
/* 다섯 칸을 label 로만 찾지 않는다 — 자격종목 칸은 안에 체크가 하나 더 들어가
   label 하나로 감쌀 수 없다(중첩 label 은 어느 칸을 가리키는지 모호해진다).
   다섯 칸이 다 갖고 있는 표시로 찾는다. */
.engineer-form .form-grid [data-fn3-input]{
  display:flex; flex-direction:column; gap:5px;
  font-size:var(--s13-size); font-weight:600; color:var(--grey600);
}
.engineer-form .form-grid [data-fn3-input]>input,
.engineer-form .form-grid [data-fn3-input]>select,
.engineer-form .form-grid [data-fn3-input]>.fn3-days-row,
.engineer-form .form-grid .fn3-field-head+:is(.fn3-read-value,.fn3-same-kind-actions,.fn3-same-kind-row){margin-top:auto}
/* 동종 공사 경력 칸 — 입력란 대신 경력증명서 업로드 단추. 센 값이 있으면 그 위에 읽기 전용으로 선다. */
.fn3-same-kind-actions{display:flex; flex-direction:column; gap:6px}
/* 업로드 단추는 옆 칸의 입력칸과 같은 크기·같은 글자 크기로 세워 한 줄의 칸으로 읽히게 하고,
   누르는 것임은 파란 테두리·파란 굵은 글씨로만 말한다. */
.engineer-form .fn3-upload-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:9px 10px; border:1px solid var(--blue500); border-radius:var(--r-sm); background:#fff;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700; color:var(--blue600); cursor:pointer;
}
.engineer-form .fn3-upload-btn:hover{background:var(--blue50)}
.engineer-form .fn3-upload-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--blue100)}
.engineer-form .fn3-upload-btn:disabled{opacity:.5; cursor:default}
/* 결과가 생긴 동종 칸 — 값(또는 수동 입력란)을 다른 칸과 같은 폭으로 두고, 단추는 그 오른쪽에
   한 줄로 세운다. 한 칸 폭에는 다 들어가지 않으므로 이때는 칸이 격자 한 줄을 다 쓴다. */
/* 올렸지만 값이 없을 때 — 다시 업로드와 수동 입력하기를 칸 안에서 반씩 */
.fn3-same-kind-actions.fn3-split{flex-direction:row}
.engineer-form .fn3-split>.fn3-upload-btn{flex:1 1 0; min-width:0; padding:9px 4px; white-space:nowrap}
.engineer-form .form-grid>.fn3-same-kind-note{grid-column:1 / -1; margin:0; font-weight:400}
.engineer-form .form-grid .fn3-same-kind-wide{grid-column:1 / -1}
.fn3-same-kind-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.fn3-same-kind-row>:is(.fn3-read-value,.fn3-days-row){flex:0 1 260px; min-width:190px; margin-top:0}
.engineer-form .fn3-same-kind-row .fn3-upload-btn{width:auto; padding:9px 14px}
.engineer-form .fn3-same-kind-row .fn3-career-open{
  padding:9px 14px; border-radius:var(--r-sm); font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700;
}
/* 인정경력 칸 이름 오른쪽의 i 안내 — 눌러야 열리는 작은 창이다. 칸을 밀어내지 않도록 띄운다. */
.engineer-form [data-fn3-input="career_years"]{position:relative}
.fn3-help{
  display:inline-flex; align-items:center; justify-content:center; flex:none; margin-left:auto;
  width:18px; height:18px; padding:0; border-radius:50%;
  border:1px solid var(--blue400); background:#fff; color:var(--blue600);
  font-size:11px; line-height:1; font-weight:800; font-style:normal; cursor:pointer;
}
.fn3-help:hover,.fn3-help[aria-expanded="true"]{background:var(--blue50)}
.fn3-help:focus-visible{outline:none; box-shadow:0 0 0 3px var(--blue100)}
.fn3-help-pop{
  position:absolute; z-index:20; top:30px; right:0; width:max-content; max-width:min(400px, 80vw);
  padding:12px 14px; border:1px solid var(--grey200); border-radius:var(--r-sm); background:#fff;
  box-shadow:var(--shadow-2);
  font-size:calc(var(--s13-size) + 3px); line-height:1.6; font-weight:500; color:var(--grey800); word-break:keep-all;
}
.fn3-help-pop[hidden]{display:none}
.fn3-same-kind>.lic-note{margin:0; font-weight:400}
/* 경력은 이 창에서 확인하고 고친다 — 화면에서 유일한 통로라 회색 단추로 두면 지나친다.
   면을 주되 검토 실행(채운 파랑)보다는 낮춰, 무엇이 마지막 단추인지 흐리지 않는다. */
.fn3-career-open{
  background:var(--blue50); border-color:var(--blue100); color:var(--blue700);
}
.fn3-career-open:hover{background:var(--blue100); border-color:var(--blue400)}
/* '자격이 없다'는 종목 이름이 아니라 상태다 — 칸 이름 옆에서 한 번에 고르고,
   고르면 칸을 잠가 '없음' 위에 종목을 덧쓰지 못하게 한다. */
.fn3-field-head{display:flex; align-items:center; gap:8px}
.fn3-none-check{
  display:inline-flex; align-items:center; gap:4px; margin-left:auto;
  font-size:var(--fs-micro); line-height:1; font-weight:600; color:var(--grey600); white-space:nowrap;
}
.form-grid .fn3-none-check input{width:auto; min-width:0; margin:0; padding:0; accent-color:var(--blue500)}
.engineer-form .form-grid input:disabled{background:var(--grey50); color:var(--grey700)}
/* 기능③의 머리말은 같은 층이다 — 이 카드가 누구의 것인지(배치 기술인 N), 결과 화면의 구역 이름.
   한 클래스로 묶어 두어 크기·굵기·색이 자리마다 갈리지 않게 한다. */
.fn3-cap{
  display:flex; align-items:center; gap:7px;
  font-size:var(--t6-size); line-height:var(--t6-lh); font-weight:700; color:var(--grey900);
}
.fn3-prep-section{margin-bottom:28px}
.fn3-prep-section>.sec-title{margin-bottom:10px}
.fn3-prep-section>.sec-title>.btn{margin-left:auto}
.fn3-basis-section .calc-box{margin-bottom:0}
.fn3-basis-note{margin-top:10px; margin-bottom:0}
/* 담당자가 채우는 칸과 시스템이 계산해 둔 값을 제목 줄에서 갈라 준다 —
   입력칸처럼 생긴 숫자를 고치려다 못 고치는 일이 없도록. */
.auto-badge{
  flex:none; padding:2px 7px; border-radius:var(--r-sm);
  background:var(--blue50); border:1px solid var(--blue100); color:var(--blue700);
  font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700; letter-spacing:0;
}
/* 상자 생김새는 .guide-note 가 정한다 — 여기서는 기술인 카드 아래 자리만 잡는다 */
.fn3-engineer-section>.fn3-privacy-note{margin:12px 0 0}
.fn3-privacy-detail{font:inherit;color:inherit;font-weight:400}
.engineer-form>.lic-note:last-child{margin-bottom:0}
.calc-box{padding:18px 20px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr 1fr; align-items:center; gap:15px; margin-bottom:18px}
.calc-box>div span,.calc-box>div b{display:block}.calc-box>div span{font-size:var(--s12-size); color:var(--grey600)}
.calc-box>div b{margin-top:3px; font-size:var(--t6-size); line-height:var(--t6-lh)}.calc-box>strong{color:var(--grey400); font-size:var(--fs-title)}
.calc-box .bracket{padding-left:16px; border-left:1px solid var(--grey200)}
/* 적용 구간은 이 계산의 결론이다 — 앞의 셋(금액·낙찰률·공사예정금액)은 거쳐 가는 값이고
   여기서 어느 배치기준을 쓰는지가 정해진다. 이름을 굵게 두고 값에 파란 면을 입힌다. */
.calc-box .bracket>span{font-weight:700; color:var(--grey800)}
.calc-box .bracket>b{
  display:inline-block; margin-top:5px; padding:3px 10px; border-radius:var(--r-sm);
  background:var(--blue50); border:1px solid var(--blue100); color:var(--blue700); font-weight:700;
}

@media(max-width:1000px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .calc-box{grid-template-columns:1fr auto 1fr}.calc-box .bracket{padding-left:0; border-left:none}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}.scope-note,.mode-note{flex-direction:column}
  .calc-box{grid-template-columns:1fr}.calc-box>strong{display:none}
}

/* ================================================================
   분석결과서 목록
   ================================================================ */
.report-row{display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--grey100)}
.report-row:last-child{border-bottom:none}
.report-body{flex:1; min-width:0}
.report-body b{font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; display:block}
.report-body span{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600)}

/* ================================================================
   규칙 관리

   운영 현황은 먼저 짧게, 실제 규칙과 근거는 탭·아코디언 안에서 자세히 보여 준다.
   ================================================================ */
.rules-loading{display:flex; align-items:center; justify-content:center; gap:10px; min-height:120px; color:var(--grey700)}
.rules-loading .spinner{width:18px; height:18px; border:2px solid var(--blue100); border-top-color:var(--blue500); border-radius:50%; animation:spin .7s linear infinite}
.rules-overview{padding:18px; margin-bottom:12px}
.rules-overview-head{display:flex; align-items:flex-start; gap:12px}
.rules-overview-head>.chip{margin-top:2px; flex:none}
.rules-overview-head>div{min-width:0; flex:1}
.rules-overview-head>div>b{display:block; font-size:var(--s11-size); line-height:var(--s11-lh)}
.rules-overview-head>div>p{margin-top:2px; color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-latest{flex:none; color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-latest b{color:var(--grey900)}
.rules-summary-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px}
.rules-summary-grid button{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:1px 10px; padding:12px 13px;
  border:1px solid var(--grey200); border-radius:var(--r); background:var(--grey50); text-align:left;
}
.rules-summary-grid button:hover,.rules-summary-grid button.on{border-color:var(--blue400); background:var(--blue50)}
.rules-summary-grid span{grid-column:1/-1; color:var(--grey700); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-summary-grid b{grid-row:2/4; align-self:center; color:var(--blue700); font-size:var(--fs-page); line-height:var(--lh-page)}
.rules-summary-grid small{font-size:var(--s12-size); color:var(--grey600)}
.rules-summary-grid em{font-style:normal; font-size:var(--s13-size); color:var(--grey500)}
.rules-runtime{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:16px; overflow:hidden}
.rules-runtime>div{display:grid; grid-template-columns:auto 1fr; gap:0 8px; align-items:center; padding:12px 14px; border-left:1px solid var(--grey100)}
.rules-runtime>div:first-child{border-left:0}
.rules-runtime>div>b{font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-runtime>div>span:last-child{grid-column:2; color:var(--grey600); font-size:var(--s13-size); line-height:var(--s13-lh)}
.rules-runtime>p{grid-column:1/-1; padding:10px 14px; border-top:1px solid var(--grey100); background:var(--grey50); color:var(--grey700); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-status-dot{width:8px; height:8px; grid-row:1/3; border-radius:50%; background:var(--grey400)}
.rules-status-dot.on{background:var(--green500); box-shadow:0 0 0 3px var(--green50)}
.rules-status-dot.wait{background:var(--orange500); box-shadow:0 0 0 3px var(--orange50)}
.rules-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:12px;
  font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600);
}
.rules-meta b{color:var(--grey800); font-weight:700}
.rules-active{display:inline-flex; align-items:center; gap:6px; color:var(--green900); font-weight:700}
.rules-active i{width:7px; height:7px; border-radius:50%; background:var(--green500)}
.rules-flow{margin:0 0 22px; padding:14px 16px; border:1px solid var(--blue100); border-radius:var(--r); background:var(--blue50)}
.rules-flow-label{margin-bottom:9px; color:var(--blue700); font-size:var(--s12-size); line-height:var(--s12-lh); font-weight:700}
.rules-flow-steps{display:flex; align-items:stretch; gap:18px}
.rules-flow-step{position:relative; display:flex; align-items:center; gap:7px; min-width:0; flex:1}
.rules-flow-step:not(:last-child)::after{content:'›'; position:absolute; right:-13px; color:var(--blue400); font-size:20px}
.rules-flow-step>span{display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--blue600); color:#fff; font-size:var(--s13-size); font-weight:700}
.rules-flow-step>b{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey800)}
table.rules{min-width:640px}
table.rules td{text-align:left; white-space:normal; vertical-align:top}
table.rules .r-name{font-weight:600; color:var(--grey900)}
/* 유형 번호는 이름이지 문장이 아니다 — UT-01 이 두 줄로 갈라지지 않게 붙여 둔다 */
table.rules .r-id{white-space:nowrap; color:var(--grey600); font-weight:600}
table.rules .r-law span{display:block; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey700)}
table.rules .r-law span + span{margin-top:2px}

/* 낱말 묶음 — 규칙이 실제로 보는 문자열이라 하나씩 떼어 보여 준다 */
.kw-list{display:flex; flex-wrap:wrap; gap:5px}
.kw{
  background:var(--grey100); border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:2px 7px; font-size:var(--s13-size); line-height:var(--s13-lh); color:var(--grey700);
}
.rule-kv{padding:13px 18px; border-top:1px solid var(--grey100)}
.rule-kv:first-child{border-top:none}
.rule-kv > b{display:block; font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; margin-bottom:5px}
.rule-kv p{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey700); margin-bottom:6px}
.rule-kv p:last-child{margin-bottom:0}
.rule-kv p b{font-weight:700; color:var(--grey900)}
/* 조문 갈래를 늘어놓는 자리 — 본문 문단과 같은 크기로 두고 글머리만 붙인다 */
.rules-kw-list{margin:0 0 6px; padding-left:18px; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey700)}
.rules-kw-list li+li{margin-top:4px}
.rules-kw-list b{font-weight:700; color:var(--grey900)}
.rules-doc-scope{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; overflow:hidden}
.rules-doc-scope>div{display:flex; align-items:center; gap:9px; min-height:48px; padding:10px 14px; border-top:1px solid var(--grey100)}
.rules-doc-scope>div:nth-child(-n+2){border-top:0}
.rules-doc-scope>div:nth-child(even){border-left:1px solid var(--grey100)}
.rules-doc-scope>div>b{font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-source-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.rules-source-card{padding:16px}
.rules-source-card h3{margin-top:10px; font-size:var(--s11-size); line-height:var(--s11-lh)}
.rules-source-card p{margin-top:3px; color:var(--grey700); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-source-card>span{display:block; margin-top:8px; color:var(--grey500); font-size:var(--s13-size); line-height:var(--s13-lh)}
.rules-legal-frame{margin-top:10px; overflow:hidden}
.rules-legal-frame>p{padding:14px 16px; background:var(--blue50); color:var(--grey800); font-size:var(--s11-size); line-height:var(--s11-lh)}
.rules-legal-frame>div:last-child{padding:8px 16px 12px}
.rules-basis-list{display:flex; flex-direction:column; gap:7px}
.rules-bid-rate-card{margin-bottom:22px; overflow:hidden}
.rules-bid-rate-head,.rules-bid-rate-row{display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) minmax(150px,.8fr) 54px; align-items:center; gap:10px; padding:10px 14px}
.rules-bid-rate-head{background:var(--grey50); color:var(--grey600); font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700; border-bottom:1px solid var(--grey200)}
.rules-bid-rate-row{border-bottom:1px solid var(--grey100)}
.rules-bid-rate-row input{width:100%; min-width:0; border:1px solid var(--grey300); border-radius:var(--r-sm); padding:8px 10px; color:var(--grey900); background:#fff; font:inherit}
.rules-bid-rate-row input:focus{outline:none; border-color:var(--blue500); box-shadow:0 0 0 2px var(--blue100)}
.rules-rate-input{position:relative}
.rules-rate-input input{padding-right:30px; text-align:right; font-variant-numeric:tabular-nums}
.rules-rate-input>b{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--grey600); font-size:var(--s12-size)}
.rules-bid-rate-row>.link-btn{justify-self:center}
.rules-bid-rate-actions{display:flex; align-items:center; gap:10px; padding:12px 14px}
.rules-bid-rate-actions>span{flex:1; color:var(--grey600); font-size:var(--s13-size); line-height:var(--s13-lh)}
.rules-basis-detail{overflow:hidden}
.rules-basis-detail>summary{display:grid; grid-template-columns:70px minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:13px 16px; cursor:pointer; list-style:none}
.rules-basis-detail>summary::-webkit-details-marker{display:none}
.rules-basis-detail>summary::after{content:'⌄'; color:var(--grey500); font-size:16px; margin-left:4px}
.rules-basis-detail[open]>summary::after{transform:rotate(180deg)}
.rules-basis-detail>summary>b{font-size:var(--s11-size); line-height:var(--s11-lh)}
.rules-basis-detail>summary>span:last-of-type{color:var(--grey600); font-size:var(--s13-size); line-height:var(--s13-lh)}
.rules-basis-body{padding:16px 18px 18px; border-top:1px solid var(--grey100); background:var(--grey50)}
.rules-issue{padding:11px 13px; border-left:3px solid var(--blue500); background:#fff; color:var(--grey800); font-size:var(--s11-size); line-height:var(--s11-lh)}
.rules-detail-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px}
.rules-detail-grid>div,.rules-signal-grid>div{min-width:0}
.rules-detail-grid b,.rules-signal-grid b,.rules-ground-list>b{display:block; margin-bottom:6px; font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-detail-grid ol,.rules-detail-grid ul{padding-left:19px; color:var(--grey700); font-size:var(--s12-size); line-height:var(--s12-lh)}
.rules-detail-grid li+li{margin-top:4px}
.rules-signal-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--grey200)}
.rules-ground-list{margin-top:16px; padding-top:14px; border-top:1px solid var(--grey200)}
.rules-ground-list .standard-rule-ref{padding:3px 0}

@media(max-width:760px){
  .rules-overview-head{flex-wrap:wrap}.rules-latest{width:100%}
  .rules-summary-grid,.rules-runtime,.rules-source-grid,.rules-detail-grid,.rules-signal-grid{grid-template-columns:1fr}
  .rules-runtime>div{border-left:0; border-top:1px solid var(--grey100)}
  .rules-runtime>div:first-child{border-top:0}
  .rules-flow-steps{display:grid; grid-template-columns:1fr; gap:7px}
  .rules-flow-step:not(:last-child)::after{display:none}
  .rules-doc-scope{grid-template-columns:1fr}
  .rules-doc-scope>div:nth-child(-n+2){border-top:1px solid var(--grey100)}
  .rules-doc-scope>div:first-child{border-top:0}
  .rules-doc-scope>div:nth-child(even){border-left:0}
  .rules-basis-detail>summary{grid-template-columns:58px minmax(0,1fr)}
  .rules-basis-detail>summary>span:last-of-type{grid-column:2}
  .rules-basis-detail>summary::after{grid-column:3; grid-row:1/3}
  .rules-bid-rate-head{display:none}
  .rules-bid-rate-row{grid-template-columns:minmax(0,1fr) minmax(100px,.7fr) 40px; gap:8px}
  .rules-bid-rate-row>label:first-child{grid-column:1/-1}
  .rules-bid-rate-actions{align-items:stretch; flex-wrap:wrap}
  .rules-bid-rate-actions>span{width:100%; flex-basis:100%; order:3}
}

/* ================================================================
   설정

   한 줄에 묻는 것 하나 — 왼쪽은 무엇을 정하는지, 오른쪽은 그 값. 오른쪽 칸의
   너비를 고정해 값들이 한 세로줄에 서게 한다. 훑을 때 눈이 좌우로 흔들리지 않는다.
   ================================================================ */
.set-sec + .set-sec{margin-top:22px}
.set-sec .card{margin-top:10px}
.set-row{
  display:grid; grid-template-columns:1fr 260px; gap:16px; align-items:center;
  padding:13px 18px; border-top:1px solid var(--grey100);
}
.set-row:first-child{border-top:none}
.set-k b{display:block; font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600}
.set-k span{display:block; font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); margin-top:2px}
.set-v{text-align:right}
.set-v .sort-sel{width:100%; text-align:left}
.set-val{font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey900)}
.set-check{display:inline-flex; align-items:center; gap:7px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey800); cursor:pointer}
.set-check input{accent-color:var(--blue500); width:15px; height:15px}
.set-foot{display:flex; justify-content:flex-end; margin-top:20px}
@media(max-width:640px){
  .set-row{grid-template-columns:1fr; gap:8px}
  .set-v{text-align:left}
}

/* ================================================================
   게시판 · 공지사항 / 참고자료 / 자유게시판

   표는 계약 현황과 같은 판(table.ledger)을 쓴다 — 같은 앱에서 목록이 두 가지
   생김새를 가지면, 훑는 눈이 화면마다 다시 적응해야 한다. 여기서는 칸 폭과
   제목 줄의 성격만 게시판에 맞춘다.
   ================================================================ */
table.board{min-width:720px}
/* 칸이 다섯뿐이라 대장(920px)만큼 넓힐 이유가 없다 */
table.board .b-no{color:var(--grey600)}
/* 제목은 눈이 첫 글자를 훑는 칸이라 왼쪽에 붙이고, 길면 줄을 바꾼다 */
table.board .b-title{min-width:280px}
table.board .b-title button{font-weight:600}
.b-cmt{color:var(--blue600); font-weight:700; font-size:var(--s12-size); margin-left:4px}
.b-clip{color:var(--grey500); font-size:var(--s12-size); margin-left:4px}
.board-write-note{margin-left:auto; color:var(--grey500); font-size:var(--s12-size); line-height:var(--s12-lh)}
.board-row{cursor:pointer}
.board-editor{padding:20px; display:flex; flex-direction:column; gap:16px}
.board-field{display:block}
.board-field > b{display:block; margin-bottom:6px; font-size:var(--s11-size); line-height:var(--s11-lh)}
.board-field > span{display:block; margin:-3px 0 7px; color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.board-field input,.board-field textarea,.board-comment-form textarea,.board-comment-edit textarea{
  width:100%; border:1px solid var(--grey300); border-radius:var(--r); padding:10px 12px;
  background:#fff; color:var(--grey900); font:inherit; resize:vertical;
}
.board-field input:focus,.board-field textarea:focus,.board-comment-form textarea:focus,.board-comment-edit textarea:focus{
  outline:none; box-shadow:0 0 0 2px var(--blue100); border-color:var(--blue500);
}
.board-file-field{display:flex; flex-direction:column; gap:9px}
.board-file-label{display:flex; align-items:baseline; gap:8px}
.board-file-label>b{font-size:var(--s11-size); line-height:var(--s11-lh)}
.board-file-label>span,.board-file-caption{color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.board-file-picker{
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:76px;
  border:1px dashed var(--grey300); border-radius:var(--r); background:var(--grey50); color:var(--grey700);
  cursor:pointer; transition:border-color .14s, background .14s, color .14s;
}
.board-file-picker:hover{border-color:var(--blue400); background:var(--blue50); color:var(--blue700)}
.board-file-picker:focus-within{outline:2px solid var(--blue500); outline-offset:2px}
.board-file-picker input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.board-file-picker-icon,.board-file-icon{display:flex; align-items:center; justify-content:center; color:var(--blue600); flex:none}
.board-file-picker>span:last-child{display:flex; flex-direction:column; gap:2px}
.board-file-picker b{font-size:var(--s11-size); line-height:var(--s11-lh)}
.board-file-picker small{color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.board-saved-files,.board-new-files{display:flex; flex-direction:column; gap:6px}
.board-file-row,.board-download{
  display:flex; align-items:center; gap:9px; min-height:42px; padding:8px 11px;
  border:1px solid var(--grey200); border-radius:var(--r); background:#fff;
}
.board-file-name{min-width:0; flex:1; overflow-wrap:anywhere; color:var(--grey800); font-size:var(--s11-size); line-height:var(--s11-lh)}
.board-file-size{flex:none; color:var(--grey500); font-size:var(--s12-size)}
.board-file-remove,.board-file-clear{border:0; background:none; color:var(--red700); font-size:var(--s12-size)}
.board-file-remove:hover,.board-file-clear:hover{text-decoration:underline}
.board-file-clear{align-self:flex-end; padding:3px 0}
.board-form-actions{display:flex; justify-content:flex-end; gap:8px; padding-top:4px}
.board-post-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.board-head-actions{display:flex; gap:6px; flex:none}
.btn-danger{background:var(--red50); border-color:var(--red100); color:var(--red700)}
.btn-danger:hover{background:var(--red100)}
.board-post-content{
  min-height:220px; padding:24px; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:var(--fs-body); line-height:1.85;
}
.board-post-files{margin-top:12px; overflow:hidden}
.board-post-files-head{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--grey100)}
.board-post-files-head>b{font-size:var(--s11-size)}
.board-post-files-head>span{color:var(--blue600); font-size:var(--s12-size); font-weight:700}
.board-post-files>div:last-child{padding:6px 10px}
.board-download{border:0; border-radius:var(--r-sm); text-decoration:none}
.board-download:hover{background:var(--blue50); text-decoration:none}
.board-download-label{flex:none; color:var(--blue700); font-size:var(--s12-size); font-weight:700}
.board-comments{margin-top:24px}
.board-comment-list{margin-top:10px}
.board-comment{position:relative; padding:16px 18px; border-top:1px solid var(--grey100)}
.board-comment:first-child{border-top:none}
.board-comment-head{display:flex; align-items:center; gap:7px; padding-right:92px}
.board-comment-head b{font-size:var(--s11-size)}
.board-comment-head span,.board-comment-head time{color:var(--grey600); font-size:var(--s12-size)}
.board-comment-head time{margin-left:3px}
.board-comment-body p{margin-top:7px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--s11-size); line-height:var(--s11-lh)}
.board-comment-actions{position:absolute; top:13px; right:16px; display:flex; gap:7px}
.board-comment-actions button{border:0; background:none; color:var(--grey600); font-size:var(--s12-size)}
.board-comment-actions button:hover{color:var(--blue700)}
.board-comment-empty{padding:28px; text-align:center; color:var(--grey500); font-size:var(--s11-size)}
.board-comment-form{margin-top:12px; padding:16px 18px}
.board-comment-form > label{display:block; font-size:var(--s11-size); font-weight:700; margin-bottom:7px}
.board-comment-form > div,.board-comment-edit > div{display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-top:8px}
.board-comment-hint{margin-right:auto; color:var(--grey500); font-size:var(--s12-size)}
.board-comment-edit textarea{display:block}

.user-list-title{display:flex; align-items:center}
.user-list-title .btn{margin-left:auto}
table.user-table{min-width:880px}
table.user-table td b{display:block; font-weight:700}
.user-form{padding:20px}
.user-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.user-field{display:block}
.user-field b{display:block; font-size:var(--s11-size); line-height:var(--s11-lh); margin-bottom:5px}
.user-field span{display:block; color:var(--grey500); font-size:var(--s13-size); margin:-3px 0 5px}
.user-field input{width:100%; border:1px solid var(--grey300); border-radius:var(--r); padding:9px 11px; font:inherit}
.user-field input:focus{outline:none; box-shadow:0 0 0 2px var(--blue100); border-color:var(--blue500)}
.user-form-checks{display:flex; gap:22px; margin-top:17px; padding-top:15px; border-top:1px solid var(--grey100)}
@media(max-width:700px){
  .board-post-head{display:block}.board-head-actions{margin-top:12px}.user-form-grid{grid-template-columns:1fr}
}

/* ================================================================
   모달 · 기본사항 확인·보정 / 반려 안내
   ================================================================ */
.overlay{
  position:fixed; inset:0; background:var(--scrim); z-index:100;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.overlay.open{display:flex}
.modal{
  width:100%; max-width:940px; max-height:90vh; overflow:auto;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-2);
}
.m-head{
  padding:18px 22px 14px; border-bottom:1px solid var(--grey200);
  display:flex; align-items:flex-start; gap:12px; position:sticky; top:0; background:#fff; z-index:2;
}
.m-head h2{font-size:var(--t5-size); line-height:var(--t5-lh); font-weight:800}
.m-head p{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey600); margin-top:2px}
.m-close{margin-left:auto; border:none; background:none; color:var(--grey500); font-size:18px; line-height:1; padding:4px}
.m-close:hover{color:var(--grey900)}
.m-body{display:grid; grid-template-columns:1fr 340px; gap:0}
.m-fields{padding:18px 22px; display:flex; flex-direction:column; gap:12px}
.field{border:1px solid var(--grey200); border-radius:var(--r-sm); padding:10px 13px; background:#fff}
.field .f-k{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:600; color:var(--grey600); display:flex; align-items:center; gap:8px}
.field .f-k .conf{margin-left:auto}
/* 근거 위치 — 파서가 보존한 페이지 번호 (§14.4) */
.field .f-k .f-page{color:var(--grey500); font-weight:600}
.field .f-v{margin-top:4px}
.field .f-v input{
  width:100%; border:none; font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey900); background:transparent;
}
.field .f-v input:focus{outline:none}
/* 닫힌 목록에서 고르는 항목 — 입력란과 같은 자리에 나란히 둔다 (원도급 공사: 노선 + 공구) */
.field .f-v.select-pair{display:flex; gap:8px}
.field .f-v select{
  flex:1; min-width:0; border:1px solid var(--grey200); border-radius:var(--r-sm); padding:5px 8px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:600; color:var(--grey900); background:#fff;
}
.field .f-v select:focus{outline:none; box-shadow:0 0 0 2px var(--blue500)}
.field.warn .f-v select{border-color:var(--orange100)}
/* 날짜 항목 — 캘린더에서 고르게 해 입력 서식(YYYY-MM-DD)을 고정한다 */
.field .f-v input[type="date"]{
  width:auto; flex:none; border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:4px 8px; background:#fff; font-size:var(--s11-size); line-height:var(--s11-lh);
}
.field .f-v input[type="date"]:focus{outline:none; box-shadow:0 0 0 2px var(--blue500)}
.field.warn .f-v input[type="date"]{border-color:var(--orange100)}
.field .f-v.date-pair{display:flex; align-items:center; gap:8px}
.f-v.date-pair .sep{color:var(--grey500); font-weight:600}
.field.warn{background:var(--orange50); border-color:var(--orange100)}
.field .f-hint{font-size:var(--s13-size); line-height:var(--s13-lh); color:var(--grey600); margin-top:5px; font-weight:500}
.field.warn .f-hint{color:var(--grey800); font-weight:600}
/* 위 항목에서 자동으로 정해지는 칸 — 담당자가 고칠 수 없다 (원도급 공사 → 원도급사 상호) */
.field.locked{background:var(--grey50)}
.field.locked .f-v input{cursor:default}
.field.focus{box-shadow:0 0 0 2px var(--orange500)}
.radio-inline{display:flex; gap:14px; margin-top:5px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey800)}
.radio-inline label{display:flex; align-items:center; gap:6px; cursor:pointer}
.radio-inline input{accent-color:var(--blue500)}
.m-preview{
  border-left:1px solid var(--grey200); background:var(--grey50); padding:18px;
  display:flex; flex-direction:column; gap:10px;
}
.m-preview .cap{font-size:var(--s13-size); line-height:var(--s13-lh); font-weight:700; color:var(--grey600); letter-spacing:.04em}
.pv-doc{
  background:#fff; border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:14px; font-size:var(--s12-size); line-height:19px; color:var(--grey600);
  white-space:pre-wrap; word-break:break-all; max-height:340px; overflow:auto;
}
.pv-doc .hl{background:#FFE9A8; color:var(--grey900); font-weight:600; padding:1px 2px; border-radius:var(--r-sm)}
.pv-page{font-size:var(--s13-size); line-height:var(--s13-lh); color:var(--grey600); text-align:right}
/* 이미지 판독으로 읽은 계약서 안내 — 주황은 "아직 확인하지 않은 값"을 뜻한다 (§11.3) */
.m-ocrbar{
  margin:0 22px 14px;
  display:flex; gap:9px; align-items:flex-start;
  background:var(--orange50); border:1px solid var(--orange100); border-radius:var(--r-sm);
  padding:11px 14px; font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey800);
}
/* 저장 직전의 마지막 확인 — 다른 보조 문구(12px)보다 2px 크고 진하게 둔다 */
.m-warnbar{
  margin:0 22px 18px;
  display:flex; gap:9px; align-items:flex-start;
  background:var(--grey50); border:1px solid var(--grey200); border-radius:var(--r-sm);
  padding:11px 14px; font-size:14px; line-height:21px; font-weight:700; color:var(--grey700);
}
.m-foot{
  padding:14px 22px; border-top:1px solid var(--grey200);
  display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:#fff;
  align-items:center;
}
/* 공종 경로가 길어 좁은 창에서는 표가 가로로 밀린다 — 화면 폭까지 넓히고 세로로만 스크롤한다 */
.modal.wide{max-width:min(1240px, 96vw)}
.m-scroll{padding:16px 24px; overflow-y:auto; overflow-x:hidden; max-height:64vh}
.m-scroll table.cmp{table-layout:fixed}
.m-scroll table.cmp td, .m-scroll table.cmp th{overflow-wrap:anywhere}
/* 창 안에서는 경로 마디도 접힌다 — 가로 스크롤을 없앤 자리에서 마디가 잘리면 더 나쁘다 */
.m-scroll .crumb-n{white-space:normal}
table.cmp.cmp-items th:nth-child(2), table.cmp.cmp-items td:nth-child(2){width:140px}
table.cmp.cmp-items th:nth-child(3), table.cmp.cmp-items td:nth-child(3){width:190px}

/* 반려 안내 다이얼로그 (화면 5) */
.reject-card{
  width:100%; max-width:440px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:24px;
}
.reject-card .head{display:flex; gap:10px; align-items:flex-start}
.reject-card h2{font-size:var(--t5-size); line-height:var(--t5-lh); font-weight:800}
.reject-card p{font-size:var(--t6-size); line-height:var(--t6-lh); color:var(--grey800); margin-top:8px}
.reject-card .fmt-row{display:flex; gap:5px; margin-top:12px}
.reject-card .foot{display:flex; justify-content:flex-end; margin-top:18px}
.reject-card.missing-doc{max-width:400px; padding:28px}
.reject-card.missing-doc .head{gap:12px}
.reject-card.missing-doc p{margin-top:10px}
.reject-card.missing-doc .fmt-row{margin-top:16px; margin-left:30px}
.reject-card.missing-doc .foot{margin-top:24px}

/* 되돌릴 수 없는 일을 묻는 창 — 반려 안내와 같은 카드를 쓰되 단추가 둘이다.
   묻는 말이 짧아 카드를 좁히고, 실행하는 쪽(예)에만 파랑을 둔다. */
.ask-card{max-width:400px; padding:26px}
.ask-card h2{font-size:var(--t6-size); line-height:var(--t6-lh)}
.ask-card p{margin-top:6px; color:var(--grey700)}
.ask-card .foot{gap:8px; margin-top:22px}
.ask-card .foot .btn{min-width:76px}
.native-ask-dialog{width:min(400px,calc(100vw - 32px));box-sizing:border-box;border:0;margin:auto;color:var(--grey800)}
.native-ask-dialog::backdrop{background:#18223088}

/* ── 실험실 — 옮긴 결과 ─────────────────────────────
   결과는 '지금 내려받는 것'이다. 파일 이름·크기와 내려받기 단추를 한 줄에 두고,
   그 아래에 옮긴 글을 그대로 보여 준다 — 열어 보기 전에 제대로 옮겨졌는지 확인하는 자리다. */
.lab-done{margin-top:0}
.lab-file{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.lab-file>b{font-size:var(--t6-size); line-height:var(--t6-lh); overflow-wrap:anywhere}
.lab-file .lab-meta{color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh)}
.lab-file>.btn{margin-left:auto}
.lab-note{
  display:flex; align-items:flex-start; gap:7px; margin-top:10px;
  font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600); overflow-wrap:anywhere;
}
.lab-note .mark{flex:none; margin-top:1px}
/* 옮긴 글은 손대지 않은 그대로 — 줄바꿈·표 기호가 원문 그대로 보여야 확인이 된다 */
.lab-preview{
  margin-top:12px; padding:14px 16px; max-height:420px; overflow:auto;
  border:1px solid var(--grey200); border-radius:var(--r-sm); background:var(--grey50);
  font-family:var(--font);
  font-size:var(--s12-size); line-height:1.7; color:var(--grey900);
  white-space:pre-wrap; word-break:break-word; tab-size:2;
}
.lab-preview:focus-visible{outline:2px solid var(--blue500); outline-offset:2px}

/* 토스트 */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:var(--grey900); color:#fff; font-size:var(--s11-size); line-height:var(--s11-lh);
  padding:11px 18px; border-radius:99px; box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ================================================================
   반응형 · 인쇄
   ================================================================ */
@media (max-width:1180px){
  .fn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .basics{grid-template-columns:repeat(2,1fr)}
  .lic-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  body{--sidebar-offset:0px}
  .sidebar{position:fixed; left:0; top:0; z-index:120; width:min(var(--sidebar-w),calc(100vw - 48px)); box-shadow:var(--shadow-2)}
  body:not(.sidebar-drawer-open) .sidebar{display:none}
  .sidebar-handle{display:none}
  .sb-drawer-close:not([hidden]){display:inline-flex; position:fixed; left:calc(min(var(--sidebar-w),100vw - 48px) + 4px); top:10px; z-index:121; background:var(--grey900); color:#fff; border-color:transparent}
  .sidebar-backdrop:not([hidden]){display:block; position:fixed; inset:0; z-index:110; border:0; background:var(--scrim); cursor:pointer}
  .content{padding:20px 16px 48px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .prep-grid{grid-template-columns:1fr}
  .m-body{grid-template-columns:1fr}
  .m-preview{border-left:none; border-top:1px solid var(--grey200)}
  .verdict{flex-wrap:wrap}
  /* 조문명이 긴 지적("제20조의5(기술자료 제공 요구 금지 등)")은 좁은 화면에서 한 줄에
     들어가지 않는다 — 카드 밖으로 잘려 나가느니 줄을 넘긴다 */
  .uf-meta{margin-left:0; flex:1 1 100%; flex-wrap:wrap}
  .uf-loc{flex:1 1 auto; min-width:0; white-space:normal}
  .fn2-jobbar{left:12px; right:12px; bottom:12px; gap:9px; padding:11px}
  .fn2-jobbar>.btn{padding-left:10px; padding-right:10px}
}
@media (max-width:640px){
  .topbar{padding:4px 12px; gap:8px}
  .topbar-right{gap:6px; min-width:0; flex-shrink:0}
  .crumb button{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .guide-note{grid-template-columns:28px minmax(0,1fr); gap:10px; padding:14px}
  .guide-note .guide-mark{width:26px; height:26px}
  .fn2-jobbar{align-items:flex-start; flex-wrap:wrap}
  .fn2-job-icon{width:24px; height:24px}
  .fn2-job-body{width:calc(100% - 38px)}
  .fn2-job-status{align-items:flex-start; flex-wrap:wrap; white-space:normal}
  .fn2-job-meta{white-space:normal; overflow:visible}
  .fn2-jobbar>.btn{margin-left:33px}
  .fn2-job-close{position:absolute; right:7px; top:7px}
  body.fn2-job-visible .content{padding-bottom:160px}
  body.fn2-job-visible .toast{bottom:136px}
}

/* 브라우저 도구 모음과 화면 배율로 줄어든 노트북의 세로 공간에 맞춘다. */
@media (max-height:760px){
  .sb-brand{padding-top:1px; padding-bottom:4px}
  .sb-group + .sb-group{margin-top:var(--sb-space-sm)}
  .sb-scroll > .sb-group:first-child{margin-top:var(--sb-space-xs)}
}
@media (max-height:520px){
  .sb-logo-img{width:85%; margin-inline:auto}
}
/* 작은 화면과 터치 입력에서는 글자 크기를 유지하고 누르는 영역만 넓힌다. */
@media (max-width:940px), (any-pointer:coarse){
  .sb-cap,.sb-item{min-height:44px}
}

table.cmp .trade-src{
  display:inline-block; margin-left:5px; font-size:var(--s13-size); line-height:1.4; font-weight:600;
  color:var(--grey600); background:var(--grey50); border:1px solid var(--grey200);
  border-radius:var(--r-sm); padding:0 4px; vertical-align:middle;
}

/* 내역서 판독 — 어느 시트 어느 열을 읽었는지 담당자가 대조하는 상자 */
.read-box{display:flex; flex-direction:column; gap:12px}
.read-line p{font-size:var(--t7-size); line-height:var(--t7-lh); color:var(--grey700)}
.read-line code{
  font-size:var(--s12-size); font-weight:700; color:var(--blue600);
  background:var(--blue50); border:1px solid var(--blue100); border-radius:var(--r-sm); padding:1px 5px;
}
.read-chks{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.read-chk{
  font-size:var(--s12-size); line-height:1.5; color:var(--grey700);
  background:var(--grey50); border:1px solid var(--grey200); border-radius:var(--r-sm); padding:3px 7px;
}
.read-chk.ok{background:var(--green50); border-color:var(--green100); color:var(--green900)}
.read-chk.ng{background:var(--red50); border-color:var(--red100); color:var(--red700); font-weight:700}
.read-notices{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:4px}
.read-notices li{font-size:var(--s12-size); line-height:var(--s12-lh); color:var(--grey600)}
.read-notices li.ng{color:var(--red700); font-weight:600}

@media print{
  body{background:#fff}
  .sidebar,.sidebar-backdrop,.sb-drawer-close,.topbar,.toolbar,.upload-tray,.out-row,.confirm-box,.contract-actions,.overlay,.toast,.fn2-jobbar{display:none !important}
  .card,.row,.verdict{box-shadow:none !important}
  .content{padding:0; max-width:none}
  /* 접어 둔 근거는 인쇄 직전에 펼친다(app.js beforeprint). 여기서는 접힘 표시만 지운다 —
     종이에는 누를 것이 없으므로 화살표와 판단 버튼은 남길 이유가 없다. */
  .uf-fold>summary::before,.uf-gset>summary::after,.uf-head::after,.back-btn,.link-btn{display:none !important}
  /* 유형 카드는 걸린 조문을 모두 품으므로 통째로 한 쪽에 넣을 수 없다 —
     쪼개지지 않아야 하는 것은 조문 하나, 근거 묶음 하나 단위다. */
  .uf-clause,.uf-gset,.uf-why,.standard-ref{break-inside:avoid}
  .standard-full{max-height:none; overflow:visible}
}

/* ── 현장 기준정보 (§8.12) ─────────────────────────────
   진행률 막대는 건수 기준이라 보조 지표다 — 눈에 덜 띄게 두고,
   주 지표인 보완 목록을 카드로 올린다. */
.bl-route{padding:10px 16px 4px; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600); border-top:1px solid var(--grey200)}
.bl-route:first-child{border-top:none}
.bl-row{display:grid; grid-template-columns:1fr 220px 200px; gap:12px; align-items:center;
  padding:11px 16px; border-top:1px solid var(--grey100); cursor:pointer}
.bl-row:hover{background:var(--grey50)}
.bl-name{font-weight:600; font-size:var(--fs-body); line-height:var(--lh-body); display:flex; align-items:center; gap:6px}
.bl-prog{display:flex; align-items:center; gap:8px}
.bl-bar{flex:1; height:6px; background:var(--grey200); border-radius:99px; overflow:hidden}
.bl-bar.wide{width:100%; margin-top:8px; height:8px}
.bl-bar i{display:block; height:100%; background:var(--green500); border-radius:99px}
.bl-pct{font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600); white-space:nowrap}
.bl-meta{display:flex; gap:10px; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--grey600); justify-content:flex-end}
.bl-warn{color:var(--orange500); font-weight:600}

.bl-chunk{border-top:1px solid var(--grey100); padding:12px 16px}
.bl-chunk:first-of-type{border-top:none}
.bl-chunk-head{display:flex; align-items:center; gap:10px; font-size:var(--fs-body); line-height:var(--lh-body)}
.bl-chunk-head b{font-weight:600}
.bl-chunk-head .num{color:var(--grey600); font-size:var(--fs-micro)}
.bl-chunk-head .bl-toggle{margin-left:auto}
.bl-chunk-act{display:flex; gap:8px; margin-top:8px; align-items:center}
.bl-label,.bl-label-one{font:inherit; font-size:var(--fs-body); padding:6px 8px;
  border:1px solid var(--grey300); border-radius:var(--r-sm); background:#fff; max-width:320px}
.bl-lines{margin-top:10px; border-top:1px dashed var(--grey200); padding-top:8px}
.bl-line{display:flex; align-items:center; gap:10px; padding:5px 0}
.bl-line-name{flex:1; font-size:var(--fs-body); line-height:var(--lh-body)}
.bl-line-name .row-sub{color:var(--grey500); font-size:var(--fs-micro)}
.bl-gaps .lic-note{padding:0 16px 8px}
.bl-gap{display:flex; gap:12px; padding:7px 16px; border-top:1px solid var(--grey100); font-size:var(--fs-body); line-height:var(--lh-body)}
.bl-gap .num{color:var(--grey700); white-space:nowrap}

table.cmp tr.skip td{color:var(--grey600); background:var(--grey50)}
.feed-btn{margin-left:8px; vertical-align:middle}

/* ── 공종 계층 (대공종 › 세부공종 › 항목) ─────────────────
   리프 이름만으로는 내역서 어디의 공종인지 알 수 없다. 경로는 윗줄에 작게 깔고
   판정 대상인 항목 이름을 굵게 남겨, 훑을 때 계층이 배경처럼 읽히게 한다. */
/* 이름이 위쪽 상단바 빵부스러기(.crumb)와 겹쳐 그쪽 display:flex·gap을 덮고 있었다.
   같은 '경로'라도 쓰임이 달라 따로 둔다. */
.crumb-path{display:inline; color:var(--grey600); font-size:var(--s12-size); line-height:var(--s12-lh); font-weight:500}
.crumb-n{white-space:nowrap}
.crumb-s{margin:0 5px; color:var(--grey400)}
.crumb-n.fold{color:var(--grey400)}
.leaf-spec{color:var(--grey600); font-weight:400}
.wt-cell{display:flex; flex-direction:column; gap:2px; min-width:0}
.wt-path{word-break:keep-all}
.wt-more{margin-left:6px; font-size:var(--s12-size); color:var(--grey600); font-weight:500; white-space:nowrap}
.th-sub{margin-left:6px; font-weight:400; color:var(--grey500); letter-spacing:0}
table.cmp.cmp-wt td{vertical-align:top}
table.cmp.cmp-wt td .mark.sm{margin-top:2px}
#screen-fn1-result .cmp-wt{min-width:920px}
/* 필요 등록업종 셀: 판독 결과·설명과 출처·조작을 구분한다. */
#screen-fn1-result .required-license-cell{display:flex; flex-direction:column; gap:8px}
#screen-fn1-result .required-license-info{font-size:15px; line-height:22px; overflow-wrap:anywhere}
#screen-fn1-result .required-license-info>b,#screen-fn1-result .required-license-info>.warn-lic{display:block; font-weight:700}
#screen-fn1-result .required-license-info .warn-note,#screen-fn1-result .required-license-info .pass-note{margin-top:4px; color:var(--grey700); font-size:12px; line-height:18px; font-weight:400}
#screen-fn1-result tr.skip .required-license-info>.pass-note{margin-top:0; font-size:15px; line-height:22px}
#screen-fn1-result .required-license-tools{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px}
#screen-fn1-result .required-license-tools .trade-src{margin:0; padding:2px 6px; border-color:var(--grey200); border-radius:4px; background:#fff; color:var(--grey700); font-size:11px; line-height:17px; font-weight:500}
#screen-fn1-result .required-license-tools .feed-btn{margin:0 0 0 auto; padding:4px 9px; min-height:28px; border-radius:5px; border-color:var(--grey300); background:rgba(255,255,255,.85); color:var(--grey700); font-size:12px; line-height:18px; font-weight:600}
#screen-fn1-result .required-license-tools .feed-btn:hover{background:var(--blue50); border-color:var(--blue400); color:var(--blue700)}
/* 핵심 대조표 뒤의 기술 정보는 필요할 때만 펼쳐 본다. */
.read-fold>summary{cursor:pointer; list-style:none; margin-bottom:0}
.read-fold>summary::-webkit-details-marker{display:none}
.read-fold>summary::after{content:'펼쳐보기'; margin-left:auto; color:var(--blue600); font-size:var(--s13-size); font-weight:600}
.read-fold[open]>summary{margin-bottom:10px}
.read-fold[open]>summary::after{content:'접기'}
/* 상세 모달 — 경로 머리줄 아래에 그 경로의 리프를 들여 놓는다 */
table.cmp tr.it-grp td{background:var(--grey50); border-bottom:1px solid var(--grey200); padding-top:9px; padding-bottom:9px}
table.cmp tr.it-grp .it-grp-n{margin-left:8px; color:var(--grey600); font-size:var(--s12-size)}
table.cmp td.it-leaf{padding-left:26px; position:relative}
table.cmp td.it-leaf::before{
  content:''; position:absolute; left:14px; top:calc(50% - 1px);
  width:5px; height:1px; background:var(--grey300);
}

/* ── 업종 지정 창 (§8.8) ───────────────────────────────
   기준정보 구축 화면과 같은 방식이다 — 경로(덩어리)마다 한 번 고르는 것이 기본이고,
   줄 단위 지정은 펼쳐야 나온다. 판독 불명 한 줄에 수백 건이 묶이기 때문이다. */
#tradeModal .modal.wide{
  display:flex; flex-direction:column; max-width:1120px; max-height:calc(100dvh - 48px);
  overflow:hidden; border-radius:16px; box-shadow:0 24px 80px rgba(15,30,55,.24);
}
#tradeModal .m-head{flex:none; padding:24px 28px 20px; gap:20px; align-items:flex-start}
#tradeModal .m-head>div{min-width:0}
#tradeModal .m-head h2{font-size:23px; line-height:1.45; overflow-wrap:anywhere}
#tradeModal .m-close{display:grid; place-items:center; width:36px; height:36px; flex:none; padding:0; border-radius:8px; background:var(--grey100); color:var(--grey700)}
#tradeModal .m-close:hover{background:var(--grey200); color:var(--grey900)}
#tradeModal #tdBody{flex:1 1 auto; min-height:0; max-height:none; padding:16px 28px; background:var(--grey50); overscroll-behavior:contain; scrollbar-gutter:stable}
#tradeModal .td-grp{padding:16px 20px; border:1px solid var(--grey200); border-radius:12px; background:#fff; box-shadow:var(--shadow-1)}
#tradeModal .td-grp+.td-grp{margin-top:12px}
#tradeModal .td-grp-head{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center}
#tradeModal .td-grp-head .crumb-path{font-size:15px; line-height:1.55; font-weight:700; color:var(--grey800); overflow-wrap:anywhere}
#tradeModal .td-grp-head .crumb-n:last-child{color:var(--grey900)}
#tradeModal .td-grp-head .crumb-s{color:var(--grey500); margin:0 6px; font-weight:400}
#tradeModal .td-grp-head>.num{padding:4px 9px; border-radius:6px; background:var(--grey100); color:var(--grey700); font-size:12px; line-height:20px; font-weight:600; white-space:nowrap}
#tradeModal .td-toggle{min-height:34px; padding:6px 12px; border-radius:7px; color:var(--grey700); background:var(--grey50); border-color:var(--grey300); font-size:13px; font-weight:700}
#tradeModal .td-toggle:hover{background:var(--grey200); color:var(--grey900)}
#tradeModal .td-grp:has(.td-lines:not([hidden])) .td-toggle{background:var(--blue50); border-color:var(--blue100); color:var(--blue700)}
#tradeModal .td-grp-act{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:12px; padding:12px 14px; border:1px solid var(--blue100); border-radius:9px; background:var(--blue50)}
#tradeModal select{
  display:block; width:100%; min-width:0; min-height:42px; padding:8px 12px; border:1px solid var(--grey400);
  border-radius:7px; background:#fff; color:var(--grey700); font-size:15px; line-height:22px; font-weight:600;
  box-shadow:0 1px 2px rgba(27,34,43,.04);
}
#tradeModal select:hover{border-color:var(--blue400)}
#tradeModal select:focus-visible{border-color:var(--blue500); outline:3px solid var(--blue100); outline-offset:1px}
#tradeModal select:has(option:checked:not([value=""])){border-color:var(--blue400); color:var(--blue700); background:var(--blue50)}
#tradeModal select option{background:#fff; color:var(--grey900); font-weight:400}
#tradeModal select option.td-exclude,
#tradeModal select:has(option.td-exclude:checked){font-weight:700}
#tradeModal .td-apply{min-height:42px; padding:8px 16px; border:1px solid #B9CFF7; border-radius:7px; color:var(--blue700); background:#DCE8FD; font-size:13px; font-weight:700; box-shadow:0 2px 3px rgba(29,83,188,.08)}
#tradeModal .td-apply:hover{background:#CBDEFC; border-color:var(--blue400); box-shadow:0 3px 6px rgba(29,83,188,.12)}
#tradeModal .td-lines{margin-top:12px; border-top:1px solid var(--grey200)}
#tradeModal .td-line{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,38%); gap:24px; align-items:center; padding:12px 0}
#tradeModal .td-line+.td-line{border-top:1px solid var(--grey100)}
#tradeModal .td-line:last-child{padding-bottom:0}
#tradeModal .td-line-name{min-width:0; font-size:16px; line-height:1.55; font-weight:600; overflow-wrap:anywhere}
#tradeModal .td-line-name .leaf-spec{font-size:13px; color:var(--grey700)}
#tradeModal .td-line-name .cell-ref{display:inline-block; margin-left:8px; padding:1px 6px; border:1px solid var(--grey200); border-radius:4px; color:var(--grey700); background:var(--grey50); font-size:11px; line-height:18px; font-weight:500; vertical-align:middle}
#tradeModal .td-amt{display:block; margin-top:3px; color:var(--grey700); font-size:13px; line-height:20px; font-weight:500}
#tradeModal .m-foot{flex:none; z-index:3; padding:18px 28px; gap:12px; box-shadow:0 -4px 16px rgba(27,34,43,.04)}
#tradeModal .td-count{margin-right:auto; padding:8px 12px; border-radius:7px; color:var(--grey800); background:var(--grey100); font-size:14px; line-height:22px; font-weight:700}
#tradeModal .m-foot .btn{min-height:46px; padding:11px 18px; border-radius:8px; font-size:16px; line-height:24px; font-weight:700}
#tradeModal #tdCancel{min-width:84px; color:var(--grey700)}
#tradeModal #tdSave:not(:disabled){box-shadow:0 4px 10px rgba(37,99,219,.23)}
#tradeModal #tdSave:disabled{opacity:1; background:var(--grey200); color:var(--grey600); box-shadow:none}
@media(max-width:850px){
  #tradeModal .td-grp-head{grid-template-columns:minmax(0,1fr) auto}
  #tradeModal .td-grp-head>.crumb-path{grid-column:1/-1}
  #tradeModal .td-grp-head>.num{justify-self:start}
  #tradeModal .td-grp-head>.td-toggle{justify-self:end}
  #tradeModal .td-line{grid-template-columns:minmax(0,1fr) minmax(240px,44%); gap:16px}
  #tradeModal .m-foot{flex-wrap:wrap}
  #tradeModal .td-count{flex-basis:100%; margin-right:0}
}
@media(max-width:600px){
  #tradeModal{padding:12px}
  #tradeModal .modal.wide{max-height:calc(100dvh - 24px); border-radius:12px}
  #tradeModal .m-head{padding:18px 16px 14px; gap:10px}
  #tradeModal .m-head h2{font-size:20px}
  #tradeModal #tdBody{padding:12px}
  #tradeModal .td-grp{padding:12px 14px}
  #tradeModal .td-grp-head .crumb-path{font-size:14px}
  #tradeModal .td-grp-act{grid-template-columns:minmax(0,1fr); gap:8px; padding:8px 10px; margin-top:10px}
  #tradeModal .td-line{grid-template-columns:minmax(0,1fr); gap:8px; padding:11px 0}
  #tradeModal .td-line-name{font-size:15px}
  #tradeModal .m-foot{padding:12px 16px; gap:10px}
  #tradeModal .td-count{padding:6px 10px; font-size:13px}
  #tradeModal .m-foot .btn{font-size:14px; padding:10px 12px}
  #tradeModal #tdCancel{min-width:64px}
  #tradeModal #tdSave{flex:1}
}
.fn-chip.stale{background:var(--orange50); border-color:var(--orange100); color:var(--grey800); font-weight:600}

/* ================================================================
   로그인 (public/login.html)
   ================================================================
   블루 민트 배경과 넉넉한 글래스 카드. 로고와 입력은 대비를 유지한다. */
.login-page{
  --login-ink:#142c52; --login-muted:#5b6d85; --login-blue:#0765ea;
  --login-focus:#1874ed; --login-border:#cbdcee; --login-input:rgba(255,255,255,.76);
  color-scheme:only light;
  background:
    radial-gradient(ellipse at 18% 20%,#bdd4ff,transparent 53%),
    radial-gradient(ellipse at 85% 73%,#aff0e2,transparent 52%),
    #edf5ff;
  color:var(--login-ink);
  min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:42px 24px;
  position:relative; isolation:isolate; overflow-x:clip;
}
.login-page::before{
  content:""; position:fixed; inset:-18%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 20%,#bdd4ff,transparent 53%),
    radial-gradient(ellipse at 85% 73%,#aff0e2,transparent 52%),
    radial-gradient(ellipse at 64% 18%,#e2eaff,transparent 48%);
  animation:login-color-drift 40s ease-in-out infinite alternate;
}
@keyframes login-color-drift{
  from{transform:translate(-2%,-1%) scale(1)}
  to{transform:translate(3%,3%) scale(1.07)}
}
.login{width:90%; max-width:396px; min-width:0}
.login-panel{
  /* 창 안의 로고·글자·입력·버튼·여백을 같은 비율로 줄인다. */
  zoom:.9;
  position:relative; isolation:isolate;
  border:1px solid rgba(255,255,255,.88); border-radius:28px;
  box-shadow:0 28px 75px -18px rgba(34,75,128,.22), 0 8px 24px rgba(38,86,126,.06),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.login-panel::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:rgba(255,255,255,.94); pointer-events:none;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login-panel::before{
    background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.84) 28%,rgba(247,253,255,.66));
    -webkit-backdrop-filter:blur(24px) saturate(135%);
    backdrop-filter:blur(24px) saturate(135%);
  }
}
.login-logo{
  display:block; width:100%; max-width:none; height:auto;
  padding:28px 23px 2px; mix-blend-mode:multiply;
}

.login-card{padding:28px 36px 36px}
.login-card[hidden]{display:none}
.login-card h1{font-size:26px; line-height:1.4; font-weight:800; letter-spacing:-.6px}
.login-sub{font-size:14px; line-height:1.7; color:var(--login-muted); margin-top:8px; margin-bottom:28px}
#loginForm .login-sub{font-size:16px; line-height:1.4; margin-top:6px; margin-bottom:22px}
#loginForm .login-label{margin-top:18px; margin-bottom:7px}
#loginForm .login-msg{min-height:15px; margin-top:6px}
#loginForm .login-go{margin-top:5px}

.login-label{
  display:block; margin-top:22px; margin-bottom:9px;
  font-size:16px; line-height:22px; font-weight:600; color:var(--login-ink);
}
.pin-row{position:relative; display:flex; align-items:center}
.login-input{
  display:block; width:100%; flex:1; min-width:0; height:52px;
  border:1px solid var(--login-border); border-radius:12px; background:var(--login-input);
  padding:13px 16px; color:var(--login-ink);
  font-size:16px; line-height:24px; font-weight:400;
  box-shadow:inset 0 1px 2px rgba(32,77,126,.025);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.login-input::placeholder{color:#7b8ca0}
.login-input:hover{border-color:#9fbddd; background:rgba(255,255,255,.9)}
.login-page .login-input:focus{
  outline:2px solid var(--login-focus); outline-offset:0; border-color:var(--login-focus);
  background:rgba(255,255,255,.96); box-shadow:0 0 0 4px rgba(24,116,237,.12);
}
.pin-row .login-input{padding-right:60px}
.login-page .pin-peek{
  position:absolute; right:6px; min-width:44px; min-height:44px; padding:3px 5px; border:0; border-radius:8px;
  background:transparent; color:#506c86; font-size:13px; line-height:20px; font-weight:500;
}
.login-page .pin-peek:hover{background:#e5effc; color:var(--login-blue)}

/* 틀린 이유는 색이 아니라 글이 진다. 칸 테두리만 '입력 확인' 주황으로 바꿔
   어디를 고쳐야 하는지 가리키고, 면 전체를 물들이지는 않는다. */
.login-msg{
  min-height:var(--lh-micro); margin-top:8px;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; color:var(--login-ink);
}
.login-card.bad .login-input:not(:focus){border-color:var(--orange500)}

.login-page .login-go{
  width:100%; min-height:52px; margin-top:6px; padding:13px 16px; border:0; border-radius:12px;
  background:linear-gradient(115deg,var(--login-blue),#1487e6); color:#fff;
  font-size:16px; line-height:24px; font-weight:700;
  box-shadow:0 10px 22px -8px rgba(7,101,234,.38), inset 0 1px 0 rgba(255,255,255,.22);
  transition:background .18s, box-shadow .18s;
}
.login-page .login-go:hover{
  background:linear-gradient(115deg,#075bd3,#107bd5);
  box-shadow:0 12px 26px -8px rgba(7,101,234,.46), inset 0 1px 0 rgba(255,255,255,.22);
}

.login-foot{
  margin-top:26px; text-align:center; white-space:nowrap;
  font-size:12px; line-height:1.65; color:#596d86;
}
@media(max-height:780px){
  .login-page{padding-block:16px}
}
@media(max-width:640px){
  .login-page{
    padding:24px;
    padding-top:max(24px,env(safe-area-inset-top));
    padding-right:max(24px,env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
    padding-left:max(24px,env(safe-area-inset-left));
  }
  .login{max-width:342px}
  .login-panel{border-radius:24px}
  .login-logo{max-width:320px; margin-inline:auto; padding:22px 25px 0}
  .login-card{padding:22px}
  #loginForm .login-sub br{display:none}
  .login-foot{display:none}
}
@media(max-width:360px){
  .login-page{padding-inline:20px}
  .login-card{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .login-page::before{animation:none}
  .login-input, .login-page .login-go{transition:none}
}

.fn3-read-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; color:var(--grey800)}
.fn3-read-value{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px;
  border:1px solid var(--grey300); border-radius:var(--r-sm); background:#fff;
  padding:9px 10px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey900); overflow-wrap:anywhere;
}
.fn3-read-value strong{font-weight:600}
.fn3-read-page{flex:none; font-size:var(--s13-size); color:var(--grey600)}
.fn3-ai-opinion{margin-top:18px}
.fn3-ai-opinion .uf-ai{display:block; margin:6px 0 0; overflow-wrap:anywhere}
.fn3-career-detail{margin-top:22px; padding-top:18px; border-top:1px solid var(--grey200)}
.fn3-career-table{margin-top:12px;min-width:0;table-layout:fixed}
.fn3-career-table th:nth-child(1){width:26%}.fn3-career-table th:nth-child(2){width:30%}
.fn3-career-table th:nth-child(3){width:9%}.fn3-career-table th:nth-child(4){width:14%}
.fn3-career-table th:nth-child(5){width:21%}
.fn3-career-table td{padding:18px 12px;vertical-align:top;white-space:normal;overflow-wrap:anywhere;border-bottom:1px solid var(--grey200)}
.fn3-career-table td p{margin:6px 0 0}
.fn3-career-table th:nth-child(3),.fn3-career-table th:nth-child(4){text-align:center;white-space:nowrap}
.fn3-career-table .fn3-career-days,.fn3-career-table .fn3-career-recognition{text-align:center;vertical-align:middle;white-space:nowrap}
.fn3-career-days{font-weight:600;font-variant-numeric:tabular-nums}
.fn3-career-check{appearance:none;display:inline-block;width:20px;height:20px;margin:0;border:2px solid #b9c1cc;border-radius:5px;background:#fff;vertical-align:middle;opacity:1;cursor:pointer}
.fn3-career-check:focus-visible{outline:3px solid var(--blue600);outline-offset:3px}
.fn3-career-check:checked{background:var(--blue600);border-color:var(--blue600)}
.fn3-career-check:checked::after{content:"";display:block;width:5px;height:10px;margin:1px 0 0 5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fn3-career-table .fn3-read-page{display:block; margin-top:4px}
.fn3-career-status{display:inline-flex;align-items:center;white-space:nowrap;padding:3px 8px;border-radius:6px;font-size:12px;line-height:20px;font-weight:600;background:var(--grey100);color:var(--grey700)}
.fn3-career-status.candidate{background:#eaf6ee;color:#22623c}.fn3-career-status.review{background:#fff2d9;color:#885518}
.fn3-career-choice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;cursor:pointer}
.fn3-career-meta{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:8px;color:var(--grey600);font-size:13px;line-height:1.6}
.fn3-career-basis ul{margin:0;padding-left:15px;font-size:13px;line-height:1.8;color:var(--grey700)}
.fn3-career-project-input{width:100%;min-width:0;box-sizing:border-box;padding:9px 10px;border:1px solid var(--grey300);border-radius:7px;background:#fff;color:var(--grey900);font:inherit;font-size:14px;font-weight:600}
.fn3-career-project-input:focus,.fn3-career-period input:focus{outline:2px solid var(--blue600);outline-offset:2px}
.fn3-career-reset{display:inline-block;margin-top:7px;padding:2px 0;border:0;background:transparent;font-size:12px;color:var(--blue700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fn3-career-filters{display:flex;gap:6px;flex-wrap:wrap}
.fn3-career-filters button{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid transparent;border-radius:8px;background:var(--grey50);color:var(--grey700);font:inherit;font-size:13px;cursor:pointer}
.fn3-career-filters button[aria-pressed="true"]{background:var(--blue50);border-color:var(--blue100);color:var(--blue700);font-weight:700}
.fn3-career-filters button span{font-variant-numeric:tabular-nums}
.fn3-career-save-note{margin-left:auto;font-size:12px;color:var(--grey600)}
.fn3-career-sources{margin-top:14px; border:1px solid var(--grey300); border-radius:var(--r-sm); padding:12px}
.fn3-career-sources summary{cursor:pointer; font-size:var(--s13-size); font-weight:600}
.fn3-career-sources pre{white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:var(--s13-size); max-height:320px; overflow:auto; margin:8px 0 16px}

/* 배치 기술인 표 — 사람 하나가 한 줄이다. 계약 전체를 묻는 검토결과는 묻는 단위가
   달라 아래에 따로 세운다(.fn3-check-table). */
.fn3-result-card{border-color:var(--grey300); overflow:hidden}
/* 사실 하나에 칸 하나. 이름은 머리글이 한 번만 말하고, 칸에는 값만 든다 —
   한 칸에 '자격 · 미입력 / 직무분야 · 토목'처럼 이름표를 다시 달면 표가 줄글이 된다.
   경력 두 칸은 숫자를 견주는 자리라 오른쪽으로 맞춘다. */
table.fn3-result-table{table-layout:fixed}
.fn3-col-label{width:15%}.fn3-col-num{width:18%}
/* 표 안의 글자 크기는 머리글부터 값까지 하나다 — 줄머리(기술인 N)만 작으면 같은 줄이
   두 층으로 읽힌다. 층은 크기가 아니라 굵기와 색이 진다.
   칸이 짧은 값들이라 가운데로 맞춘다. 숫자는 자릿수가 흔들리지 않게 고정폭으로 둔다. */
table.fn3-result-table th,table.fn3-result-table td{
  padding:14px 16px; text-align:center; white-space:normal; overflow-wrap:anywhere; vertical-align:middle;
  font-size:var(--s11-size); line-height:var(--s11-lh);
}
table.fn3-result-table thead th{padding:11px 16px; color:var(--grey700); font-weight:700; background:var(--grey100)}
table.fn3-result-table .fn3-engineer-row th{background:#fff; color:var(--grey900); border-bottom:1px solid var(--grey200)}
table.fn3-result-table .fn3-engineer-row td{border-bottom:1px solid var(--grey200)}
table.fn3-result-table .fn3-engineer-row strong{font-weight:700; color:var(--grey900)}
/* 판독 출처는 줄의 주인을 가리키는 딱지다 — 이름 아래에 조용히 붙인다 */
.fn3-source{display:block; margin-top:5px}
/* 값이 없다는 것도 읽어야 할 정보다. 비워 두면 칸을 건너뛴 것인지 알 수 없다 */
.fn3-none{color:var(--grey500)}
table.fn3-result-table tr:last-child th,table.fn3-result-table tr:last-child td{border-bottom:0}
/* 검토결과 표 — 기능①의 업종별 대조표를 그대로 따른다. 판정은 왼쪽 끝 표시 하나로,
   확인필요는 줄 전체를 물들여 말한다. 공용 th 는 표 머리글용이라 회색 면과 작은 글씨를
   갖고 있어, 줄 머리글(구분)은 본문과 같은 층으로 되돌린다. */
.fn3-check-table th[scope="row"]{
  background:transparent; text-align:left; white-space:nowrap;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700; color:var(--grey900);
  letter-spacing:-.01em; padding:11px 14px; vertical-align:middle;
}
.fn3-check-table tr.hl th[scope="row"]{background:var(--red50)}
.fn3-check-table td{word-break:keep-all}
/* 요건 · 적용한 기준 · 그래서 이 사람이 어떤지 — 줄마다 하는 말이 달라 글머리로 가른다 */
.fn3-check-lines{margin:0; padding-left:17px}
.fn3-check-lines li+li{margin-top:5px}
.fn3-check-details{margin-top:6px}
/* 결과 화면에서 담당자가 실제로 무언가를 해야 하는 유일한 안내다 — 공용 안내 상자보다
   한 단(1.5px) 키워, 표를 훑고 내려온 눈이 그냥 지나치지 않게 한다. */
.fn3-exceptions{margin:16px 0 0}
.fn3-exceptions .guide-body>strong{font-size:calc(var(--s11-size) + 1.5px); line-height:calc(var(--s11-lh) + 1.5px)}
.fn3-exceptions .guide-lines{font-size:calc(var(--fs-micro) + 3.5px); line-height:calc(var(--lh-micro) + 4.5px)}
.guide-note .guide-lead{
  margin-top:5px; color:var(--grey800);
  font-size:calc(var(--fs-micro) + 2px); line-height:calc(var(--lh-micro) + 3px);
}
.guide-note .guide-lead+.guide-lines{margin-top:8px}
.guide-note .guide-lines li+li{margin-top:4px}
.fn3-empty{text-align:center; color:var(--grey600)}
@media(max-width:900px){
  .fn3-result-card{overflow-x:auto}
  table.fn3-result-table{min-width:820px}
  table.fn3-result-table th,table.fn3-result-table td{padding:14px}
}
@media print{
  .fn3-result-card{overflow:visible}
  table.fn3-result-table{min-width:0}
  table.fn3-result-table tr{break-inside:avoid}
}
.fn3-needs-info{background:#fff1f2!important;color:var(--grey900)!important;border-radius:8px;padding:10px}
.fn3-needs-info :is(strong,input,select){color:var(--grey900)}
.fn3-needs-info :is(dt,.fn3-read-page){color:var(--grey700)}
.fn3-needs-info :is(input,select){border-color:#fecdd3;background:#fff8f8}
/* 일수 입력 옆의 환산 결과 — 입력값이 아니라 그 값이 무엇이 되는지를 말한다.
   입력칸 안에 겹쳐 놓으면 칸 높이가 줄마다 달라져(라벨이 두 줄로 접히는 칸이 있다)
   글자가 칸 밖으로 밀린다. 입력칸과 한 줄에 나란히 세우고 가운데를 맞춘다. */
.fn3-days-row{display:flex; align-items:center; gap:10px; margin-top:5px}
.form-grid .fn3-days-row input{flex:1; min-width:0; margin-top:0}
.fn3-converted{
  flex:none; white-space:nowrap;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:700; color:var(--blue600);
}
/* 값이 없으면 자리도 비운다 — 빈 칸 옆에 여백만 남으면 무엇을 기다리는 자리인지 흐려진다 */
.fn3-converted:empty{display:none}
.fn3-career-dialog{width:min(1200px,calc(100vw - 32px));max-height:90vh;box-sizing:border-box;overflow:auto;border:0;border-radius:16px;padding:24px;margin:auto;color:var(--grey800);box-shadow:0 24px 80px #0003}
.fn3-career-dialog::backdrop{background:#18223088}
.fn3-career-dialog .fn3-read-head{position:sticky;top:-24px;z-index:2;justify-content:space-between;gap:16px;padding:12px 0;background:#fff}
.fn3-career-dialog h2{margin:0;font-size:20px}
.fn3-career-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.fn3-career-total{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:18px;background:var(--grey50);border-radius:10px;margin:16px 0}
.fn3-career-total strong{font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fn3-career-period{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fn3-career-period label{display:grid;gap:5px;font-size:12px;color:var(--grey600)}
.fn3-career-period input{width:100%;min-width:0;min-height:40px;box-sizing:border-box;padding:8px 6px;border:1px solid var(--grey300);border-radius:7px;background:#fff;color:var(--grey800);font:inherit;font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
.fn3-career-period input[aria-invalid="true"]{border-color:#be5065;background:#fff8f8}
.fn3-career-error{color:#9f1239;font-size:14px}
.fn3-career-error:empty{display:none}
@media(max-width:1050px) and (min-width:761px){.fn3-career-period{grid-template-columns:1fr}.fn3-career-choice{flex-direction:column}.fn3-career-table th:nth-child(2){width:23%}.fn3-career-table th:nth-child(1){width:30%}.fn3-career-table th:nth-child(5){width:24%}}
@media(max-width:760px){
  .fn3-career-dialog{padding:18px;width:calc(100vw - 20px)}
  .fn3-career-dialog h2{font-size:17px;line-height:1.5}
  .fn3-career-dialog .fn3-read-head{top:-18px}
  .fn3-career-dialog .fn3-read-head .btn{flex:none}
  .fn3-career-total{padding:14px;gap:8px}
  .fn3-career-total>span:first-child{width:100%;font-size:14px}
  .fn3-career-total strong{font-size:19px}
  .fn3-career-save-note{margin-left:0}
  .fn3-career-filters{gap:4px}
  .fn3-career-filters button{padding:7px 9px}
  .fn3-career-table,.fn3-career-table tbody{display:block;width:100%}
  .fn3-career-table thead{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
  .fn3-career-table tr{display:grid;grid-template-columns:1fr auto;gap:12px 8px;margin-bottom:14px;padding:14px;border:1px solid var(--grey200);border-radius:10px}
  .fn3-career-table td{display:block;border:0;padding:0}
  .fn3-career-table td:nth-child(1){grid-column:1/-1}
  .fn3-career-table td:nth-child(2){grid-column:1/-1}
  .fn3-career-table td:nth-child(3){text-align:left;align-self:center}
  .fn3-career-table td:nth-child(5){grid-column:1/-1}
  .fn3-career-table .fn3-career-choice{justify-content:flex-end;min-height:32px}
}
@media(max-width:600px){.fn-cards{grid-template-columns:minmax(0,1fr)}}
/* 기능④ 간접경비 — 담당자 체크 (PRD v2.0) */
.ic-guide .guide-detail{padding-left:0}
/* 한 줄에 두 칸 — 일곱 항목 뒤 여덟째 칸(안전관리비 옆)에 계약서류 보기를 둔다.
   칸 안은 항목명과 선택을 한 줄에 둔다. 칸 수·배치는 화면 폭이 아니라 이 영역의 폭으로 정한다
   (사이드바를 접고 펴도 칸 안이 두 줄로 밀리지 않게). */
.ic-check-wrap{container-type:inline-size}
.ic-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ic-check-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;
  border:1px solid var(--grey200);border-radius:var(--r);background:#fff}
.ic-check-name{flex:1;min-width:0;font-weight:700;color:var(--grey900)}
.ic-check-name::before{content:'•';margin-right:8px;color:var(--blue600)}
.ic-check-row .radio-row{margin:0;width:200px;flex:none}
.ic-check-row .radio-pill{justify-content:center;gap:6px;padding:10px 8px}
.ic-docs{background:var(--grey50)}
.ic-docs .ic-check-name{flex:none}
.ic-docs-line{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;min-width:0}
.ic-docs-line .btn{margin-left:auto}
@container (max-width:840px){.ic-check-grid{grid-template-columns:minmax(0,1fr)}}
@container (max-width:420px){
  .ic-check-row{flex-direction:column;align-items:stretch;gap:10px}
  .ic-check-row .radio-row{width:auto}
}
.ic-docs-line small{color:var(--grey600);font-size:13px;line-height:1.5}
.ic-docs-line .btn{flex:none}
.ic-ai-card{max-width:360px;text-align:center;padding:32px 28px}
.ic-ai-card h2{margin:16px 0 6px}
.ic-ai-card p{margin:0;color:var(--grey700);font-size:15px;line-height:1.6}
.ic-ai-card .ic-ai-meta{margin-top:14px;color:var(--grey600);font-size:13px}
.ic-ai-card .ic-ai-note{margin-top:6px;color:var(--blue700);font-size:13px}
.ic-spinner{width:44px;height:44px;margin:0 auto;border:4px solid var(--blue100);border-top-color:var(--blue500);border-radius:50%;animation:spin .8s linear infinite}
/* 진행 중임을 알리는 필수 표시라 움직임 줄이기 설정에서도 멈추지 않고 천천히 돈다 */
@media(prefers-reduced-motion:reduce){.ic-spinner{animation-duration:2s}}
/* 결과 화면 — 기능② 결과와 같은 부품을 쓴다. 기능④에만 있는 것만 여기 둔다 */
#screen-fn4-result .uf-meta .chip{white-space:nowrap}
#screen-fn4-result .uf-why{margin-top:14px}
#screen-fn4-result .uf-clauses .out-row{margin-top:10px}
/* 결과 요약표 — 기능③ 검토결과 표(기능① 업종별 대조표)와 같은 규칙을 따른다.
   글자 크기는 머리글을 뺀 모든 칸이 본문 한 단계이고, 층은 굵기와 색으로 가른다.
   줄 사이는 눈에 보이는 선(cmp-ruled)으로 긋는다. 줄에는 색을 넣지 않고, 상태는 칩 하나가 말한다. */
#screen-fn4-result .ic-table-card{border-color:var(--grey300); overflow:hidden}
#screen-fn4-result .ic-table{min-width:640px;table-layout:fixed}
/* 항목·반영 여부·검토결과 칸은 가장 긴 값(산업재해보상보험료 · 계약조건 확인 필요 칩)이 들어갈 만큼만 고정하고, 남는 폭은 모두 필요 조치에 준다 */
#screen-fn4-result .ic-table td:nth-of-type(2){padding-left:12px; padding-right:12px}
#screen-fn4-result .ic-table th:nth-child(1){width:196px}
#screen-fn4-result .ic-table th:nth-child(2){width:96px}
#screen-fn4-result .ic-table th:nth-child(3){width:156px}
#screen-fn4-result .ic-table thead th{padding:11px 16px; color:var(--grey700); font-weight:700; background:var(--grey100); letter-spacing:0; white-space:normal; word-break:keep-all}
#screen-fn4-result .ic-table th[scope="row"]{
  background:transparent; white-space:normal; padding:14px 16px;
  font-size:var(--s11-size); line-height:var(--s11-lh); font-weight:700; color:var(--grey900); letter-spacing:-.01em;
}
#screen-fn4-result .ic-table td{padding:14px 16px; font-size:var(--s11-size); line-height:var(--s11-lh); color:var(--grey900); vertical-align:middle; word-break:keep-all; overflow-wrap:anywhere}
/* 체크는 짧은 값 하나라 가운데로 맞춰 줄마다 같은 자리에서 읽히게 한다 */
#screen-fn4-result .ic-table thead th:nth-child(2),#screen-fn4-result .ic-table td:nth-of-type(1){text-align:center}
#screen-fn4-result .ic-table td:nth-of-type(1){font-weight:600}
/* 항목명 앞 불릿 — 체크 페이지의 항목 표시와 같다 */
#screen-fn4-result .ic-table th[scope="row"]::before{content:'•';margin-right:8px;color:var(--blue600)}
/* 검토결과 칩은 글자 수가 같으면 폭도 같다 — 최소 폭·가운데 맞춤·같은 글자 크기 */
#screen-fn4-result .ic-table .chip{white-space:nowrap; padding:5px 9px; min-width:104px; justify-content:center; font-size:var(--s13-size); font-weight:700}
#screen-fn4-result .ic-none{color:var(--grey500)}
/* 제목 옆 칩 — 표 안 칩과 같은 모양. 아래 내용이 없으므로 제목 아래 여백을 두지 않는다 */
#screen-fn4-result .sec-title.ic-sec-inline{margin-bottom:0}
#screen-fn4-result .ic-sec-inline .chip{white-space:nowrap; padding:5px 9px; min-width:104px; justify-content:center; font-size:var(--s13-size); font-weight:700; margin-left:4px}
#screen-fn4-result .ic-sec-inline .chip.ic-chip-ok{background:var(--green700); border:1px solid var(--green700); color:#fff}
#screen-fn4-result .ic-sec-inline .chip .ic-mark{font-size:15px; font-weight:900; line-height:1; margin-right:4px}
/* 칩 앞 표시(✓ · !)는 글자보다 한 단계 크고 굵게 — 상태를 기호만으로도 읽게 한다 */
#screen-fn4-result .ic-table .chip .ic-mark{font-size:15px; font-weight:900; line-height:1; margin-right:4px}
/* 반드시 보완 필요 — 확정해도 남는 유일한 결과라 칩·조치·줄을 한 단계 더 세게 말한다 */
#screen-fn4-result .ic-table .chip.ic-chip-critical{background:var(--red700); border:1px solid var(--red700); color:#fff; font-weight:700}
#screen-fn4-result .ic-table .chip.ic-chip-ok{background:var(--green700); border:1px solid var(--green700); color:#fff; font-weight:700}
#screen-fn4-result .ic-table tr.ic-row-critical th[scope="row"],#screen-fn4-result .ic-table tr.ic-row-critical td{background:var(--red50)}
#screen-fn4-result .ic-actions.critical{font-weight:700; color:var(--red800)}
#screen-fn4-result .ic-actions{margin:0;padding-left:17px}
#screen-fn4-result .ic-actions li+li{margin-top:5px}
/* 안전관리비 표는 앞 세 칸 너비를 사회보험료 표와 맞추고, 비고는 "하도급사 부담 조항 N건"이 한 줄에 들어가는 폭으로 고정한다 */
#screen-fn4-result .ic-safety-table th:nth-child(5){width:210px}
#screen-fn4-result .ic-ref-acc{margin-top:12px}
/* 관련 조문은 한 번만 제목을 두고, 조항마다 출처·원문·AI 의견의 좌우 기준을 맞춘다. */
#screen-fn4-result .ic-ref-acc>.uf-head::after{margin-left:auto}
#screen-fn4-result .ic-ref-acc>.uf-body{padding:24px;container-type:inline-size}
#screen-fn4-result .ic-ref-title{margin-bottom:20px}
#screen-fn4-result .ic-ref-item{min-width:0}
#screen-fn4-result .ic-ref-item+.ic-ref-item{margin-top:28px;padding-top:24px;border-top:1px solid var(--grey200)}
#screen-fn4-result .ic-ref-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
#screen-fn4-result .ic-ref-clause{min-width:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--grey900);overflow-wrap:anywhere}
#screen-fn4-result .ic-ref-source{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%;color:var(--grey600);font-size:var(--fs-micro);line-height:var(--lh-micro)}
#screen-fn4-result .ic-ref-source>span:first-child{min-width:0;overflow-wrap:anywhere}
#screen-fn4-result .ic-ref-page{flex:none;white-space:nowrap;color:var(--grey700)}
#screen-fn4-result .ic-ref-item .quote-box{margin-top:12px;padding:16px 18px 16px 15px}
#screen-fn4-result .ic-ref-item .quote-box q{word-break:keep-all;overflow-wrap:anywhere}
@container (max-width:560px){
  #screen-fn4-result .ic-ref-head{flex-direction:column;gap:6px}
}
@media(max-width:600px){#screen-fn4-result .ic-ref-acc>.uf-body{padding:18px}}
.ic-ref-empty{margin:4px 0 0;color:var(--grey700);font-size:15px;line-height:1.6}
#noticeMsg span{display:block}
@media print{#screen-fn4-result .out-row{display:none}#screen-fn4-result .ic-table{min-width:0}#screen-fn4-result .table-scroll{overflow:visible}}

/* 화면의 가로 스크롤 대신 용지 폭 안에서 결과표를 줄바꿈한다. */
@media print{
  .review-report.active{animation:none}
  .review-report .btn,.review-report .required-license-tools{display:none !important}
  .review-report .table-scroll{overflow:visible}
  .review-report .sec-title,.review-report .uf-head{break-after:avoid}
  .review-report .verdict,.review-report .finding,.review-report .ic-ref-item{break-inside:avoid}
  .review-report:not(#screen-fn2-result) table.cmp{table-layout:fixed; min-width:0; width:100%}
  .review-report:not(#screen-fn2-result) table.cmp thead{display:table-header-group}
  .review-report:not(#screen-fn2-result) table.cmp tr{break-inside:avoid}
  .review-report:not(#screen-fn2-result) table.cmp th,.review-report:not(#screen-fn2-result) table.cmp td{
    padding:9px 8px; white-space:normal; overflow-wrap:anywhere;
  }
  #screen-fn1-result .cmp-wt{min-width:0}
  #screen-fn1-result .cmp-wt th:nth-child(2){width:27%}
  #screen-fn1-result .cmp-wt th:nth-child(3){width:20%}
  #screen-fn1-result .cmp-wt th:nth-child(4){width:26%}
  #screen-fn1-result .lname-btn{font:inherit; color:inherit; text-align:left; padding:0; border:0; background:none}
  #screen-fn3-result .calc-box{grid-template-columns:minmax(0,1fr) auto minmax(0,.7fr) auto minmax(0,1fr); gap:12px; break-inside:avoid; overflow-wrap:anywhere}
  #screen-fn3-result .calc-box>strong{display:block}
  #screen-fn3-result .calc-box .bracket{grid-column:1/-1; padding:12px 0 0; border-left:none; border-top:1px solid var(--grey200)}
  #screen-fn3-result .fn3-col-label,#screen-fn3-result .fn3-col-num{width:16%}
  #screen-fn4-result .ic-table th:nth-child(1){width:23%}
  #screen-fn4-result .ic-table th:nth-child(2){width:13%}
  #screen-fn4-result .ic-table th:nth-child(3){width:23%}
  #screen-fn4-result .ic-safety-table th:nth-child(5){width:20%}
  #screen-fn4-result .ic-table .chip{min-width:0; white-space:normal}
  #screen-fn4-result .ic-ref-acc>.uf-body{container-type:normal}
}