/* 중헌제약 디자인 시스템
   joonghun.com 에서 추출한 토큰을 그대로 사용한다.
   --jh-green #72bf44 / --jh-red #e60012 / --primary #030213 / --radius .625rem / Pretendard */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  color-scheme: light;
  --jh-green:#72bf44; --jh-green-ink:#3f7d1f;
  --jh-red:#e60012;   --jh-red-ink:#c1000f;
  --jh-black:#000;    --jh-gray:#717182;

  --background:#f8f9fc;
  --card:#ffffff;
  --foreground:#141416;
  --muted:#ececf0;
  --muted-foreground:#5b5b6b;
  --border:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.18);
  --primary:#030213; --primary-foreground:#ffffff;
  --accent:#e9ebef;  --accent-foreground:#030213;

  --good:#3f7d1f; --warn:#fab219; --warn-ink:#8a6100; --danger:#c1000f;
  --radius:.625rem; --radius-lg:1rem;
  --shadow-sm:0 1px 2px rgba(16,16,20,.04);
  --shadow:0 1px 3px rgba(16,16,20,.05), 0 6px 20px rgba(16,16,20,.05);
  --header-h:60px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --background:#0d0d0f; --card:#1a1a1d; --foreground:#f2f2f4;
    --muted:#26262b; --muted-foreground:#a1a1ad;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20);
    --primary:#f2f2f4; --primary-foreground:#0d0d0f;
    --accent:#26262b; --accent-foreground:#f2f2f4;
    --jh-green-ink:#8ed368; --good:#8ed368; --danger:#f2555a; --warn-ink:#e0a63a;
    --shadow-sm:none; --shadow:none;
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  background:var(--background); color:var(--foreground);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; word-break:keep-all;
}
h1,h2,h3,h4{margin:0; line-height:1.35; letter-spacing:-.01em; font-weight:650}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:var(--foreground)}
table{border-collapse:collapse}
.mono{font-variant-numeric:tabular-nums}
.mut{color:var(--muted-foreground)}
.small{font-size:.85rem}
.tiny{font-size:.78rem}
.hidden{display:none !important}
.grow{flex:1}
.row{display:flex; align-items:center; gap:10px}
.wrap-row{flex-wrap:wrap}

/* ===== CI ===== */
svg.ci{width:30px;height:30px;flex:none}
.ci-lockup{display:flex;align-items:center;gap:9px;color:var(--foreground)}
.ci-word{text-align:left;font-weight:800;letter-spacing:-.01em;line-height:1.05;font-size:.95rem}
.ci-word small{display:block;font-weight:500;color:var(--muted-foreground);font-size:.56rem;letter-spacing:.05em}

/* ===== 헤더 ===== */
.appbar{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:18px; padding:0 22px;
}
.appbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.appbar nav{display:flex;gap:2px}
.appbar nav a{
  padding:7px 14px; border-radius:99px; font-size:.88rem; font-weight:500;
  color:var(--muted-foreground); text-decoration:none; white-space:nowrap;
}
.appbar nav a:hover{background:var(--accent); color:var(--accent-foreground)}
.appbar nav a.on{background:var(--accent); color:var(--accent-foreground); font-weight:650}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 20px; border-radius:99px; font-size:.88rem; font-weight:600;
  border:1px solid var(--border); background:var(--card); color:var(--foreground);
  transition:filter .12s, border-color .12s; white-space:nowrap;
}
.btn:hover{filter:brightness(.97)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--primary); color:var(--primary-foreground); border-color:transparent}
.btn.brand{background:var(--jh-green); color:#0b2b00; border-color:transparent}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent)}
.btn.sm{padding:6px 14px; font-size:.82rem}
.btn.lg{padding:12px 30px; font-size:.95rem}
.btn.block{width:100%}

/* ===== 폼 ===== */
.field{display:block}
.field > label{display:block; font-size:.82rem; font-weight:600; color:var(--muted-foreground); margin-bottom:5px}
.input, input[type=text], input[type=password], input[type=search], select, textarea{
  width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--card); outline:none; transition:border-color .12s, box-shadow .12s;
}
.input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--jh-green); box-shadow:0 0 0 3px color-mix(in srgb, var(--jh-green) 22%, transparent);
}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}

/* ===== 카드 ===== */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px}
.card + .card{margin-top:16px}
.card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.card-h h2{font-size:1.05rem}
.card-h .sub{font-size:.82rem; color:var(--muted-foreground); margin-top:3px}
.section-t{font-size:.9rem; font-weight:650; margin:20px 0 10px}

/* ===== 배지 ===== */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600;
  padding:3px 10px; border-radius:99px; background:var(--muted); color:var(--muted-foreground); white-space:nowrap}
.badge.green{background:color-mix(in srgb, var(--jh-green) 18%, transparent); color:var(--jh-green-ink)}
.badge.red{background:color-mix(in srgb, var(--jh-red) 12%, transparent); color:var(--jh-red-ink)}
.badge.warn{background:color-mix(in srgb, var(--warn) 24%, transparent); color:var(--warn-ink)}
.badge.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}

/* ===== 통계 타일 ===== */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.tile{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px}
.tile .k{font-size:.78rem; color:var(--muted-foreground)}
.tile .v{font-size:1.7rem; font-weight:680; margin-top:2px; letter-spacing:-.02em}
.tile .v.sm{font-size:1.15rem; margin-top:6px}
.tile .d{font-size:.75rem; color:var(--muted-foreground); margin-top:4px}

/* ===== 표 ===== */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius)}
table.tbl{width:100%; font-size:.86rem; min-width:640px}
table.tbl th{
  text-align:left; font-weight:600; color:var(--muted-foreground); white-space:nowrap;
  padding:10px 12px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--muted) 45%, transparent);
  position:sticky; top:0;
}
table.tbl th.sortable{cursor:pointer; user-select:none}
table.tbl th.sortable:hover{color:var(--foreground)}
table.tbl th.on::after{content:" ▾"; color:var(--jh-green-ink)}
table.tbl th.on.asc::after{content:" ▴"}
table.tbl td{padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr.click{cursor:pointer}
table.tbl tbody tr.click:hover td{background:color-mix(in srgb, var(--jh-green) 7%, transparent)}
table.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
td.hi{background:color-mix(in srgb, var(--jh-green) 15%, transparent); font-weight:650}
td.lo{background:color-mix(in srgb, var(--jh-red) 9%, transparent); color:var(--jh-red-ink)}
.empty{padding:40px 20px; text-align:center; color:var(--muted-foreground); font-size:.9rem}

/* ===== 막대 ===== */
.bar{display:grid; grid-template-columns:118px 1fr 92px; gap:12px; align-items:center; margin:8px 0}
.bar .bl{font-size:.85rem; color:var(--muted-foreground); text-align:right}
.bar .bt{height:14px; background:color-mix(in srgb, var(--jh-green) 15%, var(--muted)); border-radius:4px; overflow:hidden}
.bar .bf{height:100%; background:var(--jh-green-ink); border-radius:0 4px 4px 0}
.bar .bv{font-size:.85rem; font-variant-numeric:tabular-nums}
.bar .bv small{color:var(--muted-foreground); margin-left:4px}
@media(max-width:560px){.bar{grid-template-columns:84px 1fr 76px; gap:8px}}

/* 히스토그램 */
.hist{display:flex; align-items:stretch; gap:5px; height:150px; padding-top:10px}
/* 막대 높이를 %로 주려면 부모에 확정된 높이가 있어야 한다 */
.hist .hb{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px}
.hist .hb i{display:block; width:100%; background:var(--jh-green-ink); border-radius:4px 4px 0 0; min-height:3px; flex:none}
.hist .hb span{font-size:.68rem; color:var(--muted-foreground); white-space:nowrap}

/* ===== 알림 ===== */
.note{border:1px solid var(--border); border-left:3px solid var(--jh-green); border-radius:var(--radius);
  padding:12px 16px; font-size:.86rem; color:var(--muted-foreground); line-height:1.7}
.note.warn{border-left-color:var(--warn)}
.note.danger{border-left-color:var(--danger)}
.note b{color:var(--foreground)}

/* ===== 모달 ===== */
.modal-bg{position:fixed; inset:0; background:rgba(3,2,19,.45); display:none; align-items:center; justify-content:center; z-index:100; padding:16px}
.modal-bg.on{display:flex}
.modal{background:var(--card); border-radius:var(--radius-lg); padding:24px 26px; max-width:560px; width:100%; box-shadow:0 16px 48px rgba(0,0,0,.28); max-height:88vh; overflow:auto}
.modal h3{font-size:1.05rem; margin-bottom:8px}
.modal .mrow{display:flex; gap:8px; justify-content:flex-end; margin-top:20px}

/* ===== 토스트 ===== */
#toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--primary-foreground);
  padding:10px 22px; border-radius:99px; font-size:.86rem; opacity:0; transition:opacity .2s; pointer-events:none; z-index:200; max-width:90vw; text-align:center}
#toast.on{opacity:.96}

/* ===== 레이아웃 ===== */
.page{max-width:1180px; margin:0 auto; padding:24px 22px 60px}
.page.narrow{max-width:760px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* 로딩 */
.spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--jh-green);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}