/* The DAESIN demo bar: one thin band on top of every demo (portfolio-v3/docs/DEMOS.md).
   Palette from the portfolio: lacquer ink, indigo, hanji, mist, gold as a line only.
   Every rule is scoped to .dsb so the demo underneath keeps its own look. */
.dsb {
  --dsb-ink: #0a1120; --dsb-indigo: #16223f; --dsb-hanji: #eee8da; --dsb-mist: #a3adc2;
  --dsb-gold: #cfae6b; --dsb-gold-line: rgba(207, 174, 107, 0.42); --dsb-nacre: #bcd6e6;
  position: relative; z-index: 1000; box-sizing: border-box; width: 100%;
  background: var(--dsb-ink); color: var(--dsb-hanji); border-bottom: 1px solid var(--dsb-gold-line);
  font: 500 13px/1.45 Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.dsb *, .dsb *::before, .dsb *::after { box-sizing: border-box; }
.dsb-row {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 auto; max-width: 1440px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.dsb-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dsb-id img { width: 24px; height: 24px; flex: none; display: block; }
.dsb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsb-name b { font: 400 13.5px/1 "Iowan Old Style", Georgia, "Times New Roman", serif; letter-spacing: 0.16em; margin-right: 0.3em; color: var(--dsb-hanji); }
.dsb-name span { color: var(--dsb-mist); }
/* what this demo is, with the portfolio's own marks (portfolio-v3 main.css .mk): a filled gold dot for a working
   build, an open gold ring for a simulation; the words beside it, no pill */
.dsb-label {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 2px; border: 0; border-radius: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--dsb-hanji);
}
.dsb-label[data-type] { color: var(--dsb-hanji); }
.dsb-label::before { content: ""; flex: none; width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%; }
.dsb-label[data-type="live"]::before { background: var(--dsb-gold); }
.dsb-label[data-type="simulation"]::before { border: 1px solid var(--dsb-gold); }
.dsb-sp { flex: 1 1 0; min-width: 0; }
.dsb-info { flex: none; }
/* the note opens from the plain word 안내 (About) on a gold underline, like 확인 below it; no (i) icon */
.dsb-info > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 6px; cursor: pointer;
  list-style: none; color: var(--dsb-mist); white-space: nowrap; border-radius: 0;
}
.dsb-info > summary::-webkit-details-marker { display: none; }
.dsb-word { text-decoration: underline 1px var(--dsb-gold-line); text-underline-offset: 5px; }
.dsb-info > summary:hover, .dsb-info[open] > summary { color: var(--dsb-hanji); }
.dsb-info > summary:hover .dsb-word { text-decoration-color: var(--dsb-gold); }
.dsb-back svg { width: 16px; height: 16px; flex: none; }
/* the note opens under the bar and the demo moves down to make room for it (demo-bar.js), so it never covers the
   demo's own header; no shadow. (Some properties are reset on purpose: the hangwa demo carries a copy of this file
   in its Next bundle, made by build_hangwa.py; if that copy is older than this file, demo-bar.js adds this one after
   it and these rules win. Rebuild the hangwa demo after changing this file.) */
.dsb-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1; box-shadow: none;
  background: var(--dsb-indigo); color: var(--dsb-hanji); border-bottom: 1px solid var(--dsb-gold-line);
}
.dsb-panel-in { max-width: 760px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); }
.dsb-panel h2 { margin: 0 0 8px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--dsb-gold); letter-spacing: 0; }
.dsb-panel p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; font-weight: 400; color: var(--dsb-hanji); }
/* the visitor's language first and full size; the other one after it, smaller (demo-bar.js orders them) */
.dsb-panel p:first-of-type { color: var(--dsb-hanji); font-size: 14px; }
.dsb-panel p + p[lang] { color: var(--dsb-mist); font-size: 13.5px; }
.dsb-close {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin-top: 2px;
  border: 0; border-radius: 0; background: none; color: var(--dsb-hanji);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline 1px var(--dsb-gold-line); text-underline-offset: 5px;
}
.dsb-close:hover { text-decoration-color: var(--dsb-gold); }
.dsb-back {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 6px;
  color: var(--dsb-hanji); text-decoration: none; white-space: nowrap; border-radius: 6px;
}
.dsb-back:hover { color: var(--dsb-gold); }
.dsb a:focus-visible, .dsb summary:focus-visible, .dsb button:focus-visible { outline: 2px solid var(--dsb-gold); outline-offset: 2px; }
.dsb .dsb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dsb-short { display: none; }
@media (max-width: 559px) {
  .dsb-long { display: none; }
  .dsb-short { display: inline; }
}
@media (max-width: 429px) {
  .dsb-row { gap: 6px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .dsb-name b { letter-spacing: 0.1em; margin-right: 0.25em; }
  .dsb-label { padding: 0 2px; }
  .dsb-info > summary { min-width: 44px; justify-content: center; padding: 0 4px; }
  .dsb-back { padding: 0 2px 0 4px; gap: 4px; }
}
@media (max-width: 369px) {
  .dsb-name { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .dsb-info[open] .dsb-panel { animation: dsb-in 0.28s cubic-bezier(0.23, 1, 0.32, 1); }
  @keyframes dsb-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media print { .dsb { display: none; } }