:root{
    --navy:#1f2d3d;
    --navy-light:#33475b;
    --accent:#2563eb;
    --accent-dark:#1d4ed8;
    --border:#d8dee6;
    --bg:#f4f6f9;
    --card:#ffffff;
    --muted:#6b7785;
    --danger:#e14b4b;
    --danger-dark:#c53a3a;
    --green:#1a8754;
    --green-dark:#146c43;
  }
  *{box-sizing:border-box;}
  body{
    font-family:'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
    margin:0;
    background:var(--bg);
    color:#20272f;
  }
  header{
    background:var(--navy);
    color:#fff;
    padding:22px 20px;
    margin-bottom:24px;
  }
  header h1{margin:0;font-size:22px;letter-spacing:.3px;}
  header p{margin:6px 0 0;font-size:13px;color:#c3ccd6;}
  .section{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    padding:22px 24px;
    margin-bottom:20px;
  }
  .section h2{
    font-size:15px;
    margin:0 0 16px;
    padding-bottom:10px;
    border-bottom:2px solid var(--navy);
    color:var(--navy);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .section h2 .num{
    background:var(--navy);
    color:#fff;
    width:20px;height:20px;
    border-radius:50%;
    font-size:12px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  h3{font-size:13px;color:var(--navy-light);margin:18px 0 8px;}

  .info-grid{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
  .info-field{display:flex;flex-direction:column;gap:4px;}
  .info-field label{font-size:12px;font-weight:600;color:var(--navy);}
  .info-field input{
    padding:8px 10px;border:1px solid var(--border);border-radius:4px;
    font-size:14px;width:220px;
  }
  .info-field.narrow input{width:150px;}
  .info-note{font-size:11px;color:var(--muted);margin:6px 0 0;}

  .table-scroll{overflow-x:auto;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th,td{border:1px solid var(--border);padding:6px 8px;text-align:center;white-space:nowrap;}
  thead th{background:var(--navy-light);color:#fff;font-weight:600;font-size:12px;}
  .qty-input{
    width:100%;padding:6px 4px;border:1px solid transparent;border-radius:3px;
    text-align:center;font-size:13px;background:#f7f9fb;
  }
  .qty-input:focus{
    border-color:var(--accent);outline:none;background:#fff;
  }
  .color-input{font-weight:600;}
  .row-del-btn{
    background:var(--danger);color:#fff;border:none;border-radius:4px;
    width:24px;height:24px;cursor:pointer;font-size:13px;line-height:1;
  }
  .row-del-btn:hover{background:var(--danger-dark);}

  .unit-wrap{display:flex;flex-direction:column;gap:4px;}

  .btn-group{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
  button{
    padding:8px 16px;border:none;border-radius:4px;cursor:pointer;
    font-size:13px;font-weight:600;
  }
  .btn-add{background:#eef2ff;color:var(--accent-dark);border:1px solid #c7d2fe;}
  .btn-add:hover{background:#e0e7ff;}
  .btn-primary{background:var(--accent);color:#fff;padding:11px 26px;font-size:14px;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-clear{background:#fff;color:var(--danger);border:1px solid var(--danger);padding:11px 22px;}
  .btn-clear:hover{background:#fdecec;}
  .btn-excel{background:var(--green);color:#fff;padding:11px 22px;}
  .btn-excel:hover{background:var(--green-dark);}
  .btn-excel:disabled{background:#a9b6ad;cursor:not-allowed;}
  .calc-bar{text-align:center;margin-bottom:20px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
  .result-empty{
    text-align:center;color:var(--muted);padding:30px 0;font-size:13px;
  }
  #result-table thead th{background:var(--accent);}
  #result-table tbody tr.data-row:nth-of-type(even){background:#f7f9fc;}
  .order-qty{font-weight:700;color:var(--accent-dark);}
  .row-amount{font-weight:600;}
  .row-krw{font-weight:700;color:var(--green-dark);}
  .summary-row td{background:#eef2ff;font-weight:700;}
  .hint{font-size:12px;color:var(--muted);margin:-8px 0 14px;}
  .empty-table-msg{padding:14px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--border);border-radius:4px;}
  .loss-edit{
    width:70px;padding:5px 4px;border:1px solid #b9c6d9;border-radius:3px;
    text-align:center;font-size:13px;background:#fffbea;font-weight:600;
  }
  .loss-edit:focus{border-color:var(--accent);outline:none;background:#fff;}
  .loss-hint{font-size:11px;color:var(--muted);margin:-10px 0 14px;text-align:center;}

  .price-edit{
    width:88px;padding:6px 4px;border:1px solid transparent;border-radius:3px;
    text-align:center;font-size:13px;background:#f7f9fb;
  }
  .price-edit:focus{border-color:var(--accent);outline:none;background:#fff;}

  .grand-totals{
    margin-top:16px;
    padding:14px 18px;
    background:var(--navy);
    border-radius:6px;
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
    align-items:center;
  }
  .grand-total-line{
    color:#dbe4ee;
    font-size:13px;
    font-weight:600;
  }
  .grand-total-krw{
    color:#fff;
    font-size:16px;
    font-weight:700;
    margin-left:auto;
  }

  /* 숫자 입력칸의 증감 화살표 제거 */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  input[type=number]{
    -moz-appearance:textfield;
    appearance:textfield;
  }

  .draft-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#fff8e6;
    border:1px solid #f0d999;
    border-radius:6px;
    padding:12px 16px;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .draft-banner-text{font-size:13px;color:#7a5b00;}
  .draft-banner-actions{display:flex;gap:8px;}

  .calc-warnings{
    background:#fff4e5;
    border:1px solid #f2c185;
    border-radius:6px;
    padding:12px 16px;
    margin-bottom:16px;
  }
  .calc-warnings .warn-title{font-weight:700;color:#9a5b00;font-size:13px;margin-bottom:6px;}
  .calc-warnings .warn-line{font-size:12px;color:#7a4a00;margin:3px 0;}

  @media print{
    @page{ size: A4 landscape; margin: 8mm; }
    body{background:#fff;}
    header, .calc-bar, #draft-banner, #input-tools, .btn-group,
    .row-del-btn, .col-del-btn, #excel-btn, #pdf-btn, .btn-clear, .calc-warnings{
      display:none !important;
    }
    .section{border:none;padding:0;margin-bottom:8px;box-shadow:none;}
    .wrap{max-width:100%;padding:0;}
    .table-scroll{overflow:visible !important;}
    table{font-size:9px;width:100%;table-layout:auto;}
    th,td{padding:2px 4px;white-space:normal;}
    .order-color-input, .loss-edit, .price-edit{
      border:none !important;
      background:transparent !important;
      padding:0 !important;
      width:auto !important;
      color:inherit !important;
      font:inherit !important;
      font-size:9px !important;
    }
    .grand-totals{background:#eef2ff !important;color:#1f2d3d;padding:8px 12px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    .grand-total-line, .grand-total-krw{color:#1f2d3d !important;font-size:11px;}
    thead th{background:#33475b !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  }

  /* ===================== 발주방법 설명서 모달 ===================== */
  .guide-btn{
    margin-top:12px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.4);
  }
  .guide-btn:hover{background:rgba(255,255,255,.25);}
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,32,.55);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .modal-box{
    background:#fff;
    border-radius:8px;
    max-width:560px;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
    padding:28px 26px;
    position:relative;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
  }
  .modal-box h2{
    margin:0 0 16px;
    font-size:17px;
    color:var(--navy);
    padding-right:24px;
  }
  .modal-close{
    position:absolute;
    top:14px;right:14px;
    width:28px;height:28px;
    border-radius:50%;
    background:#f2f4f6;
    color:var(--muted);
    font-size:15px;
    line-height:1;
  }
  .modal-close:hover{background:#e5e8eb;color:#20272f;}
  .guide-steps{
    margin:0;
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .guide-steps li{
    font-size:13px;
    line-height:1.6;
    color:#20272f;
  }
  .guide-steps li strong{color:var(--navy);}