/* ============================================================
   업주 콘솔 — 디자인 토큰 + 셸(헤더/네비)
   01-DESIGN-TOKENS.md 값 그대로. 임의 변경 금지.
   반응형 분기 760px (프로토타입 narrow<760 → CSS media query로 이식).
   ============================================================ */

:root{
  /* 표면 */
  --bg:#0B0C10; --card:#14161C; --card2:#171A21; --card-hi:#1A1D25;
  --input:#10131A; --sheet:#101318; --btn:#1E222B; --badge-off:#232733;
  /* 선 */
  --bd:#23272F; --bd-soft:#1F232B; --bd-input:#2A2F3A; --bd-btn:#2E3440;
  --track-off:#333A46; --dash:#3A404D;
  /* 글자 */
  --tx:#EDEFF3; --tx2:#9AA1B1; --tx3:#8A91A1; --dim:#6B7280; --dim2:#4E5563;
  /* 브랜드 (업소별 인라인 주입, 기본 골드) */
  --acc:#E7B84F; --acc-ink:#14100A;
  --acc-soft:rgba(231,184,79,0.14); --acc-line:rgba(231,184,79,0.34); --acc-dim:rgba(231,184,79,0.09);
  /* 의미색 */
  --ok:#58D6A8; --info:#55A9EA; --warn:#F4788A; --anon:#C6A0F0; --absent:#E05C6E;
  /* 폰트 */
  --mono:'IBM Plex Mono',monospace;
  --sans:'Pretendard Variable',Pretendard,system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; background:var(--bg); color:var(--tx);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-0.01em;
  font-size:14px;
}
a{color:var(--acc);text-decoration:none}
a:hover{opacity:.78}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2C3240;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.oc-blip{animation:blip 2s ease-in-out infinite}

button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* ---------- 헤더 ---------- */
.oc-header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,12,16,0.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd);
}
.oc-header__inner{
  max-width:1360px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.oc-logo{display:flex;align-items:center;gap:12px;text-align:left}
.oc-logo__tile{
  width:42px;height:42px;border-radius:11px;background:var(--acc);color:var(--acc-ink);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex:0 0 auto;
}
.oc-logo__name{font-size:16px;font-weight:700}
.oc-logo__caret{font-size:11px;color:var(--dim)}
.oc-logo__code{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.08em}

.oc-chip{
  display:flex;align-items:center;gap:8px;padding:11px 17px;border-radius:11px;
  background:var(--card);border:1px solid var(--bd);flex:0 0 auto;
}
.oc-chip--me{margin-left:auto}
.oc-chip__uid{font-family:var(--mono);font-size:13px;font-weight:700}
.oc-chip__role{font-size:11.5px;color:var(--tx3)}
.oc-chip__caret{font-size:10px;color:var(--dim)}
.oc-chip--counter{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc);font-size:14px;font-weight:700}
.oc-chip--theme{width:42px;height:42px;justify-content:center;padding:0}
.oc-chip--theme .dot{width:15px;height:15px;border-radius:50%;background:var(--acc)}

/* ---------- 네비 ---------- */
.oc-nav{display:flex;gap:8px;flex-wrap:wrap;overflow-x:auto;max-width:100%;margin-left:auto;padding-bottom:2px}
.oc-nav__item{
  padding:11px 17px;border-radius:10px;font-size:14px;font-weight:600;white-space:nowrap;
  display:flex;align-items:baseline;gap:8px;background:transparent;color:var(--tx2);
}
.oc-nav__item.is-active{background:var(--acc-soft);color:var(--acc)}
.oc-nav__en{font-family:var(--mono);font-size:9px;letter-spacing:.1em;opacity:.55}

/* ---------- 전환 패널 (지점/계정/색상) ---------- */
.oc-panel{border-bottom:1px solid var(--bd);background:var(--sheet)}
.oc-panel__inner{max-width:1360px;margin:0 auto;padding:18px 22px;display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.oc-panel__label{font-size:12px;color:var(--tx3);font-weight:600;flex:0 0 auto}
.oc-panel__note{flex:1 1 100%;font-size:12px;color:var(--dim2)}
.oc-pick{padding:14px 15px;border-radius:12px;background:var(--card);border:1px solid var(--bd);text-align:left}
.oc-pick--me{flex:1 1 200px}
.oc-pick--branch{flex:1 1 220px}
.oc-pick.is-active{background:var(--acc-soft);border-color:var(--acc-line)}
.oc-pick__t{font-size:14.5px;font-weight:700}
.oc-pick__t--mono{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--acc)}
.oc-pick__sub{margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.oc-pick__sub--plain{font-family:var(--sans);font-size:11.5px;color:var(--dim)}
.oc-lock{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:6px;background:var(--badge-off);color:var(--tx3);font-size:11.5px;font-weight:700}

/* 색상 프리셋 칩 */
.oc-accent{display:flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border-radius:99px;background:var(--card);border:1px solid var(--bd);font-size:13.5px;font-weight:600}
.oc-accent.is-active{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.oc-accent .swatch{width:24px;height:24px;border-radius:50%}

/* ---------- 메인 ---------- */
.oc-main{max-width:1360px;margin:0 auto;padding:30px 22px 90px;display:flex;flex-direction:column;gap:20px}
.oc-section{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:28px}
.oc-h1{margin:0;font-size:24px;font-weight:800}
.oc-h1__en{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--acc)}
.oc-muted{color:var(--tx2)}

/* ---------- 토스트 ---------- */
.oc-toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;
  padding:15px 26px;border-radius:12px;background:#1C2029;border:1px solid var(--acc);
  color:var(--tx);font-size:14.5px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}

/* ============================================================
   반응형 — 760px (프로토타입 narrow<760)
   ============================================================ */
@media (max-width:759px){
  .oc-header__inner{padding:8px 12px;gap:8px}
  .oc-logo__tile{width:34px;height:34px;font-size:15px}
  .oc-logo__name{font-size:14px}
  .oc-logo__code{display:none}          /* 업소 코드 숨김 */
  .oc-chip{padding:8px 11px}
  .oc-chip__uid{font-size:11.5px}
  .oc-chip__role{display:none}          /* 역할 라벨 숨김 */
  .oc-chip--counter{font-size:12.5px}
  .oc-chip--theme{width:34px;height:34px}
  .oc-nav{gap:6px;margin-left:0;width:100%;flex-wrap:nowrap;white-space:nowrap}
  .oc-nav__item{padding:8px 12px;font-size:12.5px}
  .oc-nav__en{display:none}             /* 영문 라벨 숨김 */
  .oc-main{padding:18px 12px 74px;gap:12px}
  .oc-section{padding:15px 14px}
  .oc-h1{font-size:20px}

  /* 터치 타깃 44px (필수) */
  main button:not([data-compact]),
  main select,
  main input:not([type="date"]),
  main textarea{min-height:44px}
  main select{padding-top:10px;padding-bottom:10px}
  main input[type="date"]{min-height:44px}
}

/* ============================================================
   주간(라이트) 테마 — body[data-oc-theme="day"] 에서 토큰 재정의.
   브랜드 계열(--acc/--acc-ink/--acc-soft/--acc-line/--acc-dim)은 헤더에서
   인라인으로 주입되어 두 테마 공통 유지. 여기선 표면·글자·선·의미색만 전환.
   ============================================================ */
body[data-oc-theme="day"]{
  --bg:#FBFAF7; --card:#FFFFFF; --card2:#F6F3EE; --card-hi:#F1EDE3;
  --input:#FFFFFF; --sheet:#FFFFFF; --btn:#F3EFE7; --badge-off:#ECE7DC;
  --bd:#ECE7DC; --bd-soft:#F2EEE6; --bd-input:#E2DCCC; --bd-btn:#E2DCCC;
  --track-off:#D8D1C1; --dash:#CFC7B4;
  --tx:#15171C; --tx2:#5A616E; --tx3:#6B7280; --dim:#8A8676; --dim2:#B0A896;
  --ok:#1DA574; --info:#2F7BD6; --warn:#E0577A; --anon:#8C63D6; --absent:#D63B54;
}
body[data-oc-theme="day"]{color:var(--tx)}
body[data-oc-theme="day"] .oc-header{background:rgba(251,250,247,0.9)}
body[data-oc-theme="day"] .oc-toast{background:#20242C}
body[data-oc-theme="day"] ::-webkit-scrollbar-thumb{background:#DAD3C4}

/* 주간/야간 토글 칩 */
.oc-chip--mode{padding:11px 14px;font-size:13px;font-weight:700;color:var(--tx2);min-width:54px;justify-content:center}
.oc-chip--mode:hover{color:var(--tx)}