/* ===========================================================
   창모 — mypage.html(내 마일리지) · mileage.html(마일리지 안내) 전용
   색 토큰은 assets/style.css 의 :root 를 그대로 참조한다(중복 선언하지 않음).
   navy #0E2347 / #16305C · blue #2E6BFF · blue-dark #1D4ED8
   ink #191919 · mut #55606F · line #E3E7EE · offwhite #F7F9FC
   빨강은 이 두 페이지에 쓰지 않는다(오류 표시 자리가 없다).
   높이는 전부 min-height 로만 두고 px 로 고정하지 않는다.
   =========================================================== */

/* body 에 overflow-x 를 걸지 않는다(clip 도 hidden 과 같이 취급한다) —
   가린 넘침은 scrollWidth 검사를 통과시켜 가로 넘침을 「없는 것」으로 만든다.
   넘치면 감추지 말고 드러내 고친다. */
body.pg{background:var(--cm-bg);}

/* ---------- 헤더 ----------
   [2026-08-27] 포털 셸 이식 — 두 페이지의 헤더·푸터는 assets/portal.css 의
   .pt-hd / .pt-gnb / .pt-ft 로 교체됐다. 페이지 전용 헤더(.mg_hd·.mg_nav)와
   푸터(.mg_ft), 그리고 본문을 감싸던 .wrap 은 마크업에서 사라져 규칙을 지웠다.
   헤더 구현 2종이던 것이 하나로 합쳐졌다(_연동명세.md 8장 확인 목록 해소). */

/* ---------- 페이지 머리 ---------- */
.pg_top{padding:34px 0 8px;}
/* [WIN0827D-R3 공유시트] 12px 였다. /terms/ · /privacy/ · /feed/ · /guide/ · /tools/ · /fund/
   여섯 창이 이번 회차에 빵부스러기를 넣으면서 전부 사다리(38 - 20 - 16 - 13)의 꼬리 단인 13px 를
   썼다. /my/ · /mileage/ 만 12px 로 남으면 같은 역할의 한 줄이 8개 창에 두 크기로 생긴다.
   사다리에 없는 값은 12px 쪽이다. 규격은 hub.css 13절의 .hub-crumb · .hub-bc 와 같다.
   대비 : #868B94 on #16171B = 5.19:1 (AA). 되돌리려면 12px 로. */
.bc{font-size:var(--cm-fs-tail);line-height:1.6;color:var(--mut);margin-bottom:14px;}
.bc a{color:var(--mut);}
/* [PORTAL0827] 터치 기기 호버 고착 방지(traps D3). hub.css 는 :hover 를 전부
   @media (hover:hover) 로 가뒀는데 이 레거시 시트만 빠져 있어, /feed/ 카드를 탭하면
   테두리색이 파랑으로 남고 다른 곳을 탭해야 풀렸다. 끝으로 옮기지 않고 제자리에서
   감싼다 — 옮기면 뒤 규칙과의 캐스케이드 순서가 바뀐다.
   되돌리려면 아래 @media (hover:hover){ } 껍데기만 벗기면 된다. */
@media (hover:hover){.bc a:hover{color:var(--cm-accent-soft);text-decoration:underline;}}
/* [WIN0827D-R2 공유시트] 「예시」 배지가 네 창에서 네 모양이었다(999px 알약 · 12px · --mut).
   확정값(1px solid #555D6D · radius 3px · 13px · #D1D3D8 · #212429)은 hub.css 의
   .hub-badge + .hub-badge--ex 와 정확히 같은 값이라 새 색 · 새 크기가 필요 없다. 대비 9.6:1.
   아래 .bal_chip 도 같은 모양이다 — 두 배지를 한 규칙으로 묶는다.
   되돌리려면 --offwhite · --line · --mut · 12px · 999px · padding 6px 13px 로. */
.ex_badge,
.bal_chip{
  display:inline-flex;align-items:center;
  background:var(--cm-surf-2);border:1px solid var(--cm-dim);
  color:var(--cm-txt-2);font-size:var(--cm-fs-tail);font-weight:700;line-height:1.4;
  border-radius:3px;padding:3px 8px;
}
.pg_tit{
  font-size:clamp(19px,3vw,22px);font-weight:700;letter-spacing:-1px;
  line-height:1.2;color:var(--ink);margin:16px 0 0;
}
/* [WIN0827 공유시트] .pg_tit.lg 규칙을 지웠다 — 값이 .pg_tit 와 완전히 같아 아무 일도
   하지 않았다. 클래스는 /mileage/ 마크업이 계속 쓰고 있고, 그 창은 페이지 안에서
   38px 로 따로 덮는다. 되돌리려면 .pg_tit.lg{font-size:clamp(19px,3vw,22px)} 를 되살린다. */
/* [WIN0827 공유시트] .lead23 은 clamp(19px,4vw,23px)/700/--ink 였다. 리드 문단이 h1 보다
   커서, 페이지에서 가장 큰 글자가 제목이 아니라 설명문이었다. 기준 글자 16px · 본문2 색의
   리드로 내린다. 되돌리려면 clamp(19px,4vw,23px)/700/var(--ink) 로 되돌린다. */
/* [SPEC0828-R3] line-height:1.7(27.2px) · letter-spacing:-1px 였다 — 16px 본문은 26px · -0.16px 한 값이다. */
.lead23{font-size:var(--cm-fs-body);font-weight:400;line-height:var(--cm-lh-body);letter-spacing:var(--cm-body-ls);color:var(--cm-txt-2);margin-top:14px;}
/* [WIN0827D 공유시트] /mileage/ 담당 요청 — 이 시트의 본문 tier 를 16px 로 통일한다.
   실측(1400px · /mileage/) : 한 창에 38 · 20 · 18 · 16 · 15 · 14 · 13 · 12 · 11 아홉
   크기가 있었다. 규격은 38(h1) → 20(섹션 제목) → 16(본문) → 13(꼬리 · 배지) 네 단뿐이고,
   15 와 14 는 그 사이에 낀 이름 없는 단이었다. 서로 붙어 있어 위계가 아니라 흔들림으로
   보였다 — .use_list(15) 바로 아래 .calc p(15), 그 아래 .box_navy(14), 또 그 아래
   .note13(13). 네 층인 줄 알았는데 실제로는 두 층이다.
   15 · 14 를 전부 16 으로, 12 였던 .note11 · .blk_tag 는 13(꼬리)으로 올린다.
   예외 하나 : .calc p.note12 는 12px/400 이 검수 기준이라 그대로 둔다(아래 :not 참조).
   /my/ 가 .def · .steps · .calc · .use_list · .note11 을 함께 쓰므로 두 창이 같이 움직인다.
   ※ /mileage/ 인라인 <style> 7절에 같은 값이 남아 있다 — 그 창 담당은 그 절을 지워도 된다.
   되돌리려면 이 절과 아래 [WIN0827D] 표시가 붙은 크기들을 14 · 15 · 12 로 되돌린다. */
.def{font-size:16px;line-height:28px;color:var(--mut);margin-top:12px;max-width:760px;}

/* ---------- 공통 블록 ---------- */
/* [WIN0827D-R2 공유시트] 카드 라운드를 10px 하나로. 지금 사이트에 10 / 8 / 14 세 값이 있고
   feed · my · mileage 가 8px 이었다. 버튼 6px · 배지 3px 은 그대로 둔다.
   이 주석은 아래 .bal_card · .empty · .step · .sum3 li · .calc · .box_navy · .stage4 a ·
   .nudge_box 에 모두 해당한다. 되돌리려면 그 열 곳을 8px 로 되돌린다. */
/* [WIN0827D-R3 공유시트] /my/ · /mileage/ 담당이 같은 건을 각각 올렸다 —
   「카드 머리에 #212429 면을 깔아 본문과 가르는 방식이 fund · guide · tools · feed 네 창에
   있고(hub.css 13절 .hub-box__hd — min-height 44 · --cm-surf-2 · 아래 1px --cm-edge)
   my · mileage 두 창에만 없어 같은 등급의 카드가 두 종류다.」 많은 쪽(4:2)으로 모은다.
   값은 .hub-box__hd 와 같고, 좌우로 빼내는 폭만 이 시트의 카드 안숨(26px · ≤600 에서 20px)에 맞춘다.
   .blk 에 overflow:hidden 을 주어 띠 윗모서리가 카드 10px 라운드에 물린다.
   align-items 를 baseline → center 로 내리는 이유 : 띠 안에서 제목과 배지의 높이가 다를 때
   baseline 은 배지를 아래로 끌어내려 44px 띠 안에서 세로 가운데가 어긋난다.
   ※ /my/ 인라인 ⓪-6 · ⓪-6b 와 /mileage/ 인라인 2절 · 6절의 같은 덩이는 이 규칙이 들어왔으므로
     지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 .blk 를 padding:26px 로, .blk_hd 를 baseline flex + margin-bottom:16px 로 되돌리고
   ≤600 분기의 .blk_hd 한 줄을 지운다. */
/* [SPEC0828-R2] padding:0 26px 26px · margin-top:20px 였다. 카드 안 좌우 안여백은 16px
   한 값이다 — .hub-box__hd · .hub-box__bd · .cm_toc__h 가 전부 16 인데 이 카드만 26 이었다.
   아래 .blk_hd 의 음수 바깥여백도 같은 토큰으로 함께 움직인다.
   되돌리려면 0 26px 26px · margin-top:20px 와 .blk_hd 의 -26px 를 함께 되돌린다. */
.blk{background:var(--cm-surf);border:1px solid var(--line);border-radius:var(--cm-card-r);padding:0 var(--cm-card-px) var(--cm-card-px);margin-top:var(--cm-block-gap);overflow:hidden;}
/* [SPEC0828-R2] margin 0 -26px 20px · padding 8px 26px · box-sizing:border-box 였다.
   그 조합의 실측 높이는 45px 인데 /mileage/ 인라인이 padding:0 26px 로 덮어 44px 이라
   같은 클래스가 두 창에서 두 높이였다. 규격은 min-height 44 + 아래선 1px = 45 다 —
   content-box 로 두면 padding 이 바뀌어도 띠 높이가 흔들리지 않는다.
   되돌리려면 위 세 값을 되살린다. */
.blk_hd{
  display:flex;align-items:center;gap:var(--cm-gap-s);flex-wrap:wrap;
  margin:0 calc(var(--cm-card-px) * -1) 20px;padding:0 var(--cm-card-px);
  min-height:var(--cm-band-h);
  box-sizing:content-box;
  background:var(--cm-surf-2);
  border-bottom:1px solid var(--cm-edge);
}
/* [WIN0827 공유시트] .blk_tit 23px · .sec_tit clamp(16,2.4vw,18) 이었다.
   마크업에서 .sec_tit 가 h2, .blk_tit 가 h3 인데 h3 가 h2 보다 컸다 — 단계가 뒤집혀 있었다.
   hub.css 의 .hub-box__ttl · .hub-card__ttl 과 같은 20px 한 단계로 합친다.
   본문 · 라벨 16px 과 h1 38px 사이의 유일한 중간값이며, 20 과 38 사이에 다른 값을 만들지 마라.
   되돌리려면 .blk_tit 를 23px, .sec_tit 를 clamp(16px,2.4vw,18px) 로 되돌린다. */
/* [WIN0827D-R2 공유시트] 20px/-1px 이었다. h2(.sec_tit 20px)와 h3(.blk_tit 20px)가 같은 크기라
   위계가 한 단으로 눈렸다. /my/ 가 쓰는 20/16 규격에 맞춘다. 20px 용 -1px 자간은
   16px 에서 글자가 붙는다. 되돌리려면 20px · -1px 로. */
.blk_tit{font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);letter-spacing:-.2px;color:var(--ink);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
/* [WIN0827D] 12px → 13px. 꼬리 tier 통일(위 .def 주석).
   ※ /my/ 담당이 「.blk_tag 를 .ex_badge 와 같은 알약으로 통일해 달라」고 올린 건은
     반영하지 않았다 — 실측으로 대조한 결과 그 요청의 전제가 지금은 맞지 않는다.
     .blk_tag 는 9개 창을 통틀어 /mileage/ 한 곳에서만 쓰이고(실측), 그 자리는
     「예시」 배지가 아니라 적립 단가표 위의 캡션
     (<p class="blk_tag">적립 단가 (운영 상황에 따라 조정될 수 있습니다)</p>)이다.
     한 줄짜리 캡션을 알약에 넣으면 폭 절반이 알약이 되고, 「예시」 배지 체계에
     배지가 아닌 것이 섞인다. /my/ 는 이미 마크업에서 .ex_badge 로 갈아 끼워
     「예시」 표기가 두 모양으로 갈리는 문제 자체가 해소돼 있다.
     알약이 필요해지면 .ex_badge 를 그대로 쓰면 된다 — 새 규칙이 필요 없다. */
.blk_tag{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
/* [SPEC0828-R2] letter-spacing:-1px 였다 — 9창의 h2 자간이 -0.16/-0.14/-0.4/-1 네 값이었고
   -1px 는 /mileage/ 한 창뿐이었다. 20px 의 -.02em(=-0.4px)으로 모은다. */
.sec_tit{font-size:20px;font-weight:700;line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);color:var(--ink);}
.note13{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin-top:12px;}   /* [SPEC0828-R2] 22px 였다 — 13px 꼬리는 20px 한 값이다 */
.note12{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin-top:var(--cm-gap-s);}   /* [SPEC0828-R3] 12px 였다 — 사다리에 12px 칸이 없다 */
/* [WIN0827 공유시트 2회차] 11px/19px 였다. 같은 한 문단(마일리지의 법적 성격 고지 —
   「판촉·사은 목적으로 무상 제공… 예치금·선불전자지급수단이 아닙니다」)이
   /my/ 에서는 11px, /mileage/ 에서는 12px 로 렌더되고 있었다 — /mileage/ 가
   페이지 안 <style> 에 .pg .blk .note11{font-size:12px;line-height:20px} 을 두고
   시트를 덮었기 때문이다(실측 : /my/ 11px · /mileage/ 12px). 법정 고지가 같은
   사이트 안에서 두 크기로 갈리면 안 되므로 그 창이 재어 둔 값을 시트로 올린다.
   색(--mut = #868B94)과 margin 은 그대로다 — 대비는 손대지 않았다.
   ※ 이 규칙이 들어왔으므로 /mileage/ 담당은 인라인 한 줄을 지워야 한 규칙이
     두 곳으로 갈리지 않는다.
   되돌리려면 11px/19px 로 되돌린다. */
/* [WIN0827D] 12px → 13px. 꼬리 tier 통일(위 .def 주석). 줄높이는 22px(.note13 과 같다). */
.note11{font-size:var(--cm-fs-tail);line-height:22px;color:var(--mut);margin-top:14px;}
.pg_foot_sp{height:46px;}

/* ---------- S1 잔액 카드 ---------- */
.bal_card{
  background:var(--cm-surf);border:1px solid var(--line);border-radius:10px;
  border-left:4px solid var(--navy);padding:26px;margin-top:18px;
}
/* [WIN0827 공유시트] clamp(20px,3.4vw,24px) 였다. h1 38 > 잔액 28 > 소제목 20 > 본문 16
   네 층을 만든다. 잔액은 이 창의 답 자체라 소제목보다 커야 한다.
   되돌리려면 clamp(20px,3.4vw,24px) 로 되돌린다. */
/* [SPEC0828-R3] clamp(22px,3vw,28px)(실측 30px) · -1px · 1.15(34.5px) 세 값이 사다리 밖이었다.
   숫자가 답이라는 사실은 크기가 아니라 자리가 말한다 — h2 칸(20/700/28/-0.4)으로 내린다.
   되돌리려면 clamp(22px,3vw,28px) · letter-spacing:-1px · line-height:1.15 로. */
.bal_num{
  font-size:var(--cm-fs-h2);font-weight:700;color:var(--ink);
  letter-spacing:var(--cm-h2-ls);line-height:var(--cm-lh-h2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* .bal_chip 은 바로 위 .ex_badge 와 한 규칙으로 묶였다([WIN0827D-R2 공유시트]).
   아래쪽 숨만 이 창 전용으로 남긴다. */
.bal_chip{margin-bottom:10px;}
.bal_note{font-size:var(--cm-fs-tail);color:var(--mut);margin-top:8px;}
.bal_conv{font-size:var(--cm-fs-tail);color:var(--mut);margin-top:4px;}
.gauge{margin-top:20px;}
.gauge_track{height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.gauge_fill{height:100%;background:var(--accent);border-radius:999px;}
/* [LAYOUT0828-R3] font-size:12px 였다 → 꼬리 칸 13px. 되돌리려면 12px 로. */
.gauge_lab{font-size:var(--cm-fs-tail);color:var(--mut);margin-top:8px;font-variant-numeric:tabular-nums;}
/* [WIN0827 공유시트] /my/ 담당 요청. repeat(3,1fr) 이었다. 그 창이 셋째 타일
   (「30일 내 소멸 예정」)을 지워 마크업이 둘이 됐고, 3열을 그대로 두면 오른쪽 한 칸이
   빈 채로 남는다. .bal_sub 는 /my/ 만 쓰므로 기본값을 2열로 바꾼다 —
   그 창이 인라인으로 두고 있던 @media(min-width:601px) 덮기가 필요 없어진다.
   ≤600 은 아래 반응형 블록이 이미 1열로 접는다(320px 에서 2열은 칸이 112px 로
   좁아져 라벨과 숫자가 겹친다는 실측 때문이다).
   되돌리려면 repeat(3,1fr) 로 되돌린다. */
.bal_sub{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;}
.bal_sub li{background:var(--offwhite);border-radius:6px;padding:14px 16px;}
.bal_sub b{display:block;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:700;color:var(--mut);}   /* [SPEC0828-R3] 12px · 줄 높이 상속(19.5px)이었다 */
.bal_sub em{
  display:block;font-style:normal;font-size:20px;font-weight:800;color:var(--ink);
  margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* 단위어 — 숫자만 남으면 원화로 읽힌다. 항상 「마일리지」를 붙인다. */
.bal_sub .unit{display:block;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:var(--cm-fw-ctl);color:var(--mut);margin-top:2px;}   /* [SPEC0828-R3] 12px/600 · 줄 높이 상속(19.5px)이었다 */
.exp_box{
  margin-top:18px;border:1px solid var(--accent);border-radius:6px;
  padding:13px 15px;font-size:var(--cm-fs-tail);line-height:22px;color:var(--ink);background:var(--cm-surf-2);
}
.cta_row{display:flex;gap:var(--cm-gap-s);flex-wrap:wrap;margin-top:20px;}   /* [SPEC0828-R2] gap:10px 였다 */
/* [SPEC0828] min-height:48px · font-size:14px 였다. /feed/ 의 같은 급 버튼(.cm_btn)은
   44px · 15px 이라 같은 사이트의 본문 버튼이 두 벌이었다(실측 : my · mileage 48/14 · feed 44/15).
   44/15 쪽으로 모은다 — 1급(채움)과 2급(고스트)이 같은 줄에 서도 밑변이 어긋나지 않는다.
   되돌리려면 min-height:48px · font-size:14px 로. */
/* [SPEC0828-R3] font-size:15px · padding 0 20px 하드코딩이었다. 15px 은 사다리에 없는 칸이라
   같은 「인증글 쓰기」가 본문 15px · 사이드 13px 두 크기로 보였다. 되돌리려면 15px 로. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cm-cta-h);padding:0 var(--cm-cta-px);border-radius:var(--cm-btn-r);font-size:var(--cm-fs-cta);font-weight:var(--cm-fw-ctl);}
.btn_fill{background:var(--accent);border:0;color:var(--cm-on-accent);}
@media (hover:hover){.btn_fill:hover{background:var(--accent-dark);}}
.btn_ghost{border:1px solid var(--cm-edge);color:var(--cm-txt);background:var(--cm-surf-2);}
/* [SPEC0828] 호버 면(--cm-surf-3)이 버튼 면(#212429)과 같은 값이 되었으므로
   고스트 버튼의 호버는 면이 아니라 테두리 · 글자를 #8FB4FF 로 올려 표시한다. */
@media (hover:hover){.btn_ghost:hover{border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);}}
.nudge_note{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin-top:var(--cm-gap-s);}   /* [SPEC0828-R3] 12px · 위 10px 이었다 */

/* ---------- S2 이력 표 ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
/* [SPEC0828-R2] radius 999px · padding 7px 15px 였다. 칩 모서리는 16px(높이의 절반)
   한 값이다 — 999px 는 32px 상자에서 눈으로는 같아 보여도 같은 창의 다른 칩(.cm_jump ·
   .hub-chip)과 값이 갈려 다음 회차에 되살아난다.
   되돌리려면 border-radius:999px · padding:7px 15px 로. */
.chip{
  display:inline-flex;align-items:center;height:var(--cm-chip-h);
  border:1px solid var(--cm-edge);background:var(--cm-surf-2);color:var(--cm-txt-2);
  border-radius:var(--cm-chip-r);padding:0 14px;font-size:var(--cm-fs-tail);font-weight:700;line-height:1;
}
.chip.on{background:var(--cm-accent-bg);border-color:var(--cm-accent);color:var(--cm-accent-soft);}
.tblwrap{overflow-x:auto;}
.led{width:100%;min-width:720px;border-collapse:collapse;}
.led th,.led td{
  text-align:left;padding:12px 10px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
  border-bottom:1px solid var(--line);vertical-align:top;
}
.led th{font-weight:700;color:var(--mut);background:var(--offwhite);white-space:nowrap;}
.led td{color:var(--ink);}
.led .c_amt,.led .c_bal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;}
.led .up{color:var(--cm-accent-soft);}
.led .dn{color:var(--ink);}
.led .c_date,.led .c_kind,.led .c_by,.led .c_exp{white-space:nowrap;color:var(--mut);}
.led .c_desc{color:var(--ink);}
.empty{
  display:none;background:var(--offwhite);border-radius:10px;
  padding:34px 20px;text-align:center;font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);color:var(--mut);   /* [SPEC0828-R3] 14px/24px 이었다 */
}
.empty.on{display:block;}

/* ---------- S3 규칙 4칸 · 사용 방법 3단계 ---------- */
/* [WIN0827D-R2 공유시트] /my/ 담당 요청. 2열 격자 + 왼쪽 2px 파란 막대였다.
   ① 2열은 5항목 · 3항목에서 오른쪽 빈 칸을 만든다. ② 파란 왼쪽 막대는 「지금 사장님께
   해당되는 값」이라는 뜻을 잔액 카드와 나눠 갖는다. ③ 15 · 14px 는 사다리에 없는 값이다.
   1열 정의표(라벨 132px · 행 사이 1px)로 바꿄다 — 이 두 클래스는 실측 결과 /my/ 만 쓴다
   (/mileage/ 는 .rule_tbl). 되돌리려면 repeat(2,1fr) · border-left:2px solid var(--accent) ·
   15px · 14px/23 로 되돌린다. */
.rules{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;}
.rule{
  /* [SPEC0828-R2] column-gap:20px 였다 — 간격 사다리에 20 자리는 없다.
     이름 칸과 설명 칸은 한 줄 안의 묶음이라 16px 이다. 되돌리려면 20px 로. */
  display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:var(--cm-gap-m);
  border-left:0;padding:14px 0 16px;border-top:1px solid var(--line);
}
.rules > .rule:first-child{border-top:0;padding-top:0;}
.rule b{grid-column:1;grid-row:1;font-size:16px;line-height:26px;color:var(--cm-txt);}
.rule > :not(b){grid-column:2;}
.rule p{font-size:16px;line-height:26px;color:var(--cm-txt-2);margin-top:0;}
.rule p ~ p{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin-top:8px;}   /* [SPEC0828-R2] 22px 였다 */
/* [WIN0827 공유시트] /mileage/ 담당 요청. 고정 3열이라 601~1024 구간에서 칸이 125px 로
   눌려 2단계 문장이 여덟 줄로 접혔다(700px 실측 칸 125×160). 최소 폭을 보장하는 auto-fit 은
   1400 · 1024 에서 3열 그대로, 700 에서 2열, ≤600 에서는 아래 1열 규칙이 그대로 이긴다 —
   새 분기점을 만들지 않는다. /my/ 에도 같은 .steps 블록이 있어 같은 증상이었다.
   되돌리려면 repeat(3,1fr) 로 되돌린다. */
/* [WIN0827D-R2 공유시트] minmax(200px,1fr) · minmax(190px,1fr) 이었다. 이번 회차에 본문 레인이
   1260/1400 에서 960 셸 안 592px 로 내려가면서(.blk 안쪽 538px) 세 칸이 2 + 1 로 접혔다 —
   세째 칸 오른쪽에 빈 자리가 하나 남고, 1→2→3 순서가 줄바꿈으로 한 번 꿪인다.
   문장을 더 좁히는 대신(직전 회차에 125px 칸에서 여덟 줄로 접혔던 그 문제다) 한 열로 쌓는다 —
   /guide/ 의 4단계 목록·/tools/ 의 약속 두 줄도 같은 세로 목록이라 네 창이 한 모양이 된다.
   되돌리려면 200px · 190px 로. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px;}
/* [SPEC0828-R3] background · border-radius 10 · padding 18 짜리 상자였다(실측 558×98 ×3, my·mileage).
   카드 안에 또 면을 깔면 경계가 세 겹이 된다 — 구역 나눔은 윗선 1px + 위 12px 한 벌이다.
   되돌리려면 이 한 줄을 예전 값으로 되돌리고 hub.css 17-25 를 지운다. */
.step{background:transparent;border-top:1px solid var(--cm-edge);border-radius:0;padding:var(--cm-gap-s) 0 0;}
/* [WIN0827D-R2 공유시트] 24px 원 · 12px 숫자였다. 12px 는 제목 사다리(38/20/16/13)에 없는 값이고,
   같은 역할의 /guide/ 마디(.hub-step__no)와 크기가 달랐다. 9개 창 번호 표식을
   22px · 13px/700 한 벌로 모은다. 면을 #2E6BFF 로 채우면 흰 13px 가 4.50:1 로 경계선이라
   (13px 는 큰 글씨가 아니다) 면을 네이비(--cm-accent-bg)로 두고 테두리에 #2E6BFF 를 쓴다 —
   흰 숫자 14.3:1. hub.css .hub-step__no 와 같은 값이다.
   되돌리려면 24px · 12px · background:var(--navy) · 테두리 없음으로. */
.step_n{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;   /* [SPEC0828-R2] 999px 였다. 원은 50% 한 값이다(.hub-ic__d · .tl-vow__n 과 같다) */
  border:1px solid var(--cm-accent);
  background:var(--cm-accent-bg);color:var(--cm-txt);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
/* [WIN0827D] 15px → 16px. 사다리(38/20/16/13)에 없는 값이었다. /my/ · /mileage/ 두 창이
   .steps 를 함께 쓰므로 여기서 올려야 두 창이 같이 맞는다. */
.step b{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-top:10px;}

/* ---------- S4 요약 3칸 ---------- */
/* [WIN0827 공유시트] /mileage/ 담당 요청. 위 .steps 와 같은 이유다 — 601~900 구간에서
   칸이 145px 로 눌려 「보유 한도 15만 마일리지(예정)」가 다섯 줄로 접혔다(700px 실측 145×105).
   되돌리려면 repeat(3,1fr) 로 되돌린다. */
/* [WIN0827D-R2 공유시트] minmax(190px,1fr) 이었다. 본문 레인이 592px 로 내려오면
   190 으로는 세 칸이 2 + 1 로 접혀 오른쪽에 빈 칸이 하나 남는다. 186 이면
   592 안에 세 칸(189px)이 들어가 한 줄로 선다(3×186 + 2×12 = 582).
   800px 뷰포트(본문 432)에서는 2열, ≤600 은 아래 반응형이 1열로 접는다 — 새 분기를 만들지 않았다.
   되돌리려면 190px 로. */
.sum3{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:12px;margin-top:22px;}
.sum3 li{
  /* [WIN0827D-R2 공유시트] border-left:4px solid var(--navy) 가 첫 칸에만 있었다. 세 칸은 같은
     성격의 요약이고, 시행 여부 차이는 꼬리표가 이미 말한다. 한 벌로 합친다.
     되돌리려면 border-left 한 줄과 아래 :nth-child(n+2) 규칙을 되살린다. */
  background:var(--cm-surf);border:1px solid var(--cm-edge);border-radius:10px;
  padding:18px;
  font-size:var(--cm-fs-body);font-weight:700;color:var(--cm-txt);line-height:var(--cm-lh-body);   /* [SPEC0828-R3] 1.4(22.4px)였다 */
}

/* [WIN0827 공유시트] /my/ 담당 요청. 그 창이 「어디에 쓰나 · 어떻게 쓰나」와
   「알아두실 것」을 각각 두 묶음으로 갈라 .blk 안에 h3 한 층이 생겼다.
   hub.css 의 .hub-colhd 는 margin:0 0 6px 이라 앞 묶음(.use_list · .rules)에
   그대로 붙어 두 묶음의 경계가 보이지 않았다. 윗숨만 준다 — 크기 · 색은 셸 규격
   (16px/700/--cm-white) 그대로다.
   .blk 는 전부 .blk_hd 로 시작하므로 이 h3 가 첫 자식이 되는 자리는 없다(실측 4곳).
   ※ /my/ 인라인 <style> 에 같은 한 줄이 남아 있다. 이 규칙이 들어왔으므로
     그 창 담당이 인라인 쪽을 지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 이 한 줄을 지운다. */
.blk h3.hub-colhd{margin-top:22px;}

/* ---------- S5 적립표 · 단계 4칸 ---------- */
/* [WIN0827D 공유시트] /mileage/ 담당 요청. 한 창 안의 두 표(적립 단가표 · 규칙표)가
   같은 역할인데 다른 규격이었다. 실측(1400px) : 단가표는 이름 칸 541px(56%) + 값
   오른쪽 끝 정렬이라 「채택답변」과 「5,000 마일리지」 사이가 빈 채로 700px 이었고,
   규칙표는 두 글자 「단위」가 328px(34%)짜리 채운 칸을 쓰고 값이 x=445 에서 시작했다.
   눈이 이름과 값을 잇지 못한다. 두 표 모두 이름 칸을 150px 로 고정하고 값을 그 바로
   옆에서 왼쪽 정렬로 시작시킨다(150px 은 가장 긴 이름 「환급·양도」의 실측 폭).
   값이 숫자인 단가표에는 tabular-nums 가 이미 걸려 있어 왼쪽 정렬로도 자릿수가 맞는다.
   ≤600 에서는 이 시트 끝 반응형 절이 38% 로 되돌린다(375px 에서 값 칸이 159px 로 눌린다).
   글자 크기 14 → 16 은 위 .def 주석의 tier 통일이다.
   되돌리려면 width:56% · text-align:right · 14px 로 되돌린다. */
.rate{width:100%;border-collapse:collapse;}
.rate th,.rate td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:16px;line-height:var(--cm-lh-body);text-align:left;}   /* [SPEC0828-R2] 24px 였다 */
.rate th{font-weight:700;color:var(--ink);width:150px;}
/* [WIN0827D-R2 공유시트] 값이 옆은 파랑(--cm-accent-soft)이라 링크처럼 보였다. 본문색으로 내린다.
   되돌리려면 var(--cm-accent-soft) 로. */
.rate td{text-align:left;font-weight:700;color:var(--cm-txt);font-variant-numeric:tabular-nums;white-space:nowrap;}
.box_navy{
  /* [WIN0827D-R2 공유시트] border-left:4px solid var(--navy) 였다. 파랑은 링크와 주버튼에만
     쓰기로 확정된 건이다. 이 칸은 누를 수 없는 안내 문단이고, 안의 링크 하나만
     파란으로 남으면 무엇을 누를 수 있는지가 오히려 또렷해진다.
     되돌리려면 border-left:4px solid var(--navy) 로. */
  margin-top:16px;background:var(--offwhite);border-radius:10px;
  border:1px solid var(--cm-edge);padding:16px 18px;
  /* [WIN0827D] 14px/24 → 16px/26. 본문 tier 통일(위 .def 주석). */
  font-size:16px;line-height:26px;color:var(--ink);
}
.stage4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;}
/* [SPEC0828-R3] 테두리 + 라운드 10 + 면 + 안여백 16 짜리 「카드형 링크」였다(실측 131×120 ×4).
   누르는 것의 높이는 24·32·36·44 넷뿐인데 120px 이 다섯째 값을 만들고 있었고,
   카드 안 3겹 면이기도 했다. 옷을 벗기면 높이는 글자 사다리가 정한다(16줄 24 + 13줄 20 = 44).
   되돌리려면 이 한 줄을 예전 값으로 되돌리고 hub.css 17-25 를 지운다. */
.stage4 a{
  display:block;border:0;border-top:1px solid var(--cm-edge);border-radius:0;padding:var(--cm-gap-s) 0 0;background:transparent;
}
@media (hover:hover){.stage4 a:hover b{text-decoration:underline;text-underline-offset:2px;}}   /* [SPEC0828-R3] 테두리를 걷었으므로 호버는 링크 밑줄로 말한다 */
.stage4 b{display:block;font-size:var(--cm-fs-h3);font-weight:700;line-height:var(--cm-lh-h3);color:var(--cm-link);}   /* [SPEC0828-R3] 카드 옷을 벗은 링크는 색이 누르는 것임을 말한다 */
.stage4 span{display:block;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);margin-top:0;font-weight:700;}   /* [SPEC0828-R3] 12px · 위 8px · 파랑이었다 */

/* ---------- S6 사용처 · 예시 카드 · 넛지 ---------- */
/* [WIN0827D 공유시트] /my/ · /mileage/ 두 담당이 같은 문제를 각각 올렸다 —
   「채운 면 + 둥근 모서리 + 굵은 글씨」는 이 사이트에서 누를 수 있는 것
   (.stage4 a · .btn · .btn_ghost · .mg_w_bt)이 입는 옷인데, 아무 데도 가지 않는
   여섯 항목이 그 옷을 입고 버튼 여섯 개로 보였다(1400 · 375 캡처 모두 확인 ·
   375px 에서는 그 여섯 덩이가 화면 355px 를 차지했다). 15px 도 사다리에 없는 값이었다.
   두 요청이 갈라진 곳은 「무엇으로 되돌리나」 한 가지다 —
     /my/    : 왼쪽 2px 세로선 + padding:8px 0 8px 14px + gap:4px 24px
     /mileage/: 아래 1px 밑줄 + padding:12px 2px + row-gap:0 · column-gap:28px
   밑줄 목록 쪽으로 맞췄다. 이유 둘 — ① 왼쪽 세로선은 이 시트에서 이미 .rule 이
   쓰는 언어라(색만 다른 같은 모양) 역할이 겹친다. ② 2열 · row-gap 0 이면 두 열의
   밑줄이 같은 y 에 서서 목록이 표처럼 읽힌다. 제외 항목의 점선 밑줄은 이 사이트가
   이미 쓰는 「지금은 쓸 수 없는 것」 언어(.mg_w_bt[disabled] 와 같다)를 그대로 잇는다.
   /my/ 요청의 나머지(16px · 400 · --cm-txt · 면 없음 · 모서리 0)는 그대로 지켜진다.
   ≤600 열 간격은 이 시트 끝 반응형 절에서 0 으로 둔다(그 폭에서는 1열이다).
   되돌리려면 background:var(--offwhite) · border-radius:6px · padding:14px 16px ·
   font-size:15px · font-weight:700 과 gap:10px, .excl 의 면 · 1px dashed 로 되돌린다. */
/* [SPEC0828-R2] column-gap:28px 였다 — 카드 안 열과 열은 24px 한 값이다. */
.use_list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--cm-gap-l);row-gap:0;}
.use_list li{
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:12px 2px;
  font-size:16px;font-weight:400;color:var(--ink);
}
.use_list li.excl{
  background:transparent;border:0;border-bottom:1px dashed var(--line);
  color:var(--mut);font-weight:400;
}
/* [SPEC0828-R3] 테두리 + 라운드 10 + 면 #212429 짜리 상자였다(실측 558×211). 위 .step 과 같은 이유. */
.calc{
  margin-top:var(--cm-gap-m);border:0;border-top:1px solid var(--cm-edge);border-radius:0;padding:var(--cm-gap-s) 0 0;background:transparent;
}
.calc b{font-size:var(--cm-fs-tail);font-weight:700;color:var(--mut);}
/* [WIN0827D] 15px → 16px. 본문 tier 통일(위 .def 주석).
   .note12 는 아래 규칙이 12px/400 으로 다시 뺀다(검수 기준값이다). */
.calc p{font-size:16px;line-height:26px;color:var(--ink);margin-top:8px;font-weight:700;}
/* [WIN0827 공유시트] 바로 위 .calc p(0,1,1)가 .note12(0,1,0)를 이겨, 면책 한 줄이
   예시 계산식과 똑같은 15px/700 으로 렌더됐다. 사실이 크고 면책은 작되 읽히는
   회색이어야 한다(--cm-mut · #212429 위 4.55:1). /mileage/ 가 페이지 안에서 같은 값으로
   덮어 두었고, 이 규칙이 들어오면 그 임시 규칙은 지워도 된다.
   되돌리려면 이 한 줄을 지운다. */
.calc p.note12{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:400;color:var(--cm-mut);}   /* [SPEC0828-R3] 12px/21px 였다 */
/* [PORTAL0827] 바탕이 var(--navy) = --cm-accent(#2E6BFF) 였다. 그 위의 본문
   #D6E0F5 가 3.40:1 로 AA 미달이었다(흰 글자로 바꿔도 4.50:1 로 경계선이다).
   글자색을 건드리는 대신 바탕을 한 단계 눌러 --cm-accent-dk 로 바꿨다 —
   본문 5.05:1 · 제목 흰 글자 6.70:1 로 둘 다 넉넉히 넘긴다.
   되돌리려면 var(--cm-accent-dk) 를 var(--navy) 로 바꾼다. */
/* [WIN0827D-R2 공유시트] 바닥이 --cm-accent-dk(#1D4ED8) · 제목 18px · 본문 14px 였다.
   넷지 카드가 화면에서 대비가 가장 세서 h1 과 주버튼보다 먼저 눈에 들었고(/feed/ 도 같다),
   18 · 14px 는 규격 사다리(38/20/16/13)에 없는 단이다. 바닥을 네이비(#1E2A44)로 내린다 —
   대비 : #F3F4F5 13.5:1 · #D1D3D8 9.4:1 · 안의 주버튼 경계 3.03:1(WCAG 1.4.11 통과).
   되돌리려면 --cm-accent-dk · #fff · 18px · 14px/24 · #D6E0F5 로. */
/* [SPEC0828-R2] 네이비 면(#1E2A44) · padding 22px · 테두리 없음이었다.
   네이비 면은 칩의 선택 상태와 배지 강조 한 종류에만 쓴다 — 본문 블록이 면을 채우면
   같은 급의 다른 카드(면 #1A1C20 · 1px #555D6D)와 위계가 어긋나고, 그 위에 놓인
   2급 고스트 버튼(면 #212429)이 네이비와 1.2:1 이라 형태가 보이지 않는다.
   본문 블록은 카드 한 벌을 그대로 받는다. 22px 도 어떤 사다리에도 없는 값이다.
   되돌리려면 background:var(--cm-accent-bg) · padding:22px · 테두리 없음으로. */
.nudge_box{
  margin-top:var(--cm-block-gap);
  background:var(--cm-surf);border:1px solid var(--cm-edge);
  color:var(--cm-txt);border-radius:var(--cm-card-r);padding:var(--cm-notice-pad);
}
.nudge_box b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--cm-txt);}
.nudge_box p{font-size:16px;line-height:26px;color:var(--cm-txt-2);margin-top:8px;}
.nudge_box .btn_fill{margin-top:14px;}

/* ---------- S7 규칙표 · FAQ ---------- */
/* [WIN0827D] 14px/23 → 16px/26 · width:34% → 150px (위 .rate 주석과 한 짝이다). */
.rule_tbl{width:100%;border-collapse:collapse;}
.rule_tbl th,.rule_tbl td{
  padding:13px 12px;border-bottom:1px solid var(--line);font-size:16px;
  line-height:26px;text-align:left;vertical-align:top;
}
.rule_tbl th{width:150px;font-weight:700;color:var(--ink);background:var(--offwhite);white-space:nowrap;}
/* [WIN0827D-R2 공유시트] --mut(#868B94) 였다. 같은 규칙 값이 /my/ 쪽(.rule p · #F3F4F5)보다 흐려
   같은 내용이 창마다 다른 세기로 읽혔다. 되돌리려면 var(--mut) 로. */
.rule_tbl td{color:var(--cm-txt);font-weight:400;}
/* [WIN0827D 공유시트] /mileage/ 담당 요청 — 겹친 가로선과 섞인 곡률.
   ① 규칙표 마지막 행의 아래선과 35px 뒤 h3 의 윗선이 나란히 두 줄로 보였다.
      표를 닫는 선은 h3 의 윗선이 이미 맡는다.
   ② .faq 의 윗선과 그 h3 의 윗선도 겹쳐, 제목이 두 선 사이에 갇혀 있었다.
   ③ 이름 칸의 채운 면만 각진 사각이라 한 카드 안에서 세 가지 곡률이 섞였다
      (.calc · .box_navy · .stage4 a · .btn 은 6~8px). 바깥 두 귀만 맞춘다.
   되돌리려면 이 세 규칙을 지우고 .faq 에 border-top:1px solid var(--line) 을 되살린다. */
.rule_tbl tr:last-child th,
.rule_tbl tr:last-child td{border-bottom:0;}
.rule_tbl tr:first-child th{border-top-left-radius:6px;}
.rule_tbl tr:last-child th{border-bottom-left-radius:6px;}
.faq{border-top:0;}
.faq details{border-bottom:1px solid var(--line);}
/* [WIN0827D 공유시트] /mileage/ 담당 요청. 줄 전체가 누르는 자리인데 커서 말고는
   아무 신호가 없었다(호버 · 열림 표시 둘 다 없음). 규격이 허용한 유일한 효과인
   background-color .15s 하나만 쓴다. 왼쪽으로 10px 넓혀 줄 전체가 눌린다는 것이
   보이게 한다 — 카드 안숨 26px(≤600 은 20px) 안이라 넘치지 않는다.
   열린 항목의 질문은 옅은 파랑(팔레트 안 · + / − 기호와 같은 색)으로 두어
   「지금 이 답을 보고 있다」가 보이게 한다. 포커스 링은 hub.css 의
   .hub-body :focus-visible 이 이미 맡는다. 15px → 16px 은 tier 통일이다.
   되돌리려면 padding-left · margin-left · border-radius · transition · 호버 ·
   [open] 규칙을 지우고 padding:16px 30px 16px 0 · font-size:15px 로 되돌린다. */
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:16px 40px 16px 10px;margin-left:-10px;
  /* [LAYOUT0828-R6] border-radius:6px 였다. 배경도 테두리도 없는 줄에 모서리만 남아 있어
     다음 회차에 배경이 붙는 순간 카드로 되살아난다(카드 재고 : 죽은 radius 세 곳 중 하나).
     호버 바닥은 아래 :hover 규칙이 사각으로 칠한다. 되돌리려면 6px 로. */
  border-radius:0;
  font-size:16px;font-weight:700;color:var(--ink);
  transition:background-color .15s;
}
@media (hover:hover){.faq summary:hover{background-color:var(--cm-surf-2);}}
.faq details[open] summary{color:var(--cm-accent-soft);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  /* [WIN0827D-R2 공유시트] 18px 이었다 — 사다리(38/20/16/13)에 없는 단이고,
     같은 일을 하는 hub.css .hub-fold__mk 와 크기가 달랐다. 둘 다 16px 로 모은다.
     되돌리려면 18px 로. */
  content:"+";position:absolute;right:6px;top:14px;color:var(--cm-accent-soft);font-size:16px;font-weight:700;
  pointer-events:none;
}
.faq details[open] summary::after{content:"\2212";}
.faq p{font-size:16px;line-height:26px;color:var(--mut);padding:0 0 18px 10px;}
@media (prefers-reduced-motion:reduce){
  .faq summary{transition:none;}
}

/* ---------- 포털 셸 이식분 (assets/portal.css 와 함께 읽는다) ----------
   우 레일(.pt-c) 안에 들어간 이 두 페이지 전용 조각만 둔다.
   레일에는 잔액·한도 같은 수치를 두지 않는다 — 본문과 어긋날 자리를 만들지 않는다. */
.mg_rl_links li + li{margin-top:10px;}
.mg_rl_links a{font-size:var(--cm-fs-tail);font-weight:600;color:var(--cm-accent-soft);}
@media (hover:hover){.mg_rl_links a:hover{color:var(--cm-accent-soft);}}
/* [WIN0827D-R2 공유시트] rgba(255,255,255,.78) 이었다. 넷지 카드 바닥이 네이비(#1E2A44)로 내려왔으므로
   반전 카드 전용 흰색을 쓸 이유가 없다. 본문2 색으로(9.4:1). 되돌리려면 rgba(255,255,255,.78) 로. */
.mg_rl_tx{font-size:var(--cm-fs-tail);line-height:1.6;color:var(--cm-txt-2);}
.mg_rl_bt{
  display:flex;align-items:center;justify-content:center;
  height:36px;margin-top:12px;border-radius:6px;
  background:var(--accent);color:#fff;font-size:var(--cm-fs-tail);font-weight:600;
}
@media (hover:hover){.mg_rl_bt:hover{background:var(--accent-dark);}}
/* [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
   .mg_rl_bt), 이 규칙이 들어오면 그 줄은 지워도 된다.
   되돌리려면 이 규칙을 지운다. */
/* [WIN0827D-R2 공유시트] 흰 면 + 카드색 글자였다. 카드 바닥이 네이비로 내려왔으므로 다시 주버튼
   본래 모양(파란 면 + 흰 글자)으로 돌린다 — #1E2A44 위 #2E6BFF 면끼리 3.03:1 로
   1.4.11 을 넘고, /feed/ 의 같은 자리(.cm_rl_bt_acc)와 한 모양이 된다.
   되돌리려면 background:#FFFFFF;border-color:#FFFFFF;color:var(--cm-accent-dk) 로. */
.pt-c--nudge .mg_rl_bt{
  background:var(--cm-accent);border-color:var(--cm-accent);color:#FFFFFF;
}
.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 공유시트] /my/ 담당 요청. 세 칸의 라벨 길이가 달라(셋째 칸은 꼬리표가 붙어
   두 줄) 라벨 · 숫자 · 단위 세 줄이 칸마다 다른 높이에 섰다. ul 에 행 3개를 정의하고
   각 li 가 그 행을 subgrid 로 물려받게 해 줄을 맞춘다. min-height 로 라벨을 2줄분
   고정하는 방법은 쓰지 않는다 — 셋 다 한 줄인 폭에서 빈 공간 18px 이 그대로 남는다.
   ≤600 에서는 칸이 세로로 쌓여 맞출 상대가 없으므로 601 이상에서만 건다(기존 600 분기의
   반대쪽이지 새 분기점이 아니다). .bal_sub 는 /my/ 만 쓴다.
   이 규칙이 들어왔으므로 /my/ 의 인라인 <style> 덩이는 지워도 화면이 그대로다.
   되돌리려면 이 블록을 지운다. */
/* [WIN0827D-R2 공유시트] 이 규칙은 @media (min-width:601px) 안에 있었다. 분기는 1024 / 600 두 개뿐이라
   확정된 건이고, 이 시트에 min-width 가 하나만 있어 다음 사람이 규칙을 어디서 찾을지 모른다.
   기본값으로 올리고 ≤600 분기에서 푸는 방향으로 뒤집는다(화면은 같다).
   되돌리려면 두 줄을 @media (min-width:601px) 로 다시 감싸고 ≤600 분기의 푸는 두 줄을 지운다. */
.bal_sub{grid-template-rows:auto auto auto;}
.bal_sub li{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;}

/* ---------- 반응형 : 분기는 600px 하나 ---------- */
@media (max-width:600px){
  /* [WIN0827D-R3 공유시트] 이 폭에서 .blk 안숨이 20px 로 줄므로 머리 띠를 빼내는 폭도 맞춘다.
     안 맞추면 띠가 카드 밖으로 6px 넘친다. 되돌리려면 이 한 줄을 지운다. */
  /* [SPEC0828-R2] margin-left/right:-20px · padding-left/right:20px 가 함께 있었다.
     좌우 값은 이제 --cm-card-px 한 곳에서 나오므로(17-13) 여기서는 아래 여백만 정한다 —
     남겨 두면 좁은 폭에서 카드 안여백 16 과 띠 빼냄 20 이 어긋나 띠가 4px 씩 안으로 들어온다.
     되돌리려면 네 값을 되살린다. */
  .blk_hd{margin-bottom:18px;}
  .bal_sub,.rules,.steps,.sum3,.stage4,.use_list{grid-template-columns:1fr;}
  /* [WIN0827D-R2 공유시트] 위 min-width:601px 분기를 뒤집은 몴. 칸이 세로로 쌓이면 줄을 맞춤 상대가 없다. */
  .bal_sub{grid-template-rows:none;}
  .bal_sub li{grid-row:auto;display:block;}
  .rule{grid-template-columns:minmax(0,1fr);}
  .rule b{grid-column:1;}
  .rule > :not(b){grid-column:1;}
  .rule p{margin-top:4px;}
  /* [WIN0827D 공유시트] 두 표의 이름 칸 150px 고정을 이 폭에서는 푼다 — 375px 에서
     값 칸이 159px 로 눌려 「부가서비스 요금 할인만」이 세 줄로 접힌다. 비율로 돌린다.
     .use_list 는 여기서 1열이므로 열 간격이 할 일이 없다.
     되돌리려면 이 세 줄을 지운다. */
  .rate th,
  .rule_tbl th{width:38%;}
  .use_list{column-gap:0;}
  /* [WIN0827D-R3 공유시트] padding:20px 였다. 카드 머리 띠가 들어오면서 위 안숨은 띠가
     대신하므로 0 으로 둔다(기본값 0 26px 26px 의 좁은 화면 몫이다).
     되돌리려면 padding:20px 로. */
  .blk{padding:0 var(--cm-card-px) var(--cm-card-px);}   /* [SPEC0828-R2] 0 20px 20px 였다 — 카드 안여백은 16px 한 값이다 */
  .bal_card{padding:20px;}
  .cta_row .btn{width:100%;}

  /* 이력 표는 가로 스크롤 대신 행을 카드로 접는다 */
  .tblwrap{overflow-x:visible;}
  .led{min-width:0;display:block;}
  .led thead{display:none;}
  .led tbody,.led tr,.led td{display:block;width:auto;}
  .led tr{
    border:1px solid var(--line);border-radius:8px;background:var(--cm-surf-2);
    padding:14px 16px;margin-bottom:10px;position:relative;
  }
  .led td{border:0;padding:2px 0;}
  .led .c_date,.led .c_kind{display:inline;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);}   /* [SPEC0828-R3] 12px 였다 */
  .led .c_kind::before{content:" · ";}
  .led .c_desc{display:block;font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);color:var(--ink);margin-top:6px;}   /* [SPEC0828-R3] 15px 였다 */
  .led .c_amt{display:block;text-align:left;font-size:22px;margin-top:8px;}
  .led .c_bal::before{content:"잔액 ";}
  .led .c_by::before{content:"처리 ";}
  .led .c_exp::before{content:"소멸 예정 ";}
  .led .c_bal,.led .c_by,.led .c_exp{
    display:inline-block;margin-right:12px;margin-top:6px;
    font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:400;color:var(--mut);text-align:left;   /* [SPEC0828-R3] 12px 였다 */
  }
}

/* [LEGAL0826] 밝은 배경 푸터의 색 뒤집기 — 푸터가 portal.css 의 .pt-ft 로
   교체되면서 그 파일이 같은 색 규칙(.pt-ft__biz · .pt-ft__legal)을 갖는다.
   여기 있던 .mg_ft 계열 규칙은 대상 마크업이 사라져 지웠다. */

/* =========================================================
   중 위젯 180 내부 (.pt-side · portal.css 8절)
   껍데기(.pt-w · .pt-w__ttl · .pt-w--nudge)는 portal.css 가 갖고,
   여기에는 안쪽 조각만 둔다. 이 페이지의 레일 조각(mg_rl_*)과 같은 접두사다.
   숫자는 한 줄도 두지 않는다 — 본문 원문과 어긋날 자리를 만들지 않기 위해서다.
   ========================================================= */
.mg_w_tx{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin:0 0 8px;}   /* [SPEC0828-R3] 12px/1.5(18px)였다 */
.mg_w_row{display:flex;align-items:center;gap:var(--cm-gap-xs);margin:0 0 8px;}   /* [SPEC0828-R2] gap · 아래 6px 였다 */
/* [WIN0827D-R3 공유시트] /mileage/ 담당 요청. margin-left:auto 였다. 같은 「출석체크」 카드의
   「준비 중」 배지가 /feed/ 에서는 제목 옆, /my/ · /mileage/ 에서는 카드 오른쪽 끝이었다 —
   한 물건이 세 창에서 두 모습이다. 배지는 제목을 수식하는 말이라 제목에 붙어야 한 덩이로 읽힌다.
   (카드 폭 250px 짜리 위젯에서 오른쪽 끝은 「상태 열」이 아니라 그냥 먼 자리다 —
   912px 카드 머리 띠에서 배지를 오른쪽 끝에 세우는 hub.css .hub-box__hd 와는 자리의 뜻이 다르다.)
   배지의 면 · 테두리 · 크기(.mg_w_soon)는 9개 창 공통 규격이라 손대지 않았다.
   되돌리려면 margin-left:auto 로. */
.mg_w_row > :last-child{margin-left:0;}
.mg_w_ttl0{margin:0;}
/* [WIN0827D 공유시트] /mileage/ 담당 요청. 11px → 12px. 11px 은 이 창에서 준비 중 배지와
   출석 규칙 한 줄 두 곳뿐이었고, 둘 다 「지금 왜 못 쓰는가」를 말하는 글이라 가장 작게
   둘 자리가 아니다. 12px 은 같은 카드의 위젯 제목(.pt-w__ttl)과 같은 크기다.
   대비 : #868B94 on #212429 = 4.55:1 · on #1A1C20 = 4.98:1 — 둘 다 AA 를 넘는다.
   /my/ 가 같은 .mg_w_* 를 쓰므로 여기서 올려야 두 창이 같이 맞는다.
   되돌리려면 11px 로 되돌린다. */
/* [WIN0827D-R2 공유시트] 12px · radius 2px · --mut · --line 이었다. 「준비 중」 배지가 13(.hub-badge--soon) /
   12(여기) / 11(.pt-chip) 세 크기로 갈려 있었다. 셸의 .hub-badge--soon 과 같은 값으로 모은다.
   위젯 4종은 feed · my · mileage 가 함께 쓰므로 이 한 곳에서 셋이 같이 맞는다.
   되돌리려면 12px · 2px · --mut · --offwhite · --line 로. */
/* [SPEC0828-R3] line-height:1.3(16.9px) · padding 2px 7px 이라 실측 높이가 23px 였다 —
   다른 배지 30여 개는 전부 24px 이다. 배지 한 벌(24 · 0 8px · r3 · 13/700/1)에 모은다.
   되돌리려면 line-height:1.3 · padding:2px 7px 로. */
.mg_w_soon{
  display:inline-flex;align-items:center;
  min-height:var(--cm-badge-h);
  font-size:var(--cm-fs-tail);font-weight:var(--cm-fw-ctl);line-height:var(--cm-lh-ctl);
  padding:0 var(--cm-badge-px);border-radius:var(--cm-badge-r);
  color:var(--cm-txt-2);background:var(--cm-surf-2);border:1px solid var(--cm-dim);
}
.mg_w_lk{display:block;margin-top:6px;font-size:var(--cm-fs-tail);color:var(--cm-accent-soft);}
@media (hover:hover){.mg_w_lk:hover{text-decoration:underline;}}
/* [SPEC0828-R2] gap:4px 였다 — 칩과 칩 사이는 8px 한 값이다. */
.mg_w_chips{display:flex;flex-wrap:wrap;gap:var(--cm-gap-xs);margin:0 0 8px;}
/* [WIN0827 공유시트] 10px 이었다 — 이 사이트에서 가장 작은 글자(11px)보다도 작았다.
   되돌리려면 10px 로 되돌린다. */
/* [WIN0827D 공유시트] /mileage/ 담당 요청. border-radius 2px → 6px. 이 칩 바로 아래
   버튼이 6px, 위 카드가 8px 라 한 칸 안에서 세 가지 곡률이 섞였다. 버튼에 맞춘다.
   되돌리려면 2px 로 되돌린다. */
/* [SPEC0828-R2] 12px · radius 6px · padding 2px 5px(실측 24×40 배지 모양)였다.
   이 네 칸(준비 · 등록 · 자금 · 운영)은 누르는 링크이므로 칩이다 — /feed/ 의 같은 자리
   (.cm_wg_steps a)와 함께 칩 한 벌(32 · r16 · 13px/700)로 모은다.
   되돌리려면 12px · border-radius:6px · padding:2px 5px 로. */
.mg_w_chip{
  display:inline-flex;align-items:center;height:var(--cm-chip-h);padding:0 14px;
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1;color:var(--cm-txt-2);background:var(--cm-surf-2);
  border:1px solid var(--cm-edge);border-radius:var(--cm-chip-r);
}
@media (hover:hover){.mg_w_chip:hover{border-color:var(--accent);color:var(--cm-accent-soft);}}
/* [WIN0827D-R3 공유시트] /my/ 담당 요청. color 가 --mut 였다. 비활성 「오늘 출석 찍기」와
   눌리는 사이드 버튼이 글자 색까지 같아(#868B94) 점선 / 실선 테두리 하나로만 갈렸다.
   누를 수 있는 것만 글자를 --cm-txt-2 로 올린다 — 아래 [disabled] 가 --cm-mut 로 되돌린다.
   대비 : #D1D3D8 on #212429 = 9.6:1 · #868B94 on #1A1C20 = 4.98:1 (둘 다 AA).
   호버는 background-color .15s 하나뿐이다(그 외 효과 금지) · reduce 에서 끈다.
   feed · my · mileage 세 창이 같은 위젯 4종을 쓰므로 여기 한 곳에서 셋이 같이 맞는다.
   되돌리려면 color:var(--mut) 한 줄로 되돌리고 아래 세 규칙을 지운다. */
.mg_w_bt{
  display:inline-flex;align-items:center;justify-content:center;
  /* [SPEC0828] 34px 였다. /feed/ 의 같은 자리(.cm_rl_bt)가 36 이라 같은 카드 · 같은 라벨의
     사이드 버튼이 세 창에서 34 와 36 두 값이었다. 36 으로 모은다. 되돌리려면 34px 로. */
  width:100%;min-height:var(--cm-btn-h);padding:0 var(--cm-btn-px);
  /* [SPEC0828-R3] font-weight:600 이었다. 44px 본문 버튼은 700 이라 같은 누르는 것이
     두 굵기였다 — --cm-fw-ctl 한 값으로 모은다. 되돌리려면 600 으로. */
  font-size:var(--cm-fs-btn);font-weight:var(--cm-fw-ctl);border-radius:var(--cm-btn-r);
  /* [SPEC0828] color 가 --cm-txt-2 였다. /feed/ 의 같은 급(.cm_rl_bt)이 --cm-txt 라
     같은 3급 버튼의 글자가 두 색이었다. --cm-txt 로 모은다(#212429 위 15.4:1). */
  border:1px solid var(--cm-edge);background:var(--cm-surf-2);color:var(--cm-txt);
  transition:background-color .15s;
}
@media (hover:hover){a.mg_w_bt:not(.mg_w_bt-fill):not(.mg_w_bt-navy):hover{background:var(--line);}}
@media (prefers-reduced-motion:reduce){.mg_w_bt{transition:none;}}
/* [WIN0827D 공유시트] /mileage/ 담당 요청. cursor:default 뿐이라 비활성 출석 버튼이
   보통 고스트 버튼(.mg_w_bt)과 똑같이 생겨 눌리는 줄 알게 됐다. 점선은 이 사이트에서
   「지금은 쓸 수 없는 것」(.use_list li.excl)이 이미 쓰는 언어다.
   되돌리려면 cursor:default 한 줄로 되돌린다. */
/* [WIN0827D-R3 공유시트] /mileage/ 담당 요청. 점선 · not-allowed 만 있고 면은 --cm-surf-2
   그대로라, 비활성 「오늘 출석 찍기」가 실제로 눌리는 고스트 버튼과 같은 면을 깔고 있었다.
   훑을 때 점선 하나는 보이지 않는다. 면을 걷으면 「채운 면 = 누를 수 있는 것」이 세 창에서
   같은 뜻이 된다 — community.css 의 .cm_wg_bt[disabled] 도 같은 값으로 맞췄다.
   대비 : #868B94 on #1A1C20 = 4.98:1. #555D6D 는 테두리로만 쓴다(글자 금지).
   되돌리려면 border-style:dashed;cursor:not-allowed 두 줄만 남긴다. */
.mg_w_bt[disabled]{
  background:transparent;
  border-color:var(--cm-dim);
  border-style:dashed;
  color:var(--cm-mut);
  cursor:not-allowed;
}
.mg_w_bt-fill{background:var(--accent);border-color:var(--accent);color:var(--cm-on-accent);}
@media (hover:hover){.mg_w_bt-fill:hover{background:var(--accent-dark);border-color:var(--accent-dark);}}
/* [SPEC0828] .mg_w_bt-navy 두 줄을 삭제했다.
   왜 : 같은 카드 · 같은 라벨 · 같은 폭의 「인증글 남기기」가 /my/ 는 회색 외곽선(.mg_w_bt),
   /mileage/ 는 이 수식 클래스 때문에 파랑 채움이었다(실측 rgb(46,107,255)). 사이드에 파란
   채움이 서면 「어디를 눌러야 하는가」가 흐려진다 — 파란 채움은 본문 주 CTA 1개 + 넛지 1개뿐이다.
   이름과 값도 어긋나 있었다 : --navy 는 hub-legacy.css 에서 실제로 #2E6BFF 를 가리킨다.
   /mileage/ 마크업의 class="mg_w_bt mg_w_bt-navy" 는 그대로 두어도 3급 고스트로 떨어진다.
   되돌리려면 이 두 줄을 되살린다. */
/* [WIN0827D] 11px → 12px. 위 .mg_w_soon 주석과 같은 이유(같은 짝이다). */
.mg_w_foot{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--mut);margin:8px 0 0;}   /* [SPEC0828-R3] 12px/1.45(17.4px)였다 */

/* [WIN0827D 공유시트] /mileage/ 담당 요청. 규격 꼬리표 한 벌을 새로 둔다.
   「(도입 예정 · 약관 개정 후 적용)」 같은 꼬리표가 앞 문장과 완전히 같은 크기 · 굵기 ·
   색이라, 아직 없는 규칙이 이미 있는 사실과 같은 무게로 읽혔다(375px 에서는
   「보유 한도 150,000 마일리지 (도입 예 / 정 · 약관」처럼 괄호 한가운데서 꺾였다).
   꼬리표는 사실이 아니라 사실의 조건이다 — 한 단 내려 꼬리(13px/400/--cm-mut)로 두고
   줄을 바꾼다. 문자열은 괄호까지 한 글자도 바꾸지 않는다(표시 규격이라 검수 대상이다).
   대비 : #868B94 on #1A1C20 = 5.55:1 · on #212429 = 4.55:1.
   /mileage/ 마크업에 <span class="mg_tail"> 이 이미 들어와 있고 /my/ 도 같은 꼬리표를
   쓰므로 두 창이 함께 읽는 이 시트에 둔다(/terms/ · /privacy/ 는 이 시트를 싣지 않는다 —
   그 두 창에 같은 꼬리표가 필요해지면 hub.css 쪽에 같은 이름으로 한 벌 더 두어야 한다).
   ※ /mileage/ 인라인 <style> 8절에 같은 값이 남아 있다 — 그 창 담당은 그 절을 지워도 된다.
   되돌리려면 이 세 규칙을 지운다. */
.mg_tail{
  display:block;margin-top:4px;
  font-size:var(--cm-fs-tail);font-weight:400;line-height:20px;
  letter-spacing:0;color:var(--cm-mut);
}
.rule_tbl td .mg_tail,
.rate td .mg_tail{margin-top:2px;}
/* 넛지(반전 카드) 안쪽 */
/* [WIN0827 공유시트] rgba(255,255,255,.72) 였다. 카드 바닥이 --pt-navy(=#2E6BFF)라
   합성 대비가 3.08:1 로 AA 미달이었다. portal.css 에서 바닥을 #1D4ED8 로 내렸고,
   글자는 이 파일의 .nudge_box 가 이미 쓰는 #D6E0F5 로 맞춘다(5.05:1).
   /mileage/ 가 페이지 안에서 같은 값으로 덮어 두었고, 이 규칙이 들어오면 그 임시
   세 줄은 지워도 된다. 되돌리려면 rgba(255,255,255,.72) 로 되돌린다. */
/* [SPEC0828-R2] #D6E0F5 였다(파란 면 위 글자였다). portal.css 에서 이 카드의 면을
   #1A1C20 로 되돌렸으므로 팔레트 밖 색을 지우고 다른 사이드 카드와 같은 보조색을 받는다. */
.pt-w--nudge .mg_w_tx,
.pt-w--nudge .mg_w_foot{color:var(--cm-txt-2);}
/* [WIN0827D-R3 공유시트] 흰 면 + #1D4ED8 글자였다. 그 뒤집기는 넛지 카드 바닥이
   #1D4ED8 이던 시절(면끼리 1.47:1)의 대책인데, portal.css 가 .pt-w--nudge 바닥을
   네이비 --cm-accent-bg(#1E2A44)로 내린 뒤로는 파란 버튼이 카드와 3.03:1 이라
   1.4.11 을 넘는다. 그 결과 /my/ 의 넛지 버튼만 흰 알약이고 /feed/(.cm_rl_bt_acc) ·
   /mileage/(.mg_w_bt-navy)는 파란 버튼이라, 같은 카드의 같은 버튼이 세 창에서 두 모습이었다.
   두 창 쪽(파랑)으로 모은다 — 대비 : 면 #2E6BFF on #1E2A44 = 3.03:1 (1.4.11 통과) ·
   글자 #FFFFFF on #2E6BFF = 4.50:1 (AA 통과).
   선택자 무게가 (0,3,0) 인 이유 : /my/ 페이지 <style> ⓪-7 의 .pt-side a.mg_w_bt (0,2,1) 이
   글자색을 가로채 흰 면 위에서 #D1D3D8(1.6:1)로 나왔다. 면을 만든 규칙이 그 위의 글자색도
   정해야 한다. 그 창 담당이 ⓪-7 을 지우면 이 무게는 낮춰도 된다.
   되돌리려면 background/border 를 #FFFFFF, color 를 var(--cm-accent-dk) 로 되돌린다. */
.pt-w--nudge .mg_w_bt.mg_w_bt-fill{
  background:var(--cm-accent);border-color:var(--cm-accent);color:#FFFFFF;
}