/* ============================================================================
   BASTILLE MANSION — COMPONENT LIBRARY  (mansion-ui.css)
   ----------------------------------------------------------------------------
   claude.ai/design "Bastille Mansion Design System"에서 동기화된 정본.
   ⚠ 이 파일은 손으로 고치지 말 것 — /mansion-design-sync 스킬이 덮어씀.
   Load order:  design-tokens.css → mansion-ui.css
   컴포넌트 전용(전역 reset·body는 제외 — 기존 대시보드와 충돌 방지).
   ============================================================================ */

/* ---- TYPOGRAPHY HELPERS --------------------------------------------------- */
.serif        { font-family: var(--font-serif); }
.emblem       { font-family: var(--font-serif); color: var(--gold); font-weight: var(--fw-bold);
                letter-spacing: var(--tracking-wide); text-transform: uppercase;
                text-shadow: 0 1px 8px rgba(197,160,89,.35); }
.page-title   { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: var(--fw-bold);
                color: var(--text-strong); line-height: var(--lh-tight); }
.section-title{ font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: var(--fw-bold);
                color: var(--gold); line-height: var(--lh-snug); }
.microlabel   { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase;
                letter-spacing: var(--tracking-micro); color: rgba(197,160,89,.6); }
.eyebrow      { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
                letter-spacing: var(--tracking-micro); color: rgba(197,160,89,.6); }
.text-muted   { color: var(--text-muted); }
.text-gold    { color: var(--gold); }
.mono         { font-family: var(--font-mono); }

.rule-serif { display: flex; align-items: center; gap: var(--sp-4); }
.rule-serif::before, .rule-serif::after { content:""; flex:1; height:1px; background: var(--hairline-strong); }
.rule-serif > span { font-family: var(--font-serif); font-size: var(--fs-xs); font-weight: var(--fw-bold);
                     letter-spacing: var(--tracking-micro); text-transform: uppercase; color: rgba(197,160,89,.8); }

/* ---- SURFACES / CARDS ----------------------------------------------------- */
.ds-card {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.ds-card-glossy {
  background: var(--grad-glossy), var(--grad-card);
  border: 1px solid var(--hairline); border-top-color: var(--hairline-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card), var(--shadow-inset);
}
.card-pad { padding: var(--sp-5); }

/* ---- BUTTONS -------------------------------------------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  line-height: 1; padding: 10px 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .12s, opacity .12s;
}
.ds-btn:active { transform: translateY(1px) scale(.99); }
.ds-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 2px 12px rgba(19,91,236,.28); }
.ds-btn--primary:hover { background: var(--primary-600); }
.ds-btn--gold { background: var(--tint-gold-12); color: var(--gold); border-color: var(--hairline-strong); }
.ds-btn--gold:hover { background: var(--tint-gold-20); color: var(--gold-pale); }
.ds-btn--gold-solid { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 12px rgba(197,160,89,.28); }
.ds-btn--ghost { background: transparent; color: var(--text); border-color: var(--white-20); }
.ds-btn--danger { background: var(--danger); color:#fff; }
.ds-btn--sm { padding: 6px 12px; font-size: var(--fs-xs); }
.ds-btn--block { display: flex; width: 100%; }

/* ---- TAGS / STATUS -------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap:6px; padding: 2px 10px; border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); border: 1px solid transparent; }
.tag--gold    { background: var(--tint-gold-12); color: var(--gold); border-color: var(--tint-gold-40); }
.tag--primary { background: rgba(19,91,236,.18); color:#7aa6f5; border-color: rgba(19,91,236,.35); }
.tag--success { background: rgba(16,185,129,.16); color:#34d399; border-color: rgba(16,185,129,.35); }
.tag--warning { background: rgba(232,179,57,.14); color: var(--warning); border-color: rgba(232,179,57,.35); }
.tag--danger  { background: var(--tint-danger-12); color:#fb7185; border-color: rgba(244,63,94,.35); }
.status-dot { width:10px; height:10px; border-radius: var(--r-full); display:inline-block; }
.status-dot--online { background: var(--success); box-shadow: var(--shadow-glow-success); }
.status-dot--busy   { background: var(--danger); box-shadow: 0 0 8px rgba(244,63,94,.55); }
.status-dot--away   { background: var(--warning); box-shadow: 0 0 8px rgba(232,179,57,.5); }
.status-dot--offline{ background:#6b6b6b; }

/* ---- LIST ITEM (좌측 색바 시그니처) --------------------------------------- */
.list-item { display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--hairline-neutral);
  border-left: 3px solid transparent; border-radius: var(--r-sm);
  transition: border-color .12s, background .12s; }
.list-item:hover { background: var(--code); border-left-color: var(--gold); }
.list-item--gold { border-left-color: var(--gold); }
.list-item--primary { border-left-color: var(--primary); }
.list-item--danger  { border-left-color: var(--danger); }
.list-item__body { flex:1; min-width:0; }
.list-item__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item__meta { font-size: var(--fs-2xs); color: var(--text-faint); margin-top:2px; }

/* ---- PROGRESS / GAUGE ----------------------------------------------------- */
.progress { height:6px; width:100%; background: var(--white-10); border-radius: var(--r-full); overflow:hidden; }
.progress > .bar { height:100%; background: var(--primary); border-radius: var(--r-full); transition: width .3s; }
.progress > .bar--gold { background: var(--gold); }
.gauge { --val:66; --ring: var(--gold); --size:88px;
  width: var(--size); height: var(--size); border-radius: var(--r-full); position: relative;
  background: conic-gradient(var(--ring) calc(var(--val)*1%), var(--white-10) 0);
  display: grid; place-content: center; }
.gauge::before { content:""; position:absolute; inset:8px; border-radius: var(--r-full);
  background: var(--panel); box-shadow: var(--shadow-inset); }
.gauge__num { position: relative; font-family: var(--font-serif); font-size: var(--fs-lg);
  font-weight: var(--fw-bold); color: var(--text-strong); }

/* ---- 재질/반사 (절제해서 사용) -------------------------------------------- */
.tex-wood {
  background-color: var(--wood-base);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(0,0,0,.22) 0, transparent 22%, rgba(255,255,255,.03) 52%, transparent 82%, rgba(0,0,0,.22) 100%);
  box-shadow: var(--shadow-inset);
}
.tex-leather {
  background-color: var(--leather-base);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.035) 0, transparent 9%),
    radial-gradient(circle at 78% 64%, rgba(0,0,0,.14) 0, transparent 11%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
  box-shadow: var(--shadow-inset);
}
.bloom-gold { box-shadow: var(--bloom-gold); }
.bloom-blue { box-shadow: var(--bloom-blue); }
.reflect { position: relative; isolation: isolate; overflow: hidden; }
.reflect::before { content:""; position:absolute; inset:-20% -10% auto -10%; height:85%;
  background: var(--sheen-gold); filter: blur(14px); opacity:.9; pointer-events:none; z-index:0; }
.reflect > * { position: relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .pulse,.spinner{ animation:none; } }