:root{
  --bg:#0a0e17; --bg-elev:#0f1522;
  --panel:rgba(24,32,48,.66); --panel-hi:rgba(38,50,74,.5);
  --border:rgba(120,160,210,.14); --border2:rgba(120,160,210,.26);
  --glow:rgba(56,225,201,.35);
  --text:#eef3fb; --muted:#93a1ba; --dim:#657189;
  --aqua:#3fe6cf; --aqua-d:#0fb9a4; --aqua-soft:rgba(63,230,207,.14);
  --amber:#ffc24b; --amber-soft:rgba(255,194,75,.14);
  --red:#ff7b7b;
  --shadow:0 12px 40px rgba(0,0,0,.5);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(63,230,207,.14), transparent 60%),
    radial-gradient(900px 560px at -6% 4%, rgba(255,194,75,.10), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(80,120,255,.10), transparent 60%),
    linear-gradient(180deg,#0b1019,#0a0e17 60%);
  background-attachment:fixed;
  color:var(--text);
  font:15px/1.55 -apple-system,"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--aqua);text-decoration:none;transition:.15s}
a:hover{color:#7ff2e2}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:26px;padding:14px 28px;
  background:linear-gradient(180deg,rgba(15,21,34,.9),rgba(15,21,34,.55));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;box-shadow:0 4px 24px rgba(0,0,0,.3)}
.brand{font-weight:800;font-size:16px;letter-spacing:-.2px;
  background:linear-gradient(100deg,#fff,#8ff4e6 55%,var(--aqua));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand:hover{-webkit-text-fill-color:transparent;filter:brightness(1.1)}
.topbar nav{display:flex;gap:6px}
.topbar nav a{color:var(--muted);padding:7px 14px;border-radius:10px;font-weight:600;font-size:14px}
.topbar nav a:hover{color:var(--text);background:var(--aqua-soft)}

/* ---------- layout ---------- */
.container{max-width:1160px;margin:0 auto;padding:30px 24px 60px}
h1{font-size:25px;font-weight:800;letter-spacing:-.4px;margin:6px 0 20px;
  display:flex;align-items:center;gap:12px}

/* ---------- cards ---------- */
.card{position:relative;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;margin-bottom:20px;
  backdrop-filter:blur(16px);box-shadow:var(--shadow);
  transition:border-color .2s, transform .2s}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--radius);
  padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.14),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}

.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.r{text-align:right;font-variant-numeric:tabular-nums}
.strong{font-weight:800;color:var(--aqua)}
.req{color:var(--amber)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:600;
  font-family:inherit;background:rgba(120,160,210,.1);color:var(--text);
  border:1px solid var(--border2);transition:.16s;white-space:nowrap}
.btn:hover{background:rgba(120,160,210,.2);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,#5cf0da,var(--aqua-d));color:#042220;
  border:none;font-weight:800;box-shadow:0 6px 20px rgba(15,185,164,.35)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 8px 26px rgba(15,185,164,.5)}
.btn.ghost{background:transparent;border-color:var(--border2)}
.btn.ghost:hover{background:var(--aqua-soft)}
.btn.danger{background:rgba(255,123,123,.12);border-color:rgba(255,123,123,.4);color:var(--red)}
.btn.danger:hover{background:rgba(255,123,123,.2)}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:9px}

/* ---------- 주문 등록 (소스 카드) ---------- */
.src-card{padding:20px 22px}
.src-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.src-title{font-size:16px;font-weight:800;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.src-action{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.or-divider{display:flex;align-items:center;text-align:center;color:var(--dim);
  font-size:12px;font-weight:700;margin:2px 0 18px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.or-divider span{padding:0 14px}
code{background:rgba(120,160,210,.14);padding:1px 6px;border-radius:5px;font-size:12px}

/* ---------- upload ---------- */
.upload-drop{border:1.5px dashed var(--border2);border-radius:14px;padding:34px;
  text-align:center;margin:16px 0;background:
    radial-gradient(400px 120px at 50% 0%, var(--aqua-soft), transparent);
  transition:.2s}
.upload-drop:hover{border-color:var(--aqua);background:radial-gradient(500px 160px at 50% 0%,rgba(63,230,207,.16),transparent)}

/* ---------- tables ---------- */
table.grid{width:100%;border-collapse:separate;border-spacing:0;margin-top:14px;font-size:13.5px}
table.grid th,table.grid td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
table.grid thead th{color:var(--dim);font-weight:700;text-align:left;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;background:rgba(120,160,210,.04);
  position:sticky;top:60px;backdrop-filter:blur(6px)}
table.grid thead th:first-child{border-top-left-radius:10px}
table.grid thead th:last-child{border-top-right-radius:10px}
table.grid tbody tr{transition:.12s}
table.list tbody tr:hover td{background:var(--aqua-soft)}
/* 이력 목록: 헤더·데이터 가운데 정렬 */
table.list thead th,table.list tbody td{text-align:center}
table.grid tfoot td{border-top:1px solid var(--border2);border-bottom:none;
  padding-top:14px;font-size:14px;background:rgba(63,230,207,.05)}
td.cn{max-width:340px}
.cn-zh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c3cee0}
.cn-ko{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;
  margin-top:3px;color:var(--aqua)}
.thumb-cell{width:56px;text-align:center}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--border2);
  background:var(--bg-elev);transition:transform .15s;cursor:zoom-in}
.thumb:hover{transform:scale(2.4);border-color:var(--aqua);position:relative;z-index:5;
  box-shadow:0 8px 30px rgba(0,0,0,.6)}
.thumb-none{color:var(--dim)}
tr.unmapped td{background:var(--amber-soft)}
tr.unmapped:hover td{background:rgba(255,194,75,.2)}

/* ---------- inputs ---------- */
input,select{background:var(--bg-elev);border:1px solid var(--border2);color:var(--text);
  border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;width:100%;transition:.15s}
input:focus,select:focus{outline:none;border-color:var(--aqua);
  box-shadow:0 0 0 3px var(--aqua-soft)}
input::placeholder{color:var(--dim)}
input[type=file]{border:none;padding:0;width:auto;color:var(--muted)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--aqua)}
/* 숫자 입력 스피너(위아래 화살표) 제거 — 오조작 방지 */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.pn{padding:7px 10px;font-size:13px;min-width:140px}
input.pn.need{border-color:var(--amber);background:var(--amber-soft)}
input.pn.need:focus{box-shadow:0 0 0 3px var(--amber-soft)}

/* ---------- rate-mode toggle ---------- */
.rate-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.seg{display:inline-flex;background:var(--bg-elev);border:1px solid var(--border2);
  border-radius:10px;padding:3px;gap:2px}
.seg label{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s}
.seg label:has(input:checked){background:var(--aqua-soft);color:var(--aqua)}
.seg input{width:auto;height:14px}
.hint{display:block;margin-top:4px;min-height:16px;color:var(--aqua)!important}

.inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0;align-items:start}
.inputs label[hidden]{display:none}
/* 입력 라벨: 블록 배치 → 텍스트와 * 가 한 줄, 입력칸은 아래 줄로 (열 정렬 어긋남 방지) */
.inputs label{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.inputs label > input,.inputs label > select{margin-top:6px}
.filters label{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--muted)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px}
.chk{display:flex;align-items:center;gap:9px;color:var(--text);font-size:14px;font-weight:500}
.chk select{width:auto}

/* ---------- order entry card ---------- */
.order-card{border-left:none;overflow:hidden}
.order-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--aqua),var(--aqua-d));border-radius:3px}
.order-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:6px}
.ono{font-weight:800;font-size:17px;margin-right:8px}
.cny-check{font-size:14px}
.cny-check b{color:var(--amber);font-size:16px}

/* ---------- filters ---------- */
.filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.filters select,.filters input{width:auto;min-width:130px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;vertical-align:middle;letter-spacing:.2px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.badge.pending{background:var(--amber-soft);color:var(--amber);border:1px solid rgba(255,194,75,.4)}
.badge.ok{background:var(--aqua-soft);color:var(--aqua);border:1px solid rgba(63,230,207,.4)}

/* ---------- alerts ---------- */
.alert{padding:13px 16px;border-radius:12px;margin:14px 0;font-size:14px;font-weight:500}
.alert.error{background:rgba(255,123,123,.12);border:1px solid rgba(255,123,123,.4);color:#ffbdbd}
.alert.warn{background:var(--amber-soft);border:1px solid rgba(255,194,75,.4);color:var(--amber)}

.export{display:flex;gap:10px;align-items:center}

/* 지출결의서 요약 */
.expense-box{width:100%;min-height:160px;margin-top:10px;resize:vertical;
  font:13px/1.6 "Consolas","Malgun Gothic",monospace;white-space:pre;
  background:var(--bg-elev);border:1px solid var(--border2);border-radius:10px;
  padding:12px 14px;color:var(--text)}
.expense-box:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px var(--aqua-soft)}

/* empty state */
td.center.muted{padding:40px 12px;font-size:14px}

@media(max-width:760px){
  .inputs{grid-template-columns:repeat(2,1fr)}
  td.cn{max-width:150px}
  .container{padding:18px 14px 40px}
  table.grid thead th{top:56px}
}