/* 시작 화면 (백스테이지) */
:root {
  --bs-top: #0f2140;
  --bs-top2: #17345f;
  --bs-nav: #f0f3f8;
  --bs-nav-on: #ffffff;
  --bs-hero1: #0f2140;
  --bs-hero2: #1d4ed8;
  --bs-live-bg: #f8fafc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bs-top: #0b1424; --bs-top2: #12243f; --bs-nav: #121a26; --bs-nav-on: #1b2433; --bs-hero1: #0b1424; --bs-hero2: #1e3a8a; --bs-live-bg: #111823; }
}
:root[data-theme="dark"] { --bs-top: #0b1424; --bs-top2: #12243f; --bs-nav: #121a26; --bs-nav-on: #1b2433; --bs-hero1: #0b1424; --bs-hero2: #1e3a8a; --bs-live-bg: #111823; }

.bs { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.bs-top { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px 0 16px; background: linear-gradient(90deg, var(--bs-top), var(--bs-top2)); color: #fff; flex: none; }
.bs-brand { display: flex; align-items: center; gap: 12px; }
.bs-brand .logo { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
.bs-brand b { display: block; font-size: 16px; letter-spacing: -.01em; }
.bs-brand small { display: block; font-size: 11.5px; color: rgba(255,255,255,.65); }
.bs-topbtn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.8); }
.bs-topbtn:hover { background: rgba(255,255,255,.12); color: #fff; }

.bs-body { flex: 1; min-height: 0; display: flex; }
.bs-nav { width: 220px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--bs-nav); border-right: 1px solid var(--line); }
.bs-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 4px; }
.bs-action, .bs-tab { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 14px; color: var(--text); }
.bs-action.primary { background: var(--accent); color: #fff; font-weight: 600; margin-bottom: 4px; }
.bs-action.primary:hover { filter: brightness(1.08); }
.bs-action:not(.primary):hover, .bs-tab:hover { background: var(--bs-nav-on); }
.bs-tab { color: var(--muted); }
.bs-tab.on { background: var(--bs-nav-on); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.bs-navfoot { font-size: 12px; color: var(--muted); padding: 8px 12px; }
.bs-navfoot a { color: var(--accent); text-decoration: none; }

.bs-main { flex: 1; min-width: 0; overflow: auto; }
.bs-pane { max-width: 1240px; margin: 0 auto; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
.bs-h1 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.02em; }
.bs-lead { margin: -8px 0 0; }

/* 배너 */
.bs-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; min-height: 300px; border-radius: 16px; overflow: hidden; background: linear-gradient(120deg, var(--bs-hero1), var(--bs-hero2)); box-shadow: var(--shadow); }
.bs-hero-text { padding: 30px 30px 28px; color: #fff; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bs-kicker { font: 600 10.5px var(--mono); letter-spacing: .08em; color: #93c5fd; }
.bs-hero h1 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
.bs-hero p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.65; font-size: 14px; max-width: 520px; }
.bs-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bs-hero-btns .btn:not(.primary) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.bs-hero-btns .btn:not(.primary):hover { background: rgba(255,255,255,.18); }
.bs-hero-btns .btn.primary { background: #fff; color: #0f2140; border-color: #fff; }
.bs-live { margin: 16px 16px 16px 0; border-radius: 12px; background: var(--bs-live-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bs-live svg { width: 100%; height: 100%; max-height: 300px; }
.bs-live-tag { position: absolute; right: 26px; bottom: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--panel); color: var(--muted); font-size: 11.5px; box-shadow: var(--shadow); }
.bs-live-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: blink 1.6s infinite; }

/* 카드 */
.bs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px; box-shadow: var(--shadow); min-width: 0; }
.bs-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bs-card-h h2 { margin: 0; font-size: 15px; }
.bs-card-h .muted { font-size: 12px; }
.bs-grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }

/* 기술 모듈 */
.bs-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bs-mod { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); text-align: left; transition: border-color .12s, transform .12s, background .12s; }
.bs-mod:hover { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 6%, var(--panel)); transform: translateY(-1px); }
.bs-mod-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; flex: none; color: var(--mc); background: color-mix(in srgb, var(--mc) 13%, transparent); }
.mod-ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bs-mod-txt { display: flex; flex-direction: column; min-width: 0; }
.bs-mod-txt b { font-size: 13px; line-height: 1.3; }
.bs-mod-txt small { font-size: 11.5px; color: var(--muted); }

/* 최근 프로젝트 */
.bs-table { display: flex; flex-direction: column; }
.bs-tr { display: grid; grid-template-columns: minmax(0, 1fr) 54px 70px 30px; gap: 8px; align-items: center; padding: 2px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.bs-tr:last-child { border-bottom: 0; }
.bs-tr.th { font-size: 11.5px; color: var(--muted); font-weight: 600; padding-bottom: 6px; }
.bs-open { display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; border: 0; background: none; text-align: left; border-radius: 6px; padding: 0 4px; }
.bs-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bs-open:hover { background: var(--panel2); color: var(--accent); }
.bs-open .ic { color: var(--muted); }
.bs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 160px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--text); text-align: center; }
.bs-empty .ic { width: 28px; height: 28px; color: var(--muted); margin-bottom: 4px; }
.bs-empty p { margin: 0; font-size: 13px; }
.bs-table.apps .bs-tr { grid-template-columns: 220px 160px minmax(0, 1fr); padding: 8px 4px; }
.bs-appname { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bs-mini { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--mc); background: color-mix(in srgb, var(--mc) 13%, transparent); }

/* 예제 */
.bs-exgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bs-exgrid.big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bs-ex { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; text-align: left; transition: border-color .12s, transform .12s, box-shadow .12s; }
.bs-ex:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.bs-thumb { height: 150px; background: var(--canvas) radial-gradient(var(--grid-dot) .8px, transparent .8px) 0 0 / 10px 10px; border-bottom: 1px solid var(--line); padding: 6px; }
.bs-exgrid.big .bs-thumb { height: 200px; }
.bs-thumb svg { width: 100%; height: 100%; }
.bs-ex-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.bs-ex-body h3 { margin: 4px 0 0; font-size: 14px; }
.bs-ex-body p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bs-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { height: 30px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line2); background: var(--panel); font-size: 13px; }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 썸네일 · 배너 회로는 정지 상태 기호만 (선 굵기 보정) */
.fe-svg.thumb .w-line { stroke-width: 2.4; }
.fe-svg.thumb .port, .fe-svg.live .port { display: none; }
.fe-svg.live .w-line { stroke-width: 2.6; }
.fe-svg.live .w-flow { display: inline; }

/* 학습 */
.bs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bs-steps li { display: flex; gap: 12px; }
.bs-step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.bs-steps b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.bs-steps b .ic { width: 16px; height: 16px; color: var(--accent); }
.bs-steps p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.bs-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bs-linkcard { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.bs-linkcard:hover { border-color: var(--accent); color: var(--accent); }
.bs-linkcard .ic { width: 15px; height: 15px; color: var(--muted); }
.bs-card .keys { margin-bottom: 12px; font-size: 13px; }

@media (max-width: 1100px) {
  .bs-exgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .bs-hero { grid-template-columns: 1fr; }
  .bs-live { margin: 0 16px 16px; height: 220px; }
  .bs-nav { width: 64px; padding: 10px 6px; }
  .bs-nav span, .bs-navfoot, .bs-nav hr { display: none; }
  .bs-action, .bs-tab { justify-content: center; padding: 0; }
  .bs-pane { padding: 16px; }
  .bs-table.apps .bs-tr { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bs-exgrid { grid-template-columns: 1fr; }
  .bs-hero h1 { font-size: 24px; }
  .bs-top small { display: none; }
}