라 커서가 안 바뀐다 — 마크업이 그렇게 낸다. */ .c-doc__nav {display:flex; padding-top:30px; margin:0; list-style:none;} .c-doc__nav > li {position:relative; flex:1; min-width:0;} .c-doc__nav .inner {display:flex; flex-direction:column; justify-content:center; height:90px; padding:0 20px; border:1px solid var(--border-color); font-size:0.9em; color:inherit; text-decoration:none;} .c-doc__nav > li:first-child .inner {padding-left:90px; border-right-width:0; border-radius:0.7em 0 0 0.7em;} .c-doc__nav > li:last-child .inner {padding-right:90px; border-radius:0 0.7em 0.7em 0; text-align:right; align-items:flex-end;} /* 동그라미 바탕 */ .c-doc__nav > li::before {content:''; position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:100%; background:var(--bg-label);} .c-doc__nav > li:first-child::before {left:20px;} .c-doc__nav > li:last-child::before {right:20px;} /* 그 위의 꺾쇠 — 정사각형의 두 변만 남겨 돌린다 */ .c-doc__nav > li::after {content:''; position:absolute; top:39px; padding:5px; border:solid var(--color-mute); border-width:1px 1px 0 0;} .c-doc__nav > li:first-child::after {left:42px; transform:rotate(-135deg);} .c-doc__nav > li:last-child::after {right:42px; transform:rotate(45deg);} .c-doc__nav .tit {display:block; padding-bottom:5px; font-weight:700; color:var(--color-ink);} /* 제목은 **한 줄**까지만 — 길어도 칸 높이가 흔들리지 않는다 */ .c-doc__nav .txt {margin:0; overflow:hidden; text-overflow:ellipsis; line-height:1.3; color:var(--color-mute); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;} .c-doc__nav a:hover .txt {text-decoration:underline;} @media screen and (max-width:580px) { .c-doc__nav {flex-direction:column;} .c-doc__nav .inner, .c-doc__nav > li:first-child .inner, .c-doc__nav > li:last-child .inner {height:auto; padding:15px 20px 15px 70px; text-align:left; align-items:flex-start; border-radius:0; border-width:1px;} .c-doc__nav > li:last-child .inner {border-top-width:0;} .c-doc__nav > li::before {left:15px; right:auto; width:36px; height:36px;} .c-doc__nav > li::after {left:28px; right:auto; top:50%; margin-top:-5px;} } /* 글에 딸린 구역의 머리 — 지금은 댓글 수 한 줄이다(레거시 `.replyinfo .count`). ✗ `c-panel__title` 을 쓰지 않는다 — 관리 화면의 묶음 머리라 파란 고리가 붙는다(글 제목과 같은 사정). */ .c-doc__subhead {padding-bottom:15px; border-bottom:1px solid var(--border-color); font-size:0.9em; color:var(--color-mute);} .c-doc__subhead b {color:var(--color-ink); font-weight:500;} /* ══════════════════════════════════════════════════════════════════════════════════════════════ 배지 — c-badge ══════════════════════════════════════════════════════════════════════════════════════════════ 목록에서 **그 행이 무엇인가**를 색으로 가르는 작은 표지. 값 자체는 `title` 로 읽는다. [구 .menu_type · .menu_type_s · .mtype1~14 · .mtype_faint — 2026-09-21 에 하나로 합쳤다] ★ **크기는 하나뿐이다** (2026-09-21 사용자 지시). 예전에는 큰 것(70px 고정)과 곁배지(22px)가 따로 있었는데, 같은 화면에서 둘이 따로 놀아 규격이 보이지 않았다. 지금은 `c-badge` 하나다 — **크거나 작은 것이 실제로 필요해지면 그때 `--sm`·`--lg` 를 더한다**(지침 6장). ★ **한 글자면 정사각**이다 — `min-width` 를 `height` 와 같은 값으로 두어 'a'·'u'·'m' 같은 한 글자 배지가 반듯한 네모로 떨어진다. 글자가 길어지면 거기서부터 가로로 늘어난다. (`box-sizing:border-box` 라 좌우 padding 이 이 안에 든다 — base 리셋.) ★ **글자를 굵게 하지 않는다** (사용자 지시). 배지는 이미 색 면으로 눈에 걸린다 — 굵기까지 더하면 옆의 본문 글자와 무게가 뒤집혀 목록이 시끄러워진다. ★ **폭을 고정하고 싶으면 그 자리에서 `style="width:…"`** 를 준다 (2026-09-21 사용자 결정). 기본은 내용만큼 늘어나고, **끝선을 맞춰야 하는 열에서만** 폭을 못 박는다 — 지침 6장의 크기 우선순위(기본 최소 → 내용 확장 → Size Modifier → **명시적 가로 크기**)의 마지막 자리다. modifier(`--w70` 같은)를 만들지 않는 이유는 폭이 그 **열의 사정**이지 배지의 종류가 아니어서다. 쓰는 예 — menu.list.php 의 연계구분 배지(guava·dev·capstone 처럼 길이가 제각각인 열). ⚠ **`display` 를 flex 로 바꾸지 말 것.** `text-overflow:ellipsis` 는 **블록 컨테이너에만** 듣는다 — flex 로 두면 폭을 좁게 줬을 때 말줄임 없이 **그냥 잘린다**(2026-09-21 에 실제로 그렇게 만들었다가 되돌렸다). 세로 가운데는 `line-height` 가 `height` 와 **같은 토큰**을 읽어서 맞춘다. ★ 빈 배지(` ` 자리지기)도 `height` 로 높이를 갖는다 — 자리를 지키려고 일부러 두는 것이라 마크업의 ` ` 는 그대로 둔다(menu.list.php 주석의 이유가 여전히 유효하다). */ .c-badge {display:inline-block; height:var(--badge-height); min-width:var(--badge-height); line-height:var(--badge-height); padding:0 5px; font-size:0.8em; font-weight:400; text-align:center; color:#fff; letter-spacing:-0.75px; border-radius:var(--radius-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;} /* 색 — `c-btn` 과 같은 결로 **색 이름 그대로**다. 번호(`mtype7`)로는 무엇을 뜻하는지 읽히지 않았다. ★ 어느 값에 어느 색을 줄지는 **그 화면이 정한다** — 여기 있는 건 팔레트일 뿐이다. ★ 계열이 겹치는 짝이 있다(blue/sky · violet/lilac · green/forest). 일부러다 — 앞의 것은 **서로 다른 종류를 가르는** 자리에, 뒤의 것은 **한 칸에 여러 배지가 나란히 설 때** 쓰라고 톤을 맞춰 뽑은 색이다(메뉴 관리의 속성 칸 c·p·s·a 가 그 경우). */ .c-badge--orange {background:#f2a057;} .c-badge--green {background:#4ca515;} .c-badge--blue {background:#4584d1;} .c-badge--violet {background:#6e62b5;} .c-badge--red {background:#f30000;} .c-badge--gray {background:#a6a6a6;} .c-badge--black {background:#000;} .c-badge--purple {background:#841f84;} .c-badge--teal {background:#0d9488;} /* ↓ 넷은 나란히 서는 자리용 — 색상환에서 서로 멀다 */ .c-badge--sky {background:#3b82f6;} .c-badge--lilac {background:#a855f7;} .c-badge--amber {background:#d97706;} /* 흰 글자 대비 때문에 한 단계 어둡다 */ .c-badge--forest {background:#15803d;} /* 미설정 — 값이 없다는 것을 **자리를 지키며** 보인다. 배지를 아예 빼면 행마다 배지 수가 달라져 칸이 들쭉날쭉해진다. 유일하게 글자색이 다르다(바탕이 밝아 흰 글자가 안 읽힌다). */ .c-badge--none {background:#f0f0f0; color:#999;} /* 아주 옅게 — 두 값 중 하나가 압도적으로 흔할 때 **그 흔한 쪽**에 쓴다(메뉴 목록의 보통 cid = N). 지우는 대신 색을 죽여 자리만 남긴다 — 있는 행과 없는 행의 글자 시작점이 어긋나지 않게. */ .c-badge--faint {background:#f7f7f7; color:#d5d5d5;} /* 배지가 둘 이상 나란히 설 때의 간격 — 버튼과 **같은 방식**이다(자기 오른쪽에 스스로 둔다). 배지는 묶음 부모가 없다: `` 안에 그냥 나열되는데 그건 유틸 칸이라 flex 를 줄 수 없다. 그래서 더더욱 `margin-right` 가 맞다. 버튼(6px)보다 좁은 3px 인 이유 — 배지는 한 칸 안에서 넷까지 붙어 서고(속성 칸 c·p·s·a), 그 넷이 **한 덩어리로 읽혀야** 하기 때문이다. 넓히면 서로 다른 값처럼 흩어져 보인다. */ .c-badge {margin-right:var(--gap-inline);} .c-badge:last-child {margin-right:0;} /* ══════════════════════════════════════════════════════════════════════════════════════════════ 빈 목록 — c-empty ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 목록이 비었을 때 **표를 대신해** 나오는 안내 [구 .nolist] ★ `c-table__empty` 가 아니다 — 마크업이 `` 안의 칸이 아니라 표와 **형제인 `

`** 다 (`if 목록 있음:

else: