@charset "utf-8";
/* 보험관리시스템 공통 디자인 파일 — 로컬·웹·공유 패키지가 함께 쓴다(2026-11-03 디자인 개편).
 * 글꼴: Pretendard 1.3.9 — Kil Hyung-jin, github.com/orioncactus/pretendard,
 *       SIL Open Font License 1.1 (fonts/OFL.txt). 회사 서버에 두고 쓴다(바깥 글꼴 주소에 기대지 않음).
 * 아이콘: Lucide — lucide.dev, ISC License.
 * 색·글씨·크기는 아래 :root 의 이름(토큰)으로만 쓴다.
 */
:root{
  /* 색 */
  --c-brand:#394EA2; --c-brand-soft:#EEF1FA; --c-brand-line:#C9D1EE;
  --c-bg:#F6F7F9; --c-card:#FFFFFF; --c-line:#E5E7EB; --c-line2:#F0F1F3;
  --c-ink:#111827; --c-ink2:#374151; --c-muted:#6B7280; --c-th:#F9FAFB;
  --c-mode:#2F8F83; --c-mode-soft:#EEFAF7; --c-mode-line:#BFE5DD;   /* '현시점' 모드(청록) */
  --c-warn:#B4530E; --c-warn-soft:#FFF2E6;
  /* 글씨 */
  --fs-body:15px; --fs-tab:14.5px; --fs-title:16px; --fs-table:14px; --fs-th:13px;
  --fs-btn:14px; --fs-kpi:24px; --fs-small:13px; --fs-legend:14px;
  /* 높이·모양·폭 */
  --h-btn:36px; --h-chip:32px; --h-input:38px; --h-ibtn:30px; --h-hdr:60px; --h-tabs:48px;
  --radius:10px; --radius-ctl:8px; --radius-chip:6px; --gap-card:16px;
  --page-max:1920px; --page-pad:32px;
  /* 옛 이름(탭 파일들이 아직 쓰는 이름) → 새 토큰. --brand-d·--ease 는 대응 토큰이 없어 지금 값 그대로 */
  --brand:var(--c-brand); --brand-d:#2E4084; --brand2:var(--c-mode);
  --bg:var(--c-bg); --card:var(--c-card); --line:var(--c-line); --muted:var(--c-muted);
  --ink:var(--c-ink); --ink2:var(--c-ink2); --tint:var(--c-brand-soft);
  --ease:160ms cubic-bezier(.34,1.4,.64,1);
  /* 옛 이름 더(탭 파일 _tab3·_tab5·_tab6 등이 쓰는 것) */
  --brand-l:var(--c-brand-soft); --line-card:var(--c-line); --line-row:var(--c-line2); --line-div:var(--c-line);
  --chip:var(--c-line2); --warn:var(--c-warn); --grad:var(--c-brand); --shadow:none;
  /* 상태·보조 색 — 상태에만 쓴다(설계 4.1) */
  --c-ok:#1D7A4F; --c-ok-soft:#E6F6EE; --c-err:#A63122; --c-err-soft:#FDECEA; --c-badge:#EF4444;
  --c-mode-ink:#1D6B60;   /* '현시점' 안내 글자 */
  --c-memo:#FFFDF5;       /* 비고 입력칸 바탕 */
  --c-overlay:rgba(17,24,39,.45); --sh-pop:0 12px 40px rgba(15,23,42,.22);
  --c-freeze-edge:#A2ADC3; --sh-freeze:4px 0 6px -4px rgba(0,0,0,.18); --sh-freeze-strong:5px 0 7px -4px rgba(0,0,0,.26);
}

@font-face{font-family:Pretendard;src:url(fonts/Pretendard-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Pretendard;src:url(fonts/Pretendard-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Pretendard;src:url(fonts/Pretendard-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Pretendard;src:url(fonts/Pretendard-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

body{font-family:Pretendard,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;font-size:var(--fs-body);background:var(--c-bg);color:var(--c-ink)}

/* ── 아이콘 (자동 생성 구역 — 이름: 선 그림) ── */
/* 붙이는 법: ① 버튼·탭·제목에 data-ic="이름" → 글자 앞에 선 아이콘(글자 크기만큼).
 *          ② 따로 쓸 때 <i class="ic" data-ic="이름"></i> · 큰 아이콘 .ic.xl(42px).
 * 그림은 이 파일 안의 data: 주소라 바깥에 요청하지 않는다. 이름은 아래 목록만 쓴다. */
[data-ic]::before{content:"";display:inline-block;flex:none;width:1em;height:1em;margin-right:.45em;vertical-align:-.14em;
  background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
[data-ic]:empty::before{margin-right:0}
.ic{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1}
.ic::before{margin-right:0}
.ic.xl::before{width:42px;height:42px}
[data-ic="ai"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E")}
[data-ic="alert"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
[data-ic="anchor"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3C/svg%3E")}
[data-ic="bell"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
[data-ic="bill"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E")}
[data-ic="book"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E")}
[data-ic="chart"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E")}
[data-ic="check"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
[data-ic="chev-down"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
[data-ic="chev-up"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
[data-ic="clip"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E")}
[data-ic="clock"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
[data-ic="close"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
[data-ic="dash"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
[data-ic="download"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E")}
[data-ic="edit"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E")}
[data-ic="external"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")}
[data-ic="file"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E")}
[data-ic="filter"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/%3E%3C/svg%3E")}
[data-ic="folder"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E")}
[data-ic="info"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}
[data-ic="law"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E")}
[data-ic="lock"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
[data-ic="logout"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")}
[data-ic="mail"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
[data-ic="package"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}
[data-ic="pie"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3Cpath d='M22 12A10 10 0 0 0 12 2v10z'/%3E%3C/svg%3E")}
[data-ic="plus"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")}
[data-ic="printer"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E")}
[data-ic="refresh"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E")}
[data-ic="search"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
[data-ic="send"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E")}
[data-ic="settings"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
[data-ic="share"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98'/%3E%3Cpath d='m15.41 6.51-6.82 3.98'/%3E%3C/svg%3E")}
[data-ic="shield"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E")}
[data-ic="ship"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3Cpath d='M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76'/%3E%3Cpath d='M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 2v3'/%3E%3C/svg%3E")}
[data-ic="table"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E")}
[data-ic="upload"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E")}
/* ── 아이콘 끝 ── */

/* ── 머리글·탭 (세 화면 공통) ──
 * 머리글 전체를 sticky 로 두고, _tabs.html 의 pin() 이 top 을 -(.tabs.offsetTop) 으로 잰다
 * → 스크롤하면 제목 줄은 올라가고 탭 줄만 화면 맨 위에 남는다(담당자 요청 2026-10-01).
 * .hin 에는 position 을 주지 말 것 — offsetTop 의 기준이 header 여야 한다. */
header{position:sticky;top:0;z-index:40;background:var(--c-brand);color:#fff}   /* 표 고정칸(1~3) 위 · 팝업(50~60) 아래 */
.hin{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
header .hbar{display:flex;align-items:center;gap:12px;min-height:var(--h-hdr)}
header .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
header .brand .logo{box-sizing:border-box;width:30px;height:30px;padding:2px;flex:none;display:block;background:#fff;border-radius:50%}
header .brand b{font-size:17px;font-weight:700;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .hact{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap}
header .sub{margin:-8px 0 0;padding:0 0 6px;font-size:var(--fs-small);color:rgba(255,255,255,.8)}
.ro{display:inline-block;margin-right:8px;padding:1px 8px;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-chip);
    background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600;vertical-align:1px}
.lo{display:inline-flex;align-items:center;height:var(--h-btn);padding:0 14px;border:1px solid rgba(255,255,255,.42);border-radius:var(--radius-ctl);
    background:transparent;color:#fff;font:inherit;font-size:var(--fs-btn);font-weight:600;text-decoration:none;white-space:nowrap;
    cursor:pointer;transition:background .15s}
.lo:hover{background:rgba(255,255,255,.12)}
.updBtn .dot{display:inline-block;margin-left:6px;min-width:18px;padding:0 6px;border-radius:99px;background:var(--c-badge);color:#fff;
             font-size:11.5px;font-weight:700;line-height:17px;text-align:center}
.tabs{display:flex;align-items:flex-end;gap:4px;height:var(--h-tabs);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;flex:none;height:100%;padding:0 13px;border:0;border-bottom:2px solid transparent;
     background:transparent;color:rgba(255,255,255,.78);font:inherit;font-size:var(--fs-tab);font-weight:600;white-space:nowrap;
     cursor:pointer;transition:color .15s,border-color .15s}
.tab:hover:not(.on){color:#fff}
.tab.on{color:#fff;border-bottom-color:#fff}
.tab:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:700px){.hin{padding:0 16px}.tab{padding:0 10px;font-size:13px}}

/* ── 공통 부품 (탭1 · 세 화면) — 클래스 이름은 예전 그대로(자바스크립트가 쓴다) ── */
*{box-sizing:border-box}
body{margin:0;line-height:1.45}
.wrap{max-width:var(--page-max);margin:0 auto;padding:20px var(--page-pad) 56px}
@media (max-width:700px){.wrap{padding:16px}}
.muted{color:var(--c-muted)}
.review{color:var(--c-warn);font-weight:700}
.ok{color:var(--c-mode);font-weight:700}

/* 카드 */
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);padding:18px 20px;margin-bottom:var(--gap-card)}
.card h2{margin:0 0 14px;font-size:var(--fs-title);font-weight:700;color:var(--c-ink);letter-spacing:-.012em}
.card h2[data-ic]::before{background:var(--c-muted)}
.fhead,.cardhead{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:0 0 14px}
.fhead h2,.cardhead h2{flex:1 1 auto;min-width:0;margin:0}
.cardhead .act{flex:none}
.cardhead .hint{flex:none;font-size:var(--fs-small);color:var(--c-muted)}
.dupnote{flex-basis:100%;margin-top:8px;font-size:var(--fs-small);color:var(--c-muted);white-space:normal}
.dupnote:empty{display:none}   /* 중복 안내는 통계 칸 격자 밖 #dupNote 에 따로 찍는다(2026-10-27) */

/* 단추 — .act 주(파랑) · .ghost/.alt 보조(흰 바탕 + 선) · .sm 작은 것 */
button.act{display:inline-flex;align-items:center;justify-content:center;height:var(--h-btn);padding:0 14px;
  border:1px solid var(--c-brand);border-radius:var(--radius-ctl);background:var(--c-brand);color:#fff;
  font:inherit;font-size:var(--fs-btn);font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button.act:hover{background:var(--brand-d);border-color:var(--brand-d)}
button.act.ghost,button.act.alt{background:var(--c-card);color:var(--c-ink2);border-color:var(--c-line)}
button.act.ghost:hover,button.act.alt:hover{background:var(--c-brand-soft);border-color:var(--c-brand-line);color:var(--c-brand)}
button.act.sm{height:32px;padding:0 12px;font-size:13.5px}
/* 잠겼을 때 눌리지 않는다는 것이 눈에 보여야 한다 */
button.act:disabled,button.act:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--c-line2);border-color:var(--c-line);color:var(--c-muted)}
select{height:var(--h-input);padding:0 10px;border:1px solid var(--c-line);border-radius:var(--radius-ctl);background:var(--c-card);
  color:var(--c-ink);font:inherit;font-size:var(--fs-btn)}

/* 조건 묶음 — 이름은 왼쪽 칸, 칩은 오른쪽(견본 A). 묶음 사이 옅은 실선(담당자 요청 2026-09-29) */
.fgroup{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:10px;padding:10px 0;border-top:1px solid var(--c-line2)}
.fgroup:first-child{padding-top:2px;border-top:0}
.fgroup:last-child{padding-bottom:4px}
.fgroup .label{grid-column:1;grid-row:1 / span 9;padding-top:6px;font-size:var(--fs-btn);font-weight:600;color:var(--c-muted)}
.fgroup .chips{grid-column:2}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips+.chips{margin-top:7px}          /* 같은 조건 안의 둘째·셋째 줄 */
.chip{display:inline-flex;align-items:center;height:var(--h-chip);padding:0 13px;border:1px solid var(--c-line);border-radius:var(--radius-chip);
  background:var(--c-card);color:var(--c-ink2);font-size:var(--fs-btn);font-weight:500;white-space:nowrap;cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:var(--c-brand-line);background:var(--c-brand-soft)}
.chip.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff;font-weight:600}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
input[type=search]{flex:1;min-width:240px;height:var(--h-input);padding:0 12px 0 36px;border:1px solid var(--c-line);border-radius:var(--radius-ctl);
  background:var(--c-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center/16px no-repeat;
  color:var(--c-ink);font:inherit;font-size:var(--fs-btn);outline:none;transition:border-color .15s,box-shadow .15s}
input[type=search]:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-soft)}

/* 요약 숫자 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.stat{min-width:0;padding:14px 16px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-card);white-space:nowrap}
.stat .k{font-size:13.5px;color:var(--c-muted)}
.stat .v{margin-top:3px;font-size:var(--fs-kpi);font-weight:700;letter-spacing:-.02em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.stat .v small{margin-left:3px;font-size:12.5px;font-weight:600;color:var(--c-muted)}
.stat.warn .v{color:var(--c-warn)}
/* 조건을 고르기 전 안내 — 첫 화면에서 표·통계를 비워 둔다 */
.needcond{padding:14px 16px;border:1px solid var(--c-brand-line);border-radius:var(--radius-ctl);background:var(--c-brand-soft);
  color:var(--c-ink2);font-size:var(--fs-body);line-height:1.75}

/* 통계 — 요약 카드 + (연도별 | 구성비) 두 카드(담당자 2026-11-03 'C안처럼 나눠서'). 구성비가 숨으면 연도 카드가 줄 전체 */
.card h2 .muted{margin-left:6px;font-size:var(--fs-small);font-weight:500}
.statrow{display:flex;flex-wrap:wrap;gap:var(--gap-card);align-items:stretch;margin-bottom:var(--gap-card)}
.statrow>.card{min-width:0;margin-bottom:0}
#yearCard{flex:1 1 380px}
#pieBox{flex:1.7 1 560px}
.statrow #yearCard:has(.chart:empty){display:none}   /* 조건을 고르기 전(막대가 빈 때)엔 빈 카드를 숨긴다 */
.chart{display:flex;align-items:flex-end;gap:18px;height:180px;padding:8px 4px 0;overflow-x:auto}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:56px}
.bar .col{width:28px;background:var(--c-brand);border-radius:4px 4px 0 0}
.bar .col.b2{background:var(--c-mode)}
.bar .yr{margin-top:6px;font-size:13px;color:var(--c-muted)}
.bar .amt{margin-bottom:4px;font-size:12.5px;font-weight:700;color:var(--c-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pseg{display:inline-flex;border:1px solid var(--c-line);border-radius:var(--radius-ctl);overflow:hidden;background:var(--c-card);vertical-align:middle}
.pseg button{border:0;background:transparent;font:inherit;font-size:13px;line-height:1;padding:7px 10px;color:var(--c-ink2);cursor:pointer;white-space:nowrap}
.pseg button+button{border-left:1px solid var(--c-line)}
.pseg button:hover{background:var(--c-line2)}
.pseg button.on{background:var(--c-brand);color:#fff;font-weight:600}
.pie-cur{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;color:var(--c-muted)}
.pie-body{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.pie-svg{width:200px;height:200px;flex:none;overflow:visible}
.pie-svg circle.sl{cursor:pointer;outline:none;transition:stroke-width .15s ease,opacity .15s ease}
.pie-svg circle.sl.act{stroke-width:38}
.pie-svg.dim circle.sl:not(.act){opacity:.3}
.pie-svg text{text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:inherit}
.pie-svg text.sl-t{font-size:10.5px;font-weight:700;transition:opacity .15s ease}
.pie-svg.dim text.sl-t{opacity:0}      /* 가리키는 동안엔 가운데 글자가 그 % 를 보여 준다 */
.pie-svg text.c1{font-size:11.5px;fill:var(--c-muted)}
.pie-svg text.c2{font-size:19px;font-weight:700;fill:var(--c-ink)}
.pie-svg text.c3,.pie-svg text.c4{font-size:11px;fill:var(--c-muted)}
.pie-leg{flex:0 1 430px;min-width:0;font-size:var(--fs-legend)}   /* 이름·금액·% 를 원그래프 바로 옆에(담당자 "간격이 너무 멀어") */
.pie-leg .row{display:grid;grid-template-columns:11px minmax(0,1fr) auto 56px;gap:10px;align-items:center;padding:4px 6px;border-radius:6px}
.pie-leg .row.act{background:var(--c-line2)}
.pie-leg .lhead{font-size:12.5px;color:var(--c-muted);border-bottom:1px solid var(--c-line);border-radius:0;margin-bottom:2px}
.pie-leg .sw{width:11px;height:11px;border-radius:3px}
.pie-leg .sw.dot{width:6px;height:6px;border-radius:50%;background:var(--c-muted);justify-self:center}
.pie-leg .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pie-leg .amt,.pie-leg .pc{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pie-leg .amt{color:var(--c-ink2)}
.pie-leg .pc{font-weight:700}
.pie-leg .morebtn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--c-brand);cursor:pointer;text-align:left}
.pie-leg .restlist{max-height:230px;overflow-y:auto;margin:2px 0 4px 6px;border-left:2px solid var(--c-line)}
.pie-leg .row.sub{padding:3px 6px}
.pie-leg .row.tot{border-top:1px solid var(--c-line);border-radius:0;margin-top:4px;padding-top:7px;font-weight:700}
.pie-note{margin-top:10px;font-size:12.5px;line-height:1.65;color:var(--c-muted)}
.pie-empty{padding:20px 4px;color:var(--c-muted)}

/* 현시점 보험정보 — 조건검색과 격벽. '현시점' 청록은 모드 구분이라 유지(PRD 5장 되돌리지 말 것) */
.asof{border-left:4px solid var(--c-mode)}
.asof h2{color:var(--c-mode)}
.asof h2[data-ic]::before{background:var(--c-mode)}
.asof #asofBtn{background:var(--c-mode);border-color:var(--c-mode);color:#fff}   /* 카드 안 주 단추만 청록(다른 .act.alt 는 보조 모양) */
.asof #asofBtn:hover{background:var(--c-mode-ink);border-color:var(--c-mode-ink);color:#fff}
.asofbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.asof .fgroup{display:block}                         /* 현시점 조건은 설명이 길어 이름 위·칩 아래로 */
.asof .fgroup .label{padding-top:0;margin-bottom:8px}
.asofdate{padding:7px 12px;border:1px solid var(--c-mode-line);border-radius:var(--radius-ctl);background:var(--c-mode-soft);
  color:var(--c-mode);font-size:13px;font-weight:700}
.locked{opacity:.4;pointer-events:none;filter:grayscale(.6)}
.lockmsg{display:none;margin-top:10px;padding:8px 12px;border:1px solid var(--c-mode-line);border-radius:var(--radius-ctl);
  background:var(--c-mode-soft);color:var(--c-mode-ink);font-size:var(--fs-small)}
.lockmsg.on{display:block}

/* 자료 안내 — 한 줄로 접고 '펼치기'로 연다(설계 7장, 로컬 renderStatus). 공유물의 .note 도 같은 모양(짧아서 안 접음) */
.infobar,.note{margin-bottom:var(--gap-card);border:1px solid var(--c-brand-line);border-radius:var(--radius);background:var(--c-brand-soft);
  color:var(--c-ink2);font-size:var(--fs-body);line-height:1.6}
.note{padding:10px 14px}
.note>.ic,.note b>.ic{margin-right:6px;color:var(--c-brand);vertical-align:-2px}
.infobar>summary{display:flex;align-items:center;padding:10px 14px;list-style:none;white-space:nowrap;cursor:pointer}
.infobar>summary::-webkit-details-marker{display:none}
.infobar>summary[data-ic]::before{background:var(--c-brand)}
.infobar>summary b{color:var(--c-ink)}
.infobar .first{flex:1 1 auto;min-width:0;margin-left:.3em;overflow:hidden;text-overflow:ellipsis}
.infobar .more{flex:none;margin-left:auto;padding-left:12px;color:var(--c-brand);font-size:var(--fs-small);font-weight:600}
.infobar[open] .first{visibility:hidden}
.infobar[open] .more{font-size:0}
.infobar[open] .more::after{content:"접기";font-size:var(--fs-small)}
.infobar .body{padding:0 14px 12px 37px;white-space:normal}

/* 표 */
.tablewrap{overflow:auto;max-height:620px;border:1px solid var(--c-line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:var(--fs-table);white-space:nowrap}
th,td{padding:10px 12px;text-align:left}
td{border-bottom:1px solid var(--c-line2);color:var(--c-ink2)}
th{position:sticky;top:0;z-index:1;background:var(--c-th);color:var(--c-muted);font-size:var(--fs-th);font-weight:600;
  border-bottom:1px solid var(--c-line);cursor:pointer}
th:hover{background:var(--c-brand-soft)}
tr:hover td{background:var(--c-brand-soft)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
/* 선명별 바탕색 — 줄(tr)에 --rowbg 를 준다(vesselTints). 마우스를 올린 줄은 강조색. 틀고정 열 수는 각 화면에 */
#tbl tbody td{background:var(--rowbg,transparent)}
#tbl tbody tr:hover td{background:var(--c-brand-soft)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-chip);font-size:12px;font-weight:700}
/* 보험종류 꼬리표 — 옅은 바탕 + 진한 글씨(세 화면 같은 tagClass) */
.t-pi{background:#F1EDFE;color:#5B3FD1}   .t-hm{background:#EEF1FA;color:#394EA2}
.t-fdd{background:#E6F7F5;color:#1F7A6F}  .t-war{background:#FFF2E6;color:#B4530E}
.t-iv{background:#EEF6EA;color:#41702B}   .t-map{background:#F8EEF5;color:#9B3C7F}
.t-mii{background:#FBEFE7;color:#B25220}  .t-ctr{background:#EEF0F3;color:#4B5563}
.t-chr{background:#EAF2FB;color:#2B5F91}  .t-etc{background:#F0F1F3;color:#4B5563}
/* 원본(클립)·청구서 — 30px 네모 아이콘 단추, 여러 개면 번호 */
.dl{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;margin:1px;padding:0 7px;
  border:1px solid var(--c-line);border-radius:var(--radius-ctl);background:var(--c-card);color:var(--c-ink2);
  font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.dl[data-ic]::before{margin-right:2px}
.dl:empty::before{margin-right:0}
.dl:hover{border-color:var(--c-brand-line);background:var(--c-brand-soft);color:var(--c-brand)}
.dl.bill{color:var(--c-ok)}
.dl.bill:hover{border-color:var(--c-ok);background:var(--c-ok-soft);color:var(--c-ok)}
td.orig{white-space:normal;min-width:60px;max-width:120px}
button.editbtn{display:inline-grid;place-items:center;width:var(--h-ibtn);height:var(--h-ibtn);padding:0;border:1px solid var(--c-line);
  border-radius:var(--radius-ctl);background:var(--c-card);color:var(--c-muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button.editbtn:hover{border-color:var(--c-brand-line);background:var(--c-brand-soft);color:var(--c-brand)}
/* 비고 — 시스템 메모·입력칸 같은 폭 360px(담당자 요청 2026-10-06) */
td.rmkcell{min-width:380px;white-space:normal}
.fixmemo{display:block;width:360px;max-width:100%;margin-bottom:4px;padding:2px 8px;border:1px solid var(--c-brand-line);border-radius:6px;
  background:var(--c-brand-soft);color:var(--c-ink2);font-size:12.5px;white-space:normal}
.fixmemo+.rmkin,.fixmemo~.rmkin{display:block;margin-top:2px}   /* 시스템 메모 아래 줄에 입력칸 */
.rmkin{width:360px;padding:4px 8px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-memo);font:inherit;font-size:13px}
.rmkin:focus{outline:2px solid var(--c-brand);outline-offset:-2px;background:var(--c-card)}
.rmkin.saved{border-color:var(--c-mode);background:var(--c-mode-soft)}
.rmkin.failed{border-color:var(--c-warn);background:var(--c-err-soft)}
/* 기초공제액 칸 — '눌러서 보라'는 단추, 숫자 칸처럼 오른쪽 정렬 */
td.ded{text-align:right;white-space:nowrap}
.dedbtn{padding:2px 8px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-card);font:inherit;font-size:12.5px;
  white-space:nowrap;cursor:pointer}
.dedbtn:hover{background:var(--c-brand-soft);border-color:var(--c-brand-line)}
.dedbtn .cnt{margin-left:3px;color:var(--c-brand);font-weight:700}

/* 팝업 — 증권 수정(로컬) · 기초공제액 · 업데이트 사항 */
.overlay,.dedOv{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--c-overlay)}
.overlay{z-index:50}
.dedOv{z-index:60}
.overlay.on,.dedOv.on{display:flex}
.modal,.dedBox{max-height:88vh;overflow-y:auto;padding:20px 22px;border-radius:12px;background:var(--c-card);box-shadow:var(--sh-pop)}
.modal{width:min(720px,94vw)}
.dedBox{width:min(640px,94vw);max-height:86vh}
.modal h3,.dedBox h3{margin:0 0 4px;font-size:var(--fs-title);font-weight:700}
.modal .fn{margin-bottom:14px;font-size:var(--fs-small);color:var(--c-muted);word-break:break-all}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:12.5px;font-weight:600;color:var(--c-muted)}
.fld input,.fld select{width:100%;height:var(--h-input);padding:0 10px;border:1px solid var(--c-line);border-radius:var(--radius-ctl);font:inherit;font-size:var(--fs-btn)}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.chkline{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-btn)}
.dedBox .sub{margin-bottom:6px;font-size:var(--fs-small);color:var(--c-muted)}
.dedBox .src{margin-bottom:12px;padding:6px 9px;border-radius:6px;background:var(--c-brand-soft);color:var(--c-brand);font-size:12.5px;line-height:1.55}
.dedBox table{width:100%;border-collapse:collapse;font-size:var(--fs-table)}
.dedBox th,.dedBox td{padding:7px 8px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.dedBox th{background:var(--c-th);font-size:12.5px;color:var(--c-muted)}
.dedBox td.amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
/* 전역 table 규칙이 white-space:nowrap 이라 그대로 두면 증권 원문이 팝업 밖으로 밀려 잘린다(2026-09-29) */
.dedBox .raw{font-size:12px;color:var(--c-muted);line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.dedBox .foot{display:flex;justify-content:flex-end;margin-top:16px}
.dedBox .foot button{height:var(--h-btn);padding:0 16px;border:1px solid var(--c-line);border-radius:var(--radius-ctl);background:var(--c-card);
  font:inherit;font-size:var(--fs-btn);cursor:pointer}
.dedBox .foot button:hover{background:var(--c-brand-soft);border-color:var(--c-brand-line)}
.updBox{width:min(860px,94vw)}
.updRun{margin-bottom:10px;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.updRun>summary{list-style:none;cursor:pointer;padding:11px 14px;background:var(--c-th);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.updRun>summary::-webkit-details-marker{display:none}
.updRun>summary::before{content:"▸";color:var(--c-brand);font-weight:700;flex:none}
.updRun[open]>summary::before{content:"▾"}
.updRun .when{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.updRun .new{padding:1px 7px;border-radius:99px;background:var(--c-badge);color:#fff;font-size:11px;font-weight:700}
.updChip{padding:2px 9px;border-radius:99px;background:var(--c-brand-soft);color:var(--brand-d);font-size:12px;font-weight:700;white-space:nowrap}
.updChip.add{background:var(--c-ok-soft);color:var(--c-ok)}
.updChip.del{background:var(--c-err-soft);color:var(--c-err)}
.updList{max-height:46vh;overflow-y:auto}
.updList table{width:100%;border-collapse:collapse;font-size:13px}
/* 전역 table 규칙이 white-space:nowrap 이라 그대로 두면 표가 창 밖으로 밀린다(PRD 5장) */
.updList td{border-top:1px solid var(--c-line);padding:7px 12px;vertical-align:top;white-space:normal}
.updList tr:nth-child(even){background:var(--c-th)}
.updList td.k{white-space:nowrap;width:1%}
.updList td:last-child{overflow-wrap:anywhere}   /* 증권 파일명이 길다 */
.updList td.t{white-space:nowrap;width:1%;color:var(--c-ink2);font-weight:600}
.updTag{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--c-line2);color:var(--c-ink2);font-size:11px;font-weight:700}
.updTag.증권첨부{background:var(--c-ok-soft);color:var(--c-ok)}
.updTag.신규{background:var(--c-brand-soft);color:var(--brand-d)}
.updTag.값변경{background:var(--c-warn-soft);color:var(--c-warn)}
.updTag.삭제,.updTag.증권해제{background:var(--c-err-soft);color:var(--c-err)}
.updEmpty{padding:18px 4px;color:var(--c-muted);font-size:var(--fs-body);line-height:1.7}
.updMemo{padding:7px 14px;border-top:1px solid var(--c-line);background:var(--c-warn-soft);color:var(--c-warn);font-size:12.5px;line-height:1.6}

/* ── 웹 로그인 · 저장소 오류 안내 (cloud_app LOGIN_HTML·NOTICE_HTML) — 그라데이션·떠오르기·큰 그림자 없이 ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--c-bg)}
.login-col{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:22px}
.login-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.login-logo{width:56px;height:56px;display:block}
.login-t{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--c-ink)}
.login-s{margin:0;font-size:var(--fs-body);color:var(--c-muted)}
.login-card{width:100%;display:flex;flex-direction:column;gap:18px;padding:28px;border:1px solid var(--c-line);
  border-radius:var(--radius);background:var(--c-card)}
.login-fld{display:flex;flex-direction:column;gap:6px}
.login-fld>span{font-size:var(--fs-small);font-weight:600;color:var(--c-ink2)}
.login-card input{width:100%;height:44px;padding:0 50px 0 12px;border:1px solid var(--c-line);border-radius:var(--radius-ctl);
  background:var(--c-card);color:var(--c-ink);font:inherit;font-size:var(--fs-body);outline:none;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-soft)}
.login-card input.bad{border-color:var(--c-err);box-shadow:0 0 0 3px var(--c-err-soft)}
/* 비밀번호 보기 — 칸 안 오른쪽 눈 단추(담당자 요청 2026-09-18). 칸 오른쪽을 비워 글자가 단추 밑으로 안 들어가게 */
.login-card .pwbox{position:relative;display:flex}
.login-card .eye{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--c-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.login-card .eye:hover,.login-card .eye[aria-pressed=true]{color:var(--c-brand)}
.login-card .eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-card .eye .off{display:none}
.login-card .eye[aria-pressed=true] .on{display:none}
.login-card .eye[aria-pressed=true] .off{display:block}
.login-btn{height:44px;border:1px solid var(--c-brand);border-radius:var(--radius-ctl);background:var(--c-brand);color:#fff;
  font:inherit;font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.login-btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.login-err{display:flex;align-items:center;margin:0;padding:10px 12px;border-radius:var(--radius-ctl);background:var(--c-err-soft);
  color:var(--c-err);font-size:var(--fs-small);font-weight:600}
.login-foot{font-size:12.5px;line-height:1.5;color:var(--c-muted);text-align:center}
.notice-card{max-width:440px;align-items:center;text-align:center}
.notice-card h1{margin:4px 0 0;font-size:17px;color:var(--c-ink)}
.notice-card p{margin:0;font-size:var(--fs-body);line-height:1.75;color:var(--c-ink2)}