/* ════════════════════════════════════════════════════════════════
DOYA BURGUNDY — 도야 버건디 워룸 디자인 시스템 (재사용 테마)
----------------------------------------------------------------
검은 돌 배경 + 다크 버건디 + 파스텔 로즈 텍스트 + 황동(브라스) 프레이밍
"워룸(작전 지휘 본부)" 무드의 프리미엄 다크 UI.
사용법:
1) 에 Pretendard + 이 파일 연결:
2) 는 기본으로 검은 돌 배경 + 그레인 질감이 적용됨.
3) 유틸 클래스: .eyebrow .mono .data .framed .live-dot .btn-primary .card .panel .badge ...
════════════════════════════════════════════════════════════════ */
: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: #827d77;
--text-dim: #5a554f;
/* ── 버건디 (브랜드 강조) ── */
--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;
/* ── 황동(브라스) 프레이밍 — 1px 라인 전용, 채움 금지 (고급 질감의 핵심) ── */
--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: #5f7c8a;
--grid-line: rgba(168,137,92,0.05);
/* ── 타이포 스케일 (1.20 modular) ── */
--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;
/* ── 간격 스케일 (4px base) ── */
--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;
/* ── 엘리베이션 (top-highlight + drop) ── */
--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%3C/filter%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; }
/* 섹션 머리표 (── SECTOR / 라벨) — 황동 모노 */
.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 + 선택적 4모서리) ────────── */
.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"], 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; }
.idle-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); flex-shrink: 0; }
/* ────────── 상단 커맨드 스트립 (선택) ────────── */
.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); }