:root { --navy-950:#071d34; --navy-800:#0e375d; --blue:#1479c9; --blue-soft:#eaf5ff; --ink:#142537; --muted:#607386; --line:#dce5ed; --surface:#fff; --canvas:#f3f7fa; --ok:#13734b; --ok-soft:#e6f6ed; --warn:#a95700; --warn-soft:#fff1df; --error:#c43d3d; --error-soft:#fceaea; --shadow:0 8px 24px rgba(23,53,79,.07); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#edf4f9 0,var(--canvas) 280px); font:14px/1.5 Inter,"Pretendard","Malgun Gothic",Arial,sans-serif; }
button,input,select { font:inherit; } button { transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.site-header { min-height:72px; padding:0 max(36px,calc((100vw - 1240px) / 2)); display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(105deg,var(--navy-950),var(--navy-800)); box-shadow:0 2px 9px rgba(3,23,43,.18); }
.brand { display:flex; align-items:baseline; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.35px; }.brand::before { content:"FG"; display:grid; width:28px; height:28px; place-items:center; border:1px solid #4fa7e5; border-radius:7px; color:#9dd4ff; font-size:10px; letter-spacing:.3px; }.brand span { color:#adcbe1; font-size:12px; font-weight:500; letter-spacing:0; }
nav { display:flex; align-self:stretch; gap:4px; } nav a { display:flex; align-items:center; padding:0 15px; border-bottom:3px solid transparent; color:#c6d9e8; text-decoration:none; font-weight:600; } nav a:hover { color:#fff; background:rgba(255,255,255,.06); } nav a.active { border-bottom-color:#65b9f2; color:#fff; }
.page-container { width:1200px; max-width:calc(100% - 64px); margin:34px auto 64px; }.page-heading { display:flex; justify-content:space-between; margin:0 0 25px; }.eyebrow { margin:0 0 5px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.5px; }.page-heading h1,.result-heading h1 { margin:0; font-size:29px; letter-spacing:-.8px; line-height:1.2; }.page-heading p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); }
.panel { margin-bottom:18px; padding:23px 25px; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:var(--shadow); }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.panel-heading-wrap { align-items:flex-start; }.panel h2 { margin:0; font-size:16px; letter-spacing:-.25px; }.panel h2::before { content:""; display:inline-block; width:4px; height:16px; margin:0 8px -2px 0; border-radius:4px; background:var(--blue); }.panel-help { margin:4px 0 0; color:var(--muted); font-size:12px; }
.form-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px 16px; }.form-grid label,.total-inputs label { display:flex; flex-direction:column; gap:6px; color:#44596c; font-size:11px; font-weight:800; letter-spacing:.15px; }.form-grid input,.form-grid select,.filter-form input,.total-inputs input,.charge-table input { min-width:0; border:1px solid #c9d6e0; border-radius:6px; padding:9px 10px; color:var(--ink); background:#fbfdfe; font-size:13px; }.form-grid input:focus,.form-grid select:focus,.filter-form input:focus,.total-inputs input:focus,.charge-table input:focus { outline:3px solid #cceaff; border-color:var(--blue); background:#fff; }.checkbox-field { justify-content:end; flex-direction:row!important; align-items:center; padding-bottom:10px; font-size:13px!important; letter-spacing:0!important; }.checkbox-field input { min-width:auto; padding:0; }.form-actions { display:flex; align-items:end; grid-column:span 2; }
.button { border:1px solid transparent; border-radius:6px; padding:8px 13px; cursor:pointer; font-weight:750; white-space:nowrap; }.button:hover { transform:translateY(-1px); }.button:disabled { cursor:wait; opacity:.65; transform:none; }.button-primary { color:#fff; background:linear-gradient(180deg,#1d89d8,#126eb4); box-shadow:0 2px 5px rgba(20,121,201,.25); }.button-primary:hover { background:#0d66a9; }.button-secondary { border-color:#b8c9d6; color:#385267; background:#fff; }.button-secondary:hover { border-color:#8ea9bd; background:#f3f8fb; }.button-text { padding:4px 5px; color:#126da9; background:transparent; }.button-danger { padding:4px 5px; color:var(--error); background:transparent; }.button-large { min-width:164px; padding:11px 18px; font-size:15px; }.filter-form { display:flex; gap:8px; }.filter-form input { width:120px; padding:7px 9px; }
.table-wrap { overflow-x:auto; border:1px solid #e2eaf0; border-radius:8px; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th,td { padding:11px 10px; border-bottom:1px solid #e6edf2; text-align:left; } tr:last-child td { border-bottom:0; } th { color:#506779; background:#f4f8fb; font-size:11px; font-weight:800; letter-spacing:.2px; } td { font-size:13px; }.number { text-align:right; font-variant-numeric:tabular-nums; }.table-actions { text-align:center; }.clickable-row { cursor:pointer; }.clickable-row:hover td { background:var(--blue-soft); }.status { display:inline-block; border-radius:20px; padding:3px 9px; font-size:11px; font-weight:800; }.status-ok { color:var(--ok); background:var(--ok-soft); }.status-warn { color:var(--warn); background:var(--warn-soft); }.status-error { color:var(--error); background:var(--error-soft); }
.feedback { min-height:20px; margin:14px 0 0; color:var(--ok); font-weight:650; }.feedback-error { color:var(--error); }.empty-state { margin:20px 0 0; color:var(--muted); text-align:center; }.is-hidden { display:none!important; }.total-panel { display:flex; align-items:end; justify-content:space-between; }.total-panel h2 span { color:var(--muted); font-size:12px; font-weight:500; }.total-inputs { display:flex; gap:12px; }.total-inputs input { width:155px; }.charge-table input { width:100%; min-width:115px; padding:8px 9px; }.submit-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }.submit-bar .feedback { margin:0; }
.result-heading { display:flex; justify-content:space-between; align-items:flex-start; margin:36px 0 15px; }.result-heading p { margin:5px 0 0; }.result-meta { color:var(--muted); font-size:13px; }.result-panel { margin-bottom:0; }.checks,.summary { margin-top:25px; }.checks h2,.summary h2 { margin:0 0 10px; font-size:15px; }.check-row { display:grid; grid-template-columns:175px 1fr; padding:10px 11px; border-bottom:1px solid #e8edf0; }.check-row strong { color:#435a6d; }.status-text-ok { color:var(--ok); }.status-text-warn { color:var(--warn); }.status-text-error { color:var(--error); }.status-text-null { color:var(--muted); }.summary { padding:17px 18px; border:1px solid #cfe5f6; border-left:4px solid var(--blue); border-radius:7px; background:#f4faff; }.summary p { margin:0 0 8px; }.summary ul { margin:0; padding-left:20px; }.summary li { margin:6px 0; }.result-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:23px; }
.ocr-controls { display:flex; align-items:center; gap:10px; }.ocr-controls input[type="file"] { max-width:260px; color:#44596c; font-size:12px; }.ocr-preview { margin-top:12px; padding:10px 13px; border:1px solid #d6e3ed; border-radius:7px; background:#fbfdff; }.ocr-preview summary { cursor:pointer; color:#176ca8; font-weight:750; }.ocr-preview pre { max-height:220px; overflow:auto; margin:10px 0 0; white-space:pre-wrap; color:#506475; font:12px/1.55 ui-monospace,Consolas,monospace; }
/* 강조형 대시보드 테마 */
body { background:radial-gradient(circle at 5% -10%,#b6e3ff 0,transparent 30%),radial-gradient(circle at 100% 15%,#d8c5ff 0,transparent 29%),linear-gradient(145deg,#eef8ff 0,#f7f6ff 48%,#f5fbff 100%); }
.site-header { position:relative; overflow:hidden; border-bottom:1px solid rgba(152,213,255,.35); background:linear-gradient(105deg,#071d34 0,#104f87 58%,#6a44a5 130%); }.site-header::after { content:""; position:absolute; width:330px; height:330px; right:17%; top:-250px; border:48px solid rgba(109,204,255,.12); border-radius:50%; transform:rotate(25deg); pointer-events:none; }.brand,nav { position:relative; z-index:1; }.brand::before { border-color:#6ad0ff; background:linear-gradient(145deg,#0f528a,#8653c1); box-shadow:0 0 18px rgba(85,188,255,.45); color:#eafdff; }
.page-heading { position:relative; overflow:hidden; padding:28px 30px; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(239,249,255,.82)); box-shadow:0 16px 32px rgba(49,85,135,.11); }.page-heading::after { content:""; position:absolute; right:-35px; top:-45px; width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg,rgba(31,151,229,.25),rgba(143,85,204,.2)); filter:blur(1px); }.page-heading > * { position:relative; z-index:1; }.page-heading h1,.result-heading h1 { font-size:32px; background:linear-gradient(100deg,#06365e,#1479c9 55%,#7a43b5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.panel { border-color:rgba(210,225,237,.88); background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,253,255,.91)); box-shadow:0 14px 30px rgba(31,67,112,.08),inset 0 1px rgba(255,255,255,.9); }.panel:hover { border-color:#b5d8f2; box-shadow:0 18px 35px rgba(31,67,112,.12); }.panel h2::before { height:18px; background:linear-gradient(180deg,#2aa8f1,#7650bd); box-shadow:0 1px 5px rgba(46,138,222,.35); }
.button-primary { border-color:rgba(255,255,255,.35); background:linear-gradient(120deg,#138ee0,#176ac1 55%,#7642b2); box-shadow:0 7px 16px rgba(42,102,196,.28),inset 0 1px rgba(255,255,255,.26); }.button-primary:hover { background:linear-gradient(120deg,#0a76bd,#15549a 55%,#603292); box-shadow:0 10px 21px rgba(42,102,196,.34); }.button-secondary { background:linear-gradient(180deg,#fff,#edf6fc); }.button-large { border-radius:9px; }
.table-wrap { box-shadow:inset 0 1px rgba(255,255,255,.85); } th { background:linear-gradient(180deg,#eaf6ff,#f5f9fc); color:#315b7a; } tbody tr:nth-child(even) td { background:rgba(244,250,254,.5); }.status { border:1px solid currentColor; box-shadow:0 2px 7px rgba(20,40,60,.08); }.status-ok { background:linear-gradient(135deg,#eafff1,#dff5e8); }.status-warn { background:linear-gradient(135deg,#fff8e7,#ffedcb); }.status-error { background:linear-gradient(135deg,#fff1f1,#fce0e0); }
.summary { border-left-width:5px; border-image:linear-gradient(180deg,#1a9de4,#724bb6) 1; background:linear-gradient(120deg,#f2fbff,#faf7ff); box-shadow:0 8px 18px rgba(55,93,145,.07); }.result-heading { padding:5px 2px; }.result-heading .status { padding:7px 13px; font-size:13px; }
@media (max-width:900px) { .site-header { padding:0 16px; }.page-container { max-width:calc(100% - 32px); }.form-grid { grid-template-columns:repeat(3,1fr); }.brand span { display:none; }.page-heading { padding:22px; } }

/* Home dashboard */
.home-hero { position:relative; min-height:298px; margin-bottom:18px; padding:42px 46px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; border-radius:18px; color:#fff; background:linear-gradient(118deg,#06213b 0%,#0d5f9b 54%,#7144a3 100%); box-shadow:0 22px 40px rgba(34,67,121,.22); }.home-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 77% 26%,rgba(122,222,255,.34),transparent 15%),radial-gradient(circle at 90% 98%,rgba(235,168,255,.25),transparent 24%); }.home-hero > * { position:relative; z-index:1; }.home-hero .eyebrow { color:#93dcff; }.home-hero h1 { max-width:630px; margin:0; font-size:40px; line-height:1.13; letter-spacing:-1.5px; }.home-hero p:not(.eyebrow) { max-width:520px; margin:14px 0 0; color:#d9efff; font-size:15px; }.hero-actions { display:flex; gap:10px; margin-top:25px; }.hero-actions .button-secondary { border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.12); }.hero-orb { width:170px; height:170px; margin-right:52px; display:grid; place-content:center; text-align:center; border:1px solid rgba(225,250,255,.5); border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(145,225,255,.64),rgba(59,100,206,.3) 48%,rgba(111,62,165,.22)); box-shadow:0 0 0 17px rgba(132,214,255,.08),0 0 0 35px rgba(166,103,255,.06); }.hero-orb span { font-size:46px; font-weight:900; letter-spacing:-3px; }.hero-orb small { font-size:10px; font-weight:800; letter-spacing:2.4px; color:#daf4ff; }.home-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:0 0 30px; }.overview-card { min-height:124px; padding:20px 23px; border:1px solid rgba(210,225,237,.85); border-radius:13px; background:rgba(255,255,255,.88); box-shadow:0 8px 21px rgba(31,67,112,.07); }.overview-card span,.overview-card small { display:block; color:#607386; font-size:12px; }.overview-card strong { display:block; margin:4px 0; color:#104b7b; font-size:31px; line-height:1.15; letter-spacing:-1px; }.overview-card-highlight { border-color:#cad9ff; background:linear-gradient(120deg,#f0f8ff,#f7f1ff); }.overview-card-highlight strong { color:#66409e; font-size:24px; }.quick-actions { margin:0 0 33px; }.section-kicker h2,.workspace-title h2 { margin:0; color:#173852; font-size:23px; letter-spacing:-.7px; }.quick-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:15px; }.quick-action-card { min-height:190px; padding:21px; border:1px solid #d7e5ef; border-radius:13px; color:inherit; text-decoration:none; background:rgba(255,255,255,.85); box-shadow:0 8px 18px rgba(31,67,112,.06); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.quick-action-card:hover { transform:translateY(-4px); border-color:#7fc0ec; box-shadow:0 17px 28px rgba(31,88,143,.14); }.quick-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,#1493df,#7150bb); font-size:11px; font-weight:850; }.quick-action-card strong { display:block; margin:13px 0 6px; color:#173f60; font-size:16px; }.quick-action-card p { margin:0; color:#607386; font-size:12px; line-height:1.6; }.quick-action-card em { display:block; margin-top:14px; color:#176fb1; font-size:12px; font-style:normal; font-weight:800; }.validation-workspace { scroll-margin-top:24px; }.workspace-title { margin:0 0 16px; padding-top:8px; }.workspace-title p:not(.eyebrow) { margin:6px 0 0; color:#607386; }
@media (max-width:900px) { .home-hero { min-height:0; padding:31px 28px; }.home-hero h1 { font-size:32px; }.hero-orb { display:none; }.home-overview,.quick-action-grid { grid-template-columns:1fr; }.hero-actions { flex-wrap:wrap; } }