/* BASIC css start */
    :root { --fg:#222; --bg:#fff; --muted:#666; --pri:#1a73e8; --b:#e6e6e6; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, sans-serif; color:var(--fg); background:var(--bg); }
    header { position: sticky; top:0; background:#fff; border-bottom:1px solid var(--b); padding:12px 16px; z-index: 10; }
    header h1 { margin:0; font-size: 18px; }
    main { max-width: 1100px; margin: 24px auto; padding: 0 16px 40px; }
    .grid { display:grid; gap:12px; }
    .panel { border:1px solid var(--b); border-radius:12px; padding:16px; background:#fff; }
    .panel h2 { margin:0 0 12px; font-size:16px; }
    label { font-size: 13px; color: var(--muted); display:block; margin-bottom: 6px; }
    select, input[type="number"], input[type="text"] { width:100%; padding:10px 12px; border:1px solid var(--b); border-radius:10px; font-size:14px; }
    .row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
    .row-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
    .row-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
    .btn { appearance:none; border:1px solid var(--b); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
    .btn.primary { background:var(--pri); border-color:var(--pri); color:#fff; }
    .btn.ghost { background:#fff; }
    .btn:disabled { opacity: .5; cursor:not-allowed; }
    .muted { color: var(--muted); font-size: 12px; }
    .price { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border-bottom:1px solid var(--b); padding:10px 8px; text-align:left; font-size:14px; }
    tfoot td { font-weight:700; }
    .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f6f7f8; border:1px solid var(--b); font-size:12px; }
    .right { text-align:right; }
    .flex { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .hidden { display:none; }
    .hint { font-size:12px; color:#0b8457; }
    .danger { color:#c62828; }
    .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .kbd { font:12px/1.4 ui-monospace; background:#f6f7f8; border:1px solid var(--b); padding:0 6px; border-radius:6px; }

    /* 편집 모달 */
    .modal.hidden { display:none; }
    .modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:999; }
    .modal-body { background:#fff; padding:16px; border-radius:12px; min-width:360px; display:grid; gap:10px; }
    .row.gap { display:flex; gap:8px; justify-content:flex-end; }
    .btn.danger { background:#e23; color:#fff; border-color:#e23; }
    /* 행 선택 + 드래그 */
    tr.selected { background: #f0f6ff; }
    tr.drag-over { outline:2px dashed #9aa; }
    .handle { cursor: grab; user-select: none; -webkit-user-drag: element; }
    tr.dragging { opacity: .6; }
    
/* 드래그 중 떠있는 복제 행(고스트) */
.tr-ghost {
  position: fixed;
  z-index: 9999;
  opacity: 0.9;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* 자리 표시자 */
.tr-placeholder td {
  background: #eef6ff !important;
  border-top: 2px dashed #8fb3ff !important;
  border-bottom: 2px dashed #8fb3ff !important;
}

/* BASIC css end */