/* =========================================================
   「창업의 모든 것」(창모) — 커뮤니티(창업 인증 피드) 전용 CSS
   community.html 에서만 읽는다. assets/style.css 는 건드리지 않았다.

   색은 style.css 의 :root 토큰만 쓴다.
   --navy #0E2347 / --navy2 #16305C / --accent #2E6BFF / --accent-dark #1D4ED8
   --ink #191919 / --mut #55606F / --line #E3E7EE / --offwhite #F7F9FC
   --err 는 폼 인라인 오류에만 쓴다(이 파일에서는 쓰지 않는다).

   높이를 px 로 고정한 곳은 두 군데뿐이다 — 상단 고정 헤더(style.css 규격)와
   모바일 하단 고정 CTA. 섹션·카드 높이는 내용에 맡긴다(사진만 aspect-ratio).
   ========================================================= */

:root{
  /* [허브 셸 이식 2026-08-27] 화면에 붙어 있던 가로 메뉴가 없어졌다.
     허브의 상단 메뉴(.hub-nav)는 sticky 가 아니라 문서 흐름 안의 44px 줄이라
     스크롤하면 함께 올라간다. 그래서 정렬 바(.cm_ctrl)의 sticky 기준점은
     44px 이 아니라 0 이다. 44px 로 두면 메뉴가 사라진 뒤에도 정렬 바가
     화면 위에서 44px 내려온 자리에 붙어 그 틈으로 카드가 지나간다.
     ※ 이름 주의 — 여기 --cm-hd · --cm-cta 는 이 시트의 치수 변수다.
       hub.css 의 색 토큰(--cm-bg · --cm-surf …)과는 이름이 겹치지 않는다. */
  --cm-hd:0px;    /* 정렬 바 sticky 기준점 — 허브 메뉴는 흐름 안에 있다 */
  /* [WIN0827 공유시트] 하단 고정 바를 ≤600 에서도 감추면서 이 값을 읽는 곳이 없어졌다.
     마크업(.cm_fixcta 버튼)과 기본 규칙(.cm_fixcta{display:none})은 그대로 남아 있어,
     되살릴 때 다시 쓰라고 선언만 남겨 둔다. */
  --cm-cta:56px;  /* 모바일 하단 고정 「인증글 쓰기」 바 높이 — 현재 참조 0곳 */
}

/* body 에 overflow-x 를 걸지 않는다(clip 도 hidden 과 같이 취급한다).
   가린 넘침은 documentElement.scrollWidth 검사를 조용히 통과시켜 버려
   가로 넘침을 「없는 것」으로 만든다. 넘치면 감추지 말고 드러내 고친다 —
   min-width:0 · overflow-wrap:anywhere · 표는 .tblwrap 같은 전용 스크롤 컨테이너.
   헤더가 문서 흐름 안으로 들어왔으므로 padding-top 은 두지 않는다. */
body.cm_body{background:var(--cm-bg);}

[hidden]{display:none !important;}

/* ── 공용 버튼 ── */
.cm_btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* [SPEC0828-R3] height 44px 하드코딩 · padding 0 22px · font-size 15px 이었다.
     22 는 사다리 밖이고(my·mileage 는 20), 15px 은 글자 사다리에 없는 칸이다.
     되돌리려면 44px · 0 22px · 15px 로. */
  height:var(--cm-cta-h);padding:0 var(--cm-cta-px);border-radius:var(--cm-btn-r);
  background:var(--accent);color:var(--cm-on-accent);font-size:var(--cm-fs-cta);font-weight:var(--cm-fw-ctl);
  transition:background-color var(--cm-t);white-space:nowrap;   /* [SPEC0829] background .2s 였다 */
}
/* [PORTAL0827] 터치 기기 호버 고착 방지(traps D3). hub.css 는 :hover 를 전부
   @media (hover:hover) 로 가뒀는데 이 레거시 시트만 빠져 있어, /feed/ 카드를 탭하면
   테두리색이 파랑으로 남고 다른 곳을 탭해야 풀렸다. 끝으로 옮기지 않고 제자리에서
   감싼다 — 옮기면 뒤 규칙과의 캐스케이드 순서가 바뀐다.
   되돌리려면 아래 @media (hover:hover){ } 껍데기만 벗기면 된다. */
@media (hover:hover){.cm_btn:hover{background:var(--accent-dark);}}
.cm_btn_sm{height:34px;padding:0 14px;font-size:var(--cm-fs-tail);border-radius:6px;}
.cm_btn_ghost{background:var(--cm-surf-2);color:var(--cm-txt);border:1px solid var(--navy);}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 호버 바닥이 var(--offwhite) = #212429 로
   제 바닥(.cm_btn_ghost 의 --cm-surf-2 = 같은 #212429)과 같은 값이라, 손을 올려도
   아무 변화가 없었다. 한 단계 밝은 면으로 올린다.
   되돌리려면 var(--offwhite) 로 되돌리고 :active 한 줄을 지운다. */
@media (hover:hover){.cm_btn_ghost:hover{background:var(--cm-surf-3);}}
.cm_btn_ghost:active{background:var(--cm-edge);}

/* =========================================================
   A. 페이지 헤더 .cm_head
   ========================================================= */
/* 포털 셸에서는 목록에 빨리 닿는 것이 우선이라 장식 여백을 걷어냈다(랜딩 밀도 → 셸 밀도) */
.cm_head{background:var(--offwhite);border-bottom:1px solid var(--line);padding:16px 0 14px;}
.cm_head_row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
/* [SPEC0829] font-size:17px · line-height:1.3 · letter-spacing:-1px · color:var(--ink) 였다.
   27개 창 중 /feed/ 한 곳만 h1 이 17px 이었다 — 사다리(38/20/16/13)에 없는 값이고
   본문 16px 과 1px 차이라 페이지 제목이 그 아래 카드 제목보다 작게 읽혔다.
   나머지 26창과 같은 38px 로 올리고, 자간도 사다리 값(--cm-h1-ls)으로 맞춘다.
   되돌리려면 위 네 값으로 되돌리고 아래 ≤600 절의 .cm_head h1 한 줄을 지운다. */
/* [DAANGN0829] --cm-fs-h1(38) / --cm-lh(38) 이었다. 하위 페이지 h1 은 28/700/36.4 로 내렸다
   (hub.css .hub-h1 과 같은 값). 랜딩만 38 이다 — 근거 : daangn-survey/_전수조사_20260829.md
   되돌리려면 var(--cm-fs-h1) / var(--cm-lh) 로. */
.cm_head h1{
  font-size:28px;font-weight:700;line-height:36.4px;
  letter-spacing:var(--cm-h1-ls);color:var(--cm-txt);
}
/* [LAYOUT0828-R3] font-size:15px 였다 — 사다리에 15px 칸이 없다. 본문 칸(16px)으로 올린다. 되돌리려면 15px 로. */
.cm_lead{margin-top:14px;font-size:16px;font-weight:400;line-height:1.75;color:var(--mut);}
.cm_axis{
  display:inline-block;margin-top:14px;font-size:var(--cm-fs-tail);font-weight:700;
  color:var(--cm-accent-soft);text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover){.cm_axis:hover{color:var(--cm-accent-soft);}}

/* =========================================================
   B. 마일리지·운영 안내 바 .cm_notice
   ========================================================= */
/* [WIN0827D 공유시트] 24px 였다 — 위 .cm_feedwrap 주석의 묶음 경계 값. */
.cm_noticewrap{padding:64px 0 4px;}
/* [WIN0827D 공유시트] 0건 사실 고지(#cmEmptyAll · 이 창의 .hub-box) 안팎의 리듬.
   상자 안 두 고지가 0px 로 붙어 한 덩어리였다 — 첫 줄만 가로선으로 떼고 형제는 8px.
   이 id 는 /feed/ 마크업에만 있고 이 시트도 그 창만 싣는다.
   되돌리려면 이 세 줄을 지운다. */
#cmEmptyAll{margin-top:24px;}
#cmEmptyAll .hub-note--sm{margin-top:14px;padding-top:12px;border-top:1px solid var(--cm-edge);}
#cmEmptyAll .hub-note--sm ~ .hub-note--sm{margin-top:8px;padding-top:0;border-top:0;}
.cm_notice{
  background:var(--cm-surf);border:1px solid var(--line);border-left:4px solid var(--navy);
  /* [WIN0827D-R2 공유시트] 카드 라운드 8px → 10px. 한 화면에서 본문 상자 10px 과 카드 8px 이 같이
     쓰였다. 9개 창 공통값 10px 하나로 고정한다. 되돌리려면 8px 로. */
  border-radius:10px;padding:20px 22px;
}
.cm_nt_head{font-size:var(--cm-fs-h3);font-weight:700;line-height:var(--cm-lh-h3);letter-spacing:var(--cm-h3-ls);color:var(--ink);}   /* [SPEC0828-R3] 15px/1.6 였다 */
.cm_nt_rates{display:flex;flex-wrap:wrap;row-gap:var(--cm-gap-xs);margin-top:12px;}   /* [SPEC0828-R2] 6px 였다 */
.cm_nt_rates li{
  font-size:var(--cm-fs-tail);font-weight:400;color:var(--mut);
  padding:0 14px;border-right:1px solid var(--line);line-height:var(--cm-lh-tail);   /* [SPEC0828-R2] 1.3 이었다 */
}
.cm_nt_rates li:first-child{padding-left:0;}
.cm_nt_rates li:last-child{border-right:0;}
.cm_nt_fine{margin-top:12px;font-size:11px;font-weight:400;line-height:19px;color:var(--mut);}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 접기 버튼도 누르는 것이므로 눌리는 면을 준다.
   호버가 제 글자색과 같은 값이라 아무 일도 하지 않고 있었다. 왼쪽으로 8px 당겨
   글자의 왼쪽 끝은 그대로 두고 면만 넓힌다.
   되돌리려면 margin-top:14px · gap:5px 로 되돌리고 padding · border-radius ·
   transition · :active 와 호버 바닥을 지운다. */
.cm_nt_more{
  display:inline-flex;align-items:center;gap:var(--cm-gap-xs);   /* [SPEC0828-R2] 6px 였다 */
  margin:10px 0 0 -8px;padding:4px 8px;border-radius:var(--cm-btn-r);
  font-size:var(--cm-fs-tail);font-weight:700;color:var(--cm-accent-soft);
  transition:background-color .15s;
}
@media (hover:hover){.cm_nt_more:hover{background:var(--cm-surf-2);}}
.cm_nt_more:active{background:var(--cm-surf-3);}
/* [SPEC0829] ▾ 회전은 장식 확대가 아니라 접힘 상태 표시라 남긴다 — 시간만 --cm-t 로 맞춘다.
   되돌리려면 .2s 로. */
.cm_nt_more::after{content:"▾";font-size:11px;transition:transform var(--cm-t);}
.cm_nt_more[aria-expanded="true"]::after{transform:rotate(180deg);}
.cm_nt_panel{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);   /* [SPEC0828-R3] 1.8(23.4px)였다 */
}
.cm_nt_panel p + p{margin-top:8px;}
.cm_nt_link{
  display:inline-block;margin-top:12px;margin-right:22px;font-size:var(--cm-fs-tail);font-weight:700;
  color:var(--cm-accent-soft);text-decoration:underline;text-underline-offset:3px;
}
.cm_nt_link:last-child{margin-right:0;}
@media (hover:hover){.cm_nt_link:hover{color:var(--cm-accent-soft);}}

/* =========================================================
   C. 필터·정렬 컨트롤 .cm_ctrl  (sticky)
   z-index : 카드(auto)보다 위, 모달(1100)·헤더(800)보다 아래.
   top 은 0 이 아니라 헤더 높이다 — 0 으로 두면 고정 헤더 뒤로 숨는다.
   ========================================================= */
.cm_ctrl{
  position:sticky;top:var(--cm-hd);z-index:500;
  background:var(--cm-bg);border-bottom:1px solid var(--line);
}
/* [SPEC0828-R2] gap:18px 였다 — 사다리에 18 자리는 없다. 묶음과 묶음은 16px 이다. */
.cm_ctrl_row{display:flex;align-items:center;justify-content:space-between;gap:var(--cm-gap-m);padding:14px 0 0;}
.cm_ctrl_right{display:flex;align-items:center;gap:18px;flex:0 0 auto;}

/* 단계 필터 칩 — 좁은 화면에서 세로로 접지 않고 가로 스크롤 */
.cm_chips{
  display:flex;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:12px;
}
.cm_chips::-webkit-scrollbar{display:none;}
/* [SPEC0828] 34px · r17 · 13px/600 이었다. 같은 「누르는 칩」이 9창에서 24 / 32 / 34 / 35.5
   네 높이, r12 / 16 / 17 / 999 네 라운드로 흩어져 있었다. 32px · r16(높이의 절반) 한 벌로 모은다.
   되돌리려면 height:34px · border-radius:17px · font-weight:600 으로. */
.cm_chip{
  flex:0 0 auto;height:var(--cm-chip-h);padding:0 14px;border-radius:16px;
  border:1px solid var(--cm-edge);background:var(--cm-surf-2);color:var(--cm-txt-2);
  font-size:var(--cm-fs-tail);font-weight:700;white-space:nowrap;
  /* [SPEC0829] transition:.2s(전 속성) 였다 — 규격은 background-color 하나뿐인데,
     이 칩의 호버는 테두리 · 글자색으로 표시하므로 그 둘까지만 명시한다. */
  transition:background-color var(--cm-t),border-color var(--cm-t),color var(--cm-t);
}
@media (hover:hover){.cm_chip:hover{border-color:var(--accent);color:var(--cm-accent-soft);}}
/* [SPEC0828] 파란 채움 + 순백이었다. /my/ 의 같은 칩(.chip.on)은 네이비 + #8FB4FF 라
   같은 상태가 두 창에서 다른 색이었고, 파란 채움 예산(한 창 최대 2개 · 첫 화면 1개)도
   /feed/ 에서 넘고 있었다(첫 화면에 채움 3개). 네이비 쪽으로 모은다 — #1E2A44 위 #8FB4FF 6.90:1.
   되돌리려면 background/border 를 var(--navy), color 를 #fff 로. */
.cm_chip[aria-pressed="true"]{background:var(--cm-accent-bg);border-color:var(--cm-accent);color:var(--cm-accent-soft);}

/* 정렬 탭 */
.cm_sorts{display:flex;gap:20px;flex:0 0 auto;}
/* [LAYOUT0828-R3] font-size:14px 였다 — 꼬리 칸(13px)으로 내린다. 되돌리려면 14px 로. */
.cm_sort{position:relative;padding:6px 2px 12px;font-size:var(--cm-fs-tail);font-weight:600;color:var(--mut);}
@media (hover:hover){.cm_sort:hover{color:var(--ink);}}
.cm_sort[aria-selected="true"]{color:var(--ink);font-weight:700;}
.cm_sort[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);pointer-events:none;
}
.cm_ctrl_meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 0 12px;flex-wrap:wrap;
}
.cm_count{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
.cm_ctrl_note{font-size:var(--cm-fs-tail);color:var(--mut);}
.cm_sortcap{font-size:11px;color:var(--mut);margin-left:auto;text-align:right;}

/* =========================================================
   D. 이주의 글 고정 슬롯 .cm_pick
   ========================================================= */
.cm_pick{padding:26px 0 0;}
.cm_pick_lb{font-size:var(--cm-fs-tail);font-weight:700;letter-spacing:0;color:var(--cm-txt);}
.cm_pick_sub{margin-top:5px;font-size:var(--cm-fs-tail);font-weight:400;color:var(--mut);}
.cm_pick .cm_card{margin-top:14px;}
/* 운영자가 입력한 선정 사유가 있을 때만 렌더링한다(값이 없으면 이 요소 자체를 만들지 않는다) */
.cm_pick_reason{
  margin:12px 16px 0;padding-left:10px;border-left:2px solid var(--line);
  font-size:var(--cm-fs-tail);font-weight:400;line-height:1.7;color:var(--ink);
}

/* =========================================================
   E. 피드 카드 .cm_card
   2열 → (≤600) 1열. 카드 높이는 내용에 맡긴다.
   포털 셸의 본문 열은 820px 이다. 3열로 두면 카드가 260px 로 눌려
   사진 자리와 제목이 함께 무너진다. 카드가 설계된 폭(약 384px)에 가깝게
   2열로 둔다 — 카드 내부는 하나도 바꾸지 않았다.
   ========================================================= */
/* [WIN0827D 공유시트] /feed/ 담당 요청. 묶음 경계(7 · 44 · 44px)가 묶음 안 간격(18px)과
   같거나 좁아, 어디서 이야기가 바뀌는지 여백이 말하지 못했다. 묶음 안 6~14px ·
   묶음 경계 24~64px 으로 가른다. ≤600 몫은 이 시트 끝 반응형 절에 따로 둔다 —
   두지 않으면 375px 에서 첫 견본 카드가 y872 로 밀린다(합격 기준 800).
   .cm_samplenote 는 「무엇을 적으면 되는지」 — 이 섹션에서 방문자가 실제로 쓰는 한 줄이라
   본문(16px · --cm-txt-2)으로 올리고, 그 아래 예시 고지(.cm_samplefine · 13px 꼬리)와
   역할을 가른다. 전에는 둘 다 13px 회색이었다.
   되돌리려면 padding 6/16·44/24 · .cm_samplenote 13px/700/--mut · .cm_samplefine 삭제. */
.cm_feedwrap{padding:44px 0 0;}
.cm_samplenote{margin:14px 0 0;font-size:16px;font-weight:400;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}   /* [SPEC0828-R2] 1.7 이었다 */
.cm_samplefine{margin-top:6px;}
.cm_feed{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:22px 0 28px;}

.cm_card{
  position:relative;display:flex;flex-direction:column;
  background:var(--cm-surf);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  /* [SPEC0829] transition:border-color .2s 였다. 시간을 --cm-t 로 맞추고 바닥색을 함께 건다. */
  cursor:pointer;transition:background-color var(--cm-t),border-color var(--cm-t);
}
/* [WIN0827 공유시트] outline:none 과 rgba(46,107,255,.25) 그림자를 걷어냈다.
   그 그림자의 합성색은 카드 면 위에서 약 #1C2C54(1.6:1)라 포커스가 보이지 않았고,
   outline:none 이 hub.css 의 흰색 2px 링(.hub-body :focus-visible)까지 함께 지웠다.
   카드가 이 창의 주 탭 정지점이다. :hover 쪽 outline:none 도 같은 이유로 뺀다 —
   포커스가 들어온 카드 위에 마우스가 얹히면 링이 사라졌다.
   되돌리려면 outline:none 두 곳과 box-shadow 한 줄을 되살린다. */
.cm_card:focus-visible{border-color:var(--accent);}
@media (hover:hover){.cm_card:hover{border-color:var(--accent);}}
/* 예시 카드 — opacity 를 낮추지 않는다(읽혀야 한다). 테두리만 점선으로 바꾼다 */
.cm_card.is-sample{border-style:dashed;}

.cm_cardbody{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;}

/* ① 사진 영역 — 사진이 없는 글은 navy→#16305C 그라데이션 + 단계명만 */
.cm_photo{
  position:relative;aspect-ratio:4/3;min-width:0;
  background-image:linear-gradient(135deg,var(--cm-surf-3) 0%,var(--cm-surf) 100%);
  display:flex;align-items:center;justify-content:center;
  border-radius:8px 8px 0 0;
}
.cm_photo::after{           /* 하단 그라데이션 오버레이 — 장식이므로 클릭을 먹으면 안 된다 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to top,rgba(10,24,48,.5) 0,transparent 46%);
}
.cm_photo_ini{
  font-size:24px;font-weight:800;letter-spacing:-1px;
  color:rgba(255,255,255,.45);pointer-events:none;
}

/* ② 단계 태그 + 「예시」 칩 : 좌상단. 예시 칩이 단계 태그보다 앞이다 */
.cm_tags{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:6px;pointer-events:none;}
/* [WIN0827D-R2 공유시트] radius 4px · 12px · padding 0 9px 였다. 12px 는 이 사이트 글자 위계
   (38/20/16/13)에 없는 크기다. 배지 한 규격(radius 3px · 13px)으로 모은다.
   되돌리려면 4px · 12px · padding 0 9px 로. */
.cm_tag{
  height:24px;padding:3px 8px;display:inline-flex;align-items:center;
  border-radius:3px;font-size:var(--cm-fs-tail);font-weight:700;line-height:1.3;letter-spacing:-.2px;
}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 채운 사각 칩이라 옆의 단계 태그와 한눈에
   같은 것으로 읽혔다. 점선은 카드 테두리(.cm_card.is-sample{border-style:dashed})와
   같은 말이라, 「예시」 표기 체계가 카드 · 칩 한 벌로 묶인다.
   대비 : #D1D3D8 on #1A1C20 = 9.9:1. 되돌리려면 background:var(--line);color:var(--ink) 로. */
/* [WIN0827D-R2 공유시트] 점선 테두리 + 바닥 없음이었다. 「예시」 배지가 네 창에서 네 모양이라
   확정값(1px solid #555D6D · #212429 바닥 · #D1D3D8)으로 모은다 — hub.css .hub-badge--ex 와 같다.
   카드 자체의 점선 테두리(.cm_card.is-sample)는 그대로라 「예시」 표기는 여전히 두 겹이다.
   되돌리려면 background:none;border:1px dashed var(--cm-mut) 로. */
.cm_tag_sample{background:var(--cm-surf-2);border:1px solid var(--cm-dim);color:var(--cm-txt-2);}
/* [WIN0827 공유시트] 네 단계를 각각 다른 색으로 칠하고 있었다. 그런데 hub-legacy.css 가
   --navy 와 --accent 를 둘 다 #2E6BFF 로 잇고 있어 「등록」과 「자금」이 같은 색이었다 —
   색으로 단계를 가를 수 없는 상태였다. portal.css 10절이 이미 정한 규칙
   (「단계를 색으로 가르지 않는다 — 글자로만 가른다」)대로 네 태그를 한 종으로 합친다.
   클래스 이름은 마크업이 쓰고 있으므로 지우지 않는다. .cm_tag_sample 은 그대로 둔다.
   대비 : #D1D3D8 / #212429 = 10.39:1.
   되돌리려면 네 선택자를 각각 prep(surf-2+navy 선) · register(accent) · fund(navy) ·
   operate(mut 면 + --cm-bg 글자)로 되돌린다. */
.cm_tag_prep,
.cm_tag_register,
.cm_tag_fund,
.cm_tag_operate{background:var(--cm-surf-2);color:var(--cm-txt-2);border:1px solid var(--cm-edge);}

/* ③ 이주의 글 배지 : 우상단 */
.cm_badge_pick{
  position:absolute;right:10px;top:10px;z-index:2;pointer-events:none;
  background:var(--navy);color:#fff;border-radius:4px;
  /* [LAYOUT0828-R3] font-size:12px 였다 — 사다리 꼬리 칸은 13px 한 값이다. 되돌리려면 12px 로. */
  padding:5px 9px;font-size:var(--cm-fs-tail);font-weight:700;
}

/* ④ 본문 */
/* [WIN0827D 공유시트] /feed/ 담당 요청. flex 선언이 없어 본문 칸이 남는 높이를 먹지
   않았다 — 카드 겉높이는 격자가 맞춰 주는데 요약 줄 수가 다르면 그 아래 메타 · 반응 ·
   캡션 석 줄의 y 가 카드마다 어긋났다(1400px 실측 : 캡션 y875 / y851 · 오른쪽 카드
   바닥에 39px 공백). 본문 칸이 늘어나면 아래 석 줄이 두 장 모두 바닥에 붙는다.
   되돌리려면 flex 한 줄을 지운다. */
.cm_txt{padding:16px 16px 0;}
.cm_card .cm_txt{flex:1 0 auto;}

/* [WIN0827 공유시트 2회차] /feed/ 담당 요청. 단계 태그와 「예시」 칩이 .cm_photo 안
   절대배치(.cm_tags{position:absolute;gap:6px})에서 본문 첫 줄 <p class="cm_tagrow"> 로
   내려왔는데 이 이름에 규칙이 한 줄도 없었다. 실측(1400px) : 칩 두 개 사이가
   공백 문자 폭 4px 로 좁아졌고(원래 6px), 칩 아래 여백이 0px 이라 .cm_title 이
   칩 밑변(y=671)에 그대로 붙어 있었다 — 태그와 제목이 한 덩어리로 읽힌다.
   가로 배치는 .cm_tags 가 쓰던 gap:6px 을, 아래 여백은 .cm_ex 의 8px 을 그대로 쓴다.
   새 수치를 만들지 않았다. 색·크기는 .cm_tag 가 이미 갖고 있어 건드리지 않는다.
   되돌리려면 이 한 줄을 지운다. */
/* [SPEC0828-R2] gap:6px 였다 — 간격 사다리 밖의 값이라 8px 로 흡수한다. */
.cm_tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cm-gap-xs);margin:0 0 8px;}
/* [WIN0827 공유시트] 17px · nowrap · 말줄임이었다. 인증 피드에서 제목은 사연 그 자체인데
   375px 에서 16자에 잘렸고(320px 카드 폭 230px), 3줄까지 허용된 요약(.cm_ex)보다 좁게
   다뤄지고 있었다. 기준 글자 16px 로 내리고 두 줄까지 흐르게 한다.
   되돌리려면 17px · white-space:nowrap · text-overflow:ellipsis 로 되돌리고
   아래 -webkit-line-clamp 세 값을 지운다. */
/* [SPEC0828-R2] line-height:1.45(23.2px) · margin 없음이었다. 카드 안 소제목(h3)은
   9창에서 24px · 아래 10px 한 벌이다(/guide/ · /my/ · /mileage/ 실측). 되돌리려면 1.45 로. */
.cm_title{
  margin:0 0 10px;
  font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cm_ex{
  /* [WIN0827D-R2 공유시트] -webkit-line-clamp:3 이었다. 본문 열이 좁아지면 견본의 끝 문장이
     말줄임으로 사라진다. 잘린 견본은 「이렇게 남깁니다」의 견본 구실을 못 한다.
     되돌리려면 3 으로. */
  margin-top:8px;font-size:var(--cm-fs-body);font-weight:400;line-height:var(--cm-lh-body);color:var(--mut);   /* [SPEC0828-R3] 15px/1.6 였다 */
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
/* [PORTAL0827] --mut2 는 --cm-dim(#555D6D) 으로 이어져 2.58:1 이었다.
   --mut2 의 다른 두 용법(386·403행)은 비활성 상태라 그대로 두고, 글자로 읽히는
   이 둘만 --mut(--cm-mut) 로 올린다. 되돌리려면 --mut 를 --mut2 로 바꾼다. */
/* [LAYOUT0828-R3] font-size:12px 였다 → 꼬리 칸 13px. 되돌리려면 12px 로. */
.cm_photocap{margin-top:10px;font-size:var(--cm-fs-tail);color:var(--mut);}

/* ⑤ 운영자 지급 표시 — 지급 이력이 없는 글에는 이 줄 자체를 만들지 않는다 */
.cm_award{
  margin:14px 16px 0;padding:8px 10px;border-radius:4px;background:var(--offwhite);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
/* [LAYOUT0828-R3] font-size:12px 였다 → 꼬리 칸 13px. 되돌리려면 12px 로. */
.cm_award b{font-size:var(--cm-fs-tail);font-weight:700;color:var(--cm-txt);}
.cm_award span{font-size:11px;font-weight:400;color:var(--mut);}

/* ⑥ 메타 행 */
.cm_meta{margin:14px 16px 0;font-size:var(--cm-fs-tail);font-weight:400;color:var(--mut);}
.cm_meta b{font-weight:700;color:var(--ink);}

/* ⑦ 반응 행 */
/* [WIN0827D 공유시트] margin 12/16/14 · gap 12 였다. 아래에서 응원 수가 버튼 옷을
   벗으면서 그 자리가 34px 상자에서 한 줄 글자로 줄어, 오른쪽 댓글 버튼과의 사이만
   좁아 보였다. 아래 여백을 캡션 쪽 리듬(12)에 맞추고 사이를 14 로 벌린다.
   되돌리려면 margin:12px 16px 14px · gap:12px 로 되돌린다. */
.cm_react{margin:12px 16px 12px;display:flex;align-items:center;gap:var(--cm-gap-s);}   /* [SPEC0828-R2] gap:14px 였다 */
/* [WIN0827D-R2 공유시트] 나란히 놓인 「응원해요 —」와 「댓글 —」이 높이 · 모서리 · 글자 굵기가
   달라 한 쌍이 두 물건으로 보였다. 두 칩을 한 모양으로 묶는다
   (height 30 · 1px solid --cm-edge · radius 999px · 13px/400 · --cm-mut · --cm-surf-2).
   누를 수 있는 것과 값을 가르는 것은 모양이 아니라 호버 · 누름 상태가 맡는다.
   .cm_cheer.is-on 은 그대로다. 되돌리려면 34px · radius 6px · 700 · --ink 로. */
/* [SPEC0828-R2] height:30px · radius 999px · 굵기 400 이었다. 누르는 칩은 이 사이트에
   32px · radius 16px · 13px/700 한 벌뿐인데(.hub-chip · .cm_chip · .chip · .cm_jump 실측),
   /feed/ 의 이 둘만 30px 알약이라 사다리에 없는 다섯째 높이를 만들고 있었다.
   되돌리려면 height:30px · border-radius:999px · font-weight:400 · --cm-mut 로. */
.cm_cheer{
  height:var(--cm-chip-h);padding:0 14px;display:inline-flex;align-items:center;gap:var(--cm-gap-xs);
  border:1px solid var(--cm-edge);border-radius:var(--cm-chip-r);background:var(--cm-surf-2);
  color:var(--cm-txt-2);font-size:var(--cm-fs-tail);font-weight:700;line-height:1;
  /* [SPEC0829] transition:.2s(전 속성) 였다. 이 버튼의 켬/끔은 바닥 · 테두리 · 글자색이다. */
  transition:background-color var(--cm-t),border-color var(--cm-t),color var(--cm-t);
}
@media (hover:hover){.cm_cheer:hover{border-color:var(--accent);}}
.cm_cheer.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}
.cm_cheer em{font-style:normal;font-weight:400;color:var(--cm-mut);font-variant-numeric:tabular-nums;}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 응원 수는 「보여 주는 값」(견본 카드에서는
   span)이고 댓글은 「누르는 것」(button)인데, 값이 테두리 있는 버튼 옷을 입고 버튼이
   밑줄 친 글자 옷을 입어 서로 뒤바뀌어 있었다. 맞바꾼다 — 값은 글자로, 누르는 것은 면으로.
   ★ 실제 글에 붙는 button.cm_cheer 는 위 규칙 그대로 버튼이다. 요소 선택자를 함께
     써서 span 일 때만 옷을 벗긴다. 되돌리려면 아래 두 줄을 지운다. */
span.cm_cheer{
  height:auto;padding:0;border:0;border-radius:0;background:none;
  font-weight:400;color:var(--cm-mut);
}
span.cm_cheer em{font-weight:700;color:var(--cm-txt-2);}
/* 댓글 — 누를 수 있는 진입 표면. 글 상세가 준비될 때까지는 안내 토스트만 띄운다. */
/* [WIN0827D 공유시트] 밑줄 친 13px 글자였다(위 주석 참조). 34px 상자로 세운다 —
   높이 · 모서리 · 면은 이 창이 이미 쓰는 값(.cm_btn_sm 34px · radius 6 · --cm-surf-2)이라
   새 수치를 만들지 않았다. 되돌리려면 background:none;border:0;padding:4px 2px;
   text-decoration:underline 로 되돌리고 호버를 color:var(--cm-accent-soft) 로 되돌린다. */
/* [SPEC0828-R2] 위 .cm_cheer 와 같은 이유로 칩 규격(32 · r16 · 13px/700)으로 올린다. */
.cm_cmt{
  height:var(--cm-chip-h);padding:0 14px;
  display:inline-flex;align-items:center;
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1;
  color:var(--cm-txt-2);font-variant-numeric:tabular-nums;
  background:var(--cm-surf-2);
  border:1px solid var(--cm-edge);border-radius:var(--cm-chip-r);
  text-decoration:none;
  transition:background-color .15s,border-color .15s;
}
@media (hover:hover){
  .cm_cmt:hover{background:var(--cm-surf-3);border-color:var(--cm-accent);color:var(--cm-txt);}
}
.cm_cmt:active{background:var(--cm-edge);}
/* [PORTAL0827] 날조 방지 고지다 — 2.58:1 로는 고지한 것이 아니다. 위와 같은 이유. */
/* [WIN0827D 공유시트] 11px 이었다 — 글자 위계(38/20/16/13)에 없는 크기다.
   되돌리려면 11px 로 되돌린다. */
/* [WIN0827D-R2 공유시트] 12px 이었다 — 위계(38/20/16/13)에 없는 크기다. 되돌리려면 12px 로. */
.cm_samplecap{margin:0 16px 14px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 1.5 였다 */

/* 가로형 이주의 글 카드 : 사진 좌 40% · 본문 우 60% */
.cm_card.is-pick{display:grid;grid-template-columns:40% 60%;border-width:2px;border-color:var(--navy);}
.cm_card.is-pick.is-sample{border:2px dashed var(--navy);}
/* aspect-ratio 를 반드시 풀어야 한다 — 4/3 이 살아 있으면 카드 높이에서 폭이
   되밀려(높이×4/3) 40% 트랙을 넘고 본문 칸을 침범해 제목·응원해요 버튼을 덮는다. */
.cm_card.is-pick .cm_photo{border-radius:6px 0 0 6px;height:100%;aspect-ratio:auto;width:100%;}
.cm_card.is-pick .cm_cardbody{padding:4px 0 6px;}
/* [WIN0827 공유시트] .cm_card.is-pick .cm_title{white-space:normal} 예외를 지웠다 —
   위에서 .cm_title 자체가 두 줄까지 흐르게 바뀌어 예외가 필요 없다. */

/* =========================================================
   H. 빈 상태 .cm_empty  (기본 숨김 — 마크업만 남겨 둔다)
   ========================================================= */
/* [WIN0827D 공유시트] /feed/ 담당 요청. 가운데 정렬 · #212429(이 창에서 가장 밝은 면) ·
   24px 제목 · 세로 여백 최대 76px×2 라, 바로 위에 오는 .hub-box 와 전혀 다른 물건으로
   보였다(0건일 때 두 상자가 세로로 나란히 선다). 같은 상자 문법으로 맞춘다 —
   제목 띠 44px(20px/lh30 + 상하 7) + 구분선 + 본문 14/16 안숨.
   24px · 15px 는 글자 위계(38/20/16/13)에 없는 크기이기도 하다.
   ※ 지금 화면에 서는 것은 단계를 골라 0건일 때의 #cmEmptyFilter 다(기본 hidden).
   되돌리려면 text-align:center · background:var(--offwhite) · radius 8 ·
   padding:clamp(48px,7vw,76px) 24px · margin:16px 0 44px · h2 24px · p 15px ·
   _btns margin-top:22px + justify-content:center 로 되돌린다. */
.cm_empty{
  text-align:left;background:var(--cm-surf);
  border:1px solid var(--cm-edge);border-radius:10px;
  padding:0;margin:28px 0 0;border-radius:var(--cm-card-r);
}
.cm_empty h2{
  font-size:20px;font-weight:700;line-height:30px;color:var(--cm-txt);
  padding:7px 16px;border-bottom:1px solid var(--cm-edge);
}
.cm_empty p{margin:0;padding:14px 16px 0;font-size:var(--cm-fs-body);font-weight:400;line-height:var(--cm-lh-body);color:var(--cm-mut);}   /* [SPEC0828-R3] 1.7 였다 */
.cm_empty_btns{margin:0;padding:14px 16px 16px;display:flex;gap:var(--cm-gap-s);justify-content:flex-start;flex-wrap:wrap;}   /* [SPEC0828-R2] gap:10px 였다 */

/* =========================================================
   G. 글쓰기 진입 — 모바일 하단 고정 바 (이 페이지에서만)
   ========================================================= */
.cm_fixcta{display:none;}

/* 로그인 안내 모달 */
.cm_modal{position:fixed;inset:0;z-index:1100;display:none;}
.cm_modal.on{display:block;}
.cm_modal_dim{position:absolute;inset:0;background:rgba(0,0,0,.72);}
.cm_modal_in{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(92%,440px);background:var(--cm-surf);border-radius:10px;padding:34px 30px 28px;
}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 23 · 14 · 11px 은 글자 위계(38/20/16/13)에
   없는 크기라 20 / 16 / 12 로 맞춘다. 되돌리려면 23px · 14px · 11px 로 되돌린다. */
.cm_modal_in h2{font-size:20px;font-weight:700;line-height:30px;color:var(--ink);}
.cm_modal_in p{margin-top:12px;font-size:var(--cm-fs-body);font-weight:400;line-height:var(--cm-lh-body);color:var(--mut);}   /* [SPEC0828-R3] 1.7 였다 */
.cm_modal_btns{margin-top:22px;display:flex;gap:10px;}
.cm_modal_btns .cm_btn{flex:1 1 0;}
/* [WIN0827D 공유시트] 26px 글자 하나가 클릭 표면 전부였다. 36px 상자로 세우고
   눌리는 면을 준다(터치 44 에는 못 미치지만 모달 닫기는 뒷막 클릭 · Esc 로도 닫힌다).
   되돌리려면 right:12px;top:8px;font-size:26px 만 남기고 나머지를 지운다. */
.cm_modal_close{
  position:absolute;right:10px;top:8px;
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;
  /* [LAYOUT0828-R3] font-size:26px 였다 — 사다리 밖 값이다. 섹션 제목 칸(20px)으로 내린다.
     닫기 「×」 글리프라 20px 에서도 44px 누름 영역 한가운데에 선다. 되돌리려면 26px 로. */
  font-size:20px;line-height:1;color:var(--mut);
  transition:background-color .15s,color .15s;
}
@media (hover:hover){.cm_modal_close:hover{background:var(--cm-surf-2);color:var(--cm-txt);}}
/* [WIN0827D 공유시트] /feed/ 담당 요청. 위 `.cm_modal_in p`(무게 0,2,0)가 클래스 하나짜리
   이 두 규칙(0,1,0)을 이겨, 「로그인」·「가입하기」를 눌렀을 때 뜨는 결과 줄이 #868B94 로
   내려앉았고(#1E2A44 위 4.13:1 · AA 미달) 꼬리 고지가 본문과 같은 크기로 늘어났다.
   같은 무게로 감싸 이기게 하고, 결과 줄에는 팔레트의 옅은 파란 배지 바닥을 깔아
   눌린 결과를 면으로 만든다. 되돌리려면 .cm_modal_in 껍데기를 벗기고
   .cm_modal_msg 를 margin-top:14px;font-size:var(--cm-fs-tail);color:var(--cm-accent-soft) 로,
   .cm_modal_fine 을 margin-top:16px;font-size:11px;line-height:19px 로 되돌린다. */
.cm_modal_in .cm_modal_msg{
  margin-top:14px;padding:10px 12px;border-radius:var(--cm-btn-r);
  background:var(--cm-accent-bg);color:var(--cm-txt);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:var(--cm-lh-tail);   /* [SPEC0828-R3] 1.6(20.8px)였다 */
}
.cm_modal_in .cm_modal_fine{margin-top:16px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R3] 12px/1.6 였다 */

/* 안내 토스트 — 장식이자 알림이라 어떤 클릭도 가로채지 않는다 */
.cm_toast{
  position:fixed;left:50%;bottom:92px;z-index:1300;pointer-events:none;
  transform:translateX(-50%) translateY(10px);opacity:0;
  background:var(--navy);color:#fff;border-radius:6px;
  padding:11px 18px;font-size:var(--cm-fs-tail);font-weight:600;max-width:88%;text-align:center;
  /* [SPEC0829] .25s 였다. 토스트 등장은 부품의 확대·그림자가 아니라 알림 자체의
     나타남/사라짐이라 남긴다 — 시간만 --cm-t 로 맞춘다. 되돌리려면 .25s 로. */
  transition:opacity var(--cm-t),transform var(--cm-t);
}
.cm_toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* =========================================================
   반응형 — 1열로 접는 지점은 600px 하나다(768 에서 접지 않는다)
   ========================================================= */
@media (max-width:600px){
  /* [WIN0827 공유시트] 하단 고정 「인증글 쓰기」 바(.cm_fixcta)를 이 폭에서도 감춘다.
     목적지가 「로그인 준비 중」 모달인 막다른 버튼이 375px 화면의 56px 을 상시 차지하고
     있었다. 글쓰기 진입점은 본문 안 .cm_btn[data-cm-write] 로 남아 있어 키보드 진입점이
     줄지 않는다. 함께 걸려 있던 body 하단 여백 보정과 토스트 위치 보정도 되돌린다.
     되돌리려면 body.cm_body{padding-bottom:var(--cm-cta)} 와 아래 .cm_fixcta 표시 규칙,
     .cm_toast{bottom:calc(var(--cm-cta) + 16px)} 를 되살린다. */
  .cm_head{padding:36px 0 26px;}
  /* [SPEC0829] 신설. 다른 26창과 같은 좁은 화면 제목 분기(28px/36px)를 /feed/ 에도 준다. */
  .cm_head h1{font-size:26px;line-height:34px;}   /* [DAANGN0829] 당근 모바일 하위 h1 실측 26 */
  .cm_ctrl_row{flex-wrap:wrap;gap:0;}
  .cm_ctrl_right{width:100%;justify-content:space-between;gap:12px;}
  .cm_ctrl_meta{padding-bottom:10px;}
  .cm_sortcap{margin-left:0;text-align:left;width:100%;}
  .cm_feed{grid-template-columns:1fr;}
  .cm_card.is-pick{grid-template-columns:1fr;}
  /* 1열로 접히면 침범할 본문 칸이 없다 → 위쪽에서 푼 4/3 을 여기서 되돌린다.
     되돌리지 않으면 사진 칸이 내용 높이(40px)로 주저앉는다. */
  .cm_card.is-pick .cm_photo{border-radius:6px 6px 0 0;height:auto;aspect-ratio:4/3;}
  .cm_toast{bottom:24px;}

  /* [WIN0827D 공유시트] /feed/ 담당 요청. 위에서 넓힌 묶음 경계를 좁은 화면 몫으로 줄인다.
     넓은 화면에서 의미를 만드는 여백이 375px 에서는 첫 견본 카드를 화면 밖으로 밀어낸다
     (실측 : 값을 그대로 두면 첫 카드가 y872 · 합격 기준 800). 묶음의 순서와 경계는
     그대로 두고 값만 좁힌다. 되돌리려면 아래 일곱 줄을 지운다. */
  #cmEmptyAll{margin-top:16px;}
  #cmEmptyAll .hub-note--sm{margin-top:10px;padding-top:10px;}
  .cm_ctrl_row{padding-top:10px;}
  .cm_feedwrap{padding-top:26px;}
  .cm_samplenote{margin-top:10px;}
  .cm_feed{padding-top:16px;}
  .cm_noticewrap{padding-top:48px;}
}


/* =========================================================
   포털 셸 이식분 (assets/portal.css 와 함께 읽는다)

   여기 있는 것은 두 가지뿐이다.
   ① 셸과 충돌하던 규칙을 맞추는 것 — style.css 의 .inner(1152px 고정)가
      본문 열(820px) 안으로 들어왔으므로 폭을 푼다.
   ② 중 위젯(.pt-w)·우 레일(.pt-c) 안에 들어간 이 페이지 전용 조각.
      portal.css 는 껍데기만 담으므로 내용 조각은 이 파일에서 cm_ 접두사로 둔다.
   카드·피드·모달 등 본문 콘텐츠 규칙은 하나도 건드리지 않았다.
   ========================================================= */

/* ① 폭 — 이 페이지의 안쪽 감싸개는 셸 안에서 열 폭(820px)을 그대로 따른다.
   style.css 의 .inner(1152px 고정)를 특정도로 덮는 방식은 로드 순서에 기대는
   임시 처방이라, 클래스 이름을 cm_inner 로 바꿔 의존 자체를 끊었다. */
.cm_inner{width:auto;margin:0 auto;position:relative;padding:0 16px;}

/* ② 중 위젯 180 안의 조각 ------------------------------------------------ */
.cm_wg_num{margin-top:2px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--ink);}   /* [SPEC0828-R3] 1.4(18.2px)였다 */
.cm_wg_num b{font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);font-weight:700;color:var(--cm-txt);}   /* [SPEC0828-R3] 줄 높이가 상속(20px)이었다 */
/* [WIN0827D-R2 공유시트] 11 · 12px 이었다. 사이드바가 300px 한 열이 된 뒤로 11px 로 누를 이유가
   없다. 위계의 마지막 단 하나(13px)로 모으면 세 창(feed · my · mileage)의 사이드바가
   같은 리듬이 된다. 아래 .cm_wg_steps a · .cm_rl_fine 도 같은 이유다.
   되돌리려면 12 · 11 · 12px · 22px · 11px 로 되돌린다. */
.cm_wg_tx{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 1.55 였다 */
.cm_wg_fine{margin-top:8px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 1.55 였다 */
.cm_wg_link{display:inline-block;margin-top:var(--cm-gap-s);font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:700;color:var(--cm-accent-soft);}   /* [SPEC0828-R2] 위 10px · 줄 높이 상속이었다 */
@media (hover:hover){.cm_wg_link:hover{color:var(--cm-accent-soft);}}
/* [SPEC0828-R2] gap:4px 였다 — 칩과 칩 사이는 8px 한 값이다. */
.cm_wg_steps{display:flex;flex-wrap:wrap;gap:var(--cm-gap-xs);margin-top:8px;}
/* [SPEC0828-R2] height:28px · radius 3px(배지 모양)였다. 이 네 칸(준비 · 등록 · 자금 · 운영)은
   누르는 링크이므로 칩이다 — /my/ · /mileage/ 의 같은 자리(.mg_w_chip)는 24px · r3 이라
   같은 부품이 세 창에서 세 크기였다. 칩 한 벌(32 · r16 · 13px/700)로 모은다.
   되돌리려면 height:28px · border-radius:3px · color:var(--mut) 로. */
.cm_wg_steps a{
  display:inline-flex;align-items:center;height:var(--cm-chip-h);padding:0 14px;
  border:1px solid var(--cm-edge);border-radius:var(--cm-chip-r);background:var(--cm-surf-2);
  font-size:var(--cm-fs-tail);font-weight:700;color:var(--cm-txt-2);
}
@media (hover:hover){.cm_wg_steps a:hover{border-color:var(--accent);color:var(--cm-accent-soft);}}
/* [SPEC0828] height 34px · 파란 테두리 · 파란 글자였다. 3급(사이드 고스트)은 회색 외곽선 한 벌이다 —
   /my/ · /mileage/ 의 .mg_w_bt 와 같은 값으로 맞춘다(36px · #555D6D 테두리 · #F3F4F5 글자).
   파랑은 5급(넛지 채움 .cm_wg_bt_acc)에만 남는다.
   되돌리려면 height:34px · border-color:var(--accent) · color:var(--cm-accent-soft) 로. */
.cm_wg_bt{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--cm-btn-h);margin-top:10px;
  padding:0 var(--cm-btn-px);
  border:1px solid var(--cm-edge);border-radius:var(--cm-btn-r);background:var(--cm-surf-2);
  /* [SPEC0828-R3] font-weight:600 · 좌우 안여백 0 이었다 — /my/ · /mileage/ 의 같은
     3급 버튼(.mg_w_bt)은 700 · 10px 이라 같은 부품이 두 벌이었다. 되돌리려면 600 · padding 삭제. */
  color:var(--cm-txt);font-size:var(--cm-fs-btn);font-weight:var(--cm-fw-ctl);
}
/* [SPEC0828] 호버 면이 버튼 면과 같은 값이 되어 보이지 않는다 — 테두리 · 글자로 표시한다. */
@media (hover:hover){.cm_wg_bt:hover{border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);}}
.cm_wg_bt_navy{background:var(--navy);border-color:var(--navy);color:var(--cm-on-accent);}
@media (hover:hover){.cm_wg_bt_navy:hover{background:var(--navy2);}}
.cm_wg_bt_acc{background:var(--accent);border-color:var(--accent);color:var(--cm-on-accent);}
@media (hover:hover){.cm_wg_bt_acc:hover{background:var(--accent-dark);}}
/* 열리지 않은 기능은 눌리지 않게 둔다 — 적립을 약속하는 버튼을 만들지 않는다 */
/* [WIN0827 공유시트] color 가 --mut2(=--cm-dim #555D6D · #212429 위 2.35:1) 였다.
   #555D6D 는 구분선 · 비활성 「면」 전용이고 글자색이 아니다 → --mut(4.55:1).
   --mut2 의 다른 용법(테두리 · 비활성 면)은 그대로 둔다.
   되돌리려면 var(--mut) 를 var(--mut2) 로 되돌린다. */
/* [WIN0827D 공유시트] /feed/ 담당 요청. 바닥이 --offwhite(#212429)라 활성 버튼
   (.cm_wg_bt 도 같은 --cm-surf-2)과 면이 똑같아 눌리는지 아닌지 형태로 알 수 없었다.
   면을 한 단계 낮춰(--cm-bg) 「지금은 눌리지 않는다」를 형태로 말하게 한다.
   글자색 · 테두리색은 그대로다 — #555D6D 를 글자로 쓰지 않는다.
   되돌리려면 background 를 var(--offwhite) 로 되돌린다. */
/* [WIN0827D-R3 공유시트] /feed/ 담당 요청. 「오늘 출석 찍기」와 「로그인 · 회원가입」이 한 규칙으로
   묶여 있어 세 버튼이 1px #2A2E35 테두리 · #16171B 면 · #868B94 글자로 똑같이 생겼다.
   역할이 다르다 — 「출석 찍기」는 적립 규칙이 확정되지 않아 **열리지 않을 자리**이고,
   「로그인 · 회원가입」은 연동만 되면 **열릴 자리**다. 두 규칙으로 갈라 상태를 형태로 만든다.
   여기(안 열릴 자리)는 mypage.css 의 .mg_w_bt[disabled] 와 **같은 값**으로 맞췄다 —
   면을 걷고 점선 --cm-dim 테두리를 두르는 「지금은 쓸 수 없는 것」 언어를 feed · my · mileage
   세 창이 한 벌로 쓴다(이 사이트에서 점선은 그 뜻 하나로만 쓴다).
   대비 : #868B94 on #1A1C20 = 4.98:1. #555D6D 는 테두리로만 쓴다(글자 금지).
   cursor 는 not-allowed 로 둔다 — 밝게 보이는 쪽이 눌리는 척하지 않게 한다.
   되돌리려면 background:var(--cm-bg);border-color:var(--line);color:var(--mut);cursor:default 로. */
.cm_wg_bt[disabled]{
  background:transparent;
  border-color:var(--cm-dim);
  border-style:dashed;
  color:var(--mut);cursor:not-allowed;
}
/* 반전 카드(넛지) 위의 글자 */
/* [WIN0827 공유시트] rgba(255,255,255,.72) 였다. 카드 바닥이 --pt-navy(=#2E6BFF)라
   합성 대비가 3.08:1 로 AA 미달이었다. portal.css 에서 카드 바닥을 #1D4ED8 로 내렸고,
   글자는 mypage.css 의 .nudge_box 가 쓰던 것과 같은 #D6E0F5 로 맞춘다(5.05:1).
   되돌리려면 rgba(255,255,255,.72) 로 되돌린다. */
/* [SPEC0828-R2] #D6E0F5 였다(파란 면 위 글자였다). 면을 걷었으므로 팔레트 밖 색을 지우고
   다른 사이드 카드와 같은 보조색을 받는다. */
.pt-w--nudge .cm_wg_tx,
.pt-w--nudge .cm_wg_fine{color:var(--cm-txt-2);}
/* [WIN0827 공유시트] 파란 카드 위의 파란 버튼은 면끼리 1.47:1 이라 형태가 보이지 않았다
   (WCAG 1.4.11 의 3:1 미달). 흰 면 + 카드색 글자로 뒤집는다(#1D4ED8 대 #FFFFFF = 6.70:1).
   색을 새로 만들지 않는다. 되돌리려면 이 규칙을 지운다. */
.pt-w--nudge .cm_wg_bt_acc{
  background:#FFFFFF;border-color:#FFFFFF;color:var(--cm-accent-dk);
}

/* ③ 우 레일 360 안의 조각 ------------------------------------------------ */
.cm_rl_tx{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 1.6 이었다 */
.cm_rl_btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
/* [SPEC0828] 파란 테두리 · 파란 글자였다. 위 .cm_wg_bt 와 같은 이유로 3급 한 벌에 모은다. */
.cm_rl_bt{
  display:flex;align-items:center;justify-content:center;
  height:var(--cm-btn-h);padding:0 var(--cm-btn-px);
  border:1px solid var(--cm-edge);border-radius:var(--cm-btn-r);background:var(--cm-surf-2);
  color:var(--cm-txt);font-size:var(--cm-fs-btn);font-weight:var(--cm-fw-ctl);   /* [SPEC0828-R3] 600 · 안여백 0 이었다 */
}
@media (hover:hover){.cm_rl_bt:hover{border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);}}
/* [WIN0827 공유시트] 위 .cm_wg_bt[disabled] 와 같은 이유로 --mut2 → --mut. */
/* [WIN0827D 공유시트] 바닥도 위 .cm_wg_bt[disabled] 와 같은 이유로 --cm-bg 로 낮춘다. */
/* [WIN0827D-R3 공유시트] /feed/ 담당 요청. 위 .cm_wg_bt[disabled] 와 한 규칙이었다.
   여기는 **열릴 자리**(연동만 되면 눌린다)라 면을 한 단계 올리고 테두리 · 글자를 세운다 —
   카드 위로 떠올라 「누를 것」의 모양이 되고, 점선인 위 버튼과 형태로 갈린다.
   실선 테두리이되 파랑이 아니라 회색이라 이미 열린 버튼(.cm_rl_bt 의 --accent 테두리 ·
   --cm-accent-soft 글자)과도 갈린다 — 눌리는 척하지 않는다. cursor 는 not-allowed 다.
   대비 : 글자 #F3F4F5 on #212429 = 15.4:1 · 테두리 #868B94 on #212429 = 4.58:1.
   되돌리려면 background:var(--cm-bg);border-color:var(--line);color:var(--mut);cursor:default 로. */
.cm_rl_bt[disabled]{
  background:var(--offwhite);border-color:var(--mut);
  color:var(--ink);cursor:not-allowed;
}
/* [SPEC0828-R2] background · border-color · color 세 선언으로 파랑 채움(5급)을 만들고 있었다.
   파란 채움 예산은 창당 1개인데 /feed/ 는 본문 주 CTA(.cm_btn)와 이 사이드 버튼 둘이었고,
   같은 라벨 · 같은 폭 · 같은 자리의 「상담 열기」가 /my/ 에서는 회색 외곽선이라 옷이 반대였다.
   5급을 없애고 이 버튼은 자리(사이드)가 정하는 3급 기본값(.cm_rl_bt)을 받는다.
   남기는 것은 margin-top 뿐이다. 되돌리려면 세 선언과 호버 한 줄을 되살린다. */
.cm_rl_bt_acc{
  margin-top:var(--cm-gap-s);
}
/* [WIN0827 공유시트] 레일 넛지 카드(.pt-c--nudge)의 바닥은 --pt-navy2(=#1D4ED8)인데
   그 위의 「상담 열기」 버튼 면이 --accent(#2E6BFF)라 면끼리 1.49:1 이었다 —
   WCAG 1.4.11 의 3:1 을 못 넘어 버튼의 형태가 보이지 않는다. 바로 위 중 위젯
   (.pt-w--nudge)과 같은 처방으로 흰 면 + 카드색 글자로 뒤집는다. 같은 페이지에 있는
   같은 CTA 가 두 모양이 되지 않게 하려는 것이다.
   /mileage/ 가 페이지 안에서 옅은 파랑 1px 링으로 임시 처리해 두었고(.pg .pt-c--nudge
   .cm_rl_bt_acc), 이 규칙이 들어오면 그 줄은 지워도 된다.
   되돌리려면 이 규칙을 지운다. */
/* [WIN0827D-R2 공유시트] 흰 면 + 카드색 글자였다. portal.css 에서 .pt-c--nudge 바닥을 네이비
   (--cm-accent-bg #1E2A44)로 내렸으므로 주버튼을 본래 모양(파란 면 + 흰 글자)으로 돌린다 —
   면끼리 3.03:1 로 WCAG 1.4.11 을 넘고, 파란을 「누를 수 있는 것」에만 남기는 방침과 맞는다.
   되돌리려면 background:#FFFFFF;border-color:#FFFFFF;color:var(--cm-accent-dk) 로. */
/* [SPEC0828-R2] 파란 채움이었다. 위 .cm_rl_bt_acc 와 같은 이유로 걷는다 —
   카드 면도 이제 #1A1C20 이라 3급 고스트가 그대로 보인다. */
.cm_rl_fine{margin-top:var(--cm-gap-s);font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 10px · 1.55 였다 */
/* [WIN0827D-R2 공유시트] rgba(255,255,255,.78) 이었다. 카드 바닥이 네이비로 내려왔으므로 본문2 색으로(9.4:1). */
.pt-c--nudge .cm_rl_tx{color:var(--cm-txt-2);}
.pt-rail__note a{color:var(--cm-accent-soft);font-weight:600;}
@media (hover:hover){.pt-rail__note a:hover{color:var(--cm-accent-soft);}}


/* =========================================================
   움직임 최소화 설정
   [WIN0827 공유시트] 이 파일에 @media (prefers-reduced-motion:reduce) 가 0건이었다.
   특히 .cm_toast 는 transform translateY(10px)→0 으로 움직이는데 hub.css 의 reduce
   목록에도 없었다 — 넣더라도 이 파일이 뒤에 오므로 같은 특정도(0,1,0)에서 밀린다.
   그래서 목록을 이 파일 안에 둔다. 나머지는 전부 background · border-color 전환이다.
   되돌리려면 이 블록을 통째로 지운다.
   ※ 검증 주의 — headless Chrome 의 기본값이 reduce 다. 양쪽을 명시 강제해 각각 재라.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .cm_btn,
  .cm_chip,
  .cm_card,
  .cm_cheer,
  /* [WIN0827D 공유시트] /feed/ 담당 요청. 위에서 새로 준 background-color ·
     border-color 전환도 함께 끈다. 되돌리려면 이 네 줄을 지운다. */
  .cm_btn_ghost,
  .cm_cmt,
  .cm_nt_more,
  .cm_modal_close,
  .cm_toast{transition:none;}
  .cm_nt_more::after{transition:none;}
}