/* =========================================================================
   「창업의 모든 것」(창모) — 포털 공용 셸
   assets/portal.css

   담는 것 : 상단 배너 줄 · 헤더 · 가로 메뉴 · 3단 그리드(+ 단일 컬럼 변형) ·
             블록/위젯/카드 껍데기 · 푸터
   [PORTAL0828] 정리 : 어느 페이지도 쓰지 않던 규칙 3덩이를 걷어냈다 —
     .pt-c--ad / .pt-c__adlabel (레일 광고 카드) · .pt-c--live 계열 (레일 새글/새댓글) ·
     .pt-skip-only (시각 비노출 제목). 앞의 둘은 우 레일 전용이라 단일 컬럼
     페이지에서는 되살아날 자리가 없고, 마지막 것은 새 랜딩이 본문 h2 를 갖게 되어
     중복이다. 대신 .pt-wrap--solo 를 더해 3단 없이 한 컬럼으로 쓸 수 있게 했다.
     .pt-box · .pt-row · .pt-tabs · .pt-notice · .pt-num 은 남긴다 — 지금은
     아무도 쓰지 않지만 /fund/ 의 탭·목록이 그대로 쓰는 껍데기다.
   담지 않는 것 : 본문 4블록의 내부 구조, 위젯·레일 카드의 내부 구조, 페이지 전용 스타일

   로드 순서   : style.css → portal.css → (페이지별) community.css / mypage.css
   접두사      : pt-  (형태 pt-블록__요소 · 상태 is-*)
                 기존 파일에 pt- · pt_ 는 한 곳도 없다. h_ ft_ cm_ mg_ bal_ blk_ nd_ st_
                 sum_ tl_ fr_ sc_ hs_ site_ dd- nf- sk- dg- 와 맨이름 클래스는 쓰지 않는다.

   금지 사항 (지켜야 하는 것)
   - 전역 리셋 금지 : * , body , a , ul , h1~h6 같은 요소 셀렉터를 여기서 건드리지 않는다.
     style.css 가 이미 리셋을 갖고 있고 terms/privacy 본문 타이포가 거기에 얹혀 있다.
     셸의 14px 기준은 body 가 아니라 .pt-wrap 에만 건다.
   - 맨이름 클래스 셀렉터 금지 : terms.html · privacy.html 이 .top .in .corp 를 본문에서 쓴다.
   - 섹션 높이를 px 로 고정하지 않는다. 행 높이만 min-height 로 잡는다.
   - 색은 검정·네이비·파랑·회색만. 주황·노랑·초록 없음. 빨강(--err)은 폼 오류에만.
   - 그림자 없음. 구분은 1px 선으로만 한다.
   - 20px 이상 글자를 셸 어디에도 두지 않는다. 랜딩이 아니다.
   ========================================================================= */


/* ── 1. 토큰 ───────────────────────────────────────────────────────────────
   색은 새로 선언하지 않고 style.css 의 :root 토큰을 별칭으로 참조한다.
   두 번째 인자는 style.css 를 싣지 않는 문서(terms.html · privacy.html — 자체
   인라인 스타일만 쓴다)에서 셸이 무채색으로 깨지지 않게 하는 폴백이다.        */
:root{
  /* [LAYOUT0828] 960px 였다. 본문 레인 한 값(--cm-main-w 1150)으로 모은다 —
     폭이 960 · 1020 · 1400 세 값으로 갈리던 원인이었다. 되돌리려면 960px 로. */
  /* [LAYOUT0828-R2] 무엇을 : 1150px 하드코딩이었다 → var(--cm-lane-w)(1102) 로 묶었다.
     왜 : 이 이름을 읽는 .pt-wrap--solo 가 `calc(--pt-main-solo + --pt-pad*2)` 로 쓰므로
          1150 을 그대로 두면 바깥값이 1198 이 되어 8창(1150)보다 24px 씩 밖으로 나간다.
          규격의 폭은 안쪽값이다 — 안쪽값을 넣어야 바깥값이 1150 으로 떨어진다.
     되돌리려면 : 1150px 로 되돌린다. */
  --pt-main-solo:var(--cm-lane-w);  /* 단일 컬럼 본문 폭(안쪽값) — .pt-wrap--solo */
  /* 폭·간격 — 실측 그리드 : 1400 = 1020 + 20 + 360 · 1020 = 820 + 20 + 180
     ※ 이 규격은 뷰포트 ≥1440 기준이다. 검수도 1440 이상에서 한다.
        1024–1439 구간은 --pt-pad 가 20px 로 바뀌어 폭이 가변이므로
        (예: 뷰포트 1400 → 본문 780) 820 이 나오지 않는 것이 정상이다. */
  /* [WIN0827D-R2 공유시트] --pt-max 1400 → 960 · --pt-side 180 → 300.
     3단 격자 세 창(feed · my · mileage)만 본문이 1400 이라 셸과 어긋났고, 그 탓에
     hub.css 2절에 「셸을 본문 폭에 맞추는」 예외 블록이 있었다. 본문을 셸과 같은
     960 레인으로 내리면 그 예외가 필요 없어지고(지움다) 9개 창의 로고 · 메뉴 · 푸터 ·
     본문 왼쪽 모서리가 한 선에 선다(912 = 592 + 20 + 300).
     좌 위젯 180 · 우 레일 360 두 줄기를 한 열 300 으로 합친다 — 180px 에서 단계 칩이
     3+1 로 접히고 카드 제목이 두 규격으로 갈리던 원인이다.
     ※ --pt-left · --pt-main · --pt-rail 은 지우지 않고 남긴다 — .pt-rail 은 /feed/ 가
       아직 쓰고 있다. 되돌리려면 1400px · 180px 로. */
  /* [LAYOUT0828] 960px 였다. portal 셸 3창(feed · my · mileage)의 헤더 · 메뉴 · 푸터 ·
     배너가 hub 셸(--cm-shell-w 1248)과 같은 선에 서야 한 사이트로 보인다.
     되돌리려면 960px 로. */
  --pt-max:1248px;
  /* [LAYOUT0828-R2] 폐기 예정. main.pt-wrap 의 grid gap 과 .pt-main > * + * 의 세로 간격
     두 곳이 읽는데, 앞은 자식이 하나뿐이라 화면에 나오지 않고 뒤는 여백 사다리
     (8/12/16/24/32/48/64/96) 밖의 값이다. 새 코드에서 읽지 마라 —
     세로 간격은 --cm-block-gap · 가로 거터는 --pt-gutter(48) 한 값이다. */
  --pt-gap:20px;
  /* [LAYOUT0828] --pt-left(1020)는 쓰이지 않는 세 번째 폭이었다. 본문 레인으로 모은다. */
  --pt-left:var(--cm-main-w);
  /* [LAYOUT0828] 820px 였다. 1150 = 782 + 48(거터) + 320(사이드). 되돌리려면 820px 로. */
  /* [LAYOUT0828-R2] 무엇을 : 782px → 734px.
     왜 : 782 는 **바깥값 1150** 에서 나온 숫자였다. 2단 격자가 실제로 쓰는 것은
          안쪽값 1102 이므로 1102 = 734 + 48(거터) + 320(사이드) 이다.
          782 를 살리려면 feed · my · mileage 의 main 을 1198 로 키워야 하고, 그러면
          세 창만 나머지 여섯 창보다 24px 왼쪽으로 나온다(3 대 6 으로 갈린다).
          9창의 왼쪽 축 하나(x=409)를 세우는 쪽이 크다.
          734 에 들어가지 않는 넓은 표 · 목록은 폭을 넓히지 말고 .pt-col-l **밖**
          레인 전폭 1102 로 빼라 — 그것이 오른쪽 빈 칸을 없애는 실제 수단이다.
     되돌리려면 : 782px 로 되돌린다. */
  --pt-main:734px;
  /* [WIN0827D-R3 공유시트] 300px 였다. 아래 .pt-col-l 의 열 거터를 20 → 40 으로 벌리면서
     늘린 20px 을 사이드 열에서 뺐다 — 912 = 592(본문) + 40(거터) + 280(사이드) 로 총 폭이 그대로다.
     사이드 카드 안 폭은 250px 이 되는데 단계 칩 네 칸(실측 211px)과 로그인 · 회원가입
     2열 버튼(각 121px)이 그대로 한 줄에 선다(/feed/ 에서 다섯 폭 실측 확인).
     feed · my · mileage 세 창이 같은 격자를 쓰므로 여기 한 곳에서 셋이 같은 값이 된다.
     되돌리려면 300px 로 되돌리고 .pt-col-l 의 column-gap 도 함께 되돌린다. */
  /* [SPEC0828] **확정값**이다. feed · my · mileage 실측이 모두 280 이고
     912 = 592(본문) + 40(거터) + 280(사이드). 다시 갈라지지 않게 못 박는다. */
  /* [LAYOUT0828] 280px 였다. 320 이면 사이드 버튼 250px 이 전폭 버튼으로 서고
     위젯 제목이 한 줄에 든다. 되돌리려면 280px 로. */
  --pt-side:320px;
  /* [LAYOUT0828-R2] 무엇을 : --pt-rail:360px 한 줄을 지웠다.
     왜 : var(--pt-rail) 참조가 9창 · 5시트 통틀어 0건이다(주석 두 곳에만 이름이 남아 있다).
          실측에서 feed · my · mileage 세 창 모두 .pt-side 를 쓰고 우 레일은 그리지 않는다.
          남겨 두면 다음 회차가 360 을 세 번째 열 폭으로 오인한다.
     되돌리려면 : --pt-rail:360px 한 줄을 되살린다. */
  /* 좌우 여백 — ≥1440 에서는 0 이다.
     배너·헤더·메뉴·본문·푸터가 모두 이 값을 쓰므로 다섯 줄의 세로선이 항상 맞는다.
     (여기서 20px 로 두면 max-width 1400 인 헤더 안쪽이 1360 이 되어
      padding 0 인 .pt-wrap 1400 과 20px 씩 어긋난다.) */
  --pt-pad:24px;   /* [WIN0827D-R2 공유시트] 0px 이었다 — 960 레인은 hub.css 의 --cm-pad 와 같은 24px 를 쓴다. */

  /* 높이 — 헤더 총합 36 + 60 + 44 = 140px */
  --pt-ad-h:36px;
  --pt-hd-h:60px;
  --pt-gnb-h:44px;
  --pt-sticky:calc(var(--pt-gnb-h) + 16px);   /* = 60px · 위젯/레일 sticky 기준 */

  /* 기준 글자 */
  /* [LAYOUT0828-R3] 무엇을 : 14px 였다 → 16px(사다리의 본문 칸).
     왜 : 이 한 줄이 .pt-wrap{font-size:var(--pt-fz)}(아래 6절)로 feed · my · mileage
       세 창의 **상속 기준값**이 된다. 1920 실측에서 사다리(38/20/16/13) 밖 글자가
       나머지 여섯 창은 0종인데 이 세 창만 14px 로 각각 25 · 29 · 35종 나왔다 —
       원인이 전부 이 한 값이다. 같은 사이트에서 본문 기준이 두 값인 것이
       consistency 를 깎는 가장 큰 원인이라 여기 한 곳에서 모은다.
     되돌리려면 : 14px 로 되돌린다. */
  --pt-fz:var(--cm-fs-body,16px);

  /* 색 별칭 */
  --pt-navy:var(--navy,#0E2347);
  --pt-navy2:var(--navy2,#16305C);
  --pt-accent:var(--accent,#2E6BFF);
  --pt-accent-dark:var(--accent-dark,#1D4ED8);
  --pt-ink:var(--ink,#191919);
  --pt-mut:var(--mut,#55606F);
  --pt-mut2:var(--mut2,#8A94A3);
  --pt-line:var(--line,#E3E7EE);
  --pt-offwhite:var(--offwhite,#F7F9FC);
  --pt-err:var(--err,#D92B2B);
  --pt-on-navy:#D6E1F2;   /* navy 바닥 위 글자 */
}

/* 셸이 놓이는 문서의 폰트·자간.
   요소 셀렉터를 건드리지 않기 위해 셸 뿌리 4곳에만 건다.
   Pretendard 는 style.css 맨 위 @import(또는 문서 자체 link)에서 온다.        */
.pt-ad,
.pt-hd,
.pt-gnb,
.pt-wrap,
.pt-ft{
  font-family:"Pretendard","Pretendard Variable",system-ui,-apple-system,
              "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  letter-spacing:-.01em;
}


/* ── 2. 건너뛰기 링크 (a11y) ──────────────────────────────────────────────
   body 의 첫 자식 2개. 평시 시각 비노출, :focus 에서만 좌상단에 나타난다.     */
.pt-skip{
  position:absolute;left:8px;top:8px;z-index:900;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;
  white-space:nowrap;
}
.pt-skip:focus{
  clip-path:none;width:auto;height:auto;
  display:inline-flex;align-items:center;
  padding:0 12px;min-height:34px;
  background:var(--pt-navy);color:#fff;
  font-size:var(--cm-fs-tail);font-weight:700;border-radius:6px;
}


/* ── 3. 상단 얇은 배너 줄 ─────────────────────────────────────────────────
   문서 흐름 최상단. 고정하지 않는다.
   닫으면 display:none 으로만 제거한다 — 높이 애니메이션을 두지 않아야
   헤더 위치가 흔들리지 않는다.                                               */
.pt-ad{
  background:var(--pt-navy);
  color:var(--pt-on-navy);
  /* [LAYOUT0828-R3] font-size:12px 였다 → 꼬리 칸 13px. 되돌리려면 12px 로. */
  font-size:var(--cm-fs-tail);
}
.pt-ad[hidden],
.pt-ad.is-off{display:none;}
.pt-ad__in{
  max-width:var(--pt-max);margin:0 auto;
  padding:0 var(--pt-pad);
  min-height:var(--pt-ad-h);
  display:flex;align-items:center;gap:10px;
}
.pt-ad__tag{
  flex:0 0 auto;
  font-size:11px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:2px;
  background:rgba(255,255,255,.14);color:#fff;
}
/* 표시광고법상 광고는 「광고」임을 반드시 밝힌다 */
.pt-ad__tag--ad{background:var(--pt-accent);color:#fff;}
.pt-ad__tx{
  flex:1 1 auto;min-width:0;
  color:var(--pt-on-navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* [PORTAL0827] 터치 기기 호버 고착 방지(traps D3). hub.css 는 :hover 를 전부
   @media (hover:hover) 로 가뒀는데 이 레거시 시트만 빠져 있어, /feed/ 카드를 탭하면
   테두리색이 파랑으로 남고 다른 곳을 탭해야 풀렸다. 끝으로 옮기지 않고 제자리에서
   감싼다 — 옮기면 뒤 규칙과의 캐스케이드 순서가 바뀐다.
   되돌리려면 아래 @media (hover:hover){ } 껍데기만 벗기면 된다. */
@media (hover:hover){.pt-ad__tx:hover{color:#fff;}}
.pt-ad__x{
  flex:0 0 auto;
  width:24px;height:24px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  /* [LAYOUT0828-R3] font-size:15px 였다 → 본문 칸 16px. 되돌리려면 15px 로. */
  color:rgba(255,255,255,.66);font-size:16px;
  border-radius:4px;
}
@media (hover:hover){.pt-ad__x:hover{color:#fff;background:rgba(255,255,255,.12);}}


/* ── 4. 헤더 (로고 · 검색 · 계정) ─────────────────────────────────────────
   고정하지 않는다(문서 흐름). sticky 는 아래 .pt-gnb 하나뿐이다.             */
.pt-hd{
  background:var(--cm-surf);
  border-bottom:1px solid var(--pt-line);
}
.pt-hd__in{
  max-width:var(--pt-max);margin:0 auto;
  padding:0 var(--pt-pad);
  min-height:var(--pt-hd-h);
  display:flex;align-items:center;gap:24px;
}
.pt-hd__brand{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cm-txt);
}
.pt-hd__mark{flex:0 0 auto;display:block;}
.pt-hd__nm{font-size:17px;font-weight:700;letter-spacing:-.01em;}

/* 검색 */
.pt-hd__search{
  flex:1 1 auto;min-width:0;max-width:460px;
  position:relative;
}
.pt-hd__q{
  display:block;width:100%;height:36px;
  padding:0 40px 0 12px;
  /* [LAYOUT0828-R3] font-size:14px 였다 → 본문 칸 16px. 되돌리려면 14px 로. */
  font:inherit;font-size:16px;color:var(--pt-ink);
  background:var(--pt-offwhite);
  border:1px solid var(--pt-line);border-radius:6px;
  outline:none;
}
.pt-hd__q::placeholder{color:var(--pt-mut2);}
.pt-hd__q:focus{border-color:var(--pt-accent);background:var(--cm-surf-2);}
.pt-hd__go{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--pt-mut);border-radius:6px;
}
@media (hover:hover){.pt-hd__go:hover{color:var(--cm-accent-soft);}}

/* 계정 */
.pt-hd__act{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  font-size:var(--cm-fs-tail);
}
.pt-hd__login{color:var(--pt-mut);}
@media (hover:hover){.pt-hd__login:hover{color:var(--cm-accent-soft);}}
.pt-hd__join{
  display:inline-flex;align-items:center;
  height:32px;padding:0 12px;
  border:1px solid var(--pt-accent);border-radius:6px;
  color:var(--cm-accent-soft);font-weight:600;
}
@media (hover:hover){.pt-hd__join:hover{background:var(--pt-offwhite);}}
.pt-hd__me{color:var(--pt-mut);}
@media (hover:hover){.pt-hd__me:hover{color:var(--cm-accent-soft);}}

/* 마일리지 chip — 단위 글자는 항상 「마일리지」. 「원」을 쓰지 않는다.
   숫자 슬롯 b[data-mileage] 의 초기값은 「—」 이며 임의 숫자를 넣지 않는다.   */
.pt-hd__mile{
  display:inline-flex;align-items:center;gap:4px;
  height:32px;padding:0 12px;
  background:var(--pt-offwhite);
  border:1px solid var(--pt-line);border-radius:999px;
  color:var(--pt-mut);
}
@media (hover:hover){.pt-hd__mile:hover{border-color:var(--pt-accent);color:var(--cm-accent-soft);}}
.pt-hd__mile-n{
  font-weight:700;color:var(--cm-txt);
  font-variant-numeric:tabular-nums;
}
.pt-hd__mile-u{color:var(--pt-mut);}

/* 로그인 상태 전환 — 마크업은 양쪽을 다 두고 body 클래스로만 가른다 */
.pt-hd__mile,
.pt-hd__me{display:none;}
body.is-in .pt-hd__mile{display:inline-flex;}
body.is-in .pt-hd__me{display:inline;}
body.is-in .pt-hd__login,
body.is-in .pt-hd__join{display:none;}


/* ── 5. 가로 메뉴 (sticky) ────────────────────────────────────────────────
   메뉴 7개 순서 고정 :
   지원금 소식 · 어떻게 창업하는가 · 창업 인증 피드 · 자동화 도구 ·
   프랜차이즈 데이터 · 마일리지 · 넛지 상담
   ≤600 에서도 드로어(햄버거)를 만들지 않는다 — 7개는 가로 스크롤로 전부 닿는다. */
.pt-gnb{
  position:sticky;top:0;z-index:700;
  background:var(--cm-surf);
  border-bottom:1px solid var(--pt-line);
}
.pt-gnb__in{
  max-width:var(--pt-max);margin:0 auto;
  padding:0 var(--pt-pad);
  display:flex;align-items:stretch;gap:4px;
}
.pt-gnb__a{
  position:relative;
  display:inline-flex;align-items:center;
  height:var(--pt-gnb-h);padding:0 14px;
  /* [LAYOUT0828-R3] font-size:15px 였다 → 본문 칸 16px. 되돌리려면 15px 로. */
  font-size:16px;font-weight:600;color:var(--pt-ink);
  white-space:nowrap;
}
@media (hover:hover){.pt-gnb__a:hover{color:var(--cm-accent-soft);}}
.pt-gnb__a.is-on{color:var(--cm-accent-soft);}
.pt-gnb__a.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--pt-accent);
  pointer-events:none;
}
/* 넛지 상담 — 외부 링크. 세 곳(메뉴 · 중 위젯 · 우 레일)에 상시 노출한다. */
.pt-gnb__ext{gap:6px;}
.pt-gnb__ext-n{
  font-size:11px;font-weight:400;color:var(--pt-mut2);
  white-space:nowrap;
}


/* ── 6. 3단 그리드 ────────────────────────────────────────────────────────
   1400 = 1020 + 20 + 360 · 1020 = 820 + 20 + 180
   두 그리드 모두 align-items:start — 열 높이를 서로 맞추면 sticky 가 죽는다.
   body 에 overflow-x:hidden 을 걸지 않는다. minmax(0,1fr) 이면 넘칠 일이 없다. */
/* [WIN0827D-R2 공유시트] width:1400 고정 · 1020+360 2열 격자였다. 세 창(feed · my · mileage)이
   전부 이 격자를 인라인으로 한 열로 접어 쓰고 있어 기본값이 아무 데도 쓰이지 않는
   상태였다. 기본값을 그 세 창이 실제로 쓰는 모양(960 레인 · 한 열)으로 내린다.
   아래 패딩 56 → 40 은 본문 끝 ↔ 푸터 경계를 hub.css .hub-main(40) 과 같은 값으로 둘려는 것이다.
   되돌리려면 width:var(--pt-max) · padding 아래 56px · grid-template-columns
   var(--pt-left) var(--pt-rail) 로 되돌린다. */
.pt-wrap{
  /* [LAYOUT0828] max-width:var(--pt-max) 였다. 셸(1248)과 본문(1150)을 가른다 —
     셸이 본문의 어깨가 되도록 49px 씩 안으로 넣는다. 되돌리려면 var(--pt-max) 로. */
  width:100%;max-width:var(--cm-main-w);margin:0 auto;
  /* [SPEC0828-R3] padding:20px var(--pt-pad) 40px 이었다. 같은 값을 hub.css 17-1 이
     --cm-main-pt · --cm-main-pb 로 다시 덮고 있어 한 규칙이 두 곳으로 갈려 있었다 —
     좀은 폭에서 이 줄이 살아남으면 feed·my·mileage 만 20/40 으로 남는다.
     main 안여백은 세 토큰이 전부다. 되돌리려면 20px · 40px 로. */
  padding:var(--cm-main-pt) var(--pt-pad) var(--cm-main-pb);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pt-gap);
  align-items:start;
  font-size:var(--pt-fz);
  color:var(--pt-ink);
}
.pt-col-l{
  min-width:0;
  display:grid;
  /* [WIN0827D-R2 공유시트] var(--pt-main)(820) 고정이었다. 960 레인에서는 본문이 남는 폭을
     다 따가고 사이드바만 300 으로 고정한다(592 + 20 + 300 = 912). */
  grid-template-columns:minmax(0,1fr) var(--pt-side);
  gap:var(--pt-gap);
  /* [WIN0827D-R3 공유시트] feed · my · mileage 세 창이 같은 건을 각각 올렸다 —
     「본문 열과 위젯 열 사이가 20px 인데 카드 안쪽 패딩이 24~26px 이라, 묶음 경계가
     묶음 안보다 좁아 두 줄기가 한 덩어리로 붙어 보인다」(1400px 실측 : 본문 우측 끝 836 /
     사이드 좌측 856). 40px 이면 경계가 카드 안 여백의 두 배가 되어 두 덩이로 갈린다.
     세로(row-gap)는 ≤600 에서 사이드가 본문 아래로 쌓일 때 쓰는 값이라 --pt-gap 그대로 둔다.
     ≤1024 에서는 아래 분기가 다시 --pt-gap 으로 되돌린다(폭이 좁아지면 본문 열이 먼저 눌린다).
     세 창이 각자 인라인으로 넣어 둔 같은 값은 이 규칙이 들어왔으므로 지워도 된다.
     되돌리려면 이 한 줄과 ≤1024 분기의 한 줄을 지운다. */
  /* [SPEC0828] 40px 하드코딩이었다. 값은 그대로고 토큰(--pt-gutter)만 물린다 —
     관제 지적서의 20px 은 이미 40 으로 고쳐져 있다. 되돌리지 마라. */
  column-gap:var(--pt-gutter);
  /* [SPEC0828-R2] row-gap 이 --pt-gap(20px)이었다. 1024px 아래에서 두 열이 접힐 때
     눈에 보이는 값이라 카드와 카드 사이(--cm-block-gap 32px)와 같아야 한다.
     실측 : feed 24 · my 20 · mileage 20 세 값이었다. 되돌리려면 이 한 줄을 지운다. */
  row-gap:var(--cm-block-gap);
  align-items:start;
}
.pt-main{min-width:0;}
.pt-main > * + *{margin-top:var(--pt-gap);}

/* [PORTAL0828] 단일 컬럼 변형 — /fund/ · /guide/ · /tools/ 용.
   세 페이지는 좌 위젯(180)도 우 레일(360)도 두지 않는다. 3단 규칙을 지우지 않고
   한 클래스로 열만 접는다 — 3단은 feed · my · mileage 가 계속 쓰고 있어
   지우면 그 세 페이지가 함께 깨진다.
   본문 폭은 셸의 1400 이 아니라 960 으로 좁힌다(하위 페이지 규격).
   .pt-col-l 을 쓰지 않고 .pt-main 을 .pt-wrap 의 직계로 둔다. */
.pt-wrap--solo{
  width:100%;
  max-width:calc(var(--pt-main-solo) + var(--pt-pad) * 2);
  grid-template-columns:minmax(0,1fr);
}
.pt-wrap--solo .pt-col-l{grid-template-columns:minmax(0,1fr);}

/* [WIN0827 공유시트] /my/ 담당 요청. 우 레일(360)만 걷어낸 변형이다 — 좌 위젯(180)은
   그대로 쓰므로 .pt-wrap--solo 와 다르다. 레일을 지운 채 3단 규칙을 그대로 두면
   오른쪽 360 + 간격 20 이 페이지 전 높이에 걸쳐 빈 열로 남는다(1400px 실측 : 레일은
   y560 에서 끝나는데 본문은 y1400 까지 간다).
   폭은 새 수치를 만들지 않고 이미 있는 --pt-left(1020 = 820 + 20 + 180)를 그대로 쓴다.
   본문 폭 820 은 건드리지 않는다 — 읽는 길이를 늘리지 않는다.
   ※ /my/ 의 인라인 <style> 에 같은 세 줄이 남아 있다. 이 규칙이 들어왔으므로
     그 창 담당이 인라인 쪽을 지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 이 블록을 지운다. */
/* [WIN0827D-R2 공유시트] /my/ 전용 변형. 위 .pt-wrap 이 이미 960 레인 한 열이 되었으므로 폭 선언은
   할 일이 없어졌고, 이 변형이 남기는 것은 그 창의 위아래 숨 한 벌뿐이다.
   값은 /my/ 가 인라인으로 쓰고 있는 것과 같다(54 / 56) — .pg_top 이 padding-top:0 으로
   받아 올리는 34px 을 포함한 값이다. 되돌리려면 max-width:calc(var(--pt-left) + var(--pt-pad) * 2)
   · grid-template-columns:minmax(0,1fr) 로 되돌린다. */
.pt-wrap--norail{
  padding-top:54px;
  padding-bottom:56px;
}


/* ── 7. 좌 본문 820 — 블록 껍데기 ─────────────────────────────────────────
   블록 4개(① 탭 목록 ② 창업 4단계 ③ 자동화 도구 16종 ④ 프랜차이즈 표)의
   내부는 담당이 채운다. 여기서 정하는 것은 자리·껍데기·간격 20px 뿐이다.     */
.pt-box{
  background:var(--cm-surf);
  border:1px solid var(--pt-line);
  border-radius:10px;            /* [WIN0827D-R2 공유시트] 8px 이었다 — 카드 라운드 10px 통일 */
  overflow:hidden;               /* 그림자 없음 */
  /* GNB 앵커(#hm-fund·#hm-how·#hm-tools·#hm-fr)로 뛰었을 때 sticky 메뉴(44px)
     아래로 파묻히지 않게 한다. 크로스페이지 앵커(index.html#hm-fund 등)도 같이 해결된다. */
  scroll-margin-top:var(--pt-sticky);
}
.pt-box__hd{
  min-height:44px;padding:0 16px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--pt-line);
}
.pt-box__ttl{
  font-size:15px;font-weight:700;color:var(--cm-txt);
  margin:0;
}
.pt-box__chip{
  font-size:11px;font-weight:700;color:var(--pt-mut);
  background:var(--pt-offwhite);
  border:1px solid var(--pt-line);border-radius:2px;
  padding:2px 6px;line-height:1.3;
}
.pt-box__more{
  margin-left:auto;
  font-size:var(--cm-fs-tail);color:var(--pt-mut);
  white-space:nowrap;
}
@media (hover:hover){a.pt-box__more:hover{color:var(--cm-accent-soft);}}
.pt-box__more[disabled]{color:var(--pt-mut2);cursor:default;}
.pt-box__bd{padding:14px 16px;}
.pt-box__ft{
  padding:8px 16px 10px;
  border-top:1px dashed var(--pt-line);
  font-size:12px;color:var(--pt-mut);
}

/* 목록 행 — 34px · 14px/400 · 제목 1줄 말줄임 · 우측 메타 12px.
   제목을 크게 쓰지 않는다.                                                  */
.pt-row{
  display:flex;align-items:center;gap:12px;
  min-height:34px;
  font-size:14px;font-weight:400;
  border-bottom:1px solid var(--pt-line);
}
.pt-row:last-child{border-bottom:0;}
.pt-row__tx{
  flex:1 1 auto;min-width:0;
  color:var(--pt-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pt-row__meta{
  flex:0 0 auto;
  font-size:12px;color:var(--pt-mut2);
  font-variant-numeric:tabular-nums;
}

/* 탭바 — 활성 탭만 밑줄 2px. 페이지 이동 없이 패널만 갈아 끼운다. */
.pt-tabs{
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--pt-line);
}
.pt-tabs__b{
  position:relative;
  min-height:40px;padding:0 12px;
  font-size:14px;font-weight:400;color:var(--pt-mut);
  white-space:nowrap;
}
@media (hover:hover){.pt-tabs__b:hover{color:var(--pt-ink);}}
.pt-tabs__b[aria-selected="true"]{
  font-weight:700;color:var(--cm-txt);
  box-shadow:inset 0 -2px 0 var(--pt-accent);
}
/* 예시 고지 바 — 연동 전 화면에서 「예시」임을 밝히는 줄 */
.pt-notice{
  min-height:24px;padding:4px 16px;
  display:flex;align-items:center;
  font-size:12px;color:var(--pt-mut);
  background:var(--pt-offwhite);
  border-bottom:1px solid var(--pt-line);
}


/* ── 8. 중 위젯 180 ───────────────────────────────────────────────────────
   슬롯 4개(고정 순서) : 내 마일리지 · 출석체크 · 인증글 쓰기 · 넛지 상담     */
.pt-side{
  min-width:0;
  position:sticky;top:var(--pt-sticky);
  /* [SPEC0828-R2] 12px 하드코딩이었다. 사이드 카드 사이는 예외 없이 이 한 값이다. */
  display:grid;gap:var(--cm-side-gap);align-content:start;
}
/* [WIN0827D-R2 공유시트] 같은 사이드바 안에서 제목이 12px/600 #868B94(.pt-w__ttl)와
   14px/700 #FFFFFF(.pt-c__ttl) 두 벌이었다. 같은 자리 · 같은 역할의 제목이 두 규격이면
   두 줄기가 한 사이드바로 읽히지 않는다. 카드 라운드 8px 도 9개 창 공통값 10px 로 맞춘다.
   값은 /feed/ 가 인라인으로 먼저 넣어 둔 것과 글자 하나까지 같다.
   되돌리려면 .pt-w 를 radius 8px · padding 12px 로, .pt-w__ttl 을 12px/600/--pt-mut 로,
   .pt-c 를 radius 8px 로, .pt-c__hd 를 min-height:38px · padding:0 16px · border-bottom 으로,
   .pt-c__bd 를 padding:14px 16px 로, .pt-c__ttl 을 14px/700/--cm-white 로 되돌린다. */
.pt-w{
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);border-radius:10px;
  padding:14px;
  font-size:var(--cm-fs-tail);color:var(--pt-ink);
}
/* [WIN0827D-R3 공유시트] /my/ 담당 요청. gap 6px 였다. 관제가 확정한 「준비 중」 배지 규격은
   제목 오른쪽 8px 다 — feed · my · mileage 세 창이 이 한 줄을 함께 읽어 2px 씩 좁았다.
   되돌리려면 6px 로. */
.pt-w__ttl{
  display:flex;align-items:center;gap:var(--cm-gap-xs);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:var(--cm-lh-tail);color:var(--cm-txt-2);   /* [SPEC0828-R2] 1.4 였다 */
  margin:0 0 10px;
}
/* 중 스택에서 유일한 반전 카드 — 상시 노출 자리라 위계를 하나만 준다 */
/* [WIN0827 공유시트] 바닥이 var(--pt-navy) 였다. hub-legacy.css 가 --pt-navy 를
   --cm-accent(#2E6BFF) 로 잇고 있어, 그 위 본문 rgba(255,255,255,.72) 가 3.08:1 로
   AA 미달이었다. mypage.css 의 .nudge_box 가 같은 문제를 「바닥을 --cm-accent-dk 로
   내리고 글자를 #D6E0F5 로」 이미 푼 전례가 있어 같은 방식으로 맞춘다.
   제목 흰 글자는 #1D4ED8 위 6.70:1 · 본문 #D6E0F5 는 5.05:1 이다.
   되돌리려면 var(--pt-navy) 로 되돌리고 community.css · mypage.css 의 #D6E0F5 도
   rgba(255,255,255,.72) 로 함께 되돌린다. */
.pt-w--nudge{
  /* [WIN0827D-R2 공유시트] 바닥이 --cm-accent-dk(#1D4ED8) 였다. 파란 면으로 꿉 찬 넷지 카드가
     화면에서 대비가 가장 세서 h1 과 주버튼보다 먼저 눈에 들어왔다(/feed/ · /mileage/ 공통).
     #2E6BFF · #1D4ED8 는 링크와 주버튼에만 남긴다. #1E2A44 위 흰 제목 14.7:1 ·
     본문 #D1D3D8 9.4:1 · 안의 주버튼 면 #2E6BFF 가 3.03:1 로 1.4.11 을 넘는다.
     되돌리려면 var(--cm-accent-dk) 로 되돌리고 아래 글자색 두 줄을 지운다. */
  /* [SPEC0828-R2] 면 · 테두리를 네이비(#1E2A44)로 채우고 있었다. 사이드 카드 12장 중
     이 한 장과 .pt-c--nudge 만 채워져 있어, feed · my 의 사이드 맨 아래에만 파란 상자가
     서고 mileage 에는 없어 같은 열이 세 창에서 세 가지로 읽혔다.
     사이드 카드는 한 벌뿐이다 — 면 #1A1C20 · 1px #555D6D. 강조는 제목 글자로 준다.
     되돌리려면 두 값을 --cm-accent-bg 로 되돌린다. */
  background:var(--cm-surf);border-color:var(--cm-edge);
  color:var(--cm-txt);
}
/* [SPEC0828-R2] 순백이었다(네이비 면 위 글자였다). 면을 걷었으므로 팔레트 안 강조색으로 내린다. */
.pt-w--nudge .pt-w__ttl{color:var(--cm-accent-soft);font-weight:700;}
.pt-w--nudge .mg_w_tx,
.pt-w--nudge .mg_w_foot,
.pt-w--nudge .cm_wg_tx,
.pt-w--nudge .cm_wg_fine{color:var(--cm-txt-2);}


/* ── 9. 우 레일 360 ───────────────────────────────────────────────────────
   슬롯 순서(고정) : 로그인 박스 → (로그인 시 마일리지 카드) · 광고 지면 ·
                     새 인증글/새 댓글 · 넛지 상담                            */
.pt-rail{
  /* .pt-wrap 그리드의 직계 아이템이다. 래퍼(div)를 한 겹 두면 래퍼 높이가
     레일 높이와 같아져 sticky 가 죽는다 — 6절 주석과 같은 규칙이다. */
  min-width:0;align-self:start;
  position:sticky;top:var(--pt-sticky);
  display:grid;gap:12px;align-content:start;
}
.pt-c{
  min-width:0;
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);border-radius:var(--cm-card-r);   /* [SPEC0828] 10px 하드코딩 */
  padding:14px;
  font-size:var(--cm-fs-tail);color:var(--pt-ink);
}
.pt-c__hd{
  display:block;min-height:0;padding:0;border-bottom:0;
}
/* [SPEC0828-R2] gap:6px · line-height:1.4 였다. 바로 위 .pt-w__ttl 은 gap:8px 이라
   같은 자리 · 같은 역할의 사이드 제목이 두 값이었다. 8px · 20px 한 벌로 모은다. */
.pt-c__ttl{
  display:flex;align-items:center;gap:var(--cm-gap-xs);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:var(--cm-lh-tail);color:var(--cm-txt-2);
  margin:0 0 10px;
}
.pt-c__bd{padding:0;}

/* 레일 반전 카드는 넛지 하나뿐 */
/* [WIN0827D-R2 공유시트] 바로 위 .pt-w--nudge 와 같은 처방이다 — 그 주석 참조. */
/* [SPEC0828-R2] 바로 위 .pt-w--nudge 와 같은 이유로 면을 걷었다 — 그 주석 참조. */
.pt-c--nudge{
  background:var(--cm-surf);border-color:var(--cm-edge);
  color:var(--cm-txt);
}
.pt-c--nudge .pt-c__ttl{color:var(--cm-accent-soft);}

/* 레일 하단 고지 — 카드가 아니라 배경 없는 텍스트 블록.
   푸터의 법정 표시사항을 대체하지 않는다.                                    */
/* [WIN0827D-R2 공유시트] 11px 이었다. 사이드바가 300px 한 열이 되면 11px 로 누른 둘 이유가 없다.
   위계의 마지막 단 하나(13px)로 모으면 세 창(feed · my · mileage)의 사이드바가 같은 리듬이 된다. */
.pt-rail__note{
  font-size:var(--cm-fs-tail);line-height:1.55;color:var(--pt-mut);
}


/* ── 10. 공용 조각 ────────────────────────────────────────────────────────
   「예시」 칩 · 「준비 중」 칩 · 단계 태그.
   단계(준비·등록·자금·운영)를 색으로 가르지 않는다 — 글자로만 가른다.        */
/* [WIN0827D-R2 공유시트] 「준비 중」 배지가 창마다 13 · 12 · 11px 세 크기였다. 「예시」 배지와 같은
   아웃라인 한 규격(1px solid #555D6D · radius 3px · 13px · #D1D3D8 · 바닥 #212429)으로
   9개 창을 맞춘다 — hub.css 의 .hub-badge--soon 과 같은 값이다.
   되돌리려면 11px · radius 2px · --pt-mut · --pt-offwhite · --pt-line 로. */
.pt-chip{
  display:inline-flex;align-items:center;
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1.3;
  padding:2px 7px;border-radius:3px;
  color:var(--cm-txt-2);
  background:var(--cm-surf-2);
  border:1px solid var(--cm-dim);
}
.pt-num{font-variant-numeric:tabular-nums;}
.pt-err{color:var(--pt-err);}   /* 빨강은 폼 오류에만 */


/* ── 11. 푸터 (전 페이지 동일) ────────────────────────────────────────────
   사업자 정보와 이용약관·개인정보처리방침 링크는 전자상거래법 표시사항이다.
   문안은 index.html 의 검증된 .ft_* 문장을 글자 그대로 옮긴다.               */
.pt-ft{
  background:var(--pt-offwhite);
  border-top:1px solid var(--pt-line);
  padding:28px 0 36px;
  color:var(--pt-mut);
}
.pt-ft__in{max-width:var(--pt-max);margin:0 auto;padding:0 var(--pt-pad);}
.pt-ft__top{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-size:var(--cm-fs-tail);color:var(--cm-txt);
}
.pt-ft__bar{width:1px;height:10px;background:var(--pt-line);}
.pt-ft__co{
  margin-top:18px;
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:14px;font-weight:700;color:var(--cm-txt);
}
.pt-ft__biz{
  margin:14px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  row-gap:4px;column-gap:20px;
  font-size:12px;line-height:1.7;
}
.pt-ft__biz > div{display:flex;gap:8px;min-width:0;}
.pt-ft__biz dt{flex:0 0 60px;color:var(--pt-mut2);font-weight:500;}
.pt-ft__biz dd{margin:0;min-width:0;color:var(--pt-mut);}
.pt-ft__legal{
  margin:14px 0 0;
  display:flex;flex-wrap:wrap;gap:18px;
  font-size:var(--cm-fs-tail);
}
.pt-ft__legal a{color:var(--pt-mut);border-bottom:1px solid var(--pt-line);padding-bottom:1px;}
@media (hover:hover){.pt-ft__legal a:hover{color:var(--cm-accent-soft);border-bottom-color:var(--pt-accent);}}
.pt-ft__strong{font-weight:700;color:var(--cm-txt);}   /* 개인정보처리방침 법정 강조 */
.pt-ft__note{
  margin:20px 0 0;
  font-size:11.5px;line-height:1.7;color:var(--pt-mut2);
}
.pt-ft__cp{
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid var(--pt-line);
  font-size:11.5px;color:var(--pt-mut2);
}


/* ── 12. 반응형 ───────────────────────────────────────────────────────────
   ① ≥1440  : 1400 고정 (규격 실측 기준 뷰포트)
   ② 1024–1439 : 폭 가변, 우 레일 360 유지
   ③ ≤1024 : 우 레일이 본문 아래로 내려가 2열 카드
   ④ ≤600  : 좌 열도 1열, 중 위젯이 본문 위로 올라가 2×2
   어떤 폭에서도 body 가로 스크롤을 만들지 않는다.                            */

/* [WIN0827D-R2 공유시트] @media (max-width:1439px) 블록을 지웠다. 분기는 1024 / 600 두 개뿐이라고
   1회차에 확정했는데 1439 · 820 두 개가 더 있었다. 셸·본문 폭이 960 레인으로 잠기면
   그 블록이 하던 일(--pt-pad:20px 전환 · 1400 셸의 가변 안숨 · .pt-wrap--norail 되돌리기)이
   모두 없어진다. 되돌리려면 6절을 1400 격자로 되돌리고 이 블록을 되살린다. */

@media (max-width:1024px){
  /* [WIN0827D-R3 공유시트] 위 .pt-col-l 의 column-gap:40px 를 이 폭 아래에서 되돌린다.
     한 열로 접히는 ≤600 에서는 아무 일도 하지 않고, 601~1024 에서는 본문 열이 먼저
     눌리지 않도록 거터를 기본값으로 둔다. 되돌리려면 이 한 줄을 지운다. */
  /* [SPEC0828-R3] .pt-col-l{column-gap:var(--pt-gap)} 였다 — 이 폭에서도 2열을 유지하는 값이다.
     실측 접힘이 600px 이라 900px 폭에서 읽는 열이 532px 로 눌렸다(사이드는 280 고정).
     브레이크포인트 규격의 1024 에서 한 열로 접는다(:root --cm-fold 와 같은 값).
     ※ 두 창 인라인(body.is-cm · .pt-wrap--norail)이 같은 선언을 (0,2,0) 으로 놓고 있어
       이 줄만으로는 이기지 못한다 — hub.css 17-24 가 (0,3,0) 으로 눈른다. 둘은 항상 같은 값이다.
     되돌리려면 column-gap:var(--pt-gap) 한 줄로 되돌리고 hub.css 17-24 를 지운다. */
  .pt-col-l{grid-template-columns:minmax(0,1fr);row-gap:var(--cm-block-gap);}
  /* 우 레일이 본문 아래로. */
  .pt-wrap{grid-template-columns:minmax(0,1fr);}
  .pt-rail{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* 메뉴 : 가로 스크롤. 드로어를 만들지 않는다.
     메뉴 7개는 한 줄에 약 780px 을 쓴다. 이 분기부터 스크롤로 바꿔야
     600–1024 구간에서 body 가로 스크롤이 생기지 않는다
     (style.css 의 body{overflow-x:hidden} 으로 가리지 않는다). */
  .pt-gnb__in{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pt-gnb__in::-webkit-scrollbar{display:none;}
  .pt-gnb__in > :last-child{margin-right:var(--pt-pad);}
}

/* [WIN0827D-R2 공유시트] @media (max-width:820px) 블록을 지웠다(위와 같은 이유).
   안에 있던 두 줄은 둘 다 포털 셸(.pt-ft__biz · .pt-gnb__ext-n) 규칙이고, 그 마크업은
   9개 창 어느 곳에도 없다(실측). 푸터 2열 접기는 hub.css .hub-ft__biz 가 1024 에서 맡고 있다.
   되돌리려면 @media (max-width:820px){.pt-ft__biz{grid-template-columns:repeat(2,minmax(0,1fr));}
   .pt-gnb__ext-n{display:none;}} 를 되살린다. */

@media (max-width:600px){
  /* [WIN0827D-R2 공유시트] 12px 이었다. 셸(hub.css --cm-pad)이 이 폭에서 16px 이라 본문만 4px 안으로
     들어와 로고 · 메뉴 · 푸터 와 왼쪽 끝이 어긋났다. 두 값을 하나로 둔다. 되돌리려면 12px 로. */
  :root{--pt-pad:16px;}

  /* 배너 : 32px · 두 줄 금지(말줄임) */
  .pt-ad{--pt-ad-h:32px;}

  /* 헤더 : 2줄 (로고·계정 52px + 검색 44px) */
  .pt-hd__in{
    flex-wrap:wrap;align-items:center;gap:0 12px;
    padding-top:0;padding-bottom:8px;
  }
  .pt-hd__brand{min-height:52px;}
  .pt-hd__act{min-height:52px;margin-left:auto;}
  .pt-hd__search{flex:1 0 100%;max-width:none;order:3;min-height:36px;}

  /* [PORTAL0827] 완전 1열 — 위젯은 본문 **뒤로**.
     order:-1 로 위젯을 앞에 두었더니 모바일 첫 화면이 목록이 아니라 위젯이 됐다.
     이번 개편의 목적이 「첫 화면부터 목록」이라 그 목적을 스스로 깨고 있었다.
     위젯 접근은 GNB 줄의 「내 마일리지」·「인증글 쓰기」 앵커가 이미 맡는다. */
  .pt-col-l{grid-template-columns:minmax(0,1fr);}
  .pt-side{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    /* [WIN0827D 공유시트] /my/ 담당 요청. 2열로 접히면서 격자 기본값(stretch)이
       칸 높이를 서로 맞춰, 내용이 짧은 칸이 옆 칸만큼 늘어나 테두리 안이 빈 상자로
       남았다(375px 실측 : 「내 마일리지」 칸 절반이 빔). 칸을 내용 높이로 둔다.
       /feed/ · /mileage/ 도 같은 위젯 4종을 쓰므로 여기 한 곳에서 셋이 함께 풀린다.
       ※ /my/ 가 .pt-side--fit 수식 클래스로 임시 처리해 두었다. 이 규칙이 들어왔으므로
         그 창 담당은 인라인 ⑧ 과 그 클래스를 지워도 된다.
       되돌리려면 이 한 줄을 지운다. */
    align-items:start;
  }
  .pt-rail{grid-template-columns:minmax(0,1fr);}

  /* 본문 블록은 화면 폭을 꽉 채운다 */
  .pt-box{
    border-radius:0;border-left:0;border-right:0;
    margin-left:calc(var(--pt-pad) * -1);
    margin-right:calc(var(--pt-pad) * -1);
  }
  .pt-box__bd{padding:12px 14px;}
  .pt-box__hd{padding:0 14px;}
  .pt-box__ft{padding:8px 14px 10px;}

  .pt-ft__biz{grid-template-columns:minmax(0,1fr);}
}

/* community.html 전용 — 하단 고정 인증글 CTA(.cm_fixcta)와 겹치므로
   그 페이지에서만 「인증글 쓰기」 위젯을 내리고 나머지 3개를 3열로 둔다.     */
@media (max-width:600px){
  /* [WIN0827D-R2 공유시트] body.is-cm .pt-w--write{display:none} 한 줄을 지웠다. 하단 고정 CTA(.cm_fixcta)와
     겹친다는 이유로 감춰 둔 것인데 그 CTA 는 직전 회차에 지워졌다(실측 : /feed/ 마크업에
     .cm_fixcta 0건). 감춰 둔 탓에 375px 에서 단계 딥링크 네 칸(/feed/?step=…)이 통째로 사라졌다.
     되돌리려면 body.is-cm .pt-w--write{display:none;} 를 되살린다. */

  /* [WIN0827 공유시트] repeat(3,...) 였다. 375px 에서 위젯 폭이 약 109px 가 되어
     반드시 병기해야 하는 「부가서비스 할인에만 사용 · 현금 환급 및 양도 불가」가
     11px 글자로 세 줄에 으깨졌다. 표기 규칙이 읽히는 것이 3열보다 우선이다.
     되돌리려면 repeat(3,minmax(0,1fr)) 로 되돌린다. */
  body.is-cm .pt-side{grid-template-columns:minmax(0,1fr);}
}

/* 움직임을 줄이도록 설정한 사용자 — 셸에는 애니메이션이 없지만 명시해 둔다 */
@media (prefers-reduced-motion:reduce){
  .pt-gnb{transition:none;}
}


/* ── 12. [LAYOUT0828] 사이드 위젯 · 본문 리듬 ──────────────────────────────
   무엇을 : 사이드 14장이 전부 1px 테두리 카드였다. 윗선 한 줄로 바꿔 오른쪽 열이
   상자 더미가 아니라 한 줄기가 되게 한다. 사이드에서 테두리를 남기는 것은 버튼뿐이다.
   새 색을 만들지 않았다 — 선은 --cm-rule(= --cm-dim #555D6D) 하나다.
   ※ 반전 카드(.pt-w--nudge · .pt-c--nudge)만 면을 유지한다 — 사이드에서 위계를
     하나만 주기 위한 자리라 선으로 바꾸면 그 하나가 사라진다.
   이 절이 파일 끝에 오는 이유 : 앞 절의 같은 이름 규칙을 한 자리에서 덮어
   되돌릴 때 이 절만 지우면 되게 하려는 것이다. 그래서 11절(1024/600)의 몫도
   이 절 안에 같은 분기로 다시 적는다.
   되돌리려면 이 절을 통째로 지우고 :root 의 [LAYOUT0828] 주석대로 토큰을 되돌린다. */

/* 위젯 사이 시각 간격은 gap 이 아니라 위젯의 padding-top 24 가 만든다 */
.pt-side{gap:0;}
.pt-rail{gap:0;}
.pt-w,
.pt-c{
  background:none;
  border:0;
  border-radius:0;
  padding:var(--cm-gap-l) 0 0;
  border-top:1px solid var(--cm-rule);
}
.pt-side > .pt-w:first-child,
.pt-side > .pt-c:first-child,
.pt-rail > .pt-c:first-child{border-top:0;padding-top:0;}
/* 반전 위젯 한 장만 면을 갖는다 */
.pt-w--nudge,
.pt-c--nudge{
  padding:var(--cm-gap-l);
  border-top:0;
  border-radius:var(--cm-card-r);
}
/* 위젯 제목 — 사이드가 320 으로 넓어져 16px 이 한 줄에 든다 */
/* [LAYOUT0828-R2] 무엇을 : 아래 안여백 8px 을 더했다(밑줄과 제목 사이).
   왜 : hub.css 17-32 의 cm-band 한 벌이 이제 .pt-w__ttl 도 함께 읽어 밑줄 한 줄을 준다.
        규격의 사이드 위젯 머리는 「제목 16 / 24 / 700 · padding-bottom 8」이다.
        크기 · 줄 높이를 여기서 갖는 이유 : 이 시트가 hub.css **뒤에** 실려, 저쪽에 적으면
        같은 규칙이 두 곳으로 갈린다.
   되돌리려면 : padding 한 줄을 지운다. */
.pt-w__ttl,
.pt-c__ttl{
  font-size:16px;line-height:24px;font-weight:700;
  padding:0 0 var(--cm-gap-xs);
  margin:0 0 var(--cm-gap-s);
}

/* [LAYOUT0828-R2] 사이드 열 — 세 창의 sticky 기준을 한 값으로 세운다.
   무엇을 : top 을 --cm-side-top(88px) 으로 모으고 align-self:start · max-height ·
        overflow-y:auto 를 더했다.
   왜 : 실측(1920) 이 feed 112 · my 60 · mileage 60 세 값이라 같은 열이 세 창에서 다른
        높이에 붙었다. max-height 가 없으면 사이드가 뷰포트보다 길 때 sticky 가 아예 죽는다.
   ※ 이것만으로는 오른쪽 빈 칸이 없어지지 않는다 — 실측 my 495 대 본문 3500(86% 가 빔) ·
     mileage 744 대 3533(79%) 이다. 본문 아래쪽의 넓은 표 · 목록을 .pt-col-l **밖**
     레인 전폭으로 빼야 풀린다(마크업 일이라 이번 회차에서 하지 못했다).
   무게가 (0,3,0) 인 이유 : /feed/ 인라인의 `body.is-cm .pt-side{top:112px}`(0,2,0) 이
   이 시트 뒤에 실려 있어 `.pt-side`(0,1,0) · `.pt-wrap .pt-side`(0,2,0) 로는 닿지 않는다. 그 창 담당이 그 줄을 지우면
   여기 선택자도 .pt-side 한 줄로 줄여라.
   되돌리려면 : 이 덩이를 지운다(위 8절의 top:var(--pt-sticky) 로 돌아간다). */
.pt-wrap .pt-col-l .pt-side,
.pt-side{
  position:sticky;
  top:var(--cm-side-top);
  align-self:start;
  max-height:calc(100vh - 112px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (max-width:1024px){
  /* 사이드가 본문 아래로 내려가면 sticky · 높이 제한을 전부 푼다 */
  .pt-wrap .pt-col-l .pt-side,
  .pt-side{position:static;top:auto;max-height:none;overflow-y:visible;}
}

/* 본문 블록 사이 — 20px 였다. 묶음과 묶음을 여백이 가르게 한다 */
.pt-main > * + *{margin-top:var(--cm-block-gap);}

@media (max-width:1024px){
  /* 사이드가 본문 아래로 내려가면 위젯이 2열로 선다 */
  .pt-side{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--cm-gap-2xl);
    row-gap:0;
    align-items:start;
  }
  .pt-side > .pt-w:nth-child(-n+2),
  .pt-side > .pt-c:nth-child(-n+2){border-top:0;padding-top:0;}
}

@media (max-width:600px){
  /* 전부 1열. 열 수가 바뀌면 유효한 선도 바뀐다 */
  .pt-side{
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:0;
  }
  .pt-side > .pt-w:nth-child(2),
  .pt-side > .pt-c:nth-child(2){
    border-top:1px solid var(--cm-rule);
    padding-top:var(--cm-gap-l);
  }
}