/* 처방 인센티브 웹앱 모양. 닥스차트(apps/emr/web/css/app.css)와 같은 값: 12px 글자, 평평한 테두리, 둥근 모서리와 그림자 없음 */
:root {
  --bg: #e8ecf2; --panel: #ffffff; --line: #b9c2d0; --line-soft: #d9dee7; --head: #dfe5ee;
  --text: #1c2430; --muted: #68717f; --blue: #2f5fa8; --blue-soft: #dbe6f6; --sel: #fde3c8; --hover: #f3f6fa;
  --red: #c0392b; --green: #2e7d4f; --orange: #c7743a; --yellow: #fff6c2;
  --btn: #eef1f6; --btn-line: #9aa5b6; --primary: #35507f; --title: #24365a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 12px/1.45 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); }
.btn { background: var(--btn); border: 1px solid var(--btn-line); padding: 2px 9px; cursor: pointer; white-space: nowrap; min-height: 24px; border-radius: 0; }
.btn:hover { background: #e1e7f0; }
.btn:disabled { color: #9aa1ad; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: #2a406a; }
.btn.sm { padding: 0 6px; min-height: 20px; font-size: 11px; }
.btn.on { background: var(--blue-soft); border-color: var(--blue); font-weight: 700; }
.btn.warn { color: var(--red); }
.inp { border: 1px solid var(--line); background: #fff; padding: 2px 5px; min-height: 24px; border-radius: 0; }
.inp:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.inp.num { text-align: right; }
.row { display: flex; gap: 6px; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 0; min-width: 0; }
.right { margin-left: auto; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.red { color: var(--red); } .green { color: var(--green); } .blue { color: var(--blue); } .orange { color: var(--orange); }
.bold { font-weight: 700; }
.tag { display: inline-block; border: 1px solid var(--line); padding: 0 5px; font-size: 11px; background: #f6f7f9; white-space: nowrap; }
.tag.blue { border-color: #a9c0e6; background: var(--blue-soft); }
.tag.green { border-color: #a5d0b6; background: #e6f4ea; }
.tag.orange { border-color: #e6c19e; background: #fdf0e2; color: #8a4b12; }
.tag.red { border-color: #e0a59e; background: #fbe9e7; color: var(--red); }
.err { color: var(--red); padding: 4px 0; }

/* 틀 */
.top { background: var(--title); color: #fff; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 11px; }
.top .name { font-weight: 700; font-size: 12px; }
.top .btn { background: transparent; color: #fff; border-color: #6d7ea0; min-height: 20px; font-size: 11px; padding: 0 6px; }
.layout { display: flex; min-height: calc(100vh - 30px); }
.nav { width: 170px; flex: none; background: #f4f6f9; border-right: 1px solid var(--line); padding: 6px 0; }
.nav a { display: block; padding: 3px 12px; color: var(--text); text-decoration: none; }
.nav a:hover { background: var(--hover); }
.nav a.on { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.nav .grp { color: var(--muted); font-size: 11px; padding: 8px 12px 2px; }
.main { flex: 1; min-width: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; }
.bar h1 { font-size: 13px; margin: 0 8px 0 0; }

/* 묶음 */
.panel { background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--head); border-bottom: 1px solid var(--line); min-height: 26px; }
.panel-title { font-weight: 700; }
.panel-note { color: var(--muted); font-size: 11px; }
.panel-body { padding: 6px; }
.panel-body.flush { padding: 0; }
.two { display: flex; gap: 6px; align-items: flex-start; }
.two > .side { width: 430px; flex: none; }
.two > .grow { min-width: 0; }
.status { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 6px; }
.status span b { margin-left: 4px; }

/* 표 */
.tbl-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; }
.grid th, .grid td { border: 1px solid var(--line-soft); padding: 3px 5px; height: 24px; vertical-align: middle; }
@media (min-width: 761px) { .grid td:nth-child(-n+4) { white-space: nowrap; } }
.grid th { background: #eef1f5; font-weight: 700; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.grid tbody tr:hover { background: var(--hover); }
.grid tr.sel { background: var(--sel) !important; }
.grid tr.click { cursor: pointer; }
.grid tfoot td { background: #f4f6f9; font-weight: 700; }
.grid .inp { min-height: 22px; padding: 1px 4px; }
.scroll { max-height: calc(100vh - 210px); overflow: auto; }

/* 처방 입력 */
.form { display: grid; grid-template-columns: 92px 1fr; gap: 5px 8px; align-items: center; }
.form .lbl { color: #3a4352; white-space: nowrap; }
.form .full { grid-column: 1 / -1; }
.picker { position: relative; }
.picker .list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--line); max-height: 260px; overflow: auto; }
.picker .list div { padding: 3px 6px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.picker .list div:hover, .picker .list div.hi { background: var(--blue-soft); }
.prod-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.prod-btns .btn { min-height: 22px; padding: 0 6px; font-size: 11px; }
.prod-btns .btn .p { color: var(--muted); margin-left: 3px; }

/* 막대 */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 4px 0 0; border-bottom: 1px solid var(--line); }
.bars div { flex: 1; background: #7f9bc8; min-width: 3px; position: relative; }
.bars div:hover { background: var(--blue); }
.bars-x { display: flex; gap: 2px; font-size: 10px; color: var(--muted); }
.bars-x span { flex: 1; text-align: center; overflow: hidden; }

/* 로그인 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login { width: 340px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); }
.login .panel-head { background: var(--title); color: #fff; min-height: 32px; }
.login form { padding: 14px; display: grid; gap: 8px; }
.login .inp { width: 100%; min-height: 32px; font-size: 14px; }
.login .btn { min-height: 34px; font-size: 13px; }

/* 대화 상자 */
.dlg-back { position: fixed; inset: 0; background: rgba(20, 28, 40, .35); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.dlg { background: #fff; border: 1px solid var(--line); width: 640px; max-width: 100%; max-height: 90vh; overflow: auto; }

@media (max-width: 760px) {
  body { font-size: 13px; }
  .top { height: auto; flex-wrap: wrap; padding: 4px 8px; gap: 4px 8px; }
  .top .sub { display: none; }
  .top .right { margin-left: 0; }
  .layout { display: block; }
  .nav { width: auto; border-right: 0; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; padding: 0; }
  .nav a { white-space: nowrap; padding: 8px 10px; }
  .nav .grp { display: none; }
  .two { display: block; }
  .two > .side { width: auto; margin-bottom: 6px; }
  .scroll { max-height: none; }
  .grid th, .grid td { height: 30px; }
  .hide-sm { display: none; }
  .btn { min-height: 30px; }
  .inp { min-height: 30px; }
}
@media print {
  .top, .nav, .no-print { display: none !important; }
  .dlg-back { position: static; background: none; }
  .dlg { border: 0; width: auto; max-height: none; }
}