@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-21
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * 일반 공용 UI — 버튼 · 묶음 상자 · 빈 목록 안내.
 *
 * ui.css (public_html/<site>/asset/css) — 이 사이트의 base.php 가 `site::css/ui.css` 로 건다.
 *   앞에 `variables.css` 가 먼저 와야 한다.
 *   **이 사이트 소유**다 — 같은 파일이 사이트마다 한 벌씩 있다 (2026-09-21 사용자 결정:
 *   업그레이드가 덮어쓰는 `asset/core/` 에 두지 않는다). 모양을 바꿀 때는 이 파일을 직접 고친다.
 *   ⚠ **다른 사이트에도 같은 파일이 있다 — 한쪽만 고치면 갈라진다.** 공통 규칙을 손볼 때는
 *     `public_html/<site>/asset/css/` 아래 같은 이름을 **전부** 본다. 2026-09-21 이전에 이 복제로
 *     main 이 gwizard 의 수정을 3일간 못 받은 적이 있다. → global-template "공통 UI class"
 *
 *   ── 담는 것 ────────────────────────────────────────────────────────────────
 *     c-btn        버튼 — 크기·색은 modifier. 폼 밖(목록·표 안)에서도 쓰므로 form.css 가 아니다
 *     c-panel      화면 본문의 묶음 상자 + __title
 *     c-badge      목록의 색 표지 — 크기는 하나, 한 글자면 정사각 · **옅은 바탕 + 진한 글자 한 꼴**(KRDS light, 2026-10-20 — 색은 그 블록의 `--badge-bg/-ink` 두 값)
 *     c-empty      빈 목록 안내 — 표를 **대신**하는 <p> 라 c-table 의 내부 요소가 아니다
 *     c-paging     목록 아래 페이지 번호 — paging_nav() 가 낸다. KRDS 꼴(__btn--prev/--next · __num · __dot · is-current · is-disabled)
 *     c-ico        KRDS 아이콘(asset/img/icon)을 글자색으로 내는 mask 아이콘 — --attach (2026-09-29) · --global · --angle (2026-10-13, 언어 변경 c-lang)
 *     c-callout    강조 안내 상자 — 큰 i · 제목 + 설명 · 오른쪽 더 보기 (2026-10-20, 기업정보관리 목록)
 *     c-dhead      상세 머리 상자 — [← 목록으로] + 제목·요약 한 줄 (2026-10-20, 기업정보관리 상세)
 *     c-tabs       화면 안 탭 — 폴더 꼴, 현재 탭만 흰 바탕 + 위 막대 · 넘치면 가로 스크롤 (2026-10-20 · 공용 정리 2026-10-21) — 아래 단락이 계약
 *     c-points     요점 목록 — 둥근 아이콘 + 굵은 제목 + 설명 한 줄씩, 줄 사이 구분선 (2026-10-21, 회원 탈퇴 '탈퇴하면 이렇게 됩니다')
 *   ✗ 상태 라벨 · 정렬 화살표는 여기 없다 — 2026-09-21 에 그 CSS 가
 *     `asset/asset_reg/` 로 물러났다(레거시 보관). 되살릴 때는 이 체계로 다시 짠다. 옛 탭메뉴(layout.css tabmenu01)는 가운데 알약 꼴이라 따로 둔다.
 *
 *   ※ 값의 출처는 gwizard 의 레거시 관리자 CSS 다
 *     [구 .ab_m · .ab_blueline · .ab_redline · .ab_grayline · .ab_b2 · .ab_blue · .main_cont_box01 · h4 · .nolist]
 * ---------------------------------------------------------------------------------------------- */


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   버튼  —  c-btn
   ══════════════════════════════════════════════════════════════════════════════════════════════

   ★ **기본이 작은 버튼이다** — 목록·표 안에서 가장 많이 쓰는 크기이므로 옵션 없이 `c-btn` 하나로
     쓸 수 있어야 한다(지침 5장). 폼 하단의 큰 버튼은 `c-btn--lg` 를 얹는다.
     2026-09-21 이전에는 둘이 `gf_btn` · `gf_btn_lg` 라는 **독립된 두 규칙**이어서 공통 속성이
     양쪽에 복제돼 있었다 — 지금은 `c-btn` 이 공통을 갖고 `--lg` 가 다른 것만 덮는다.

   ★ **색 이름 그대로다**(`--blue`·`--red`) — `--primary`·`--danger` 가 아니다(2026-09-21 사용자 결정).
     지금 파랑은 [보기][수정][이동][복사]에 두루 쓰이고 빨강도 뜻이 하나로 모이지 않아,
     의미 이름을 붙이면 이름이 사실보다 앞서간다. 뜻이 정리되면 그때 개명한다.

   ⚠ **hover 는 명시도로 이긴다 — `!important` 를 쓰지 않는다.**
     예전에는 `.gf_btn:hover {background:#444 !important}` 였는데, 그러면 위에 얹히는 `--lg` 의
     hover(#333)가 **영원히 지므로** 크기 modifier 구조 자체가 성립하지 않는다.
     그래서 modifier 의 hover 는 선택자를 한 단계 좁혀(`.c-btn.c-btn--…:hover`) 명시도로 이긴다 —
     파일 순서가 바뀌어도 결과가 같다. 지침 12장 "`!important` 는 가능한 한 피한다".  */

/*  기본 — 작은 버튼. height 가 없다: 줄 높이 + 테두리 1+1 이 곧 `--control-height` 다
    (form.css `.c-input` 절의 "넷이 한 줄에 선다" 참고).
    ★ **테두리는 글자와 같은 값**(`--color-ink`)이다 (2026-09-21 사용자 지시 "눈에 잘 안 들어와").
      예전에는 입력칸용 `--border-color`(#ccc)를 그대로 썼는데, 흰 바탕에 연회색 테두리라
      **목록에서 버튼인지 글자인지 갈리지 않았다.** 입력칸은 값을 담는 그릇이라 조용해도 되지만
      버튼은 누르라고 있는 것이라 윤곽이 서야 한다 — 그래서 둘이 같은 토큰을 읽지 않는다.
    ★ `overflow:hidden` + `text-overflow:ellipsis` 는 **폭을 못 박을 때**를 위한 것이다 —
      `style="width:…"` 로 버튼 폭을 맞추는 열에서 글자가 넘치면 **박스 밖으로 삐져나오지 않고**
      `등록해…` 로 줄어든다(배지와 같은 처리). 폭을 안 주면 아무 일도 하지 않는다.
      `display:inline-block` 이라 ellipsis 가 듣는다 — flex 로 바꾸면 안 듣는다(ui.css "배지" 절 ⚠).
    ★ **한 글자면 정사각**이다 (2026-09-21 사용자 지시, 배지와 같은 균형) — [+] [M] [C] [▲] [▼] 처럼
      한 글자인 버튼이 반듯한 네모로 떨어진다. `min-width` 가 **실제 높이와 같은 값**이어야 하는데,
      이 버튼은 `height` 가 없고 **줄 높이 + 테두리 1+1** 로 높이가 나오므로 그 합인
      `--control-height` 를 그대로 읽는다(`box-sizing:border-box` 라 padding·테두리가 이 안에 든다).
      ⚠ **목록 행 안에서는 높이가 한 단계 줄어든다** — 거기서는 `table.css` 가 `min-width` 도
        `--control-height-sm` 으로 같이 줄여 준다. **한쪽만 줄이면 그 자리만 정사각이 깨진다.**  */
.c-btn						{position:relative; display:inline-block; cursor:pointer; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; touch-action:manipulation; user-select:none; border-radius:var(--radius-sm); min-width:var(--control-height); padding:0 12px; line-height:calc(var(--control-height) - 2px); border:1px solid var(--color-ink); background:#fff; color:var(--color-ink); font-size:var(--font-size-sm);}   /* 높이(토큰 40)·여백 12·글자 15 = KRDS small 버튼 — 한 줄의 입력칸과 같은 단계 (2026-09-29) */
/*  hover 바탕은 토큰이다 — 관리자는 #444, 사용자쪽은 레거시 게시판 버튼의 #101821 로 더 어둡다.
    테두리(#000)는 양쪽 같아 그대로 둔다.  */
.c-btn:hover				{border-color:#000; background:var(--bg-btn-hover); color:#fff;}
.c-btn i					{margin-right:6px;}
/*  버튼이 둘 이상 나란히 설 때의 간격 — **자기 오른쪽에 스스로 둔다** (2026-09-21 사용자 결정).
    ★ `+` 형제 선택자(`* + .c-btn`)나 부모의 `gap` 이 아니라 `margin-right` 인 이유는 **안 깨져서**다:
        `+` 는 사이에 다른 요소가 끼면 안 걸려 **붙어버린다** — `<a>수정</a><input type="hidden"><a>삭제</a>`
             가 실제로 있는 꼴이다(table.css "칸 안에서 나란히 서는 것들" 주석의 그 사정).
        `gap` 은 부모를 flex 로 바꿔야 하는데, 버튼이 놓이는 부모가 제각각이라 전부 잡을 수 없다.
      `margin-right` 는 **조건이 없다.** 어디에 놓이든 자기 여백을 갖고, 실패해도 붙지 않는다.
    ★ 마지막 것의 여백은 지운다 — 가운데·오른쪽 정렬에서 그만큼 치우쳐 보인다.
      뒤에 버튼이 아닌 것(텍스트 등)이 오면 `:last-child` 가 아니라 여백이 남는데, 그게 맞다.
    ※ 예전에는 폼 하단 버튼의 간격을 **태그 사이 공백**이 만들었다 — 누가 줄을 붙여 쓰면 조용히
      사라지는 방식이었다. 이제 그 의존이 없다.  */
.c-btn						{margin-right:var(--gap-inline);}
.c-btn:last-child			{margin-right:0;}

/*  색 — 라인 버튼. 테두리와 글자가 같은 값이다.
    ★ **목록 행 관리 버튼의 색 지침** (2026-09-21 사용자 결정. 관리 화면 전체를 이 꼴로 맞췄다):

        보기 · 상세        `c-btn--blue`     읽기만 — 눌러도 아무것도 안 바뀐다
        수정 · 편집        `c-btn--red`      값이 바뀐다 — 되돌리려면 다시 고쳐야 한다
        삭제 · 해제 · 회수  `c-btn--black`    되돌릴 수 없다
        삭제 **불가**      `c-btn--gray`     조건이 안 되어 막힌 자리 (아래)

      ★ 읽는 축은 **"되돌릴 수 있는가"** 다 — 파랑(안 바뀜) → 빨강(바뀜) → 검정(못 되돌림) 순으로
        무거워진다. 관례상 삭제가 빨강인 경우가 많지만, 여기서는 **빨강 위에 검정을 하나 더** 두어
        세 단계를 만든다(사용자 결정).
      ⚠ 그래서 **기본 `c-btn`(흰 것)은 목록 행의 보기·수정·삭제에 쓰지 않는다** — 셋 다 색이 있다.
        기본은 그 셋에 속하지 않는 동작의 자리다(등록·이동·상태 전이 등).
      ※ 이름은 **색 그대로**다(`--blue`·`--red`·`--black`). 뜻을 이름에 넣으면(`--danger` 등)
        위 배치가 바뀔 때 이름이 사실보다 앞서간다 — 색은 지침이 정하고 이름은 색만 말한다.
      ※ 이 셋에 안 드는 자리는 지금 이렇게 쓴다: 검색 `--blue` · 한 줄에서 먼저 누를 것 하나
        `--fill` · 폼 하단 `--lg`. **정렬 화살표(˄˅)는 기본 `c-btn`** 이다 — 한때 바탕 있는 초록
        (`--green`)을 뒀다가 "잘 안 보인다"는 이유로 되돌렸다(2026-09-21). 기본의 흰 바탕 +
        검게 변하는 hover 가 더 읽혔다.
      정본 예시는 app/guava/admin/menu.list.php 의 관리 칸.  */
.c-btn--blue				{border-color:var(--color-blue); color:var(--color-blue);}
/*  파랑의 hover 는 **채움 버튼과 같은 색**이다 (2026-09-21 사용자 지시 "M C 오버했을때 색은 + 하고 같이").
    한 줄에 [+](채움 파랑)와 [M][C](라인 파랑)가 나란히 서는데, 누르려고 올렸을 때 하나는 파래지고
    하나는 검어지면 **같은 계열인데 따로 노는 것으로 읽힌다.** 그래서 `--color-fill-hover` 를 같이 읽는다.
    ⚠ 선택자를 한 단계 좁히는 이유 — 위 `.c-btn:hover`(0,2,0)의 `background:#444` 를 이겨야 한다(0,3,0).  */
.c-btn.c-btn--blue:hover	{border-color:var(--color-fill-hover); background:var(--color-fill-hover); color:#fff;}
.c-btn--red					{border-color:var(--color-red); color:var(--color-red);}
.c-btn--black				{border-color:var(--color-black); color:var(--color-black);}
/*  어두운 채움 — **처음부터 바탕이 차 있고** hover 에서 순검정으로 간다
    (2026-09-21 사용자 지시 "배경이 어두운 회색으로 채워져 있다가 마우스 오버하면 아주 검정으로").
    지금 쓰는 자리: 목록의 정렬 화살표 [˄][˅].
    ★ 라인이 아닌 이유 — 화살표는 글자가 한 획뿐이라 라인으로 두면 흰 바탕에 가는 선 하나여서
      목록에서 눈에 걸리지 않는다. 바탕을 채우면 덩어리로 읽힌다(초록 라인도 같은 이유로 실패했다).
    ★ `--fill`(파란 채움)과 다른 자리다 — 그쪽은 "한 줄에서 가장 먼저 누를 것 하나"의 뜻이고,
      이건 **자주 누르지만 먼저 누를 것은 아닌** 조작이다. 그래서 무채색이다.
    ⚠ hover 가 선택자를 한 단계 좁히는 이유 — 위 `.c-btn:hover`(0,2,0)의 `background:#444` 를
      이겨야 한다(0,3,0). 그냥 `.c-btn--dark:hover` 로 쓰면 파일 순서에 끌려다닌다.  */
.c-btn--dark				{border-color:var(--color-dark); background:var(--color-dark); color:#fff;}
.c-btn.c-btn--dark:hover	{border-color:#000; background:#000; color:#fff;}
/*  회색은 "누를 수 없음"을 보이는 자리에 쓴다(하위 메뉴가 있어 못 지우는 행의 [삭제]).
    2026-10-20 — hover 를 막았다(전엔 올리면 눌리는 버튼처럼 검게 변했다 — 옛 화면 그대로였다). 커서도 not-allowed.
      첫 사용처: 기업정보관리 [소속 탈퇴](관리회원·마지막 소속이면 회색이되 누르면 이유를 모달로 — ent/mypage-view). 그래서 `disabled` 가 아니라 class 다.  */
.c-btn--gray				{border-color:var(--color-disabled); color:var(--color-disabled); cursor:not-allowed;}
.c-btn.c-btn--gray:hover	{border-color:var(--color-disabled); background:#fff; color:var(--color-disabled);}   /* 위 `.c-btn:hover`(0,2,0)를 이기는 0,3,0 — c-btn--dark 와 같은 이유 */

/*  채움 — 한 줄에 버튼이 여럿일 때 **가장 먼저 누를 것 하나**에만 쓴다
    (메뉴 목록 한 줄의 [+] 추가 — 옆의 [M][C] 는 라인으로 둔다).
    라인 버튼만 나란히 서면 다 비슷해 보여 눈이 어디로 갈지 정하지 못한다. 하나만 채우면 그것이
    먼저 읽힌다 — 그래서 **여럿에 쓰면 뜻이 사라진다**(사용자 결정 2026-09-18).
    ★ 크기와 무관하다 — 작은 버튼이면 단색, `--lg` 와 같이 쓰면 그라데이션이다(아래).
      2026-09-21 이전에는 `gf_btn_fill_blue`(작은 것)와 `gf_btn_lg_blue`(큰 것)로 **이름이 둘**이었다.  */
.c-btn--fill				{border-color:var(--color-fill-border); background:var(--color-fill); color:#fff;}
.c-btn.c-btn--fill:hover	{border-color:var(--color-fill-hover); background:var(--color-fill-hover); color:#fff;}

/*  큰 버튼 — 폼 하단의 저장·목록. 화면을 끝내는 동작이라 눈에 걸려야 한다.
    <button> 과 <a> 에 똑같이 준다(둘 다 inline-block). 간격은 태그 사이 공백이 만든다.
    ★ 높이와 최소 폭은 **토큰**이다 (2026-09-22) — 레거시 사용자쪽의 폼 하단 버튼
      (게시판의 [등록하기]·[목록]·[삭제] = 구 `.bbs_btn01`·`.bbs_btn02`)이 이 자리이고,
      관리자(44)보다 훨씬 크다(54·최소폭 100). 사이트가 바꾸는 축이라 값만 갈린다.
      줄 높이는 기본 버튼과 같은 셈법이다 — 테두리 1+1 을 뺀다(높이에서 따라 나오는 수).
    ※ 그라데이션 두 색은 이 버튼에서만 쓴다 — 토큰으로 올리지 않았다.  */
/*  ⚠ **색을 정하지 않는다 — 크기만이다** (2026-09-30 사용자 지시). 전에는 여기서 `background:linear-gradient`
    (회색)·`color:#fff`·`border-color` 까지 정했고, 그래서 두 가지가 어긋나 있었다 (사용자 지적 → computed style 로 확인):
      ① **[취소]·[목록]이 채움**이었다 — 보조 동작이 주 동작처럼 보인다.
      ② 이 규칙이 파일에서 `--black`(111줄)보다 뒤라 **삭제류의 색을 덮었다** — 폼 하단의 [취소]와 [삭제]가
         픽셀 단위로 같은 버튼이었다. ※ `--fill` 은 전용 규칙(아래 `.c-btn.c-btn--lg.c-btn--fill`, 명시도 0,3,0)이
         있어 파란 그라데이션으로 살아 있었다 — 덮인 것은 `--black` 쪽이다.
    KRDS 버튼 규칙은 "그룹은 같은 크기로 두되 **스타일로 구분**, 주 버튼은 화면당 한 번"이다. 지금은 색을 아래 세 갈래가 정한다:
      [취소]·[목록]  `c-btn c-btn--lg`              기본 — 흰 바탕 윤곽 (KRDS Secondary)
      [저장]·[등록]  `c-btn c-btn--lg c-btn--fill`  파란 채움 — 한 줄에서 먼저 누를 것 하나 (KRDS Primary, 아래 전용 규칙)
      [삭제]·[탈퇴]  `c-btn c-btn--lg c-btn--black` 검정 채움 (바로 아래 ★)
    hover 도 여기서 정하지 않는다 — `.c-btn:hover` 와 변형별 hover 가 받는다.  */
.c-btn--lg					{padding:0 16px; min-width:var(--btn-lg-min-width); line-height:calc(var(--btn-lg-height) - 2px); font-size:var(--font-size-base); border-radius:var(--radius-sm); letter-spacing:-1px;}   /* 2026-09-29 KRDS medium — 높이 48(토큰)·여백 16·글자 17. 구 54·20px·1.1em */
/*  ★ **폼 하단의 삭제류는 채운다** — 목록 행의 작은 [삭제]는 윤곽이지만(한 줄에 [보기][수정]과 나란히 서서
    색으로 갈린다), 폼 하단은 [취소]와 **둘뿐**이라 윤곽끼리면 구분이 안 된다(`--color-black` #333 과
    기본 `--color-ink` #444 는 눈으로 거의 같다). 그래서 큰 버튼일 때만 채운다 — 되돌릴 수 없는 동작이
    그 줄의 주 버튼이라는 뜻도 같이 선다.  */
.c-btn.c-btn--lg.c-btn--black		{border-color:var(--color-black); background:var(--color-black); color:#fff;}
.c-btn.c-btn--lg.c-btn--black:hover	{border-color:#000; background:#000; color:#fff;}
/*  큰 채움 — 저장처럼 **그 화면의 주된 동작**. 위 `--fill` 의 단색을 그라데이션으로 덮는다.
    ⚠ **테두리색을 여기서 다시 준다** — `--fill` 에서 저절로 오지 않는다: `--fill`(0,1,0)과
      `--lg`(0,1,0)는 명시도가 같아 **파일에서 뒤에 있는 `--lg` 의 `border-color:#333` 이 이긴다.**
      그대로 두면 파란 저장 버튼에 검은 테두리가 둘린다(전환 중 실제로 그랬다 — 2026-09-21 검증에서 잡음).
    ⚠ **hover 를 여기서도 다시 준다.** 위 `.c-btn.c-btn--lg:hover` 와 이 규칙은 **명시도가 같아서**
      (둘 다 0,3,0) 파일에서 뒤인 이 규칙이 이긴다 — 그대로 두면 큰 채움 버튼만 **hover 해도 아무
      변화가 없다**(2026-09-21 검증에서 잡음). 한 단계 좁혀(0,4,0) 그 자리를 되돌린다.
    ★ 값은 `.c-btn--lg:hover` 와 **같은 검정**이다 — 옛 `.gf_btn_lg_blue` 에 hover 가 없어
      `.gf_btn_lg:hover` 가 먹고 있던 **전환 전 동작 그대로**다. 파란 버튼이 검게 변하는 게
      어색해 보이더라도 이번 전환의 목표는 이름 체계이지 모양이 아니다 — 바꾸려면 따로 결정한다.  */
.c-btn.c-btn--lg.c-btn--fill		{border-color:var(--color-fill-border); background:linear-gradient(0deg, #3f7dd4, #4282dd);}
.c-btn.c-btn--lg.c-btn--fill:hover	{border-color:#000; background:#333; color:#fff;}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   묶음 상자  —  c-panel
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/*  화면 본문의 경계(제목 + 표)  [구 .main_cont_box01]
    ★ **모양을 주지 않는다** (사용자 결정 2026-09-18). class 는 화면(마크업)이 계속 쓰고 — 지침
      global-template "★ 뼈대" 의 '한 화면에 c-panel 하나' 는 그대로다 — 그리는 일만 뺀 것이다.
      화면을 외부로 가져갈 때 이 상자가 그쪽 디자인과 겹쳐 어색해지기 때문이다. 다른 사이트가
      상자를 원하면 **이 파일에서** 이 선택자에 모양을 준다(화면은 손대지 않는다).
    ★ 규칙을 지우지 않고 **비워 둔 채 남긴다** — 지우면 "왜 없지" 를 다시 조사하게 되고, 다른
      CSS 가 이 자리를 차지했는지도 알 수 없다. 여기가 그 사이트의 상자 모양을 정하는 자리다.
    ※ 전에 있던 것: border·background·border-radius·overflow:hidden·margin-bottom·padding.
      overflow:hidden 이 안쪽 float 를 가두고 있었으므로, float 를 쓰는 화면은 뒤 요소가 밀릴 수 있다.
    ※ `:after {clear:both}` 도 같이 뺐다 — content 가 없어 의사요소가 생성되지 않았고, 따라서
      **처음부터 아무 일도 하지 않던 규칙**이다(float 정리는 overflow 쪽이 하고 있었다).  */
.c-panel					{}

/*  묶음 제목 — 왼쪽 파란 **세로 막대**  [구 gwizard.css 의 전역 h4]
    태그에 기대지 않고 class 로 그린다 — 다른 사이트에 옮겨도 그 사이트 h4 모양에 끌려가지 않는다.
    ★ `__title` 인 이유 — 이 제목은 `c-panel` **안에서만** 뜻이 있다(단락의 머리). 밖에 홀로 쓰는
      제목은 그 사이트의 h2·h3 다. 그래서 독립 컴포넌트가 아니라 내부 요소다(지침 4장).
    ★ 막대 = gwizard 제목과 같은 꼴(둥글기 · 사이 12)이고 **색만 이 사이트의 파랑**이다
      (2026-10-20 사용자 "main 의 h2 를 이 모양으로, 지금 파랑으로" — 전엔 파란 고리 16px). 굵기는 8px — gwizard 의 6 에서
      한 단계 올렸다(사용자 "굵기는 조금만 더").
    ★ **세로 가운데는 flex 로 맞춘다** — absolute + top 값은 line-height 가 바뀌면 어긋나고 눈대중이 된다(사용자 "세로센터와 크기 딱").
      막대 높이 0.9em = 한글 글자 몸통 높이. 제목 안에 다른 태그를 섞는 main 화면은 없어 flex 가 안전하다(관리 화면의 <small> 은 gwizard 몫).
    글자 크기 1.3em — 1.4 에서 한 단계 줄였다(2026-10-20 사용자 "조금만 줄여").  */
.c-panel__title				{display:flex; align-items:center; padding:0 0 15px; font-size:1.3em; color:#000; letter-spacing:-1px; line-height:140%; font-weight:600;}
.c-panel__title:before		{content:''; flex:none; width:8px; height:0.9em; margin-right:12px; background:var(--color-primary); border-radius:4px;}


/*  첨부 목록 — KRDS 첨부파일 패턴의 **목록 링크 유형**이다 (krds.go.kr global_09, 2026-09-30).
    줄 = 클립 + `이름 [pdf, 173.1KB]` + [미리보기][다운로드]. 그 **마크업은 여기가 아니라** _attach_link_html()
    (app/guava/lib/attach.lib.php) 한 곳이고, 무엇이 왜 그 꼴인지도 그 함수 주석이 정본이다. 여기는 **모양만** 맡는다:
      1 컨테이너  **테두리**로 본문과 갈라 놓는다 (KRDS "컨테이너로 다른 콘텐츠와 구분"). 회색 바탕 칠은 걷었다 —
                  선 하나면 갈라지고, 칠까지 하면 본문보다 첨부가 더 눈에 띈다
      2 글자      이름·버튼이 **본문과 같은 크기**다 (KRDS 접근성 "링크 텍스트는 주변 콘텐츠와 동일한 글자 크기").
                  구 0.95em × 0.9em 이 겹쳐 0.855em — 두 단계 작았다
      3 버튼      둘 다 같은 꼴(`c-btn` 윤곽)·같은 크기다 — 한 묶음은 한 계층이고, 채움(주조색)은 화면에 하나뿐이라
                  여기 쓰지 않는다. 줄 안이라 KRDS xsmall(`--control-height-sm` 32) — 목록 표 안 버튼과 같은 단계(table.css)
    ⚠ 2026-09-22 까지 `c-attach` 는 **마크업에만 있고 CSS 가 없었다** — 첨부가 맨 목록으로 보였다
      (global-template "★ 뼈대": 정의 없는 class 를 남기지 않는다). 그때 넣은 두 단 배치(제목 160px + 파일 칸)는
      **제목을 아무 스킨도 마크업에 두지 않아** 왼쪽 160px 이 내내 빈 칸이었다 — 첨부가 화면 가운데서 시작해 보이던 이유다.
      제목(`c-attach__title`)도 같이 걷었다. 스킨은 화면 밖 h3 로 구역 이름만 준다.  */
.c-attach					{margin:0; padding:0 20px; list-style:none; border:1px solid var(--border-color-cell); border-radius:var(--radius-md);}
.c-attach > li				{display:flex; align-items:center; gap:8px; padding:10px 0; line-height:1.5;}
.c-attach > li + li			{border-top:1px solid var(--border-color-cell);}
.c-attach .c-ico--attach	{flex:none; color:var(--color-mute);}
/*  이름 칸 — **이름만 `…` 로 줄이고 `[유형, 크기]` 는 남긴다** (사용자 지시 2026-09-30 "파일다운로드 박스도 …").
    전에는 `word-break:break-all` 로 **여러 줄로 접혔다** — 한 파일이 세 줄(이름 두 줄 + 버튼 줄)을 먹었다.
    둘을 한 조각으로 묶어 자르면 크기 표기부터 사라지므로, 이름을 `c-attach__file` 로 따로 감싸고(attach.lib.php)
    **그 조각만** 줄인다. 크기는 `flex:none` 이라 늘 제 폭을 지킨다.
    ⚠ `min-width:0` 이 있어야 flex 칸이 글자보다 작아진다 — 없으면 안 줄고 칸을 밀어낸다(게시판 스킨의 이전다음과 같은 사정).  */
.c-attach__name				{display:flex; align-items:baseline; gap:4px; flex:1 1 auto; min-width:0; color:var(--color-ink);}
.c-attach__file				{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.c-attach__info				{flex:none; white-space:nowrap; color:var(--color-mute);}   /* [확장자, 크기] — 이름과 같이 읽히되 부차 정보라 흐리게 */
.c-attach__act				{flex:none; display:flex; gap:6px;}
.c-attach__act .c-btn		{margin-right:0; min-width:0; padding:0 10px; line-height:calc(var(--control-height-sm) - 2px);}   /* 줄 안 버튼 = KRDS xsmall */

/*  레이어(모달) — c-modal. **여닫기는 core/js/modal.js 하나**([data-modal] · [data-modal-close] · [data-modal-open] · Esc · 배경 클릭).
    즉석 상자(modal() · modalAlert · modalConfirm)와 미리 둔 상자(마이페이지 재확인 · 메뉴 추가/이동/복사) 전부 이 마크업이다 —
    첨부 미리보기·우편번호 검색·플래시 알림·1차 검증 알림·확인 대화 상자([data-confirm])가 같은 상자다.
    ★ 모양은 **KRDS(정부 디자인 시스템) 모달 구조 하나**다 (2026-09-29 사용자 결정 "모달 스타일은 하나에서") — 구조는 gwizard ui.css 와 같게 시작했지만
      **사이트 CSS 는 서로 독립**이다(global-template "⛔ 사이트는 서로 독립이다"). 2026-10-24 main 만 글자 크기를 본문 토큰에 맞췄다(사용자 "그건 따로") —
      한쪽을 고쳐도 다른 쪽을 따라 고치지 않는다. 사이트 차이의 나머지는 토큰(--radius-md·--radius-sm·--color-primary·--color-ink·--color-mute·--color-danger)이 낸다.
      메뉴 모달의 **내용물**(mm-ref·mm-pos·mm-label …)만 guava::css/menu-modal.css 에 있다 — 상자·머리·푸터는 여기다.
        1 오버레이  반투명 검정, 흐림 ✗
        2 헤더      제목 **왼쪽 정렬**·굵게 — 크기는 본문 단락 제목(c-panel__title)과 같은 1.3em. 뷰어의 머리 버튼([다운로드])은 제목 오른쪽에 선다
        3 닫기 ×    상자 오른쪽 위 모서리 — 헤더 오른쪽 여백(88)이 그 자리다. 가는 × 글자 하나
        4 본문      왼쪽 정렬, 본문 글자(--font-size-base)·줄간격 1.6. 입력칸은 본문 입력칸과 같은 --font-size-sm. 그림·PDF 는 가운데(뷰어). 푸터가 없는 상자(뷰어·우편번호)는 본문 아래 여백이 끝이다
        5 푸터      버튼 **오른쪽 정렬** — 보조(테두리, c-btn) 앞 · 주(채움, c-btn--fill) 뒤. 높이 48·최소폭 112·모서리 --radius-sm · 글자는 큰 버튼(c-btn--lg)과 같은 --font-size-base
      상자는 --radius-md(KRDS 다이얼로그 10 — main. 관리자는 제 토큰값). 크기는 기본 900(뷰어) · 대화 상자 변형(--alert/--error) 600.
    ※ 주 버튼 색은 **그 사이트의 주조색**(--color-primary) — 참고 디자인의 파랑을 그대로 박지 않는다(global-template "★ 버튼").
      #1d1d1d·#8a949e·#f4f5f6 은 이 상자만의 값이라 토큰으로 올리지 않았다(variables.css 헤더 "무엇이 토큰이 되나").  */
/*  ★ **모달의 글자 기준** (사용자 지시 2026-10-01) — 안의 글자는 본문 화면과 **같은 토큰·배수**다(2026-10-24 사용자 지시 "메인 css 를 따라가게" —
    전엔 제목 1.5em·본문 1.0625em 으로 모달만 한 단계 컸다). 그래서
    **곱해질 기준 하나**만 정하면 전부 따라온다. 그 기준이 없어 지금까지는 **부모에 맡겨져** 있었고,
    `window.modal()`(플래시·확인·1차 검증)이 만드는 모달은 `document.body` 직속이라 `.sub_cont` 밖이었다 —
    콘텐츠 글자를 모바일에서 내려도 **모달만 PC 와 같은 크기로 남았다**(사용자 지적).
    이제 `--content-font`(variables.css `:root`)를 직접 읽는다 — 정적 모달(스킨이 콘텐츠 안에 렌더)이든
    동적 모달(body 직속)이든 **같은 값**이고, 고치는 자리는 그 한 줄이다.
    ⚠ 배수 셋도 같이 덮는다 — 모달 안의 버튼·입력칸은 `var(--font-size-sm)` 을 읽는데, body 직속이면
      뿌리의 **rem 짝**을 보게 되어 기준만 바꿔서는 따라오지 않는다(.sub_cont 가 하는 것과 같은 일).
    ⚠ fallback `1rem` 은 이 변수가 없는 사이트(gwizard)를 위한 것이다 — 그쪽은 지금까지와 같이 동작한다.  */
.c-modal					{--font-size-base:var(--content-font, 1rem); --font-size-sm:calc(var(--content-font, 1rem) * 0.9); --font-size-lg:calc(var(--content-font, 1rem) * 1.2);
							 font-size:var(--font-size-base);
							 position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.5);}
.c-modal.is-open			{display:flex;}
.c-modal__box				{position:relative; display:flex; flex-direction:column; width:100%; max-width:900px; max-height:100%; overflow:hidden;
							 background:#fff; border-radius:var(--radius-md); box-shadow:0 12px 40px rgba(0, 0, 0, .2);}
/*  상자 안에서 JS 가 [hidden] 을 건 것(메뉴 모달의 기준 메뉴 상자·위치 줄 등)은 class 의 display 보다 우선해 감춘다.  */
.c-modal__box [hidden]		{display:none !important;}

/*  헤더 — 제목 + (뷰어의) 머리 버튼. 오른쪽 여백 88 = 닫기 × 자리.  */
.c-modal__head				{display:flex; align-items:center; gap:12px; padding:40px 88px 0 40px;}
.c-modal__title				{flex:1 1 auto; font-size:1.3em; font-weight:700; line-height:1.4; color:#1d1d1d;}
.c-modal__btns				{display:flex; align-items:center; gap:8px;}
.c-modal__btns .c-btn		{margin:0; border-radius:var(--radius-sm);}
.c-modal__close				{position:absolute; top:20px; right:20px; width:40px; height:40px; padding:0; border:0; background:transparent;
							 color:#1d1d1d; font-size:32px; font-weight:300; line-height:1; cursor:pointer;}
.c-modal__close:hover		{color:var(--color-mute);}
/*  키보드 포커스 — 브라우저 기본 점선 대신 KRDS 2px 주조색 고리. 상자가 열리면 첫 포커스가 여기(× 또는 [확인]) 오므로 눈에 걸리는 자리다.  */
.c-modal__close:focus-visible,
.c-modal__foot .c-btn:focus-visible
							{outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm);}

/*  본문 — 왼쪽 정렬. 문단·입력칸 사이 12px. 아래 여백 32 는 푸터가 없을 때의 끝이고, 있을 때는 푸터와의 사이다.  */
.c-modal__body				{overflow:auto; padding:16px 40px 32px; color:var(--color-ink); text-align:left; font-size:var(--font-size-base); line-height:1.6;}
.c-modal__body p + p		{margin-top:12px;}
.c-modal__body .c-input		{height:48px; line-height:46px; font-size:var(--font-size-sm);}
.c-modal__body img			{display:block; max-width:100%; height:auto; margin:0 auto;}
.c-modal__body iframe		{display:block; width:100%; height:70vh; border:0; background:#fff;}

/*  모달 안의 플래시 줄 — 배너일 때의 색 상자(분홍·초록)를 벗긴다. 모달은 종류가 달라도 **한 모양**이다(2026-09-29 사용자 결정
    "모달은 전부 같은 스타일, 플래시까지"). modalAlert·modalConfirm·form-check 의 문장도 이 class 로 온다.
    ★ is-error·is-done 을 **이름으로 같이 적어 명시도를 올린다** — main 은 플래시 블록(.c-flash__item.is-error)이 이 블록 뒤에 있어
      같은 명시도면 그쪽이 이겨 로그인 실패 모달에 분홍 상자가 그대로 남았다(2026-09-29 발견. gwizard 는 순서가 반대라 우연히 멀쩡했다).  */
.c-modal .c-flash__item,
.c-modal .c-flash__item.is-error,
.c-modal .c-flash__item.is-done
							{margin:0 0 8px; padding:0; border:0; background:none; color:var(--color-ink); font-weight:400;}
.c-modal .c-flash__item:last-child
							{margin-bottom:0;}

/*  푸터 — 오른쪽 정렬, 구분선 없음. modal() 에 footer 를 안 주면 hidden 이다 — class 의 display:flex 가 hidden 을 이기므로 명시해 끈다.
    보조(c-btn) 흰 바탕·회색 테두리 / 주(c-btn--fill) 주조색 채움. `c-btn` 기본은 목록 행 크기라 여기서 키운다.  */
.c-modal__foot				{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:0 40px 40px;}
.c-modal__foot[hidden]		{display:none;}
.c-modal__foot .c-btn		{margin:0; min-width:112px; padding:0 24px; line-height:46px; border:1px solid #8a949e; border-radius:var(--radius-sm);
							 background:#fff; color:#1d1d1d; font-size:var(--font-size-base); font-weight:600;}
.c-modal__foot .c-btn:hover	{border-color:#1d1d1d; background:#f4f5f6; color:#1d1d1d;}
.c-modal__foot .c-btn--fill	{border-color:var(--color-primary); background:var(--color-primary); color:#fff;}
.c-modal__foot .c-btn--fill:hover
							{border-color:var(--color-primary); background:var(--color-primary); color:#fff; filter:brightness(.9);}
/*  못 누르는 확정(메뉴 이동에서 대상이 없을 때 등) — 흐리게. hover 효과도 끈다.  */
.c-modal__foot .c-btn:disabled,
.c-modal__foot .c-btn:disabled:hover
							{opacity:.45; cursor:not-allowed; filter:none;}

/*  ══ 변형: 대화 상자 (c-modal--alert · c-modal--error) — 좁은 상자(600)라는 **크기**만 다르다. 플래시 알림·1차 검증·확인 대화 상자·
    재확인 모달·메뉴 모달이 쓴다. 오류라고 제목을 빨갛게 하던 2026-09-27 규칙은 2026-09-29 사용자 결정("모달은 전부 같은 스타일")으로 뺐다 —
    무엇이 잘못됐는지는 제목 글자("확인해 주세요")와 문장이 말한다. variant 이름은 JS 가 계속 붙이지만 모양 차이는 없다.  */
.c-modal--alert .c-modal__box,
.c-modal--error .c-modal__box
							{max-width:600px;}

@media screen and (max-width:480px) {
	.c-modal				{padding:12px;}
	.c-modal__head			{padding:36px 64px 0 24px;}
	.c-modal__close			{top:12px; right:12px;}
	.c-modal__body			{padding:12px 24px 24px;}
	.c-modal__foot			{padding:0 24px 24px;}
	/*  좁은 화면에서는 버튼이 칸을 나눠 갖는다 — 최소폭을 고집하면 두 개가 넘친다.  */
	.c-modal__foot .c-btn	{flex:1 1 0; min-width:0;}
}

/*  대표 이미지 고르기 — 올린 그림이 **카드**로 늘어서고 하나를 고른다 (attach_imagepick, 폼에서 스킨이 부를 때만).
    첫 칸은 "고르지 않음"(= 첫 그림이 대표). 고른 칸은 파란 테두리와 오른쪽 위 체크로 표시한다.
    라디오 자체는 숨기고 **카드 전체**가 누르는 자리다 — name 이 없어 저장에는 안 실린다(값은 hidden 이 나른다).  */
.c-imagepick				{display:flex; flex-wrap:wrap; gap:9px;}
.c-imagepick__item			{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
							 width:91px; height:67px; overflow:hidden; cursor:pointer; background:#fff;
							 border:2px solid var(--border-color-cell); border-radius:10px; transition:border-color .15s;}
.c-imagepick__item:hover	{border-color:var(--color-primary);}
.c-imagepick__item input	{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.c-imagepick__item img		{width:100%; height:100%; object-fit:cover;}

/*  오른쪽 위 표시 — 늘 자리를 잡고 있다가(흰 동그라미) 고르면 파란 체크가 된다.
    항상 보이는 이유: 고를 수 있는 칸이라는 것이 한눈에 읽힌다.  */
.c-imagepick__item::after	{position:absolute; top:5px; right:5px; width:18px; height:18px; content:'';
							 border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25);}
.c-imagepick__item.is-on	{border-color:var(--color-primary);}
.c-imagepick__item.is-on::after	{content:'\2713'; background:var(--color-primary); color:#fff;
							 font-size:11px; line-height:18px; text-align:center; box-shadow:none;}

/*  "고르지 않음" 칸 — 그림 대신 아이콘과 글자.  */
.c-imagepick__none			{gap:5px;}
.c-imagepick__none.is-on	{background:var(--bg-label);}
.c-imagepick__icon			{width:20px; height:20px; color:var(--color-mute);}
.c-imagepick__none.is-on .c-imagepick__icon	{color:var(--color-primary);}
.c-imagepick__label			{color:var(--color-ink); font-size:0.75em; line-height:1.25; text-align:center; font-weight:600;}
.c-imagepick__label small	{color:var(--color-mute); font-weight:400;}
@media screen and (max-width:580px) {
	/*  좁으면 버튼 둘이 **아랫줄 오른쪽**으로 내려간다 — 파일 이름이 한 줄을 다 쓰게(이름이 길어 줄어들면 못 읽는다).  */
	.c-attach > li			{flex-wrap:wrap;}
	.c-attach__name			{flex:1 1 calc(100% - 28px);}   /* 이름은 **한 줄**이다(위 `…`) — 여기서는 제 줄을 다 쓰게만 한다 */
	.c-attach__act			{margin-left:auto;}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   배지  —  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` 와 **같은 토큰**을 읽어서 맞춘다.
   ★ 빈 배지(`&nbsp;` 자리지기)도 `height` 로 높이를 갖는다 — 자리를 지키려고 일부러 두는 것이라
     마크업의 `&nbsp;` 는 그대로 둔다(menu.list.php 주석의 이유가 여전히 유효하다).  */
.c-badge					{display:inline-block; height:var(--badge-height); min-width:var(--badge-height); line-height:var(--badge-height); padding:0 8px; font-size:var(--font-size-sm); font-weight:400; text-align:center;
							 background:var(--badge-bg); color:var(--badge-ink); letter-spacing:-0.75px; border-radius:var(--radius-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
							 --badge-bg:#e6e8ea; --badge-ink:#464c53;}   /* 여백 8 · 글자 15 = KRDS 배지 (2026-09-29). 구 5px · 0.8em. 색 기본값 = 아래 gray */

/*  ★ 색 — **전부 옅은 바탕 + 진한 글자**, KRDS light 배지 한 꼴이다 (2026-10-20 사용자 지시 "배지들 모던하게, 한군데에서 컨트롤" —
      전엔 채움색 팔레트 14개가 각자 hex 를 들고 있었다. 채움색은 버튼으로 오인된다 — 2026-09-29 의 결정을 전체로 넓혔다).
    ★ **이 블록이 그 한 곳이다** — 변형은 `--badge-bg`·`--badge-ink` 두 값만 바꾸고, 모양(크기·둥글기·굵기)은 위 `.c-badge` 한 줄이 다 갖는다.
      값은 KRDS 시스템 색 **5(바탕) / 60(글자)** 짝 — 넷(success·warning·danger·information)은 variables.css 토큰, 나머지는 KRDS gray·secondary 그대로.
    ★ 이름은 여전히 **색 이름**이다(`--green` 이지 `--approved` 가 아니다) — 어느 값에 어느 색을 줄지는 그 화면·함수가 정한다
      (회원 승인·계정 상태는 member.lib.php _member_status_badge 한 곳). 같은 계열끼리 한 값으로 모았다(green=forest · amber=orange=yellow-light ·
      blue=sky · gray=gray-light · violet=lilac=purple) — 채움색 시절의 "나란히 설 때 톤 맞춘 짝" 은 옅은 꼴에선 구분이 안 되어 뜻이 없다.  */
.c-badge--green,
.c-badge--forest			{--badge-bg:var(--color-success-bg); --badge-ink:var(--color-success-ink);}	/* 승인 · 정상 */
.c-badge--amber,
.c-badge--orange,
.c-badge--yellow-light		{--badge-bg:var(--color-warn-bg);    --badge-ink:var(--color-warn-ink);}	/* 신청(대기) · 예정 */
.c-badge--red				{--badge-bg:var(--color-danger-bg);  --badge-ink:var(--color-danger-ink);}	/* 반려 */
.c-badge--blue,
.c-badge--sky				{--badge-bg:var(--color-info-bg);    --badge-ink:var(--color-info-ink);}	/* 이 접속 · NEW */
.c-badge--blue-light		{--badge-bg:#eef2f7; --badge-ink:#052b57;}	/* 공지 — KRDS secondary-5 / 80 (blue 와 다른 결 — 종류 표지) */
.c-badge--gray,
.c-badge--gray-light		{--badge-bg:#e6e8ea; --badge-ink:#464c53;}	/* 비공개 · 휴면 · 기관 연결 — KRDS gray-10 / 70 */
.c-badge--violet,
.c-badge--lilac,
.c-badge--purple			{--badge-bg:#f1edf8; --badge-ink:#5b3e99;}	/* KRDS 에 없는 계열 — 같은 5/60 결로 맞춘 값 */
.c-badge--teal				{--badge-bg:#e3f4f3; --badge-ink:#0f6e68;}	/* 〃 */
/*  유일한 **채움** — 막힘·정지·비밀번호 있음(p)처럼 "굳은" 값. 옅은 꼴 사이에서 하나만 진해 눈에 걸린다. KRDS gray-90.  */
.c-badge--black				{--badge-bg:#1e2124; --badge-ink:#fff;}
/*  미설정 — 값이 없다는 것을 **자리를 지키며** 보인다. 배지를 아예 빼면 행마다 배지 수가 달라져
    칸이 들쭉날쭉해진다. gray 보다 한 단계 옅다(KRDS gray-5 / 60).  */
.c-badge--none				{--badge-bg:#f4f5f6; --badge-ink:#58616a;}
/*  아주 옅게 — 두 값 중 하나가 압도적으로 흔할 때 **그 흔한 쪽**에 쓴다(메뉴 목록의 보통 cid = N).
    지우는 대신 색을 죽여 자리만 남긴다 — 있는 행과 없는 행의 글자 시작점이 어긋나지 않게.  */
.c-badge--faint				{--badge-bg:#f7f7f7; --badge-ink:#d5d5d5;}

/*  배지가 둘 이상 나란히 설 때의 간격 — 버튼과 **같은 방식**이다(자기 오른쪽에 스스로 둔다).
    배지는 묶음 부모가 없다: `<td class="u-text-center u-nowrap">` 안에 그냥 나열되는데 그건
    유틸 칸이라 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` 가 아니다 — 마크업이 `<table>` 안의 칸이 아니라 표와 **형제인 `<p>`** 다
      (`if 목록 있음: <table> else: <p class="c-empty">`). 표의 내부 요소가 아니므로 독립 컴포넌트다.  */
.c-empty					{padding:60px 0; text-align:center;}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   페이지 번호  —  c-paging
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/*  목록 아래 페이지 이동 — paging_nav() (system/lib/paging.lib.php) 가 낸다. 모양은 **KRDS 페이지네이션**(2026-09-29 사용자 지시),
      형태는 레거시 묶음 이동 [처음] [이전] 1~10 [다음] [마지막](2026-10-15) · 항목 40×40 · 모서리 6 · 사이 8 · 바탕 없음 → hover 옅은 청회색 → 지금 쪽은 주조색 채움 + 굵게
      (색만이 아니라 굵기로도 가른다 — KRDS "현재 페이지는 색 외의 단서"). 위 여백은 KRDS 제목 사이 간격(40).
    ★ `--control-height`(48)를 읽지 않는다 — KRDS 페이지네이션은 작은 컨트롤(40)이라 여기 값이 따로다.
    ★ 지금 쪽은 `<strong>`, 잠긴 처음·마지막은 `<span>`(갈 곳 없는 이전·다음은 아예 없다) — 링크가 아니라 hover 규칙을 `a.` 로 묶어 그 둘엔 안 걸린다.
    이전·다음 화살표는 KRDS 아이콘(asset/img/icon)을 mask 로 — 글자색(currentColor)을 따른다. 처음·마지막은 글자만. hover·pressed 색(secondary-5·10)은 이 자리에서만 쓴다 — 토큰 ✗.  */
.c-paging					{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:40px 0 4px; color:var(--color-ink);}
.c-paging__num,
.c-paging__btn				{display:inline-flex; align-items:center; justify-content:center; height:40px; border-radius:var(--radius-sm); color:inherit; text-decoration:none; transition:background-color .15s;}
.c-paging__num				{min-width:40px; padding:0 4px;}
.c-paging__btn				{padding:0 8px 0 4px;}
.c-paging__btn--next		{padding:0 4px 0 8px;}
.c-paging__btn--first,
.c-paging__btn--last		{padding:0 8px;}
.c-paging__btn--prev::before,
.c-paging__btn--next::after	{content:''; width:20px; height:20px; background-color:currentColor;
							 -webkit-mask:url(../img/icon/ico_angle.svg) no-repeat center / contain; mask:url(../img/icon/ico_angle.svg) no-repeat center / contain;}
.c-paging__btn--prev::before	{transform:rotate(90deg);}
.c-paging__btn--next::after		{transform:rotate(-90deg);}
a.c-paging__num:hover,
a.c-paging__btn:hover		{background:#eef2f7; text-decoration:none;}
a.c-paging__num:active,
a.c-paging__btn:active		{background:#d6e0eb;}
.c-paging__num.is-current	{background:var(--color-primary); color:#fff; font-weight:700; cursor:default;}
.c-paging__btn.is-disabled	{color:var(--color-disabled); cursor:default;}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   플래시 알림  —  c-flash
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/*  process 가 flash() 로 담아 redirect 한 알림 — 셸(layouts/head.php)의 flash_out() 이 <body> 첫 줄에 낸다
    (system/lib/flash.lib.php). 화면 안이 아니라 **크롬 위**에 서므로 좌우 여백을 스스로 가진다 —
    본문 컨테이너 밖이라 기댈 패딩이 없다.
    ⚠ **이 사이트는 헤더가 position:fixed 다**(layout.css `.header`, z-index:999). flash 는 <body> 직계라
      문서 흐름의 맨 위(y=0)에 서는데, 그 자리를 고정 헤더가 그대로 덮는다 — 흐름에 있는 요소는 z-index 가
      안 먹으므로 **알림이 헤더 뒤에 완전히 가려졌다**(2026-09-24. 관리 사이트는 헤더가 고정이 아니라
      멀쩡했고, 로그인 화면은 layout('head') 라 크롬이 없어 역시 보였다 — 그래서 늦게 드러났다).
      그래서 여기서만 화면 상단에 **고정**으로 띄운다. 한 번 뜨고 사라지는 알림이라 헤더를 잠깐 덮어도 된다.
      z-index 는 스킵 네비(#skipNav, 9999001)보다 위 — 그 둘이 같은 자리에 선다.  */
.c-flash					{position:fixed; top:0; left:0; right:0; z-index:9999002; padding:16px 20px 0;}

/*  한 줄 = 한 메시지. 여러 번 flash() 하면 담은 순서대로 쌓인다.
    c-notice 와 모양이 닮았지만 **그 자리에 붙박인 안내문이 아니라 한 번 뜨고 사라지는 알림**이라
    따로 둔다 — 굵기와 강조선 색이 상태(is-error·is-done)에 따라 갈린다.  */
.c-flash__item				{margin:0 0 8px; padding:12px 16px; border:1px solid; border-left-width:4px; border-radius:4px; font-weight:600;}
.c-flash__item:last-child	{margin-bottom:0;}

/*  하려던 일이 안 됐다 — 입력 오류. abort(400) 에러 페이지를 대신하는 자리라 눈에 띄어야 한다.  */
.c-flash__item.is-error		{border-color:var(--color-danger); background:var(--color-danger-bg); color:var(--color-danger-ink);}

/*  됐다 — 저장·삭제 완료.  */
.c-flash__item.is-done		{border-color:var(--color-done); background:var(--color-done-bg); color:var(--color-done-ink);}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   아이콘  —  c-ico                                                                  (2026-09-29 KRDS)
   ══════════════════════════════════════════════════════════════════════════════════════════════

   KRDS 아이콘 세트(asset/img/icon — krds-uiux 1.1.0, 그 폴더 README)를 **글자색으로 물들여** 낸다 — mask 라 색은 currentColor 다.
   뜻이 있으면 `<span class="c-ico c-ico--attach" role="img" aria-label="첨부파일 …"></span>`, 장식이면 aria-hidden="true".
   크기는 KRDS small 16 · medium 20 · large 24 중 **medium** 이 기본 — 글줄(17px) 옆에 서는 크기다. 이모지(📎·🔒)를 대신한다 —
   이모지는 OS 마다 그림이 달라 KRDS 선 굵기(1.6)·크기 규격이 안 지켜진다.
   ※ 변형은 쓰는 곳이 생길 때 하나씩 더한다 — 세트에는 91장이 있다.  */
.c-ico						{display:inline-block; width:20px; height:20px; vertical-align:-4px; background-color:currentColor;
							 -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain;}
.c-ico--attach				{-webkit-mask-image:url(../img/icon/ico_file.svg); mask-image:url(../img/icon/ico_file.svg);}   /* 클립 — 목록의 첨부 열 · 보기 화면의 첨부 줄(c-attach) */
.c-ico--global				{-webkit-mask-image:url(../img/icon/ico_global.svg); mask-image:url(../img/icon/ico_global.svg);}   /* 지구본 — 언어 변경 c-lang (layout.css) */
.c-ico--angle				{-webkit-mask-image:url(../img/icon/ico_angle.svg); mask-image:url(../img/icon/ico_angle.svg);}     /* 꺾쇠(아래) — 드롭다운 토글(c-lang) */
.c-ico--my					{-webkit-mask-image:url(../img/icon/ico_my.svg); mask-image:url(../img/icon/ico_my.svg);}           /* 사람 — 마이페이지 (머리 유틸 줄 · 모바일 메뉴, 2026-10-20) */
.c-ico--login				{-webkit-mask-image:url(../img/icon/ico_login.svg); mask-image:url(../img/icon/ico_login.svg);}     /* 로그인 */
.c-ico--logout				{-webkit-mask-image:url(../img/icon/ico_logout.svg); mask-image:url(../img/icon/ico_logout.svg);}   /* 로그아웃 */


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   강조 안내 상자  —  c-callout                                                          (2026-10-20)
   ══════════════════════════════════════════════════════════════════════════════════════════════

   화면 맨 위에서 "할 일이 있다" 를 알리는 상자 — 큰 i · 제목(건수는 <em> 빨강) · 설명 한 줄 · 오른쪽 [더 보기 >].
   c-notice(form.css — 제목 아래 한 줄 설명)보다 한 단계 크다. 처음 쓰는 곳: 기업정보관리 목록(enterprise ent/mypage-view)
   ★ 색은 사이트 정보 토큰 --color-info-*(variables.css — 2026-10-20 사용자 시안 값) — 한 줄 안내 c-notice(form.css)와 같은 모양·같은 색이다.
   아이콘은 그림 파일이 아니라 원 + 'i' 글자 — 토큰 파랑을 그대로 내려고(KRDS 채움 아이콘은 제 색이 박혀 있다).  */
.c-callout					{display:flex; align-items:center; gap:16px; padding:18px 24px; border:1px solid var(--color-info-border); border-radius:var(--radius-md); background:var(--color-info-bg);}
.c-callout::before			{content:'i'; flex:none; width:34px; height:34px; line-height:34px; border-radius:50%; background:var(--color-info); color:#fff; font-size:19px; font-weight:800; text-align:center; font-family:Georgia, serif;}
.c-callout__body			{flex:1; min-width:0;}
.c-callout__title			{margin:0; font-size:calc(var(--font-size-base) * 1.1); font-weight:700; color:#1e2124; line-height:1.4;}
.c-callout__title em		{font-style:normal; color:var(--color-danger);}
.c-callout__desc			{margin:2px 0 0; font-size:var(--font-size-base); color:var(--color-help); word-break:keep-all;}   /* 안내 상자 글자 — 제목 본문×1.1 · 설명 본문 크기(2026-10-21 사용자 "info 가 본문보다 작다 · 전체적으로" — 10-20 의 '한 단계 작게'를 뒤집음). c-notice(form.css)와 같은 값 */
.c-callout__more			{flex:none; display:inline-flex; align-items:center; gap:4px; font-size:var(--font-size-sm); color:var(--color-info); font-weight:600;}
.c-callout__more::after		{content:''; width:20px; height:20px; background:currentColor; transform:rotate(-90deg);
							 -webkit-mask:url(../img/icon/ico_angle.svg) no-repeat center / contain; mask:url(../img/icon/ico_angle.svg) no-repeat center / contain;}
.c-callout__more:hover		{text-decoration:underline; text-underline-offset:3px;}
@media (max-width: 768px) {
	.c-callout				{flex-wrap:wrap; padding:18px 16px; gap:12px;}
	.c-callout::before		{width:24px; height:24px; line-height:24px; font-size:14px;}   /* 휴대폰 아이콘 24 — 안내 상자(c-notice, form.css)와 같게 */
	.c-callout__body		{flex:1 1 calc(100% - 36px);}   /* 링크를 다음 줄로 — 같은 줄이면 설명이 좁은 기둥이 된다 */
	.c-callout__more		{margin-left:36px;}   /* 36 = 아이콘 24 + 간격 12 */
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   상세 머리 상자  —  c-dhead                                                          (2026-10-20)
   ══════════════════════════════════════════════════════════════════════════════════════════════

   목록 → [관리] 로 들어간 상세의 머리(기업정보관리 — app/enterprise/member-ext/ent/mypage-view). 그림은 관리 사이트의 캡스톤 프로그램
   상세 머리(gwizard layout.css ginfo_top)에서 시작해 사용자 시안으로 바꿨다. **값은 이 사이트 토큰**이다(사이트 CSS 는 서로 독립 — global-template).
     c-dhead   흰 상자 · 왼쪽(__main) 큰 제목(h2) + 배지 · 오른쪽(__side) 상태 알림(__stts — 반려는 danger) + [← 기업 목록으로](윤곽 버튼) · 요약 줄(__label 이름표 + 값, | 로 가른다 · 내 역할은 이름표 없이 배지) — 2026-10-20 사용자 시안
   ⚠ 바깥 세로 margin ✗ — 사이는 마크업의 u-gap 이 낸다.  */
.c-dhead					{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 28px; border:1px solid var(--border-color-cell); border-radius:var(--radius-md); background:#fff;}
.c-dhead__main				{flex:1; min-width:0;}
.c-dhead__side				{flex:none; display:flex; align-items:center; gap:8px;}
.c-dhead__back				{display:inline-flex; align-items:center; gap:8px; height:var(--control-height); padding:0 16px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:#fff; color:#1e2124; font-weight:500;}
.c-dhead__back::before		{content:''; width:20px; height:20px; background:currentColor;
							 -webkit-mask:url(../img/icon/ico_arrow_left.svg) no-repeat center / contain; mask:url(../img/icon/ico_arrow_left.svg) no-repeat center / contain;}
.c-dhead__back:hover		{border-color:var(--color-primary); color:var(--color-primary);}
.c-dhead__stts				{display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 14px; border:1px solid var(--color-notice-border); border-radius:var(--radius-sm); background:var(--color-notice-bg); color:var(--color-changed-ink); font-weight:600;}
.c-dhead__stts::before		{content:'!'; flex:none; width:20px; height:20px; line-height:20px; border-radius:50%; background:var(--color-notice); color:#fff; font-size:13px; font-weight:800; text-align:center;}   /* 둥근 ! — 시안. KRDS 경고 아이콘(삼각형)은 이 자리에 무거웠다 */
.c-dhead__stts.is-rejected	{border-color:var(--color-danger); background:var(--color-danger-bg); color:var(--color-danger-ink);}
.c-dhead__stts.is-rejected::before	{background:var(--color-danger);}
.c-dhead__notes > *			{margin:0;}   /* 머리 상자 아래 안내 묶음 — 안내 상자들(c-issues·c-notice)의 제 margin 을 뗀다. 사이는 마크업의 u-gap-md 가 낸다 */
.c-dhead__title				{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; font-size:1.8em; font-weight:700; line-height:1.3; letter-spacing:-0.5px; color:#1e2124;}
.c-dhead__title .c-badge	{margin:0; font-size:var(--font-size-base); letter-spacing:0;}
.c-dhead__meta				{display:flex; flex-wrap:wrap; align-items:center; row-gap:4px; margin:12px 0 0; padding:0; list-style:none; color:var(--color-help);}
.c-dhead__meta li + li::before	{content:'|'; margin:0 18px; color:var(--color-disabled);}
.c-dhead__label				{margin-right:8px; color:var(--color-mute);}
.c-dhead__meta .c-badge		{margin:0;}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   화면 안 탭  —  c-tabs                                                   (2026-10-20 · 공용 정리 2026-10-21)
   ══════════════════════════════════════════════════════════════════════════════════════════════

   한 화면(한 대상) 안을 탭으로 가른다 — 기업정보관리 상세(기업정보·소속정보·회원관리)에서 시작했다. **어느 화면이든 그대로 쓴다.**
   폴더 꼴: 회색 칸 · 현재 탭만 흰 바탕 + 위 주조색 막대 3px · 아래 선이 현재 탭 밑에서만 열린다.

   ── 마크업 (이대로만) ──────────────────────────────────────────────────────────────────────────
     <nav class="c-tabs" aria-label="<무엇의> 탭">                       nav 에 이름 — 화면에 탭 묶음이 둘이면 둘을 가른다
       <ul>
         <li class="is-on"><a href="…" aria-current="page">기업정보</a></li>     현재 탭 = li.is-on + a[aria-current="page"] (둘 다)
         <li><a href="…">회원관리 <span class="c-badge">3</span></a></li>        건수는 a 안의 c-badge(빨간 알약) — 0 이면 안 낸다
       </ul>
     </nav>
   - 탭 하나 = **주소 하나**다(서버가 그린다 — JS 로 숨기고 보이는 탭이 아니다). 주소 키는 화면이 정한다(예: `tab`) — ⚠ `_tab` 은 셸 탭 키라 쓰지 않는다.
     링크는 act('view', ['tab' => $key]) · 키는 진입 컨트롤러가 qs_keep 해서 [수정] → 저장 뒤에도 그 탭으로 돌아온다. 모르는 키는 첫 탭으로.
   - 셸 탭(templates/<셸>/ 의 tabmenu — 메뉴 단위 2차 라우팅)과 다르다: c-tabs 는 **한 모듈 안**의 갈래다.
   - ⚠ 바깥 세로 margin ✗ — 앞뒤 사이는 마크업의 u-gap-md(20) 가 낸다(global-template "컴포넌트는 제 세로 여백을 갖지 않는다").

   ── 그리는 법 (고칠 때 지킬 것) ────────────────────────────────────────────────────────────────
   - 아래 선은 **ul::after 하나만** 그린다 — 탭 앞(z-index 1)에, 배경이 아니라 **테두리**로.
     ✗ ul 테두리 + 탭 테두리를 겹쳐 그리기 — 탭 위치가 소수점이면(배율 125% 등) 둘이 따로 반올림돼 탭 밑 선만 한 줄 내려간다
     ✗ height:1px 배경으로 긋기 — 배율 125% 에서 두 줄로 번져 굵어진다 (둘 다 2026-10-21 실제로 겪었다)
   - 회색 탭은 아래 테두리가 없다(선이 대신한다). 현재 탭(li.is-on z-index 2)은 흰 띠(a::after)로 선을 덮는다 — 반올림이 어긋나도 새지 않게
     선보다 넉넉히(4px), 양옆 테두리는 덮지 않아 테두리가 선과 맞닿는다. 위 막대는 a::before.
   - 넘치면 **가로 스크롤**(nav 가 스크롤 상자, ul 은 내용 폭 ≥ 100%) — 줄바꿈하면 윗줄 탭이 선에 닿지 않아 폴더 꼴이 깨진다.
     ul 이 내용 폭까지 늘어나므로 선도 스크롤한 끝까지 이어진다. 탭 이름은 줄바꿈하지 않는다.
   - 검증: 배율 100·125·150% × 위치 소수점 몇 가지로 찍어 회색 탭 밑과 빈 자리의 선이 같은 행인지 본다.  */
.c-tabs						{overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;}   /* 넘치면 가로 스크롤 — 세로는 막는다(현재 탭 흰 띠가 아래로 2px 나와 세로 스크롤이 생긴다) */
.c-tabs ul					{position:relative; display:flex; gap:4px; width:max-content; min-width:100%; margin:0; padding:0; list-style:none;}
.c-tabs ul::after			{content:''; position:absolute; left:0; right:0; bottom:0; z-index:1; border-bottom:1px solid var(--border-color-cell);}   /* 아래 선 — 이것 하나만(위 "그리는 법") */
.c-tabs li					{position:relative; flex:none;}
.c-tabs li.is-on			{z-index:2;}   /* 선 위로 — 흰 띠가 선을 덮는다 */
.c-tabs a					{display:flex; align-items:center; gap:6px; height:var(--btn-lg-height); padding:0 24px; border:1px solid var(--border-color-cell); border-bottom:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--bg-thead); color:var(--color-help); font-weight:500; white-space:nowrap;}
.c-tabs a:hover				{color:var(--color-primary);}
.c-tabs .is-on a			{position:relative; background:#fff; color:var(--color-primary-ink); font-weight:700;}
.c-tabs .is-on a::before	{content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--color-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0;}   /* 위 막대 — 양옆 테두리까지 */
.c-tabs .is-on a::after		{content:''; position:absolute; left:0; right:0; bottom:-2px; height:4px; background:#fff;}   /* 선 덮개 — 선보다 넉넉히, 양옆 테두리는 안 덮는다 */
.c-tabs .c-badge			{margin:0; height:20px; min-width:20px; line-height:20px; padding:0 6px; border-radius:10px; background:var(--color-danger); color:#fff; font-size:12px; font-weight:700;}   /* 탭의 건수 — 둥근 작은 알약(목록 배지와 다른 꼴) */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   요점 목록  —  c-points                                                                  (2026-10-21)
   ══════════════════════════════════════════════════════════════════════════════════════════════

   "이렇게 하면 이렇게 됩니다" 처럼 **알릴 점 몇 개**를 줄로 늘어놓는다 — 표(th/td)로 쓸 내용이 아닌 것. 바깥 상자 없이 줄 사이 구분선만.
   회원 탈퇴(guava modules/member/user/mypage-leave.view)에서 시작했다. 사용자 시안(2026-10-21).
     <ul class="c-points">
       <li class="c-points__item c-points__item--danger">                        --danger = 가장 무거운 점(빨간 원) · 없으면 회색 원
         <span class="c-points__ico c-points__ico--lock" aria-hidden="true"></span>  아이콘은 장식 — 뜻은 제목이 말한다
         <div class="c-points__body">
           <p class="c-points__title">계정 이용이 중단됩니다</p>                  제목 끝 마침표 ✗(안내 문구 규칙 — global-template)
           <p class="c-points__desc">설명 한 문장.</p>                            문장이 둘이면 <br> 로 줄을 나눈다
           <p class="c-points__warn">놓치면 안 되는 한마디</p>                   선택 — 빨간 글자(유일한 관리회원 등)
         </div>
       </li>
     </ul>
   - 아이콘 = --lock · --my · --building · --document · --link — main asset/img/icon 의 SVG 를 mask 로(글자색으로 물든다).
     새 아이콘이 필요하면 아래 줄을 하나 더한다(KRDS 세트에 없으면 그 폴더 README "직접 그린 것" 에 적고 그린다).
   ⚠ 바깥 세로 margin ✗ — 사이는 마크업의 u-gap 이 낸다.  */
.c-points					{margin:0; padding:0; list-style:none;}   /* 상자 ✗ — 줄 사이 구분선만(2026-10-21 사용자 "박스에 안 넣는 건") */
.c-points__item				{display:flex; align-items:center; gap:18px; padding:18px 0;}
.c-points__item + .c-points__item	{border-top:1px solid var(--border-color-cell);}
.c-points__ico				{flex:none; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--bg-thead); color:#58616a;}
.c-points__ico::before		{content:''; width:24px; height:24px; background:currentColor; -webkit-mask:var(--points-ico) no-repeat center / contain; mask:var(--points-ico) no-repeat center / contain;}
.c-points__item--danger .c-points__ico	{background:var(--color-danger-bg); color:var(--color-danger);}
.c-points__ico--lock		{--points-ico:url(../img/icon/ico_lock.svg);}
.c-points__ico--my			{--points-ico:url(../img/icon/ico_my.svg);}
.c-points__ico--building	{--points-ico:url(../img/icon/ico_building.svg);}
.c-points__ico--document	{--points-ico:url(../img/icon/ico_document.svg);}
.c-points__ico--link		{--points-ico:url(../img/icon/ico_link.svg);}
.c-points__body				{flex:1; min-width:0;}
.c-points__body > p			{margin:0;}
.c-points__body > p + p		{margin-top:4px;}   /* 제목 · 설명 · 경고 사이 */
.c-points__title			{font-weight:700; color:#1e2124;}
.c-points__desc				{color:var(--color-help);}
.c-points__warn				{color:var(--color-danger-ink); font-weight:500;}

@media (max-width: 768px) {
	.c-dhead				{flex-direction:column-reverse; padding:18px 16px;}
	.c-dhead__meta			{column-gap:16px;}
	.c-dhead__meta li + li::before	{content:none;}   /* 줄이 꺾이면 | 가 줄 머리에 걸린다 — 좁은 화면은 간격으로만 가른다 */
	.c-dhead__side			{align-self:flex-end;}
	.c-dhead__title			{font-size:1.4em;}
	.c-points__item			{gap:14px; padding:16px 0;}
	.c-points__ico			{width:40px; height:40px;}
	.c-tabs a				{padding:0 14px;}
}