/* ===========================================================================
   운영자 콘솔 (2판) — 어두운 초록 무대 위의 편집형 콘솔
   /operator 와 /setup 이 함께 쓴다. 직각, 1px 선, 모노 라벨, 명조 제목.
   색은 전부 tokens.css 의 토큰만 쓴다 → [data-theme="light"] 종이색 화면이 자동으로 따라온다.
   =========================================================================== */

body.operator {
  min-height: 100dvh;
  background: var(--stage);
}
body.operator > #root {
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* --- 로그인 · 기기 연결 (가운데 카드) ---------------------------------------- */
.o-login {
  flex: 1 1 auto;
  display: grid; place-items: center;
  min-height: 100dvh;
  padding: var(--s4);
  padding-top: max(var(--s4), env(safe-area-inset-top));
  padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
}
.o-login .k-muted { color: var(--text-faint); font-size: var(--step--1); line-height: 1.7; }
.o-login__card {
  width: min(100%, 26rem);
  padding: var(--s5) var(--s4);
  background: var(--stage-1);
  border: 1px solid var(--rule-strong);
}
.o-login__card > .eyebrow { color: var(--coral); }
.o-login__card h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
  font-weight: 500; line-height: 1.1; letter-spacing: -.06em;
}
.o-login__card .field { margin-block: 0; }
.o-login__card .notice ul { padding-left: 1.1em; }

/* --- 머리 ---------------------------------------------------------------- */
.o-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  min-height: 64px;
  padding: .6rem var(--s4);
  padding-top: max(.6rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--stage-0) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.o-head__brand { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.o-head__brand .k-mark { font-size: 22px; line-height: 1; }
.o-head__brand small {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
  padding-left: 14px; border-left: 1px solid var(--rule-strong);
}
.o-head__spacer { flex: 1 1 auto; }
.o-head .conn { padding-left: var(--s2); }

/* --- 탭 (네모 단추 줄) ------------------------------------------------------ */
.o-tabs {
  display: flex; gap: .5rem;
  padding: var(--s3) var(--s4) 0;
  max-width: 88rem; margin-inline: auto; width: 100%;
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.o-tabs::-webkit-scrollbar { height: 4px; }
.o-tabs::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.o-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 40px;
  padding: .45em 1.1em;
  font: inherit; font-size: var(--step--1); font-weight: 700; letter-spacing: -.02em;
  color: var(--text-soft); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: 0;
  cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.o-tab:hover { color: var(--text); border-color: var(--text); }
.o-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.o-tab__count {
  display: inline-block;
  padding: 0 .5em;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .06em; line-height: 1.7;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.o-tab[aria-selected="true"] .o-tab__count { background: color-mix(in srgb, var(--coral) 28%, transparent); }

/* --- 본문 ---------------------------------------------------------------- */
.o-main {
  flex: 1 1 auto;
  width: 100%; max-width: 88rem; margin-inline: auto;
  padding: var(--s4);
  padding-bottom: max(var(--s6), env(safe-area-inset-bottom));
  scroll-margin-top: 72px;
}

/* --- 현황 타일 ------------------------------------------------------------ */
.o-tiles {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.o-tile {
  display: flex; flex-direction: column; gap: .35rem;
  padding: var(--s3);
  min-height: 7.2rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  text-align: left;
}
.o-tile__label {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.o-tile__value {
  margin-top: auto;
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); font-weight: 500;
  line-height: 1.05; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.o-tile__note { font-size: var(--step--1); line-height: 1.5; color: var(--text-soft); }
.o-tile--alert { border-color: color-mix(in srgb, var(--danger) 65%, var(--rule-strong)); }
.o-tile--alert .o-tile__label, .o-tile--alert .o-tile__value { color: var(--danger); }
.o-tile--warn  { border-color: color-mix(in srgb, var(--warn) 65%, var(--rule-strong)); }
.o-tile--warn .o-tile__label, .o-tile--warn .o-tile__value { color: var(--warn); }

/* --- 부스 상태 전환 (칸막이 단추) ------------------------------------------- */
.o-booth { display: inline-flex; border: 1px solid var(--rule-strong); }
.o-booth button {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 36px;
  padding: .35em .95em;
  font: inherit; font-weight: 700; font-size: var(--step--1); letter-spacing: -.02em;
  color: var(--text-soft); background: transparent;
  border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.o-booth button + button { border-left: 1px solid var(--rule-strong); }
.o-booth button:hover { color: var(--text); background: var(--stage-2); }
.o-booth button[aria-pressed="true"]::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.o-booth button[data-value="open"][aria-pressed="true"]   { color: var(--ok);     background: var(--ok-bg); }
.o-booth button[data-value="paused"][aria-pressed="true"] { color: var(--warn);   background: var(--warn-bg); }
.o-booth button[data-value="closed"][aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); }

/* --- 접수 목록 ------------------------------------------------------------ */
.o-toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.o-toolbar input[type="search"] { max-width: 18rem; }
.o-toolbar select { max-width: 12rem; }

.o-items { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

.o-item {
  display: grid; gap: var(--s2);
  align-content: start;
  padding: var(--s3);
  background: var(--stage-1);
  border: 1px solid var(--rule-strong);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.o-item[data-status="failed"] { border-color: var(--danger); }
.o-item[data-status="hidden"] { opacity: .75; border-style: dashed; }
.o-item[data-flag="reported"] { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }

.o-item__top { display: flex; gap: var(--s3); align-items: flex-start; }
.o-item__thumb {
  width: 76px; height: 76px; flex: none;
  object-fit: cover;
  background: var(--stage-3); border: 1px solid var(--rule);
}
.o-item__title {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--step-1);
  line-height: 1.3; letter-spacing: -.04em; word-break: keep-all;
}
.o-item__who { margin-top: .25rem; font-size: var(--step--1); color: var(--text-soft); }
.o-item__code {
  margin-top: .35rem;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.o-item__badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.o-item__actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .2rem; }
.o-item__note {
  padding: .55em .8em;
  font-size: var(--step--1); line-height: 1.6; color: var(--text-soft);
  background: var(--stage-2); border-left: 2px solid var(--sage);
}

.o-listen {
  display: grid; gap: .45rem;
  padding: var(--s2);
  background: var(--stage-0); border: 1px solid var(--rule);
}
.o-listen__label {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.o-listen audio { width: 100%; }

.o-approve {
  display: grid; gap: .45rem;
  padding: var(--s3);
  border: 1px dashed var(--rule-strong);
}
.o-approve > strong { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.o-approve label { display: flex; gap: .6em; align-items: flex-start; font-size: var(--step--1); line-height: 1.5; cursor: pointer; }
.o-approve input { width: 20px; height: 20px; margin-top: .1em; flex: none; accent-color: var(--coral); }
.o-approve .btn { margin-top: .3rem; justify-self: start; }

/* 알림 문구(종이색) 안의 단추는 종이 위 글자색을 따른다 */
.notice .btn { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.notice .btn:hover:not(:disabled) { border-color: currentColor; }
.notice .btn--primary { color: var(--on-primary); border-color: var(--coral); }

/* --- 설정 ---------------------------------------------------------------- */
.o-settings { display: grid; gap: var(--s4); max-width: 64rem; }
.o-section {
  padding: var(--s4);
  background: var(--stage-1);
  border: 1px solid var(--rule-strong);
}
.o-section > h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.05em; line-height: 1.2;
  padding-bottom: .55em; margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.o-section > h3 + p.field__hint { margin-top: calc(var(--s3) * -1 + .3rem); margin-bottom: var(--s3); }
.o-section > p.field__hint { margin-bottom: var(--s3); }
.o-section h4 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.o-grid2 { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.o-grid3 { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.o-grid2 .field, .o-grid3 .field { margin-block: 0; }

/* 현황판의 작은 판 — 머리말은 모노 라벨 */
.o-grid2 > .panel { display: grid; gap: .3rem; align-content: start; background: var(--stage-0); }
.o-grid2 > .panel > .field__label {
  margin-bottom: .3rem;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}

.o-colors { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.o-color { display: grid; gap: .4rem; justify-items: start; padding: var(--s2); border: 1px solid var(--rule); }
.o-color > span { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.o-color .row { flex-wrap: nowrap; width: 100%; }
.o-color input[type="text"] { min-height: 44px; font-family: var(--font-mono); letter-spacing: .05em; }

/* 코너 편집 */
.o-cats { display: grid; gap: var(--s2); }
.o-cat {
  display: grid; gap: var(--s3);
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--s3);
  background: var(--stage-0);
  border: 1px solid var(--rule-strong);
  transition: opacity .18s var(--ease), border-color .18s var(--ease);
}
.o-cat[data-enabled="false"] { opacity: .55; border-style: dashed; }
.o-cat__handle { display: grid; gap: .35rem; justify-items: center; }
.o-cat__handle input[type="text"] { min-height: 52px; padding: .2em; text-align: center; }
.o-cat__handle small {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .12em; color: var(--coral);
}
.o-cat__fields { display: grid; gap: var(--s2); }
.o-cat__fields .o-grid2 { gap: var(--s2); }
.o-cat__side { display: grid; gap: .35rem; justify-items: stretch; min-width: 5.2rem; }
.o-cat__side input[type="color"] { width: 100%; }
.o-cat__side .row { justify-content: center; }
.o-cat input[type="text"] { min-height: 42px; }

/* 릴레이 단어 · 금칙어 칩 */
.o-words { display: flex; gap: .4rem; flex-wrap: wrap; }
.o-word {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .3em .35em .3em .8em;
  font-weight: 600; font-size: var(--step--1); letter-spacing: -.01em;
  color: var(--text);
  background: var(--stage-2); border: 1px solid var(--rule-strong);
}
.o-word__n { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .08em; color: var(--coral); }
.o-word button {
  width: 24px; height: 24px;
  font: inherit; font-size: .9rem; line-height: 1;
  color: var(--text-faint); background: transparent;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.o-word button:hover { color: var(--danger); border-color: var(--danger); }

/* 릴레이 슬롯 */
.o-slots { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.o-slot {
  display: grid; gap: .35rem; align-content: start;
  padding: var(--s3);
  background: var(--stage-0); border: 1px solid var(--rule-strong);
}
.o-slot[data-filled="false"] { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 60%, var(--rule-strong)); }
.o-slot[data-filled="false"] .o-slot__word { color: var(--text-soft); }
.o-slot__n { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .12em; color: var(--coral); }
.o-slot__word { font-family: var(--font-serif); font-weight: 600; font-size: var(--step-1); letter-spacing: -.04em; line-height: 1.2; }
.o-slot select { margin-top: .3rem; }

/* 저장 바 */
.o-savebar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  font-size: var(--step--1);
  color: var(--text-soft);
  background: var(--stage-0);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-2);
  transition: border-color .18s var(--ease);
}
.o-savebar .grow { min-width: 12rem; }
.o-savebar[data-dirty="true"] { border-color: var(--coral); }
.o-savebar[data-dirty="true"] .grow { color: var(--flower); font-weight: 600; }
.o-savebar[data-dirty="true"] .grow::before { content: '\25CF'; margin-right: .6em; color: var(--coral); font-size: .7em; vertical-align: .15em; }

/* --- 로그 · 표 ------------------------------------------------------------ */
.o-log { display: grid; font-size: var(--step--1); border-top: 1px solid var(--rule); }
.o-log__row {
  display: grid; grid-template-columns: 7rem 10rem minmax(0, 1fr); gap: .8rem;
  align-items: baseline;
  padding: .55em .2em;
  border-bottom: 1px solid var(--rule);
}
.o-log__row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.o-log__time { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-log__action { font-weight: 700; letter-spacing: -.01em; }
.o-log__row > .field__hint { margin: 0; overflow-wrap: anywhere; }

/* --- 연결 코드 (종이 위에 크게) --------------------------------------------- */
.o-pair {
  display: grid; justify-items: center; gap: var(--s2);
  padding: var(--s5) var(--s4);
  text-align: center;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong);
  --text: var(--ink); --text-soft: var(--ink-soft); --text-faint: var(--ink-faint);
}
.o-pair > .eyebrow { color: var(--coral); }
.o-pair__code {
  font-family: var(--font-mono); font-size: clamp(2.6rem, 10vw, 4rem);
  font-weight: 500; line-height: 1.1; letter-spacing: .28em; text-indent: .28em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.o-pair p { font-size: var(--step--1); line-height: 1.6; word-break: keep-all; }
.o-pair > .field__hint { font-family: var(--font-mono); letter-spacing: .04em; }

/* --- 빈 상태 -------------------------------------------------------------- */
.o-empty {
  grid-column: 1 / -1;
  padding: var(--s6) var(--s3);
  text-align: center; color: var(--text-faint);
  border: 1px dashed var(--rule-strong);
}
.o-empty__mark { font-size: 2.4rem; line-height: 1; margin-bottom: var(--s2); color: var(--coral); }

/* --- 운영 대시보드 · 모드 표시 --------------------------------------------- */
.o-head__brand {
  padding: .55rem .85rem;
  color: #171817;
  background: #fff;
  border: 3px solid var(--p-focus, #7561ee);
}
.o-role {
  display: inline-flex; align-items: center;
  min-height: 30px; padding: .25rem .7rem;
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: .12em; color: var(--text);
  border: 1px solid var(--rule-strong);
}
.o-mode-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 36px; padding: .4rem .75rem;
  font: 800 11px/1.2 var(--font-mono); letter-spacing: .05em;
  color: var(--text); background: transparent;
  border: 1px solid var(--rule-strong); cursor: pointer;
}
.o-mode-badge__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ok); }
.o-mode-badge[data-mode="test"] { color: #171817; background: var(--p-acid, #ffe84a); border-color: #171817; }
.o-mode-badge[data-mode="test"] .o-mode-badge__dot { background: var(--p-focus, #7561ee); }

.o-dashboard { gap: var(--s4); }
.o-dashboard__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: end;
  padding: clamp(1.5rem, 3vw, 3rem);
  color: #171817; background: #fff;
  border: 2px solid #171817; border-top: 12px solid var(--p-focus, #7561ee);
}
.o-dashboard__intro .eyebrow { margin-bottom: var(--s2); color: var(--p-focus, #7561ee); }
.o-dashboard__intro h1 {
  max-width: 18ch; margin: 0;
  font: 900 clamp(2rem, 4vw, 4.2rem)/.98 var(--font);
  letter-spacing: -.065em; word-break: keep-all;
}
.o-dashboard__lead { max-width: 50rem; margin-top: var(--s3); color: #52534f; line-height: 1.75; }
.o-dashboard__stamp {
  min-width: 10rem; padding: var(--s3);
  color: #171817; background: var(--p-acid, #ffe84a); border: 2px solid #171817;
}
.o-dashboard__stamp span, .o-dashboard__stamp small { display: block; font: 700 10px/1.5 var(--font-mono); letter-spacing: .1em; }
.o-dashboard__stamp strong { display: block; margin: .35rem 0; font-size: 1.35rem; font-weight: 900; }

.o-tiles--dashboard { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.o-tiles--dashboard .o-tile { position: relative; min-height: 9rem; overflow: hidden; }
.o-tiles--dashboard .o-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--p-lav, #c8baff); }
.o-tiles--dashboard .o-tile:nth-child(1)::before,
.o-tiles--dashboard .o-tile:nth-child(6)::before { background: var(--p-focus, #7561ee); }
.o-tile--ok { border-color: var(--ok); }
.o-tile--ok .o-tile__label, .o-tile--ok .o-tile__value { color: var(--ok); }

.o-progress {
  display: grid; grid-template-columns: minmax(13rem, .35fr) minmax(0, 1fr); gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s4); color: #171817; background: #fff; border: 2px solid #171817;
}
.o-progress__copy { display: grid; gap: .25rem; }
.o-progress__copy strong { font-size: var(--step-1); }
.o-progress__copy span { color: #52534f; font-size: var(--step--1); }
.o-progress__track { height: 24px; padding: 3px; background: #fff; border: 2px solid #171817; }
.o-progress__track span { display: block; min-width: 2px; height: 100%; background: var(--p-focus, #7561ee); transition: width .35s var(--ease); }

.o-mode-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center;
  padding: var(--s4); color: #171817; background: var(--p-lav, #c8baff); border: 2px solid #171817;
}
.o-mode-card[data-mode="test"] { background: var(--p-acid, #ffe84a); }
.o-mode-card__index {
  display: grid; place-items: center; width: 74px; aspect-ratio: 1;
  font: 900 13px/1 var(--font-mono); letter-spacing: .1em;
  background: #fff; border: 2px solid #171817; box-shadow: 6px 6px 0 #171817;
}
.o-mode-card__copy .eyebrow { margin-bottom: .3rem; color: #171817; }
.o-mode-card__copy h2 { margin: 0; font: 900 clamp(1.4rem, 2.2vw, 2.2rem)/1.1 var(--font); letter-spacing: -.04em; }
.o-mode-card__copy > p:last-child { margin-top: .55rem; max-width: 58rem; color: #3e3e3b; line-height: 1.65; }
.o-mode-card__actions { display: flex; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; max-width: 26rem; }

/* --- 설정 정보 구조 ------------------------------------------------------- */
.o-settings { max-width: none; gap: var(--s4); }
.o-settings__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: end;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  color: #171817; background: var(--p-lav, #c8baff); border: 2px solid #171817;
}
.o-settings__hero .eyebrow { margin-bottom: var(--s2); color: #171817; }
.o-settings__hero h1 { max-width: 20ch; margin: 0; font: 900 clamp(2.1rem, 4.3vw, 4.6rem)/1 var(--font); letter-spacing: -.07em; word-break: keep-all; }
.o-settings__hero h1 em { color: var(--p-focus, #5e49d8); font-style: normal; }
.o-settings__hero > div > p:last-child { max-width: 52rem; margin-top: var(--s3); line-height: 1.7; }
.o-settings__version { min-width: 9rem; padding: var(--s3); text-align: right; background: #fff; border: 2px solid #171817; box-shadow: 7px 7px 0 #171817; }
.o-settings__version span, .o-settings__version small { display: block; font: 700 10px/1.4 var(--font-mono); letter-spacing: .08em; }
.o-settings__version strong { display: block; margin: .15rem 0; font: 900 3.2rem/1 var(--font-mono); color: var(--p-focus, #7561ee); }

.o-settings__layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.o-settings__nav {
  position: sticky; top: 86px;
  display: grid; gap: var(--s2); padding: var(--s3);
  color: #171817; background: #fff; border: 2px solid #171817;
}
.o-settings__nav h2 { margin: -.15rem 0 0; font-size: 1.35rem; font-weight: 900; }
.o-settings__links { display: grid; margin-top: var(--s2); border-top: 2px solid #171817; }
.o-settings__links a {
  display: grid; grid-template-columns: 2rem 1fr; gap: .45rem; align-items: baseline;
  padding: .8rem .25rem; color: #171817; text-decoration: none; border-bottom: 1px solid #d5d4cf;
}
.o-settings__links a:hover { padding-left: .55rem; background: var(--p-acid, #ffe84a); }
.o-settings__links span { font: 700 10px/1 var(--font-mono); color: var(--p-focus, #7561ee); }
.o-settings__links strong { font-size: var(--step--1); }
.o-settings__mode-summary { display: grid; gap: .2rem; margin-top: var(--s2); padding: var(--s3); background: #efeee9; border: 2px solid #171817; }
.o-settings__mode-summary[data-mode="test"] { background: var(--p-acid, #ffe84a); }
.o-settings__mode-summary > span { font: 700 10px/1.4 var(--font-mono); letter-spacing: .1em; }
.o-settings__mode-summary > strong { font-size: 1.15rem; }
.o-settings__mode-summary a { margin-top: .35rem; color: #171817; font-weight: 800; }
.o-settings__mode-summary small { color: #52534f; }

.o-settings__content { display: grid; gap: var(--s6); min-width: 0; }
.o-settings__group { display: grid; gap: var(--s3); }
.o-settings__group-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start;
  padding-bottom: var(--s3); border-bottom: 4px solid var(--text);
}
.o-settings__group-head > span {
  display: grid; place-items: center; width: 46px; height: 46px;
  font: 800 12px/1 var(--font-mono); color: #171817; background: var(--p-acid, #ffe84a); border: 2px solid #171817;
}
.o-settings__group-head h2 { margin: 0; font: 900 clamp(1.5rem, 2.6vw, 2.35rem)/1.05 var(--font); letter-spacing: -.045em; }
.o-settings__group-head p { max-width: 48rem; margin-top: .35rem; color: var(--text-soft); line-height: 1.6; }
.o-settings__group > .o-section { scroll-margin-top: 88px; }
.o-section__divider { margin: var(--s4) 0 var(--s2); padding-top: var(--s3); border-top: 2px solid var(--rule-strong); }

.o-test-mode {
  display: grid; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s4);
  color: #171817; background: #efeee9; border: 2px solid #171817;
}
.o-test-mode[data-mode="test"] { background: var(--p-acid, #ffe84a); }
.o-test-mode__top { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; }
.o-test-mode__state { display: block; margin-top: .3rem; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.o-test-mode__description { max-width: 58rem; line-height: 1.7; }
.o-test-mode__actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.o-test-mode__actions a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.o-switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.o-switch input { position: absolute; opacity: 0; pointer-events: none; }
.o-switch > span { position: relative; width: 58px; height: 32px; background: #75756f; border: 2px solid #171817; }
.o-switch > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border: 2px solid #171817; transition: transform .16s var(--ease); }
.o-switch input:checked + span { background: var(--p-focus, #7561ee); }
.o-switch input:checked + span::after { transform: translateX(26px); }
.o-switch input:focus-visible + span { outline: 4px solid var(--p-focus, #7561ee); outline-offset: 3px; }
.o-switch em { min-width: 2.4rem; font: 900 11px/1 var(--font-mono); font-style: normal; }

@media (max-width: 75rem) {
  .o-tiles--dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-mode-card { grid-template-columns: auto minmax(0, 1fr); }
  .o-mode-card__actions { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
  .o-settings__layout { grid-template-columns: 1fr; }
  .o-settings__nav { position: static; }
  .o-settings__links { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid #171817; }
  .o-settings__links a { border-right: 1px solid #d5d4cf; }
}

@media (max-width: 52rem) {
  .o-dashboard__intro, .o-settings__hero { grid-template-columns: 1fr; }
  .o-dashboard__stamp { justify-self: start; }
  .o-settings__version { justify-self: start; text-align: left; }
  .o-progress { grid-template-columns: 1fr; }
  .o-settings__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-role { display: none; }
}

/* --- 좁은 화면 ------------------------------------------------------------ */
@media (max-width: 40rem) {
  .o-head { gap: var(--s2); padding-inline: var(--s3); }
  .o-head .conn { display: none; }
  .o-tabs { padding-inline: var(--s3); }
  .o-main { padding: var(--s3); padding-bottom: max(var(--s6), env(safe-area-inset-bottom)); }
  .o-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-tile { min-height: 6.4rem; padding: var(--s2) var(--s3); }
  .o-cat { grid-template-columns: 1fr; gap: var(--s2); }
  .o-cat__handle { grid-template-columns: 3.4rem auto; align-items: center; justify-items: start; }
  .o-cat__side { grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); }
  .o-cat__side input[type="color"] { width: 64px; }
  .o-log__row { grid-template-columns: 1fr; gap: .1rem; }
  .o-savebar { padding-inline: var(--s3); }
  .o-savebar .grow { flex-basis: 100%; }
  .o-pair { padding: var(--s4) var(--s3); }
  .o-head__brand { border-width: 2px; }
  .o-head__brand small { display: none; }
  .o-head__spacer { display: none; }
  .o-mode-badge { margin-left: auto; }
  .o-tiles--dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-dashboard__intro, .o-settings__hero { padding: var(--s4) var(--s3); }
  .o-dashboard__intro h1, .o-settings__hero h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .o-mode-card { grid-template-columns: 1fr; }
  .o-mode-card__index { width: 58px; }
  .o-mode-card__actions { grid-column: auto; }
  .o-settings__links { grid-template-columns: 1fr; }
  .o-settings__group-head { grid-template-columns: 38px minmax(0, 1fr); gap: var(--s2); }
  .o-settings__group-head > span { width: 38px; height: 38px; }
  .o-test-mode__top { align-items: flex-start; }
}

/* --- 인쇄 ---------------------------------------------------------------- */
@media print {
  .o-head, .o-tabs, .o-savebar, .o-toolbar, .o-item__actions { display: none !important; }
  .o-item, .o-section, .o-tile { break-inside: avoid; border-color: #999; }
}
.o-relay-projects { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.o-relay-project { display: flex; flex-direction: column; gap: 7px; text-align: left; min-height: 106px; padding: 13px; color: inherit; background: var(--surface, #fff); border: 1px solid currentColor; cursor: pointer; }
.o-relay-project[aria-pressed="true"] { background: #e9deff; outline: 3px solid #835cff; outline-offset: 0; }
.o-relay-project strong { font-size: 15px; line-height: 1.2; }
.o-relay-project span, .o-relay-project small { font-size: 11px; line-height: 1.35; }
.o-relay-listen { display: grid; gap: 8px; padding: 16px; background: #f0eaff; border-left: 4px solid #835cff; }
.o-relay-listen audio { width: 100%; }
@media (max-width: 1000px) { .o-relay-projects { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 600px) { .o-relay-projects { grid-template-columns: 1fr 1fr; } }