/* 수출 BO — 업무용 표 화면. 숫자가 많아 촘촘하게, 숫자는 고정폭 숫자로 오른쪽 정렬
   색 · 글자 크기 · 간격 · 모서리는 KRDS(대한민국 정부 디자인 시스템, 행정안전부 · 공공누리 제1유형) 토큰 값을 옮겼다.
   출처 표기는 _Layout 바닥에 있다. KRDS 의 component.css(530KB)는 쓰지 않는다 — 클래스 이름은 이 파일 그대로 둔다 */

/* KRDS 글꼴 Pretendard GOV — KRDS 저장소 resources/fonts 의 subset woff2 셋을 그대로 옮겼다(2026-10-23).
   서버에 두므로 사외 CDN 을 부르지 않는다. 600 은 Medium 으로 그린다(없으면 브라우저가 Bold 로 올린다) */
@font-face { font-family: "Pretendard GOV"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/PretendardGOV-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard GOV"; font-weight: 500 600; font-style: normal; font-display: swap; src: url("fonts/PretendardGOV-Medium.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard GOV"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/PretendardGOV-Bold.subset.woff2") format("woff2"); }

:root {
    /* KRDS 기본 색 (light) */
    --gray-0: #ffffff;  --gray-5: #f4f5f6;  --gray-10: #e6e8ea; --gray-20: #cdd1d5; --gray-30: #b1b8be;
    --gray-50: #6d7882; --gray-60: #58616a; --gray-70: #464c53; --gray-90: #1e2124; --gray-95: #131416;
    --primary-5: #ecf2fe; --primary-10: #d8e5fd; --primary-50: #256ef4; --primary-60: #0b50d0; --primary-70: #083891;
    --secondary-5: #eef2f7; --secondary-10: #d6e0eb; --secondary-70: #063a74; --secondary-80: #052b57;
    --danger-5: #fdefec; --danger-60: #bd2c0f;
    --warning-5: #fff3db; --warning-60: #8a5c00;
    --success-5: #eaf6ec; --success-60: #267337;

    /* 화면에서 쓰는 이름 */
    --bg: var(--gray-5);
    --panel: var(--gray-0);
    --ink: var(--gray-90);
    --muted: var(--gray-60);
    --line: var(--gray-20);
    --line-soft: var(--gray-10);
    --head: var(--secondary-70);
    --accent: var(--primary-60);
    --warn-bg: var(--warning-5);
    --sub: var(--gray-5);
    --radius: 6px;          /* KRDS radius-large1 */
    --radius-s: 4px;        /* KRDS radius-small */

    /* 웍스와 같은 뜻의 줄 색 — 현업이 웍스에서 익힌 색이라 그대로 둔다 */
    --tone-lot: #dbf7c5;     /* 로트완료 (웍스 #B6FF74) */
    --tone-ship: #ffe0cc;    /* 출하완료 (웍스 #FFC19E) */
    --tone-fee: #ffd6d6;     /* 수수료할인 (웍스 #FFA7A7) */
    --tone-ret: #fff3a6;     /* 반품 (웍스 #FFE400) */
    --tone-ok: #d8f2f7;      /* 확인 (웍스 #B2EBF4) */
    --tone-pre: #ffe3a3;     /* 선수금 (웍스 #FFBB00) */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    /* KRDS 글꼴은 Pretendard GOV. 파일을 두기 전에는 맑은 고딕으로 보인다 */
    font: 15px/1.5 "Pretendard GOV", "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--primary-50); outline-offset: 2px; }

/* ── 머리 — KRDS 머리처럼 흰 바탕 + 아래 줄, 지금 메뉴는 밑줄 */
.top {
    display: flex; align-items: stretch; gap: 32px;
    background: var(--panel); color: var(--ink); padding: 0 24px; min-height: 64px;
    border-bottom: 1px solid var(--line);
}
.top .brand { display: flex; align-items: center; color: var(--secondary-80); font-weight: 700; font-size: 19px; letter-spacing: -.4px; white-space: nowrap; }
.top .brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 28px; flex-wrap: wrap; align-items: stretch; }
.top .grp { display: flex; align-items: stretch; gap: 2px; }
.top .lbl { display: flex; align-items: center; color: var(--muted); font-size: 13px; margin-right: 6px; }
.top nav a {
    display: flex; align-items: center; color: var(--gray-70); padding: 0 10px; white-space: nowrap;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.top nav a:hover { color: var(--accent); text-decoration: none; background: var(--primary-5); }
.top nav a.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--gray-70); white-space: nowrap; font-size: 14px; }
.top .who small { color: var(--muted); margin-left: 4px; }
.top .who a { color: var(--gray-70); }
.top .who form { margin: 0; }
.top .who button {
    background: var(--panel); border: 1px solid var(--gray-30); color: var(--gray-70);
    border-radius: var(--radius-s); padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px;
}
.top .who button:hover { background: var(--gray-5); }
.proto { background: var(--warn-bg); color: var(--warning-60); padding: 8px 24px; font-size: 13px; border-bottom: 1px solid #ffe0a3; }

main { padding: 24px 24px 48px; }
h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.5px; font-weight: 700; }   /* KRDS heading-medium */
.sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; }

/* ── 입력칸 — KRDS 입력(높이 40, 진한 테두리 3:1 이상). 표 안에서는 촘촘하게 */
main input[type=text], main input[type=password], main input[type=number], main input[type=date],
main input[type=email], main input:not([type]), main select, main textarea {
    font: inherit; font-size: 15px; color: var(--ink); background: var(--panel);
    border: 1px solid var(--gray-50); border-radius: var(--radius-s); padding: 0 12px; height: 40px; max-width: 100%;
}
main textarea { height: auto; padding: 8px 12px; }
main input[readonly] { background: var(--gray-5); color: var(--gray-70); border-color: var(--gray-30); }
main input:focus, main select:focus, main textarea:focus { border-color: var(--primary-50); outline: 2px solid var(--primary-10); outline-offset: 0; }
main input[type=checkbox], main input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary-50); vertical-align: -3px; }
main label { color: var(--gray-70); font-size: 14px; font-weight: 600; }
main label input, main label select, main label textarea { font-weight: 400; }
table.grid input[type=text], table.grid input[type=number], table.grid input[type=date], table.grid select {
    height: 30px; font-size: 13px; padding: 0 6px;
}

/* ── 검색 조건 */
.filters {
    display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.filters label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gray-70); font-weight: 600; }
.filters input, .filters select {
    font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); height: 40px; padding: 0 12px;
    border: 1px solid var(--gray-50); border-radius: var(--radius-s); background: var(--panel); min-width: 0;
}
.filters input:focus, .filters select:focus { border-color: var(--primary-50); outline: 2px solid var(--primary-10); outline-offset: 0; }
.filters input[type=date] { width: 160px; }
.filters .btn, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-size: 15px; font-weight: 600; height: 40px; padding: 0 18px; border-radius: var(--radius-s);
    border: 1px solid var(--primary-50); background: var(--primary-50); color: #fff; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--primary-60); border-color: var(--primary-60); text-decoration: none; }
.btn.ghost { background: var(--panel); color: var(--primary-60); border-color: var(--primary-50); }
.btn.ghost:hover { background: var(--primary-5); }
.tabs { display: flex; gap: 0; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 16px; color: var(--gray-70); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--accent); text-decoration: none; }
.tabs a.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.month { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.month strong { font-size: 19px; min-width: 110px; text-align: center; }

/* ── 요약 줄 */
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; min-width: 140px; }
.stat .k { color: var(--muted); font-size: 13px; }
.stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ── 표 — 숫자가 많아 본문보다 한 단계 작게(KRDS body-xsmall 13px) */
.tblwrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 250px); }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 7px 10px; white-space: nowrap; vertical-align: top; }
table.grid thead th {
    position: sticky; top: 0; background: var(--gray-5); color: var(--gray-90); font-weight: 700; z-index: 1; text-align: center;
    border-bottom: 1px solid var(--gray-30);
}
table.grid tbody tr:hover td { background: var(--primary-5); }
table.grid td.n, table.grid th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.c { text-align: center; }
table.grid tr.blk td { background: var(--secondary-5); font-weight: 700; }
table.grid tr.tot td { background: var(--secondary-10); font-weight: 700; }
table.grid tr.sub td { background: var(--sub); color: var(--gray-70); }
table.grid td.wrap { white-space: normal; min-width: 160px; }
table.grid td.chg { background: var(--tone-ret); font-weight: 700; }   /* 시험 저장 보고 - 바뀐 칸 */
.muted { color: var(--muted); }
.tone-lot { background: var(--tone-lot) !important; }
.tone-ship { background: var(--tone-ship) !important; }
tr.tone-fee td { background: var(--tone-fee); }
tr.tone-ret td { background: var(--tone-ret); }
tr.tone-ok td { background: var(--tone-ok); }
tr.tone-pre td { background: var(--tone-pre); }
.tag { display: inline-block; padding: 0 7px; border-radius: var(--radius-s); font-size: 13px; font-weight: 600; background: var(--gray-10); color: var(--gray-70); }
.tag.red { background: var(--danger-5); color: var(--danger-60); }
.tag.green { background: var(--success-5); color: var(--success-60); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 10px 2px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; border: 1px solid rgba(0,0,0,.1); }
details.lines summary { cursor: pointer; color: var(--accent); list-style: none; }
details.lines summary::-webkit-details-marker { display: none; }

/* ── 쪽 넘기기 */
.pager { display: flex; gap: 4px; margin-top: 16px; flex-wrap: wrap; align-items: center; justify-content: center; }
.pager a, .pager span {
    min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-s); color: var(--gray-70);
}
.pager a:hover { background: var(--gray-5); text-decoration: none; }
.pager span.on { background: var(--secondary-70); color: #fff; font-weight: 700; }

/* ── 첫 화면 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h2 { font-size: 17px; margin: 0 0 10px; }
.card a { display: block; padding: 4px 0; }
.card p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.note {
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--primary-50);
    border-radius: var(--radius); padding: 14px 18px; margin: 16px 0; color: var(--gray-70); font-size: 14px;
}
.note li { margin: 3px 0; }
.note.danger { background: var(--danger-5); border-color: #fcdfd9; border-left-color: var(--danger-60); }
.note.warn { background: var(--warning-5); border-color: #ffe0a3; border-left-color: var(--warning-60); }
.note.ok { background: var(--success-5); border-color: #d8eedd; border-left-color: var(--success-60); }

/* ── 작은 부품 — 화면 파일에 색 · 크기를 직접 적지 않고 이것을 쓴다 */
main h2 { font-size: 17px; margin: 20px 0 10px; letter-spacing: -.3px; }   /* KRDS heading-xsmall */
.h-sub { font-size: 15px; font-weight: 400; margin-left: 6px; }            /* h1 옆 회색 부제 */
.small { font-size: 13px; }                                                 /* KRDS body-xsmall — 이보다 작게 쓰지 않는다 */
.txt-danger { color: var(--danger-60); }
.btn.danger { background: var(--danger-60); border-color: var(--danger-60); }
.btn.danger:hover { background: #8a240f; border-color: #8a240f; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
a.tag { border: 1px solid var(--gray-20); background: var(--panel); color: var(--gray-70); }
a.tag:hover { border-color: var(--primary-50); color: var(--primary-60); background: var(--primary-5); text-decoration: none; }

/* ── 바닥 — KRDS 출처 표기(공공누리 제1유형 조건) */
.foot { padding: 16px 24px 24px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
    .top { min-height: 0; flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
    .top nav a { padding: 6px 8px; }
    main { padding: 16px 16px 32px; }
    .foot { padding: 14px 16px 20px; }
}