/* 리걸스튜디오 어두운 판 — 시안(대표 지시 10-02 20:5x "사이트전체를 다크모드 고려해서 이번에 디자인할때 정리해봐야될거같아").
   base.html 이 media="(prefers-color-scheme: dark)" 로만 싣는다 — 기기·브라우저가 어두운 모드일 때만 걸리고, 밝은 판은 한 줄도 바뀌지 않는다.
   우리 판을 선언하면(color-scheme:dark) 크롬이 강제로 어둡게 바꾸지 않는다 — 크롬 강제 어둡게에서 연구실 유리 칸이 회색으로 탁해지던 문제(파일럿 R21)가 사라진다.
   - 색: 따뜻한 검정 바탕 + 따뜻한 흰 글자 + 금색 하나(밝은 판과 같은 결, 밝기만 바꿈). 모든 글은 바탕 대비 4.5:1 이상(본문 15.5:1).
   - 위계는 밝은 판과 같다(크기·굵기·여백). 카드는 바탕보다 한 단 밝게 + 선.
   - 3D 연구실·스튜디오 무대는 '밝은 섬': 그림이 밝은 장면이라 무대 안은 밝은 판 색 그대로 두고 둥근 모서리로 감싼다.
   - 영상·샘플 그림·채널 예시의 검은 카드는 그대로. */

:root{
  color-scheme:dark;
  --bg:#121411;
  --text:#ecebe4;
  --muted:#aeb1a6;
  --faint:#9c9f94;
  --line:#3a3e36;
  --line-soft:#2a2d27;
  --gold:#c9a55c;
  --gold-soft:#2a2619;
  --gold-strong:#d6b56f;
  --gold-deep:#e2c88c;
  --surface:#1a1d19;
  --surface-raised:#171a16;
  --surface-hover:#252922;
  --ok:#8fc99e;
  --ok-soft:#1b2a1f;
  --warn-soft:#2c2515;
  --danger:#f19e8e;
  --danger-soft:#33201c;
  --on-gold:#15160f;
  /* 채널 로고(_landing_logos.html) — X·스레드·티스토리·틱톡은 공식 흰색 판, 리콤 나침반 두 바늘은 어두운 바탕에 맞게 */
  --logo-mono:#fff;
  --logo-n1:#ecebe4;
  --logo-n2:#5c6056;
}

/* 흰 바탕이던 칸 → 카드 바탕 */
.btn-line,.btn-danger,.confirm-dlg,.field input,.field select,.field textarea,.field input[type=file],.field input[type=date],
.card,.chip,.plan,.dot,.rows,.opt:not(tr),.mail,.citem,.chipbox,.mbar,.chat,.msg,.cs-status,.cs-script,textarea.rt.rt-big,.rt-toggle.rt-big-btn,
.guide-cards a,.review-notes .rn-checks,.stats li,.svc,.m-tag,.m-post,.m-browser,.m-chip,.cost,.cmp,.pc,.faq details,.fit,.trust,
.cp,.labor,.onb-dot,.hub .chips span,.hub .chip,.cal li,.tagcopy li,.tistory-host input,.pcal-day,.sg-dot,.sg-mode,.own-ai,
.notice .login-hint-act .btn,.welcome-dlg,.rowi .sns-tester .hint.t-wait,.rowi .sns-tester .hint.t-sent{background:var(--surface)}

/* 금색 채움 단추 — 밝은 금색 + 진한 글자(7.8:1). 밝은 판은 진한 금색 + 흰 글자 */
.btn-primary{background:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-strong)}
.btn-quiet:hover{background:#353020}
.btn-danger{border-color:#5a2d25}
.sg-track .done .sg-dot,.dot svg,.onb-dot svg{color:var(--on-gold);stroke:var(--on-gold)}

/* 알림 글자 */
.notice.ok{border-color:#2e4a35;color:#b4dcbe}
.notice.warn{border-color:#4a3d20;color:#ecd09a}
.notice.error{border-color:#5a2a22;color:#f5b3a6}
.sns-state.expired,.sns-state.t-requested,.sns-state.t-reask,.rowi .sns-connect .hint.t-before,.badge.warn,.hub .chip.warn,
.blogview p.ph,.pcal-mark,.pcal-i.warn,.publist .preason.warn,.hint .count.over{color:#e3bb72}
.sns-beta,.rowi .sns-tester .hint.t-wait{border-color:#4a3d20}
.danger-zone{border-color:#5a2d25}
.doc p,.doc li,.guide p,.guide li{color:#d9d8cf}
mark.todo{background:#4a3d20;color:#f3dfb0}
.draft-note{border-color:#4a3d20;color:#ecd09a}
.devbox{border-color:#7a6430;background:#1e1b12}
.ct-problem{background:var(--danger-soft)}
.review-notes .rn-checks{border-color:#4a3d20}
.confirm-dlg,.welcome-dlg{box-shadow:0 14px 44px rgba(0,0,0,.6);border:1px solid var(--line)}
.mbar{box-shadow:0 -4px 16px rgba(0,0,0,.45)}

/* 첫 화면 — 샘플 폰 테두리(검은 테가 검은 바탕에 묻히지 않게 한 단 밝게) */
.phone .screen,.m-phone .screen{border-color:#3a3e36}
/* 채널 예시의 가짜 화면(브라우저 막대·넘김 점)·비용 막대 */
.m-bar{background:#22251f}
.m-bar i,.m-dots i{background:#4a4e45}
.m-dots i:first-child{background:var(--gold)}
.bar i{background:#5c6056}
.g-bar{background:linear-gradient(180deg,#d6b56f,#9b7b37)}

/* 밝은 섬 — 3D 연구실·스튜디오 무대 안은 밝은 판 색(그림이 밝은 장면). color-scheme:light 는 붙이지 않는다 —
   붙이면 크롬 강제 어둡게가 그 부분만 다시 어둡게 바꾼다(10-02 헤드리스 크롬으로 확인) */
.lab-stage,.s3d-stage{--bg:#fff;--text:#262923;--muted:#696f66;--faint:#6b7169;--line:#dcddd8;--line-soft:#e9eae5;
  --gold:#9b7b37;--gold-soft:#f1ecde;--gold-strong:#816221;--surface:#fff;--surface-raised:#f7f7f5}
.section .lab-stage{border-radius:14px}
.section .lab-fig{padding-inline:var(--gutter)}
.section .lab-steps{padding-inline:0}
.s3d .s3d-stage{margin-inline:0;border-radius:14px}

/* 위쪽 메뉴(appbar.css 의 색을 토큰으로) */
.rs-bar{background:var(--bg);border-bottom-color:var(--line-soft)}
.rs-brand{color:var(--text)}
.rs-brand span{color:var(--gold)}
.rs-nav a,.rs-menu>summary{color:var(--muted)}
.rs-nav a:hover,.rs-menu>summary:hover,.rs-menu[open]>summary{background:var(--surface-hover);color:var(--text)}
.rs-nav a[aria-current="page"],.rs-menu>summary.rs-on,.rs-bar .rs-drop a[aria-current="page"]{color:var(--gold-strong);background:var(--gold-soft)}
.rs-me{color:var(--faint)}
.rs-me button{border-color:var(--line);background:var(--surface);color:var(--text)}
.rs-me button:hover{background:var(--surface-hover)}
.rs-me .rs-login{color:var(--text)}
.rs-me .rs-start{background:var(--gold);color:var(--on-gold)}
.rs-me .rs-start:hover{background:var(--gold-strong)}
.rs-me .rs-menu>summary{color:var(--text);border-color:var(--line)}
.rs-me .rs-menu>summary.rs-on{border-color:#4a3d20}
.rs-bar .rs-drop{background:var(--surface);border-color:var(--line);box-shadow:0 12px 32px rgba(0,0,0,.55)}
.rs-bar .rs-drop a{color:var(--text)}
.rs-bar .rs-drop a small,.rs-bar .rs-who{color:var(--faint)}
.rs-bar .rs-drop a:hover{background:var(--surface-hover)}
.rs-bar .rs-who{border-bottom-color:var(--line-soft)}
.rs-bar .rs-who b{color:var(--text)}
.rs-bar .rs-drop form{border-top-color:var(--line-soft)}
.rs-bar .rs-drop button{color:var(--danger)}
.rs-bar .rs-drop button:hover{background:var(--danger-soft)}
.rs-me .rs-ops{color:var(--gold-strong);background:var(--gold-soft);border-color:#4a3d20}
.rs-me .rs-ops:hover{background:#353020}

/* AI 도우미 창(static/ops/feedback.css — 나중에 싣는 파일이라 :root 를 붙여 앞선다) */
:root .rfb{--rfb-text:#ecebe4;--rfb-muted:#aeb1a6;--rfb-line:#3a3e36;--rfb-soft:#2a2619;--rfb-gold:#d6b56f;--rfb-surface:#20231e}
:root .rfb-fab{background:var(--surface);border-color:#4a3d20;box-shadow:0 4px 16px rgba(0,0,0,.55)}
:root .rfb-fab.rfb-has-reply{border-color:var(--gold)}
:root .rfb-panel{background:var(--surface);border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.6)}
:root .rfb-head,:root .rfb-form,:root .rfb-done,:root .rfb-status{border-color:var(--line-soft)}
:root .rfb-x:hover,:root .rfb-line:hover,:root .rfb-link:hover{background:var(--surface-hover)}
:root .rfb-form textarea,:root .rfb-line,:root .rfb-status,:root .rfb-link,:root .rfb-op{background:var(--surface)}
:root .rfb-primary{background:var(--gold);color:var(--on-gold)}
:root .rfb-primary:hover{background:var(--gold-strong)}
:root .rfb-note{color:var(--faint)}
:root .rfb-err{color:var(--danger)}
:root .rfb-dot{border-color:var(--surface)}
:root .rfb-done-text{color:var(--ok)}
:root .rfb-op{border-color:#4a3d20}
:root .att-pick,:root .att-x{background:var(--surface);border-color:var(--line);color:var(--text)}
:root .att-pick:hover,:root .att-x:hover{background:var(--surface-hover)}
:root .att-thumb{background:var(--surface-raised);border-color:var(--line);color:var(--muted)}
:root .att-bar{background:rgba(26,29,25,.9)}
:root .att-note{color:var(--faint)}
:root .att-err{color:var(--danger)}
:root .att-sent img,:root .att-sent .att-file{background:var(--surface)}

/* 자료 올리기(library-upload.css) */
:root .up-drop{border-color:#4a4e45}
:root .up-drop:hover{background:var(--surface-hover)}
:root .up-item,:root .up-x{background:var(--surface)}
:root .up-ico,:root .up-ico[data-ext="TXT"]{background:#262a23;color:#c9ccc2}
:root .up-ico[data-ext="PDF"]{background:var(--danger-soft);color:var(--danger)}
:root .up-ico[data-ext="HWP"],:root .up-ico[data-ext="HWPX"],:root .up-ico[data-ext="DOCX"]{background:#1c2433;color:#9db8e8}
:root .up-ico[data-ext="JPG"],:root .up-ico[data-ext="JPEG"],:root .up-ico[data-ext="PNG"]{background:var(--ok-soft);color:var(--ok)}
:root .up-item.is-wait .up-read b,:root .up-note,:root .fstate.is-wait b{color:#e3bb72}
:root .up-item.is-bad{border-color:#5a2a22;background:var(--danger-soft)}
:root .up-row-bar,:root .up-bar{background:#2a2d27}

/* SNS 연결 준비(sns-ready.css)·가이드 단계(guide-steps.css) */
:root .rowi .sns-ready,:root .rowi .sns-tester,:root .rowi .sns-bar .no,:root .gq{background:var(--surface)}
:root .rowi .sns-ready .ready-item.again .ready-hint,:root .rowi .sns-reject-eg{color:#ecd09a}
:root .gq-mt,:root .gq-mistakes li::marker{color:#e3bb72}
:root .gq-mistakes,:root .gs-s{color:#d9d8cf}
:root .gs-missing{border-color:#7a6430;background:#1e1b12;color:#ecd09a}

/* 영상 설정 화면(web/studio/settings.html — settings_page.compose 가 이 파일도 머리에 함께 싣는다. 색은 같은 이름의 토큰이라 위 :root 로 바뀌고,
   흰색이 박힌 칸과 '고른 상태'의 흰 글자만 덮는다 — 고른 칸 바탕이 밝은 금색이 되므로 글자는 진하게) */
.pick .tick,.choose,.more,.play,.role,details.dev pre{background:var(--surface)}
.pick[aria-pressed="true"] .tick,.vcard[aria-pressed="true"] .choose,.role[aria-pressed="true"],.save{color:var(--on-gold)}
.play.on svg{fill:var(--on-gold)}
.overlay{background:rgba(0,0,0,.72)}
.save:not(:disabled):hover{background:var(--gold-strong);border-color:var(--gold-strong)}
.rs-save-status{color:var(--muted)}
.rs-save-status.err{color:var(--danger)}
.rs-dock{background:#22251f;color:var(--text);border-top:1px solid var(--line)}
.rs-dock button,.rs-guide-next{background:var(--gold);color:var(--on-gold)}
.rs-dock button:hover,.rs-guide-next:hover{background:var(--gold-strong)}
.rs-av-card{border-color:var(--line);background:var(--surface)}
.rs-av-card.is-def{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.rs-av-empty{color:var(--faint)}
.rs-guide{background:var(--gold-soft);border-bottom-color:#4a3d20;color:#ecd09a}
.rs-guide p span{color:#d9c99f}

/* 가이드(guides/_style.html — 본문 안 style 이라 :root 를 붙여 앞선다)·단계 번호(guide-steps.css) — 금색 바탕 위 글자는 진하게 */
:root .g-toc a,:root .guide .g-need li,:root .g-check>li,:root .g-chip,:root .g-faq details{background:var(--surface)}
:root .g-k,:root .gs-step::before{color:var(--on-gold)}
:root .gzoom-x{background:var(--surface);color:var(--text)}