/* ══════════════════════════════════════════════════════════════════════
   루첼라 생태계 공용 웹 테마 — 낮 / 밤
   정본: shared-specs/web-theme/  ·  운영자 지시 2026-08-16
        *"모든 플젝의 웹 페이지에 낮과 밤, 그리고 자동 모드를 추가하세요."*

   ⚠️ 이 파일을 프로젝트마다 손으로 고치지 않는다. 정본은 여기 하나다.
      배포본은 `python shared-specs/web-theme/sync_theme.py` 가 복사한다.
      (검사: `--check` — 어긋난 사본을 찾는다)

   ## 색의 뿌리

   `L1_Lucela_GilEseo` 낮/밤 팔레트를 생태계 표준으로 승격했다(운영자 확정).
   길에서는 **밖에서 쓰는 앱**이라 시간대별 배경을 이미 실전에서 검증했다 —
   새로 짓는 것보다 도는 것을 가져오는 편이 낫다.

   ⚠️ 길에서에는 `일몰(sunset)` 이 하나 더 있다. **가져오지 않았다** —
      그건 밖에서 해 지는 걸 보며 쓰는 앱의 사정이고,
      운영자 지시도 *"낮과 밤, 그리고 자동"* 세 가지였다.
      길에서는 자기 일몰 테마를 계속 쓴다(여기 정본에 묶이지 않는다).

   ## ⚠️⚠️ 밤 색을 따로 두는 이유 — 실측

   낮에 맞춘 강조색을 밤 배경에 그대로 대면 이렇게 된다(2026-08-16 측정):

        잉크 #16233A → 1.0   틸 #0B6660 → 2.2
        앰버 #8A5309 → 2.4   정상 #1B6B45 → 2.3

   기준은 4.5 다. **전부 안 보인다.** "다크 모드 = 배경만 어둡게" 로 하면
   글자가 통째로 사라진다 — 두 벌을 각각 실측해서 넣는다.
   검사: `python shared-specs/web-theme/theme_contrast_audit.py`
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️⚠️ **정본은 `--lc-rgb-*` (공백으로 나눈 RGB 채널)** 이고,
   아래 `--lc-*` 는 거기서 파생한 편의 별칭이다. 왜 두 벌인가 —

     · 정적 HTML 은 `color: var(--lc-text)` 가 편하다
     · **Tailwind 는 채널이 있어야 투명도 표기가 산다** —
       `bg-steel-600/50` 은 `rgb(var(--x) / 0.5)` 로 컴파일되는데,
       변수에 `#BFD2E8` 이 들어 있으면 이 문법이 **조용히 깨진다**(투명도 무시).
       L0 포털만 `/25`~`/90` 을 20곳 넘게 쓴다.

   ⚠️ 값을 두 군데 적지 않는다. 채널만 고치면 hex 별칭이 따라온다. */
:root {
  color-scheme: light;

  /* ── 배경 3단 ──
     ⚠️ 가장 밝은 `--bg-lift` 를 **넓은 면에 깔지 않는다.**
        운영자 지적(2026-08-16): *"배경색이 너무 밝아요."*
        넓은 면 = base·mid, 밝은 것은 카드처럼 좁은 면에. */
  --lc-rgb-bg-lift: 238 246 255;   /* #EEF6FF 카드·패널 (광도 0.913) */
  --lc-rgb-bg-mid:  230 240 251;   /* #E6F0FB 화면 위쪽   (0.861) */
  --lc-rgb-bg-base: 220 233 247;   /* #DCE9F7 화면 아래쪽 (0.802) */
  --lc-rgb-bg-hero: 225 236 249;   /* #E1ECF9 3D·캔버스가 읽는 값 */

  /* ── 글자 ── (길에서 낮 본문색 계열 · 괄호 안은 가장 어두운 배경 대비) */
  --lc-rgb-ink:     11 27 46;      /* #0B1B2E 제목      14.1 */
  --lc-rgb-text:    23 48 77;      /* #17304D 강조 본문 10.9 */
  --lc-rgb-body:    42 68 96;      /* #2A4460 본문       8.1 */
  --lc-rgb-muted:   68 88 111;     /* #44586F 보조       5.9 */
  --lc-rgb-faint:   82 101 124;    /* #52657C 작은 보조  4.9 */

  /* ── 선 ──
     ⚠️ 대비 1.25. **장식 전용**이다 — 뜻을 전달하는 견본·테두리에 쓰지 말 것
        (그러면 안 보인다. 2026-08-16 에 실제로 그 사고가 났다). */
  --lc-rgb-line:    191 210 232;   /* #BFD2E8 */
  --lc-rgb-line-2:  169 192 220;   /* #A9C0DC 조금 진한 구분선 */

  /* ── 강조 ──
     ⭐ **브랜드색과 상태색을 섞지 않는다.** 브랜드가 초록이면 화면의 모든 초록이
        "정상"으로 읽혀 진짜 상태를 못 읽는다. 전문 관제 도구의 기본 규율이다. */
  --lc-rgb-brand:    22 35 58;     /* #16233A 브랜드·주요 버튼(흰 글씨 15.7) */
  --lc-rgb-brand-on: 255 255 255;  /* 그 위 글자 */
  --lc-rgb-accent:   11 102 96;    /* #0B6660 링크·포커스·강조 */
  --lc-rgb-accent-h: 8 79 74;      /* #084F4A ⚠️ hover 는 **더 어둡게**(밝게는 다크 습관) */

  /* ── 상태 4색 (상태 전용) ── */
  --lc-rgb-ok:      27 107 69;     /* #1B6B45 */
  --lc-rgb-warn:    138 83 9;      /* #8A5309 */
  --lc-rgb-bad:     180 35 24;     /* #B42318 */
  --lc-rgb-idle:    90 107 128;    /* #5A6B80 ⚠️ '안 띄움'을 빨강으로 칠하지 않는다.
                                        늘 빨간 화면은 아무도 안 본다. */

  --lc-shadow: 0 1px 3px rgba(22, 35, 58, .08), 0 6px 18px rgba(22, 35, 58, .06);
}

/* ── 편의 별칭 — ⚠️ 여기 값을 직접 고치지 말 것. 위 채널이 정본이다.
   테마가 바뀌면 채널만 바뀌고 이 별칭은 자동으로 따라온다(선언이 `:root` 한 번뿐이라
   밤 블록에서 다시 적을 필요가 없다). */
:root {
  --lc-bg-lift: rgb(var(--lc-rgb-bg-lift));
  --lc-bg-mid:  rgb(var(--lc-rgb-bg-mid));
  --lc-bg-base: rgb(var(--lc-rgb-bg-base));
  --lc-bg-hero: rgb(var(--lc-rgb-bg-hero));
  --lc-ink:     rgb(var(--lc-rgb-ink));
  --lc-text:    rgb(var(--lc-rgb-text));
  --lc-body:    rgb(var(--lc-rgb-body));
  --lc-muted:   rgb(var(--lc-rgb-muted));
  --lc-faint:   rgb(var(--lc-rgb-faint));
  --lc-line:    rgb(var(--lc-rgb-line));
  --lc-line-2:  rgb(var(--lc-rgb-line-2));
  --lc-brand:    rgb(var(--lc-rgb-brand));
  --lc-brand-on: rgb(var(--lc-rgb-brand-on));
  --lc-accent:   rgb(var(--lc-rgb-accent));
  --lc-accent-h: rgb(var(--lc-rgb-accent-h));
  --lc-ok:   rgb(var(--lc-rgb-ok));
  --lc-warn: rgb(var(--lc-rgb-warn));
  --lc-bad:  rgb(var(--lc-rgb-bad));
  --lc-idle: rgb(var(--lc-rgb-idle));
}

/* ══ 밤 ══
   ⚠️ 선택자를 `[data-theme="night"]` 로 **body 가 아니라 html 에도** 걸리게 둔다 —
      프레임워크마다 속성을 어디 붙이는지 다르다(Next 는 html, 정적 HTML 은 body).
      한쪽만 쓰면 어느 프로젝트에선 조용히 안 먹는다. */
/* ⚠️⚠️ 밤 값은 **채널만** 덮어쓴다. 별칭(`--lc-text` 등)은 `:root` 에서 한 번
   선언됐고 채널을 참조하므로 자동으로 따라온다 — 여기서 다시 적으면
   두 벌이 되고, 언젠가 한쪽만 고쳐서 어긋난다.

   ⚠️ 선택자를 `:root` 와 `body` 둘 다에 건다 — 프레임워크마다 속성을 어디 붙이는지
      다르다(Next 는 html, 정적 HTML 은 body). 한쪽만 쓰면 어느 프로젝트에선 조용히 안 먹는다. */
:root[data-theme="night"],
body[data-theme="night"] {
  color-scheme: dark;

  --lc-rgb-bg-lift: 26 37 64;      /* #1A2540 */
  --lc-rgb-bg-mid:  22 32 58;      /* #16203A */
  --lc-rgb-bg-base: 17 26 48;      /* #111A30 */
  --lc-rgb-bg-hero: 19 29 54;      /* #131D36 */

  --lc-rgb-ink:   255 255 255;
  --lc-rgb-text:  238 244 255;     /* #EEF4FF 13.8 */
  --lc-rgb-body:  215 226 245;     /* #D7E2F5 */
  --lc-rgb-muted: 166 183 207;     /* #A6B7CF  7.4 */
  --lc-rgb-faint: 143 163 191;     /* #8FA3BF */

  --lc-rgb-line:   43 58 87;       /* #2B3A57 */
  --lc-rgb-line-2: 58 76 112;      /* #3A4C70 */

  /* ⚠️ 밤엔 브랜드가 **밝아진다**(검정 글씨 10.7). 낮 값 #16233A 를 그대로 두면
     밤 배경 대비 **1.0** — 통째로 사라진다(2026-08-16 실측). */
  --lc-rgb-brand:    159 198 255;  /* #9FC6FF  8.7 */
  --lc-rgb-brand-on: 11 18 32;     /* #0B1220 */
  --lc-rgb-accent:   95 217 203;   /* #5FD9CB  8.9 */
  --lc-rgb-accent-h: 143 233 222;  /* #8FE9DE ⚠️ 밤엔 hover 가 밝아진다 — 낮과 반대 */

  --lc-rgb-ok:   89 214 160;       /* #59D6A0  8.4 */
  --lc-rgb-warn: 240 178 82;       /* #F0B252  8.1 */
  --lc-rgb-bad:  255 139 132;      /* #FF8B84  6.7 */
  --lc-rgb-idle: 132 150 180;      /* #8496B4 */

  --lc-shadow: 0 1px 3px rgba(0, 0, 0, .40), 0 6px 20px rgba(0, 0, 0, .30);
}

/* ══ 🌇 일몰 ══ (운영자 2026-08-16 — "자동/낮/일몰/밤")
   ⚠️ 길에서 일몰 팔레트를 생태계 표준으로 승격했다. 밖에서 해 지는 걸 보며 쓰는 앱이
      실전에서 검증한 값이다 — 새로 짓는 것보다 도는 것을 가져오는 편이 낫다.
   ⚠️ 다만 길에서와 달리 **가장 밝은 색을 넓은 면에 깔지 않는다**(눈부심 지적 반영).
   ⚠️ 낮 색을 그대로 쓰면 안 된다 — 배경이 따뜻해져 청록 계열이 탁해진다.
      강조를 **보라·구릿빛**으로 옮겼다(전부 실측). */
:root[data-theme="sunset"], body[data-theme="sunset"] {
  color-scheme: light;

  --lc-rgb-bg-lift: 246 234 223;   /* #F6EADF */
  --lc-rgb-bg-mid:  239 226 216;   /* #EFE2D8 */
  --lc-rgb-bg-base: 228 218 210;   /* #E4DAD2 */
  --lc-rgb-bg-hero: 234 223 213;   /* #EADFD5 */

  --lc-rgb-ink:   46 42 63;        /* #2E2A3F 10.0 */
  --lc-rgb-text:  58 53 82;        /* #3A3552  8.4 */
  --lc-rgb-body:  74 68 96;        /* #4A4460  6.7 */
  --lc-rgb-muted: 92 85 112;       /* #5C5570  5.1 */
  --lc-rgb-faint: 98 92 110;       /* #625C6E  4.7 — ⚠️ 길에서 #6B6479 는 4.10 이라 한 단계 진하게 */

  --lc-rgb-line:   214 200 188;    /* #D6C8BC 장식 전용 */
  --lc-rgb-line-2: 196 179 165;    /* #C4B3A5 */

  --lc-rgb-brand:    74 63 115;    /* #4A3F73 6.8 · 흰 글씨 9.3 */
  --lc-rgb-brand-on: 255 255 255;
  --lc-rgb-accent:   122 74 46;    /* #7A4A2E 5.4 구릿빛 */
  --lc-rgb-accent-h: 94 55 34;     /* #5E3722 7.5 — 밝은 계열이라 hover 는 더 어둡게 */

  --lc-rgb-ok:   61 107 69;        /* #3D6B45 */
  --lc-rgb-warn: 138 83 9;         /* #8A5309 */
  --lc-rgb-bad:  168 50 36;        /* #A83224 */
  --lc-rgb-idle: 110 106 114;      /* #6E6A72 */

  --lc-shadow: 0 1px 3px rgba(74, 63, 115, .10), 0 6px 18px rgba(74, 63, 115, .07);
}

/* ⚠️⚠️ **낮을 직접 고른 경우** — 아무 값도 안 바꾼다. `:root` 기본이 곧 낮이다.
   그런데 이 빈 블록이 **꼭 있어야 한다.** 없으면 `data-theme="day"` 라는 표시가
   아무 의미도 없어 보여서 다음 사람이 JS 쪽 `setAttribute("day")` 를 지운다 —
   그 순간 아래 미디어 쿼리가 살아나 **OS 다크가 사용자의 선택을 이긴다**
   (2026-08-16 실제로 그 사고가 났다: *"낮인데 어두워"*).
   집행은 아래 `:root:not([data-theme])` 가 한다 — `day` 가 박혀 있으면 안 걸린다. */
:root[data-theme="day"], body[data-theme="day"] { color-scheme: light; }

/* ⚠️ 시스템이 어두운데 사용자가 **아무것도 안 골랐으면**(자동 + 낮) 밤으로 간다.
   ⚠️ 반대로 사용자가 골랐으면 이 규칙은 걸리지 않아야 한다 —
      그래서 스크립트가 고른 값을 **반드시 `data-theme` 으로 박는다**(`paint()` 참조).
      "낮이니까 속성을 지우자"는 최적화가 바로 그 사고의 원인이었다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --lc-rgb-bg-lift: 26 37 64;  --lc-rgb-bg-mid: 22 32 58;
    --lc-rgb-bg-base: 17 26 48;  --lc-rgb-bg-hero: 19 29 54;
    --lc-rgb-ink: 255 255 255;   --lc-rgb-text: 238 244 255;
    --lc-rgb-body: 215 226 245;  --lc-rgb-muted: 166 183 207;
    --lc-rgb-faint: 143 163 191;
    --lc-rgb-line: 43 58 87;     --lc-rgb-line-2: 58 76 112;
    --lc-rgb-brand: 159 198 255; --lc-rgb-brand-on: 11 18 32;
    --lc-rgb-accent: 95 217 203; --lc-rgb-accent-h: 143 233 222;
    --lc-rgb-ok: 89 214 160;     --lc-rgb-warn: 240 178 82;
    --lc-rgb-bad: 255 139 132;   --lc-rgb-idle: 132 150 180;
    --lc-shadow: 0 1px 3px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.30);
  }
}

/* ⚠️ 배경을 **명시적으로** 칠한다. 투명하게 두면 호스트 배경이 비쳐
   테마가 반쯤 적용된 화면이 된다. */
body {
  background-color: var(--lc-bg-base);
  color: var(--lc-body);
  /* ⭐ 한국어 줄바꿈 — 어절 단위로만(생태계 §15) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ══ 테마 고르개 — ⭐ 아이콘 하나 + 펼침 (운영자 2026-08-16) ══

   ⚠️ 처음엔 버튼 3개를 나란히 뒀는데 **자리를 많이 먹었다.**
      운영자 지시: *"아이콘(해/달/해질녘)으로 하나만 배치하고 선택하면 자동/낮/일몰/밤"*.
      네 가지가 되면서 세그먼트로는 더 안 맞는다 — 눌러서 펼치는 쪽으로 바꾼다.

   ⚠️ 자리는 **주 메뉴 왼쪽**. `#themeSwitch` 를 그 자리에 두면 거기 붙고,
      없으면 오른쪽 위에 떠 있는 형태로 스스로 만든다(어느 화면에서나 찾을 수 있게). */
.lc-theme { position: relative; display: inline-block; line-height: 1; }

/* 떠 있는 형태 — 마운트 지점이 없는 화면용 */
.lc-theme.lc-float { position: fixed; top: 12px; right: 12px; z-index: 9999; }

.lc-theme-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; padding: 7px 10px; border-radius: 999px;
  /* ⚠️ 테두리를 `--lc-line`(대비 1.2)으로 두면 안 보인다 — 한 단계 진한 쪽 */
  border: 1px solid var(--lc-line-2);
  /* ⚠️⚠️ **헤더에 박힐 땐 조용해야 한다.** 채운 배경 + 그림자를 주면 밋밋한 텍스트
     메뉴(홈·지식센터·로그인) 사이에서 **혼자 붕 떠 보인다**(운영자 2026-08-19, BioLinc
     홈: "튀어나온 느낌"). → 배경 투명 · 그림자 없음. 테두리만 남겨 «찾을 수는» 있게.
     ⭐ 단 떠 있는 형태(`.lc-float`)는 아래에서 다시 채운다 — 그건 내용 위에 떠서
     보여야 하니 배경·그림자가 있어야 한다(정반대 사정). */
  background: transparent; color: var(--lc-muted);
  font: inherit; font-size: .82rem; font-weight: 600;
  transition: color .15s, border-color .15s, background .15s;
}
.lc-theme-btn:hover {
  color: var(--lc-text); border-color: var(--lc-accent);
  background: rgb(var(--lc-rgb-bg-mid) / .6);   /* hover 때만 살짝 채워 눌리는 느낌 */
}
/* 떠 있는 형태(마운트 지점 없는 화면)의 버튼은 **채우고 그림자**를 준다 —
   내용 위에 얹히므로 조용하면 안 보인다. */
.lc-theme.lc-float .lc-theme-btn {
  background: var(--lc-bg-lift); box-shadow: var(--lc-shadow);
}
/* ⚠️ 키보드 초점을 지우지 않는다 — 마우스 없이 쓰는 사람이 길을 잃는다 */
.lc-theme-btn:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 2px; }
.lc-theme-ico { font-size: 1.02rem; line-height: 1; }
/* 좁은 화면에선 글자를 접고 아이콘만 — ⚠️ 지우지 않고 **읽어 주는 이름**은 남긴다 */
.lc-theme-txt { white-space: nowrap; }
@media (max-width: 560px) { .lc-theme-txt { display: none; } }

.lc-theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000;
  min-width: 132px; padding: 5px; border-radius: 12px;
  border: 1px solid var(--lc-line-2); background: var(--lc-bg-lift);
  box-shadow: var(--lc-shadow);
}
.lc-theme-menu[hidden] { display: none; }
.lc-theme-menu button {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; color: var(--lc-body);
  font: inherit; font-size: .84rem; text-align: left;
}
.lc-theme-menu button:hover { background: var(--lc-bg-mid); color: var(--lc-ink); }
.lc-theme-menu button[aria-checked="true"] {
  background: var(--lc-brand); color: var(--lc-brand-on); font-weight: 700;
}
.lc-theme-menu button:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: -2px; }

/* ⚠️ 움직임을 줄여 달라고 한 사람에겐 전환을 끈다(멀미·전정 장애) */
@media (prefers-reduced-motion: reduce) {
  .lc-theme-btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ③ 공용 하단(회사 정보) — ⛔ **여기 없다.** `lucela-footer.js` 안에 있다.

   ⚠️⚠️ 2026-08-18 실측: 길에서(3062)가 하단 **HTML 은 그렸는데 CSS 가 없어서**
      브라우저 기본 파란 링크로 나왔다(밤 테마 대비 1.62). `lucela-footer.js` 만
      배선하고 `lucela-theme.css` 는 안 부른 화면이었다.

   ⭐ 그래서 **모양을 스크립트 안으로 옮겼다** — 하단은 파일 하나가 통째로 갖는다.
      배선을 반만 해도 반만 나오는 일이 없다.
   ══════════════════════════════════════════════════════════════════════ */