/* 경기케미칼 ERP — sellka 화면 배치와 색을 따른 자체 스타일 */
:root {
  --side: #2a3f54; --side-dark: #23364a; --accent: #33ccc8; --ink: #73879c; --head: rgba(52, 73, 94, .94);
  --blue: #518dc9; --teal: #33c5c5; --orange: #f0ad4e; --red: #d9534f; --line: #e6e9ed; --bg: #f7f7f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.5 "Helvetica Neue", Roboto, Arial, "Malgun Gothic", "맑은 고딕", sans-serif; color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }

/* 왼쪽 메뉴 */
.side { position: fixed; left: 0; top: 0; bottom: 0; width: 230px; background: var(--side); overflow-y: auto; z-index: 20; }
.logo { display: block; background: #fff; text-align: center; height: 170px; padding: 8px 10px; color: #4b5f71; }
.logo img { display: block; width: 190px; height: 154px; object-fit: contain; margin: 0 auto; }
.logo-mark { display: block; font-size: 44px; color: #4f7f95; line-height: 1; margin-bottom: 6px; }
.logo-en { display: block; font-size: 20px; letter-spacing: .3px; }
.logo-ko { display: block; font-size: 15px; color: #7b98a8; }
.branch { background: #fff; padding: 6px 6px 8px; border-bottom: 1px solid #d9dee4; }
.branch select { width: 100%; height: 38px; border: 1px solid #ccc; border-radius: 3px; padding: 0 10px; font-size: 14px; color: #333; background: #fff; }
.menu { padding: 6px 0 30px; }
.menu .top-link { display: block; padding: 10px 22px; color: #e6e6e6; font-size: 16px; font-weight: 700; }
.menu .top-link .fa { width: 26px; font-size: 18px; }
.menu .top.open > .top-link { border-left: 5px solid #1abb9c; padding-left: 17px; background: linear-gradient(#334556, #2c4257); box-shadow: rgba(0,0,0,.25) 0 1px 0, inset rgba(255,255,255,.16) 0 1px 0; }
.menu ul { list-style: none; margin: 0 0 4px 28px; padding: 4px 0; border-left: 1px solid #425668; display: none; }
.menu .top.open ul { display: block; }
.menu li a { display: block; padding: 6px 24px; font-size: 14px; color: rgba(255,255,255,.75); }
.menu li a:hover { color: #fff; }
.menu li.current a { color: var(--accent); font-weight: 700; }

/* 본문 */
.main { margin-left: 230px; min-height: 100%; }
body.folded .side { display: none; }
body.folded .main { margin-left: 0; }
.topbar { height: 56px; background: #ededed; border-bottom: 1px solid #d9dee4; display: flex; align-items: center; padding: 0 18px; gap: 12px; }
.topbar .fold { font-size: 24px; color: #5a738e; }
.topbar .who { margin-left: auto; color: #5a738e; }
.topbar .logout button { border: 0; background: none; color: #e74c3c; font-size: 14px; cursor: pointer; }
.content { padding: 18px 24px 30px; }
.title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.title-row h1 { font-size: 20px; font-weight: 400; color: #4a90d9; margin: 0; flex: 1; }
.title-row h1 .gt { font-size: 18px; margin: 0 2px; }
.title-right { display: flex; gap: 8px; }

.btn { display: inline-block; border: 1px solid transparent; border-radius: 3px; padding: 7px 13px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; line-height: 1.4; font-family: inherit; }
.btn-primary { background: var(--blue); border-color: #4780b8; }
.btn-default { color: #333; background: #fff; border-color: #ccc; }
.btn-info { background: var(--teal); border-color: #2cb3b3; }
.btn-warning { background: var(--orange); border-color: #e39a33; }
.btn-danger { background: var(--red); border-color: #c9433f; }
.btn-xs { padding: 2px 7px; font-size: 12px; }
.btn:hover { filter: brightness(.94); }

.search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.search select, .search .kw, .date-box { height: 38px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #555; font-size: 14px; padding: 0 10px; font-family: inherit; }
.search select { min-width: 110px; }
.date-box { display: inline-flex; align-items: center; gap: 6px; }
.date-box input { border: 0; outline: 0; color: #555; font-family: inherit; width: 122px; }
.search .total { color: #4a90d9; font-size: 16px; font-weight: 700; margin-left: 6px; }
.search .kw-row { flex-basis: 100%; display: flex; gap: 10px; }
.search .kw { width: 200px; }

.panel { background: #fff; border: 1px solid #c8cdd3; border-radius: 6px; padding: 18px 10px 10px; }
.table-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; white-space: nowrap; }
table.grid th { background: var(--head); color: #ecf0f1; font-weight: 700; height: 35px; padding: 0 16px; text-align: center; }
table.grid th a { color: inherit; }
table.grid td { height: 57px; padding: 4px 16px; text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
table.grid td.left { text-align: left; }
table.grid tbody tr:nth-child(odd) td { background: #f9f9f9; }
table.grid tr.deleted td { color: #c0c7cf; text-decoration: line-through; }
table.grid th.act, table.grid td.act { position: sticky; right: 0; border-right: 0; }
table.grid th.act { background: #3e5266; }
table.grid td.act { background: #fff; text-decoration: none; }
table.grid tbody tr:nth-child(odd) td.act { background: #f9f9f9; }
table.grid td.act form { display: inline; }
table.grid td.empty { height: 120px; color: #aab4be; }

.pager { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: 14px; }
.pager a, .pager span { min-width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #333; font-weight: 700; border: 1px solid transparent; border-radius: 3px; }
.pager a.on { border: 2px solid var(--blue); color: var(--blue); background: #fff; }
.pager span { color: #bbb; }

.placeholder { padding: 40px; text-align: center; font-size: 15px; }
.placeholder code { background: #f1f3f5; padding: 2px 6px; border-radius: 3px; }

/* 팝업 */
.pop-back { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; align-items: center; justify-content: center; }
.pop-back.on { display: flex; }
.pop-box { position: relative; max-width: 96vw; background: #f7f7f7; border-radius: 4px; box-shadow: 0 6px 30px rgba(0,0,0,.4); }
.pop-box iframe { width: 100%; height: 100%; border: 0; border-radius: 4px; display: block; }
.pop-x { position: absolute; right: 8px; top: 2px; font-size: 26px; color: #666; z-index: 2; }
body.popup { background: var(--bg); padding: 0 0 12px; height: auto; }
.pop-title { margin: 0; padding: 8px 15px 10px; font-size: 16px; font-weight: 700; color: #3f7fc1; }
.pop-title small { color: #9aa7b3; font-weight: 400; }
.pop-panel { background: #fff; border: 1px solid #c8cdd3; border-radius: 6px; margin: 0 1px; padding: 14px 8px 12px; }
table.form { border-collapse: collapse; width: 100%; }
table.form th { width: 140px; background: #ededed; font-weight: 400; color: var(--ink); text-align: center; border: 1px solid #e3e6e9; height: 57px; padding: 0 8px; }
table.form td { border: 1px solid #e3e6e9; padding: 8px; }
.form-control { height: 40px; border: 1px solid #ccc; border-radius: 3px; padding: 0 10px; font-size: 14px; font-family: inherit; color: #333; background: #fff; width: 200px; max-width: 100%; }
select.form-control { width: 150px; }
td.wide .form-control { width: 100%; }
textarea.form-control { height: 54px; padding: 8px 10px; resize: vertical; }
.form-control:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(81,141,201,.2); }
td.has-error .form-control { border-color: var(--red); }
.err, .errors { color: var(--red); font-size: 12px; margin-top: 3px; }
.yn { display: inline-flex; background: #d6d6d6; border-radius: 3px; padding: 4px; }
.yn label { cursor: pointer; }
.yn input { position: absolute; opacity: 0; }
.yn span { display: inline-block; min-width: 32px; padding: 5px 10px; text-align: center; font-weight: 700; color: #666; border-radius: 3px; }
.yn input:checked + span { background: #337ab7; color: #fff; }
.pop-btns { text-align: center; margin-top: 12px; }
.pop-btns .btn { min-width: 56px; margin: 0 4px; }
.blocked { text-align: center; padding: 30px 0 10px; font-size: 15px; }

/* 로그인 */
body.login { display: flex; align-items: center; justify-content: center; background: var(--side); }
.login-box { background: #fff; border-radius: 6px; padding: 34px 36px 30px; width: 340px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.login-box h1 { font-size: 24px; font-weight: 400; color: #4b5f71; margin: 0; }
.login-box .sub { color: #7b98a8; margin: 2px 0 20px; font-size: 15px; }
.login-box input { display: block; width: 100%; height: 42px; border: 1px solid #ccc; border-radius: 3px; padding: 0 12px; font-size: 14px; margin-bottom: 10px; font-family: inherit; }
.login-box .btn { width: 100%; height: 42px; }
.login-box .err { margin: 0 0 10px; font-size: 13px; }

/* 목록 보조 */
.bulk-sel { height: 36px; border: 1px solid #ccc; border-radius: 3px; padding: 0 8px; font-family: inherit; }
table.grid td.right { text-align: right; }
table.grid td.wrap { white-space: normal; min-width: 220px; max-width: 360px; }
table.grid.two th { height: 26px; border: 1px solid #5b6d7e; padding: 0 12px; }
table.grid.two th.grp { background: #34495e; }
table.grid.two td { height: 36px; }
table.grid td.act .btn { margin: 1px 0; }

.log-h { font-size: 14px; font-weight: 400; margin: 12px 4px 4px; color: #73879c; }
.log-h.on { color: #3f7fc1; font-weight: 700; }
table.grid.log td { height: 34px; padding: 2px 12px; }

.upload-help { color: #73879c; line-height: 1.7; margin: 10px 4px; }
.upload-result { margin: 8px 4px; font-size: 15px; color: #333; }
.sort-list { list-style: none; margin: 0; padding: 0; max-height: 68vh; overflow-y: auto; border: 1px solid #e3e6e9; }
.sort-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e3e6e9; background: #fff; cursor: grab; }
.sort-list li:nth-child(odd) { background: #f9f9f9; }
.sort-list .nm { flex: 1; color: #333; }
.sort-list .grip { color: #aab4be; }
.sort-list .ud a { display: inline-block; padding: 0 6px; color: #518dc9; cursor: pointer; }
.confirm-sum { font-size: 15px; margin: 4px 4px 10px; color: #333; }
.hist-btn { margin-left: 10px; }

/* 거래처 찾기 */
.picker { position: relative; display: inline-block; width: 100%; max-width: 400px; }
.picker .picker-text { width: 100%; }
.picker-list { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 41px; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #aaa; border-radius: 3px; max-height: 260px; overflow-y: auto; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.picker-list li { padding: 7px 10px; cursor: pointer; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-list li.on, .picker-list li:hover { background: #518dc9; color: #fff; }
.picker-list li.none { color: #999; cursor: default; background: #fff; }

/* 견적서 등록·수정 */
.est-top { display: flex; align-items: center; }
.est-top .pop-title { flex: 1; }
.est-sum { padding-right: 60px; font-size: 18px; color: #73879c; }
.est-sum b { font-weight: 400; }
.pop-panel.est { display: flex; gap: 16px; align-items: flex-start; }
.est-left { width: 610px; flex: none; }
.est-right { flex: 1; min-width: 0; border: 1px solid #e3e6e9; min-height: 560px; }
table.form.narrow th { width: 120px; }
table.form .inline { display: flex; gap: 8px; }
table.form .inline .form-control { width: 150px; }
table.form.narrow textarea.form-control { height: 74px; }
table.grid.lines { white-space: nowrap; }
table.grid.lines th { padding: 0 8px; }
table.grid.lines td { height: 48px; padding: 4px 4px; border-right: 0; }
table.grid.lines .form-control { width: 100%; height: 38px; }
table.grid.lines .num { text-align: right; width: 92px; }
table.grid.lines tr.entry td { background: #f1f1f1; }
table.grid.lines tr.entry td:first-child { width: 46%; }
table.grid.lines input[readonly] { background: #eee; }
table.grid.lines tr.none td { height: 80px; font-size: 22px; color: #73879c; background: #f1f1f1; }
table.grid.lines td.tot { padding-right: 12px; }

.btn-dark { background: #34495e; border-color: #2c3e50; }
table.grid th.chk, table.grid td.chk { width: 34px; padding: 0 8px; }
.msgs { margin-bottom: 10px; }
.msg { padding: 9px 14px; border-radius: 3px; background: #dff0d8; color: #2f6f33; border: 1px solid #c3e2ba; margin-bottom: 4px; }
.msg.error, .msg.warning { background: #f9e2e2; color: #a12c2c; border-color: #efc4c4; }
table.form th small { display: block; }
table.form th a.same { color: #3f7fc1; border-bottom: 1px solid #3f7fc1; cursor: pointer; font-size: 12px; }
.pop-panel.ord .est-left { width: 770px; }
.pop-panel.ord table.form th { width: 110px; }
.pop-panel.ord table.form td .form-control { width: 100%; }
.pop-panel.ord table.form td select.form-control { width: 150px; }
.pop-panel.ord .order-fields { table-layout: fixed; }
.order-fields .order-label { width: 140px; }
.order-fields col:nth-child(1),.order-fields col:nth-child(2) { width: 28.2%; }
.order-fields col:nth-child(3) { width: 17.95%; }
.order-fields col:nth-child(4) { width: 25.65%; }
.pop-panel.ord .order-fields th,.pop-panel.ord .order-fields td { height: 49px; padding: 4px 8px; }
.pop-panel.ord .order-fields .picker { max-width: none; }
.pop-panel.ord table.form.order-fields td [name=order_day] { width: 150px; float: left; }
.pop-panel.ord .order-fields #customerEditBtn { float: right; }
.pop-panel.ord .order-fields td>small { display: block; line-height: 1.4; margin-top: 3px; }
.ord-top .pop-title { flex: none; width: 770px; }
.ord-top .est-sum { margin-left: auto; }
.pop-panel.ord .order-fields textarea[name=delivery_request] { height: 137px; }
.pop-panel.ord .order-fields textarea[name=description] { height: 58px; }
.pop-panel.ord .order-fields textarea[name=order_memo] { height: 40px; }

.zip-btn { margin-left: 8px; vertical-align: middle; padding: 4px 8px; }

#bookmark { list-style: none; margin: 0 0 0 6px; padding: 0; display: flex; gap: 4px; align-self: flex-end; overflow: hidden; }
#bookmark li { min-width: 96px; text-align: center; background: #dfe3e8; border: 1px solid #cfd6dd; border-bottom: 0; border-radius: 5px 5px 0 0; cursor: move; white-space: nowrap; }
#bookmark li a { display: block; padding: 8px 12px 7px; color: #5a738e; font-size: 13px; text-decoration: none; }
#bookmark li.on { background: #f7f7f7; }
#bookmark li.on a { color: #1abb9c; font-weight: bold; }
#bookmark_icon { cursor: pointer; }
#bookmark_icon.fa-bookmark { color: #1abb9c; }
/* List search pickers and notice entry share the existing compact toolbar. */
.filter-picker{display:inline-block;width:185px;vertical-align:middle}
.filter-picker .picker-text{width:100%;box-sizing:border-box}
.notice-alert{margin-left:8px;border:1px solid #d8dee7;border-radius:3px;background:#fff;padding:5px 9px;color:#42566d;cursor:pointer;white-space:nowrap}
.notice-alert b{background:#e74c3c;color:#fff;border-radius:9px;padding:1px 5px;font-size:11px}
.fold,.pop-x{border:0;background:transparent;cursor:pointer}
.title-row,.title-right{flex-wrap:wrap}
.title-right{justify-content:flex-end}
.topbar #bookmark{overflow-x:auto;min-width:0}
.pop-box{max-width:calc(100vw - 24px);max-height:calc(100dvh - 20px)}
button:focus-visible,a:focus-visible{outline:3px solid #136a99;outline-offset:2px}
@media(max-width:1200px){
 .pop-panel.est{display:block}.est-left,.pop-panel.ord .est-left{width:100%}
 .est-right{margin-top:16px;overflow:auto;min-height:240px}
 .est-sum{padding-right:12px}
 .ord-top .pop-title{width:auto;flex:1}
}
@media(max-width:760px){
 .side{display:none;transform:translateX(-100%);width:230px;box-shadow:5px 0 18px #0003}
 body.nav-open .side{transform:translateX(0);top:56px;display:block}
 .main{margin-left:0}.content{padding:14px 10px}.topbar{padding:0 10px;gap:8px}
 .topbar .who{display:none}.topbar #bookmark{flex:1}.title-right{justify-content:flex-start}
 .title-row h1{flex-basis:100%;font-size:18px}.btn{padding:7px 10px}
 .search .kw{flex:1;min-width:100px}.search .kw-row{flex-wrap:wrap}
 table.form,table.form tbody{display:block;width:100%}
 table.form tr{display:grid;grid-template-columns:90px minmax(0,1fr)}
 table.form th,table.form td{display:block;width:auto!important;min-width:0;overflow-wrap:anywhere}
 table.form th{height:auto;min-height:48px;padding:12px 6px}
 table.form td{padding:8px}.pop-panel{overflow:auto}
 table.form .form-control,table.form .inline .form-control{width:100%!important;min-width:0}
 table.form .inline{flex-wrap:wrap}.pop-title{font-size:18px}
 .est-top{flex-wrap:wrap;gap:4px;padding-right:28px}.est-top .est-sum{padding-right:0}
 .order-fields colgroup{display:none}.order-fields .delivery-request-label,.order-fields .delivery-request-cell{grid-row:auto}
 .pop-panel.ord .order-fields th,.pop-panel.ord .order-fields td{height:auto}
 .pop-panel.ord .order-fields #customerEditBtn{float:none;margin-top:6px}
 .pop-panel.ord table.form.order-fields td [name=order_day]{float:none}
}