From abe1087eae7d3735ca25855ea46c64188856faf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=91=EC=A1=B0?= <bjkim2@samaneng.com>
Date: Wed, 28 Oct 2026 18:19:17 +0900
Subject: [PATCH] Add src/styles.css

---
 src/styles.css | 335 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 src/styles.css

diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..b930220
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,335 @@
+/* Theme tokens */
+    :root {
+  color-scheme:dark;
+  --bg:#101419;
+  --panel:#171d24;
+  --line:#29333e;
+  --muted:#93a1ad;
+  --text:#edf2f6;
+  --accent:#66d6b2;
+  --blue:#78a9ff
+}
+    /* Base controls */
+* {
+  box-sizing:border-box
+}
+body {
+  margin:0;
+  background:var(--bg);
+  color:var(--text);
+  font:14px/1.5 Inter,"Segoe UI",sans-serif
+}
+button,input,select {
+  font:inherit
+}
+button {
+  cursor:pointer;
+  border:0;
+  border-radius:8px;
+  padding:10px 14px;
+  background:var(--accent);
+  color:#0b1714;
+  font-weight:700
+}
+button:disabled {
+  opacity:.4;
+  cursor:not-allowed
+}
+    /* App and preview layout */
+.app {
+  min-height:100vh;
+  display:grid;
+  grid-template-columns:320px 1fr
+}
+.side {
+  padding:16px 18px;
+  border-right:1px solid var(--line);
+  background:#13181e;
+  overflow:auto
+}
+.brand {
+  display:flex;
+  gap:12px;
+  align-items:center;
+  margin-bottom:12px
+}
+.logo {
+  width:38px;
+  height:38px;
+  border-radius:11px;
+  background:#1e3f39;
+  color:var(--accent);
+  display:grid;
+  place-items:center;
+  font-weight:800;
+  font-size:18px
+}
+.brand h1 {
+  font-size:16px;
+  line-height:1.25;
+  margin:0
+}
+.brand p {
+  font-size:12px;
+  color:var(--muted);
+  margin:3px 0 0
+}
+    /* DXF input controls */
+.step {
+  font-size:11px;
+  color:var(--accent);
+  font-weight:800;
+  letter-spacing:.09em;
+  text-transform:uppercase;
+  margin:12px 0 6px
+}
+.drop {
+  border:1px dashed #43515d;
+  border-radius:12px;
+  padding:10px 14px;
+  text-align:center;
+  background:#171f26;
+  transition:.2s
+}
+.drop.drag {
+  border-color:var(--accent);
+  background:#1a2c29
+}
+.drop strong {
+  display:block;
+  margin-bottom:4px
+}
+.drop small {
+  display:block;
+  color:var(--muted)
+}
+.drop input {
+  display:none
+}
+.pick {
+  display:inline-block;
+  margin-top:6px;
+  padding:7px 12px;
+  border-radius:7px;
+  background:#27333c;
+  color:var(--text);
+  cursor:pointer
+}
+.fileline {
+  font-size:12px;
+  color:#b9c6cf;
+  margin-top:5px;
+  overflow-wrap:anywhere
+}
+.field {
+  margin:7px 0
+}
+.field label {
+  display:block;
+  color:#c5cfd7;
+  font-size:12px;
+  margin-bottom:4px
+}
+.field select,.field input {
+  width:100%;
+  height:36px;
+  padding:0 10px;
+  border-radius:7px;
+  border:1px solid #34414c;
+  background:#10161b;
+  color:var(--text);
+  outline:none
+}
+.field select:focus,.field input:focus {
+  border-color:var(--accent)
+}
+.grid2 {
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:8px
+}
+.check {
+  display:flex;
+  gap:8px;
+  align-items:center;
+  color:#bec9d1;
+  font-size:12px;
+  margin:7px 0
+}
+.check input {
+  accent-color:var(--accent)
+}
+.primary {
+  width:100%;
+  margin-top:5px
+}
+.status {
+  min-height:20px;
+  color:var(--muted);
+  font-size:12px;
+  margin-top:5px
+}
+.status.error {
+  color:#ff9c91
+}
+.hint {
+  font-size:11px;
+  color:#82919c;
+  margin-top:12px
+}
+    /* Preview and generated parts */
+.main {
+  min-width:0;
+  display:flex;
+  flex-direction:column
+}
+.top {
+  height:70px;
+  border-bottom:1px solid var(--line);
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  padding:0 22px
+}
+.top h2 {
+  font-size:15px;
+  margin:0
+}
+.top small {
+  color:var(--muted)
+}
+.toolbar {
+  display:flex;
+  gap:8px
+}
+.secondary {
+  background:#27323c;
+  color:#dce5eb;
+  font-size:12px;
+  padding:8px 11px
+}
+.viewer {
+  position:relative;
+  flex:1;
+  min-height:420px;
+  background:radial-gradient(ellipse at 50% 42%,#1b242c 0,#12181e 60%,#101419 100%)
+}
+#viewport {
+  position:absolute;
+  inset:0
+}
+.empty {
+  position:absolute;
+  inset:0;
+  display:grid;
+  place-items:center;
+  text-align:center;
+  pointer-events:none
+}
+.emptybox {
+  max-width:370px;
+  padding:22px
+}
+.emptyicon {
+  font-size:36px;
+  color:#536470
+}
+.empty h3 {
+  font-size:17px;
+  margin:8px 0
+}
+.empty p {
+  color:var(--muted);
+  font-size:13px
+}
+.hidden {
+  display:none!important
+}
+.badge {
+  position:absolute;
+  left:18px;
+  top:16px;
+  background:#131a20dd;
+  border:1px solid var(--line);
+  border-radius:7px;
+  padding:7px 10px;
+  color:#c2cdd5;
+  font-size:11px
+}
+.legend {
+  position:absolute;
+  right:18px;
+  top:16px;
+  background:#131a20dd;
+  border:1px solid var(--line);
+  border-radius:8px;
+  padding:10px 12px;
+  font-size:11px;
+  color:#bdc8d0
+}
+.legend span {
+  display:inline-block;
+  width:8px;
+  height:8px;
+  border-radius:50%;
+  background:var(--accent);
+  margin-right:6px
+}
+/* Generated parts and footer */
+.partslist {
+  margin-top:14px;
+  padding:11px;
+  border:1px solid var(--line);
+  border-radius:9px;
+  background:#10161b
+}
+.partslist b {
+  display:block;
+  font-size:12px;
+  margin-bottom:7px
+}
+.partrow {
+  display:flex;
+  align-items:center;
+  gap:8px;
+  padding:4px 0;
+  color:#c6d1d8;
+  font-size:12px
+}
+.partrow input {
+  accent-color:var(--accent)
+}
+.swatch {
+  width:9px;
+  height:9px;
+  border-radius:2px;
+  display:inline-block
+}
+.footer {
+  border-top:1px solid var(--line);
+  padding:13px 20px;
+  color:var(--muted);
+  font-size:11px;
+  display:flex;
+  justify-content:space-between
+}
+.toast {
+  color:var(--accent)
+}
+    /* Responsive layout */
+@media(max-width:850px) {
+.app {
+  grid-template-columns:1fr
+}
+.side {
+  border-right:0;
+  border-bottom:1px solid var(--line);
+  padding:18px
+}
+.main {
+  min-height:65vh
+}
+.top {
+  height:58px
+}
+}