/* MUAMUAE 공통 자 (260928, docs/design/muamuae_design_principles_260928.html)
   콘솔·랜딩·기보실·관리자 네 화면이 **같은 자**를 쓴다: 색·글꼴·간격·둥글기·움직임·스크롤바·초점 고리.
   이 파일은 화면별 CSS 보다 먼저 온다. 화면 CSS 는 배치만 하고 값은 여기 토큰을 쓴다.
   글꼴은 전부 Windows 내장 — 오프라인에서도 의도한 그대로 나와야 한다. */

:root{
  /* 색 — 심야 베이즈 그린 + 브래스 */
  --baize:      #0b1c19;
  --baize-2:    #061210;
  --felt:       #12332c;
  --brass:      #c08a2d;
  --brass-2:    #e6b862;
  --ink:        #ece7d7;
  --ink-2:      #c3c8bf;
  --muted:      #8a9d95;
  --faint:      #63776f;
  --line:       rgba(224,173,85,.20);
  --line-soft:  rgba(236,231,215,.09);
  --ok:   #58d68d;
  --warn: #e6b862;
  --bad:  #e0685f;
  --live: #55d3e0;
  /* 강조색 — 콘솔은 고른 게임 색으로 갈아끼운다. 다른 화면은 브래스. */
  --accent:     #c08a2d;
  --accent-rgb: 192,138,45;

  /* 글꼴 */
  --ff-display: "Bahnschrift","DIN Alternate","Segoe UI Semibold",sans-serif;
  --ff-body:    "Malgun Gothic","Apple SD Gothic Neo","Segoe UI",sans-serif;
  --ff-mono:    "Cascadia Mono","Cascadia Code",Consolas,monospace;

  /* 간격·둥글기 — 4의 배수. 카드 16 · 칩 999 · 입력 9 · 버튼 9 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;
  --r-card: 16px; --r-btn: 9px; --r-field: 9px; --r-pill: 999px;

  /* 움직임 — 튀어오름(pop)·자석(magnet)·가라앉음(settle). 시간은 .18 / .34 / .62 셋뿐. */
  --ease-pop:    cubic-bezier(.22,.96,.30,1.18);
  --ease-magnet: cubic-bezier(.20,1.35,.40,1);
  --ease-settle: cubic-bezier(.40,0,.20,1);
  --t-fast: .18s; --t-mid: .34s; --t-slow: .62s;
  --t-magnet: .46s;
  --lens-opacity: .34; --lens-saturation: .15;
  --t-reduced: .01ms;

  /* 그림자 */
  --shadow-card: 0 24px 60px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ── 스크롤바: 모든 화면이 같은 얇은 브래스 막대 ────────────── */
*{scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.38) transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.38); border-radius:9px; border:2px solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.6); background-clip:padding-box;}

/* ── 초점 고리: 키보드로 닿는 모든 것이 같은 고리 ───────────── */
:focus{outline:none;}
:focus-visible{outline:2px solid rgba(var(--accent-rgb),.9); outline-offset:3px; border-radius:var(--r-btn);}

/* ── 글자 ─────────────────────────────────────────────────── */
.eyebrow{font-family:var(--ff-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass);}
.mono{font-family:var(--ff-mono);}
.small{font-size:12px; color:var(--muted);}
.muted{color:var(--muted);}
kbd.btn{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px;
  border-radius:var(--r-pill); border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05); color:var(--ink-2);
  font-family:var(--ff-mono); font-size:10.5px; font-weight:600;
}

/* ── 버튼: .act 하나. 변형은 --primary · --danger · --ghost ──── */
.act{
  font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 88;
  font-size:14px; letter-spacing:.05em; line-height:1.2;
  padding:10px 22px; border-radius:var(--r-btn); cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
  transition:background var(--t-fast), transform var(--t-fast) var(--ease-pop), border-color var(--t-fast), color var(--t-fast);
  text-decoration:none; display:inline-block; text-align:center;
}
.act:hover{background:rgba(255,255,255,.09); transform:translateY(-2px);}
.act:active{transform:translateY(0);}
.act--primary{
  background:rgba(var(--accent-rgb),.92); border-color:transparent; color:#0a1512;
  box-shadow:0 8px 22px -10px rgba(var(--accent-rgb),.9);
}
.act--primary:hover{background:rgb(var(--accent-rgb));}
.act--danger{color:var(--bad); border-color:rgba(224,104,95,.4);}
.act--ghost{background:transparent; border-color:var(--line-soft); color:var(--ink-2);}
.act--sm{padding:6px 12px; font-size:12.5px;}
.act[disabled],.act:disabled{opacity:.34; cursor:not-allowed; transform:none;}

/* ── 칩: 상태·링크·작은 필터 ──────────────────────────────── */
.chip{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--muted); border:1px solid var(--line-soft); border-radius:var(--r-pill);
  padding:4px 11px; white-space:nowrap; max-width:340px;
  overflow:hidden; text-overflow:ellipsis; text-decoration:none; display:inline-block;
  background:transparent; cursor:default;
}
a.chip,button.chip{cursor:pointer; color:var(--ink-2); transition:color var(--t-fast), border-color var(--t-fast);}
a.chip:hover,button.chip:hover{color:var(--ink); border-color:rgba(var(--accent-rgb),.6);}

/* ── 분절 선택(seg): 분류 방식·필터·재생 속도처럼 "하나를 고르는" 줄 ── */
.seg{
  display:inline-flex; gap:2px; padding:3px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(0,0,0,.24);
}
.seg__btn{
  font-family:var(--ff-body); font-size:12px; color:var(--ink-2); white-space:nowrap;
  background:transparent; border:0; border-radius:var(--r-pill); padding:4px 12px; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast);
}
.seg__btn:hover{color:var(--ink); background:rgba(255,255,255,.06);}
.seg__btn[aria-checked="true"],.seg__btn[aria-pressed="true"],.seg__btn[aria-selected="true"]{
  background:rgba(var(--accent-rgb),.88); color:#0a1512; font-weight:700;
}

/* ── 카드·패널 ────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  background:linear-gradient(180deg, rgba(18,51,44,.45), rgba(6,18,16,.45));
  padding:14px 16px;
}
.panel__h{
  margin:0 0 8px; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
}
.note{
  border:1px solid var(--line); border-left:3px solid var(--brass);
  background:rgba(18,51,44,.45); border-radius:6px;
  padding:11px 14px; margin:0 0 14px; color:var(--ink-2); font-size:13px;
}
.note--bad{border-left-color:var(--bad);}
.note b{color:var(--ink);}

/* ── 입력 ─────────────────────────────────────────────────── */
.fld{display:block; margin:0 0 10px;}
.fld > span{display:block; font-size:12px; color:var(--ink-2); margin-bottom:4px;}
.fld small{color:var(--faint);}
.fld input,.fld select,input.field,select.field{
  width:100%; padding:9px 11px; font-family:var(--ff-body); font-size:14px; color:var(--ink);
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-field); user-select:text;
}
.fld input:focus,input.field:focus{outline:none; border-color:rgba(var(--accent-rgb),.9);}
.fld input:focus-visible,input.field:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.check{display:flex; align-items:center; gap:var(--sp-2); margin-block:var(--sp-3); color:var(--ink-2); cursor:pointer;}
.check input{accent-color:var(--brass-2);}
.status-dot{display:inline-block; width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill); background:var(--warn);}
.err{min-height:18px; font-size:12.5px; color:var(--bad); margin:6px 0 0; overflow-wrap:anywhere;}

/* 범위 슬라이더(기보 재생 위치) */
input[type=range].scrub{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:0;
}
input[type=range].scrub::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:rgba(236,231,215,.14);}
input[type=range].scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:var(--brass-2); border:2px solid #0a1512; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35);
}
input[type=range].scrub::-moz-range-track{height:4px; border-radius:2px; background:rgba(236,231,215,.14);}
input[type=range].scrub::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--brass-2); border:2px solid #0a1512;}

/* ── 대화상자 ─────────────────────────────────────────────── */
.dlg{
  width:min(380px, calc(100vw - 32px)); padding:20px 22px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(180deg, var(--felt), var(--baize));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85); user-select:text;
}
.dlg::backdrop{background:rgba(3,8,7,.66);}
.dlg__h{margin:0 0 4px; font-family:var(--ff-display); font-size:20px;}
.dlg__note{font-size:11.5px; color:var(--muted); margin:6px 0 0; line-height:1.5;}
.dlg__err{min-height:18px; font-size:12.5px; color:var(--bad); margin:6px 0 0;}
.dlg__menu{display:flex; gap:10px; justify-content:flex-end; padding:0; margin:12px 0 0;}
.dlg__menu--col{flex-direction:column; align-items:stretch;}
.dlg .act{padding:9px 16px; font-size:13px;}

/* ── 토스트 ───────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:82px; z-index:80;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  padding:11px 22px; border-radius:10px; max-width:70vw;
  background:rgba(6,18,16,.96); border:1px solid rgba(var(--accent-rgb),.5);
  color:var(--ink); font-size:13px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.95);
  transition:opacity .26s, transform .26s var(--ease-pop);
}
.toast.on{opacity:1; transform:translate(-50%,0);}
.toast[data-kind="bad"],.toast[data-kind="error"]{border-color:rgba(224,104,95,.65);}

/* ── 배경 층(캐비닛 조명) — 콘솔·랜딩이 같은 네 겹을 쓴다 ────── */
.lamp{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -18%, rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.10) 34%, transparent 66%),
    radial-gradient(90% 70% at 50% 118%, rgba(var(--accent-rgb),.11) 0%, transparent 60%),
    linear-gradient(178deg, var(--felt) 0%, var(--baize) 42%, var(--baize-2) 100%);
  transition:background var(--t-slow) var(--ease-settle);
}
.felt{
  position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(38deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%);
}

@media (prefers-reduced-motion:reduce){
  html,html *,html *::before,html *::after{animation-duration:var(--t-reduced) !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:var(--t-reduced) !important; scroll-behavior:auto !important;}
  .grain,.vignette{display:none !important;}
  .lamp{transition:none !important;}
}
html[data-motion="reduced"],html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{
  animation-duration:var(--t-reduced) !important; animation-delay:0s !important; animation-iteration-count:1 !important;
  transition-duration:var(--t-reduced) !important; scroll-behavior:auto !important;
}
html[data-motion="reduced"] .grain,html[data-motion="reduced"] .vignette{display:none !important;}
html[data-motion="reduced"] .lamp{transition:none !important;}