/* =====================================================================
   기업SME 관리 — 공통 스타일
   프로토타입(sme-prototype.html)의 스타일을 그대로 가져왔다.
   프로토타입에 있던 @media 중첩 오류 한 곳만 고쳤다 (.btn.pri 다크모드).
   ===================================================================== */
:root{
    --bg:#F4F6F8; --panel:#FFFFFF; --panel2:#EEF2F5; --sunken:#E4EAEF;
    --ink:#0B1016; --ink2:#333F4C; --muted:#586674; --faint:#77848F;
    --line:#CBD5DE; --line2:#9FAEBB;
    /*
     | 줄무늬와 마우스가 놓인 줄.
     |
     | 칸이 마흔 개가 넘어 한 줄을 눈으로 따라가기 어렵다. 처음에는 흰색(#FFFFFF)과
     | #F5F8FA 로 두었는데 너무 옅어 구분이 안 된다는 지적을 받았다
     | (발주사 2026-10-09). 줄무늬를 또렷하게 하고, 마우스가 놓인 줄은 아예 다른
     | 색(--rowhover)으로 둔다 — 전에는 단추 바탕색(--panel2)을 같이 써서
     | 줄무늬와 거의 같아 보였다.
     |
     | 강조 칸(mark)은 마우스가 놓여도 제 색을 지킨다. 그래서 그 칸에도 짝이 되는
     | 진한 색을 하나씩 둔다 — 안 두면 마우스를 올린 줄에서 강조 칸만 밝아 보인다.
     */
    --row2:#EFF3F7;
    --rowhover:#D3E4F6;
    --brand:#1F4E79; --brand-soft:#E4EEF7; --brand-ink:#1F4E79;
    --good:#2C6B4A; --good-bg:#E2F0E8;
    --warn:#8A6410; --warn-bg:#F8EEDA; --warn-bg2:#F0E0BF;
    --stop:#9E3232; --stop-bg:#F8E7E7;
    --cool:#26647A; --cool-bg:#D7E9F0; --cool-bg2:#C3DDE7;
    --sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    --mono:"IBM Plex Mono","D2Coding",ui-monospace,monospace;
    --r:5px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0D1218; --panel:#141C24; --panel2:#1B242D; --sunken:#0F171E;
      --ink:#F0F5F9; --ink2:#C6D1DC; --muted:#9AA8B5; --faint:#7C8A95;
      --line:#2E3C48; --line2:#4A5A67;
      --row2:#19212A; --rowhover:#27384A;
      --brand:#7EB3DE; --brand-soft:#16273A; --brand-ink:#9AC8EA;
      --good:#79C39C; --good-bg:#152720;
      --warn:#DCB166; --warn-bg:#2A2313; --warn-bg2:#3A3018;
      --stop:#E08B8B; --stop-bg:#2C1A1A;
      --cool:#7EBDCE; --cool-bg:#152E38; --cool-bg2:#1E3F4C;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1218; --panel:#141C24; --panel2:#1B242D; --sunken:#0F171E;
    --ink:#F0F5F9; --ink2:#C6D1DC; --muted:#9AA8B5; --faint:#7C8A95;
    --line:#2E3C48; --line2:#4A5A67;
    --row2:#19212A; --rowhover:#27384A;
    --brand:#7EB3DE; --brand-soft:#16273A; --brand-ink:#9AC8EA;
    --good:#79C39C; --good-bg:#152720;
    --warn:#DCB166; --warn-bg:#2A2313; --warn-bg2:#3A3018;
    --stop:#E08B8B; --stop-bg:#2C1A1A;
    --cool:#7EBDCE; --cool-bg:#152E38; --cool-bg2:#1E3F4C;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13.5px;
       line-height:1.55;-webkit-font-smoothing:antialiased;}
  button,input,select{font-family:inherit;font-size:inherit;color:inherit;}
  :focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

  /* ── 셸 ───────────────────────────────── */
  .app{display:grid;grid-template-columns:212px 1fr;min-height:100vh;}
  .side{background:var(--panel);border-right:1px solid var(--line);padding:16px 0;}
  .brandrow{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:12px;}
  .brandrow .t{font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
  .brandrow .s{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:3px;}
  .navgrp{padding:0 10px;margin-bottom:14px;}
  .navgrp h4{margin:0 0 6px;padding:0 8px;font-size:10.5px;letter-spacing:.11em;
             text-transform:uppercase;color:var(--faint);font-weight:600;font-family:var(--mono);}
  .navgrp a{display:block;padding:7px 10px;border-radius:var(--r);color:var(--ink2);
            text-decoration:none;font-size:13px;}
  .navgrp a:hover{background:var(--panel2);}
  .navgrp a[aria-current]{background:var(--brand-soft);color:var(--brand-ink);font-weight:600;}

  .main{min-width:0;display:flex;flex-direction:column;}
  .top{background:var(--panel);border-bottom:1px solid var(--line);
       padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .crumb{font-size:12px;color:var(--muted);font-family:var(--mono);}
  .crumb b{color:var(--ink2);font-weight:500;}
  .top .sp{flex:1;}
  .who{font-size:12px;color:var(--muted);}

  .body{padding:18px 20px 60px;min-width:0;}
  h1.pg{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0 0 3px;}
  .pgsub{font-size:12.5px;color:var(--muted);margin:0 0 16px;}

  /* ── KPI ──────────────────────────────── */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
        gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
        overflow:hidden;margin-bottom:16px;}
  .kpi{background:var(--panel);padding:12px 14px;}
  .kpi .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
          font-family:var(--mono);margin:0 0 5px;}
  .kpi .v{font-size:21px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0;}
  .kpi .v small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px;}

  /* ── 검색 ─────────────────────────────── */
  .card{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
        box-shadow:0 1px 2px rgba(16,26,36,.05);}
  /* 검색줄은 칸 이름을 따로 쓰지 않는다 — 셀렉트의 첫 줄이 곧 이름이다.
     이름줄이 사라진 만큼 세로 여백을 줄여 목록이 위로 올라오게 한다. */
  .search{padding:10px 12px;margin-bottom:10px;}
  .frow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
  .fld{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .fld label{font-size:12px;color:var(--ink2);font-weight:600;}
  .fld input,.fld select{background:var(--panel);border:1px solid var(--line2);
    border-radius:4px;padding:5px 8px;min-width:110px;}
  .fld input:focus,.fld select:focus{border-color:var(--brand);}
  .fld.grow{flex:1;min-width:160px;}
  .fld.grow input{width:100%;}
  /* 날짜는 열 자리면 충분하다. 자리를 넓게 잡으면 한 줄에 다 들어가지 않는다. */
  .fld input.dt.sm{min-width:0;width:104px;text-align:center;}

  .btn{border:1px solid var(--line2);background:var(--panel);border-radius:4px;
       padding:6px 13px;cursor:pointer;font-weight:500;white-space:nowrap;}
  .btn:hover{background:var(--panel2);}
  .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;}
  :root[data-theme="dark"] .btn.pri{color:#0D1218;}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .btn.pri{color:#0D1218;}
  }
  .btn.pri:hover{filter:brightness(1.08);}
  .btn.sm{padding:4px 9px;font-size:12px;}
  .btn.link{border:none;background:none;color:var(--brand-ink);padding:4px 2px;text-decoration:underline;}

  .more{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
  .more[hidden]{display:none;}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
  .chip{font-size:11.5px;background:var(--brand-soft);color:var(--brand-ink);
        border-radius:20px;padding:3px 10px;display:inline-flex;gap:6px;align-items:center;}
  .chip button{border:none;background:none;cursor:pointer;color:inherit;font-size:13px;line-height:1;padding:0;}

  /* 자동완성 */
  .ac{position:relative;}
  .aclist{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--panel);
          border:1px solid var(--line2);border-top:none;border-radius:0 0 4px 4px;
          max-height:190px;overflow:auto;box-shadow:0 6px 18px rgba(0,0,0,.10);}
  .aclist[hidden]{display:none;}
  .aclist div{padding:6px 10px;cursor:pointer;font-size:12.5px;}
  .aclist div:hover,.aclist div.on{background:var(--brand-soft);}
  .aclist .none{color:var(--muted);cursor:default;}

  /* ── 툴바 ─────────────────────────────── */
  .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
  .bar .sp{flex:1;}
  .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .count b{color:var(--ink);font-weight:600;}

  .pop{position:relative;}
  .popmenu{position:absolute;top:calc(100% + 5px);right:0;z-index:30;background:var(--panel);
           border:1px solid var(--line2);border-radius:var(--r);padding:8px;
           box-shadow:0 10px 26px rgba(0,0,0,.13);width:220px;max-height:290px;overflow:auto;}
  .popmenu[hidden]{display:none;}
  .popmenu label{display:flex;gap:8px;align-items:center;padding:5px 7px;border-radius:4px;
                 font-size:12.5px;cursor:pointer;}
  .popmenu label:hover{background:var(--panel2);}

  /* ── 표 ───────────────────────────────── */
  .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);}
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;}
  th{position:sticky;top:0;z-index:2;background:var(--panel2);text-align:left;
     font-size:11.5px;letter-spacing:.02em;font-weight:700;color:var(--ink2);
     font-family:var(--sans);padding:9px 11px;border-bottom:2px solid var(--line2);white-space:nowrap;}
  th.srt{cursor:pointer;user-select:none;}
  th.srt:hover{color:var(--ink);}
  th .dir{color:var(--brand-ink);}
  td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle;
     color:var(--ink);white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  /* 한 줄 걸러 바탕을 살짝 달리한다 — 칸이 많아 눈이 줄을 놓치기 쉽다 */
  tbody tr:nth-child(even) td{background:var(--row2);}
  tbody tr:hover td{background:var(--rowhover);}
  /*
   | 체크한 줄 — 마우스 올린 줄과 <같은 세기>로 둔다 (발주사 2026-10-09).
   | 전에는 상표색 연한 바탕이어서, 한 줄 걸러 바탕과 세기가 비슷해
   | 어느 줄을 체크했는지 한눈에 안 보였다.
   */
  tbody tr.sel td{background:var(--rowhover);}
  td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);}
  td.nm{color:var(--ink);font-weight:500;}
  td.nm a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2);}
  td.nm a:hover{border-bottom-color:var(--brand);color:var(--brand-ink);}
  /*
   | 선택칸 — <표의 칸>에만 걸어야 한다.
   | 그냥 .chk 로 두었더니 로그인 화면의 「로그인 유지」 라벨(class="chk")까지 34px 로
   | 좁혀져 글자가 한 자씩 줄바꿈됐다. 상품내역 폼도 같은 이유로 되돌리는 규칙을 두고 있었다.
   */
  th.chk,td.chk{width:34px;text-align:center;}
  /* 칸 사이 세로선 — 가로로 긴 표에서 값이 어느 칸의 것인지 또렷해진다 */
  th + th,td + td{border-left:1px solid var(--line);}
  .empty{padding:40px;text-align:center;color:var(--muted);}

  .pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap;}
  .s-ACQUIRED{background:var(--cool-bg);color:var(--cool);}
  .s-PROGRESS{background:var(--warn-bg);color:var(--warn);}
  .s-OPENED{background:var(--good-bg);color:var(--good);}
  .s-HOLD{background:var(--sunken);color:var(--muted);}
  .s-CANCELED{background:var(--stop-bg);color:var(--stop);}
  .s-TERMINATED{background:var(--stop-bg);color:var(--stop);}
  .s-RELEASED{background:var(--panel2);color:var(--ink2);border:1px solid var(--line2);}
  .sub{display:inline-block;font-size:10.5px;margin-left:4px;padding:1px 6px;border-radius:3px;
       background:var(--warn-bg);color:var(--warn);font-weight:600;}

  /* ── 일괄수정 ─────────────────────────── */
  /* 제목·칸·단추가 모두 한 줄에 선다. 좁아지면 접힌다. */
  .bulk{margin-top:10px;padding:10px 12px;}
  .bulk h3{margin:0 10px 0 0;font-size:12.5px;font-weight:600;white-space:nowrap;}
  .allrow{display:inline-flex;gap:5px;align-items:center;padding:5px 9px;
          background:var(--panel2);border-radius:4px;font-size:12px;color:var(--ink2);
          white-space:nowrap;cursor:pointer;}
  .allrow input{margin:0;}
  /* 설명이 붙는 전체적용 줄 — 실적 일괄수정처럼 지우는 범위가 넓은 화면에서 쓴다 */
  .allrow.wrap{display:flex;align-items:flex-start;white-space:normal;
               margin-top:9px;padding:8px 11px;line-height:1.55;}
  .allrow.wrap input{margin-top:3px;flex:0 0 auto;}
  .allrow.wrap b{color:var(--ink);}
  /* 일괄수정의 금액 칸도 좁게 — 열여덟 칸이 한 덩이로 서야 한다 */
  .bulk .fld input.num{min-width:0;width:104px;text-align:right;}
  .bulkact{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}

  /* 업체 상세 안에 붙는 일괄수정 — 카드 안의 한 덩이라 테두리 대신 윗줄로만 나눈다 */
  .bulk.inline{margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);
               background:none;box-shadow:none;border-radius:0;}
  .bulk.inline h4{margin:0 10px 0 0;font-size:12.5px;font-weight:600;
                  white-space:nowrap;color:var(--ink);}
  .bulk.inline .note2{width:100%;margin:8px 0 0;font-size:11.5px;
                      color:var(--muted);line-height:1.6;}
  .bulk.inline .note2 b{color:var(--ink2);}

  /* 상품내역 Log 의 「관리」 칸 — 삭제 폼을 표 밖으로 뺐으므로 단추끼리 붙는다 */
  .det table td .btn.xs + .btn.xs{margin-left:4px;}

  /* ── 토스트 ───────────────────────────── */
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
         background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:6px;
         font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.22);max-width:88vw;}
  .toast[hidden]{display:none;}
  .toast.bad{background:var(--stop);color:#fff;}

  /* ── 데모 배너 ────────────────────────── */
  .demo{background:var(--warn-bg);color:var(--warn);border:1px solid currentColor;
        border-radius:var(--r);padding:9px 13px;font-size:12px;margin-bottom:14px;}
  .demo b{font-weight:700;}

  /* ── 반응형: 표 → 카드 ────────────────── */
  @media (max-width:900px){
    .app{grid-template-columns:1fr;}
    .side{display:none;}
    .body{padding:14px 12px 60px;}
    .tblwrap{border:none;background:none;overflow:visible;}
    table,thead,tbody,th,td,tr{display:block;}
    thead{display:none;}
    tbody tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
             margin-bottom:9px;padding:11px 13px;position:relative;}
    tbody tr.sel{border-color:var(--brand);}
    td{border:none;padding:3px 0;white-space:normal;display:flex;justify-content:space-between;gap:14px;}
    td::before{content:attr(data-l);color:var(--faint);font-size:11px;flex-shrink:0;}
    td.chk{position:absolute;top:11px;right:11px;padding:0;}
    td.chk::before{content:"";}
    td.nm{font-size:14px;padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--line);}
    td.nm::before{content:"";}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ── 페이지 이동 ─────────────────────────
   Laravel 기본 뷰(Tailwind) 대신 쓰는 전용 스타일.
   resources/views/vendor/pagination/sme.blade.php 와 짝을 이룬다. */
.pager{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;
        min-width:31px;height:31px;padding:0 9px;
        border:1px solid var(--line2);border-radius:4px;background:var(--panel);
        color:var(--ink2);text-decoration:none;font-size:12.5px;
        font-variant-numeric:tabular-nums;}
.pg-btn:hover{background:var(--panel2);color:var(--ink);}
.pg-btn.is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}
:root[data-theme="dark"] .pg-btn.is-on{color:#0D1218;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pg-btn.is-on{color:#0D1218;}
}
.pg-btn.is-off{color:var(--faint);background:var(--sunken);cursor:default;}
.pg-gap{color:var(--faint);padding:0 3px;}
.pg-info{margin-left:8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* ── 기간 프리셋 ─────────────────────────
   현행 검색폼의 라디오 5종을 버튼으로 옮긴 것. */
.presets{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:7px;}
.presets-l{font-size:11px;color:var(--muted);font-weight:500;margin-right:2px;}
/* 기간 단추 줄의 셀렉트 — 단추와 높이를 맞추고 앞에 한 칸 띄운다.
   폭은 내용에 맞춘다. 74px 로 못박아 두면 「업무요청log」가 잘린다. */
.presets .fld{margin-left:8px;}
.presets .fld select{min-width:0;width:auto;padding:4px 6px;font-size:12px;}
/* 리스트수만 폭을 고정한다 — 「200개」까지라 이만큼이면 넉넉하다 */
.presets .fld select.rows{width:74px;}

/* ── 여러 개 고르는 검색칸 ─────────────────
   셀렉트로는 여러 개를 고르기 어렵다 (Ctrl+클릭, 세로로 길어짐).
   단추를 누르면 체크박스 목록이 열리고 고른 개수가 단추에 적힌다.
   붙이는 일은 public/js/multipick.js 가 한다. */
.mpick{position:relative;}
.mpick-btn{border:1px solid var(--line2);background:var(--panel);border-radius:4px;
  padding:5px 22px 5px 8px;cursor:pointer;white-space:nowrap;min-width:110px;
  text-align:left;color:var(--ink);font:inherit;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
/* 셀렉트처럼 보이게 꺾쇠를 하나 둔다 */
.mpick-btn::after{content:"";position:absolute;right:8px;top:50%;margin-top:-2px;
  border:4px solid transparent;border-top-color:var(--muted);pointer-events:none;}
.mpick-btn:hover{background:var(--panel2);}
.mpick.on .mpick-btn{border-color:var(--brand);color:var(--brand-ink);font-weight:600;}
.mpick-menu{position:absolute;z-index:40;top:calc(100% + 4px);left:0;
  min-width:230px;max-height:340px;overflow:auto;padding:6px;
  background:var(--panel);border:1px solid var(--line2);border-radius:6px;
  box-shadow:0 6px 18px rgba(16,26,36,.16);}
.mpick-menu[hidden]{display:none;}
.mpick-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:2px 4px 6px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.mpick-cap{font-size:11px;color:var(--muted);}
.mpick-clear{border:none;background:none;color:var(--brand-ink);font-size:11.5px;
  cursor:pointer;text-decoration:underline;padding:2px;}
.mpick-g{font-size:11px;color:var(--muted);font-weight:600;padding:7px 4px 2px;}
.mpick-g:first-child{padding-top:2px;}
.mpick-list label{display:flex;align-items:center;gap:6px;padding:3px 4px;
  border-radius:4px;cursor:pointer;white-space:nowrap;font-size:13px;}
.mpick-list label:hover{background:var(--sunken);}
.mpick-none{font-size:12px;color:var(--faint);padding:6px 4px;}

/* 기간 단추 줄 안에서는 단추 높이·글씨를 그 줄에 맞춘다 */
.presets .mpick-btn{padding:4px 20px 4px 6px;font-size:12px;min-width:0;}

/* ── 특이사항 칸 ─────────────────────────
   상품 구성 + 비고가 들어가 가장 길다. 한 줄로 흘리되 폭을 제한한다. */
td.wide{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){
  td.wide{max-width:none;white-space:normal;overflow:visible;}
}

/* ── 셀 안의 보조 값 ─────────────────────
   상품 칸의 수수료 금액, 사은품·대납의 송금일처럼
   한 칸에 두 값이 들어갈 때 아래에 작게 붙인다. */
.cell-sub{
  display:block;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;font-family:var(--mono);margin-top:1px;
}
td.nm .cell-sub{font-family:var(--sans);}

/*
 | 주정산 딱지 — 협력업체 대시보드의 이름 아래에 붙는다.
 | 몇 안 되는 유치자라 글로 적으면 묻힌다. 색은 상태 딱지와 같은 갈래로 골랐다.
 */
.tag-main{
  display:inline-block;margin-top:2px;padding:1px 6px;border-radius:3px;
  font-size:10.5px;font-weight:600;font-family:var(--sans);white-space:nowrap;
  background:var(--warn-bg,#F8EEDA);color:var(--warn,#8A6410);
}

/* ── 목록 아래 합계 두 줄 ────────────── */
tfoot .sumrow td{
  background:var(--panel2);border-top:1px solid var(--line2);
  font-weight:600;color:var(--ink);
}
tfoot .sumrow.money td{background:var(--brand-soft);color:var(--brand-ink);}

/* 회선 줄 — 상품별 회선수를 이름과 함께 한 줄에 늘어놓는다.
   칸에 맞추지 않는다: 여섯 개를 좁은 칸에 욱여넣으면 어느 숫자가 무엇인지 알 수 없다. */
tfoot .sumrow.qtyrow td{background:var(--panel2);}

/* 줄마다 붙는 「수정」 칸 — 값이 아니라 조작 칸이라 좁게 두고 가운데로 세운다.
   줄을 눌러 상세로 가는 손 모양도 여기서는 내지 않는다. */
.tblwrap th.act,.tblwrap td.act{width:1%;white-space:nowrap;text-align:center;}
tbody tr.rowlink td.act{cursor:default;}
.qtystrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.qtystrip .q{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--line2);border-radius:4px;background:var(--panel);}
.qtystrip .q i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted);}
.qtystrip .q b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;}
/* 소계·합계는 담당자가 찾는 수라 눈에 띄게 둔다 */
.qtystrip .q.subtot{background:var(--brand-soft);border-color:transparent;}
.qtystrip .q.subtot i,.qtystrip .q.subtot b{color:var(--brand-ink);}

/* ── 협력업체 대시보드 ──────────────── */
.dash{margin-top:14px;padding:14px;}
.dash h3{margin:0 0 3px;font-size:13.5px;font-weight:600;}
.dash .note{font-size:12px;color:var(--muted);margin:0 0 12px;}
.dash .note b{color:var(--ink2);}
.dashwrap table{font-size:12px;}
.dashwrap td,.dashwrap th{padding:7px 9px;}

/* 현행에서 노란색으로 강조하던 칸 — 정산의 핵심 수치 */
.dashwrap th.mark{background:var(--warn-bg);color:var(--warn);}
.dashwrap td.mark{background:var(--warn-bg);color:var(--ink);font-weight:600;}

.dashwrap tr.coderow td{background:var(--sunken);}
.dashwrap tr.coderow td.mark{background:var(--warn-bg);}
.dashwrap tr.gaprow td{height:10px;padding:0;background:var(--bg);border-bottom:1px solid var(--line2);}
.dashwrap tr.dashsum td{background:var(--cool-bg);color:var(--cool);font-weight:600;}

/* 소계·합계 칸 — 노란 강조(mark)나 합계 줄(dashsum)과 다른 색으로 둔다.
   줄 배경을 덮어야 하므로 그 규칙들보다 뒤에 온다. */
.dashwrap th.subtot,
.dashwrap td.subtot,
.dashwrap tr.coderow td.subtot,
.dashwrap tr.dashsum td.subtot{background:var(--brand-soft);color:var(--brand-ink);font-weight:700;}

/* ── 브라우저 화면 하단에 고정되는 가로 스크롤바 ──
   표 안쪽 스크롤바는 표 밑에 생겨서, 넓은 표를 좌우로 움직이려면
   그 위치까지 내려가야 했다. 같은 폭의 스크롤바를 화면 맨 아래에 붙여 두고
   JS(smeStickyScroll)가 양쪽 위치를 맞춘다.
   표마다 하나씩 만들어지고, 그 표가 화면에 보이는 동안에만 나타난다. */
.hscroll{
  position:fixed;
  bottom:0;
  z-index:70;
  overflow-x:auto;
  overflow-y:hidden;
  background:var(--panel);
  border-top:1px solid var(--line2);
  box-shadow:0 -4px 12px rgba(0,0,0,.10);
}
.hscroll[hidden]{display:none;}
.hscroll > div{height:1px;}

/* 스크롤바가 항상 보이게 (macOS 의 자동 숨김 방지) */
.hscroll{scrollbar-width:auto;scrollbar-color:var(--line2) var(--panel2);}
.hscroll::-webkit-scrollbar{height:13px;}
.hscroll::-webkit-scrollbar-track{background:var(--panel2);}
.hscroll::-webkit-scrollbar-thumb{
  background:var(--line2);border-radius:7px;border:3px solid var(--panel2);
}
.hscroll::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* 하단 고정 스크롤바가 켜진 표는 자기 스크롤바를 숨긴다 — 두 줄이 되지 않게 */
.tblwrap.no-native-bar{scrollbar-width:none;}
.tblwrap.no-native-bar::-webkit-scrollbar{display:none;}

/* 마지막 내용이 스크롤바에 가리지 않도록 여유 */
.body{padding-bottom:78px;}

/* ── 좌우 구분선 ─────────────────────────
   위아래 줄만 있으면 컬럼이 많을 때 눈이 옆줄을 놓친다.
   표·일괄수정·대시보드 모두 세로 구분선을 넣는다. */
table th,
table td{border-right:1px solid var(--line);}
table th{border-right-color:var(--line2);}
table th:last-child,
table td:last-child{border-right:none;}

/* 체크박스·번호처럼 붙어 있는 앞칸은 선을 진하게 해 본문과 갈라 준다 */
td.chk,th.chk{border-right-color:var(--line2);}

/* 눈에 띄어야 하는 칸 — 업체 상세의 하부지급수수료.
   담당자가 표에서 제일 자주 찾는 숫자라 다른 금액칸과 바탕을 달리한다.
   합계 줄에도 같은 바탕을 준다 — 합계 줄만 색이 끊기면 칸이 어디까지인지 흐려진다.
   합계 줄(.sumrow.money td)보다 뒤에 두어야 그 배경을 덮는다. */
.tblwrap th.mark{background:var(--warn-bg);color:var(--warn);}
.tblwrap td.mark{background:var(--warn-bg);color:var(--ink);font-weight:600;}
.tblwrap tbody tr:hover td.mark{background:var(--warn-bg2);}

/*
 | 영업이익 — 하부지급수수료와 <다른> 바탕색으로 둔다 (발주사 2026-10-09).
 |
 | 담당자가 제일 자주 보는 칸이 둘인데 같은 색이면 눈이 두 칸을 구별하지 못한다.
 | 하부지급수수료는 노란 계열(warn), 영업이익은 청록 계열(cool)로 갈라 둔다.
 | 글자색은 tone 이 따로 맡는다 — 여기는 바탕만 바꾼다.
 */
.tblwrap th.mark.profit{background:var(--cool-bg);color:var(--cool);}
.tblwrap td.mark.profit{background:var(--cool-bg);color:var(--ink);font-weight:600;}
.tblwrap tbody tr:hover td.mark.profit{background:var(--cool-bg2);}
.tblwrap tfoot .sumrow.money td.mark.profit{background:var(--cool-bg);color:var(--ink);font-weight:700;}
.tblwrap tfoot .sumrow.money td.mark{background:var(--warn-bg);color:var(--ink);font-weight:700;}

/* 나가는 돈은 붉게, 들어오는 돈은 푸르게.
   금액만 물들이고 옆에 붙는 송금일은 회색으로 둔다 — 날짜는 금액이 아니다. */
.tblwrap td.minus{color:var(--stop);}
.tblwrap th.minus{color:var(--stop);}
.tblwrap td.plus{color:var(--brand-ink);}
.tblwrap th.plus{color:var(--brand-ink);}
.tblwrap tfoot .sumrow.money td.minus{color:var(--stop);}
.tblwrap tfoot .sumrow.money td.plus{color:var(--brand-ink);}
.tblwrap td.minus .cell-sub,
.tblwrap td.plus .cell-sub{color:var(--muted);font-weight:400;}

/* 일괄수정 입력칸 사이 */
/* 칸 사이 점선 구분은 이름줄이 있을 때의 것이다. 한 줄로 줄인 뒤에는 오히려 어지럽다. */
.bulk .frow > .fld{padding-right:0;border-right:none;}

/* 유치자 칸 — 좁히기 칸과 고르는 칸을 나란히 둔다.
   세로로 쌓으면 그 칸만 두 배로 높아져 한 줄이 어긋나 보인다. */
.bulk .fld.acqfld{flex-direction:row;align-items:center;gap:4px;}
.bulk .fld.acqfld .codefilter{width:108px;}
.bulk .fld.acqfld select{width:186px;}
@media (max-width:700px){
  .bulk .fld.acqfld{flex-wrap:wrap;}
  .bulk .fld.acqfld .codefilter,
  .bulk .fld.acqfld select{width:100%;}
}

@media (max-width:900px){
  /* 카드로 접히면 세로선은 의미가 없다 */
  table td{border-right:none;}
  .bulk .frow > .fld{border-right:none;padding-right:0;}
}

/* ── 상세 화면 ───────────────────────── */
.dethead{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.dethead .sp{flex:1;}
.dethead h3{margin:0;}

/*
 | 상품내역 날짜 거르기 — 표의 <제목줄>에서 고른다 (유치일·개통일).
 |
 | <details> 라서 자바스크립트가 없어도 열리고, 고르는 것은 링크라 그대로 걸러진다.
 | 펼친 목록은 position:fixed 다 — 이 표는 가로로 넘쳐서 .tblwrap 이 잘라내는데
 | fixed 는 그 잘라내기를 벗어난다. 좌표를 주지 않아 제자리에 뜬다.
 */
/* 거르는 중인 날짜칸 — 제목을 물들여 무엇이 표를 좁혔는지 보인다 */
.tblwrap th.dayon{background:var(--brand-soft);color:var(--brand-ink);}

.dpick{display:inline-block;position:relative;}
/* display 는 inline-block 으로 둔다 — summary 를 flex 로 바꾸면 브라우저에 따라
   펼치기 자체가 안 먹는 일이 있다. 사이 간격은 margin 으로 준다. */
.dpick > summary{list-style:none;cursor:pointer;display:inline-block;
  white-space:nowrap;border-radius:4px;padding:1px 4px;margin:-1px -4px;}
.dpick > summary::-webkit-details-marker{display:none;}
.dpick > summary::after{content:" ▾";font-size:9px;color:var(--faint);}
.dpick > summary:hover{background:var(--line);}
.dpick > summary:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
/* 고른 개수 — 제목 옆 작은 알림 */
.dpick > summary i{font-style:normal;font-size:10px;font-weight:700;line-height:1;
  background:var(--brand);color:#fff;border-radius:7px;padding:2px 5px;margin-left:3px;}
.dpick.on > summary{color:var(--brand-ink);}
.dpick.on > summary::after{color:var(--brand);}

/*
 | 펼친 목록.
 |
 | 기본은 <제자리에 펼친다>(static) — 제목줄이 그만큼 높아지지만 자바스크립트가
 | 없어도 날짜가 보인다.
 |
 | 자바스크립트가 있으면 .dpick-js 가 붙어 떠 있는 목록으로 바뀐다. 이때 좌표는
 | 반드시 자바스크립트가 재서 넣는다 (public/js/itemdates.js).
 |
 | 좌표를 안 주고 position:fixed 만 걸었다가 한 번 틀렸다 (2026-10-09) —
 | 이 표는 가로로 넘쳐서 유치일 칸이 표 안쪽 1,300px 쯤에 있다. 떠 있는 상자의
 | 제자리는 <스크롤하지 않은> 그 위치라, 화면 오른쪽 밖에 그려져 아무것도
 | 안 보였다. 「안 보인다」는 곧 「없다」로 읽힌다.
 */
.dpick-menu{position:static;width:220px;margin-top:4px;
  background:var(--panel);border:1px solid var(--line2);border-radius:6px;
  box-shadow:0 8px 24px -8px rgba(16,26,36,.3);text-align:left;font-weight:400;}
.dpick-js .dpick-menu{position:fixed;z-index:60;margin:0;}
:root[data-theme="dark"] .dpick-menu{box-shadow:0 10px 28px -8px rgba(0,0,0,.7);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dpick-menu{box-shadow:0 10px 28px -8px rgba(0,0,0,.7);}
}
.dpick-top{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--line);}
.dpick-top span{font-size:10.5px;color:var(--muted);letter-spacing:0;}
.dpick-top a{margin-left:auto;font-size:10.5px;color:var(--brand-ink);white-space:nowrap;}
.dpick-list{max-height:250px;overflow-y:auto;padding:4px;}
.dpick-opt{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:4px;
  font-size:12px;color:var(--ink);text-decoration:none;font-family:var(--mono);}
.dpick-opt b{font-weight:500;}
.dpick-opt i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--muted);
  font-family:var(--sans);}
.dpick-opt:hover{background:var(--rowhover);}
/* 고른 날짜 — 앞에 체크를 둔다. 글자색만 바꾸면 고른 것인지 알기 어렵다 */
.dpick-opt.on{background:var(--brand-soft);font-weight:700;}
.dpick-opt.on b::before{content:"✓ ";color:var(--brand-ink);}

.det{padding:14px;margin-bottom:14px;}
/* 영역 제목 — 크기와 굵기로만 구분한다.
   밑줄은 두지 않는다. 카드 테두리가 이미 영역을 가르고 있어 선이 겹쳐 보인다. */
.det h3{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.det h3 .h3sub{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:5px;}
.det .note{font-size:12.5px;color:var(--muted);margin:0 0 12px;}
.det .note b{color:var(--ink2);}

/* 가입자 정보 — 현행의 3열 배치 */
/* 가입자 정보 — 입력폼과 같은 모양으로 둔다.
   이름표 칸은 바탕을 달리하고 값 칸은 흰 바탕이다. 같은 내용을 보는 화면과
   고치는 화면이 서로 다르게 생기면, 어느 칸이 어느 칸인지 매번 다시 찾게 된다. */
.deflist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
         background:var(--line);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;}
.dl-item{background:var(--panel);padding:0;display:grid;grid-template-columns:104px 1fr;
         align-items:stretch;min-width:0;}
.dl-item.span{grid-column:1 / -1;}
.dl-item dt{background:var(--panel2);padding:8px 10px;
            font-size:12.5px;font-weight:700;color:var(--ink);
            display:flex;align-items:center;flex-wrap:wrap;gap:3px;
            border-right:1px solid var(--line);}
.dl-item dd{margin:0;padding:8px 10px;font-size:13px;color:var(--ink);
            display:flex;align-items:center;min-width:0;overflow-wrap:anywhere;}

.privacy{display:inline-block;font-size:9.5px;padding:1px 4px;border-radius:3px;
         background:var(--stop-bg);color:var(--stop);margin-left:3px;font-weight:600;}

/* 참고사항 — 입력폼의 여러 줄 칸과 같은 테두리를 쓴다 */
.memo{margin:0;font-size:13px;color:var(--ink);white-space:pre-wrap;
      background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
      padding:11px 13px;min-height:44px;}

/* 업무요청 로그 — 맨 위 한 줄이 현재 상태 */
.det tbody tr.latest td{background:var(--brand-soft);}

/* 상품 칸의 요금제 표기 */
.plan{font-size:10.5px;color:var(--muted);}

/* 로그 작성 폼 */
.logform{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2);}
.logform .frow > .fld{padding-right:10px;border-right:1px dashed var(--line2);}
.logform .frow > .fld:last-of-type{border-right:none;}
.logform input[type=file]{padding:4px 0;font-size:12px;}

@media (max-width:900px){
  .deflist{grid-template-columns:1fr;}
  .dl-item{grid-template-columns:88px 1fr;}
  .logform .frow > .fld{border-right:none;padding-right:0;}
}

/* ── 글자를 누르면 상세로 가는 목록 ────────
   현행도 셀마다 링크가 걸려 있어 어느 칸을 눌러도 상세가 열렸다.
   줄을 누르면 상세로 가지만, 가는 것은 글자 위를 눌렀을 때뿐이다.
   여백 위에서는 손 모양을 내지 않는다 — 손 모양이 뜨는데 눌러도 안 가면 더 헷갈린다.
   글자 위인지는 화면에서 재어 on-text 를 붙인다 (layouts/app.blade.php). */
tbody tr.rowlink{cursor:default;}
tbody tr.rowlink.on-text{cursor:pointer;}
tbody tr.rowlink:hover td{background:var(--rowhover);}
/* 여백 위 — 누르면 그 줄이 체크된다 (layouts/app.blade.php).
   글자 위의 손 모양(on-text)과 달라야 한다. 같은 모양이면 어느 쪽이 일어날지 알 수 없다. */
tbody tr.on-pick{cursor:cell;}
/* 고르는 방법 안내 — 건수 옆에 작게. 화면이 좁으면 접힌다 */
.pickhint{font-size:11.5px;color:var(--faint);}
.pickhint b{color:var(--muted);font-weight:600;}
@media (max-width:900px){.pickhint{display:none;}}
/* 체크박스 칸은 선택이 목적이므로 커서를 되돌린다 */
tbody tr.rowlink td.chk{cursor:default;}

/* 오류 색. 이 파일의 테마 규칙(밝은 기본 / 시스템 어두움 / 수동 어두움)을 그대로 따른다. */
:root{--bad:#C4384B;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bad:#E4707F;}}
:root[data-theme="dark"]{--bad:#E4707F;}

/* ── 등록·수정 폼 ─────────────────────────────
   목록·상세와 같은 카드(.det) 위에 올린다.
   한 줄에 항목 두 개까지 놓이고, 좁은 화면에서는 세로로 접힌다. */
.entry{padding:14px;}
.entry .frow{margin-bottom:10px;align-items:flex-start;}
.entry .frow:last-child{margin-bottom:0;}
.entry .frow > .fld{flex:1;min-width:200px;padding-right:12px;border-right:1px dashed var(--line2);}
.entry .frow > .fld:last-child{border-right:none;padding-right:0;}
.entry .fld input[type=text],
.entry .fld input[type=search],
.entry .fld select,
.entry .fld textarea{width:100%;background:var(--panel);border:1px solid var(--line2);
  border-radius:4px;padding:6px 9px;font:inherit;color:inherit;}
.entry .fld textarea{resize:vertical;min-height:78px;}
.entry .fld input[type=file]{font-size:12px;margin-top:3px;}
.entry .fld.bad input,.entry .fld.bad select,.entry .fld.bad textarea{border-color:var(--bad,#C4384B);}
.entry .fld .req{color:var(--bad,#C4384B);margin-left:2px;}
.entry .fld .hint{font-size:11.5px;color:var(--muted);}
.entry .fld .err{font-size:11.5px;color:var(--bad,#C4384B);}
.entry .fld .same{display:flex;gap:5px;align-items:center;font-size:11.5px;color:var(--muted);}
.entry .fld .ro{margin:0;padding:6px 0;font-weight:600;}
.entry .fld .ro a{font-weight:400;font-size:11.5px;margin-left:6px;}
.entry .codefilter{margin-bottom:4px;}

.formerr{padding:12px 14px;margin-bottom:14px;border-color:var(--bad,#C4384B);}
.formerr ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;}

.formact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 30px;}
.formact .hint{font-size:11.5px;color:var(--muted);}

.filelist{margin:0;padding-left:18px;font-size:12.5px;}
.filelist .meta{color:var(--muted);margin-left:6px;font-size:11.5px;}

@media (max-width:900px){
  .entry .frow > .fld{border-right:none;padding-right:0;}
}

/* ── 팝업 창 ───────────────────────────────────
   현행처럼 상세와 입력폼을 별도 창으로 띄운다.
   창이 좁으므로 왼쪽 메뉴를 빼고 여백을 줄인다.
   같은 화면을 일반 페이지로 열 수도 있어야 하므로 레이아웃은 하나만 쓰고 여기서 덮는다. */
.popupshell{grid-template-columns:1fr;}
.popupshell .top{position:sticky;top:0;z-index:5;}
.popupshell .body{padding:14px 14px 40px;}
.popupshell .dethead{margin-bottom:10px;}
.popupshell .pg{font-size:17px;}
.popupshell .entry .frow > .fld{min-width:160px;}
/* 하단 고정 가로 스크롤바(.hscroll)는 팝업에서도 그대로 쓴다 —
   숨기면 표에 no-native-bar 가 걸린 채 스크롤할 방법이 사라진다. */

/* 저장 직후 잠깐 뜨는 팝업 (창이 닫히면 보이지 않는다) */
.savedbox{padding:18px;margin:10px 0;}
.savedbox h3{margin:0 0 6px;font-size:14.5px;}

/* 삭제 버튼. 되돌릴 수 있는 동작이지만 눈에 띄어야 해서 색을 따로 준다. */
.btn.danger{border-color:var(--bad);color:var(--bad);background:var(--panel);}
.btn.danger:hover{background:var(--bad);border-color:var(--bad);color:#fff;}
.delform{display:inline;}
.delrow{margin-top:-16px;}

/* 로그 입력폼 아래 한 줄 안내 */
.logform .hint{display:block;font-size:11.5px;color:var(--muted);margin-top:8px;}

/* 로그의 비고 칸 — 줄바꿈을 그대로 보여준다.
   목록의 「특이사항」(td.wide)은 한 줄로 흘리지만, 상세의 비고는 여러 줄로 적는 자리다. */
.det td.wide.memo{white-space:pre-line;overflow:visible;text-overflow:clip;max-width:360px;}
.logform textarea{background:var(--panel);border:1px solid var(--line2);border-radius:4px;
  padding:6px 9px;font:inherit;color:inherit;width:100%;resize:vertical;min-height:34px;}
.logform textarea:focus{border-color:var(--brand);}
.logform .fld.grow{min-width:240px;}

/* 로그 표의 「관리」 칸 — 수정·삭제 버튼 */
td.acts{white-space:nowrap;}
td.acts .delform{display:inline;}
.btn.xs{padding:2px 7px;font-size:11px;border-radius:3px;}
td.acts .btn + .delform{margin-left:4px;}

/* ── 상품내역 입력폼 ─────────────────────────
   현행 폼의 구조를 그대로 옮겼다 — 왼쪽 항목 이름, 오른쪽 입력칸의 두 칸 표.
   묶음 제목은 화면에서 바로 눈에 띄어야 한다. 칸이 70개가 넘어
   제목이 흐리면 어디를 보고 있는지 알 수 없다. */
.itemform{font-size:12.5px;}

.itemform .isec{
  margin:18px 0 0;padding:7px 12px;
  background:var(--brand);color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  border-radius:4px 4px 0 0;
}
.itemform .isec:first-of-type{margin-top:0;}
:root[data-theme="dark"] .itemform .isec{color:#0D1218;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .itemform .isec{color:#0D1218;}
}

.itbl{border:1px solid var(--line);border-top:none;border-radius:0 0 4px 4px;overflow:hidden;}
.irow{display:grid;grid-template-columns:104px 1fr;border-top:1px solid var(--line);}
.irow:first-child{border-top:none;}
.irow.two{grid-template-columns:104px 1fr 104px 1fr;}

.ilab{
  background:var(--panel2);padding:8px 10px;
  font-size:12.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;border-right:1px solid var(--line);
}
.ival{
  padding:7px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  border-right:1px solid var(--line);min-width:0;
}
.irow.two .ival:last-child,.irow .ival:last-child{border-right:none;}

/* 칸 아래에 붙는 한 줄 설명 (유치자에 이어진 아이디가 없을 때 등) — 줄을 통째로 쓴다 */
.ival .hint{flex:0 0 100%;margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5;}
.ival .hint b{color:var(--ink);}

/* 한 칸 안에서 줄을 나눌 때 (단말기 6줄, TV 2줄) */
.ivline{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;}

/* 입력칸 안의 작은 이름표 — 「유동」「고정」처럼 칸 앞에 붙는다 */
.itemform .sub{font-size:11.5px;color:var(--ink2);font-weight:500;white-space:nowrap;}
.itemform .unit{font-size:11px;color:var(--muted);}
.itemform .note2{font-size:11px;color:var(--faint);width:100%;}

/*
 | 필수 별표 안내줄.
 |
 | note2(칸 안의 잔글씨)로 두었더니 너무 흐려서 읽히지 않았다. 폼을 처음 여는 사람이
 | 별표의 뜻을 한 번은 읽어야 하므로 본문 글씨 크기로 두고 옅은 바탕을 깐다.
 */
.reqnote{margin:10px 0 2px;padding:7px 10px;font-size:12px;line-height:1.55;
         color:var(--ink2);background:var(--brand-soft,#EEF4FB);border-radius:4px;}
.reqnote .req{color:var(--bad,#C4384B);font-weight:700;}
.reqnote b{color:var(--ink);}

.itemform input[type=text],
.itemform input[type=number],
.itemform input[type=date],
.itemform select,
.itemform textarea{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:5px 8px;font:inherit;font-size:13px;color:inherit;
}
.itemform input:focus,.itemform select:focus,.itemform textarea:focus{border-color:var(--brand);}
.itemform input.qty{width:56px;text-align:right;font-variant-numeric:tabular-nums;}
.itemform input.won{width:104px;text-align:right;font-variant-numeric:tabular-nums;}
.itemform textarea{width:100%;resize:vertical;min-height:96px;overflow:hidden;line-height:1.5;}

.itemform .rad,.itemform .chk{
  display:inline-flex;gap:4px;align-items:center;white-space:nowrap;font-size:12px;
  /* 선택칸 규칙은 이제 표의 칸(th.chk·td.chk)에만 걸린다. 여기 width:auto 는
     혹시 다른 규칙이 폭을 잡는 일이 있어도 이름표가 밀려 나오지 않게 두는 대비책이다. */
  width:auto;flex:0 0 auto;
}
.itemform .chk input[type=checkbox],
.itemform .rad input[type=radio]{flex:0 0 auto;margin:0;}
.itemform .hintmark{
  display:inline-block;font-size:9.5px;line-height:1.4;padding:0 4px;
  border:1px solid var(--line2);border-radius:8px;color:var(--faint);margin-left:3px;
}

/* 저장·창닫기는 왼쪽, 삭제는 오른쪽 끝 — 실수로 누르지 않게 떼어 놓는다 */
.iact{display:flex;gap:8px;margin:16px 0 10px;align-items:center;}
.iact .sp{flex:1;}

/*
 | 단추줄 아래 설명 — 복사등록·삭제가 무엇을 하는지 적는다.
 | 단추줄 안에 넣었더니 글이 길어 줄이 밀리고, 삭제 단추가 가운데로 끌려갔다.
 */
.actnote{margin:-4px 0 14px;font-size:11.5px;line-height:1.65;color:var(--muted);}
.actnote b{color:var(--ink2);}

/*
 | 협력업체에게 「왜 수정·삭제 단추가 없는지」 적어 주는 줄.
 | 단추 자리에 나란히 서므로 단추와 비슷한 높이로 맞춘다.
 */
.locknote{display:inline-block;padding:6px 10px;font-size:11.5px;line-height:1.5;
          color:var(--ink2);background:var(--warn-bg,#F8EEDA);border-radius:4px;}

@media (max-width:820px){
  .irow,.irow.two{grid-template-columns:88px 1fr;}
  .irow.two .ilab:nth-child(3){border-top:1px solid var(--line);}
}

/* ── 팝업 창 ───────────────────────────────────
   현행처럼 상세와 입력폼을 별도 창으로 띄운다.
   창이 좁으므로 왼쪽 메뉴를 빼고 여백을 줄인다.
   같은 화면을 일반 페이지로 열 수도 있어야 하므로 레이아웃은 하나만 쓰고 여기서 덮는다. */
.popupshell{grid-template-columns:1fr;}
.popupshell .top{position:sticky;top:0;z-index:5;}
.popupshell .body{padding:14px 14px 40px;}
.popupshell .dethead{margin-bottom:10px;}
.popupshell .pg{font-size:17px;}
.popupshell .entry .frow > .fld{min-width:160px;}
/* 하단 고정 가로 스크롤바(.hscroll)는 팝업에서도 그대로 쓴다 —
   숨기면 표에 no-native-bar 가 걸린 채 스크롤할 방법이 사라진다. */

/* 저장 직후 잠깐 뜨는 팝업 (창이 닫히면 보이지 않는다) */
.savedbox{padding:18px;margin:10px 0;}
.savedbox h3{margin:0 0 6px;font-size:14.5px;}

/* 삭제 버튼. 되돌릴 수 있는 동작이지만 눈에 띄어야 해서 색을 따로 준다. */
.btn.danger{border-color:var(--bad);color:var(--bad);background:var(--panel);}
.btn.danger:hover{background:var(--bad);border-color:var(--bad);color:#fff;}
.delform{display:inline;}
.delrow{margin-top:-16px;}

/* 로그 입력폼 아래 한 줄 안내 */
.logform .hint{display:block;font-size:11.5px;color:var(--muted);margin-top:8px;}

/* 로그의 비고 칸 — 줄바꿈을 그대로 보여준다.
   목록의 「특이사항」(td.wide)은 한 줄로 흘리지만, 상세의 비고는 여러 줄로 적는 자리다. */
.det td.wide.memo{white-space:pre-line;overflow:visible;text-overflow:clip;max-width:360px;}
.logform textarea{background:var(--panel);border:1px solid var(--line2);border-radius:4px;
  padding:6px 9px;font:inherit;color:inherit;width:100%;resize:vertical;min-height:34px;}
.logform textarea:focus{border-color:var(--brand);}
.logform .fld.grow{min-width:240px;}

/* 로그 표의 「관리」 칸 — 수정·삭제 버튼 */
td.acts{white-space:nowrap;}
td.acts .delform{display:inline;}
.btn.xs{padding:2px 7px;font-size:11px;border-radius:3px;}
td.acts .btn + .delform{margin-left:4px;}

/* ── 상품내역 입력폼 ─────────────────────────
   입력칸이 70개가 넘는다. 현행의 묶음(기본정보·인터넷·전화·단말기…)을 그대로 두고
   묶음마다 작은 제목을 달아 눈이 길을 잃지 않게 한다. */
.itemform{margin-top:14px;}
.itemform .fsec{margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--muted);
  border-top:1px solid var(--line);padding-top:10px;}
.itemform .fsec:first-of-type{border-top:none;padding-top:0;margin-top:4px;}
.itemform .frow{margin-bottom:8px;}
.itemform .fld{min-width:120px;}
.itemform .fld.sm{min-width:78px;max-width:110px;}
.itemform .fld.sm input{width:100%;}
.itemform .fld input[type=number]{text-align:right;font-variant-numeric:tabular-nums;}
.itemform .chk{display:flex;gap:5px;align-items:center;font-size:12px;padding:6px 0;
  white-space:nowrap;width:auto;}
.itemform .hintmark{display:inline-block;font-size:9.5px;line-height:1.4;padding:0 4px;
  border:1px solid var(--line2);border-radius:8px;color:var(--faint);margin-left:3px;}

/* ── 코드테이블 관리 ───────────────────────────
   왼쪽 그룹, 오른쪽 항목. 줄마다 그 자리에서 고친다. */
.codewrap{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;}
.codenav{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.codenav a{display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:9px 12px;font-size:12.5px;border-bottom:1px solid var(--line);}
.codenav a:last-child{border-bottom:none;}
.codenav a:hover{background:var(--panel2);}
.codenav a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600;}
.codenav .cnt{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

.codebody{margin:0;}
.codebody .warn{
  margin:0 0 10px;padding:8px 11px;font-size:12px;
  background:var(--brand-soft);color:var(--brand-ink);border-radius:4px;
}

.codetbl input[type=text],.codetbl input[type=number],.codetbl select{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;width:100%;
}
/* 이름 칸은 값이 길다. 칸이 늘어나도 좁아지지 않게 최소 너비를 준다 —
   유치자 표에 회원아이디 칸이 붙으면서 이름이 눌려 안 보였다. */
.codetbl input[name="name"]{min-width:180px;}
.codetbl input.s{width:64px;text-align:right;font-variant-numeric:tabular-nums;}
.codetbl input.m{width:104px;text-align:right;font-variant-numeric:tabular-nums;}
.codetbl td{vertical-align:middle;}
.codetbl td.mid{text-align:center;}
/* 유치자 표의 회원아이디 칸 — 아이디를 치고 「연결」을 누른다.
   비어 있으면 아직 안 이어진 것이다. */
.codetbl td.acqlink{white-space:nowrap;}
.codetbl .acqlink-row{display:flex;gap:5px;align-items:center;}
.codetbl .acqlink-row input{width:130px;font-family:var(--mono);font-size:12px;}
.codetbl td.acqlink .sub{display:inline-block;margin-top:3px;}

.codetbl td.acts{white-space:nowrap;}
.codetbl td.acts .delform{display:inline;margin-left:4px;}
.codetbl .used{font-size:11px;color:var(--muted);}
/* ── 상품 카탈로그 관리 ─────────────────────────
   한 겹씩 타고 들어간다. 지나온 길을 눌러 되돌아간다 —
   마디가 279개라 한 화면에 다 펼치지 않는다. */
.catcrumb{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:0 0 12px;padding:8px 11px;font-size:12.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.catcrumb a{color:var(--brand-ink);}
.catcrumb a:hover{text-decoration:underline;}
.catcrumb .sep{color:var(--faint);}
.catcrumb b{font-weight:600;}
/* 옮길 자리 셀렉트 — 경로가 길어 좁으면 못 읽는다 */
.codetbl td.acqlink select{min-width:220px;font-size:12px;}
/* 고른 줄에 한 번에 — 표 바로 아래에 붙인다 */
.catbulk{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:10px 0 0;padding:9px 11px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
}
.catbulk .lbl{font-size:12.5px;font-weight:600;margin-right:2px;}
.catbulk .sep{color:var(--faint);margin:0 2px;}
.catbulk select{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;min-width:220px;
}
/* 새로 넣기 — 줄 하나로 둔다. 표 안에 두면 일괄수정 폼과 겹친다 */
.catnew{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 0;
  padding:9px 11px;border:1px dashed var(--line2);border-radius:var(--r);
}
.catnew .lbl{font-size:12.5px;font-weight:600;margin-right:2px;}
.catnew input[type=text],.catnew input[type=number]{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;
}
.catnew input[name="name"]{min-width:200px;}
.catnew input[name="note"]{min-width:160px;}
.catnew input.s{width:64px;text-align:right;font-variant-numeric:tabular-nums;}
.catnew .inl{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;}
.codetbl .unused{font-size:11px;color:var(--faint);}
/* 이름으로 좁혀 보기 — 유치자가 400개가 넘어 없으면 한 줄 찾기가 고역이다 */
.codefind{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 12px;}
.codefind input[type=search]{
  background:var(--panel);border:1px solid var(--line2);border-radius:4px;
  padding:5px 9px;font:inherit;font-size:12.5px;color:inherit;min-width:240px;
}
.codefind input[type=search]:focus{border-color:var(--brand);outline:none;}
.codefind select{height:30px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font-size:12.5px;}
.codefind .count{font-size:12px;color:var(--muted);margin-left:2px;}
.codefind .count b{color:var(--ink);font-variant-numeric:tabular-nums;}

.codetbl tr.newrow td{background:var(--panel2);}

@media (max-width:900px){
  .codewrap{grid-template-columns:1fr;}
  .codenav{display:flex;flex-wrap:wrap;}
  .codenav a{border-bottom:none;border-right:1px solid var(--line);}
}

/* ── 로그인 · 비밀번호 변경 ───────────────────────
   공통 셸을 쓰지 않는 화면이다. 왼쪽 메뉴도 사용자 이름도 없다 —
   로그인하지 않은 사람에게 메뉴 이름조차 보이지 않게 한다. */
/*
 | 로그인 화면.
 |
 | 바탕이 회색 한 가지뿐이라 무채색으로 보였다. 상표색(--brand)을 아주 옅게 깐
 | 두 겹 그러데이션을 바탕으로 두고, 카드를 그 위로 띄운다.
 | 색은 새로 만들지 않고 이미 있는 상표색에서 뽑는다 — 화면마다 다른 파랑이 생기면
 | 같은 시스템으로 보이지 않는다.
 |
 | 어두운 화면에서도 같은 짜임을 쓴다. 토큰이 이미 두 벌이라 값만 따라 바뀐다.
 */
.authbody{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--brand-soft) 0%, transparent 62%),
    radial-gradient(900px 480px at 100% 108%, var(--cool-bg) 0%, transparent 60%),
    var(--bg);
}
.authbox{
  width:100%;max-width:360px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;
  padding:26px 24px 22px;
  /* 카드를 바탕에서 띄운다 — 테두리 하나만으로는 종이가 놓인 느낌이 안 난다 */
  box-shadow:0 1px 2px rgba(16,26,36,.05), 0 14px 34px -14px rgba(16,26,36,.22);
  position:relative;overflow:hidden;
}
/* 위쪽 상표색 띠 — 이 화면의 색을 정하는 것은 이 한 줄이다 */
.authbox::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--cool) 100%);
}
:root[data-theme="dark"] .authbox{box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -14px rgba(0,0,0,.6);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .authbox{box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -14px rgba(0,0,0,.6);}
}

.authbrand{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.authbrand .t{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--brand-ink);}
.authbrand .s{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:3px;
  letter-spacing:.08em;text-transform:uppercase;}

/*
 | 로그인 화면 안내문 — 새 시스템으로 바뀐 것을 알린다.
 | 카드 안에서 한 덩어리로 읽히게 바탕을 살짝 깔고, 글자는 폼보다 작게 둔다.
 | 줄 간격을 넉넉히 주는 것이 핵심이다 — 네 줄이 붙으면 아무도 안 읽는다.
 */
.authintro{background:var(--cool-bg);border:1px solid var(--line);border-radius:6px;
  padding:12px 13px;margin:0 0 18px;}
.authintro h1{font-size:12.5px;font-weight:700;color:var(--cool);margin:0 0 7px;letter-spacing:-.01em;}
.authintro ul{margin:0;padding-left:15px;}
.authintro li{font-size:11.5px;color:var(--ink2);line-height:1.65;margin-bottom:4px;}
.authintro li:last-child{margin-bottom:0;}
.authintro b{font-weight:600;color:var(--ink);}

.authform .fld{display:block;margin-bottom:12px;}
.authform .fld > span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
.authform .fld input{width:100%;background:var(--panel);border:1px solid var(--line2);
  border-radius:5px;padding:9px 11px;font:inherit;color:inherit;
  transition:border-color .12s, box-shadow .12s;}
.authform .fld input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none;}

/*
 | 「이 컴퓨터에서 로그인 유지」.
 | 한 줄로 두어야 한다 — 칸을 좁히면 글자가 한 자씩 끊어져 세로로 길어진다.
 | 체크상자가 줄어들지 않게 flex-shrink 도 막는다.
 */
.authform .chk{display:flex;gap:7px;align-items:center;width:100%;
  font-size:12px;color:var(--ink2);margin:2px 0 16px;white-space:nowrap;cursor:pointer;}
.authform .chk input[type=checkbox]{flex:0 0 auto;width:14px;height:14px;margin:0;accent-color:var(--brand);}
.authform .chk > span{min-width:0;}

.authform .err{font-size:11.5px;color:var(--bad,#C4384B);margin:-6px 0 10px;}
.btn.wide{width:100%;justify-content:center;text-align:center;padding:10px 13px;border-radius:5px;font-weight:600;}
.authnote{font-size:11.5px;color:var(--muted);line-height:1.6;margin:14px 0 0;}
.authalt{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);text-align:right;}

.flash{font-size:12.5px;border-radius:4px;padding:8px 11px;margin:0 0 14px;}
.flash.ok{background:var(--good-bg);color:var(--good);}
.flash.bad{background:var(--stop-bg);color:var(--stop);}
.flash.warnbox{background:var(--warn-bg);color:var(--warn);}
/* 알림 줄 안의 링크 — 「전체 보기」. 바탕이 색이라 파란 링크색은 읽히지 않는다 */
.flash a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ── 회원관리 ─────────────────────────────── */
.usertbl td{vertical-align:middle;}
.usertbl td.sm{font-size:12px;color:var(--muted);}
.usertbl td.mono{font-family:var(--mono);font-size:12px;}
.usertbl tr.off td{opacity:.55;}
.usertbl td.acts{white-space:nowrap;}
.usertbl td.acts .delform{display:inline;margin-left:3px;}
.usertbl .me{font-size:10px;color:var(--brand-ink);background:var(--brand-soft);
  border-radius:8px;padding:1px 6px;margin-left:4px;}

.pill.u-good{background:var(--good-bg);color:var(--good);}
.pill.u-warn{background:var(--warn-bg);color:var(--warn);}
.pill.u-stop{background:var(--stop-bg);color:var(--stop);}
.pill.u-cool{background:var(--cool-bg);color:var(--cool);}

/* 재설정한 비밀번호는 이 화면에서만 보인다. 눈에 띄고, 그대로 골라 복사되게. */
.newpass{border-color:var(--warn);margin-bottom:14px;}
.newpass .code{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.06em;
  background:var(--sunken);border-radius:4px;padding:10px 14px;margin:8px 0;user-select:all;}

.logoutform{display:inline;}
.top .who{font-size:12px;color:var(--muted);margin-right:2px;}

/* ── 회원관리 — 현행 좌측 메뉴를 대신하는 빠른 조건 --------- */
.qtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;}
.qtabs a{padding:6px 12px;font-size:12.5px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink2);text-decoration:none;}
.qtabs a:hover{background:var(--panel2);}
.qtabs a.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft);font-weight:600;}

/*
 | 검색줄의 조회·초기화 단추는 .fld 로 감싸지 않는다 (.frow 의 바로 아래 자식이다).
 | .fld 는 세로로 쌓는 칸이라 감싸면 단추 둘이 두 줄로 내려간다 — 회원관리에서 그랬다.
 | 빠른 기간 단추도 업체관리와 같은 .presets 줄을 쓴다.
 */

/* 폼의 묶음 제목 — 현행 「* 회원 정보」 / 「- 상태처리 Log」 */
.entry .fsec,.logsec .fsec{
  margin:0 0 12px;padding:7px 11px;font-size:13px;font-weight:700;
  background:var(--brand-soft);color:var(--brand-ink);border-radius:4px;
}
.logsec .fsec.pink{background:var(--warn-bg);color:var(--warn);}

/* 세 칸으로 나뉜 전화번호 */
.entry .fld.tel .telrow{display:flex;align-items:center;gap:4px;}
.entry .fld.tel .telrow input{min-width:0;text-align:center;}
.entry .telrow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.entry .telrow .dash{color:var(--faint);}
.entry .telrow input,.entry .telrow select{width:auto;flex:1;min-width:60px;}
.entry .fld input[readonly]{background:var(--sunken);color:var(--muted);}

.usertbl td{vertical-align:middle;white-space:nowrap;}
.usertbl td.wide{white-space:normal;min-width:180px;}
.usertbl td.sm,.usertbl .sub{font-size:11.5px;color:var(--muted);}
.usertbl td.mono,.usertbl .mono{font-family:var(--mono);font-size:12px;}
.usertbl tr.off td{opacity:.55;}
.usertbl td.acts{white-space:nowrap;}
.usertbl td.acts .delform{display:inline;margin-left:3px;}
.usertbl .me{font-size:10px;color:var(--brand-ink);background:var(--brand-soft);
  border-radius:8px;padding:1px 6px;margin-left:4px;}

.pill.u-good{background:var(--good-bg);color:var(--good);}
.pill.u-warn{background:var(--warn-bg);color:var(--warn);}
.pill.u-stop{background:var(--stop-bg);color:var(--stop);}
.pill.u-cool{background:var(--cool-bg);color:var(--cool);}

/* 재설정한 비밀번호는 이 화면에서만 보인다. 눈에 띄고, 그대로 골라 복사되게. */
.newpass{border-color:var(--warn);margin-bottom:14px;}
.newpass .code{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.06em;
  background:var(--sunken);border-radius:4px;padding:10px 14px;margin:8px 0;user-select:all;}

.logsec{margin-top:14px;}
.logsec .logform{margin-top:12px;}
.logsec .logform .fld.btns{display:flex;align-items:flex-end;}
.logsec td.memo{white-space:pre-line;}

/* ── 회원관리 · 폼 ──────────────────────────
   칸이 스무 개가 넘어 상품내역 폼과 같은 두 칸 표(.itbl)를 쓴다. */
.itemform .req{color:var(--bad,#C4384B);margin-left:2px;}
.itemform .ival.addr{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.itemform .ival.addr input{min-width:0;}
.itemform .ival > input[type=text],
.itemform .ival > input[type=password]{max-width:100%;}
.itemform input[type=password]{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;
}
.itemform .delrow{margin:0 0 18px;display:flex;gap:8px;align-items:center;}

/* 상태처리 Log — 업체 상세의 업무요청 로그와 같은 모양을 쓴다 */
.det .flow{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
  margin:0 0 12px;padding:8px 11px;font-size:11.5px;color:var(--muted);
  background:var(--panel2);border-radius:4px;
}
.det .flow b{font-size:12.5px;color:var(--ink);}
.det .flow b.stop{color:var(--stop);}
.det .flow i{color:var(--faint);font-style:normal;}

.logform .warnline{
  margin:10px 0 0;padding:8px 11px;font-size:12px;
  background:var(--stop-bg);color:var(--stop);border-radius:4px;
}

/* ── 유치자 연결 ─────────────────────────── */
.acqtbl td{vertical-align:middle;}
.acqtbl td.sm,.acqtbl .sub{font-size:11.5px;color:var(--muted);}
.acqtbl .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:5px;}
.acqtbl tr.off td{opacity:.55;}
.acqtbl .linkform{display:flex;gap:6px;align-items:center;}
.acqtbl .linkform select{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;
}
.acqtbl td.acts .sub{display:block;margin-top:3px;}

/* 계정이 없는 유치자를 한꺼번에 만드는 자리 */
.makebox{border-color:var(--brand-soft);margin:0 0 14px;}
.makelist td{vertical-align:middle;}
.makelist input[type=text]{
  width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;font-family:var(--mono);
}
.makeact{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.makeact label{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted);}
.makeact select{
  background:var(--panel);border:1px solid var(--line2);border-radius:3px;
  padding:4px 7px;font:inherit;font-size:12px;color:inherit;
}
.makeact .sub{font-size:11.5px;color:var(--muted);}
.newpass td.pw{font-family:var(--mono);font-weight:600;letter-spacing:.04em;user-select:all;}
.newpass td.mono{font-family:var(--mono);}

/* 우편번호 찾기 버튼 — 주소 줄 안에서 입력칸과 높이를 맞춘다 */
.itemform .ival.addr .btn{flex:0 0 auto;white-space:nowrap;}

/* 회원 폼의 상태처리 Log — 창이 좁아도 컬럼이 잘리지 않게 비고를 줄인다.
   컬럼 순서가 어긋나 보이는 것은 대개 표가 가로로 잘렸을 때다. */
.popupshell .det table td.memo{min-width:120px;}

/* ── 업체 폼 — 상품내역 폼과 같은 두 칸 표를 쓴다 ──────────
   두 화면이 나란히 뜨는데 생김새가 다르면 같은 시스템으로 보이지 않는다. */
.itemform .ilab .req{color:var(--bad,#C4384B);margin-left:2px;}
.itemform input.dt{width:150px;}

/* 날짜 칸 — 글자 칸 옆에 작은 달력 단추.
   달력 쪽은 값 칸을 숨기고 아이콘만 남긴다 (브라우저마다 폭이 달라 고정하지 않는다). */
.datefield{display:inline-flex;align-items:center;gap:4px;}
/* 달력 단추는 아이콘만 남긴다. min-width 를 0 으로 눌러 두지 않으면
   검색줄의 .fld input 규칙(min-width)이 그대로 걸려 칸처럼 넓어진다. */
.datefield input.dtpick{width:26px;min-width:0;flex:0 0 auto;padding:0;border:none;
  background:none;color:transparent;cursor:pointer;}
.datefield input.dtpick::-webkit-datetime-edit,
.datefield input.dtpick::-webkit-inner-spin-field,
.datefield input.dtpick::-webkit-clear-button{display:none;}
.datefield input.dtpick::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;}
.datefield input.dtpick:hover::-webkit-calendar-picker-indicator{opacity:1;}
/* 칸 너비 — 값의 길이에 맞춘다.
   전에는 「줄을 혼자 쓰는 항목」이 곧 「화면 끝까지 늘어나는 칸」이었다.
   그래서 연락처·예금주 같은 짧은 값도 500px 짜리 칸에 들어가 보기 사나웠다.
   이제 배치(wide)와 길이(w)를 따로 정한다 (config/sme_form.php). */
.itemform .w-sm{width:150px;}
.itemform .w-md{width:240px;}
.itemform .w-lg{width:100%;max-width:400px;}
.itemform .w-full{width:100%;max-width:560px;}
.itemform input.won.w-sm{width:130px;}
.itemform select.sel{min-width:0;}
.itemform .codefilter{display:block;width:220px;margin-bottom:4px;}
.itemform .same{margin-left:8px;font-size:11.5px;color:var(--muted);}
.itemform .err{display:block;font-size:11.5px;color:var(--bad,#C4384B);margin-top:3px;}
.itemform .ival.bad input,
.itemform .ival.bad select,
.itemform .ival.bad textarea{border-color:var(--bad,#C4384B);}
.itemform .filerow{display:flex;flex-direction:column;gap:6px;}
.itemform .filerow input[type=file]{font-size:12px;}

/* 첨부 한 줄 — 「파일 고르기 · 지금 붙어 있는 파일 · 지우기」 차례로.
   줄은 위에서 아래로 쌓인다. 팝업 폭이 넉넉하지 않아 좁아지면 접히게 둔다. */
.itemform .filerow-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.itemform .filerow-line input[type=file]{flex:0 1 240px;min-width:0;}
.itemform .filerow-name{font-size:12.5px;font-weight:600;max-width:260px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.itemform .filerow-del{display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--bad);white-space:nowrap;cursor:pointer;}
.itemform .filerow-del input{margin:0;}

.itemform .ival > .note2{display:block;margin-top:3px;}
.itemform .ival a.note2{color:var(--brand);}
.itemform .iact.delrow{margin-top:0;}

/* 달력 아이콘이 어두운 화면에서도 보이게 */
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7);}
}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;}

/* 조회 전 대시보드 자리 — 왜 비어 있는지 한 줄로 알린다 */
.dash-idle{border-style:dashed;}
.dash-idle .note{margin:0;text-align:center;}

/* 시험 운영 알림 띠 — 사내 검증 기간에만 나온다 */
.pilot{margin:0;padding:7px 16px;background:var(--warn-bg);color:var(--warn);
       font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);}

/* ── 상품내역 입력폼의 서비스 줄 ─────────────────────────────
   상품내역 한 건이 서비스 한 개다. 등록 화면은 줄을 여러 개 받고,
   줄마다 정산까지 들어 있어 접었다 펼 수 있게 한다.               */
.svcform .secnote{font-size:11px;font-weight:400;color:var(--muted);margin-left:8px;}

.srow{border:1px solid var(--line);border-radius:5px;margin-bottom:8px;background:var(--bg);}
.srow + .srow{margin-top:0;}

/* 줄 머리 — 상품·서비스·부가서비스·회선수. 접어도 무슨 건인지 보인다. */
.shead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:8px 10px;}
.shead select,.shead input{font-size:12px;}

/*
  ── 머리줄은 한 줄에 들어가야 한다 ──
  2026-10-11 에 상품군 칸이 늘면서 줄바꿈이 생겼다.

  셀렉트는 <가장 긴 항목에 맞춰 저절로 넓어진다> — 「전국대표번호」·「오피스넷(2.5G)」
  같은 이름이 들어 있어, min-width 만 적어 두면 실제로 몇 픽셀을 차지하는지 가늠할
  수가 없다. 그래서 칸마다 너비를 못박고(flex 0 0), 남는 자리는 서비스 칸 하나가
  가져가게 둔다(flex 1 1). 긴 이름은 끝이 잘려 보이지만, 누르면 목록이 펼쳐지므로
  고를 때는 다 읽힌다.

  합이 850px 안쪽이다 — 상품내역 창은 1040px 이라 여유가 있다
  (config sme.popup.item). 창 너비를 늘리는 쪽이 아니라 칸을 줄이는 쪽을 고른 까닭은,
  너비를 늘려도 칸이 하나 더 늘면 같은 일이 또 생기기 때문이다.
*/
.shead .f-status{flex:0 0 72px;width:72px;min-width:72px;}
.shead .f-mid   {flex:0 0 104px;width:104px;min-width:104px;}
.shead .f-sub   {flex:0 0 96px;width:96px;min-width:96px;}
.shead .f-svc   {flex:1 1 130px;min-width:130px;}
.shead .f-addon {flex:0 0 84px;width:84px;min-width:84px;}
.shead input.qty{flex:0 0 48px;width:48px;}
.shead .sub{font-size:11px;color:var(--muted);white-space:nowrap;}
/* 필수 별표 — 머리줄의 작은 이름 안에서도 또렷하게 보이게 한다 */
.shead .sub .req{color:var(--bad,#C4384B);font-weight:700;font-size:12.5px;margin-left:2px;}
.shead .herr{flex-basis:100%;}
.shead .herr:empty{display:none;}

.srow .tog,.srow .del{border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:12px;padding:2px 5px;line-height:1;border-radius:3px;}
.srow .tog:hover,.srow .del:hover{background:var(--line);color:var(--ink);}
.srow .del{margin-left:auto;}

.sbody{border-top:1px solid var(--line);padding:6px 10px 2px;background:var(--panel);}
/* 줄 안의 두 칸 표는 바깥 테두리를 두지 않는다.
   .srow 가 이미 줄 전체를 테두리로 감싸고 있어 왼쪽·오른쪽·아래가 두 겹으로 보였다.
   칸을 나누는 가로줄과 이름표 오른쪽 세로줄만 남긴다 — 그건 칸을 읽는 데 쓰인다. */
.sbody .itbl{margin:0;border:none;border-radius:0;}
.sbody .irow{padding:4px 0;}
.sbody input.dt.sm{width:104px;text-align:center;}
.sbody .f-dev{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;}
.sbody .f-dev select{min-width:150px;}
.sbody .ival select{min-width:92px;}
.sbody .ival input.won{width:100px;}
.sbody .ival input.num{width:100%;max-width:190px;}

/* 체크박스 줄 — 이름표가 서로 붙어 겹쳐 보이지 않게 넉넉히 띄운다 */
.sbody .ival.flags{gap:6px 18px;}
.sbody .ival.flags .chk{margin:0;}

/* 「줄 추가」만 있는 줄. 하부정산 합계는 뺐다 — 저장 전 화면 계산이라 정산과 무관한데
   숫자가 크게 떠 있어 「이 값이 정산된다」로 읽혔다. */
.svcform .addrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px;}
.svcform .btn.small{padding:4px 12px;font-size:12px;}
.svcform .err{display:block;font-size:11px;color:var(--stop);margin-top:2px;}

/*
  창을 줄였을 때. 들쭉날쭉 접히는 대신 <서비스 칸이 자기 줄>을 쓰게 한다 —
  접히는 자리를 정해 두지 않으면 어느 칸이 내려갈지 그때그때 달라져 읽기 어렵다.
  기준을 760 에서 1000 으로 올렸다 (상품군 칸이 늘어 그만큼 일찍 좁아진다).
*/
@media (max-width:1000px){
  .shead .f-svc{flex-basis:100%;}
  .srow .del{margin-left:0;}
}