.lp-wrap{
  --lp-bg:#F3F4EF; --lp-surface:#FFFFFF; --lp-ink:#15181A; --lp-muted:#6C716B;
  --lp-line:#DEE1D8; --lp-accent:#0E7C86; --lp-accent-ink:#FFFFFF; --lp-accent-soft:#DEF0EF;
  --lp-danger:#D64545; --lp-radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--lp-ink); background:var(--lp-bg); padding:20px; border-radius:12px;
}
.lp-wrap *{box-sizing:border-box;}
.lp-topbar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px;}
.lp-topbar h1{font-size:20px;font-weight:600;margin:0;}
.lp-topbar .lp-sub{color:var(--lp-muted);font-size:13px;}
.lp-layout{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start;}
@media (max-width:880px){.lp-layout{grid-template-columns:1fr;}}
.lp-panel{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:16px;margin-bottom:14px;}
.lp-panel h2{font-size:13.5px;font-weight:600;margin:0 0 10px;}
.lp-row{display:flex;gap:8px;margin-bottom:8px;}
.lp-field{flex:1;display:flex;flex-direction:column;gap:4px;}
.lp-field label{font-size:12px;color:var(--lp-muted);}
.lp-wrap input[type=number],.lp-wrap input[type=text],.lp-wrap select{
  border:1px solid var(--lp-line);border-radius:8px;padding:7px 9px;font-size:13px;width:100%;background:#fff;color:var(--lp-ink);
}
.lp-wrap input:focus,.lp-wrap select:focus{outline:2px solid var(--lp-accent-soft);border-color:var(--lp-accent);}
.lp-check{display:flex;align-items:center;gap:7px;font-size:13px;margin:6px 0;}
.lp-check input{width:15px;height:15px;}
.lp-btn{border:1px solid var(--lp-line);background:#fff;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--lp-ink);text-decoration:none;display:inline-block;}
.lp-btn:hover{background:#F7F7F4;}
.lp-btn.lp-primary{background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-accent-ink);}
.lp-btn.lp-primary:hover{background:#0B6870;}
.lp-btn.lp-ghost{border-color:transparent;color:var(--lp-muted);padding:6px 8px;}
.lp-btn.lp-danger-ghost{border-color:transparent;color:var(--lp-danger);padding:6px 8px;}
.lp-btnrow{display:flex;gap:8px;flex-wrap:wrap;}
.lp-table-scroll{overflow-x:auto;}
.lp-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;min-width:480px;}
.lp-table th{text-align:left;font-size:11px;color:var(--lp-muted);font-weight:500;padding:6px;border-bottom:1px solid var(--lp-line);white-space:nowrap;}
.lp-table td{padding:4px 6px;border-bottom:1px solid #EFEFEA;}
.lp-table td input{padding:5px 6px;font-size:12.5px;box-sizing:border-box;width:100%;}
.lp-table col.lp-col-check{width:28px;}
.lp-table col.lp-col-name{width:150px;}
.lp-table col.lp-col-code{width:130px;}
.lp-table col.lp-col-price{width:80px;}
.lp-table col.lp-col-qty{width:60px;}
.lp-table col.lp-col-del{width:34px;}
.lp-qty-input{width:52px;}
.lp-price-input{width:78px;}
.lp-empty{padding:22px 10px;text-align:center;color:var(--lp-muted);font-size:13px;}
.lp-dropzone{border:1.5px dashed var(--lp-line);border-radius:8px;padding:14px;text-align:center;font-size:12.5px;color:var(--lp-muted);cursor:pointer;margin-bottom:10px;}
.lp-dropzone:hover,.lp-dropzone.lp-drag{border-color:var(--lp-accent);background:var(--lp-accent-soft);}
.lp-hint{font-size:11.5px;color:var(--lp-muted);margin-top:6px;line-height:1.5;}
.lp-count-badge{background:var(--lp-accent-soft);color:#0B4F55;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;}
.lp-server-list{max-height:220px;overflow-y:auto;border:1px solid var(--lp-line);border-radius:8px;}
.lp-server-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;border-bottom:1px solid #EFEFEA;}
.lp-server-item:last-child{border-bottom:none;}
.lp-server-item .lp-si-name{flex:1;}
.lp-server-item .lp-si-code{font-family:monospace;color:var(--lp-muted);font-size:11px;}
.lp-preview-wrap{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:18px;min-height:360px;}
.lp-preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:12.5px;color:var(--lp-muted);}
.lp-sheet{background:#EDEFE8;border-radius:8px;padding:20px;overflow-x:auto;}
.lp-print-row{display:flex;gap:var(--lp-gap-mm,3mm);margin-bottom:var(--lp-gap-mm,3mm);}
.lp-a4-flow{flex-wrap:wrap;}
.lp-sheet.lp-a4-mode .lp-print-row{page-break-after:auto;}
.lp-label-card{background:#fff;position:relative;border:1px solid #D8DAD1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2mm;flex-shrink:0;}
.lp-label-name{font-size:9px;font-weight:600;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-label-price{font-family:monospace;font-size:8px;color:#444;margin-top:1px;}
.lp-label-code-text{font-family:monospace;font-size:7px;color:#333;margin-top:1px;letter-spacing:0.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-barcode-holder{display:flex;align-items:center;justify-content:center;border:1px dashed transparent;overflow:hidden;flex-shrink:0;}
.lp-barcode-holder:empty{border-color:#E0B0B0;}
.lp-label-card svg{max-width:100%;display:block !important;}
@media print{
  /* visibility:hidden은 숨겨진 요소도 레이아웃 공간을 그대로 차지해서, 라벨 크기로
     @page를 작게 잡으면 페이지 전체 높이가 잘게 쪼개져 빈 페이지가 대량 생성된다.
     그래서 인쇄용으로 복제된 #lp_printRoot만 남기고 나머지는 display:none으로
     레이아웃 자체에서 제거한다. (#lp_printRoot는 kprt.js가 인쇄 직전에 body 바로
     아래에 라벨 시트를 복제해서 만든다) */
  html, body{height:auto !important;}
  body > *:not(#lp_printRoot){display:none !important;}
  #lp_printRoot{display:block !important; position:absolute; left:0; top:0; margin:0; padding:0;}
  #lp_printRoot, #lp_printRoot *{box-sizing:border-box;}
  #lp_printRoot .lp-sheet{background:#fff;padding:0;border-radius:0;}
  #lp_printRoot .lp-label-card{border:none;overflow:hidden;}
  #lp_printRoot .lp-barcode-holder{border-color:transparent !important;}
  #lp_printRoot .lp-print-row{page-break-after:always;margin-bottom:0;}
  #lp_printRoot .lp-print-row:last-child{page-break-after:auto;}
  #lp_printRoot .lp-sheet.lp-a4-mode .lp-print-row{page-break-after:auto;}
  #lp_printRoot .lp-sheet.lp-a4-mode .lp-label-card{margin:2mm;}
}

/* --------------------------------------------------------------------
   방어 코드: Rhymix 사이트 레이아웃이 페이지마다 .body에 붙이는
   sidebar_position 클래스(.left/.right)가 일관되지 않게 붙어서
   #content가 좁아지고 옆으로 밀리는 문제 방어 (kmall에서 먼저 발견/조치한
   것과 동일한 문제 - 원인 불명, 서버 캐시 삭제로도 해결 안 됨).
   이 화면에서는 그 클래스가 뭐가 붙든 항상 전체 폭을 쓰도록 강제로 덮어씀.
   (layouts/xedition/css/layout.css의 .body.fixed-width.left/.right .content 규칙 무력화)

   주의: layout.css는 max-width:479px(모바일)에서 이미 이 규칙을
   width:auto/float:none으로 자체 리셋해두고 있음. 그 모바일 전용
   리셋까지 덮어쓰지 않도록, 이 오버라이드는 480px 이상(데스크톱)
   에서만 적용되게 미디어쿼리로 범위를 한정함.
   -------------------------------------------------------------------- */
@media (min-width:480px){
  .body.fixed-width.left .content,
  .body.fixed-width.right .content{
    float:none !important;
    width:1200px !important;
    padding:40px 0 100px;
  }
  .body.fixed-width.left .lnb,
  .body.fixed-width.right .lnb{
    display:none !important;
  }
}

/* 공통 내비게이션 바 (라벨출력/상품관리/원료추적 3개 화면 공용) */
.lp-nav{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.lp-nav a{padding:6px 14px;border-radius:20px;text-decoration:none;font-size:13px;color:var(--lp-muted);background:var(--lp-surface);border:1px solid var(--lp-line);}
.lp-nav a.active{background:var(--lp-accent);color:var(--lp-accent-ink);border-color:var(--lp-accent);font-weight:600;}
.lp-nav a:hover{opacity:0.85;}