/* ════════════════════════════════════════════════════════════════
   DOYA BURGUNDY — 도야 버건디 워룸 디자인 시스템 (재사용 테마)
   검은 돌 배경 + 다크 버건디 + 파스텔 로즈 텍스트 + 황동(브라스) 프레이밍
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0B0B0D; --bg-deep: #060607;
  --panel: #16151a; --panel-2: #1d1c22; --panel-3: #27262e;
  --border: #2a2830; --border-2: #3a3742; --hairline: #1a191f;
  --text: #EFEBE3; --text-2: #b9b3a8; --muted: #8a8478; --text-dim: #807a6f;
  --accent: #6E1423; --accent-2: #8a2030; --accent-dim: #5a2530;
  --accent-text: #E6A9B0; --on-accent: #ffffff; --accent-glow: rgba(110,20,35,0.22);
  --danger: #e5544b; --danger-2: #ff7a70;
  --warn: #e0a13c; --ok: #4ec98a;
  --live: #4ec98a; --idle: #827d77;
  --metal: #6b5a3e; --metal-2: #a8895c;
  --metal-line: rgba(168,137,92,0.28); --metal-line-strong: rgba(168,137,92,0.55);
  --metal-glow: rgba(168,137,92,0.10);
  --data: #8fb6c9; --data-dim: #6b889c; --grid-line: rgba(168,137,92,0.05);
  --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px;
  --fs-base: 14.5px; --fs-md: 16px; --fs-lg: 19px;
  --fs-xl: 23px; --fs-2xl: 30px; --fs-data: 34px;
  --lh-tight: 1.25; --lh-snug: 1.45; --lh-body: 1.68; --tracking-eyebrow: 0.14em;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter: 24px; --pad-panel: 24px;
  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px;
  --el-1: 0 1px 0 rgba(255,255,255,0.025) inset, 0 2px 8px rgba(0,0,0,0.35);
  --el-2: 0 1px 0 rgba(255,255,255,0.035) inset, 0 8px 24px rgba(0,0,0,0.45);
  --el-3: 0 1px 0 rgba(255,255,255,0.045) inset, 0 18px 50px rgba(0,0,0,0.55);
  --ring-accent: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow);
  --ring-metal: 0 0 0 1px var(--metal-line);
  --grain-opacity: 0.07; --stone-opacity: 0.6;
  font-family: "Pretendard", "Pretendard Variable", -apple-system, "SF Pro Text",
    "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text);
  background:
    radial-gradient(110% 70% at 8% -5%, var(--accent-glow), transparent 45%),
    radial-gradient(90% 60% at 100% 105%, var(--accent-glow), transparent 50%),
    var(--bg);
  background-attachment: fixed; overflow-x: hidden;
  font-size: var(--fs-base); line-height: var(--lh-body);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--stone-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono, .data {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.data { color: var(--data); }
.op-code { color: var(--metal-2); font-weight: 600; letter-spacing: 0.08em; }
.eyebrow {
  font: var(--fs-micro)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--metal-2); display: flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--metal-line-strong); flex-shrink: 0; }
h1, h2, h3, h4 { color: var(--text); line-height: var(--lh-tight); }
a { color: var(--accent-text); }
strong, b { color: var(--accent-text); }
.framed { position: relative; }
.framed::before, .framed::after {
  content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none;
  border: 1px solid var(--metal-line-strong); z-index: 2;
}
.framed::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.framed::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.framed > .tick-tr, .framed > .tick-bl {
  position: absolute; width: 13px; height: 13px;
  border: 1px solid var(--metal-line-strong); pointer-events: none; z-index: 2;
}
.framed > .tick-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.framed > .tick-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-panel); box-shadow: var(--el-2);
}
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 20px 22px; box-shadow: var(--el-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--border-2); box-shadow: var(--el-2); transform: translateY(-1px); }
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--on-accent); border: none; border-radius: var(--radius-sm);
  padding: 12px 22px; font-size: var(--fs-md); font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 16px var(--accent-glow);
  font-family: inherit;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-120%); animation: dy-shine 5s ease-in-out infinite; pointer-events: none;
}
.btn-ghost {
  background: var(--panel-2); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 12px 18px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .12s;
}
.btn-ghost:hover { color: var(--accent-text); border-color: var(--accent-2); background: rgba(110,20,35,0.12); }
.input, input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width: 100%; background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: var(--fs-md); line-height: var(--lh-body);
  font-family: inherit;
}
.input:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent-dim);
  box-shadow: var(--ring-accent); caret-color: var(--accent-text);
}
::placeholder { color: var(--text-dim); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-micro); padding: 4px 10px; border-radius: var(--radius-xs);
  letter-spacing: 0.06em; font-weight: 600;
}
.badge.live { background: rgba(78,201,138,0.12); color: var(--live); border: 1px solid rgba(78,201,138,0.4); }
.badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(78,201,138,0.5); animation: dy-pulse 2.4s ease-out infinite;
}
.badge.data { background: rgba(143,182,201,0.1); color: var(--data); border: 1px solid rgba(143,182,201,0.28); }
.badge.idle { background: rgba(130,125,119,0.12); color: var(--muted); border: 1px solid var(--border-2); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(78,201,138,0.5); flex-shrink: 0; animation: dy-pulse 2.4s ease-out infinite; }
.cmd-strip {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--sp-5);
  height: 36px; padding: 0 var(--sp-5);
  background: linear-gradient(180deg, #0e0d11, #090809);
  border-bottom: 1px solid var(--metal-line);
  font: var(--fs-micro)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: var(--tracking-eyebrow); color: var(--data-dim);
  text-transform: uppercase; user-select: none;
}
.cmd-strip .seg { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.cmd-strip .seg b { color: var(--data); font-weight: 600; }
.cmd-strip .sep { width: 1px; height: 14px; background: var(--metal-line); }
.cmd-strip .spacer { margin-left: auto; }
.divider {
  display: flex; align-items: center; gap: 11px;
  margin: var(--sp-7) 0 var(--sp-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-micro); text-transform: uppercase;
  color: var(--metal-2); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
}
.divider::before { content: "◆"; font-size: 9px; color: var(--metal-2); }
.divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--metal-line-strong), var(--metal-line) 40%, transparent);
}
@keyframes dy-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } }
@keyframes dy-pulse {
  0% { box-shadow: 0 0 0 0 rgba(78,201,138,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(78,201,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,201,138,0); }
}
@keyframes dy-cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.anim-in { animation: dy-cardIn .45s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .anim-in, .live-dot, .badge.live::before, .btn-primary::after { animation: none !important; }
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }