@charset "utf-8";
/* =============================================================================
 * css_bizportal_main.css - BIZ 포털 공통 스타일
 * -----------------------------------------------------------------------------
 * [적용 범위]
 *   고객사 포털(/client) 전체 + 어드민(/admin) 의 기본 골격.
 *   어드민 전용 레이아웃(GNB/LNB)은 css_bizportal_admin.css 가 이어서 덮는다.
 *
 * [설계 원칙]
 *   1. 업무용 도구다. 장식보다 "읽히는 것"과 "밀도"가 우선이다.
 *      애니메이션은 로딩 스피너 하나만 둔다.
 *   2. 색은 전부 :root 변수로 관리한다. 브랜드가 바뀌면 여기만 고친다.
 *   3. 같은 뜻인데 이름이 두 개인 클래스(.frm-inline / .form-inline 등)는
 *      양쪽 다 정의한다. 화면 파일이 어느 쪽을 쓰든 깨지지 않아야 한다.
 *   4. 대비비 4.5:1 이상. 상태를 색으로만 구분하지 않고 텍스트를 반드시 함께 둔다
 *      (색각 이상 사용자 대응. 상태 배지는 항상 글자를 포함한다).
 *   5. :focus-visible 링을 절대 제거하지 않는다. 키보드 사용자가 길을 잃는다.
 *
 * [주의]
 *   .rate-fill 은 화면에서 style="width:NN%" 를 인라인으로 받는다.
 *   여기서 width 를 고정하지 말 것.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 0. 디자인 토큰
 * -------------------------------------------------------------------------- */
:root {
    /* 색 */
    --c-primary:    #1F3864;   /* 네이비. 헤더·주요 버튼 */
    --c-primary-d:  #16294A;   /* 네이비 진한색. hover */
    --c-primary-l:  #E8EDF5;   /* 네이비 옅은색. 선택 배경 */
    --c-accent:     #2E5C8A;   /* 보조 파랑. 링크·강조선 */
    --c-accent-l:   #EDF3FA;

    --c-ok:         #2F7A3D;   /* 성공 */
    --c-ok-bg:      #EDF7EE;
    --c-warn:       #B45309;   /* 경고 */
    --c-warn-bg:    #FEF6EC;
    --c-danger:     #B91C1C;   /* 위험 */
    --c-danger-bg:  #FDEDED;

    --c-line:       #D9DFE8;   /* 경계선 */
    --c-line-d:     #B9C3D2;   /* 진한 경계선 */
    --c-bg:         #F7F9FC;   /* 페이지 배경 */
    --c-bg-alt:     #EFF3F8;   /* 표 헤더 등 */
    --c-white:      #FFFFFF;

    --c-text:       #1C2430;   /* 본문 */
    --c-text-sub:   #55627A;   /* 보조 텍스트 (배경 #FFF 대비 약 6.4:1) */
    --c-text-mute:  #6B7688;   /* 더 흐린 텍스트 (4.6:1) */

    /* 치수 */
    --r-sm: 2px;
    --r-md: 4px;
    --r-lg: 6px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --w-wrap: 1180px;
    --w-lnb: 200px;

    --fs-base: 14px;
    --lh-base: 1.6;

    --shadow-1: 0 1px 2px rgba(28, 36, 48, .08);
    --shadow-2: 0 2px 8px rgba(28, 36, 48, .12);
}

/* -----------------------------------------------------------------------------
 * 1. 리셋 · 기본
 * -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "맑은 고딕", "Malgun Gothic", -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    word-break: keep-all;      /* 한글은 어절 단위로 끊는다 */
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.4; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; border: 0; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }

a { color: var(--c-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

strong, .strong { font-weight: 700; }
em { font-style: normal; }

/* 포커스 링 : 절대 없애지 않는다.
   마우스 사용자에게는 안 보이고 키보드 사용자에게만 보이도록 :focus-visible 을 쓰되,
   구형 브라우저(:focus-visible 미지원)에서는 :focus 로 폴백된다. */
:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* 본문 바로가기 링크. 평소엔 숨고 탭 포커스를 받으면 나타난다. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-primary);
    color: var(--c-white);
    font-weight: 700;
}
.skip:focus, .skip:focus-visible {
    left: 0;
    text-decoration: none;
}

/* 스크린리더 전용 (두 이름 모두 화면 파일에서 쓰인다) */
.blind,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
 * 2. 레이아웃 (고객사 포털)
 * -------------------------------------------------------------------------- */

/* body 에 client / admin / admin-login 클래스가 붙는다.
   두 영역의 기본 밀도가 달라야 하므로 스코프 훅으로 쓴다.
   (admin 계열은 css_bizportal_admin.css 가 이어서 정의한다) */
body.client {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.client .wrap { flex: 1 0 auto; width: 100%; }
body.client .foot { flex: 0 0 auto; }

.wrap {
    display: block;
    max-width: var(--w-wrap);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* --- 상단 GNB --- */
.gnb {
    background: var(--c-primary);
    color: var(--c-white);
    border-bottom: 3px solid var(--c-primary-d);
}
.gnb-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    max-width: var(--w-wrap);
    margin: 0 auto;
    padding: 0 var(--sp-4);
    min-height: 56px;
    flex-wrap: wrap;
}
.logo { font-size: 17px; letter-spacing: -.02em; }
.logo a { color: var(--c-white); text-decoration: none; }
.logo a:hover { text-decoration: none; opacity: .9; }

.menu { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; }
.menu a {
    position: relative;
    display: inline-block;
    padding: 18px var(--sp-3);
    color: #D7E0EE;
    font-weight: 500;
    white-space: nowrap;
}
.menu a:hover { color: var(--c-white); text-decoration: none; }
/* 활성 메뉴는 색만이 아니라 밑줄로도 표시한다 */
.menu a.on { color: var(--c-white); font-weight: 700; }
.menu a.on::after {
    content: "";
    position: absolute;
    left: var(--sp-2); right: var(--sp-2); bottom: 0;
    height: 3px;
    background: var(--c-white);
}

.gnb-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    font-size: 13px;
    color: #D7E0EE;
}
.gnb-user .company {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px var(--sp-2);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--r-md);
}
.gnb-user .uname { color: var(--c-white); font-weight: 700; }
.gnb-user .btn-txt { color: #D7E0EE; }
.gnb-user .btn-txt:hover { color: var(--c-white); }
.gnb-user .btn-txt.strong { color: var(--c-white); font-weight: 700; }

/* --- 페이지 머리 --- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--c-primary);
}
.page-title { font-size: 21px; color: var(--c-primary); letter-spacing: -.02em; }
.sub-title {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: 16px;
    color: var(--c-primary);
}

/* --- 하단 --- */
.foot {
    margin-top: var(--sp-6);
    padding: var(--sp-5) var(--sp-4);
    background: #ECF0F6;
    border-top: 1px solid var(--c-line);
    color: var(--c-text-sub);
    font-size: 12px;
}
.foot-inner { max-width: var(--w-wrap); margin: 0 auto; }
.foot-legal {
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    line-height: 1.7;
}
.foot-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.foot-links a { color: var(--c-text-sub); }
.foot-links a.strong { color: var(--c-primary); font-weight: 700; }
.foot-copy { color: var(--c-text-mute); }

/* -----------------------------------------------------------------------------
 * 3. 박스 · 카드
 * -------------------------------------------------------------------------- */
.card {
    margin-bottom: var(--sp-4);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    background: #FAFCFF;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    font-weight: 700;
    color: var(--c-primary);
}
.card-head h2, .card-head h3 { font-size: 15px; }
.card-head-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-sub);
}
.card-body { padding: var(--sp-4); }
.card-detail { padding: var(--sp-4); border-top: 1px dashed var(--c-line); }

/* 안내 박스. 종류별 좌측 굵은 선으로 구분한다(색만으로 구분하지 않는다) */
.box {
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-line-d);
    border-radius: var(--r-md);
    line-height: 1.7;
}
.box-info { background: var(--c-accent-l); border-color: #C6D8EC; border-left-color: var(--c-accent); }
.box-ok   { background: var(--c-ok-bg);   border-color: #C8E2CC; border-left-color: var(--c-ok); }
.box-warn { background: var(--c-warn-bg); border-color: #F0DCC0; border-left-color: var(--c-warn); }

/* 법적 고지 · 결과 · 동의 · 안내 박스 (의미가 다르므로 별도 이름을 유지한다) */
.legal-box {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    background: #FBFCFE;
    border: 1px dashed var(--c-line-d);
    border-radius: var(--r-md);
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.8;
}
.result-box {
    margin: var(--sp-4) 0;
    padding: var(--sp-5);
    background: var(--c-primary-l);
    border: 1px solid #C6D3E6;
    border-radius: var(--r-lg);
    text-align: center;
}
.result-label { display: block; color: var(--c-text-sub); font-size: 13px; }
.result-value {
    display: block;
    margin-top: var(--sp-2);
    color: var(--c-primary);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.agree-box {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--sp-3);
    background: #FBFCFE;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: 12px;
    line-height: 1.8;
    color: var(--c-text-sub);
}
.notice-guide,
.guide-list {
    margin: var(--sp-3) 0;
    padding-left: 1.2em;
    list-style: disc;
    color: var(--c-text-sub);
    line-height: 1.9;
}

/* -----------------------------------------------------------------------------
 * 4. 표
 * -------------------------------------------------------------------------- */
.tbl {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--c-primary);
    background: var(--c-white);
    font-size: 13px;
}
.tbl th, .tbl td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    text-align: center;
    vertical-align: middle;
}
.tbl th {
    background: var(--c-bg-alt);
    color: var(--c-primary);
    font-weight: 700;
    white-space: nowrap;
}
.tbl tbody tr:hover { background: #FAFCFF; }
.tbl caption { padding: var(--sp-2) 0; text-align: left; color: var(--c-text-sub); }

/* 목록형 : 좌측 정렬 셀이 많다 */
.tbl-list td { text-align: center; }
.tbl-list td.td-left { text-align: left; }

/* 상세형 : th 가 좌측 라벨 열이다 */
.tbl-view th {
    width: 160px;
    text-align: left;
    background: var(--c-bg-alt);
}
.tbl-view td { text-align: left; }

.tbl-empty {
    padding: var(--sp-6) var(--sp-4) !important;
    text-align: center !important;
    color: var(--c-text-mute);
}
.tbl-note {
    margin-top: var(--sp-2);
    color: var(--c-text-sub);
    font-size: 12px;
}

/* 셀 정렬 유틸 (td-* 와 ta-* 두 계열이 화면에서 함께 쓰인다. 둘 다 지원한다) */
.td-left   { text-align: left !important; }
.td-right  { text-align: right !important; }
.td-center { text-align: center !important; }
.ta-l { text-align: left !important; }
.ta-c { text-align: center !important; }
.ta-r { text-align: right !important; }
.ar   { text-align: right !important; }
.f-r  { float: right; }

.td-strong { font-weight: 700; color: var(--c-text); }
.td-err    { color: var(--c-danger); font-size: 12px; word-break: break-all; }
.td-memo   { text-align: left; color: var(--c-text-sub); font-size: 12px; }

/* 행 상태 표시.
   배경색만으로 구분하면 색각 이상 사용자가 놓치므로 좌측 표시선을 함께 넣는다. */
.row-danger { background: var(--c-danger-bg) !important; box-shadow: inset 3px 0 0 var(--c-danger); }
.row-warn   { background: var(--c-warn-bg)   !important; box-shadow: inset 3px 0 0 var(--c-warn); }
.row-deny   { background: #FBEAEA !important; box-shadow: inset 3px 0 0 #8B1414; }
.row-zombie { background: #F3EDF9 !important; box-shadow: inset 3px 0 0 #6D3FA0; }
.row-late   { background: #FFF6E6 !important; box-shadow: inset 3px 0 0 #C77700; }
.row-off    { background: #F2F4F7 !important; color: var(--c-text-mute); }
.row-off a  { color: var(--c-text-mute); }
.row-on     { background: var(--c-primary-l) !important; box-shadow: inset 3px 0 0 var(--c-primary); }
/* 선택된 행. 목록에서 상세를 펼친 행이 "on" 클래스만 받는 화면이 있다
   (cli_consult_history_list.asp). .row-on 과 같은 표시로 맞춘다. */
.tbl tr.on { background: var(--c-primary-l); box-shadow: inset 3px 0 0 var(--c-primary); }

/* 지원요건 대조 행 (cli_fund_notice_view.asp).
   충족 / 미충족 / 판정불가. 배경만이 아니라 셀 안의 O·X·- 글자로도 구분된다. */
.cond-ok { background: var(--c-ok-bg);     box-shadow: inset 3px 0 0 var(--c-ok); }
.cond-ng { background: var(--c-danger-bg); box-shadow: inset 3px 0 0 var(--c-danger); }
.cond-na { background: #F4F6F9;            box-shadow: inset 3px 0 0 var(--c-line-d); }

/* 재무제표 표 (계정과목 트리) */
.tbl-fin { font-variant-numeric: tabular-nums; }
.tbl-fin td { text-align: right; }
.tbl-fin td.td-left, .tbl-fin td.acct-nm { text-align: left; }
.tbl-fin .acct-cd { color: var(--c-text-mute); font-size: 11px; white-space: nowrap; }
.tbl-fin .acct-nm { color: var(--c-text); }
.acct { color: var(--c-text); }

/* 계정 레벨별 들여쓰기. 레벨이 깊을수록 흐리게. */
.lvl1  { font-weight: 700; background: #F4F7FB; }
.lvl2  { font-weight: 600; }
.lvl3  { color: var(--c-text-sub); }
.lvl4  { color: var(--c-text-sub); }
.lvl5  { color: var(--c-text-mute); }
.lvl1 .acct-nm, .tbl-fin td.lvl1 { padding-left: var(--sp-3); }
.lvl2 .acct-nm, .tbl-fin td.lvl2 { padding-left: var(--sp-5); }
.lvl3 .acct-nm, .tbl-fin td.lvl3 { padding-left: 36px; }
.lvl4 .acct-nm, .tbl-fin td.lvl4 { padding-left: 48px; }
.lvl5 .acct-nm, .tbl-fin td.lvl5 { padding-left: 60px; }
/* 어드민 재무 열람 화면은 lvl-N (하이픈) 형태를 쓴다 */
.lvl-1 { font-weight: 700; padding-left: var(--sp-3); }
.lvl-2 { padding-left: var(--sp-5); }
.lvl-3 { padding-left: 36px; color: var(--c-text-sub); }
.lvl-4 { padding-left: 48px; color: var(--c-text-sub); }
.lvl-5 { padding-left: 60px; color: var(--c-text-mute); }

/* 전기 대비 증감 */
.up   { color: var(--c-danger); }   /* 회계 관행상 증가를 붉게 */
.down { color: var(--c-accent); }
.up::before   { content: "▲ "; font-size: 10px; }
.down::before { content: "▼ "; font-size: 10px; }

/* -----------------------------------------------------------------------------
 * 5. 폼
 * -------------------------------------------------------------------------- */
.form { margin: 0; }
.form-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.form-row > label,
.form-label {
    flex: 0 0 auto;
    min-width: 110px;
    color: var(--c-text-sub);
    font-weight: 700;
    font-size: 13px;
}
.form-input { flex: 1 1 220px; min-width: 0; }

.inp, .sel, .txa {
    padding: 7px var(--sp-2);
    max-width: 100%;
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}
.inp:focus, .sel:focus, .txa:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(46, 92, 138, .18);
}
.inp[disabled], .sel[disabled], .txa[disabled],
.inp[readonly] {
    background: #F1F3F7;
    color: var(--c-text-mute);
    cursor: not-allowed;
}
.txa { min-height: 90px; resize: vertical; width: 100%; }
.sel { min-width: 110px; }

/* 폭 변형 */
.inp-wide   { width: 100%; }
.inp-narrow { width: 90px; }
.inp-sm     { padding: 4px var(--sp-2); font-size: 12px; }
.sel-sm     { padding: 4px var(--sp-2); font-size: 12px; min-width: 80px; }

.chk { margin-right: var(--sp-1); vertical-align: middle; }
label > .chk + span { vertical-align: middle; }

/* 필수 표시 */
.req::after {
    content: " *";
    color: var(--c-danger);
    font-weight: 700;
}

.form-err {
    display: block;
    margin-top: var(--sp-1);
    color: var(--c-danger);
    font-size: 12px;
    font-weight: 700;
}
.form-help,
.help {
    display: block;
    margin-top: var(--sp-1);
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.6;
}

/* 인라인 폼.
   화면 파일마다 .frm-inline / .form-inline / .inline-form 세 이름이 섞여 있다.
   어느 쪽을 써도 같은 결과가 나오도록 전부 정의한다. */
.frm-inline,
.form-inline,
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    flex-wrap: wrap;
    vertical-align: middle;
}

/* 검색 영역 */
.search-box {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.search-box label { color: var(--c-text-sub); font-size: 12px; font-weight: 700; }

/* -----------------------------------------------------------------------------
 * 6. 버튼
 * -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 7px var(--sp-4);
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
}
.btn:hover { background: #F2F5FA; text-decoration: none; }
.btn[disabled], .btn:disabled {
    background: #F1F3F7;
    border-color: var(--c-line);
    color: #98A2B3;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
}
.btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); color: var(--c-white); }

.btn-line {
    background: var(--c-white);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.btn-line:hover { background: var(--c-primary-l); }
/* 담기 완료 등 '켜진' 라인 버튼 */
.btn-line.on { background: var(--c-primary-l); border-color: var(--c-primary); }

.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-white);
}
.btn-danger:hover { background: #991616; border-color: #991616; color: var(--c-white); }

.btn-sm { padding: 3px var(--sp-2); font-size: 12px; }
.btn-lg { padding: 11px var(--sp-6); font-size: 15px; }

.btn-txt {
    display: inline-block;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--c-accent);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.btn-txt:hover { text-decoration: underline; }

.btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: var(--sp-4) 0 0;
}
.btn-area-lg { margin: var(--sp-6) 0 var(--sp-4); }
.btn-area-lg .btn { min-width: 160px; }
.btn-area-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

/* -----------------------------------------------------------------------------
 * 7. 상태 표시 (배지 · 태그 · 상태칩)
 * -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    min-width: 18px;
    margin-left: var(--sp-1);
    padding: 0 5px;
    border-radius: 9px;
    background: var(--c-danger);
    color: var(--c-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}
.badge.ok   { background: var(--c-ok); }
.badge.warn { background: var(--c-warn); }

.tag {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-text-sub);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}
.tag-new   { border-color: var(--c-ok);     background: var(--c-ok-bg);     color: var(--c-ok); }
.tag-close { border-color: var(--c-line-d); background: #EDEFF3;            color: var(--c-text-mute); }

/* 상태칩. 항상 글자와 함께 쓰인다(색만으로 의미를 전달하지 않는다). */
.stat {
    display: inline-block;
    min-width: 56px;
    padding: 2px var(--sp-2);
    border: 1px solid var(--c-line-d);
    border-radius: 10px;
    background: #EDEFF3;
    color: #3C4759;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.stat-recv     { background: var(--c-accent-l);  border-color: #BFD3E8; color: #1D4F7C; } /* 접수 · 대기 */
.stat-assign   { background: #E7EEF8;            border-color: #C2D2E8; color: #2A4B78; } /* 배정 */
.stat-progress { background: var(--c-warn-bg);   border-color: #EFD9BC; color: var(--c-warn); } /* 진행중 */
.stat-review   { background: #F3EDF9;            border-color: #DCCCEF; color: #5C3391; } /* 검수중 */
.stat-done     { background: var(--c-ok-bg);     border-color: #C2DFC7; color: var(--c-ok); }   /* 완료 */
.stat-fail     { background: var(--c-danger-bg); border-color: #EFC7C7; color: var(--c-danger); }
.stat-cancel   { background: #EDEFF3;            border-color: var(--c-line-d); color: var(--c-text-mute); }

/* D-day */
.dday {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    color: var(--c-text-sub);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.dday-soon { background: var(--c-danger-bg); color: var(--c-danger); }

/* -----------------------------------------------------------------------------
 * 8. 로딩
 * -------------------------------------------------------------------------- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5);
    color: var(--c-text-sub);
}
.spinner {
    display: inline-block;
    width: 22px; height: 22px;
    border: 3px solid var(--c-line);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: bp-spin .9s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* 움직임 최소화 설정을 존중한다 (전정기관 장애 사용자 대응) */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    * { transition: none !important; }
}

/* -----------------------------------------------------------------------------
 * 9. 빈 목록 · 페이징
 * -------------------------------------------------------------------------- */
.empty {
    padding: var(--sp-6) var(--sp-4);
    background: var(--c-white);
    border: 1px dashed var(--c-line-d);
    border-radius: var(--r-lg);
    color: var(--c-text-sub);
    text-align: center;
}
.empty-sub { margin-top: var(--sp-2); color: var(--c-text-mute); font-size: 12px; }

.paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin: var(--sp-5) 0 var(--sp-2);
}
.pg {
    display: inline-block;
    min-width: 30px;
    padding: 4px var(--sp-2);
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-text-sub);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}
.pg:hover { background: var(--c-bg-alt); text-decoration: none; }
.pg.on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
    font-weight: 700;
}
.pg.first, .pg.prev, .pg.next, .pg.last { color: var(--c-text-sub); }
.paging-info { text-align: center; color: var(--c-text-sub); font-size: 12px; }
.paging-info strong { color: var(--c-primary); }

/* -----------------------------------------------------------------------------
 * 10. 충족률 막대
 * -------------------------------------------------------------------------- */
/* (1) div + span 구조. .rate-fill 은 인라인 style="width:NN%" 를 받는다. */
.rate-bar {
    position: relative;
    width: 100%;
    height: 10px;
    margin: var(--sp-1) 0;
    background: #E3E8F0;
    border-radius: 5px;
    overflow: hidden;
}
.rate-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
    border-radius: 5px;
}

/* (2) <progress class="rate-meter"> 구조.
   입력 도중 값이 계속 바뀌는 프로필 완성도 막대가 이 형태를 쓴다.
   보조기기가 진행률로 읽어 주고 인라인 style 없이 value 만 바꾸면 된다. */
progress.rate-meter,
.rate-meter {
    display: inline-block;
    vertical-align: middle;
    width: 220px;
    height: 10px;
    border: 0;
    border-radius: 5px;
    background: #E3E8F0;                 /* Firefox 트랙 */
    color: var(--c-primary);             /* IE10+ 값 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
}
progress.rate-meter::-webkit-progress-bar   { background: #E3E8F0; border-radius: 5px; }
progress.rate-meter::-webkit-progress-value { background: var(--c-primary); border-radius: 5px; }
progress.rate-meter::-moz-progress-bar      { background: var(--c-primary); border-radius: 5px; }

.rate-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rate-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.rate-label { color: var(--c-text-sub); font-size: 12px; font-weight: 700; }
.rate-txt,
.rate-num {
    color: var(--c-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rate-num { font-size: 18px; }
.rate-cnt { color: var(--c-text-sub); font-size: 12px; }
.rate-opt { color: var(--c-text-mute); font-size: 12px; }
.rate-basedt { color: var(--c-text-mute); font-size: 11px; }
.rate-fail {
    margin-top: var(--sp-1);
    color: var(--c-danger);
    font-size: 12px;
    line-height: 1.6;
}
.rate-fail-label { font-weight: 700; }

/* -----------------------------------------------------------------------------
 * 11. 대시보드
 * -------------------------------------------------------------------------- */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.dash-cards .card { margin-bottom: 0; }

.stat-card {
    padding: var(--sp-4);
    border-top: 3px solid var(--c-primary);
}
.stat-card.warn   { border-top-color: var(--c-warn);   background: var(--c-warn-bg); }
.stat-card.danger { border-top-color: var(--c-danger); background: var(--c-danger-bg); }
.stat-label { color: var(--c-text-sub); font-size: 12px; font-weight: 700; }
.stat-value {
    margin: var(--sp-1) 0;
    color: var(--c-primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-value a { color: inherit; }
.stat-card.warn   .stat-value { color: var(--c-warn); }
.stat-card.danger .stat-value { color: var(--c-danger); }
.stat-sub { color: var(--c-text-mute); font-size: 11px; line-height: 1.5; }

/* 2열 배치 (어드민 대시보드 하단) */
.dash-row,
.dash-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sp-3);
    align-items: start;
}
.dash-card { padding: var(--sp-4); }

.dash-banner {
    margin-bottom: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(100deg, var(--c-primary), var(--c-accent));
    border-radius: var(--r-lg);
    color: var(--c-white);
}
.dash-banner a { color: var(--c-white); text-decoration: underline; }
.banner-title { font-size: 18px; margin-bottom: var(--sp-1); }
.dash-hello { font-size: 15px; color: var(--c-text); margin-bottom: var(--sp-3); }
.dash-hello strong { color: var(--c-primary); }
.dash-note { color: var(--c-text-sub); font-size: 12px; }

.dash-list > li,
.dash-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px dashed var(--c-line);
}
.dash-list > li:last-child, .dash-item:last-child { border-bottom: 0; }
.dash-item-title { font-weight: 700; }
.dash-item-title a { color: var(--c-text); }
.dash-item-meta { color: var(--c-text-sub); font-size: 12px; }
.dash-item-rate { margin-top: var(--sp-1); }

/* 상태 요약 리스트 (코드별 건수) */
.stat-list { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.stat-list > li { display: flex; align-items: baseline; gap: var(--sp-1); }
.stat-nm  { color: var(--c-text-sub); font-size: 12px; }
.stat-cnt { color: var(--c-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
 * 12. 지원조건 검수 (어드민)
 * -------------------------------------------------------------------------- */
.cond-card { border-left: 3px solid var(--c-line-d); }
.cond-card.row-danger { border-left-color: var(--c-danger); }
.cond-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-4);
}
.cond-src {
    padding: var(--sp-3);
    background: #FBFCFE;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.cond-src-label { color: var(--c-text-sub); font-size: 12px; font-weight: 700; }
.cond-edit {
    padding: var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.cond-note { color: var(--c-text-sub); font-size: 12px; line-height: 1.7; }
.cond-my   { color: var(--c-primary); font-weight: 700; }
.cond-rslt { margin-top: var(--sp-1); font-size: 12px; }
.cond-sum  { color: var(--c-text-sub); font-size: 12px; }

/* LLM 이 인용한 공고 원문 조각. 원문 그대로라 줄바꿈을 보존한다. */
.src-snippet {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-white);
    border-left: 3px solid var(--c-line-d);
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.8;
    white-space: normal;
    word-break: break-all;
}

/* 인라인 수정 행 (표 안에서 펼쳐진다) */
.edit-row > td {
    padding: var(--sp-4) !important;
    background: var(--c-bg);
    text-align: left;
}

/* 원본 JSON 덤프 (개발/운영 확인용) */
.raw-json {
    max-height: 260px;
    overflow: auto;
    padding: var(--sp-2);
    background: #1C2430;
    border-radius: var(--r-md);
    color: #DCE3EC;
    font-family: Consolas, "D2Coding", monospace;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

/* -----------------------------------------------------------------------------
 * 13. 로그인 화면
 * -------------------------------------------------------------------------- */
.login-wrap {
    max-width: 380px;
    margin: 60px auto;
    padding: var(--sp-6) var(--sp-5);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
}
.login-logo {
    margin-bottom: var(--sp-5);
    color: var(--c-primary);
    font-size: 20px;
    text-align: center;
    letter-spacing: -.02em;
}
.login-logo span { color: var(--c-text-sub); font-size: 14px; font-weight: 400; }
.login-wrap .form-row { display: block; }
.login-wrap .form-row > label { display: block; margin-bottom: var(--sp-1); min-width: 0; }
.login-wrap .inp { width: 100%; padding: 9px var(--sp-3); font-size: 14px; }
.login-wrap .btn-lg { width: 100%; }
.login-note {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}
.login-note a { font-weight: 700; }

/* -----------------------------------------------------------------------------
 * 14. 재무 연동 · 재무 조회
 * -------------------------------------------------------------------------- */
.auth-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2);
}
.auth-item {
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-md);
    background: var(--c-white);
}
.auth-item label {
    display: block;
    padding: var(--sp-3);
    cursor: pointer;
}
.auth-item:hover { border-color: var(--c-accent); background: var(--c-accent-l); }
.auth-nm   { display: block; font-weight: 700; }
.auth-desc { display: block; color: var(--c-text-sub); font-size: 12px; }

.fin-tabs {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
}
.fin-tab {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--c-line);
    border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--c-bg-alt);
    color: var(--c-text-sub);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.fin-tab.on {
    background: var(--c-white);
    color: var(--c-primary);
    border-color: var(--c-primary);
    border-bottom: 2px solid var(--c-white);
    margin-bottom: -1px;
}
.fin-pane { display: block; }
.fin-years { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.fin-years-label { color: var(--c-text-sub); font-size: 12px; font-weight: 700; }
.fin-limit {
    margin-top: var(--sp-3);
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.8;
}

/* 인증 대기 화면 (cli_finance_wait_view.asp 는 자체 style 블록도 갖고 있다.
   여기 정의는 그 파일이 없는 화면에서도 형태가 유지되도록 하는 기본값이다) */
.wait-body  { text-align: center; padding: var(--sp-6) var(--sp-4); }
.wait-title { margin: var(--sp-4) 0 var(--sp-2); font-size: 19px; color: var(--c-primary); }
.wait-desc  { color: var(--c-text-sub); }
.wait-timer { margin: var(--sp-4) 0; font-size: 16px; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
 * 15. 정책자금 피드 · 공고 상세
 * -------------------------------------------------------------------------- */
.feed-lead { margin-bottom: var(--sp-3); color: var(--c-text-sub); }
.feed-basedt { color: var(--c-text-mute); font-size: 12px; }
.feed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3);
}
.feed-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.feed-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-2); }
.feed-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.feed-card-title { font-size: 15px; line-height: 1.45; }
.feed-card-title a { color: var(--c-text); }
.feed-card-meta {
    margin: var(--sp-2) 0;
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.7;
}
.feed-card-rate { margin-top: auto; padding-top: var(--sp-2); }
.feed-card-btn { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.ntc-view { max-width: 900px; }
.ntc-head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.ntc-head-tag { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.ntc-title { font-size: 20px; line-height: 1.4; color: var(--c-primary); }
.ntc-sub { margin-top: var(--sp-2); color: var(--c-text-sub); font-size: 12px; }
.ntc-summary { line-height: 1.9; white-space: normal; }
.ntc-cond { margin-top: var(--sp-3); }
.ntc-rcpt-txt { color: var(--c-text-sub); font-size: 12px; }
.ntc-legal {
    margin-top: var(--sp-4);
    color: var(--c-text-mute);
    font-size: 12px;
    line-height: 1.8;
}
.inst { color: var(--c-text-sub); }
.date { color: var(--c-text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.memo { color: var(--c-text-sub); font-size: 12px; }
.price { color: var(--c-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
 * 16. 장바구니
 * -------------------------------------------------------------------------- */
.cart-lead { margin-bottom: var(--sp-3); color: var(--c-text-sub); }
.cart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.cart-toolbar-note { color: var(--c-text-sub); font-size: 12px; }
.cart-tbl { width: 100%; }
.cart-chk   { width: 44px; }
.cart-dday  { width: 90px; white-space: nowrap; }
.cart-del   { width: 60px; }
.cart-title { text-align: left; }
.cart-title a { color: var(--c-text); font-weight: 700; }
.cart-memo { display: flex; gap: var(--sp-1); align-items: center; }
.cart-memo .inp { flex: 1 1 auto; }
/* 마감된 건은 흐리게. 체크박스도 disabled 라 조작할 수 없다. */
.cart-closed,
.cart-closed td { background: #F2F4F7; color: var(--c-text-mute); }
.cart-closed .cart-title a { color: var(--c-text-mute); }

/* -----------------------------------------------------------------------------
 * 17. 리포트 · 상품
 * -------------------------------------------------------------------------- */
.report-card { margin-bottom: var(--sp-4); }
.prod-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-3);
}
.prod-item {
    padding: var(--sp-4);
    background: var(--c-white);
    border: 1px solid var(--c-line-d);
    border-radius: var(--r-lg);
}
.prod-item:hover { border-color: var(--c-accent); }
.prod-desc { margin-top: var(--sp-2); color: var(--c-text-sub); font-size: 12px; line-height: 1.7; }
.prod-disabled {
    background: #F2F4F7;
    color: var(--c-text-mute);
    opacity: .75;
}
.prod-disabled:hover { border-color: var(--c-line-d); }

/* -----------------------------------------------------------------------------
 * 18. 처리 이력 (타임라인)
 * -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: var(--sp-4); border-left: 2px solid var(--c-line); }
.timeline-item { position: relative; padding: 0 0 var(--sp-4) var(--sp-3); }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -21px; top: 6px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-bg);
}
.timeline-dt { color: var(--c-text-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.timeline-body { font-weight: 700; }
.timeline-memo { color: var(--c-text-sub); font-size: 12px; line-height: 1.7; white-space: normal; }

/* -----------------------------------------------------------------------------
 * 19. FAQ · 약관
 * -------------------------------------------------------------------------- */
.faq-cats { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.faq-list { border-top: 2px solid var(--c-primary); }
.faq-item { border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.faq-q {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    background: none;
    color: var(--c-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.faq-q:hover { background: #FAFCFF; }
.faq-no { flex: 0 0 auto; color: var(--c-accent); font-weight: 700; }
.faq-a {
    padding: var(--sp-3) var(--sp-4) var(--sp-4) 46px;
    background: #FBFCFE;
    border-top: 1px dashed var(--c-line);
    color: var(--c-text-sub);
    line-height: 1.9;
}

.terms { max-width: 900px; }
.terms-meta { margin-bottom: var(--sp-3); color: var(--c-text-sub); font-size: 12px; }
.terms-body {
    padding: var(--sp-5);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    line-height: 1.95;
}
.terms-body h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 15px; color: var(--c-primary); }
.terms-body h4 { margin: var(--sp-4) 0 var(--sp-1); font-size: 14px; }
.terms-body p  { margin-bottom: var(--sp-2); }
.terms-body ul, .terms-body ol { margin: var(--sp-2) 0 var(--sp-3) 1.4em; list-style: disc; }
.terms-body ol { list-style: decimal; }
.terms-body li { margin-bottom: var(--sp-1); }
.terms-body .tbl { margin: var(--sp-3) 0; }
.terms-foot {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-sub);
    font-size: 12px;
}

/* 미확정 항목 자리표시자. "(계약 확정 후 기재)" 처럼 아직 못 채운 값이다. */
.ph {
    color: var(--c-text-mute);
    background: #F2F4F7;
    padding: 0 4px;
    border-radius: var(--r-sm);
    font-style: normal;
}

/* -----------------------------------------------------------------------------
 * 20. 탭
 * -------------------------------------------------------------------------- */
.tab-nav {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
}
.tab {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--c-text-sub);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.tab:hover { background: var(--c-bg-alt); text-decoration: none; }
.tab.on {
    background: var(--c-white);
    border-color: var(--c-line);
    border-top: 2px solid var(--c-primary);
    color: var(--c-primary);
    margin-bottom: -1px;
}

/* -----------------------------------------------------------------------------
 * 21. 텍스트 유틸
 * -------------------------------------------------------------------------- */
.txt-danger { color: var(--c-danger) !important; }
.txt-deny   { color: #8B1414 !important; font-weight: 700; }
.txt-warn   { color: var(--c-warn) !important; }
.txt-sub    { color: var(--c-text-sub) !important; font-size: 12px; }
.txt-gray   { color: var(--c-text-mute) !important; }
.txt-sm     { font-size: 12px; }
/* 긴 URL·해시처럼 끊을 곳이 없는 문자열이 표를 밀어내지 않게 한다 */
.txt-break  { word-break: break-all; overflow-wrap: anywhere; }
.warn-txt   { color: var(--c-warn); font-weight: 700; }

/* 단독으로 쓰이는 상태 수식 클래스.
   요건 대조표의 O / X / - 표시가 대표적이다.
   O X - 라는 글자 자체가 의미를 담고 있으므로 색은 보조 수단이다. */
.ok       { color: var(--c-ok); font-weight: 700; }
.no, .ng  { color: var(--c-danger); font-weight: 700; }
.na       { color: var(--c-text-mute); font-weight: 700; }
.warn     { color: var(--c-warn); }
.danger   { color: var(--c-danger); }
/* 배지·카드에 붙는 .ok / .warn 은 자기 규칙이 따로 있으므로 위 색을 덮지 않게 한다 */
.badge.ok, .badge.warn, .stat-card.warn, .stat-card.danger { color: inherit; }
.badge.ok, .badge.warn { color: var(--c-white); }
.off { opacity: .6; }

/* -----------------------------------------------------------------------------
 * 22. JS 훅 클래스
 * -------------------------------------------------------------------------- */
/* js-* 는 자바스크립트가 잡는 표식이다. 스타일을 주지 않는다.
   (스타일을 주면 리팩터링 때 클래스명을 못 바꾼다)
   여기에 목록으로 남기는 이유는 "미정의 클래스"로 오인해 지우지 않게 하려는 것이다.
   .js-cart .js-want .js-memo .js-memo-inp .js-del .js-apply */

/* -----------------------------------------------------------------------------
 * 23. 반응형
 * -------------------------------------------------------------------------- */

/* --- 1024px 이하 : LNB 를 접는다 (어드민 CSS 가 이어서 처리) --- */
@media screen and (max-width: 1024px) {
    .wrap { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
    .gnb-inner { gap: var(--sp-3); }
    .menu a { padding: 14px var(--sp-2); font-size: 13px; }
    .cond-body { grid-template-columns: minmax(0, 1fr); }
    .dash-row, .dash-cols { grid-template-columns: minmax(0, 1fr); }
    .tbl-view th { width: 120px; }
}

/* --- 768px 이하 : 표를 카드형으로 바꾼다 --- */
@media screen and (max-width: 768px) {
    body { font-size: 13px; }

    .gnb-inner { min-height: 0; padding: var(--sp-2) var(--sp-3); }
    .menu { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .menu a { padding: var(--sp-2) var(--sp-2); }
    .menu a.on::after { left: 0; right: 0; }
    .gnb-user { font-size: 12px; }
    .gnb-user .company { max-width: 110px; }

    .page-head { align-items: flex-start; flex-direction: column; }
    .page-title { font-size: 18px; }

    .form-row { flex-direction: column; align-items: stretch; }
    .form-row > label, .form-label { min-width: 0; }
    .inp, .sel, .txa, .inp-wide { width: 100%; }
    .inp-narrow { width: 100%; }
    .search-box { flex-direction: column; align-items: stretch; }

    .btn-area .btn, .btn-area-lg .btn { flex: 1 1 140px; }

    .dash-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .feed-list, .prod-list, .auth-list { grid-template-columns: minmax(0, 1fr); }

    /*  표 -> 카드 변환
     *  각 td 앞에 data-th 값을 라벨로 붙인다. 화면 파일이 data-th 를 안 붙였다면
     *  라벨 없이 값만 세로로 쌓인다(깨지지는 않는다).
     *  .tbl-view 와 .tbl-fin 은 원래 2열/숫자표라 변환하지 않는다.
     */
    .tbl-list { border-top: 0; }
    .tbl-list thead { position: absolute; left: -9999px; }
    .tbl-list tr {
        display: block;
        margin-bottom: var(--sp-2);
        background: var(--c-white);
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-1);
    }
    .tbl-list td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        text-align: right !important;
        border-bottom: 1px dashed var(--c-line);
    }
    .tbl-list td:last-child { border-bottom: 0; }
    .tbl-list td::before {
        content: attr(data-th);
        flex: 0 0 auto;
        color: var(--c-text-sub);
        font-size: 11px;
        font-weight: 700;
        text-align: left;
    }
    .tbl-list td.tbl-empty { display: block; text-align: center !important; }
    .tbl-list td.tbl-empty::before { content: ""; }

    .cart-tbl .cart-chk, .cart-tbl .cart-del { width: auto; }

    /* 재무제표는 가로 스크롤로 형태를 유지한다 (카드로 바꾸면 읽을 수 없다) */
    .tbl-fin { display: block; overflow-x: auto; white-space: nowrap; }

    .login-wrap { margin: var(--sp-5) var(--sp-3); padding: var(--sp-5) var(--sp-4); }
    .terms-body { padding: var(--sp-4) var(--sp-3); }
    .faq-a { padding-left: var(--sp-4); }
}

/* -----------------------------------------------------------------------------
 * 24. 인쇄 (리포트 · 약관 출력용)
 * -------------------------------------------------------------------------- */
@media print {
    :root {
        --c-primary: #000000;
        --c-accent:  #000000;
        --c-text:    #000000;
        --c-text-sub:  #333333;
        --c-text-mute: #555555;
    }
    body { background: #FFF; color: #000; font-size: 10.5pt; }

    /* 화면 전용 요소는 인쇄하지 않는다 */
    .gnb, .adm-gnb, .adm-lnb, .foot, .adm-foot, .skip,
    .paging, .btn-area, .btn-area-lg, .btn-area-top, .search-box,
    .btn, .tab-nav, .fin-tabs, .cart-toolbar, .faq-cats, .spinner, .loading {
        display: none !important;
    }

    .wrap, .adm-content { max-width: none; margin: 0; padding: 0; }
    .card, .box, .terms-body, .feed-card, .prod-item {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .card-head { background: #EEE; }

    .tbl { font-size: 9.5pt; }
    .tbl th { background: #EEE !important; color: #000; }
    .tbl tr { break-inside: avoid; page-break-inside: avoid; }
    thead { display: table-header-group; }   /* 페이지가 넘어가도 머리행 반복 */

    /* 상태·행 강조 배경은 잉크만 먹는다. 테두리로 대체한다. */
    .row-danger, .row-warn, .row-deny, .row-zombie, .row-late, .row-off, .row-on {
        background: #FFF !important;
        box-shadow: none !important;
    }
    .stat, .tag, .badge, .dday {
        background: #FFF !important;
        color: #000 !important;
        border: 1px solid #666 !important;
    }

    /* 링크 주소를 본문에 드러낸다 (종이에서는 클릭할 수 없다) */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }

    /* 법적 고지는 반드시 인쇄되어야 한다 */
    .foot-legal, .ntc-legal, .legal-box, .fin-limit {
        display: block !important;
        border: 1px solid #999;
        padding: 6pt;
        font-size: 8.5pt;
    }

    .page-head { border-bottom: 2px solid #000; }
    h2, h3 { break-after: avoid; page-break-after: avoid; }
}