/* 해마물류 업무시스템 — 공통 스타일 (쉬움 우선: 큰 글씨·큰 버튼·넉넉한 여백) */
:root{
  --pri:#0ea5e9; --pri-d:#0284c7; --ok:#10b981; --warn:#f59e0b; --dan:#ef4444;
  --bg:#f1f5f9; --surf:#fff; --line:#e2e8f0; --txt:#1e293b; --mut:#64748b;
  --r:12px; --sh:0 1px 3px rgba(15,23,42,.07); --sh2:0 8px 24px rgba(15,23,42,.14);
  --fs:15px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--txt); font-size:var(--fs); line-height:1.55}
a{color:var(--pri); text-decoration:none}

/* ── 상단바 ── */
.topbar{background:var(--pri); color:#fff; padding:0 18px; height:56px; display:flex;
  align-items:center; gap:18px; position:sticky; top:0; z-index:100; box-shadow:var(--sh)}
.topbar .logo{font-weight:800; font-size:1.12rem; letter-spacing:-.4px; white-space:nowrap}
.topbar .sp{flex:1}
.topbar .me{font-size:.92rem; opacity:.95}
.topbar .tb-btn{background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:8px;
  padding:8px 13px; font-size:.87rem; font-weight:700; cursor:pointer}
.topbar .tb-btn:hover{background:rgba(255,255,255,.28)}

/* ── 메뉴 ── */
.nav{background:var(--surf); border-bottom:1px solid var(--line); padding:0 12px;
  display:flex; gap:2px; overflow-x:auto; position:sticky; top:56px; z-index:99}
.nav a{padding:13px 17px; font-weight:700; color:var(--mut); border-bottom:3px solid transparent;
  white-space:nowrap; font-size:.97rem}
.nav a:hover{color:var(--pri); background:#f8fafc}
.nav a.on{color:var(--pri); border-bottom-color:var(--pri)}

/* ── 본문 ── */
.wrap{padding:20px; max-width:1720px; margin:0 auto}
.pagehead{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.pagehead h1{font-size:1.32rem; font-weight:800; margin:0; letter-spacing:-.4px}
.pagehead .sub{color:var(--mut); font-size:.9rem}
.card{background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:18px; margin-bottom:16px}
.card > h2{font-size:1.02rem; margin:0 0 14px; font-weight:800}

/* ── 버튼 (큼직하게) ── */
.btn{border:1px solid var(--line); background:#fff; color:var(--txt); border-radius:10px;
  padding:11px 17px; font-size:.95rem; font-weight:700; cursor:pointer; display:inline-flex;
  align-items:center; gap:7px; transition:.12s}
.btn:hover{background:#f8fafc; transform:translateY(-1px)}
.btn:active{transform:none}
.btn-p{background:var(--pri); border-color:var(--pri); color:#fff}
.btn-p:hover{background:var(--pri-d)}
.btn-g{background:var(--ok); border-color:var(--ok); color:#fff}
.btn-d{background:#fef2f2; border-color:#fecaca; color:var(--dan)}
.btn-lg{padding:14px 26px; font-size:1.03rem}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btnbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

/* ── 폼 ── */
.frm{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:15px}
.fld{display:flex; flex-direction:column; gap:6px}
.fld label{font-weight:700; font-size:.9rem; color:#334155; display:flex; align-items:center; gap:6px}
.fld .req{color:var(--dan)}
.fld input,.fld select,.fld textarea{border:1.5px solid #cbd5e1; border-radius:9px; padding:11px 13px;
  font-size:.97rem; font-family:inherit; background:#fff; width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0; border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(14,165,233,.14)}
.fld input:disabled,.fld select:disabled{background:#f1f5f9; color:var(--mut)}
.fld .hint{font-size:.82rem; color:var(--mut)}
.fld.bad input,.fld.bad select{border-color:var(--dan); background:#fff5f5}
.fld .err{font-size:.85rem; color:var(--dan); font-weight:700; display:none}
.fld.bad .err{display:block}

/* ── 도움말 물음표 ── */
.hlp{width:19px; height:19px; border-radius:50%; border:0; background:#cbd5e1; color:#fff;
  font-weight:900; font-size:.76rem; cursor:pointer; line-height:19px; padding:0; flex-shrink:0}
.hlp:hover{background:var(--pri)}

/* ── 모달 ── */
.ov{position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center;
  justify-content:center; z-index:500; padding:18px}
.ov.on{display:flex}
.md{background:#fff; border-radius:16px; box-shadow:var(--sh2); width:100%; max-width:640px;
  max-height:88vh; display:flex; flex-direction:column; overflow:hidden}
.md.wide{max-width:1100px}
.md-h{padding:17px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; font-weight:800; font-size:1.05rem}
.md-h .x{border:0; background:0; font-size:1.5rem; color:#94a3b8; cursor:pointer; line-height:1}
.md-b{padding:20px; overflow:auto; flex:1}
.md-f{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end}
.md-b .helptext{font-size:1.02rem; line-height:1.75; color:#334155}

/* ── 표 ── */
.tblwrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
table.t{width:100%; border-collapse:collapse; font-size:.93rem}
table.t th{background:#f8fafc; padding:12px 11px; font-weight:700; color:#475569;
  border-bottom:2px solid var(--line); text-align:left; position:sticky; top:0; z-index:5; white-space:nowrap}
table.t td{padding:11px; border-bottom:1px solid #f1f5f9; vertical-align:middle}
table.t tbody tr:hover{background:#f8fafc; cursor:pointer}
table.t td.num,table.t th.num{text-align:right; font-variant-numeric:tabular-nums}
table.t .empty{text-align:center; padding:52px 20px; color:var(--mut)}

/* ── 배지 ── */
.bdg{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:800}
.bdg-gray{background:#f1f5f9; color:#64748b} .bdg-blue{background:#e0f2fe; color:#0369a1}
.bdg-green{background:#dcfce7; color:#15803d} .bdg-amber{background:#fef3c7; color:#b45309}
.bdg-red{background:#fee2e2; color:#b91c1c}

/* ── 안내 박스 ── */
.tip{background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:13px 15px;
  font-size:.91rem; color:#1e40af; margin-bottom:15px; display:flex; gap:9px; align-items:flex-start}
.tip b{font-weight:800}
.warnbox{background:#fffbeb; border:1px solid #fde68a; color:#92400e}
.errbox{background:#fef2f2; border:1px solid #fecaca; color:#b91c1c}

/* ── 쉬운/전체 모드 ── */
.modebar{display:inline-flex; background:#e2e8f0; border-radius:10px; padding:3px; gap:2px}
.modebar button{border:0; background:0; padding:7px 15px; border-radius:8px; font-weight:800;
  font-size:.87rem; color:var(--mut); cursor:pointer}
.modebar button.on{background:#fff; color:var(--pri); box-shadow:var(--sh)}
body:not(.full) .adv{display:none !important}

/* ── 단계 마법사 ── */
.steps{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.step{flex:1; min-width:130px; padding:12px 14px; border-radius:10px; background:#f1f5f9;
  border:2px solid transparent; font-weight:700; font-size:.9rem; color:var(--mut)}
.step.on{background:#e0f2fe; border-color:var(--pri); color:#0369a1}
.step.done{background:#dcfce7; color:#15803d}
.step .n{display:inline-block; width:21px; height:21px; border-radius:50%; background:#cbd5e1;
  color:#fff; text-align:center; line-height:21px; font-size:.76rem; margin-right:7px}
.step.on .n{background:var(--pri)} .step.done .n{background:var(--ok)}

/* ── 토스트 ── */
#toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:900;
  display:flex; flex-direction:column; gap:8px; align-items:center}
.tst{background:#1e293b; color:#fff; padding:13px 22px; border-radius:11px; font-weight:700;
  font-size:.94rem; box-shadow:var(--sh2); animation:tin .25s}
.tst.ok{background:#065f46} .tst.err{background:#991b1b}
@keyframes tin{from{opacity:0;transform:translateY(12px)}}

/* ── 로그인 ── */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0ea5e9,#0369a1); padding:20px}
.login-box{background:#fff; border-radius:18px; box-shadow:var(--sh2); padding:38px 34px; width:100%; max-width:400px}
.login-box h1{text-align:center; font-size:1.4rem; margin:0 0 6px; font-weight:800}
.login-box .s{text-align:center; color:var(--mut); font-size:.9rem; margin-bottom:26px}

@media(max-width:760px){
  .wrap{padding:13px} .frm{grid-template-columns:1fr} .topbar .me{display:none}
  .pagehead h1{font-size:1.15rem}
}