/* ============================================================
   Point Shower Design System v0.2 (2026-04-29)
   Light theme · ksmed.kr-inspired · Pretendard
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* === Surfaces === */
  --bg:#ffffff;
  --bg-section:#f7f8fa;
  --bg-soft:#fafbfc;
  --card:#ffffff;
  --elevated:#ffffff;
  --hover:#f7f8fa;

  /* === Text === */
  --text:#0f172a;
  --dim:#475569;
  --muted:#64748b;
  --subtle:#94a3b8;

  /* === Border === */
  --border:#e5e7eb;
  --border-strong:#cbd5e1;
  --border-subtle:#f1f5f9;

  /* === Brand (Point Shower orange) === */
  --accent:#ff6b2b;
  --accent-deep:#c84a14;
  --accent-soft:#fff4ee;
  --accent-dim:#fef0e6;
  --accent-glow:rgba(255,107,43,0.18);

  /* === Semantic === */
  --green:#059669;--green-dim:#ecfdf5;
  --yellow:#d97706;--yellow-dim:#fffbeb;
  --red:#dc2626;--red-dim:#fef2f2;
  --blue:#2563eb;--blue-dim:#eff6ff;
  --purple:#7c3aed;--purple-dim:#f5f3ff;
  --pink:#db2777;--pink-dim:#fdf2f8;

  /* === Type === */
  --fd:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
  --fb:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Inter','Noto Sans KR',sans-serif;
  --fm:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  /* === Radius === */
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;

  /* === Shadow === */
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --shadow:0 1px 3px rgba(15,23,42,0.06),0 1px 2px -1px rgba(15,23,42,0.06);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,0.06),0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,0.08);
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","ss03";
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
::selection{background:var(--accent-soft);color:var(--accent-deep);}

/* === Headings === */
h1,h2,h3,h4,h5,h6{font-family:var(--fd);font-weight:800;letter-spacing:-0.02em;color:var(--text);}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:var(--fb);font-size:16px;font-weight:600;cursor:pointer;transition:all 0.15s;letter-spacing:-0.005em;}
.btn:hover{border-color:var(--border-strong);background:var(--bg-section);}
.btn-primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover,.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);box-shadow:0 4px 10px -2px var(--accent-glow);}
.btn-ghost{background:transparent;border-color:transparent;}
.btn-ghost:hover{background:var(--bg-section);border-color:var(--border);}
.btn-sm{padding:8px 14px;font-size:14px;}
.btn-block{width:100%;justify-content:center;}
.btn-danger,.btn.danger{background:#fff;border-color:#fecaca;color:var(--red);}
.btn-danger:hover,.btn.danger:hover{background:var(--red-dim);}

/* === Cards === */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}

/* === Forms === */
input,select,textarea{font-family:var(--fb);font-size:16px;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 14px;transition:all 0.15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* === Status === */
.st{font-size:13.5px;padding:5px 12px;border-radius:100px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.st-received{background:var(--blue-dim);color:var(--blue);}
.st-design_queued,.st-print_queued{background:var(--yellow-dim);color:var(--yellow);}
.st-designing,.st-printing,.st-assembling,.st-qc{background:var(--purple-dim);color:var(--purple);}
.st-design_done{background:var(--green-dim);color:var(--green);}
.st-shipping{background:var(--blue-dim);color:var(--blue);}
.st-delivered{background:var(--green-dim);color:var(--green);}
.st-applied{background:var(--accent-soft);color:var(--accent-deep);}
.st-settled{background:#f1f5f9;color:var(--muted);}
.st-failed,.st-rescan_requested{background:var(--red-dim);color:var(--red);}

/* === Tags === */
.tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:13.5px;background:var(--bg-section);color:var(--muted);font-weight:600;}

/* === Tables === */
.tbl{width:100%;border-collapse:collapse;font-size:16px;}
.tbl th{text-align:left;padding:16px 18px;font-weight:700;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border);background:var(--bg-section);}
.tbl td{padding:16px 18px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;color:var(--text);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.clickable{cursor:pointer;}
.tbl tr.clickable:hover td{background:var(--accent-soft);}
.tbl .mono{font-family:var(--fm);font-size:14.5px;color:var(--dim);}
.tbl .num{text-align:right;font-family:var(--fm);font-feature-settings:"tnum";}

/* === Mark/highlight === */
mark{background:var(--accent-soft);color:var(--accent-deep);border-radius:3px;padding:1px 4px;font-weight:600;}

/* === Common header bar (sub-pages) === */
.page-header{padding:24px 32px;background:#fff;border-bottom:1px solid var(--border);}
.page-header .back{color:var(--accent);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;}
.page-header .back:hover{color:var(--accent-deep);}
.page-header h1{font-size:28px;font-weight:800;letter-spacing:-0.025em;}
.page-header p{font-size:16px;color:var(--muted);margin-top:4px;}

/* === Empty state === */
.empty{padding:56px 20px;text-align:center;color:var(--muted);font-size:15.5px;}
.empty .em-icon{font-size:40px;margin-bottom:14px;opacity:0.3;}

/* === Scrollbar === */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px;border:2px solid var(--bg-section);}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* === Focus ring === */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* === Reduced motion === */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}