*{box-sizing:border-box}
:root{
  color-scheme:light;
  --bg:#f3f6f9;
  --panel:#fff;
  --line:#d4dee8;
  --line-soft:#e5ebf1;
  --text:#1c3045;
  --muted:#718398;
  --blue:#2f6fab;
  --blue-soft:#eaf2fa;
  --yellow:#fff3b3;
  --danger:#b84b4b;
  --green:#2f7d68;
  font-family:"Segoe UI","Noto Sans KR",Arial,sans-serif;
  color:var(--text);
  background:var(--bg)
}
html,body{margin:0;min-width:320px;background:var(--bg)}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

.page{width:min(1500px,calc(100% - 26px));margin:0 auto;padding:18px 0 40px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
.page-title{min-width:0}
.eyebrow{display:block;margin-bottom:4px;color:#58728c;font-size:10px;font-weight:900;letter-spacing:.08em}
.page-head h1{margin:0;color:#173654;font-size:29px;line-height:1.12;letter-spacing:-.04em}
.page-head p{margin:6px 0 0;color:#73869a;font-size:12px;line-height:1.5}
.head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid transparent;border-radius:7px;background:#fff;color:#425a72;text-decoration:none;font-size:11px;font-weight:850;cursor:pointer;white-space:nowrap}
.btn.primary{border-color:#2f6fab;background:#2f6fab;color:#fff}
.btn.primary:hover{background:#285f94}
.btn.secondary{border-color:#397b6d;background:#397b6d;color:#fff}
.btn.ghost{border-color:#c6d3df;background:#fff;color:#455d75}
.btn.ghost:hover{background:#f7fafc}
.btn.danger{border-color:#efc2c2;background:#fff;color:var(--danger)}
.btn:disabled{opacity:.55;cursor:wait}

.query-card,.analytics,.sheet{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 2px 8px rgba(39,60,81,.025)}
.query-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end;padding:10px 11px;margin-bottom:10px}
.query-mode{display:flex;align-items:center;gap:4px}
.query-mode__button{min-height:32px;padding:0 11px;border:1px solid #c8d5e2;border-radius:7px;background:#fff;color:#63788e;font-size:11px;font-weight:850;cursor:pointer}
.query-mode__button.is-active{border-color:#4e80b0;background:#eef5fc;color:#285f91}
.filters{display:grid;grid-template-columns:132px minmax(150px,.8fr) 116px minmax(220px,1.35fr) 112px auto;gap:7px;align-items:end;min-width:0}
.filters label,.editor label{display:flex;flex-direction:column;gap:4px;min-width:0}
.filters label>span,.editor label>span{color:#52677e;font-size:10px;font-weight:850}
.filters input,.filters select,.editor input,.editor select,.editor textarea{width:100%;border:1px solid #c9d5e1;border-radius:6px;background:#fff;color:#203448;outline:none}
.filters input,.filters select,.editor input,.editor select{height:33px;padding:0 8px}
.editor textarea{min-height:72px;padding:8px 9px;resize:vertical;line-height:1.5}
.filters input:focus,.filters select:focus,.editor input:focus,.editor select:focus,.editor textarea:focus{border-color:#5790c4;box-shadow:0 0 0 3px rgba(47,111,171,.10)}
.range-fields{display:grid;grid-template-columns:132px 132px;gap:7px}
.filter-buttons{display:flex;gap:5px}
.filter-buttons .btn{min-height:33px}

.summary-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.summary-strip article{display:flex;align-items:baseline;gap:6px;min-height:58px;padding:11px 14px;border-right:1px solid var(--line-soft)}
.summary-strip article:last-child{border-right:0}
.summary-strip span{margin-right:auto;color:#63778e;font-size:11px;font-weight:850}
.summary-strip strong{color:#174a76;font-size:22px;line-height:1;font-weight:900;letter-spacing:-.03em}
.summary-strip small{color:#8795a5;font-size:10px;font-weight:750}

.analytics{margin-bottom:10px;overflow:hidden}
.section-head,.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;padding:8px 11px;border-bottom:1px solid var(--line-soft);background:#f8fafc}
.section-head>div,.sheet-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.section-head strong,.sheet-head strong{color:#30485f;font-size:12px}
.section-head span,.sheet-head span,.section-head small,.sheet-head small{color:#79899a;font-size:10px}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.65fr);gap:10px;padding:10px}
.analytics-block{min-width:0}
.analytics-block h2{margin:0 0 6px;color:#425b72;font-size:11px}
.analytics-table-wrap{overflow:auto;border:1px solid #dbe4ed;border-radius:8px}
.analytics-table{width:100%;border-collapse:collapse;table-layout:fixed}
.analytics-table th,.analytics-table td{height:34px;padding:6px 8px;border-right:1px solid #e4eaf0;border-bottom:1px solid #e4eaf0;text-align:center;font-size:11px}
.analytics-table th:last-child,.analytics-table td:last-child{border-right:0}
.analytics-table tr:last-child td{border-bottom:0}
.analytics-table th{background:#f2f6fa;color:#60748a;font-weight:900}
.analytics-table td{background:#fff;color:#32495f}
.analytics-table td:first-child{text-align:left;font-weight:850}
.analytics-table .metric{color:#1f5f97;font-weight:900}
.analytics-table .warn{color:#b06a25;font-weight:900}
.silo-summary{display:grid;gap:6px}
.silo-summary__row{display:grid;grid-template-columns:1fr 70px 48px;align-items:center;gap:8px;min-height:38px;padding:7px 9px;border:1px solid #dbe4ed;border-radius:7px;background:#fbfcfe}
.silo-summary__row span{color:#465f77;font-size:11px;font-weight:850}
.silo-summary__row strong{color:#1d5c94;font-size:14px;text-align:right}
.silo-summary__row small{color:#8291a0;font-size:10px;text-align:right}
.analytics-empty{padding:18px;border:1px dashed #d6e0ea;border-radius:8px;color:#8795a5;font-size:11px;text-align:center}

.tabs{display:flex;gap:4px;margin:0 0 6px}
.tab{min-height:36px;padding:0 14px;border:1px solid #cbd8e5;border-radius:8px 8px 5px 5px;background:#fff;color:#5a7087;font-size:11px;font-weight:900;cursor:pointer}
.tab span{display:inline-flex;min-width:20px;justify-content:center;margin-left:4px;padding:1px 5px;border-radius:999px;background:#edf2f7;color:#6d8095;font-size:9px}
.tab.is-active{border-color:#4e7fac;background:#edf5fc;color:#285f91}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.sheet{overflow:hidden}
.table-wrap{width:100%;overflow:auto;max-height:70vh}
.data-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.data-table th,.data-table td{border-right:1px solid #dbe3ec;border-bottom:1px solid #dbe3ec}
.data-table th:last-child,.data-table td:last-child{border-right:0}
.data-table thead th{position:sticky;top:0;z-index:4;height:38px;padding:7px 7px;background:#e7edf3;color:#2f4357;font-size:11px;font-weight:900;text-align:center}
.data-table thead .company,.data-table thead .vehicle{background:var(--yellow)}
.data-table tbody td{padding:9px 8px;background:#fff;color:#263b50;font-size:12px;line-height:1.48;vertical-align:middle}
.data-table tbody tr:nth-child(even) td{background:#fbfcfe}
.data-table tbody tr:hover td{background:#f2f7fb}
.data-table td.no,.data-table td.date,.data-table td.company,.data-table td.vehicle,.data-table td.clock,.data-table td.duration,.data-table td.silo{text-align:center}
.data-table td.equipment,.data-table td.note,.data-table td.unload-note{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.no{width:46px}.date{width:94px}.company{width:108px}.vehicle{width:82px}.equipment{width:290px}.photo{width:145px}.note{width:auto}.actions{width:78px}
.clock{width:66px}.duration{width:78px}.silo{width:100px}.unload-note{width:auto}
.empty{height:160px!important;text-align:center;color:#8795a5!important}
.duration-badge{display:inline-flex;min-width:55px;justify-content:center;padding:4px 7px;border-radius:999px;background:#edf4fa;color:#37658f;font-size:11px;font-weight:900}
.duration-badge.is-long{background:#fff1cf;color:#9a681f}
.duration-badge.is-very-long{background:#fde7e7;color:#a94747}
.abnormal-row td:first-child{box-shadow:inset 4px 0 0 #d79445}
.silo-pill{display:inline-flex;padding:4px 7px;border-radius:999px;background:#eef3f8;color:#516c86;font-size:10px;font-weight:850}
.photo-list{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.thumb{width:64px;height:64px;padding:0;border:1px solid #cbd7e2;border-radius:7px;background:#f4f7fa;overflow:hidden;cursor:zoom-in}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.more{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#eaf0f6;color:#5d7289;font-size:10px;font-weight:800}
.row-actions{display:flex;flex-direction:column;gap:4px}
.row-actions .btn{width:100%;min-height:27px;padding:0 5px;font-size:9px}

.modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(19,35,54,.52)}
.modal-card{width:min(760px,100%);max-height:min(92vh,940px);overflow:auto;border:1px solid #d5dfea;border-radius:13px;background:#fff;box-shadow:0 28px 80px rgba(8,28,48,.27)}
.record-editor-card{width:min(960px,100%)}
.unload-editor-card{width:min(860px,100%)}
.modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid #dfe6ee;background:#fff}
.modal-head span{display:block;color:#6d8299;font-size:9px;font-weight:900;letter-spacing:.08em}
.modal-head h2{margin:3px 0 0;color:#22374d;font-size:18px}
.icon-btn{width:32px;height:32px;border:1px solid #cad5e0;border-radius:7px;background:#fff;color:#556d85;font-size:20px;cursor:pointer}
.editor{display:flex;flex-direction:column;gap:11px;padding:15px 16px 17px}
.editor-grid{display:grid;grid-template-columns:150px 1fr 150px;gap:8px}
.unload-editor-grid{display:grid;grid-template-columns:130px 105px 105px 120px 1fr 115px 145px;gap:7px}
.editor em{margin-left:3px;color:#bb4b4b;font-size:8px;font-style:normal}
.editor label small{margin-left:4px;color:#8996a6;font-weight:600}

.record-kind{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;padding:0;border:0}
.record-kind legend{margin-bottom:5px;color:#52677e;font-size:10px;font-weight:900}
.record-kind__option{position:relative;cursor:pointer}
.record-kind__option input{position:absolute;opacity:0;pointer-events:none}
.record-kind__option>span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:9px 12px;border:1px solid #cbd7e3;border-radius:8px;background:#fff}
.record-kind__option strong{color:#355069;font-size:12px}
.record-kind__option small{color:#8392a2;font-size:10px}
.record-kind__option input:checked+span{border-color:#4c83b6;background:#eef6fd;box-shadow:0 0 0 2px rgba(47,111,171,.08)}
.record-kind__option.is-trouble input:checked+span{border-color:#c88d40;background:#fff7e9;box-shadow:0 0 0 2px rgba(191,132,53,.08)}
.editor-section{display:flex;flex-direction:column;gap:9px;padding:11px;border:1px solid #dce4ec;border-radius:9px;background:#fbfcfe}
.editor-section>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px solid #e4eaf0}
.editor-section>header strong{color:#3a526a;font-size:11px}
.editor-section>header small{color:#8795a5;font-size:9px}
.record-grid{display:grid;grid-template-columns:135px 1fr 125px 150px 110px 110px 130px;gap:7px}
.duration-field input{background:#eef4fa;color:#2d628f;font-weight:900;text-align:center}
.trouble-fields{border-color:#ead7b9;background:#fffaf1}
.trouble-fields>header{border-bottom-color:#efe0ca}
.trouble-fields>header strong{color:#805a2b}
.existing-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:9px;border:1px solid #dfe6ed;border-radius:8px;background:#f8fafc}
.existing-photo{overflow:hidden;border:1px solid #d6dee7;border-radius:7px;background:#fff}
.existing-meta{display:flex;justify-content:space-between;gap:5px;padding:5px}
.existing-meta span{overflow:hidden;color:#6d8094;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.photo-delete{border:0;background:transparent;color:#b54a4a;font-size:10px;font-weight:800;cursor:pointer}
.editor-status{margin:0;padding:8px 10px;border-radius:7px;background:#eef5fb;color:#3f6284;font-size:11px}
.modal-foot{display:flex;justify-content:flex-end;gap:6px}

.photo-modal{padding:10px;background:rgba(5,14,24,.88)}
.photo-viewer{display:flex;flex-direction:column;width:min(96vw,1600px);height:min(95vh,1100px);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#111923}
.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:7px 10px;background:#18232e;color:#fff}
.photo-toolbar__zoom{display:flex;align-items:center;gap:7px;min-width:0}
.photo-tool{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;border:1px solid #536271;border-radius:7px;background:#243240;color:#fff;font-size:18px;font-weight:800;cursor:pointer}
.photo-tool--text{min-width:auto;font-size:11px}
.photo-tool--close{font-size:22px}
.photo-toolbar input[type=range]{width:min(260px,32vw)}
.photo-toolbar strong{min-width:48px;color:#dbe6ef;font-size:11px;text-align:center}
.photo-stage{flex:1 1 auto;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:18px;background:#0c1219}
.photo-stage img{display:block;max-width:none;max-height:none;margin:auto;box-shadow:0 15px 50px rgba(0,0,0,.38);image-rendering:auto}

@media(max-width:1180px){
  .query-card{grid-template-columns:1fr}
  .filters{grid-template-columns:132px 1fr 116px minmax(180px,1fr) 110px}
  .filter-buttons{grid-column:span 5;justify-content:flex-end}
  .analytics-grid{grid-template-columns:1fr}
  .record-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .unload-editor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .page{width:min(100% - 16px,1500px);padding-top:13px}
  .page-head{flex-direction:column}
  .head-actions{justify-content:flex-start}
  .query-mode{overflow-x:auto}
  .query-mode__button{white-space:nowrap}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .range-fields{grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters .search{grid-column:span 2}
  .filter-buttons{grid-column:span 2}
  .summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-strip article{border-bottom:1px solid var(--line-soft)}
  .summary-strip article:nth-child(2n){border-right:0}
  .summary-strip article:last-child{grid-column:span 2;border-bottom:0}
  .tabs{overflow-x:auto}.tab{white-space:nowrap}
  .table-wrap{max-height:none}.data-table{min-width:1050px}
  .modal{align-items:flex-end;padding:7px}
  .modal-card{max-height:93vh;border-radius:13px 13px 8px 8px}
  .record-kind{grid-template-columns:1fr}
  .record-grid,.editor-grid,.unload-editor-grid{grid-template-columns:1fr 1fr}
  .photo-toolbar{align-items:flex-start}.photo-toolbar__zoom{flex-wrap:wrap}.photo-toolbar input[type=range]{width:150px}
}
@media(max-width:450px){
  .filters{grid-template-columns:1fr}
  .range-fields,.filters .search,.filter-buttons{grid-column:auto}
  .range-fields{grid-template-columns:1fr}
  .summary-strip strong{font-size:20px}
  .record-grid,.editor-grid,.unload-editor-grid{grid-template-columns:1fr}
}

/* =========================================================
  SOLID-FUEL-TROUBLE-V3.1
  가독성 강화 + 업체 관리 + 선택 입력
========================================================= */

:root{
  --text-strong:#16324d;
  --text:#203b56;
  --muted:#667d93;
  --line:#cbd9e6;
  --line-soft:#dfe7ef;
  font-family:
    "Pretendard Variable",
    "Pretendard",
    "SUIT Variable",
    "SUIT",
    "Noto Sans KR",
    "Malgun Gothic",
    "Segoe UI",
    sans-serif;
  font-size:14px;
  font-weight:500;
}

body{
  color:var(--text);
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  width:min(1540px,calc(100% - 32px));
  padding:22px 0 48px;
}

.page-head{
  margin-bottom:16px;
}

.eyebrow{
  font-size:11px;
  font-weight:800;
}

.page-head h1{
  color:#12395e;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.045em;
}

.page-head p{
  margin-top:7px;
  color:#657f99;
  font-size:13px;
  font-weight:600;
}

.btn{
  min-height:38px;
  padding:0 14px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
}

.query-card{
  gap:14px;
  padding:12px 13px;
  margin-bottom:12px;
}

.query-mode__button{
  min-height:36px;
  padding:0 13px;
  font-size:12px;
  font-weight:800;
}

.filters{
  gap:9px;
}

.filters label>span,
.editor label>span{
  margin-bottom:1px;
  color:#405c76;
  font-size:11.5px;
  font-weight:800;
}

.filters input,
.filters select,
.editor input,
.editor select{
  height:38px;
  padding:0 10px;
  border-radius:7px;
  color:#1b3a55;
  font-size:13px;
  font-weight:600;
}

.editor textarea{
  min-height:88px;
  padding:11px 12px;
  font-size:13px;
  font-weight:600;
  line-height:1.65;
}

.summary-strip{
  margin-bottom:12px;
}

.summary-strip article{
  min-height:64px;
  padding:13px 16px;
}

.summary-strip span{
  color:#4f6b84;
  font-size:12px;
  font-weight:800;
}

.summary-strip strong{
  font-size:24px;
  font-weight:900;
}

.summary-strip small{
  font-size:11px;
  font-weight:700;
}

.section-head,
.sheet-head{
  min-height:46px;
  padding:10px 13px;
}

.section-head strong,
.sheet-head strong{
  color:#233f59;
  font-size:13px;
  font-weight:900;
}

.section-head span,
.sheet-head span,
.section-head small,
.sheet-head small{
  font-size:11px;
  font-weight:600;
}

.analytics-grid{
  gap:12px;
  padding:12px;
}

.analytics-block h2{
  margin-bottom:8px;
  color:#36546f;
  font-size:12.5px;
  font-weight:900;
}

.analytics-table th,
.analytics-table td{
  height:40px;
  padding:8px 10px;
  font-size:12.5px;
}

.analytics-table th{
  color:#405e78;
  font-weight:900;
}

.analytics-table td{
  color:#25445e;
  font-weight:600;
}

.analytics-table td:first-child{
  font-weight:850;
}

.silo-summary__row{
  min-height:42px;
  padding:8px 11px;
}

.silo-summary__row span{
  font-size:12.5px;
  font-weight:800;
}

.silo-summary__row strong{
  font-size:15px;
  font-weight:900;
}

.silo-summary__row small{
  font-size:11px;
  font-weight:700;
}

.tab{
  min-height:39px;
  padding:0 16px;
  font-size:12px;
  font-weight:900;
}

.data-table thead th{
  height:42px;
  padding:8px 8px;
  color:#203b55;
  font-size:12px;
  font-weight:900;
}

.data-table tbody td{
  min-height:48px;
  padding:11px 10px;
  color:#203b55;
  font-size:13px;
  font-weight:600;
  line-height:1.62;
}

.data-table td.date,
.data-table td.clock,
.data-table td.company,
.data-table td.vehicle,
.data-table td.silo{
  font-weight:700;
}

.no{width:50px}
.date{width:106px}
.company{width:120px}
.vehicle{width:92px}
.equipment{width:300px}
.photo{width:150px}
.actions{width:90px}
.clock{width:72px}
.duration{width:88px}
.silo{width:112px}

.duration-badge,
.silo-pill{
  font-size:11px;
  font-weight:900;
}

.row-actions .btn{
  min-height:30px;
  padding:0 7px;
  font-size:10.5px;
  font-weight:800;
}

.modal-card{
  width:min(820px,100%);
  border-radius:16px;
}

.record-editor-card{
  width:min(1080px,100%);
}

.unload-editor-card{
  width:min(930px,100%);
}

.modal-head{
  padding:17px 19px;
}

.modal-head span{
  font-size:10px;
  font-weight:900;
}

.modal-head h2{
  margin-top:4px;
  color:#173b5d;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.025em;
}

.icon-btn{
  width:36px;
  height:36px;
  font-size:22px;
}

.editor{
  gap:14px;
  padding:18px 19px 20px;
}

.record-kind{
  gap:10px;
}

.record-kind legend{
  margin-bottom:7px;
  color:#38556f;
  font-size:12px;
  font-weight:900;
}

.record-kind__option>span{
  min-height:58px;
  padding:12px 14px;
  border-radius:10px;
}

.record-kind__option strong{
  color:#274761;
  font-size:14px;
  font-weight:900;
}

.record-kind__option small{
  color:#72879a;
  font-size:11.5px;
  font-weight:650;
}

.record-optional-guide{
  margin:0;
  padding:9px 11px;
  border:1px solid #d6e2ed;
  border-radius:8px;
  background:#f4f8fb;
  color:#526e87;
  font-size:11.5px;
  font-weight:650;
}

.editor-section{
  gap:11px;
  padding:14px;
  border-radius:11px;
}

.editor-section>header{
  padding-bottom:9px;
}

.editor-section>header strong{
  color:#284963;
  font-size:13px;
  font-weight:900;
}

.editor-section>header small{
  color:#73899d;
  font-size:10.5px;
  font-weight:650;
}

.record-grid{
  grid-template-columns:140px 1.15fr 140px 165px 120px 120px 145px;
  gap:9px;
}

.duration-field input{
  font-size:12.5px;
  font-weight:900;
}

.trouble-fields{
  padding:15px;
}

.trouble-fields>header strong{
  color:#7a4e1e;
}

.editor-status{
  padding:10px 12px;
  font-size:12px;
  font-weight:700;
}

.modal-foot{
  gap:8px;
  padding-top:2px;
}

.company-manager-card{
  width:min(720px,100%);
}

.company-manager{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 19px 20px;
}

.company-manager__guide{
  padding:12px 13px;
  border:1px solid #d6e2ed;
  border-radius:9px;
  background:#f5f8fb;
}

.company-manager__guide strong{
  display:block;
  margin-bottom:4px;
  color:#274761;
  font-size:13px;
  font-weight:900;
}

.company-manager__guide p{
  margin:0;
  color:#5e768c;
  font-size:11.5px;
  font-weight:600;
  line-height:1.6;
}

.company-manager__add{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
}

.company-manager__add label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.company-manager__add label>span{
  color:#405c76;
  font-size:11.5px;
  font-weight:800;
}

.company-manager__add input{
  width:100%;
  height:39px;
  padding:0 11px;
  border:1px solid #c9d5e1;
  border-radius:7px;
  color:#1b3a55;
  font-size:13px;
  font-weight:650;
  outline:none;
}

.company-manager__list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:2px;
}

.company-manager__list-head strong{
  color:#2c4b66;
  font-size:13px;
  font-weight:900;
}

.company-manager__list-head span{
  color:#74889b;
  font-size:11px;
  font-weight:650;
}

.company-manager__list{
  overflow:auto;
  max-height:48vh;
  border:1px solid #d6e1eb;
  border-radius:9px;
  background:#fff;
}

.company-manager__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px 100px;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:8px 10px;
  border-bottom:1px solid #e5ebf1;
}

.company-manager__row:last-child{
  border-bottom:0;
}

.company-manager__row strong{
  overflow:hidden;
  color:#28465f;
  font-size:13px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.company-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  background:#e7f3ed;
  color:#2d715d;
  font-size:10.5px;
  font-weight:900;
}

.company-status.is-inactive{
  background:#eef1f4;
  color:#7b8996;
}

.company-manager__empty{
  padding:28px 16px;
  color:#8190a0;
  font-size:12px;
  font-weight:650;
  text-align:center;
}

.photo-toolbar strong{
  font-size:12px;
}

@media(max-width:1180px){
  .record-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:760px){
  :root,
  body{
    font-size:13px;
  }

  .page-head h1{
    font-size:27px;
  }

  .filters label>span,
  .editor label>span{
    font-size:11px;
  }

  .data-table tbody td{
    font-size:12.5px;
  }

  .record-kind__option strong{
    font-size:13.5px;
  }

  .company-manager__add{
    grid-template-columns:1fr;
  }

  .company-manager__row{
    grid-template-columns:minmax(0,1fr) 72px 88px;
  }
}
/* =========================================================
  SOLID-FUEL-TROUBLE-V3.1.2
  가독성 2차 강화 + 사진 없음 표시 단순화
========================================================= */

/*
  화면 핵심 데이터는 13px 이하로 내려가지 않도록 한다.
  얇은 보조문구보다 실제 표/통계 값을 우선한다.
*/
.analytics-block h2{
  margin-bottom:9px;
  color:#294a68;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.015em;
}

.analytics-table th,
.analytics-table td{
  height:46px;
  padding:10px 12px;
  font-size:14px;
  line-height:1.45;
}

.analytics-table th{
  color:#294a67;
  font-size:13px;
  font-weight:900;
}

.analytics-table td{
  color:#173b59;
  font-weight:700;
}

.analytics-table td:first-child{
  font-weight:900;
}

.silo-summary{
  gap:7px;
}

.silo-summary__row{
  min-height:48px;
  padding:10px 13px;
}

.silo-summary__row span{
  color:#294861;
  font-size:14px;
  font-weight:900;
}

.silo-summary__row strong{
  color:#145a93;
  font-size:17px;
  font-weight:900;
}

.silo-summary__row small{
  font-size:12px;
  font-weight:700;
}

.section-head,
.sheet-head{
  min-height:48px;
  padding:11px 14px;
}

.section-head strong,
.sheet-head strong{
  color:#1d3d58;
  font-size:14px;
  font-weight:900;
}

.section-head span,
.sheet-head span,
.section-head small,
.sheet-head small{
  font-size:11.5px;
  font-weight:650;
}

.tab{
  min-height:42px;
  padding:0 17px;
  font-size:13px;
  font-weight:900;
}

.tab span{
  min-width:22px;
  padding:2px 6px;
  font-size:10.5px;
}

.data-table thead th{
  height:46px;
  padding:9px 9px;
  color:#173650;
  font-size:13.5px;
  font-weight:900;
  letter-spacing:-.01em;
}

.data-table tbody td{
  min-height:56px;
  padding:13px 11px;
  color:#183a56;
  font-size:14.5px;
  font-weight:650;
  line-height:1.62;
}

.data-table tbody tr:nth-child(even) td{
  background:#fbfcfe;
}

.data-table td.no,
.data-table td.date,
.data-table td.company,
.data-table td.vehicle,
.data-table td.clock,
.data-table td.duration,
.data-table td.silo{
  font-weight:800;
}

.data-table td.equipment,
.data-table td.note{
  font-size:14.5px;
  font-weight:700;
  line-height:1.65;
}

.duration-badge,
.silo-pill{
  font-size:12px;
  font-weight:900;
}

/* Trouble 사진 열 */
.data-table td.photo{
  text-align:center;
  vertical-align:middle;
}

.photo-list{
  align-items:center;
  justify-content:center;
}

.thumb{
  width:72px;
  height:72px;
  border-radius:8px;
}

/*
  사진이 없으면 동그란 badge를 만들지 않고
  칸 중앙에 '-' 문자 하나만 표시한다.
*/
.photo-empty{
  display:inline-block;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#7d8d9d;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

.row-actions{
  gap:7px;
}

.row-actions .btn{
  min-height:34px;
  padding:0 8px;
  font-size:11.5px;
  font-weight:850;
}

/* 등록창도 본문과 비슷한 크기로 유지 */
.modal-head h2{
  font-size:23px;
}

.record-kind legend,
.editor label>span{
  font-size:12.5px;
  font-weight:900;
}

.record-kind__option strong{
  font-size:15px;
}

.record-kind__option small,
.record-optional-guide,
.editor-section>header small{
  font-size:12px;
}

.editor-section>header strong{
  font-size:14px;
}

.editor input,
.editor select{
  font-size:14px;
  font-weight:650;
}

.editor textarea{
  font-size:14px;
  font-weight:650;
  line-height:1.65;
}

/* 작은 화면에서는 과도한 확대만 제한 */
@media(max-width:760px){
  .analytics-table th,
  .analytics-table td{
    font-size:12.5px;
  }

  .data-table thead th{
    font-size:12px;
  }

  .data-table tbody td,
  .data-table td.equipment,
  .data-table td.note{
    font-size:13px;
  }

  .thumb{
    width:62px;
    height:62px;
  }
}

/* =========================================================
  SOLID-FUEL-TROUBLE-V3.1.3
  간단 시간 입력 · 현재 Silo 선택지
========================================================= */

.editor .simple-time-input{
  border-color:#b7c9da;
  background:#fff;
  color:#173b59;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  letter-spacing:.045em;
  text-align:center;
}

.editor .simple-time-input::placeholder{
  color:#8192a3;
  font-weight:650;
  letter-spacing:0;
}

.editor .simple-time-input:focus{
  border-color:#397db9;
  box-shadow:0 0 0 3px rgba(47,111,171,.13);
}

.editor .simple-time-input.is-invalid{
  border-color:#c75b5b;
  background:#fff7f7;
  box-shadow:0 0 0 3px rgba(184,75,75,.10);
}

/* =========================================================
  SOLID-FUEL-PUBLIC-READONLY-V1

  Anonymous visitors keep every lookup, filter and photo-viewing control.
  Server permissions govern mutations on both mobile and desktop.
========================================================= */

body.solid-fuel-no-row-actions .data-table .actions{
  display:none!important;
}

body.solid-fuel-readonly #createRecordBtn,
body.solid-fuel-readonly #companyManageBtn,
body.solid-fuel-readonly .photo-delete,
body.solid-fuel-readonly [data-company-action],
body.solid-fuel-readonly #recordModal,
body.solid-fuel-readonly #troubleModal,
body.solid-fuel-readonly #unloadModal,
body.solid-fuel-readonly #companyModal{
  display:none!important;
}

/* GS_EFFICIENCY_MOBILE_MENU_V1: use the authenticated access classes above at every width. */


/* SOLID_FUEL_RECEIPT_LINK_V1 */
.record-grid.receipt-enabled-grid{grid-template-columns:130px 175px 125px minmax(150px,1fr) 120px!important;align-items:end}
.unload-editor-grid.receipt-enabled-grid{grid-template-columns:130px 180px 130px 105px 105px!important;align-items:end}
.receipt-ton-control{display:flex;align-items:center;gap:5px}
.receipt-ton-control input{min-width:0;flex:1}
.receipt-ton-control small{margin:0!important;color:#6f8496;font-size:10px;font-weight:800}
.fuel-pill{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:3px 7px;border:1px solid #d3dee7;border-radius:999px;background:#f5f8fa;color:#546b7e;font-size:10px;font-weight:900;white-space:nowrap}
.fuel-pill.is-organic{border-color:#9fd5c9;background:#eaf8f4;color:#226b5c}
.fuel-pill.is-manure{border-color:#d8c49c;background:#fbf5e9;color:#735b2f}
.unload-table{min-width:1250px!important}
.unload-table th.fuel-type,.unload-table td.fuel-type{min-width:78px;text-align:center}
.unload-table th.receipt-ton,.unload-table td.receipt-ton{min-width:82px;text-align:right;white-space:nowrap}
@media(max-width:1180px){.record-grid.receipt-enabled-grid,.unload-editor-grid.receipt-enabled-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:760px){.record-grid.receipt-enabled-grid,.unload-editor-grid.receipt-enabled-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:450px){.record-grid.receipt-enabled-grid,.unload-editor-grid.receipt-enabled-grid{grid-template-columns:1fr!important}}
/* SOLID_FUEL_RECEIPT_LINK_V1_END */

/* SOLID_FUEL_RECORD_SINGLE_ROW_FIT_V1
   Desktop record registration form: 9 fields stay inside the available card width.
   All columns can shrink; company is narrower and duration stays inside the right edge. */
@media (min-width:1181px){
  .record-editor-card{
    width:min(1290px,calc(100vw - 40px));
  }

  .record-grid.receipt-enabled-grid{
    width:100%;
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(0,1.30fr)
      minmax(0,.85fr)
      minmax(0,1.25fr)
      minmax(0,.95fr)
      minmax(0,.95fr)
      minmax(0,.80fr)
      minmax(0,.80fr)
      minmax(0,1.05fr)!important;
    gap:8px!important;
    align-items:end;
  }

  .record-grid.receipt-enabled-grid>label{
    min-width:0;
  }

  .record-grid.receipt-enabled-grid input,
  .record-grid.receipt-enabled-grid select{
    min-width:0;
    max-width:100%;
    width:100%;
  }

  .record-grid.receipt-enabled-grid .receipt-ton-control{
    min-width:0;
    max-width:100%;
  }

  .record-grid.receipt-enabled-grid .receipt-ton-control input{
    min-width:0;
  }

  #recordDurationPreview{
    min-width:0;
    max-width:100%;
    width:100%;
  }
}
/* SOLID_FUEL_RECORD_SINGLE_ROW_FIT_V1_END */

/* SOLID_FUEL_UNLOAD_LIST_QUICK_V4 */
.solid-fuel-inline-tabs-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:10px 0 8px;
}
.solid-fuel-inline-tabs-row .tabs{
  margin:0;
  flex:0 0 auto;
}
.solid-fuel-inline-quick{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:18px;
  border-left:1px solid #d8e2ee;
}
.solid-fuel-inline-quick .query-mode__button{
  min-width:42px;
  height:32px;
  padding:0 12px;
}
.solid-fuel-inline-quick .query-mode__button.is-active{
  border-color:#2b76c9;
  color:#145da5;
  background:#edf6ff;
  box-shadow:inset 0 0 0 1px rgba(43,118,201,.08);
}
.solid-fuel-inline-empty-row td{
  padding:20px 12px !important;
  text-align:center !important;
  color:#7890a6 !important;
  background:#fbfdff !important;
  font-weight:700 !important;
}
@media (max-width:900px){
  .solid-fuel-inline-tabs-row{
    gap:8px;
  }
  .solid-fuel-inline-quick{
    width:100%;
    padding-left:0;
    border-left:0;
  }
}
/* SOLID_FUEL_SAFE_BOOKMARK_RANGE_UI_R1
   CSS-only restoration after the V4 stability rollback.
   No proxy tabs, DOM moving, MutationObserver, or runtime polling. */

/* Hidden query controls must actually disappear.
   The base .filters label { display:flex } rule otherwise makes #monthFilterBox
   visible even while the range mode sets hidden=true. */
#monthFilterBox[hidden],
#rangeFilterBox[hidden]{
  display:none !important;
}

/* Desktop query row: keep 월별 / 기간 지정 / 전체 + active fields + search controls
   on one compact line where width allows it. */
@media (min-width:1101px){
  .query-card{
    display:flex;
    align-items:flex-end;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .query-mode{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .filters{
    display:flex;
    flex:1 0 auto;
    align-items:flex-end;
    gap:8px;
    min-width:max-content;
  }

  #monthFilterBox{
    flex:0 0 132px;
    width:132px;
  }

  #rangeFilterBox{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    gap:7px;
  }

  #rangeFilterBox label{
    flex:0 0 132px;
    width:132px;
  }

  #filterCompany{
    min-width:116px;
  }

  #filterVehicle{
    min-width:138px;
  }

  .filters .search{
    flex:1 1 210px;
    min-width:190px;
  }

  #filterSort{
    min-width:108px;
  }

  .filter-buttons{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Slim bookmark rail using the ORIGINAL tab buttons.
   The existing .is-active state remains the single source of truth. */
@media (min-width:901px){
  .solid-fuel-inline-tabs-row{
    position:relative;
    display:block;
    min-height:34px;
    margin:10px 0 8px 44px;
  }

  .solid-fuel-inline-tabs-row .solid-fuel-inline-quick{
    width:max-content;
    max-width:100%;
    margin:0;
    padding-left:0;
    border-left:0;
  }

  .solid-fuel-inline-tabs-row .tabs{
    position:absolute;
    left:-44px;
    top:40px;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    width:34px;
    margin:0;
    overflow:visible;
  }

  .solid-fuel-inline-tabs-row .tab{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    min-width:34px;
    height:78px;
    min-height:78px;
    margin:0;
    padding:7px 4px 14px;
    border:1px solid #cbd8e5;
    border-radius:5px 5px 1px 1px;
    background:#fff;
    color:#5a7087;
    box-shadow:0 1px 2px rgba(40,72,104,.06);
    clip-path:polygon(0 0,100% 0,100% 100%,50% 89%,0 100%);
    font-size:0;
    line-height:1;
    white-space:normal;
    overflow:visible;
  }

  .solid-fuel-inline-tabs-row .tab::before{
    display:block;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:12px;
    font-weight:900;
    line-height:1;
    letter-spacing:1px;
  }

  .solid-fuel-inline-tabs-row .tab[data-tab="unload"]::before{
    content:"하역기록";
  }

  .solid-fuel-inline-tabs-row .tab[data-tab="trouble"]::before{
    content:"이슈내역";
  }

  .solid-fuel-inline-tabs-row .tab span{
    display:none !important;
  }

  .solid-fuel-inline-tabs-row .tab.is-active{
    border-color:#74a9dc;
    background:#eaf4ff;
    color:#1764aa;
    box-shadow:0 2px 5px rgba(40,111,177,.14);
  }

  .tab-panel{
    width:calc(100% - 44px);
    margin-left:44px;
  }
}

/* Mobile/tablet: keep the original horizontal tabs and quick filters. */
@media (max-width:900px){
  .tab-panel{
    width:auto;
    margin-left:0;
  }
}
/* SOLID_FUEL_SAFE_BOOKMARK_RANGE_UI_R1_END */
/* SOLID_FUEL_BOOKMARK_RANGE_UI_R2
   Previous R1 used wide desktop breakpoints. In the Efficiency modal/embedded
   view the inner viewport is narrower, so the base <=1180px rules won.
   R2 applies the requested desktop layout from 761px upward. */
@media (min-width:761px){

  /* ===== Query controls: one horizontal row ===== */
  .query-card{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-end !important;
    gap:8px !important;
    padding:10px 12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  #queryMode.query-mode{
    order:0 !important;
    display:flex !important;
    flex:0 0 auto !important;
    align-items:flex-end !important;
    gap:4px !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  #queryMode .query-mode__button{
    min-width:auto !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 10px !important;
    white-space:nowrap !important;
  }

  #filterForm.filters{
    order:1 !important;
    display:flex !important;
    flex:1 0 auto !important;
    flex-wrap:nowrap !important;
    align-items:flex-end !important;
    gap:7px !important;
    min-width:max-content !important;
  }

  #monthFilterBox[hidden],
  #rangeFilterBox[hidden]{
    display:none !important;
  }

  #monthFilterBox{
    flex:0 0 128px !important;
    width:128px !important;
  }

  #rangeFilterBox{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:flex-end !important;
    gap:6px !important;
    width:auto !important;
    min-width:0 !important;
  }

  #rangeFilterBox label{
    flex:0 0 124px !important;
    width:124px !important;
    min-width:124px !important;
  }

  #filterForm.filters > label:not(#monthFilterBox):not(.search){
    flex:0 0 auto !important;
  }

  #filterCompany{
    width:112px !important;
    min-width:112px !important;
  }

  #filterVehicle{
    width:136px !important;
    min-width:136px !important;
  }

  #filterForm .search{
    flex:0 0 170px !important;
    width:170px !important;
    min-width:170px !important;
  }

  #filterSort{
    width:102px !important;
    min-width:102px !important;
  }

  #filterForm .filter-buttons{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:flex-end !important;
    gap:5px !important;
    grid-column:auto !important;
    white-space:nowrap !important;
  }

  #filterForm .filter-buttons .btn{
    min-width:52px !important;
    padding:0 10px !important;
  }

  /* ===== Left vertical bookmark rail ===== */
  .solid-fuel-inline-tabs-row{
    position:relative !important;
    display:block !important;
    min-height:38px !important;
    margin:10px 0 8px 44px !important;
    overflow:visible !important;
  }

  .solid-fuel-inline-tabs-row > .tabs{
    position:absolute !important;
    left:-44px !important;
    top:40px !important;
    z-index:5 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:5px !important;
    width:34px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:34px !important;
    min-width:34px !important;
    height:78px !important;
    min-height:78px !important;
    margin:0 !important;
    padding:7px 4px 14px !important;
    border:1px solid #cbd8e5 !important;
    border-radius:5px 5px 1px 1px !important;
    background:#fff !important;
    color:#5a7087 !important;
    box-shadow:0 1px 2px rgba(40,72,104,.06) !important;
    clip-path:polygon(0 0,100% 0,100% 100%,50% 89%,0 100%) !important;
    font-size:0 !important;
    line-height:1 !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab::before{
    display:block !important;
    writing-mode:vertical-rl !important;
    text-orientation:upright !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:1px !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab[data-tab="unload"]::before{
    content:"하역기록" !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab[data-tab="trouble"]::before{
    content:"이슈내역" !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab > span{
    display:none !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab.is-active{
    border-color:#74a9dc !important;
    background:#eaf4ff !important;
    color:#1764aa !important;
    box-shadow:0 2px 5px rgba(40,111,177,.14) !important;
  }

  /* Quick filters stay horizontal at the top-left of the content/table. */
  .solid-fuel-inline-tabs-row > .solid-fuel-inline-quick{
    display:flex !important;
    width:max-content !important;
    max-width:100% !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 !important;
    padding-left:0 !important;
    border-left:0 !important;
  }

  /* Shift the active panel so the bookmarks occupy their own left rail. */
  .tab-panel{
    width:calc(100% - 44px) !important;
    margin-left:44px !important;
  }
}

/* Small screens keep the original horizontal tabs. */
@media (max-width:760px){
  .solid-fuel-inline-tabs-row{
    margin-left:0 !important;
  }
  .tab-panel{
    width:auto !important;
    margin-left:0 !important;
  }
}
/* SOLID_FUEL_BOOKMARK_RANGE_UI_R2_END */
/* SOLID_FUEL_UNLOAD_TABLE_ONE_SCREEN_R1
   Fit every visible unloading column inside the desktop panel.
   The remarks column receives the remaining width and wraps naturally. */
@media (min-width:761px){
  #unloadPanel .table-wrap{
    width:100% !important;
    overflow-x:hidden !important;
  }

  #unloadPanel .unload-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  #unloadPanel .unload-table th,
  #unloadPanel .unload-table td{
    box-sizing:border-box !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }

  /* Compact fixed columns */
  #unloadPanel .unload-table .no{
    width:46px !important;
  }

  #unloadPanel .unload-table .date{
    width:96px !important;
  }

  #unloadPanel .unload-table .clock{
    width:66px !important;
  }

  #unloadPanel .unload-table .duration{
    width:72px !important;
  }

  #unloadPanel .unload-table .fuel-type{
    width:74px !important;
    min-width:0 !important;
  }

  #unloadPanel .unload-table .receipt-ton{
    width:82px !important;
    min-width:0 !important;
  }

  #unloadPanel .unload-table .company{
    width:90px !important;
  }

  #unloadPanel .unload-table .vehicle{
    width:82px !important;
  }

  #unloadPanel .unload-table .silo{
    width:66px !important;
  }

  /* Remarks gets all remaining width. */
  #unloadPanel .unload-table .unload-note{
    width:auto !important;
    min-width:0 !important;
    white-space:pre-wrap !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
    line-height:1.45 !important;
  }

  #unloadPanel .unload-table td.unload-note{
    text-align:left !important;
    vertical-align:top !important;
    font-size:12px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  /* When row actions are visible for an editor, keep them compact too. */
  #unloadPanel .unload-table .actions{
    width:62px !important;
  }
}
/* SOLID_FUEL_UNLOAD_TABLE_ONE_SCREEN_R1_END */
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R2
   Approved mockup:
   - vertical bookmarks stay on the left
   - unloading table keeps the existing one-screen widths
   - quick period controls move below the unloading table */
@media (min-width:761px){

  /* Bookmark rail no longer needs to reserve a horizontal toolbar row. */
  .solid-fuel-inline-tabs-row{
    position:relative !important;
    display:block !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .solid-fuel-inline-tabs-row > .tabs{
    position:absolute !important;
    left:0 !important;
    top:10px !important;
    z-index:5 !important;
  }

  /* Keep a dedicated 44px rail for the bookmarks. */
  #troublePanel,
  #unloadPanel{
    width:calc(100% - 44px) !important;
    margin-left:44px !important;
  }

  /* Approved location: directly below unloading history. */
  .solid-fuel-inline-quick--below{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    width:max-content !important;
    max-width:calc(100% - 44px) !important;
    margin:10px 0 0 44px !important;
    padding:0 !important;
    border:0 !important;
  }

  .solid-fuel-inline-quick--below .query-mode__button{
    min-width:44px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
  }

  /* Quick date buttons belong to unloading history only. */
  #unloadPanel[hidden] + .solid-fuel-inline-quick--below{
    display:none !important;
  }
}

@media (max-width:760px){
  .solid-fuel-inline-quick--below{
    display:flex;
    gap:5px;
    margin:8px 0 0;
  }
}
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R2_END */
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R3
   Latest approved preview:
   quick-period controls above unloading history,
   strict Remarks containment, one-screen desktop table. */
@media (min-width:761px){

  /* Quick period controls live INSIDE #unloadPanel, above its header. */
  #unloadPanel > .solid-fuel-inline-quick--above{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    width:max-content !important;
    max-width:calc(100% - 20px) !important;
    margin:8px 10px 6px !important;
    padding:0 !important;
    border:0 !important;
  }

  #unloadPanel > .solid-fuel-inline-quick--above .query-mode__button{
    min-width:44px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
  }

  /* Neutralize the old R2 below-table presentation. */
  .solid-fuel-inline-quick--below{
    display:none !important;
  }

  /* Keep the full unloading panel inside the available width. */
  #unloadPanel{
    box-sizing:border-box !important;
    max-width:calc(100% - 44px) !important;
    overflow:hidden !important;
  }

  #unloadPanel .table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #unloadPanel .unload-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  /* Slightly tighter fixed columns to reserve more width for Remarks. */
  #unloadPanel .unload-table .no{width:40px !important;}
  #unloadPanel .unload-table .date{width:86px !important;}
  #unloadPanel .unload-table .clock{width:58px !important;}
  #unloadPanel .unload-table .duration{width:66px !important;}
  #unloadPanel .unload-table .fuel-type{width:64px !important;}
  #unloadPanel .unload-table .receipt-ton{width:76px !important;}
  #unloadPanel .unload-table .company{width:82px !important;}
  #unloadPanel .unload-table .vehicle{width:74px !important;}
  #unloadPanel .unload-table .silo{width:58px !important;}
  #unloadPanel .unload-table .actions{width:64px !important;}

  /* Remarks must never draw into the Manage column. */
  #unloadPanel .unload-table th.unload-note,
  #unloadPanel .unload-table td.unload-note{
    width:auto !important;
    min-width:0 !important;
    max-width:0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    overflow:hidden !important;
    line-height:1.42 !important;
  }

  #unloadPanel .unload-table td.unload-note{
    padding:7px 8px !important;
    text-align:left !important;
    vertical-align:middle !important;
  }

  #unloadPanel .unload-table td.actions{
    position:relative !important;
    z-index:1 !important;
    background:inherit !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    padding:4px 3px !important;
  }

  #unloadPanel .unload-table td.actions .row-actions{
    gap:3px !important;
  }

  #unloadPanel .unload-table td.actions .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:25px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
}

@media (max-width:760px){
  #unloadPanel > .solid-fuel-inline-quick--above{
    display:flex;
    gap:5px;
    margin:8px 0;
  }
}
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R3_END */
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R4
   Approved preview:
   quick period row and unload summary on one line above the table,
   filtered count text, centered receipt-ton, contained remarks. */
@media (min-width:761px){

  /* Put quick buttons + title/status + note on one header row. */
  #unloadPanel > .sheet-head{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
  }

  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    flex:0 0 auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    order:0 !important;
  }

  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above .query-mode__button{
    min-width:44px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
  }

  #unloadPanel > .sheet-head > div.solid-fuel-unload-summary-inline{
    display:flex !important;
    align-items:baseline !important;
    gap:10px !important;
    flex:0 1 auto !important;
    white-space:nowrap !important;
    min-width:0 !important;
    order:1 !important;
  }

  #unloadPanel > .sheet-head > div.solid-fuel-unload-summary-inline strong{
    margin:0 !important;
  }

  #unloadPanel > .sheet-head > div.solid-fuel-unload-summary-inline #unloadStatusText{
    color:#6d8297 !important;
    font-weight:700 !important;
  }

  #unloadPanel > .sheet-head > small{
    margin-left:auto !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    order:2 !important;
  }

  /* Receipt-ton center alignment. */
  #unloadPanel .unload-table th.receipt-ton,
  #unloadPanel .unload-table td.receipt-ton{
    text-align:center !important;
  }

  /* Fallback when td class is not present: 7th column is 입고량. */
  #unloadPanel .unload-table th:nth-child(7),
  #unloadPanel .unload-table td:nth-child(7){
    text-align:center !important;
  }

  /* Keep remarks safely inside its own column. */
  #unloadPanel .unload-table th.unload-note,
  #unloadPanel .unload-table td.unload-note{
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    overflow:hidden !important;
  }

  #unloadPanel .unload-table td.actions{
    overflow:hidden !important;
  }
}

@media (max-width:760px){
  #unloadPanel > .sheet-head{
    flex-wrap:wrap !important;
  }
  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above{
    order:0;
    margin:0 0 6px 0 !important;
  }
}
/* SOLID_FUEL_APPROVED_PREVIEW_LAYOUT_R4_END */
/* SOLID_FUEL_QUERY_COMPACT_R5
   Approved preview:
   reduce oversized desktop query fields/buttons/text while preserving
   the existing one-row monthly/range layouts. */
@media (min-width:761px){

  .query-card{
    gap:7px !important;
    padding:8px 10px !important;
  }

  #queryMode.query-mode{
    gap:4px !important;
  }

  #queryMode .query-mode__button{
    height:34px !important;
    min-height:34px !important;
    padding:0 9px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:7px !important;
  }

  #filterForm.filters{
    gap:7px !important;
  }

  #filterForm.filters label{
    gap:3px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  #filterForm.filters label > span,
  #filterForm.filters label > strong{
    font-size:11px !important;
    line-height:1.1 !important;
  }

  #filterForm.filters input,
  #filterForm.filters select{
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:7px !important;
  }

  #monthFilterBox{
    width:124px !important;
    flex-basis:124px !important;
  }

  #rangeFilterBox{
    gap:6px !important;
  }

  #rangeFilterBox label{
    width:122px !important;
    min-width:122px !important;
    flex-basis:122px !important;
  }

  #filterCompany{
    width:108px !important;
    min-width:108px !important;
  }

  #filterVehicle{
    width:132px !important;
    min-width:132px !important;
  }

  #filterForm .search{
    width:166px !important;
    min-width:166px !important;
    flex-basis:166px !important;
  }

  #filterSort{
    width:98px !important;
    min-width:98px !important;
  }

  #filterForm .filter-buttons{
    gap:5px !important;
  }

  #filterForm .filter-buttons .btn{
    height:34px !important;
    min-height:34px !important;
    min-width:48px !important;
    padding:0 9px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:7px !important;
  }
}
/* SOLID_FUEL_QUERY_COMPACT_R5_END */
/* SOLID_FUEL_SEARCH_PLACEHOLDER_R6
   Approved preview:
   the integrated search field gets a little more width so the full
   guidance text "Silo / Trouble / 비고 검색" is visible on desktop. */
@media (min-width:761px){

  /* Free a little width from the vehicle field. */
  #filterVehicle{
    width:118px !important;
    min-width:118px !important;
  }

  /* Give the search field enough width for the full placeholder. */
  #filterForm .search{
    width:194px !important;
    min-width:194px !important;
    flex-basis:194px !important;
  }

  #filterForm .search::placeholder,
  #filterSearch::placeholder{
    font-size:11px !important;
    letter-spacing:-0.1px !important;
    opacity:1 !important;
  }
}
/* SOLID_FUEL_SEARCH_PLACEHOLDER_R6_END */
/* SOLID_FUEL_UNLOAD_TABLE_CLEANUP_R11_1 */
@media (min-width:761px){
  #unloadPanel > .sheet-head{
    align-items:center !important;
    min-height:52px !important;
    gap:12px !important;
  }

  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above{
    gap:8px !important;
    margin:0 !important;
  }

  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above .query-mode__button{
    height:34px !important;
    min-width:48px !important;
    padding:0 12px !important;
  }

  #unloadPanel > .sheet-head > .solid-fuel-inline-quick--above [data-unload-list-mode="day"]{
    min-width:72px !important;
    font-weight:800 !important;
  }

  #unloadPanel .table-wrap{
    overflow-x:hidden !important;
  }

  #unloadPanel .unload-table{
    width:100% !important;
    table-layout:fixed !important;
  }

  #unloadPanel .unload-table th,
  #unloadPanel .unload-table td{
    vertical-align:middle !important;
  }

  #unloadPanel .unload-table thead th{
    padding:9px 6px !important;
    text-align:center !important;
  }

  #unloadPanel .unload-table tbody td{
    padding:10px 7px !important;
    text-align:center !important;
  }

  #unloadPanel .unload-table th:nth-child(1),
  #unloadPanel .unload-table td:nth-child(1){ width:3.8% !important; }

  #unloadPanel .unload-table th:nth-child(2),
  #unloadPanel .unload-table td:nth-child(2){ width:8.4% !important; }

  #unloadPanel .unload-table th:nth-child(3),
  #unloadPanel .unload-table td:nth-child(3),
  #unloadPanel .unload-table th:nth-child(4),
  #unloadPanel .unload-table td:nth-child(4){ width:5.6% !important; }

  #unloadPanel .unload-table th:nth-child(5),
  #unloadPanel .unload-table td:nth-child(5){ width:6% !important; }

  #unloadPanel .unload-table th:nth-child(6),
  #unloadPanel .unload-table td:nth-child(6){ width:6.2% !important; }

  #unloadPanel .unload-table th:nth-child(7),
  #unloadPanel .unload-table td:nth-child(7){
    width:6.8% !important;
    text-align:center !important;
  }

  #unloadPanel .unload-table th:nth-child(8),
  #unloadPanel .unload-table td:nth-child(8){ width:7.2% !important; }

  #unloadPanel .unload-table th:nth-child(9),
  #unloadPanel .unload-table td:nth-child(9){ width:6.4% !important; }

  #unloadPanel .unload-table th:nth-child(10),
  #unloadPanel .unload-table td:nth-child(10){ width:5% !important; }

  #unloadPanel .unload-table th:nth-child(11),
  #unloadPanel .unload-table td:nth-child(11){
    text-align:left !important;
  }

  #unloadPanel .unload-table td:nth-child(11){
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
    overflow:hidden !important;
    line-height:1.4 !important;
  }

  #unloadPanel .unload-table th:nth-child(12),
  #unloadPanel .unload-table td:nth-child(12){
    width:7.5% !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  #unloadPanel .unload-table td:nth-child(12) button{
    min-width:34px !important;
    height:28px !important;
    padding:0 5px !important;
    margin:1px !important;
  }
}
/* SOLID_FUEL_UNLOAD_TABLE_CLEANUP_R11_1_END */
/* SOLID_FUEL_BOOKMARK_FIT_R13 */
/* Do not touch overflow/layout containers.
   Fit the two bookmarks inside the existing visible rail height only. */
@media (min-width:901px){
  .solid-fuel-inline-tabs-row .tabs{
    top:16px !important;
    gap:4px !important;
  }

  .solid-fuel-inline-tabs-row .tab{
    height:60px !important;
    min-height:60px !important;
    padding:5px 4px 11px !important;
  }

  .solid-fuel-inline-tabs-row .tab::before{
    font-size:11px !important;
    line-height:1 !important;
    letter-spacing:.5px !important;
  }
}
/* SOLID_FUEL_BOOKMARK_FIT_R13_END */
/* SOLID_FUEL_BOOKMARK_FIT_R13_1 */
/* Same selector specificity as the original R2 rules, but later in the file.
   This makes the compact dimensions actually override the old 78px bookmarks. */
@media (min-width:901px){
  .solid-fuel-inline-tabs-row > .tabs{
    top:8px !important;
    gap:3px !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:4px 3px 10px !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab::before{
    font-size:10.5px !important;
    line-height:1 !important;
    letter-spacing:.3px !important;
  }
}
/* SOLID_FUEL_BOOKMARK_FIT_R13_1_END */
/* SOLID_FUEL_BOOKMARK_SINGLE_COLUMN_R13_2 */
@media (min-width:901px){
  .solid-fuel-inline-tabs-row > .tabs{
    top:6px !important;
    gap:3px !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    padding:4px 3px 9px !important;
  }

  .solid-fuel-inline-tabs-row > .tabs > .tab::before{
    display:block !important;
    writing-mode:vertical-rl !important;
    text-orientation:upright !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
}
/* SOLID_FUEL_BOOKMARK_SINGLE_COLUMN_R13_2_END */
/* SOLID_FUEL_UNLOAD_TONNAGE_SUMMARY_STYLE_R14
   One compact value only; amount follows the currently visible quick-filter rows. */
@media (min-width:761px){
  #solidFuelUnloadTonnageSummary.solid-fuel-unload-tonnage-summary{
    order:2 !important;
    margin-left:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:34px !important;
    padding:5px 12px !important;
    border:1px solid #bdd7f2 !important;
    border-radius:9px !important;
    background:#f4f9ff !important;
    color:#486b8d !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  #solidFuelUnloadTonnageSummary > span{
    font-size:11px !important;
    font-weight:800 !important;
    color:#5b7895 !important;
  }

  #solidFuelUnloadTonnageSummary .solid-fuel-unload-tonnage-summary__value{
    margin:0 !important;
    font-size:17px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#1769b6 !important;
    font-variant-numeric:tabular-nums !important;
    letter-spacing:-.02em !important;
  }

  #unloadPanel > .sheet-head > small{
    order:3 !important;
    margin-left:0 !important;
  }
}

@media (max-width:760px){
  #solidFuelUnloadTonnageSummary.solid-fuel-unload-tonnage-summary{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:34px !important;
    padding:6px 10px !important;
    border:1px solid #bdd7f2 !important;
    border-radius:9px !important;
    background:#f4f9ff !important;
    width:100% !important;
  }

  #solidFuelUnloadTonnageSummary > span{
    font-size:11px !important;
    font-weight:800 !important;
    color:#5b7895 !important;
  }

  #solidFuelUnloadTonnageSummary .solid-fuel-unload-tonnage-summary__value{
    font-size:16px !important;
    font-weight:900 !important;
    color:#1769b6 !important;
    font-variant-numeric:tabular-nums !important;
  }
}
/* SOLID_FUEL_UNLOAD_TONNAGE_SUMMARY_STYLE_R14_END */
/* SOLID_FUEL_EMERGENCY_CONTACTS_V1 */
#contactManageBtn.contact-directory-button{gap:5px;border-color:#91c9be;background:#edf8f5;color:#086f5e;font-weight:900}
#contactManageBtn.contact-directory-button:hover{background:#dff3ed}
#contactManageBtn span{font-size:14px;line-height:1}
#contactModal .contact-manager-card{display:flex;flex-direction:column;width:min(900px,100%);max-height:92vh;max-height:calc(100dvh - 32px);overflow:hidden;border-radius:14px}
#contactModal .modal-head{flex:none;padding:17px 20px;border-bottom:1px solid #dbe6ee;background:#f7fbfc}
#contactModal .modal-head>div{min-width:0}
#contactModal .modal-head h2{display:flex;align-items:center;gap:9px;margin:3px 0 0;color:#173b5d;font-size:21px;letter-spacing:-.035em}
#contactModal .modal-head>div>span{color:#50857c;font-size:9px;letter-spacing:.12em}
#contactModal .modal-head p{margin:6px 0 0;color:#667d90;font-size:11px;line-height:1.5}
#contactModal #contactCount{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:23px;padding:0 7px;border:1px solid #bddfd6;border-radius:7px;background:#ebf7f2;color:#16735f;font-size:12px;font-weight:850;letter-spacing:0}
#contactModal .contact-manager{min-height:0;padding:15px 20px 16px;overflow:auto;overscroll-behavior:contain}
#contactModal .contact-toolbar{display:flex;align-items:center;gap:7px}
#contactModal .contact-search{display:block;flex:1;min-width:0;margin:0}
#contactModal input{box-sizing:border-box;width:100%;min-width:0;height:36px;padding:0 10px;border:1px solid #c8d9e5;border-radius:7px;background:#fff;color:#213e53;font-size:12px;line-height:1.2}
#contactModal input:focus{outline:2px solid #49a997;outline-offset:1px;border-color:#399e89}
#contactModal .contact-toolbar>.btn{flex:none;min-height:36px;padding:0 12px;font-size:11px}
#contactModal .contact-status{margin:12px 1px 8px;color:#6b8194;font-size:11px;line-height:1.5}
#contactModal .contact-status.is-error,#contactModal .contact-form-status.is-error{color:#a33e35}
#contactModal .contact-table-wrap{overflow:hidden;border:1px solid #d5e2eb;border-radius:9px;background:#fff}
#contactModal .contact-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;text-align:left}
#contactModal .contact-table th{padding:10px 13px;border-bottom:1px solid #dbe6ee;background:#f1f6f9;color:#547087;font-size:10px;font-weight:850;text-align:left}
#contactModal .contact-table th:nth-child(1){width:25%}
#contactModal .contact-table th:nth-child(2){width:17%}
#contactModal .contact-table th:nth-child(3){width:35%}
#contactModal .contact-table th:nth-child(4){width:23%}
#contactModal .contact-table td{padding:10px 13px;border-bottom:1px solid #e3edf2;color:#344f63;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
#contactModal .contact-table tr:last-child td{border-bottom:0}
#contactModal .contact-company strong{color:#24465e;font-size:12px;font-weight:850}
#contactModal .contact-driver{font-weight:700}
#contactModal .contact-number{font-variant-numeric:tabular-nums}
#contactModal .contact-phone{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:5px 8px;border:1px solid #cce3dc;border-radius:7px;background:#f2faf6;color:#086c54;font-size:13px;font-weight:850;text-decoration:none;overflow-wrap:anywhere}
#contactModal .contact-phone:hover{border-color:#65ad97;background:#e5f6ed}
#contactModal .contact-phone:focus-visible,#contactManageBtn:focus-visible{outline:2px solid #278a75;outline-offset:2px}
#contactModal .contact-phone>span{font-size:13px;font-weight:400}
#contactModal .contact-phone.is-invalid{border-color:#dbe3e9;background:#f8fafb;color:#718393}
#contactModal .contact-actions{white-space:nowrap}
#contactModal .contact-actions .btn{min-height:29px;padding:0 9px;font-size:10px}
#contactModal .contact-actions .btn+.btn{margin-left:5px}
#contactModal .contact-empty{padding:34px 15px!important;color:#7890a1!important;text-align:center!important;font-size:12px!important;line-height:1.7!important}
#contactModal .contact-editor{margin:12px 0 0;padding:13px;border:1px solid #b9dbd1;border-radius:9px;background:#f4faf7}
#contactModal .contact-editor>strong{display:block;margin-bottom:10px;color:#1f6857;font-size:12px;font-weight:850}
#contactModal .contact-editor-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:10px}
#contactModal .contact-editor-grid label{display:block;min-width:0;margin:0}
#contactModal .contact-editor-grid label>span{display:block;margin-bottom:5px;color:#526d7d;font-size:10px;font-weight:800}
#contactModal .contact-editor-grid em{margin-left:3px;color:#718f88;font-size:9px;font-style:normal;font-weight:700}
#contactModal .contact-form-status{margin:9px 0 0;color:#507061;font-size:11px;line-height:1.6}
#contactModal .contact-editor-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:11px}
#contactModal .contact-editor-actions .btn{min-height:32px;min-width:57px;font-size:11px}
#contactModal .contact-footer{margin-top:13px;padding:0}
#contactModal .contact-footer .btn{min-height:33px;min-width:65px}
#contactModal .contact-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
  #contactManageBtn.contact-directory-button{display:inline-flex!important;min-height:34px;padding:0 10px;font-size:11px}
  #contactManageBtn[hidden]{display:none!important}
  #contactModal{display:flex;align-items:flex-end;padding:7px}
  #contactModal[hidden]{display:none!important}
  #contactModal .contact-manager-card{width:100%;max-height:94vh;max-height:calc(100dvh - 14px);border-radius:13px 13px 8px 8px}
  #contactModal .modal-head{padding:14px}
  #contactModal .modal-head h2{font-size:20px}
  #contactModal .modal-head p{max-width:250px;font-size:11px}
  #contactModal .contact-manager{padding:12px 12px 14px}
  #contactModal .contact-toolbar{display:grid;grid-template-columns:1fr auto;gap:7px}
  #contactModal .contact-search{grid-column:1/-1}
  #contactModal .contact-toolbar>.btn{min-height:36px;font-size:12px}
  #contactModal #contactRefresh{justify-self:start}
  #contactModal #contactNew{justify-self:end}
  #contactModal input{height:41px;font-size:16px}
  #contactModal .contact-status{font-size:11px}
  #contactModal .contact-table-wrap{overflow:visible;border:0;background:transparent}
  #contactModal .contact-table,#contactModal .contact-table tbody{display:block;width:100%;min-width:0}
  #contactModal .contact-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  #contactModal .contact-table tbody{display:grid;gap:8px}
  #contactModal .contact-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;padding:12px;border:1px solid #d5e3e9;border-radius:9px;background:#fff}
  #contactModal .contact-table td{display:block;min-width:0;padding:0;border:0;font-size:13px}
  #contactModal .contact-company{grid-column:1;grid-row:1}
  #contactModal .contact-company strong{font-size:14px}
  #contactModal .contact-driver{grid-column:1;grid-row:2;margin-top:4px;color:#6c8293;font-size:12px}
  #contactModal .contact-driver::before{content:"기사 · ";font-weight:500}
  #contactModal .contact-number{grid-column:1;grid-row:3;margin-top:9px}
  #contactModal .contact-phone{min-height:37px;padding:6px 9px;font-size:15px}
  #contactModal .contact-actions{grid-column:2;grid-row:1/4;display:flex!important;align-items:flex-start;justify-content:flex-end;gap:4px;padding-left:8px!important}
  #contactModal .contact-actions .btn{min-height:31px;padding:0 7px;font-size:10px}
  #contactModal .contact-actions .btn+.btn{margin-left:0}
  #contactModal .contact-empty{grid-column:1/-1;padding:22px 6px!important}
  #contactModal .contact-editor{padding:12px;margin-top:10px}
  #contactModal .contact-editor-grid{grid-template-columns:1fr 1fr;gap:10px 8px}
  #contactModal .contact-editor-grid label:last-child{grid-column:1/-1}
  #contactModal .contact-editor-grid label>span{font-size:11px}
  #contactModal .contact-editor-actions .btn{min-height:36px;min-width:62px;font-size:12px}
}
@media(max-width:370px){
  #contactModal .contact-table tr{grid-template-columns:minmax(0,1fr)}
  #contactModal .contact-actions{grid-column:1;grid-row:4;margin-top:9px;justify-content:flex-start;padding-left:0!important}
}