/* 운영 데스크 테마: 어두운 프레임 + 흰 본문 + 파스텔 카드. index.html 안의 기본 스타일 위에 덮어쓴다 */
:root {
  --bg: #fff; --panel: #fff; --panel2: #f2f4f7; --line: #eceef2; --line2: #dde1e8;
  --ink: #111214; --sub: #6d7480; --dim: #a3a9b4;
  --accent: #bfdcff; --accent-ink: #0d1422; --ok: #1f9d61; --warn: #b7791f; --bad: #d64545;
  --frame: #1c1c1e; --page: #e1ecfa;
  --blue: #dcebfb; --lavender: #e4def3; --mint: #d6ecda; --cream: #f8eecb; --rose: #f9dede;
}
html, body { background: var(--page); }
body { color: var(--ink); letter-spacing: -.01em; }
::-webkit-scrollbar-thumb { background: #d4d9e1; border-color: #fff; }

/* 프레임과 왼쪽 아이콘 바 */
.app { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: none; height: calc(100vh - 32px); margin: 16px; padding: 10px; background: var(--frame); border-radius: 38px; box-shadow: 0 30px 60px rgba(30, 50, 90, .18); }
.rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
.rail-logo { width: 48px; height: 48px; border-radius: 16px; margin-bottom: 26px; background:#f6eecb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23111214' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M11 15.5v17l13-8.5z'/%3E%3Cpath d='M24.5 15.5v17l13-8.5z'/%3E%3C/g%3E%3C/svg%3E") center/100% no-repeat; }
.rail-item { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: rgba(255,255,255,.55); }
.rail-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.rail-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.rail-item.active { color: #fff; }
.rail-item.active::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #fff; }
.surface { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--bg); border-radius: 30px; overflow: hidden; }

/* 머리말과 현황 카드 */
header { flex-wrap: wrap; gap: 14px 16px; padding: 26px 34px 6px; border-bottom: 0; background: none; }
.title h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.title span { display: block; margin-top: 4px; font-size: 12px; color: var(--sub); letter-spacing: .04em; }
.chips { margin-left: auto; }
.chip { border: 0; background: var(--panel2); color: var(--sub); font-size: 13px; padding: 9px 16px; font-weight: 600; }
.chip.on { color: var(--ok); background: #e3f4ea; }
.chip.off { color: var(--bad); background: #fbe6e6; }
.chip.test { color: var(--warn); background: #fbf0d8; }
.studio-link { background: var(--ink); color: #fff; border-radius: 99px; padding: 11px 20px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.studio-link:hover { background: #2b2d31; }
.stats { width: 100%; margin: 8px 0 0; gap: 14px; }
.stat { flex: 1; min-width: 0; text-align: left; min-height: 96px; padding: 16px 20px; border: 0; border-radius: 22px; display: flex; flex-direction: column-reverse; justify-content: space-between; background: var(--panel2); transition: transform .15s, box-shadow .15s; }
.stat:nth-child(1) { background: var(--blue); } .stat:nth-child(2) { background: var(--lavender); } .stat:nth-child(3) { background: var(--mint); }
.stat:nth-child(4) { background: var(--rose); } .stat:nth-child(5) { background: var(--cream); }
.stat:hover { transform: translateY(-2px); }
.stat.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.stat b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink) !important; }
.stat span { font-size: 13px; font-weight: 600; color: rgba(17,18,20,.62); }

/* 본문 */
main { grid-template-columns: minmax(0, 1fr) 392px; gap: 0; }
.library { border-right: 0; }
.library-heading { padding: 22px 34px 0; display: flex; }
.library-heading h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.library-heading p { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.desk-notice { margin: 12px 34px 0; color: var(--warn); font-size: 13px; }
.toolbar { padding: 18px 34px 14px; gap: 10px; }
button { border: 0; background: var(--panel2); border-radius: 99px; padding: 10px 18px; font-weight: 600; font-size: 13px; }
button:hover:not(:disabled) { background: #e7eaef; border-color: transparent; }
.search input { min-height: 44px; border: 0; background: var(--panel2); border-radius: 99px; padding-left: 42px; font-size: 14px; }
.search input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.search::before { left: 18px; border-color: var(--dim); }
.seg { border: 0; background: var(--panel2); border-radius: 99px; padding: 4px; }
.seg button { border-radius: 99px; padding: 7px 16px; background: none; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(20,30,50,.12); }
.menu > div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 18px 40px rgba(20,30,50,.16); }
.menu > div button { border-radius: 12px; background: none; font-weight: 500; }
.menu > div button:hover { background: var(--panel2); }
.scroll { padding: 4px 34px 30px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.card { padding: 12px 12px 14px; border: 0; border-radius: 22px; background: var(--panel2); text-align: left; white-space: normal; color: var(--ink); font-weight: 400; }
.card:hover { background: #e9edf2 !important; transform: translateY(-2px); }
.card.sel { background: #fff !important; box-shadow: 0 0 0 2px var(--ink), 0 14px 28px rgba(20,30,50,.12); }
.card .pic { border-radius: 18px; background: #e3e7ed; }
.card b { font-size: 14px; font-weight: 700; margin-top: 12px; }
.source-label { font-size: 10px; color: var(--sub); }
.st { margin-top: 4px; font-weight: 500; }
.st::before { background: var(--dim); }
.st.ready::before { background: #4b8fe6; }
th { background: #fff; }
tbody tr:hover { background: var(--panel2); }
tbody tr.sel { background: var(--blue); }
.thumb { background: #e3e7ed; }
.empty { line-height: 1.9; }
.empty b { font-size: 18px; }

/* 오른쪽: 연결(하늘색 카드) → 전송(어두운 카드) → 기록 */
aside { background: none; padding: 22px 34px 30px 0; gap: 16px; }
.sec { padding: 22px; border: 0; border-radius: 26px; background: var(--panel2); }
.sec h2 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.sec h2 em { width: 24px; height: 24px; background: rgba(17,18,20,.1); color: var(--ink); font-size: 12px; font-weight: 700; }
.sec.now h2 em { background: var(--ink); color: #fff; }
.sec.done h2 em { background: var(--ok); color: #fff; }
.sec h2 span { color: var(--sub); font-weight: 500; font-size: 12px; }
#sec1 { background: var(--blue); }
#sec1 .linkbox { border: 0; background: rgba(255,255,255,.72); border-radius: 18px; padding: 14px 16px; }
#sec1 .linkbox.on { background: #fff; box-shadow: inset 0 0 0 2px var(--ok); }
#sec1 .linkbox.wait { background: #fff; box-shadow: inset 0 0 0 2px #e0a93b; }
.linkbox small { display: block; margin-top: 3px; }
.badge { border: 0; background: rgba(255,255,255,.72); border-radius: 16px; padding: 8px 8px 8px 14px; }
.badge button, .row button { min-height: 40px; background: var(--ink); color: #fff; }
.badge button:hover:not(:disabled), .row button:hover:not(:disabled) { background: #2b2d31; }
.bars i { background: rgba(17,18,20,.15); }
button.ghost, .row button.ghost { background: none; color: var(--sub); }
button.ghost:hover:not(:disabled), .row button.ghost:hover:not(:disabled) { background: rgba(17,18,20,.06); color: var(--ink); }
#btnTest { font-size: 12px; }
.hint { color: rgba(17,18,20,.6); }

#sec2 { --ink: #fff; --sub: #a9afbb; --dim: #7c828d; --line: #38383c; --panel2: #2c2c30; background: var(--frame); color: #fff; box-shadow: 0 12px 0 -6px #d9dee6; margin-bottom: 6px; }
#sec2 h2 em { background: rgba(255,255,255,.14); color: #fff; }
#sec2.now h2 em { background: var(--accent); color: var(--accent-ink); }
.shell { background: linear-gradient(145deg, #3a3a40, #151517); box-shadow: 0 18px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.screen video { width: 100%; height: 100%; object-fit: contain; display: block; }
.who h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
button.primary, .sec button.primary { min-height: 54px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 800; }
button.primary:hover:not(:disabled) { background: #d6e9ff; border-color: transparent; }
button.primary:disabled { background: #2c2c30; color: #7c828d; }
#sec2 button.ghost:hover:not(:disabled) { background: rgba(255,255,255,.08); color: #fff; }
.progress { background: #38383c; }
.msg { line-height: 1.6; }
.msg.ok { color: #6fe0a6; } .msg.bad { color: #ff9a9a; }
.motion-export { padding: 14px; margin: 12px 0; border: 0; border-radius: 18px; background: #2c2c30; text-align: center; }
.motion-export a { display: block; padding: 10px; background: rgba(255,255,255,.1); color: #fff; border-radius: 99px; font-weight: 700; font-size: 13px; text-decoration: none; }
.motion-export a:hover { background: rgba(255,255,255,.16); }
.motion-export p { font-size: 12px; line-height: 1.6; margin: 10px 0 0; color: #a9afbb; }
aside .sec:last-child { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.log time { color: var(--dim); }

.drop { background: rgba(191,220,255,.5); border-color: #4b8fe6; color: #1c4f96; }
.toast { z-index: 40; background: var(--frame); border: 0; color: #fff; border-radius: 99px; padding: 13px 22px; box-shadow: 0 14px 30px rgba(20,30,50,.3); }
button:focus-visible, a:focus-visible, input:focus-visible, tr:focus-visible { outline: 3px solid #4b8fe6; outline-offset: 3px; }
#empty[hidden] { display: none; }

@media (max-width: 1100px) { main { grid-template-columns: minmax(0, 1fr) 340px; } .stat { min-height: 84px; padding: 14px 16px; } .stat b { font-size: 26px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; margin: 8px; padding: 8px; border-radius: 28px; }
  .rail { flex-direction: row; padding: 4px 8px 10px; }
  .rail-logo { margin: 0 10px 0 0; width: 40px; height: 40px;  }
  .rail-item { width: 40px; height: 40px; }
  .rail-item.active::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .surface { border-radius: 22px; }
  header { padding: 20px 16px 4px; }
  .title h1 { font-size: 24px; }
  .chips { margin-left: 0; }
  .stats { overflow-x: auto; gap: 8px; }
  .stat { min-width: 96px; min-height: 76px; padding: 12px 14px; border-radius: 18px; }
  .stat b { font-size: 22px; }
  main { grid-template-columns: minmax(0, 1fr); }
  /* 좁은 화면에서는 뱃지 연결·전송 영역을 참가자 목록보다 위에 둔다 (전송 화면이 먼저 보이게). 기록은 목록 아래로 */
  aside { order: -1; padding: 16px; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  aside .sec:last-child { display: none; }
  .library-heading, .toolbar, .scroll, .desk-notice { padding-left: 16px; padding-right: 16px; }
  .desk-notice { margin-left: 0; margin-right: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 보낼 뱃지 표시 + 보낼 내용 체크 목록 */
.bid { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #1a73e8; }
.target { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: #2c2c30; box-shadow: inset 0 0 0 2px #5b3a3a; color: #fff; }
.target.on { box-shadow: inset 0 0 0 2px #6fe0a6; background: #1f2a25; }
.target > div { flex: 1; min-width: 0; }
.target small { display: block; font-size: 11px; color: #a9afbb; }
.target b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.target .pulse { width: 10px; height: 10px; border-radius: 50%; background: #ff8a8a; flex: none; }
.target.on .pulse { background: #6fe0a6; box-shadow: 0 0 0 4px rgba(111,224,166,.18); }
.items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 14px 0 12px; }
.item { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border-radius: 16px; background: #2c2c30; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; }
.item:has(input:checked) { background: #24303f; box-shadow: inset 0 0 0 1.5px #8ab4f8; }
.item.off { opacity: .45; cursor: default; }
.item.intro { cursor: default; background: #1a1a1e; } .item.intro .ithumb { cursor: default; }
.item input { width: 20px; height: 20px; accent-color: #8ab4f8; flex: none; }
.item .ithumb { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #111; flex: none; cursor: zoom-in; }
.item.view .ithumb { outline: 2px solid #fff; outline-offset: 2px; }
.item .itext { flex: 1; min-width: 0; text-align: left; }
.item .itext b { display: block; font-size: 14px; font-weight: 800; }
.item .itext small { display: block; font-size: 11.5px; color: #a9afbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .mini { min-height: 30px; padding: 0 12px; font-size: 12px; border-radius: 99px; }
.bundle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: #2c2c30; color: #d7dbe2; font-size: 12px; }
.bundle em { font-style: normal; color: #f4c542; margin-left: 4px; }
.bundle select { min-height: 32px; border-radius: 10px; border: 0; padding: 0 8px; background: #1b1b1e; color: #fff; font: inherit; }
#btnSend small { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-top: 2px; }
a.linkish { display: inline-flex; align-items: center; text-decoration: none; color: inherit; font: inherit; font-size: 13px; font-weight: 700; padding: 0 10px; opacity: .85; }
.bundle span { white-space: nowrap; }

/* 좁지만 두 칸은 들어가는 폭에서는 ① 연결과 ② 전송을 나란히 두어 목록이 너무 아래로 밀리지 않게 한다 */
@media (min-width: 680px) and (max-width: 900px) { aside { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; } }
@media (max-width: 900px) { aside > * { min-width: 0; max-width: 100%; } main { min-width: 0; } .target { flex-wrap: wrap; } }
@media (max-width: 900px) { .surface, .library { min-width: 0; } .toolbar { flex-wrap: wrap; } }

/* 큰 화면에서도 같은 구성: 뱃지 연결·전송 영역이 위, 참가자 목록이 아래. 스크롤은 본문 전체가 함께 움직인다 */
@media (min-width: 901px) {
  /* 2026-10-26 사용자: 위 영역 고정이 불편 — 본문 전체가 함께 스크롤(위 연결 · 전송 영역도 같이 올라간다) */
  main { display: flex; flex-direction: column; overflow: auto; }
  main > aside { flex: none; }
  aside { order: -1; overflow: visible; min-height: auto; padding: 22px 34px 6px; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
  aside > * { min-width: 0; }
  aside .sec:last-child { display: none; }
  .library { flex: none; }
  .scroll { overflow: visible; flex: none; }
  /* 전송 칸은 위에 고정되므로 낮게 만든다: 미리보기 | 보낼 내용 | 보내기 세 칸. 연결된 뱃지는 바로 옆 ① 칸과 보내기 버튼에 보이므로 "보낼 뱃지" 띠는 뺀다 */
  aside { padding-top: 14px; }
  aside .sec { padding: 16px 18px; }
  aside .sec h2 { margin-bottom: 10px; }
  #detail { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(220px, 300px); column-gap: 22px; align-items: start; }
  #detail > * { grid-column: 3; min-width: 0; }
  #detail > .target { display: none; }
  #detail > .device { grid-column: 1; grid-row: 1 / span 2; padding: 0 0 8px; }
  #detail .shell { width: 132px; height: 132px; padding: 8px; }
  #detail > .who { grid-column: 1; grid-row: 3 / span 3; text-align: center; margin: 0; }
  #detail > .who h3 { font-size: 15px; }
  #detail > .who p { font-size: 11.5px; }
  #detail > .items { grid-column: 2; grid-row: 1 / span 5; margin: 0; gap: 6px; }
  #detail .item { padding: 6px 10px 6px 8px; border-radius: 14px; }
  #detail .item .ithumb { width: 38px; height: 38px; }
  #detail > .bundle { margin: 0 0 8px; padding: 6px 10px; }
  #detail > #btnSend, #detail > button.primary { min-height: 48px; }
  #detail > .msg { font-size: 12px; min-height: 0; }
  #detail > .row { justify-content: flex-start !important; flex-wrap: wrap; gap: 2px 4px; }
  #detail > .row .ghost { min-height: 28px; padding: 0 8px; font-size: 12px; }
  /* 참가자를 고르기 전 */
  #detail > .device:first-child { grid-row: 1; }
  #detail > .device:first-child + button { grid-column: 2 / -1; align-self: center; }
}

/* 상태별 숫자 카드는 쓰지 않는다 */
#stats { display: none !important; }

/* 슬라이드 장별 노출 시간 */
.item .secs { min-height: 30px; border-radius: 10px; border: 0; padding: 0 6px; background: #1b1b1e; color: #fff; font: inherit; font-size: 12px; flex: none; }
.bundle span:last-child { color: #a9afbb; }

/* 카드형 조절(레벨 · 참여 현황 · 끄기)은 캐릭터 줄 아래에 한 줄로 */
.item { flex-wrap: wrap; }
.item .cardctl { flex-basis: 100%; display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 2px; }

/* 위쪽 고정 영역을 낮게: 목록이 항상 보이도록 (2026-10-07) */
@media (min-width: 901px) {
  header { padding: 14px 28px 0; }
  .title h1 { font-size: 22px; }
  .title p { display: none; }
  aside { padding: 10px 28px 2px; gap: 12px; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
  aside .sec { padding: 12px 14px; border-radius: 20px; }
  aside .sec h2 { font-size: 14px; margin-bottom: 8px; }
  #sec1 .linkbox { padding: 9px 12px; border-radius: 14px; }
  #sec1 .hint { font-size: 12px; margin: 6px 0; }
  .badge { padding: 4px 6px 4px 10px; border-radius: 12px; }
  .badge button, #sec1 .row button { min-height: 32px; font-size: 12.5px; }
  .library-heading { padding: 10px 28px 0; }
  .library-heading h2 { font-size: 17px; }
  .library-heading p { display: none; }
  .toolbar { padding-top: 8px; padding-bottom: 8px; }

  /* 전송 칸: 맨 위에 참가자 이름 한 줄, 그 아래 보낼 내용(왼쪽)과 보내기(오른쪽). 큰 미리보기는 넓은 화면에서만 */
  #detail { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); column-gap: 14px; row-gap: 0; }
  #detail > * { grid-column: 2; }
  #detail > .device { display: none; }
  #detail > .who { grid-column: 1 / -1; grid-row: 1; text-align: left; display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
  #detail > .who h3 { font-size: 15px; }
  #detail > .items { grid-column: 1; grid-row: 2 / span 6; gap: 5px; }
  #detail .item { padding: 5px 8px; gap: 8px; border-radius: 12px; }
  #detail .item .ithumb { width: 34px; height: 34px; }
  #detail .item .itext b { font-size: 13px; white-space: nowrap; }
  #detail .item .itext small { font-size: 11px; }
  #detail .item input { width: 18px; height: 18px; }
  #detail .item .mini, #detail .item .secs { min-height: 26px; padding: 0 8px; font-size: 11.5px; }
  #detail .item .cardctl { padding-top: 0; }
  #detail > .bundle { padding: 5px 10px; margin-bottom: 6px; font-size: 11.5px; flex-wrap: wrap; gap: 2px 10px; }
  #detail > #btnSend, #detail > button.primary { min-height: 42px; }
  #detail > .progress { margin: 6px 0 4px; }
  #detail > .row .ghost { min-height: 24px; padding: 0 6px; font-size: 11.5px; }
  /* 참가자를 고르기 전에는 안내 한 줄만 */
  #detail > .device:first-child + button { grid-column: 1 / -1; grid-row: 1; min-height: 42px; }
}
/* 넓은 화면에서는 미리보기를 왼쪽에 다시 보여 준다 */
@media (min-width: 1280px) {
  aside { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  #detail { grid-template-columns: 124px minmax(0, 1fr) minmax(220px, 280px); }
  #detail > * { grid-column: 3; }
  #detail > .device { display: grid; grid-column: 1; grid-row: 1 / span 4; padding: 0; align-self: start; }
  #detail .shell { width: 116px; height: 116px; padding: 7px; }
  #detail > .who { grid-column: 1; grid-row: 5 / span 3; display: block; text-align: center; margin: 6px 0 0; }
  #detail > .items { grid-column: 2; grid-row: 1 / span 7; }
  #detail > .device:first-child { grid-row: 1; }
  #detail > .device:first-child + button { grid-column: 2 / -1; grid-row: 1; align-self: center; }
}
.item .itext { overflow: hidden; }
.item .itext b { overflow: hidden; text-overflow: ellipsis; }

.bundle .fast { display: flex; align-items: center; gap: 5px; flex-basis: 100%; color: #d7dbe2; cursor: pointer; }
.bundle .fast input { width: 15px; height: 15px; accent-color: #8ab4f8; }

/* 퀘스트: 참가자 페이지 주소 줄, 레벨업 표시 */
.nfc { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 11.5px; color: #a9afbb; min-width: 0; }
.nfc span { font-weight: 800; color: #8ab4f8; flex: none; }
.nfc code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: #d7dbe2; }
.nfc .mini { min-height: 24px; padding: 0 8px; font-size: 11px; border-radius: 99px; flex: none; }
.levelup { color: #b26a00; font-weight: 700; font-size: 11.5px; }


/* ══ 디자인 정리 (2026-10-12): 운영 화면(/ops)과 같은 기준 ══
   밝은 바탕 + 흰 카드 + 얇은 선. 색은 뜻이 있을 때만 쓴다(파랑 = 누를 것 · 고른 것, 초록 · 노랑 · 빨강 = 상태).
   위의 배치 규칙은 그대로 두고 색 · 선 · 모서리 · 글자만 바꾼다 */
:root { --bg: #fff; --panel: #fff; --panel2: #f1f3f5; --line: #e5e7eb; --line2: #e5e7eb; --ink: #16181d; --sub: #6b7280; --dim: #9aa1ad;
  --accent: #1a73e8; --accent-ink: #fff; --ok: #188038; --warn: #b06000; --bad: #c5221f; --frame: #fff; --page: #f5f6f8; --blue: #e8f0fe; }
html, body { background: var(--page); }

.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100vh; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.rail { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 20px 12px 16px; background: #fff; border-right: 1px solid var(--line); overflow: auto; }
.rail-logo { width: auto; height: auto; margin: 0; padding: 0 10px 18px; border-radius: 0; background: none; display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.rail-logo small { display: block; font-size: 12px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.rail-label { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.rail-item { position: static; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 8px; color: #3c4250; font-size: 14px; font-weight: 500; text-decoration: none; }
.rail-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.rail-item:hover { color: #3c4250; background: #f1f3f5; }
.rail-item.active { background: #e8f0fe; color: #1a73e8; font-weight: 700; }
.rail-item.active::before { content: none; }
.rail-gap { flex: 1; min-height: 12px; }
@media (max-width: 1000px) {
  .app { grid-template-columns: 60px minmax(0, 1fr); }
  .rail { padding: 16px 8px; align-items: center; }
  .rail-logo, .rail-label { display: none; }
  .rail-item { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .rail-item svg { width: 20px; height: 20px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; margin: 0; padding: 0; border-radius: 0; }
  .rail { flex-direction: row; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-gap { display: none; }
  .rail-item.active::before { content: none; }
  .surface { border-radius: 0; }
}

.surface { background: var(--page); border-radius: 0; }
header { padding: 22px 32px 6px; }
.title h1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.title span { font-size: 13px; letter-spacing: 0; }
.chip, .chip.on, .chip.off, .chip.test { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; }
.chip::before { width: 7px; height: 7px; background: var(--dim); }
.chip.on::before { background: var(--ok); } .chip.off::before { background: var(--bad); } .chip.test::before { background: var(--warn); }
.studio-link { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font-weight: 600; }
.studio-link:hover { background: var(--panel2); }

button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: 13px; }
button:hover:not(:disabled) { background: var(--panel2); border-color: var(--line); }
button.ghost, .row button.ghost { border-color: transparent; background: none; color: var(--sub); font-weight: 500; }
button.ghost:hover:not(:disabled), .row button.ghost:hover:not(:disabled), #sec2 button.ghost:hover:not(:disabled) { background: var(--panel2); color: var(--ink); }
button.primary, .sec button.primary { border-radius: 8px; background: var(--accent); border-color: var(--accent); color: #fff; font-size: 15px; font-weight: 700; }
button.primary:hover:not(:disabled) { background: #1765cc; border-color: #1765cc; }
button.primary:disabled { background: var(--panel2); border-color: var(--line); color: var(--sub); }
button:focus-visible, a:focus-visible, input:focus-visible, tr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.library-heading h2 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.search input { min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 8px; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #e8f0fe; }
.seg { border-radius: 8px; padding: 3px; background: var(--panel2); }
.seg button { border: 0; border-radius: 6px; padding: 5px 14px; font-weight: 500; }
.seg button.on { box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
.menu > div { border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 50, .12); }
.menu > div button { border: 0; border-radius: 6px; }
.card { background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.card:hover { background: #fff !important; transform: none; box-shadow: inset 0 0 0 1px #c9ced6; }
.card.sel { background: #fff !important; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px #e8f0fe; }
.card .pic { border-radius: 8px; background: var(--panel2); }
.card b { font-weight: 600; }
th { background: var(--page); }
tbody tr:hover { background: #fff; }
tbody tr.sel { background: #e8f0fe; }
.thumb { background: var(--panel2); border-radius: 8px; }
.st.ready::before { background: var(--accent); }
.empty b { font-size: 16px; font-weight: 700; }

/* 위쪽 연결 · 전송 영역: 두 칸 모두 흰 카드 */
.sec, aside .sec { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sec h2 { font-size: 15px; font-weight: 700; }
.sec h2 em { width: 22px; height: 22px; background: var(--panel2); color: var(--sub); font-size: 12px; font-weight: 600; }
.sec.now h2 em, #sec2.now h2 em { background: var(--accent); color: #fff; }
.sec.done h2 em { background: var(--ok); color: #fff; }
#sec1 { background: #fff; }
#sec1 .linkbox { background: var(--panel2); border-radius: 8px; }
#sec1 .linkbox.on { background: #e6f4ea; box-shadow: inset 0 0 0 1px #a8dab5; }
#sec1 .linkbox.wait { background: #fef7e0; box-shadow: inset 0 0 0 1px #f3d58a; }
.badge { background: var(--panel2); border-radius: 8px; }
.badge button, .row button { background: #fff; color: var(--ink); }
.badge button:hover:not(:disabled), .row button:hover:not(:disabled) { background: var(--panel2); }
.bars i { background: #d5d9e0; } .bars i.on { background: var(--ok); }
.hint { color: var(--sub); }
#sec2 { --ink: #16181d; --sub: #6b7280; --dim: #9aa1ad; --line: #e5e7eb; --panel2: #f1f3f5; background: #fff; color: var(--ink); box-shadow: none; margin-bottom: 0; }
#sec2 h2 em { background: var(--panel2); color: var(--sub); }
.who h3 { font-weight: 700; }
.target { background: var(--panel2); box-shadow: inset 0 0 0 1px #f0b8b5; color: var(--ink); border-radius: 8px; }
.target.on { background: #e6f4ea; box-shadow: inset 0 0 0 1px #a8dab5; }
.target small { color: var(--sub); } .target b { font-weight: 700; }
.target .pulse { background: var(--bad); } .target.on .pulse { background: var(--ok); box-shadow: 0 0 0 4px rgba(24, 128, 56, .15); }
.item, #detail .item { background: #fff; color: var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.item:has(input:checked) { background: #f5f9ff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.item input, .bundle .fast input { accent-color: var(--accent); }
.item .ithumb { background: var(--panel2); }
.item.view .ithumb { outline-color: var(--accent); }
.item .itext b { font-weight: 600; }
.item .itext small { color: var(--sub); }
.item .mini, .nfc .mini { border-radius: 6px; }
.item .secs, .bundle select { border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.bundle { background: var(--panel2); color: var(--sub); border-radius: 8px; }
.bundle em { color: var(--warn); }
.bundle span:last-child, .bundle .fast { color: var(--sub); }
.progress { background: var(--panel2); }
.msg.ok { color: var(--ok); } .msg.bad { color: var(--bad); }
.motion-export { background: var(--panel2); border-radius: 8px; }
.motion-export a { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.motion-export a:hover { background: var(--panel2); }
.motion-export p { color: var(--sub); }
.nfc { color: var(--sub); } .nfc span { color: var(--accent); font-weight: 700; } .nfc code { color: var(--ink); }
.bid { color: var(--accent); font-weight: 700; }
.levelup { color: var(--warn); }
.drop { background: rgba(232, 240, 254, .85); border-color: var(--accent); color: var(--accent); border-radius: 12px; }
.toast { background: #16181d; color: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 50, .2); }

/* 행사 순서 번호 */
.rail-item .num { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: #3c4250; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; }
.rail-item.active .num { background: #1a73e8; color: #fff; }

/* 뱃지 거리 표시 (2026-10-20): 가장 가까운 뱃지 강조, 인식 거리 밖은 흐리게 */
.nearSel { font-size: 12.5px; font-weight: 500; color: var(--sub); display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; flex-wrap: wrap; }
.nearSel small { flex-basis: 100%; font-size: 11.5px; }
.nearSel select { font: inherit; padding: 3px 6px; border-radius: 8px; border: 1px solid rgba(17,18,20,.15); background: #fff; }
.badge.nearest { outline: 2px solid var(--blue, #1a73e8); }
.badge.far { opacity: .45; }
.badge .tag { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--blue, #1a73e8); border-radius: 99px; padding: 1px 7px; margin-left: 6px; }
.badge .dbm { color: var(--sub); font-size: 11px; margin-left: 4px; }