/* ====================================================================
   오토팩토리: 컨베이어 제국 — AutoFactory
   라이트 "제도판/산업" 벡터 스타일 (픽셀아트·네온 아님)
   ==================================================================== */
:root{
  --floor:#e9edf2; --floor2:#dfe5ec; --grid:#cfd8e3; --grid2:#c2cdda;
  --ink:#1f2937; --ink2:#475569; --mut:#7c8aa0;
  --panel:#ffffff; --panelEdge:#dde3ea; --shadow:0 10px 30px rgba(30,41,59,.14);
  --amber:#f59e0b; --amber2:#d97706; --teal:#0ea5e9; --green:#10b981;
  --red:#ef4444; --violet:#8b5cf6;
  --r:14px;
  font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:"Pretendard","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);background:#cbd5e1;overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
b{font-weight:800}

/* ---------- topbar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;height:50px;z-index:30;
  display:flex;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  border-bottom:1px solid var(--panelEdge);box-shadow:0 2px 10px rgba(30,41,59,.06);
  padding-right:58px
}
#topbar .back{color:var(--ink2);text-decoration:none;font-weight:700;font-size:14px;
  padding:6px 10px;border-radius:9px;background:#eef2f7}
#topbar .brand{font-weight:900;letter-spacing:-.02em;font-size:16px}
#topbar .brand .ic{color:var(--amber2)}
#topbar .spacer{flex:1}
#topbar .hs{font-size:12px;color:var(--mut);font-weight:700}
#topbar .hs b{color:var(--amber2);font-size:14px}

/* ---------- stage ---------- */
#stage{position:fixed;inset:50px 0 0 0;overflow:hidden;background:
  radial-gradient(120% 120% at 50% 0%, #f3f6fa 0%, #e3e9f0 60%, #d8e0ea 100%)}
canvas#game{display:block;width:100%;height:100%;touch-action:none}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud.hidden{display:none}

/* top status row */
#statRow{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;pointer-events:auto;max-width:96%;flex-wrap:wrap;justify-content:center
}
.stat{
  background:var(--panel);border:1px solid var(--panelEdge);border-radius:11px;
  box-shadow:var(--shadow);padding:6px 11px;display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;min-height:34px
}
.stat .lab{color:var(--mut);font-weight:700;font-size:11px}
.stat .v{font-variant-numeric:tabular-nums}
.stat.money .v{color:var(--amber2)}
.stat.res .v{color:var(--teal)}

/* quota panel */
#quota{
  position:absolute;top:10px;right:12px;width:230px;pointer-events:auto;
  background:var(--panel);border:1px solid var(--panelEdge);border-radius:13px;
  box-shadow:var(--shadow);padding:10px 12px
}
#quota .qhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#quota .qtitle{font-weight:900;font-size:13px}
#quota .qtitle small{color:var(--mut);font-weight:700}
#quota .qtime{font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink)}
#quota .qtime.warn{color:var(--red);animation:pulse .6s infinite alternate}
@keyframes pulse{to{opacity:.45}}
#quota .qbarwrap{height:12px;border-radius:7px;background:#eef2f7;overflow:hidden;border:1px solid #e2e8f0}
#quota .qbar{height:100%;width:0;border-radius:7px;
  background:linear-gradient(90deg,var(--green),#34d399);transition:width .2s}
#quota .qnums{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--ink2);font-weight:700}
#quota .qtimebar{height:5px;border-radius:4px;background:#eef2f7;margin-top:7px;overflow:hidden}
#quota .qtimebar > div{height:100%;background:var(--teal);width:100%}
#quota .qtimebar.warn > div{background:var(--red)}

/* toolbar (bottom) */
#toolbar{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;pointer-events:auto;background:var(--panel);
  border:1px solid var(--panelEdge);border-radius:16px;box-shadow:var(--shadow);
  padding:7px;max-width:97%;overflow-x:auto
}
.tool{
  width:58px;min-width:58px;height:60px;border-radius:11px;background:#f3f6fa;
  border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;position:relative;color:var(--ink)
}
.tool .ti{font-size:21px;line-height:1}
.tool .tn{font-size:10px;font-weight:800}
.tool .tc{font-size:9px;color:var(--amber2);font-weight:800}
.tool.sel{border-color:var(--amber);background:#fff7ea;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.tool:disabled{opacity:.4}
.tool.danger.sel{border-color:var(--red);background:#fef2f2;box-shadow:0 0 0 3px rgba(239,68,68,.16)}

/* side action buttons */
#sideBtns{position:absolute;right:12px;bottom:80px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.iconbtn{
  width:46px;height:46px;border-radius:12px;background:var(--panel);border:1px solid var(--panelEdge);
  box-shadow:var(--shadow);font-size:20px;display:flex;align-items:center;justify-content:center;color:var(--ink2)
}
.iconbtn.on{color:var(--amber2);border-color:var(--amber)}
.iconbtn.rotbtn{color:var(--green);border-color:#bbf7d0;font-size:24px;font-weight:900}
.iconbtn.rotbtn:active{transform:rotate(90deg)}

/* hint / inspector */
#hint{
  position:absolute;bottom:80px;left:12px;max-width:54%;pointer-events:none;
  background:rgba(31,41,55,.9);color:#fff;font-size:12px;font-weight:600;line-height:1.4;
  padding:8px 11px;border-radius:10px;opacity:0;transition:opacity .25s
}
#hint.show{opacity:1}

/* toast */
#toast{
  position:absolute;top:62px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:8px 14px;border-radius:11px;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:25;box-shadow:var(--shadow)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--red)}
#toast.good{background:var(--green)}

/* ---------- overlays / screens ---------- */
.screen{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:18px;overflow:auto}
.screen.hidden{display:none}
.overlay{background:rgba(226,232,240,.78);backdrop-filter:blur(5px)}
.card{
  background:var(--panel);border:1px solid var(--panelEdge);border-radius:22px;box-shadow:var(--shadow);
  width:min(560px,96vw);padding:26px 24px;text-align:center;position:relative
}
.card .logo{font-size:54px;line-height:1;margin-bottom:6px}
.card h1{margin:0 0 2px;font-size:30px;letter-spacing:-.03em}
.card h1 small{display:block;font-size:13px;color:var(--mut);font-weight:700;letter-spacing:.02em;margin-top:4px}
.card .tag{color:var(--ink2);font-size:14px;line-height:1.6;margin:14px 4px 16px}
.card .tag b{color:var(--amber2)}
.feats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:0 0 18px}
.feats span{background:#f1f5f9;border:1px solid #e6edf4;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--ink2)}
.btn{
  background:linear-gradient(180deg,var(--amber),var(--amber2));color:#fff;font-weight:900;
  border-radius:13px;padding:13px 22px;font-size:16px;box-shadow:0 6px 16px rgba(217,119,6,.32)
}
.btn.big{width:100%;font-size:18px;padding:15px}
.btn.ghost{background:#eef2f7;color:var(--ink2);box-shadow:none}
.btn.ghost.sm{padding:10px;font-size:14px;margin-top:8px}
.btn.teal{background:linear-gradient(180deg,#38bdf8,var(--teal));box-shadow:0 6px 16px rgba(14,165,233,.3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;filter:grayscale(.3)}
.hint{color:var(--mut);font-size:12px;line-height:1.6;margin-top:14px}
.hint b{color:var(--ink2)}

/* how-to grid */
.howto{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:6px 0 4px;text-align:left}
.howto .h{background:#f6f9fc;border:1px solid #e8eef4;border-radius:11px;padding:9px 11px;font-size:12px;color:var(--ink2);line-height:1.45}
.howto .h b{color:var(--ink);display:block;margin-bottom:2px;font-size:12.5px}

/* recipe / research panels reuse .card; lists */
.panelHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panelHead h2{margin:0;font-size:21px;letter-spacing:-.02em}
.panelHead .close{font-size:22px;color:var(--mut);width:34px;height:34px;border-radius:9px;background:#f1f5f9}
.scroll{max-height:60vh;overflow:auto;text-align:left;margin:-4px -4px 0;padding:4px}

.rlist{display:flex;flex-direction:column;gap:8px}
.ritem{
  display:flex;align-items:center;gap:11px;background:#f7fafc;border:1px solid #e8eef4;
  border-radius:13px;padding:10px 12px
}
.ritem.locked{opacity:.55}
.ritem.sel{border-color:var(--amber);background:#fff7ea;box-shadow:0 0 0 2px rgba(245,158,11,.18) inset}
.ritem .ricon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:900;color:#fff;flex:0 0 auto}
.ritem .rbody{flex:1;min-width:0}
.ritem .rname{font-weight:800;font-size:14px}
.ritem .rdesc{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.4}
.ritem .rcost{font-weight:900;font-size:13px;color:var(--amber2);white-space:nowrap}
.ritem .rcost.res{color:var(--teal)}
.flowchip{display:inline-flex;align-items:center;gap:3px;background:#eef2f7;border-radius:7px;padding:2px 6px;
  font-size:11px;font-weight:800;margin:1px 2px 1px 0}
.lvtag{font-size:10px;font-weight:900;color:#fff;background:var(--teal);border-radius:6px;padding:2px 6px;margin-left:6px}
.lvtag.max{background:var(--green)}

.overstats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 14px}
.overstats .o{background:#f1f5f9;border-radius:11px;padding:9px 13px;min-width:80px}
.overstats .o .ol{font-size:11px;color:var(--mut);font-weight:700}
.overstats .o .ov{font-size:18px;font-weight:900;margin-top:1px}
#overScoreWrap{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 14px}
#overScoreWrap span{font-size:12px;color:var(--mut);font-weight:700}
#overScoreWrap b{font-size:38px;color:var(--amber2);line-height:1;font-variant-numeric:tabular-nums}

@media (max-width:560px){
  .card{padding:22px 16px}
  .card h1{font-size:25px}
  .howto{grid-template-columns:1fr}
  #quota{width:190px;top:54px;right:8px}
  #statRow{top:8px}
  .tool{width:52px;min-width:52px;height:56px}
}