/* ═══════════════════════════════════════════════════════════════════════
   여러 화면이 같이 쓰는 부품 (docs/CLEANUP.md 3-04 · 3-12)

   화면 CSS(page/*)에 같은 것을 따로 적지 않는다. 모든 화면이 싣는다
   (views/partials/head-css.ejs — bootstrap·app 뒤, 화면 CSS 뒤).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 색 (3-14 다크 모드) ───────────────────────────────────────────────
   우리 CSS 는 색을 글자로 박지 않고 이 이름을 쓴다. 밝을 때 값은 전에 박혀 있던 색 그대로라
   밝은 화면은 한 점도 바뀌지 않았다 (화면 견주기로 확인). 어두울 때 값은 Velzon 의 다크
   팔레트(bootstrap.min.css 의 [data-bs-theme=dark])에 맞췄다 — 상단바·카드와 어울리게.
   새 규칙을 쓸 때도 #fff · #405189 같은 글자 대신 여기 이름을 쓴다. */
:root, [data-bs-theme=light] {
    --ls-primary: #405189;        /* 켜진 칩·단추의 바탕 */
    --ls-accent: #405189;         /* 글자·테두리로 쓰는 대표색 (링크처럼) */
    --ls-primary-soft: #e8edf9;   /* 대표색을 옅게 깐 바탕 */
    --ls-surface: #fff;           /* 카드·상자·입력칸 바탕 */
    --ls-surface-rgb: 255 255 255; /* 반투명 바탕 — rgb(var(--ls-surface-rgb) / .9) */
    --ls-soft: #f8f9fa;           /* 옅은 바탕 — 표 머리·칩 */
    --ls-soft-2: #f3f6f9;         /* 조금 더 짙은 옅은 바탕 */
    --ls-border: #e9ebec;         /* 기본 테두리·구분선 */
    --ls-border-2: #dee2e6;       /* 조금 짙은 테두리 */
    --ls-border-3: #a2a9b1;       /* 영웅 목록 표 (옛 위키 모양) */
    --ls-text: #212529;
    --ls-text-2: #495057;         /* 칩·단추 글자 */
    --ls-muted: #878a99;          /* 흐린 글자 */
    --ls-muted-2: #6c757d;
    --ls-muted-3: #adb5bd;
    --ls-warn-bg: #fffaf0;        /* 작업중 · 알림 바탕 */
    --ls-warn-bg-2: #fff3e2;
    --ls-warn-text: #493400;      /* 노란 딱지 위 글자 — 딱지는 어두워도 노랗다 */
    --ls-warn-text-2: #b06a00;    /* 노란 바탕 없이 쓰는 경고 글자 */
    --ls-ok-bg: #e6f5ec;
    --ls-ok-text: #0f5132;
    --ls-bad-bg: #fff5f5;
    --ls-bad-text: #b42318;
    --ls-th-bg: #F9ECE2;          /* 영웅 목록 거르기 표의 머리 칸 */
    --ls-th-text: #6E4135;
    --ls-focus: #2b3a72;          /* 키보드 초점 테두리 (4-10) — 대표색보다 짙게 */
    --ls-focus-halo: rgb(255 255 255 / .85);  /* 테두리 바깥 테 — 그림 위에서도 보이게 */
}
[data-bs-theme=dark] {
    --ls-primary: #405189;
    --ls-accent: #a3b1e0;         /* 어두운 바탕에서 읽히게 밝힌 대표색 */
    --ls-primary-soft: rgba(64, 81, 137, .28);
    --ls-surface: #212529;        /* Velzon 다크의 카드 바탕 (--vz-secondary-bg) */
    --ls-surface-rgb: 33 37 41;
    --ls-soft: #2a2d31;           /* Velzon 다크의 --vz-tertiary-bg */
    --ls-soft-2: #262a2f;
    --ls-border: #32383e;         /* Velzon 다크의 --vz-border-color */
    --ls-border-2: #3c4248;
    --ls-border-3: #4b525a;
    --ls-text: #e9ecef;
    --ls-text-2: #ced4da;         /* Velzon 다크의 본문 글자 */
    --ls-muted: #9599ad;
    --ls-muted-2: #adb5bd;
    --ls-muted-3: #6c757d;
    --ls-warn-bg: rgba(247, 184, 75, .10);
    --ls-warn-bg-2: rgba(247, 184, 75, .16);
    --ls-warn-text: #493400;
    --ls-warn-text-2: #f7b84b;
    --ls-ok-bg: rgba(10, 179, 156, .14);
    --ls-ok-text: #6ee7c7;
    --ls-bad-bg: rgba(240, 101, 72, .12);
    --ls-bad-text: #fda29b;
    --ls-th-bg: #3a2f28;
    --ls-th-text: #f3d2bd;
    --ls-focus: #c3cffb;
    --ls-focus-halo: rgb(0 0 0 / .7);
}

/* ── 키보드 초점 (4-10) ────────────────────────────────────────────────
   Tab 으로 옮겨 다닐 때 지금 어디에 있는지 보이게 한다. 브라우저가 기본으로 그려 주는데
   Velzon 이 `button, a { outline: none !important }`(app.min.css) 로 사이트 전체에서 지웠다.
   bootstrap 이 대신 쓰는 그림자는 .btn 계열만 챙기고, 우리가 만든 단추(.ed-btn · .eq-btn ·
   .soldier-card · 탭들)와 모든 링크는 아무 표시도 없었다 — 559곳 중 130곳.

   !important 는 위 규칙이 !important 라서 어쩔 수 없다. 두 겹인 이유는 영웅 카드처럼
   그림 위에 놓인 것 때문이다 — 안쪽 테두리 색만으로는 어두운 그림에 묻힌다.

   :focus-visible 이라 마우스로 누를 때는 안 뜬다. 브라우저가 키보드로 왔을 때만 붙인다 —
   마우스만 쓰는 사람 화면은 한 점도 바뀌지 않는다. */
:where(a, button, input, select, textarea, summary, [role="button"],
       [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
    outline: 2px solid var(--ls-focus) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--ls-focus-halo);
}

/* ── 저장 줄 ───────────────────────────────────────────────────────────
   편집 화면의 제목 · 상태 · [임시저장] [공개 저장] 한 줄. 위에 붙어 따라온다 —
   영웅 편집에서 요청받은 '저장 줄 고정'(050)을 모든 편집 화면이 같게 쓴다.
   전에는 영웅은 위 · 용병은 아래 · PVP 는 안 붙음으로 제각각이었다 (3-04).
   단추: 임시저장/비공개로 내리기 = btn-outline-secondary, 저장/공개 저장 = btn-primary */
.save-bar {
    position: sticky;
    top: var(--sticky-top, 70px);   /* 상단바 + 넓은 화면의 가로 메뉴 아래 (custom.min.css) */
    z-index: 20;
    background: var(--ls-surface);
    padding: .5rem .75rem;
    margin-left: -.75rem;
    margin-right: -.75rem;
    border-bottom: 1px solid var(--ls-border);
    box-shadow: 0 .25rem .5rem rgba(30, 32, 39, .06);
}
/* 좁은 화면에서는 붙이지 않는다 — 폰에서 화면을 다 잡아먹는다 */
@media (max-width: 767.98px) {
    .save-bar { position: static; box-shadow: none; }
}

/* ── 어두울 때만 손보는 것 (3-14) ─────────────────────────────────────── */
/* 옅은 딱지(badge bg-light) — Velzon 이 어두울 때 바탕을 어둡게 바꾸는데 글자(text-dark ·
   text-primary)는 그대로라 스킬의 '유형 · 쿨타임' 딱지 같은 것이 안 보였다 */
[data-bs-theme=dark] .bg-light.text-dark { color: var(--ls-text-2) !important; }
[data-bs-theme=dark] .bg-light.text-primary { color: var(--ls-accent) !important; }

/* 게임 글의 색 — 스킬·특성 설명은 <font color="blue"> 처럼 원본이 색을 정해 온다 (DB 에
   blue 5천여 · green 650 · purple 1천여 곳). 흰 바탕에 맞춘 짙은 색이라 어두운 바탕에서는
   묻힌다. 같은 색의 밝은 쪽으로만 옮긴다 — 뜻(빨강 = 수치, 초록 = 회복 …)은 그대로다. */
[data-bs-theme=dark] font[color="blue" i], [data-bs-theme=dark] font[color="#0000ff" i],
[data-bs-theme=dark] font[color="#00008b" i], [data-bs-theme=dark] font[color="#0040d6" i],
[data-bs-theme=dark] font[color="#000044" i], [data-bs-theme=dark] font[color="navy" i] { color: #82a8ff; }
[data-bs-theme=dark] font[color="green" i], [data-bs-theme=dark] font[color="#008000" i] { color: #62d27f; }
[data-bs-theme=dark] font[color="purple" i], [data-bs-theme=dark] font[color="#663399" i],
[data-bs-theme=dark] font[color="#7f00ff" i], [data-bs-theme=dark] font[color="#800080" i] { color: #c7a0ff; }
[data-bs-theme=dark] font[color="red" i], [data-bs-theme=dark] font[color="#ff0000" i] { color: #ff6b6b; }
[data-bs-theme=dark] font[color="#83364f" i], [data-bs-theme=dark] font[color="#dc143c" i] { color: #f0819f; }
[data-bs-theme=dark] font[color="brown" i] { color: #d9a07a; }

/* ── 효과 글의 색 (2026-09-25 사용자 결정) ────────────────────────────────
   숫자는 빨강 · 재행동 같은 부차 효과는 파랑 · 회복은 짙은 초록.
   말은 core.js 의 FX_SUB · FX_HEAL 이 정하고(LS.paintEffect), 색은 여기서 정한다.
   장비 목록·팝업과 영웅 상세(스킬·특성·전용 장비)가 같이 쓴다.
   빨강은 게임이 글에 넣어 둔 것과 같은 crimson 이다. 어두운 밝기에서는
   같은 색이 바탕에 묻혀 셋 다 한 단계 밝힌다. */
.fx-num  { color: #dc143c; }
.fx-sub  { color: #1257a6; }
.fx-heal { color: #14663a; }
[data-bs-theme=dark] .fx-num  { color: #ff8095; }
[data-bs-theme=dark] .fx-sub  { color: #8ab6ff; }
[data-bs-theme=dark] .fx-heal { color: #63d69e; }

/* ── 알림 설정 모달 (211) ────────────────────────────────────────────── */
.nt-list { display: flex; flex-direction: column; gap: .25rem; }
.nt-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .6rem; border-radius: .4rem; cursor: pointer;
}
.nt-row:hover { background: var(--vz-light); }
.nt-row input { margin-top: .2rem; flex: 0 0 auto; }
.nt-row small { line-height: 1.35; }

/* ── 댓글 (213) — 자리를 가리지 않는 한 벌 (common/comments.js) ───────── */
.cm-box { margin-top: 1rem; border-top: 1px solid var(--vz-border-color); padding-top: .75rem; }
.cm-title { font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.cm-title .cm-n { color: var(--vz-secondary-color); font-weight: 500; }
.cm-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cm-row { padding: .5rem .6rem; border-radius: .4rem; background: var(--vz-light); }
.cm-hidden { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
/* 머리 아이콘이 들어오며 baseline → center 로 (244) — 동그라미가 글자 밑으로 처졌다 */
.cm-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.cm-who { font-size: .85rem; }
.cm-when { font-size: .75rem; color: var(--vz-secondary-color); }
.cm-acts { margin-left: auto; display: flex; gap: .35rem; }
.cm-act {
  border: 0; background: none; padding: 0; font-size: .75rem;
  color: var(--vz-secondary-color); cursor: pointer;
}
.cm-act:hover { text-decoration: underline; }
.cm-danger:hover { color: var(--vz-danger); }
/* 글자만 받으므로 줄바꿈은 CSS 가 살린다 — <br> 로 바꾸면 HTML 을 만드는 것이 된다 */
.cm-body { font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.cm-note { font-size: .85rem; padding: .4rem 0; }
.cm-write, .cm-edit { display: flex; flex-direction: column; gap: .4rem; }
.cm-write-foot { display: flex; align-items: center; gap: .5rem; }
.cm-write-foot .cm-count { font-size: .75rem; margin-right: auto; }
.cm-write-foot .btn { margin-left: auto; }
.cm-write-foot .cm-cancel { margin-left: auto; }
.cm-write-foot .cm-save { margin-left: 0; }
.cm-msg:empty { display: none; }

/* ── 폭 유틸 — 인라인 style="width:…" 을 대신한다 (CSP style-src-attr, 2026-09-29) ──
   엄격한 CSP 에서 style= 속성을 막으려고 화면 62군데의 인라인 폭을 여기로 옮겼다.
   이름은 값 그대로다: .w-9-5r = 9.5rem. 새 폭이 필요하면 여기 한 줄 더한다 —
   인라인으로 되돌리면 test/csp.test.js 가 깨진다.
   auto · 100% 는 부트스트랩의 .w-auto · .w-100 을 그대로 쓴다. */
.w-2-2r { width: 2.2rem; }   .w-3r   { width: 3rem; }     .w-3-2r { width: 3.2rem; }
.w-3-5r { width: 3.5rem; }   .w-4r   { width: 4rem; }     .w-4-5r { width: 4.5rem; }
.w-4-6r { width: 4.6rem; }   .w-5r   { width: 5rem; }     .w-6r   { width: 6rem; }
.w-6-5r { width: 6.5rem; }   .w-7r   { width: 7rem; }     .w-7-5r { width: 7.5rem; }
.w-8r   { width: 8rem; }     .w-9r   { width: 9rem; }     .w-9-5r { width: 9.5rem; }
.w-11r  { width: 11rem; }    .w-12r  { width: 12rem; }    .w-13r  { width: 13rem; }
.w-14r  { width: 14rem; }    .w-15r  { width: 15rem; }    .w-16r  { width: 16rem; }
.w-22r  { width: 22rem; }    .w-24r  { width: 24rem; }
.w-1px  { width: 1px; }
.h-10px { height: 10px; }    .h-12px { height: 12px; }

/* 하나짜리 — 유틸로 두기엔 뜻이 붙어 있는 것들 */
.hl-label-in { flex: 1 1 14rem; }              /* 대문 링크 편집 — 이름 칸 */
.hl-url-in   { flex: 2 1 18rem; }              /* 〃 주소 칸 (이름보다 넓게) */
.sticky-side { top: calc(var(--sticky-top, 70px) + 1rem); }  /* 설정 화면 옆 카드 */
.box-scroll-220 { max-height: 220px; overflow: auto; }       /* 영웅 편집의 용병 상자 */
.icon-3-5r { font-size: 3.5rem; line-height: 1; }            /* 메일 보냄 아이콘 */

/* ── 가로 메뉴가 좁은 화면에서 글자를 세로로 쌓던 것 (2026-10-01 제보) ──────
   디자인 맡은 분이 디자인 편집기 미리보기에서 보고 알려 줬는데, 미리보기만의
   문제가 아니라 **1920px 미만의 진짜 화면이 다 그랬다** (1500 · 1280 · 1100 에서 확인).

   `#navbar-nav` 는 flex 한 줄이고 항목이 열이다. 다 못 들어가면 항목이 줄어들고
   (`flex: 0 1 auto`), 이름표가 22px 까지 눌려 '업데이트스케줄' 이 한 자씩 세로로 쌓였다.

   이름표는 안 쪼개고, 대신 **줄을 바꾼다**. 폰은 서랍으로 열리므로(mobile.css) 건드리지 않는다. */
@media (min-width: 768px) {
    [data-layout="horizontal"] #navbar-nav { flex-wrap: wrap; }
    [data-layout="horizontal"] #navbar-nav .nav-link > span { white-space: nowrap; }
    /* 접힌 줄만큼 본문을 더 내려 준다 (2026-10-01 제보: "메뉴가 내려와서 메인 먹는건").
       메뉴는 고정이라 흐름에서 빠져 있고, 틀은 한 줄(60px)인 셈 치고 75px 만 비워 뒀다.
       높이는 core.js 가 재서 --ls-hmenu-h 로 준다 — 없으면 전과 같은 자리다. */
    [data-layout="horizontal"] .page-content { padding-top: calc(var(--ls-hmenu-h, 60px) + 15px); }
}

/* 메뉴 아래에 덧붙이는 조각 — 디자인 편집기 공통 탭의 'HTML — 메뉴 아래' (page-design.js 의 menu.html).
   비어 있는 날이 대부분이므로 **빈 칸은 자리를 안 먹게** 한다. 꾸미는 것은 CSS 칸에서 한다
   (조각 안의 style= 은 CSP 가 막는다 — class 를 쓴다). */
.pg-menu-html:empty { display: none; }
.pg-menu-html { padding: 0.5rem 1.5rem 1.5rem; }

/* 머리 아이콘 (244, 2026-10-03) — 윗줄·댓글·개선 요청에서 쓰는 작은 동그라미.
   안 고른 사람은 그림 대신 '?' 다 (기본 그림을 따로 두지 않았다). */
.hd-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    vertical-align: middle;
}
.hd-none {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vz-light, #f3f3f9);
    color: var(--vz-secondary, #878a99);
    font-size: .75rem; font-weight: 700; line-height: 1;
}

/* 메뉴 묶음의 **펼침 화살표** (2026-10-04)
   Velzon 의 app.min.css 는 이 화살표를 "Material Design Icons" 글꼴의 글자로 그리는데,
   우리는 그 글꼴을 안 싣는다 (icons.min.css 에 remixicon 하나뿐이다). 그래서 글꼴이
   없는 자리 글자가 그대로 나와 메뉴 옆에 **봉투 모양**이 떴다 — 지금까지는 접히는 메뉴가
   편집자용 '등록 · 편집' 하나뿐이라 눈에 안 띄었고, 2026-10-04 에 스킬 · 배너 묶음을
   만들면서 손님 화면에도 보이게 됐다.

   글자만 갈아 끼우고 **도는 것은 Velzon 에 맡긴다.** 원래 글자가 MDI 의 chevron-right 라
   가로 메뉴에서 90도(아래를 보게) · 펼치면 90도 더 돌게 짜여 있다 — 그래서 여기서도
   **오른쪽** 꺾쇠를 쓴다. 아래 화살표를 넣었더니 90도 돌아 왼쪽을 가리켰다. */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
    content: "\ea6e";                 /* ri-arrow-right-s-line */
    font-family: remixicon, sans-serif;
    font-weight: normal;
    font-style: normal;
}