/* ═══ 앱 색 정본 ═══════════════════════════════════════════════════════════
   정본 문서 : 노션 「g load / 지로드 앱의 색상코어」
               https://app.notion.com/p/3c2ecd7b030c806f8005eecc979e5a94
   이 파일은 그 문서의 «코드 사본»이다. 값이 갈리면 scripts/test-core-colors.js 가 잡는다.

   ── 손님이 외울 색은 넷 ──────────────────────────────────────────────────
     지금 해야 함  →  완료  →  안 해도 됨  →  문제
   ── 색이 들어가는 자리는 여섯 ────────────────────────────────────────────
     번호 동그라미 · 작은 배지 · 핵심 버튼 · 진행 막대 · 점 · 대표 사진 테두리
   ── 지키는 것 ────────────────────────────────────────────────────────────
     ⛔ 카드 테두리에 상태색을 쓰지 않는다
     ⛔ 자동으로 됐다는 사실에 색을 주지 않는다 (문장으로 말한다)
     ⛔ 보라를 상태색으로 쓰지 않는다
     ⭐ 지금 보고 있는 단계의 번호만 «채운다». 나머지는 옅은 면 + 테두리
        → 색이 비슷해도 채움/테두리로 갈린다. 색상만으로 멀리 벌릴 필요가 없다
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 표면 (무채색 · 뜻 없음) ── */
  --page:#F7F8F9;        /* 편집화면 캔버스 */
  --card:#FFFFFF;        /* 카드 · 목록 · 레일 */
  --line-c:#E4E6E9;      /* 카드 테두리 */
  --line-s:#EDEEF0;      /* 목록 줄 사이 선 */
  --chip-c:#F1F2F4;      /* 옅은 회색 면 (호버) */

  /* ── 글자 셋 ── */
  --tx:#16181D;          /* 제목 · 중요 */
  --tx2:#343A43;         /* 일반 */
  --tx3:#646B76;         /* 보조 */

  /* ── 상태색 ──
     ⚠️ 오류색 이름이 «--danger» 인 까닭 : styles.css 가 옛날부터 --err 를 쓰고 있어
        같은 이름을 여기서 또 정의하면 «자기 참조»가 되어 색이 조용히 사라진다
     ⚠️ --done-ink 는 «진한 초록 버튼 위 글자»다 (J.J 2026-08-21 · 행동 버튼과 상태 칩을 눈으로 가른다).
        새 색이 아니다 — 라이트는 흰색, 다크는 --now-ink 와 같은 #14180c 를 그대로 쓴다.
        ⛔ 버튼 «면»에 --done-solid 를 쓰지 마라 : 라이트 #35A873 위 흰 글자는 3.00 이라 못 읽는다.
           면은 --done(#007f4d · 흰 글자 5.07) 이다
     ⚠️ 라이트는 «진한 면»과 «글자»가 다른 값이다. 진한 면 값을 흰 바탕 글자로 쓰지 마라
        (#3F76D9 4.37 · #35A873 3.00 · #EB715E 2.98 · #8A929D 3.14 — 전부 기준 미달)
     🆕 --warn 「경고」 (J.J 2026-08-22): 「경고 문구니까 주황 · 너무 경고스럽지 않게」.
     🆕 --erase-ink 「영역 지우기」 손잡이 (J.J 2026-08-22 · 사진3): 다크는 **J.J 가 준 #bfcee0 그대로**.
        ⚠️ 라이트에선 그 값이 흰 바탕에 대비 1.60 이라 «안 읽힌다» — 같은 계열로 내린 #54687f(5.73)를 쓴다.
        ⛔ --danger 로 대신하지 않는다 — 「Shopify 반영 안 됨」과 「실패」가 «같은 목록 한 줄»에
           나란히 서는데 같은 색이면 손님이 할 일이 안 갈린다(제품 목록 실측).
        ⛔ --guide 로도 대신하지 않는다 — 그건 위저드의 «안내» 금색이고 뜻이 다르다.
           (다만 두 낱말은 «같은 화면에 같이 뜨는 자리»가 아직 없어서 색이 이웃해도 안 부딪친다)
        대비 — 라이트 글자 #8a5a12 on --warn-bg 5.30 · 흰 바탕 5.91 / 다크 #dfb173 on --warn-bg 8.09
        ⚠️ `-solid` 는 «일부러» 없다. 채운 경고 단추가 아직 0곳이라 값을 지어내지 않았다.
           채우는 자리가 생기면 그때 «재서» 넣어라(흰 글자 4.5). */
  --now:#2b6acb;   --now-bg:#e8effa;  --now-ln:#c9d9f4; --now-solid:#3F76D9; --now-ink:#FFFFFF;
  --done:#007f4d;  --done-bg:#e7f5ee; --done-ln:#c6e7d8; --done-solid:#35A873; --done-ink:#FFFFFF;
  --danger:#bb4839;   --danger-bg:#fdeeec;  --danger-ln:#f9d7d2; --danger-solid:#EB715E;
  --wait:#676e79;  --wait-bg:#f1f2f3; --wait-ln:#dee0e4; --wait-solid:#8A929D;
  --guide:#8b6f00; --guide-bg:#fcf8eb; --guide-ln:#eadfae;
  --warn:#8a5a12;  --warn-bg:#fdf1e0; --warn-ln:#f2ddbd;
  --erase-ink:#54687f;

  /* ── 가족 밖 — 상태가 아니다. 손님에게 행동을 요구하지 않는다 ──
     미리보기 : 다크 핑크(311°)의 라이트 짝. 어둡게 내리면 332° 로 밀리지만 같은 계열로 읽힌다
                ⚠️ 라이트에선 «틀 안쪽을 밝게»가 안 통한다(페이지가 이미 밝다) → 띠를 어둡게 뒤집는다
     읽기 표시 : 가이드 화면 전용. 다크는 파랑을 쓰지만 라이트에서 파랑은 «지금 할 일» 색이라 못 쓴다
                → 청록 217°. 지금(285°)과 68° · 완료(158°)와 59° */
  --pv:#ab4a9c;   --pv-bg:#fdf1fb;   --pv-ln:#fbdff6;   --pv-bar:#1a1e24;
  --read:#007b8b; --read-bg:#e7f6f9; --read-ln:#c8ebf0; --read-ink:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* ── 표면 ── */
    /* 🔴 바탕을 «검정»으로 내렸다 (J.J 2026-08-21) — 코어 목업이 서 있는 땅과 같게.
       전엔 #15171a 였고 그 위에서 판(#1e2125)이 1.111 밖에 안 갈려 «판이 떠 보이지» 않았다.
       검정으로 내리면 같은 판이 1.35 로 갈린다 — 판을 밝히지 않고 «땅을 내려» 깊이를 만든다.
       ⚠️ 홈이 이미 #0A0A0A 를 쓰고 있었다(shell.css `.app-shell.홈`) — 이제 층이 어긋나지 않는다. */
    --page:#0A0A0A; --card:#1e2125; --line-c:#31353b; --line-s:#2a2e34; --chip-c:#262a30;

    /* ── 글자 셋 ── */
    --tx:#F2F4F7; --tx2:#C4CAD3; --tx3:#98A2B3;

    /* ── 상태색 ──
       라이트와 달리 다크는 «면»과 «글자»가 같은 값이다. 어두운 바탕에선 하나로 둘 다 된다 */
    --now:#c6f24e;   --now-bg:#1f2a10; --now-ln:#42541c; --now-solid:#c6f24e; --now-ink:#14180c;
    --done:#7fd4a0;  --done-bg:#16301f; --done-ln:#2f5a3d; --done-solid:#7fd4a0; --done-ink:#14180c;
    --danger:#f08a62;   --danger-bg:#2e1d16; --danger-ln:#5c3a2b; --danger-solid:#f08a62;
    --wait:#98A2B3;  --wait-bg:#22262b; --wait-ln:#3a3f46; --wait-solid:#8A929D;
    --guide:#e6c15c; --guide-bg:#2a2210; --guide-ln:#5c4a1c;
    --warn:#dfb173;  --warn-bg:#2b2015; --warn-ln:#54402a;
    --erase-ink:#bfcee0;

    /* ── 가족 밖 ── */
    --pv:#f28ce0;   --pv-bg:#2d1328;  --pv-ln:#58224e;  --pv-bar:#1a1e24;
    --read:#8fc7f0; --read-bg:#132434; --read-ln:#28455f; --read-ink:#0d1b26;
  }
}

/* ── 손님이 «직접 고른» 판 ─────────────────────────────────────────────
   위 두 블록은 «OS 가 정한 것»이라 화면 한 곳만 다른 판으로 둘 수 없다.
   아래 둘은 `:root` 가 아니라 «그냥 붙임딱지»라 아무 칸에나 걸 수 있다 —
   그래서 「껍데기는 다크, 본문은 손님이 고른 판」이 된다 (J.J 2026-08-21).
   ⛔ 값은 한 개도 안 바뀌었다. 위 두 블록과 «같은 값»을 그대로 다시 적을 뿐이다.
   ⚠️ `[data-theme="light"]` 이 OS 다크를 이겨야 해서 위 media 선택자에 `:not()` 을 달았다. */
[data-theme="dark"]{
  /* ── 표면 ── */
  /* 🔴 바탕을 «검정»으로 내렸다 (J.J 2026-08-21) — 코어 목업이 서 있는 땅과 같게.
     전엔 #15171a 였고 그 위에서 판(#1e2125)이 1.111 밖에 안 갈려 «판이 떠 보이지» 않았다.
     검정으로 내리면 같은 판이 1.35 로 갈린다 — 판을 밝히지 않고 «땅을 내려» 깊이를 만든다.
     ⚠️ 홈이 이미 #0A0A0A 를 쓰고 있었다(shell.css `.app-shell.홈`) — 이제 층이 어긋나지 않는다. */
  --page:#0A0A0A; --card:#1e2125; --line-c:#31353b; --line-s:#2a2e34; --chip-c:#262a30;

  /* ── 글자 셋 ── */
  --tx:#F2F4F7; --tx2:#C4CAD3; --tx3:#98A2B3;

  /* ── 상태색 ──
     라이트와 달리 다크는 «면»과 «글자»가 같은 값이다. 어두운 바탕에선 하나로 둘 다 된다 */
  --now:#c6f24e;   --now-bg:#1f2a10; --now-ln:#42541c; --now-solid:#c6f24e; --now-ink:#14180c;
  --done:#7fd4a0;  --done-bg:#16301f; --done-ln:#2f5a3d; --done-solid:#7fd4a0; --done-ink:#14180c;
  --danger:#f08a62;   --danger-bg:#2e1d16; --danger-ln:#5c3a2b; --danger-solid:#f08a62;
  --wait:#98A2B3;  --wait-bg:#22262b; --wait-ln:#3a3f46; --wait-solid:#8A929D;
  --guide:#e6c15c; --guide-bg:#2a2210; --guide-ln:#5c4a1c;
  --warn:#dfb173;  --warn-bg:#2b2015; --warn-ln:#54402a;
  --erase-ink:#bfcee0;

  /* ── 가족 밖 ── */
  --pv:#f28ce0;   --pv-bg:#2d1328;  --pv-ln:#58224e;  --pv-bar:#1a1e24;
  --read:#8fc7f0; --read-bg:#132434; --read-ln:#28455f; --read-ink:#0d1b26;
}
[data-theme="light"]{
  /* ── 표면 (무채색 · 뜻 없음) ── */
  --page:#F7F8F9;        /* 편집화면 캔버스 */
  --card:#FFFFFF;        /* 카드 · 목록 · 레일 */
  --line-c:#E4E6E9;      /* 카드 테두리 */
  --line-s:#EDEEF0;      /* 목록 줄 사이 선 */
  --chip-c:#F1F2F4;      /* 옅은 회색 면 (호버) */

  /* ── 글자 셋 ── */
  --tx:#16181D;          /* 제목 · 중요 */
  --tx2:#343A43;         /* 일반 */
  --tx3:#646B76;         /* 보조 */

  /* ── 상태색 ──
     ⚠️ 오류색 이름이 «--danger» 인 까닭 : styles.css 가 옛날부터 --err 를 쓰고 있어
        같은 이름을 여기서 또 정의하면 «자기 참조»가 되어 색이 조용히 사라진다
     ⚠️ --done-ink 는 «진한 초록 버튼 위 글자»다 (J.J 2026-08-21 · 행동 버튼과 상태 칩을 눈으로 가른다).
        새 색이 아니다 — 라이트는 흰색, 다크는 --now-ink 와 같은 #14180c 를 그대로 쓴다.
        ⛔ 버튼 «면»에 --done-solid 를 쓰지 마라 : 라이트 #35A873 위 흰 글자는 3.00 이라 못 읽는다.
           면은 --done(#007f4d · 흰 글자 5.07) 이다
     ⚠️ 라이트는 «진한 면»과 «글자»가 다른 값이다. 진한 면 값을 흰 바탕 글자로 쓰지 마라
        (#3F76D9 4.37 · #35A873 3.00 · #EB715E 2.98 · #8A929D 3.14 — 전부 기준 미달)
     🆕 --warn 「경고」 (J.J 2026-08-22): 「경고 문구니까 주황 · 너무 경고스럽지 않게」.
     🆕 --erase-ink 「영역 지우기」 손잡이 (J.J 2026-08-22 · 사진3): 다크는 **J.J 가 준 #bfcee0 그대로**.
        ⚠️ 라이트에선 그 값이 흰 바탕에 대비 1.60 이라 «안 읽힌다» — 같은 계열로 내린 #54687f(5.73)를 쓴다.
        ⛔ --danger 로 대신하지 않는다 — 「Shopify 반영 안 됨」과 「실패」가 «같은 목록 한 줄»에
           나란히 서는데 같은 색이면 손님이 할 일이 안 갈린다(제품 목록 실측).
        ⛔ --guide 로도 대신하지 않는다 — 그건 위저드의 «안내» 금색이고 뜻이 다르다.
           (다만 두 낱말은 «같은 화면에 같이 뜨는 자리»가 아직 없어서 색이 이웃해도 안 부딪친다)
        대비 — 라이트 글자 #8a5a12 on --warn-bg 5.30 · 흰 바탕 5.91 / 다크 #dfb173 on --warn-bg 8.09
        ⚠️ `-solid` 는 «일부러» 없다. 채운 경고 단추가 아직 0곳이라 값을 지어내지 않았다.
           채우는 자리가 생기면 그때 «재서» 넣어라(흰 글자 4.5). */
  --now:#2b6acb;   --now-bg:#e8effa;  --now-ln:#c9d9f4; --now-solid:#3F76D9; --now-ink:#FFFFFF;
  --done:#007f4d;  --done-bg:#e7f5ee; --done-ln:#c6e7d8; --done-solid:#35A873; --done-ink:#FFFFFF;
  --danger:#bb4839;   --danger-bg:#fdeeec;  --danger-ln:#f9d7d2; --danger-solid:#EB715E;
  --wait:#676e79;  --wait-bg:#f1f2f3; --wait-ln:#dee0e4; --wait-solid:#8A929D;
  --guide:#8b6f00; --guide-bg:#fcf8eb; --guide-ln:#eadfae;
  --warn:#8a5a12;  --warn-bg:#fdf1e0; --warn-ln:#f2ddbd;
  --erase-ink:#54687f;

  /* ── 가족 밖 — 상태가 아니다. 손님에게 행동을 요구하지 않는다 ──
     미리보기 : 다크 핑크(311°)의 라이트 짝. 어둡게 내리면 332° 로 밀리지만 같은 계열로 읽힌다
                ⚠️ 라이트에선 «틀 안쪽을 밝게»가 안 통한다(페이지가 이미 밝다) → 띠를 어둡게 뒤집는다
     읽기 표시 : 가이드 화면 전용. 다크는 파랑을 쓰지만 라이트에서 파랑은 «지금 할 일» 색이라 못 쓴다
                → 청록 217°. 지금(285°)과 68° · 완료(158°)와 59° */
  --pv:#ab4a9c;   --pv-bg:#fdf1fb;   --pv-ln:#fbdff6;   --pv-bar:#1a1e24;
  --read:#007b8b; --read-bg:#e7f6f9; --read-ln:#c8ebf0; --read-ink:#FFFFFF;
}

/* ── 상태 칩 한 벌 ────────────────────────────────────────────────────────
   ⛔ 모양은 «하나»다. 갈리는 것은 색뿐이다 — 크기·모서리·굵기를 상태마다 바꾸지 마라.
   ⚠️ 글자를 같이 적는다(색약). 색은 빠르게 훑는 용, 글자는 확실히 아는 용. */
.chip6{ display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  border:1px solid transparent; margin-left:2px; vertical-align:2px; white-space:nowrap; }
.chip6.끝남   { color:var(--done);  background:var(--done-bg);  border-color:var(--done-ln) }
.chip6.해야   { color:var(--now);   background:var(--now-bg);   border-color:var(--now-ln) }
/* 「자동으로 해줬으니 봐야 함」 — 손님 행동은 결국 «네 차례»라 «해야»와 같은 색이다.
   자동이라는 사실은 색이 아니라 문장이 말한다 (보라 삭제 · J.J 2026-08-20) */
.chip6.봐야   { color:var(--now);   background:var(--now-bg);   border-color:var(--now-ln) }
.chip6.바뀜   { color:var(--danger);   background:var(--danger-bg);   border-color:var(--danger-ln) }
.chip6.실패   { color:var(--danger);   background:var(--danger-bg);   border-color:var(--danger-ln) }
.chip6.가이드 { color:var(--guide); background:var(--guide-bg); border-color:var(--guide-ln) }
/* 가이드 화면 읽기 표시 — 상태가 아니다 */
.chip6.알아두기{ color:var(--read);  background:var(--read-bg);  border-color:var(--read-ln) }
/* 「자동으로 채웠어요」 — 알려주기만 한다. 손님에게 «네 차례»라고 말하지 않는다 (J.J 2026-08-21).
   ⚠️ 상태 가족(지금·완료·문제·회색) 밖이라 그 넷과 안 헷갈려야 한다 → «알려주기» 계열(--read)을 쓴다.
      라이트 4.50 · 다크 8.72. 라이트의 --read 는 파랑이 아니라 청록이다 —
      라이트에서 파랑은 「지금 할 일」(--now) 자리라, 파랑을 쓰면 «할 일»과 «자동»이 같은 색이 된다. */
.chip6.자동   { color:var(--read);  background:var(--read-bg);  border-color:var(--read-ln) }
/* 안 해도 되는 것 — 색을 «안» 쓴다 */
.chip6.선택   { color:var(--wait);  background:transparent;     border-color:var(--wait-ln) }
/* 지금 여기 — 화면에서 «채워지는 것»은 이것 하나뿐이다 */
/* ⚠️ 칩·번호는 «작은 글자»(11~12px)라 기준이 4.5 다. 라이트의 진한 면(#3F76D9) 위 흰 글자는 4.37 로 모자란다.
   그래서 채우는 값은 «글자용»(--now)을 쓴다 — 흰 글자 5.22. 다크는 --now 와 --now-solid 가 같은 값이라 그대로다.
   ⛔ --now-solid 는 «큰 버튼»(14px/700 이상) 자리다. 작은 것에 쓰지 마라. */
.chip6.지금   { color:var(--now-ink); background:var(--now); border-color:var(--now) }

/* ── 번호 알 ── 모양 하나, 색만 상태 (번호는 «위치»라 안 바뀐다) */
.num6{ width:23px; height:23px; flex:none; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums; border:1.5px solid var(--wait-ln); color:var(--wait); }
.num6.끝남 { color:var(--done); background:var(--done-bg); border-color:var(--done-ln) }
.num6.해야 { color:var(--now);  background:var(--now-bg);  border-color:var(--now-ln) }
.num6.봐야 { color:var(--now);  background:var(--now-bg);  border-color:var(--now-ln) }
.num6.바뀜 { color:var(--danger);  background:var(--danger-bg);  border-color:var(--danger-ln) }
.num6.지금 { color:var(--now-ink); background:var(--now);  border-color:var(--now) }
/* 「이미 열어본 단계」 — 편집화면 왼쪽 레일 전용 (J.J 2026-08-21).
   ⛔ «끝났다»가 아니다. «봤다»뿐이다 — 그래서 체크로 바꾸지 않고 번호를 그대로 둔다.
   지금 여기(채움)와 «채움/옅은 면»으로 갈린다. 색을 새로 만들지 않는다 — 지금색 한 가족이다. */
.num6.봄   { color:var(--now);  background:var(--now-bg);  border-color:var(--now-ln) }