/* =====================================================================
   carbon_page.css — 탄소중립포인트(화면 표기 '탄소중립포인트') 안내·실적 페이지 전용 (2026-08-26) v1.10.0
   · v1.10.0(2026-09-02) 안내 v2 — "포인트는 이렇게 쌓여요"(#cbEarn) 블록 + #cbMine 한 줄 칩. 파일 끝 tail append(참조 carbon_frame_top.jspf ?v=1.10.0).
   · v1.5.1 연결 끊김 안내(.cb-unlinknote) 추가. ※ 헤더 표기가 참조(?v=1.5.0)와 어긋나 있어 여기서 맞췄다.
   · 루트 JSP 3종(carbon_guide / carbon_stat / carbon_mystat)이 공유한다.
   · 모든 규칙은 .cbz 스코프 안에서만 작동 → 헤더·푸터(style_v2)와 충돌 0.
   · 50~60대 눈높이: 본문 17~18px, 줄간격 1.75, 굵은 소제목, 한 화면 한 주제.
   ===================================================================== */
.cbz{
  --cb-green:#3d6041; --cb-green-d:#2c4731; --cb-green-dd:#1f3324; --cb-green-line:#4f7355;
  --cb-orange:#f8a31e; --cb-orange-d:#dc8a00;
  --cb-cream:#f6f4ec; --cb-paper:#ffffff; --cb-tint:#eef4ea; --cb-tint2:#f3f7f0;
  --cb-ink:#1d251f; --cb-ink2:#546055; --cb-line:#e2e5da;
  --cb-leaf:#e7f0e4; --cb-note-bg:#fdf4de; --cb-note-line:#f1d69a; --cb-note-ink:#5c4a1e;
  --cb-shadow:0 1px 2px rgba(30,50,30,.05),0 12px 28px rgba(30,50,30,.07);
  --cb-shadow-lg:0 10px 34px rgba(20,40,24,.14);
  background:var(--cb-cream);color:var(--cb-ink);
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.75;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;word-break:keep-all;overflow-wrap:anywhere;
}
.cbz *,.cbz *::before,.cbz *::after{box-sizing:border-box;}
.cbz img,.cbz svg{max-width:100%;}
.cbz svg{display:block;}
.cbz a{color:inherit;text-decoration:none;}
.cbz p{margin:0;}
.cbz ul,.cbz ol{margin:0;padding:0;list-style:none;}
.cbz h1,.cbz h2,.cbz h3{margin:0;font-weight:900;}
.cbz b,.cbz strong{font-weight:800;}
.cbz a:focus-visible,.cbz summary:focus-visible,.cbz button:focus-visible{outline:3px solid var(--cb-orange);outline-offset:3px;border-radius:6px;}
@media(min-width:720px){.cbz{font-size:19px;}}

/* 모바일(head_type2 고정헤더 59px) 보정 — page_wrap 이 padding-top 59px 을 이미 준다.
   하단 여백은 footer_detail 이 이어지므로 page_wrap 기본 150px 를 줄인다. */
.page_wrap.cbz-mo{padding-bottom:0;}

/* ----- 밴드(가로 전폭) ----- */
.cbz .cb-band{width:100%;padding:54px 20px;}
.cbz .cb-band .cb-inner{max-width:860px;margin:0 auto;}
.cbz .cb-band.cb-wide .cb-inner{max-width:1040px;}
.cbz .cb-band--green{background:linear-gradient(163deg,var(--cb-green) 0%,var(--cb-green-d) 54%,var(--cb-green-dd) 100%);color:#fff;}
.cbz .cb-band--light{background:var(--cb-cream);}
.cbz .cb-band--paper{background:var(--cb-paper);}
.cbz .cb-band--tint{background:var(--cb-tint2);}
@media(min-width:720px){.cbz .cb-band{padding:72px 26px;}}

/* ----- 섹션 제목 ----- */
.cbz .cb-eyebrow{display:inline-block;font-size:15px;font-weight:800;color:var(--cb-green);letter-spacing:.04em;margin:0 0 12px;padding:6px 13px;border-radius:999px;background:var(--cb-leaf);border:1px solid var(--cb-line);}
.cbz .cb-band--green .cb-eyebrow{color:#cfe7d3;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}
.cbz h2.cb-sh{font-size:26px;line-height:1.3;margin:0 0 12px;letter-spacing:-.03em;color:var(--cb-ink);}
.cbz .cb-band--green h2.cb-sh{color:#fff;}
@media(min-width:720px){.cbz h2.cb-sh{font-size:32px;}}
.cbz .cb-desc{margin:0 0 26px;color:var(--cb-ink2);font-size:17px;max-width:56ch;line-height:1.75;}
.cbz .cb-band--green .cb-desc{color:#d3e6d5;}
@media(min-width:720px){.cbz .cb-desc{font-size:19px;}}

/* ----- 히어로 ----- */
.cbz .cb-hero{position:relative;overflow:hidden;color:#fff;background:var(--cb-green-dd);min-height:500px;display:flex;}
.cbz .cb-hero .cb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% center;z-index:0;}
.cbz .cb-hero .cb-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(31,51,36,.22) 0%,rgba(31,51,36,.38) 36%,rgba(31,51,36,.86) 70%,rgba(20,34,25,.97) 100%);}
.cbz .cb-hero .cb-inner{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;display:flex;align-items:flex-end;padding:34px 20px 44px;}
.cbz .cb-hero .cb-copy{width:100%;}
@media(min-width:860px){
  .cbz .cb-hero .cb-photo{object-position:left center;}
  .cbz .cb-hero .cb-scrim{background:linear-gradient(to left,rgba(20,34,25,.96) 0%,rgba(31,51,36,.88) 30%,rgba(44,71,49,.52) 56%,rgba(44,71,49,.12) 78%,rgba(44,71,49,0) 92%);}
  .cbz .cb-hero .cb-inner{align-items:center;justify-content:flex-end;padding:64px 26px;}
  .cbz .cb-hero .cb-copy{max-width:580px;}
}
.cbz .cb-cobrand{display:inline-block;font-size:15px;font-weight:800;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.3);padding:8px 15px;border-radius:999px;margin:0 0 18px;}
.cbz .cb-hero h1{font-size:32px;line-height:1.24;margin:0 0 14px;letter-spacing:-.035em;text-shadow:0 2px 14px rgba(0,0,0,.42);}
@media(min-width:720px){.cbz .cb-hero h1{font-size:40px;}}
.cbz .cb-hero h1 em{font-style:normal;color:#ffd27a;}
.cbz .cb-hero .cb-lead{font-size:19px;line-height:1.7;margin:0 0 22px;max-width:44ch;color:#eaf4eb;text-shadow:0 1px 10px rgba(0,0,0,.36);}
@media(min-width:720px){.cbz .cb-hero .cb-lead{font-size:19px;}}
.cbz .cb-figure{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:rgba(15,26,18,.5);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px 22px;}
.cbz .cb-figure .cb-cap{font-size:15px;font-weight:700;color:#d6e7d8;line-height:1.4;}
.cbz .cb-figure .cb-big{font-size:40px;font-weight:900;color:var(--cb-orange);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
@media(min-width:720px){.cbz .cb-figure .cb-big{font-size:48px;}}
.cbz .cb-figure .cb-unit{font-size:19px;font-weight:900;color:var(--cb-orange);}

/* ----- "이게 뭔가요" 한 문장 + 핵심 3줄 ----- */
.cbz .cb-one{font-size:22px;line-height:1.6;font-weight:800;letter-spacing:-.025em;color:var(--cb-ink);margin:0 0 22px;max-width:34ch;}
@media(min-width:720px){.cbz .cb-one{font-size:26px;}}
.cbz .cb-one em{font-style:normal;color:var(--cb-orange-d);}
.cbz .cb-keys{display:grid;gap:12px;grid-template-columns:1fr;}
@media(min-width:680px){.cbz .cb-keys{grid-template-columns:repeat(3,1fr);}}
.cbz .cb-key{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:16px;padding:20px 22px;box-shadow:var(--cb-shadow);}
.cbz .cb-key .cb-k{display:block;font-size:15px;font-weight:800;color:var(--cb-green);margin:0 0 6px;}
.cbz .cb-key .cb-v{display:block;font-size:19px;font-weight:800;color:var(--cb-ink);line-height:1.45;}
.cbz .cb-key .cb-v small{display:block;font-size:15px;font-weight:500;color:var(--cb-ink2);margin-top:4px;}

/* ----- "어떻게 참여하나요" 단계(번호·아이콘 없이 굵은 소제목) ----- */
.cbz .cb-steps{display:grid;gap:16px;}
.cbz .cb-step{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:24px 24px 22px;box-shadow:var(--cb-shadow);}
.cbz .cb-step h3{font-size:19px;line-height:1.4;letter-spacing:-.025em;color:var(--cb-ink);margin:0 0 10px;}
@media(min-width:720px){.cbz .cb-step h3{font-size:22px;}}
.cbz .cb-step h3 .cb-no{display:inline-block;font-size:15px;font-weight:800;color:var(--cb-green);background:var(--cb-leaf);border:1px solid var(--cb-line);border-radius:8px;padding:2px 9px;margin-right:9px;vertical-align:middle;letter-spacing:0;}
.cbz .cb-step p{font-size:17px;line-height:1.75;color:var(--cb-ink2);margin:0;}
.cbz .cb-step p + p{margin-top:8px;}
.cbz .cb-step p b{color:var(--cb-ink);}
.cbz .cb-step .cb-where{display:inline-block;margin-top:12px;font-size:15px;font-weight:800;color:var(--cb-green);background:var(--cb-tint2);border:1px solid var(--cb-line);border-radius:10px;padding:8px 13px;}
.cbz .cb-step .cb-where a{text-decoration:underline;text-underline-offset:3px;}
@media(min-width:720px){.cbz .cb-step p{font-size:17px;}}

/* ----- 안내 상자(노란) ----- */
.cbz .cb-note{background:var(--cb-note-bg);border:1px solid var(--cb-note-line);border-radius:14px;padding:18px 20px;font-size:17px;color:var(--cb-note-ink);margin-top:18px;line-height:1.7;}
.cbz .cb-note b{color:var(--cb-orange-d);}
.cbz .cb-note a{text-decoration:underline;text-underline-offset:3px;font-weight:700;}

/* ----- "무엇을 하면 쌓이나요" 표 ----- */
.cbz .cb-tablewrap{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;box-shadow:var(--cb-shadow);overflow:hidden;}
.cbz table.cb-table{width:100%;border-collapse:collapse;font-size:17px;}
.cbz table.cb-table th,.cbz table.cb-table td{padding:16px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--cb-line);line-height:1.6;}
.cbz table.cb-table thead th{border-top:none;background:var(--cb-tint2);font-size:15px;font-weight:800;color:var(--cb-ink2);letter-spacing:.02em;}
.cbz table.cb-table td.cb-item{font-weight:800;color:var(--cb-ink);font-size:17px;white-space:nowrap;}
.cbz table.cb-table td.cb-how{color:var(--cb-ink2);}
.cbz table.cb-table td.cb-pt{white-space:nowrap;}
.cbz table.cb-table td.cb-pt .cb-n{font-size:26px;font-weight:900;color:var(--cb-orange-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;}
.cbz table.cb-table td.cb-pt .cb-per{display:block;font-size:15px;color:var(--cb-green);font-weight:800;margin-top:4px;}
@media(max-width:640px){
  .cbz table.cb-table,.cbz table.cb-table tbody,.cbz table.cb-table tr,.cbz table.cb-table td{display:block;width:100%;}
  .cbz table.cb-table thead{display:none;}
  .cbz table.cb-table tr{border-top:1px solid var(--cb-line);padding:6px 0;}
  .cbz table.cb-table tr:first-child{border-top:none;}
  .cbz table.cb-table td{border-top:none;padding:8px 18px;}
  .cbz table.cb-table td.cb-item{padding-top:16px;white-space:normal;}
  .cbz table.cb-table td.cb-how::before{content:"두레에서 하는 방법";display:block;font-size:13px;font-weight:800;color:var(--cb-green);margin-bottom:2px;}
  .cbz table.cb-table td.cb-pt{padding-bottom:18px;}
}
.cbz .cb-cap-total{margin-top:18px;background:var(--cb-green);color:#fff;border-radius:16px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cbz .cb-cap-total .cb-t{font-size:17px;font-weight:700;letter-spacing:-.02em;}
.cbz .cb-cap-total .cb-v{font-size:32px;font-weight:900;color:#ffd27a;font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.cbz .cb-cap-total .cb-v small{font-size:17px;font-weight:800;}

/* ----- 좋은 점 3가지 ----- */
.cbz .cb-goods{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:720px){.cbz .cb-goods{grid-template-columns:repeat(3,1fr);}}
.cbz .cb-good{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:26px 24px;box-shadow:var(--cb-shadow);}
.cbz .cb-good h3{font-size:19px;letter-spacing:-.025em;color:var(--cb-green);margin:0 0 8px;line-height:1.35;}
.cbz .cb-good p{font-size:17px;color:var(--cb-ink2);line-height:1.7;}

/* ----- CTA(초록) ----- */
.cbz .cb-cta{text-align:center;}
.cbz .cb-cta h2{margin:0 0 12px;font-size:26px;letter-spacing:-.03em;line-height:1.32;color:#fff;}
@media(min-width:720px){.cbz .cb-cta h2{font-size:32px;}}
.cbz .cb-cta p{margin:0 0 24px;color:#d6e7d8;font-size:19px;}
.cbz .cb-cta a.cb-btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;background:var(--cb-orange);color:#20271f;font-weight:900;font-size:19px;border-radius:999px;padding:18px 34px;min-height:56px;box-shadow:0 12px 26px rgba(248,163,30,.32);letter-spacing:-.015em;transition:transform .18s ease,background .18s ease;}
.cbz .cb-cta a.cb-btn:hover{background:var(--cb-orange-d);transform:translateY(-2px);}
.cbz .cb-cta .cb-sub{margin-top:18px;font-size:15px;color:#bcd4bf;line-height:1.7;}
.cbz .cb-cta .cb-steps3{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 26px;}
.cbz .cb-cta .cb-steps3 span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 15px;font-size:15px;font-weight:700;color:#eaf4eb;}
.cbz .cb-cta .cb-steps3 b{color:var(--cb-orange);font-weight:900;}

/* ----- 자주 묻는 질문 ----- */
.cbz .cb-faq{display:grid;gap:12px;}
.cbz .cb-faq details{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:16px;box-shadow:var(--cb-shadow);overflow:hidden;}
.cbz .cb-faq summary{cursor:pointer;font-weight:800;padding:19px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:17px;min-height:48px;color:var(--cb-ink);line-height:1.45;}
.cbz .cb-faq summary::-webkit-details-marker{display:none;}
.cbz .cb-faq summary::after{content:'+';color:var(--cb-green);font-weight:900;font-size:26px;line-height:1;flex:none;}
.cbz .cb-faq details[open] summary{color:var(--cb-green);}
.cbz .cb-faq details[open] summary::after{content:'\2212';}
.cbz .cb-faq .cb-a{padding:0 20px 20px;color:var(--cb-ink2);font-size:17px;line-height:1.75;}
.cbz .cb-faq .cb-a ul{margin:6px 0 0;padding-left:20px;list-style:disc;}
.cbz .cb-faq .cb-a li{margin:5px 0;}
.cbz .cb-faq .cb-a b{color:var(--cb-ink);}

/* ----- 실적 타일·표(안내 하단 밴드 + 실적 페이지 공용) ----- */
.cbz .cb-headfig{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:rgba(15,26,18,.5);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px 22px;}
.cbz .cb-headfig .cb-cap{font-size:15px;font-weight:700;color:#d6e7d8;line-height:1.4;}
.cbz .cb-headfig .cb-big{font-size:40px;font-weight:900;color:var(--cb-orange);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
@media(min-width:720px){.cbz .cb-headfig .cb-big{font-size:48px;}}
.cbz .cb-headfig .cb-unit{font-size:19px;font-weight:900;color:var(--cb-orange);}
.cbz .cb-asof{margin-top:16px;font-size:15px;color:#bcd4bf;}
.cbz .cb-stat-head{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 22px;}
@media(min-width:640px){.cbz .cb-stat-head{grid-template-columns:repeat(3,1fr);}}
.cbz .cb-stat-tile{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:24px 20px;text-align:center;box-shadow:var(--cb-shadow);}
.cbz .cb-stat-tile .cb-v{font-size:32px;font-weight:900;color:var(--cb-green);font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1;min-height:1em;}
@media(min-width:720px){.cbz .cb-stat-tile .cb-v{font-size:40px;}}
.cbz .cb-stat-tile .cb-v small{font-size:17px;font-weight:800;margin-left:2px;}
.cbz .cb-stat-tile.cb-hot .cb-v{color:var(--cb-orange-d);}
.cbz .cb-stat-tile .cb-l{font-size:15px;color:var(--cb-ink2);margin-top:10px;line-height:1.45;}
.cbz .cb-month-table{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:16px;overflow:hidden;box-shadow:var(--cb-shadow);overflow-x:auto;}
.cbz .cb-month-table .cb-mrow{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;align-items:center;padding:14px 18px;border-top:1px solid var(--cb-line);font-size:15px;gap:6px;}
.cbz .cb-month-table.cb-cols5 .cb-mrow{grid-template-columns:1.15fr .85fr .85fr 1fr 1fr;}
.cbz .cb-month-table .cb-mrow:first-child{border-top:none;background:var(--cb-tint2);font-weight:800;color:var(--cb-ink2);font-size:13px;}
.cbz .cb-month-table .cb-mrow .cb-r{text-align:right;font-variant-numeric:tabular-nums;}
.cbz .cb-month-table .cb-mrow .cb-r.cb-g{color:var(--cb-orange-d);font-weight:800;}
.cbz .cb-month-table .cb-mrow b{font-weight:800;color:var(--cb-ink);}
.cbz .cb-stat-empty{background:var(--cb-paper);border:1px dashed var(--cb-line);border-radius:16px;padding:30px 20px;text-align:center;color:var(--cb-ink2);font-size:17px;}
.cbz .cb-stat-err{background:var(--cb-paper);border:1px dashed #d99;border-radius:16px;padding:30px 20px;text-align:center;color:#a33;font-size:17px;}
.cbz .cb-stat-src{margin-top:14px;font-size:13px;color:var(--cb-ink2);text-align:right;line-height:1.6;}
.cbz .cb-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 20px;color:var(--cb-ink2);font-size:17px;}
.cbz .cb-loading[hidden],.cbz [hidden]{display:none !important;}
.cbz .cb-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--cb-line);border-top-color:var(--cb-green);animation:cbsp .8s linear infinite;flex:none;}
@keyframes cbsp{to{transform:rotate(360deg);}}

/* 막대그래프(실적 페이지) */
.cbz .cb-chart{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:26px 24px;box-shadow:var(--cb-shadow);margin:0 0 22px;}
.cbz .cb-chart-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px;}
.cbz .cb-chart-hd .cb-tt{font-size:19px;font-weight:800;color:var(--cb-ink);}
.cbz .cb-chart-hd .cb-unit-note{font-size:15px;color:var(--cb-ink2);}
.cbz .cb-bars{display:flex;flex-direction:column;gap:12px;}
.cbz .cb-bar-row{display:grid;grid-template-columns:78px 1fr 100px;align-items:center;gap:12px;}
@media(min-width:560px){.cbz .cb-bar-row{grid-template-columns:96px 1fr 116px;}}
.cbz .cb-bar-row .cb-lb{font-size:15px;font-weight:800;color:var(--cb-ink2);white-space:nowrap;}
.cbz .cb-bar-row.cb-latest .cb-lb{color:var(--cb-green);}
.cbz .cb-bar-track{background:var(--cb-tint2);border-radius:999px;height:22px;overflow:hidden;position:relative;}
.cbz .cb-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cb-green) 0%,var(--cb-green-d) 100%);width:var(--w,0%);transition:width .5s ease;min-width:3px;}
.cbz .cb-bar-row.cb-latest .cb-bar-fill{background:linear-gradient(90deg,var(--cb-orange) 0%,var(--cb-orange-d) 100%);}
.cbz .cb-bar-row .cb-rv{font-size:15px;font-weight:800;color:var(--cb-ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* 도움 상자 + 링크 버튼 */
.cbz .cb-help{background:var(--cb-tint2);border:1px solid var(--cb-line);border-radius:16px;padding:22px 24px;margin-top:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;}
.cbz .cb-band--light .cb-help,.cbz .cb-band--tint .cb-help{background:var(--cb-paper);box-shadow:var(--cb-shadow);}
.cbz .cb-help p{margin:0;font-size:17px;color:var(--cb-ink2);line-height:1.65;max-width:52ch;}
.cbz .cb-help p b{color:var(--cb-ink);}
.cbz .cb-linkbtns{display:flex;gap:10px;flex-wrap:wrap;}
.cbz .cb-linkbtn{display:inline-flex;align-items:center;gap:8px;background:var(--cb-green);color:#fff;font-weight:800;font-size:15px;border-radius:999px;padding:12px 20px;white-space:nowrap;min-height:46px;}
.cbz .cb-linkbtn:hover{background:var(--cb-green-d);}
.cbz .cb-linkbtn.cb-ghost{background:#fff;color:var(--cb-green);border:1px solid var(--cb-green-line);}
.cbz .cb-linkbtn.cb-ghost:hover{background:var(--cb-leaf);}

/* 내 실적(마이) */
.cbz .cb-login{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:22px;padding:36px 28px;box-shadow:var(--cb-shadow-lg);text-align:center;}
.cbz .cb-login h2{margin:0 0 10px;font-size:22px;color:var(--cb-ink);letter-spacing:-.02em;}
.cbz .cb-login p{margin:0 auto 24px;color:var(--cb-ink2);font-size:17px;line-height:1.7;max-width:40ch;}
.cbz .cb-btn-login{display:inline-flex;gap:9px;align-items:center;justify-content:center;background:var(--cb-green);color:#fff;font-weight:800;font-size:17px;border-radius:999px;padding:15px 28px;min-height:52px;box-shadow:0 10px 22px rgba(61,96,65,.25);}
.cbz .cb-btn-login:hover{background:var(--cb-green-d);}
.cbz .cb-myhero{background:linear-gradient(155deg,var(--cb-green) 0%,var(--cb-green-d) 70%,var(--cb-green-dd) 100%);color:#fff;border-radius:24px;padding:30px 28px;box-shadow:var(--cb-shadow-lg);}
.cbz .cb-myhero .cb-mh{font-size:15px;font-weight:800;color:#cfe7d3;margin:0 0 8px;}
.cbz .cb-myhero .cb-lbl{font-size:15px;color:#d3e6d5;margin:0 0 4px;}
.cbz .cb-myhero .cb-big{font-size:48px;font-weight:900;color:#ffd27a;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;}
@media(min-width:720px){.cbz .cb-myhero .cb-big{font-size:56px;}}
.cbz .cb-myhero .cb-big small{font-size:22px;font-weight:800;}
.cbz .cb-myhero .cb-sub{color:#d3e6d5;font-size:15px;margin-top:6px;}
.cbz .cb-tilegrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px;}
@media(min-width:640px){.cbz .cb-tilegrid{grid-template-columns:1fr 1fr;}}
.cbz .cb-tile-group{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:22px;box-shadow:var(--cb-shadow);}
.cbz .cb-tile-group .cb-gk{font-size:15px;font-weight:800;color:var(--cb-green);margin:0 0 12px;}
.cbz .cb-tile-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--cb-line);}
.cbz .cb-tile-row:first-of-type{border-top:none;}
.cbz .cb-tile-row .cb-l{font-size:15px;color:var(--cb-ink2);}
.cbz .cb-tile-row .cb-v{font-size:19px;font-weight:800;color:var(--cb-ink);font-variant-numeric:tabular-nums;}
.cbz .cb-tile-row .cb-v.cb-hot{color:var(--cb-orange-d);font-size:22px;}
.cbz .cb-emptynote{background:var(--cb-tint2);border:1px solid var(--cb-line);border-radius:14px;padding:16px 18px;margin-top:20px;font-size:15px;color:var(--cb-ink2);line-height:1.65;}
.cbz .cb-emptynote b{color:var(--cb-ink);}

/* [2026-08-26 v1.5.1] 연결 끊김 안내 — 로그인+미연결이지만 과거 실적이 있는 조합원에게만 뜬다.
   실적 블록(#cbMyBox) 위에 얹히는 상태 배너라 경고 빨강이 아니라 주의(모래빛) 톤. 50~60대 기준 본문 16px 이상. */
.cbz .cb-unlinknote{background:#fdf6e6;border:1px solid #e2cf9e;border-left:5px solid #c79a3a;border-radius:14px;padding:20px 22px;margin-bottom:22px;}
.cbz .cb-unlinknote h3{margin:0 0 10px;font-size:19px;font-weight:800;color:#7a5613;line-height:1.45;}
.cbz .cb-unlinknote p{margin:0;font-size:17px;line-height:1.72;color:var(--cb-ink2);}
.cbz .cb-unlinknote b{color:var(--cb-ink);}
.cbz .cb-unlinknote a{color:#7a5613;font-weight:700;text-decoration:underline;}
@media (max-width:768px){
  .cbz .cb-unlinknote{padding:17px 16px;border-radius:12px;}
  .cbz .cb-unlinknote h3{font-size:17px;}
  .cbz .cb-unlinknote p{font-size:15px;}
}
.cbz .cb-myst{margin-top:26px;background:linear-gradient(155deg,var(--cb-green) 0%,var(--cb-green-d) 70%,var(--cb-green-dd) 100%);color:#fff;border-radius:22px;padding:28px 24px;box-shadow:var(--cb-shadow-lg);}
.cbz .cb-myst .cb-mh{font-size:15px;font-weight:800;color:#cfe7d3;margin:0 0 6px;}
.cbz .cb-myst .cb-big{font-size:40px;font-weight:900;color:#ffd27a;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;}
@media(min-width:720px){.cbz .cb-myst .cb-big{font-size:48px;}}
.cbz .cb-myst .cb-big small{font-size:22px;font-weight:800;}
.cbz .cb-myst .cb-sub{color:#d3e6d5;font-size:15px;margin-top:6px;}
.cbz .cb-myst .cb-mini{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.cbz .cb-myst .cb-mini div{flex:1 1 130px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 14px;}
.cbz .cb-myst .cb-mini b{display:block;font-size:22px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.cbz .cb-myst .cb-mini span{font-size:15px;color:#cfe7d3;}
.cbz .cb-myst .cb-login-cta{margin-top:18px;}
.cbz .cb-myst .cb-login-cta a{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:800;font-size:15px;border-radius:999px;padding:12px 20px;}
.cbz .cb-myst .cb-login-cta a:hover{background:rgba(255,255,255,.22);}

/* (스크롤 리빌 애니메이션은 제거 — 50~60대 눈높이: 항상 보이게) */

/* 좁은 화면: 5열 달별 표는 글자를 줄여 한 줄에 맞춘다 */
@media(max-width:520px){
  .cbz .cb-month-table.cb-cols5 .cb-mrow{font-size:13px;padding:12px 10px;gap:4px;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow:first-child{font-size:13px;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow b{font-size:13px;white-space:nowrap;}
}

/* ---- v1.0.3 (2026-08-21) 항목별 인정 실천 타일(친환경 생활재 구매 / 재사용병·종이팩 반납 / 장바구니 이용 / 기타) + 내 실적 항목 행 ---- */
.cbz .cb-item-head{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0 0 22px;}
@media(min-width:720px){.cbz .cb-item-head{grid-template-columns:repeat(4,1fr);}}
.cbz .cb-item-tile{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:16px;padding:18px 14px;text-align:center;box-shadow:var(--cb-shadow);}
.cbz .cb-item-tile .cb-v{font-size:26px;font-weight:900;color:var(--cb-green);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;min-height:1em;}
.cbz .cb-item-tile .cb-v small{font-size:15px;font-weight:800;margin-left:2px;}
.cbz .cb-item-tile .cb-l{font-size:15px;font-weight:700;color:var(--cb-ink);margin-top:8px;line-height:1.4;}
.cbz .cb-item-tile .cb-l small{display:block;font-size:13px;font-weight:500;color:var(--cb-ink2);margin-top:3px;}
.cbz .cb-item-tile.cb-etc .cb-v{color:var(--cb-ink2);}
.cbz .cb-tile-row.cb-sub-row{padding:7px 0 7px 14px;border-top:1px dashed var(--cb-line);}
.cbz .cb-tile-row.cb-sub-row .cb-l{font-size:15px;}
.cbz .cb-tile-row.cb-sub-row .cb-l small{display:block;font-size:13px;color:var(--cb-ink2);}
.cbz .cb-tile-row.cb-sub-row .cb-v{font-size:17px;font-weight:700;}

/* ---- v1.0.4 (2026-08-21) 전체 실적 화면 v2: 요약 카드 4열 · 월별 표 그룹 헤더 · 일별 30일 막대 · TOP10 표 ---- */
@media(min-width:640px){.cbz .cb-stat-head.cb-cols4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.cbz .cb-stat-head.cb-cols4{grid-template-columns:repeat(4,1fr);}}
.cbz .cb-stat-head.cb-cols4 .cb-stat-tile .cb-v{font-size:32px;}
@media(min-width:720px){.cbz .cb-stat-head.cb-cols4 .cb-stat-tile .cb-v{font-size:32px;}}
.cbz .cb-stat-tile .cb-l small{display:block;font-size:13px;color:var(--cb-ink2);margin-top:3px;font-weight:500;}
.cbz .cb-month-table .cb-mrow.cb-mrow-group{grid-template-columns:1.15fr 1.7fr 2fr;background:var(--cb-tint2);font-weight:800;color:var(--cb-green);font-size:13px;padding:10px 18px;border-top:none;}
.cbz .cb-month-table .cb-mrow.cb-mrow-group + .cb-mrow{border-top:1px solid var(--cb-line);}
.cbz .cb-month-table .cb-mrow.cb-mrow-group .cb-span2{text-align:center;}
.cbz .cb-month-table .cb-mrow .cb-r .cb-sub{display:block;font-size:13px;font-weight:500;color:var(--cb-ink2);}
.cbz .cb-bars.cb-bars-daily{gap:7px;}
.cbz .cb-bars.cb-bars-daily .cb-bar-row{grid-template-columns:54px 1fr 72px;gap:10px;}
@media(min-width:560px){.cbz .cb-bars.cb-bars-daily .cb-bar-row{grid-template-columns:64px 1fr 90px;}}
.cbz .cb-bars.cb-bars-daily .cb-bar-track{height:16px;}
.cbz .cb-bars.cb-bars-daily .cb-lb{font-size:13px;}
.cbz .cb-bars.cb-bars-daily .cb-rv{font-size:15px;}
.cbz .cb-bar-row.cb-zero .cb-bar-fill{background:var(--cb-line);}
.cbz .cb-top-table .cb-mrow{grid-template-columns:52px 1fr .8fr .8fr;}
.cbz .cb-top-table .cb-mrow .cb-rank{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--cb-tint2);color:var(--cb-green);font-weight:900;font-size:15px;}
.cbz .cb-top-table .cb-mrow .cb-rank.cb-r1,.cbz .cb-top-table .cb-mrow .cb-rank.cb-r2,.cbz .cb-top-table .cb-mrow .cb-rank.cb-r3{background:var(--cb-green);color:#fff;}
.cbz .cb-top-table .cb-mrow a{color:var(--cb-ink);font-weight:700;text-decoration:none;}
.cbz .cb-top-table .cb-mrow a:hover{color:var(--cb-green);text-decoration:underline;}
.cbz .cb-month-table .cb-mrow .cb-r.cb-g{white-space:nowrap;}
@media(max-width:520px){
  .cbz .cb-month-table .cb-mrow.cb-mrow-group{font-size:13px;padding:8px 10px;grid-template-columns:1fr 1.8fr 2fr;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow{grid-template-columns:1fr .9fr .95fr .95fr 1.05fr;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow .cb-r.cb-g{font-size:13px;}
  .cbz .cb-month-table .cb-mrow .cb-r .cb-sub{display:none;}
  .cbz .cb-top-table .cb-mrow{grid-template-columns:40px 1fr .7fr .7fr;font-size:13px;padding:12px 10px;}
}

/* =====================================================================
   ---- v1.1.0 (2026-08-21) 안내 페이지 "그림 중심" 개편 ----
   · guide 화면 전용(.cbz[data-cb-page="guide"] 스코프) — stat/mystat 무영향.
   · 히어로 큰 숫자 2개 · 4단계 흐름 다이어그램(CSS 화살표) · 포인트 타일 3개 ·
     "딱 한 번" 박스(열쇠 SVG). 세리프 헤드 = Noto Serif KR 관례 스택(웹폰트 로드 없음).
   ===================================================================== */
.cbz[data-cb-page="guide"]{
  --cb-cream:#f8f6f1;
  --cb-serif:'Pretendard','Noto Sans KR',sans-serif;
}
.cbz[data-cb-page="guide"] .cb-hero h1,
.cbz[data-cb-page="guide"] h2.cb-sh,
.cbz[data-cb-page="guide"] .cb-cta h2,
.cbz[data-cb-page="guide"] .cb-once h2{font-family:var(--cb-serif);}

/* 히어로: 큰 숫자 2개 + 한 줄 부제 */
.cbz .cb-hero-nums{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 14px;}
.cbz .cb-hnum{display:flex;flex-direction:column;gap:4px;background:rgba(15,26,18,.52);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:14px 20px;min-width:150px;}
.cbz .cb-hnum .cb-hv{font-size:40px;font-weight:900;color:#fff;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
.cbz .cb-hnum .cb-hv small{font-size:19px;font-weight:900;margin-left:1px;}
.cbz .cb-hnum--max .cb-hv{color:var(--cb-orange);}
.cbz .cb-hnum .cb-hl{font-size:15px;font-weight:700;color:#d6e7d8;line-height:1.4;}
@media(min-width:720px){
  .cbz .cb-hnum .cb-hv{font-size:48px;}
  .cbz .cb-hnum .cb-hl{font-size:15px;}
}
.cbz .cb-hero-sub{font-size:15px;font-weight:700;color:#eaf4eb;text-shadow:0 1px 10px rgba(0,0,0,.36);margin:0;}

/* 4단계 흐름 다이어그램: 모바일 세로(아래 화살표) / PC 가로(오른쪽 화살표) */
.cbz ol.cb-flow{display:grid;grid-template-columns:1fr;gap:30px;margin:26px 0 0;counter-reset:none;}
.cbz .cb-fstep{position:relative;text-align:center;background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:24px 16px 20px;box-shadow:var(--cb-shadow);}
.cbz .cb-fstep:not(:last-child)::after{content:"";position:absolute;width:13px;height:13px;border-right:4px solid var(--cb-green-line);border-bottom:4px solid var(--cb-green-line);left:50%;bottom:-22px;transform:translateX(-50%) rotate(45deg);}
.cbz .cb-fno{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--cb-green);color:#fff;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(44,71,49,.3);}
.cbz .cb-fic{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:var(--cb-leaf);color:var(--cb-green);margin:2px auto 12px;}
.cbz .cb-fic svg{width:38px;height:38px;}
.cbz .cb-fl{display:block;font-size:17px;font-weight:800;color:var(--cb-ink);line-height:1.4;letter-spacing:-.02em;}
.cbz .cb-fl small{display:block;font-size:15px;font-weight:500;color:var(--cb-ink2);margin-top:4px;}
@media(min-width:720px){
  .cbz ol.cb-flow{grid-template-columns:repeat(4,1fr);gap:22px;}
  .cbz .cb-fstep:not(:last-child)::after{left:auto;right:-19px;top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg);}
}
.cbz .cb-flow-cap{margin:24px 0 0;text-align:center;font-size:17px;color:var(--cb-ink2);}
.cbz .cb-flow-cap b{color:var(--cb-green);font-weight:800;}

/* 포인트 타일 3개: 아이콘 + 큰 숫자 + 한 줄 */
.cbz .cb-tiles3{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:680px){.cbz .cb-tiles3{grid-template-columns:repeat(3,1fr);}}
.cbz .cb-ptile{background:var(--cb-paper);border:1px solid var(--cb-line);border-radius:18px;padding:26px 20px 22px;text-align:center;box-shadow:var(--cb-shadow);}
.cbz .cb-pic{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--cb-leaf);color:var(--cb-green);margin:0 auto 12px;}
.cbz .cb-pic svg{width:30px;height:30px;}
.cbz .cb-pv{display:block;font-size:40px;font-weight:900;color:var(--cb-green);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
.cbz .cb-pv small{font-size:22px;font-weight:900;margin-left:1px;}
.cbz .cb-pn{display:block;font-size:19px;font-weight:800;color:var(--cb-ink);margin-top:10px;letter-spacing:-.02em;line-height:1.4;}
.cbz .cb-pd{display:block;font-size:15px;color:var(--cb-ink2);margin-top:4px;line-height:1.55;}
@media(min-width:720px){.cbz .cb-pv{font-size:48px;}}

/* "딱 한 번만 하면 되는 일" 박스 */
.cbz .cb-once{display:flex;gap:22px;align-items:center;background:var(--cb-tint2);border:1px solid var(--cb-line);border-radius:22px;padding:30px 28px;box-shadow:var(--cb-shadow);flex-wrap:wrap;}
.cbz .cb-oic{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--cb-green);color:#ffd27a;flex:none;box-shadow:0 8px 20px rgba(44,71,49,.24);}
.cbz .cb-oic svg{width:44px;height:44px;}
.cbz .cb-otx{flex:1 1 300px;}
.cbz .cb-once h2{font-size:22px;font-weight:900;color:var(--cb-ink);letter-spacing:-.025em;margin:0 0 8px;line-height:1.35;}
@media(min-width:720px){.cbz .cb-once h2{font-size:26px;}}
.cbz .cb-once p{font-size:17px;color:var(--cb-ink2);line-height:1.7;margin:0;}
.cbz .cb-once p b{color:var(--cb-green);}
.cbz .cb-once .cb-ohelp{margin-top:10px;font-size:15px;color:var(--cb-ink2);}
.cbz .cb-once .cb-ohelp a{font-weight:800;color:var(--cb-green);text-decoration:underline;text-underline-offset:3px;}

/* ---- v1.2.0 (2026-08-24) 두레몰 온라인 전용: 포인트 타일 1종(장보기)만 노출 → 가운데 정렬 + 매장 안내 각주 ---- */
.cbz .cb-tiles3.cb-tiles1{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}
.cbz .cb-tile-note{margin:16px auto 0;max-width:640px;text-align:center;font-size:15px;line-height:1.65;color:var(--cb-ink2);}

/* 2026-08-26 누리집 링크화 — 밑줄로 링크임을 명확히(시니어), 색은 본문 유지 */
.cb-fl-link{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.cb-fl-link:active{opacity:.7;}

/* =====================================================================
   v1.3.0 (2026-08-26) 안내 페이지 v3 — 큐레이션 브랜드 히어로(.cbm-brand)와 디자인 언어 통일
   · 같은 그린 토큰(--cb-green #3d6041 / --cb-green-d #2c4731 = carbon_mark.css 의 --cbm-green 계열),
     같은 라운드 스케일(카드 16~18 / 알약 999), 같은 그림자 스케일(--cb-shadow),
     같은 3단계 칩 문법(흰 카드 + 원형 번호 배지 + keep-all 본문) — .cb-fstep 를 .cbm-brand-steps 의 시각적 형제로.
   · 기존 규칙은 무수정 tail append. 되돌리려면 이 블록만 지우면 v1.2.1 화면으로 복귀.
   ===================================================================== */

/* 히어로 : 제도 정식명 한 줄(화면 표기는 '탄소중립포인트'로 통일했으므로 정식명은 여기에만) */
.cbz .cb-hero-official{margin:12px 0 0;max-width:44ch;font-size:15px;line-height:1.65;font-weight:600;
  color:#e2eee4;text-shadow:0 1px 10px rgba(0,0,0,.42);}
.cbz .cb-hero-official b{color:#ffe6ab;font-weight:900;}
@media(min-width:720px){.cbz .cb-hero-official{font-size:15px;}}

/* 흐름 카드 : 큐레이션 히어로 3단계 칩과 같은 라운드·그림자·번호 배지 스케일로 맞춤 */
.cbz .cb-fstep{border-radius:16px;box-shadow:0 10px 26px -20px rgba(44,71,49,.55);}
.cbz .cb-fno{width:26px;height:26px;font-size:15px;background:var(--cb-green);
  box-shadow:0 3px 8px rgba(44,71,49,.3);}
.cbz .cb-fl{word-break:keep-all;}
.cbz .cb-fl small{word-break:keep-all;}

/* 구 "딱 한 번" 박스에서 살려 온 상담 전화 줄 — .cb-once 밖에서도 쓰이도록 스코프 해제 */
.cbz .cb-ohelp{margin:14px 0 0;text-align:center;font-size:15px;line-height:1.7;color:var(--cb-ink2);}
.cbz .cb-ohelp a{font-weight:800;color:var(--cb-green);text-decoration:underline;text-underline-offset:3px;}

/* 포인트 타일 : 카드 라운드/그림자 스케일 일치 */
.cbz .cb-ptile{border-radius:16px;box-shadow:0 10px 26px -20px rgba(44,71,49,.55);}
.cbz .cb-cap-total{border-radius:16px;}

/* CTA 2개 : 주(가입=주황 알약, 어두운 그린 밴드 위 대비 확보) + 보조(흰 알약 + 그린 글자
   = .cbm-brand-btn 과 같은 형태). 둘 다 알약·최소 높이 56/52 로 터치 규격 통과. */
.cbz .cb-ctabtns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.cbz .cb-cta a.cb-btn--sub{background:#fff;color:var(--cb-green-d);border:1.5px solid #fff;
  font-size:17px;padding:16px 28px;min-height:52px;box-shadow:0 10px 24px rgba(12,26,15,.28);}
.cbz .cb-cta a.cb-btn--sub:hover{background:var(--cb-leaf);color:var(--cb-green-dd);transform:translateY(-2px);}

/* 안내 페이지 안의 추천 레일(구 8번 섹션 흡수) — 밴드 안 여백만 조정, 카드 규칙은 carbon_mark.css 그대로.
   [2026-08-26] 안내 페이지에서는 레일을 걷어내고 큐레이션 링크 1줄(.cb-golist)로 대체했다.
   규칙 자체는 남겨 둔다 — 되살릴 때 슬롯 div 만 되돌리면 되고, 다른 화면에는 영향이 없다. */
.cbz .cbm-reco-on{margin:26px 0 0;border-radius:16px;}

/* v1.3.2 (2026-08-26) 공단 미연결 카드 문구 개선 — 본문이 길어져 폭 상한을 넓히고 보조줄을 한 단계 낮춘다.
   #cbLinkCard 에만 적용해 로그인 유도 카드(.cb-login)의 기존 규격은 건드리지 않는다. */
.cbz #cbLinkCard p{max-width:52ch;}
.cbz #cbLinkCard p b{font-weight:800;color:var(--cb-green);}
.cbz .cb-login-sub{display:inline-block;margin-top:9px;font-size:15px;line-height:1.62;color:var(--cb-ink2);opacity:.88;}

/* v1.3.1 (2026-08-26) 대상 생활재 안내 줄 — 추천 레일 자리를 대신한다 */
.cbz .cb-golist{margin:18px auto 0;max-width:640px;text-align:center;font-size:17px;line-height:1.7;color:var(--cb-ink2);}
.cbz .cb-golist a{display:inline-block;min-height:44px;line-height:44px;padding:0 6px;color:var(--cb-green);font-weight:800;
  text-decoration:underline;text-underline-offset:3px;}
.cbz .cb-golist a:hover{color:var(--cb-green-dd);}

/* =====================================================================
   v1.4.0 (2026-08-26) 안내 페이지 "허브" 재설계 — carbon_guide.jsp v4 전용
   · 모든 선택자를 .cbz[data-cb-page="guide"] 로 묶는다 → 같은 CSS 를 쓰는
     carbon_stat.jsp(stat)·carbon_mystat.jsp(mystat) 는 이 블록에 전혀 걸리지 않는다.
   · 되돌리려면 이 블록만 지우면 v1.3.2 규칙으로 복귀(위 규칙은 무수정 tail append).
   · 디자인 결정
     ① 배경 단일화 : paper/light/tint 교차를 끝내고 크림 한 겹(.cbg-sheet) + 흰 카드 대비로 층을 만든다.
        초록 풀블리드(.cb-band--green)는 마지막 CTA 한 곳만 남는다.
     ② 강조 한 군데 : 금빛(#ffd27a)은 "얼마나" 카드(포인트 숫자)에만. 나머지는 딥그린·무채.
        밝은 배경 위 주황 텍스트(#dc8a00 = 흰 배경 2.73:1)는 안 쓴다 → 딥그린 카드 위 금빛(7.18:1)으로 대체.
     ③ 시니어 : 본문 16px 하한 · 터치 44px 이상 · 인라인 스타일 0 · word-break:keep-all.
     ④ 모션 절제 : 호버 2px 들어올림만. prefers-reduced-motion 에서 전부 정지.
   ===================================================================== */
.cbz[data-cb-page="guide"]{--cbg-sheet:#f8f6f1;--cbg-card:#ffffff;--cbg-gold:#C9A24B;
  --cbg-card-sh:0 10px 26px -20px rgba(44,71,49,.55);}

/* --- 밴드 : 크림 한 겹 + 실선 한 줄로만 구분 --- */
.cbz[data-cb-page="guide"] .cb-band{padding:44px 20px;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cb-band{padding:60px 26px;}}
.cbz[data-cb-page="guide"] .cbg-sheet{background:var(--cbg-sheet);}
.cbz[data-cb-page="guide"] .cbg-sheet + .cbg-sheet{border-top:1px solid var(--cb-line);}

/* 앵커 이동 시 모바일 고정헤더(59px)·PC 헤더에 제목이 가리지 않게 */
.cbz[data-cb-page="guide"] #cbWhat,
.cbz[data-cb-page="guide"] #cbHow,
.cbz[data-cb-page="guide"] #cbMine{scroll-margin-top:72px;}
@media(min-width:1025px){
  .cbz[data-cb-page="guide"] #cbWhat,
  .cbz[data-cb-page="guide"] #cbHow,
  .cbz[data-cb-page="guide"] #cbMine{scroll-margin-top:96px;}
}

/* --- 히어로 진입 칩 3개 (허브의 척추) --- */
.cbz[data-cb-page="guide"] .cb-hero{min-height:420px;}
.cbz[data-cb-page="guide"] .cb-hero-sub{margin:0 0 4px;}
.cbz[data-cb-page="guide"] .cbg-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0;max-width:520px;}
.cbz[data-cb-page="guide"] .cbg-jl{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:8px 6px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--cb-green-dd);
  font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.03em;word-break:keep-all;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(10,22,13,.3);
  transition:background .18s ease,transform .18s ease;}
.cbz[data-cb-page="guide"] .cbg-jl:hover{background:var(--cb-leaf);transform:translateY(-2px);}
.cbz[data-cb-page="guide"] .cbg-jl:active{transform:none;}
@media(min-width:720px){
  .cbz[data-cb-page="guide"] .cbg-jump{gap:10px;max-width:560px;}
  .cbz[data-cb-page="guide"] .cbg-jl{font-size:17px;min-height:52px;letter-spacing:-.02em;}
}

/* --- 한눈에 카드 3장 (#cbWhat) : 이 화면 수치의 유일한 집합소 --- */
.cbz[data-cb-page="guide"] .cbg-cards{display:grid;gap:14px;grid-template-columns:1fr;margin-top:6px;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbg-cards{grid-template-columns:repeat(3,1fr);gap:16px;}}
.cbz[data-cb-page="guide"] .cbg-card{display:flex;flex-direction:column;gap:9px;background:var(--cbg-card);
  border:1px solid var(--cb-line);border-radius:16px;padding:24px 22px;box-shadow:var(--cbg-card-sh);}
.cbz[data-cb-page="guide"] .cbg-ck{font-size:15px;font-weight:800;color:var(--cb-green);letter-spacing:.02em;}
.cbz[data-cb-page="guide"] .cbg-cv{font-size:22px;font-weight:900;line-height:1.42;color:var(--cb-ink);
  letter-spacing:-.025em;word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbg-cd{font-size:17px;line-height:1.65;color:var(--cb-ink2);word-break:keep-all;margin-top:auto;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbg-cv{font-size:22px;}}
/* 강조 카드 : 딥그린 채움 + 금빛 숫자 (금빛 7.18:1 / 본문 5.96:1 — 둘 다 AA 통과) */
.cbz[data-cb-page="guide"] .cbg-card--hi{background:linear-gradient(158deg,var(--cb-green) 0%,var(--cb-green-d) 100%);
  border-color:var(--cb-green-d);box-shadow:0 14px 30px -18px rgba(31,51,36,.6);}
.cbz[data-cb-page="guide"] .cbg-card--hi .cbg-ck{color:#cfe7d3;}
.cbz[data-cb-page="guide"] .cbg-card--hi .cbg-cv{color:var(--cbg-gold);font-size:48px;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.cbz[data-cb-page="guide"] .cbg-card--hi .cbg-cv small{font-size:22px;font-weight:900;margin-left:2px;}
.cbz[data-cb-page="guide"] .cbg-card--hi .cbg-cd{color:#e2eee4;}
/* [2026-08-31 사용자 지시] 2배 적립 기간 안내 알약.
   ⚠ 강조 카드(.cbg-card--hi)는 08-30 순백 전환으로 딥그린 채움이 아니라 크림(#fbf8f1) 바탕이다.
      처음에 딥그린으로 착각해 크림 글자를 얹었더니 "12월 말까지"·"진행 중"이 통째로 안 보였다(실측 교정).
      밝은 바탕 기준이라 크림 글자는 못 쓴다.
   [2026-08-31 2차] 사용자 "2배 쌓이는 것 조금 더 강조" → 연녹 틴트 알약을 감빛 채움으로 올리고
   '2배'만 큰 활자로 분리(i = 보조문구 / b = 2배). 카드 폭 안에서 두 줄이 되지 않게 nowrap 은 i 에만. */
.cbz[data-cb-page="guide"] .cbg-x2{display:inline-flex;align-items:baseline;gap:5px;align-self:center;
	margin:4px 0 12px;padding:7px 16px;border-radius:999px;
	background:#b4643a;border:1px solid #a2542c;box-shadow:0 2px 8px rgba(180,100,58,.28);
	color:#fff6ec;font-size:14.5px;font-weight:700;letter-spacing:-.01em;word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbg-x2 i{font-style:normal;white-space:nowrap;opacity:.95;}
.cbz[data-cb-page="guide"] .cbg-x2 b{font-size:21px;font-weight:900;line-height:1;color:#fff;
	letter-spacing:-.02em;text-shadow:0 1px 0 rgba(0,0,0,.10);}
/* 조기 종료 단서 — 알약 바로 아래 작게. 강조 알약과 경쟁하지 않게 무채색·작은 활자로 낮춘다. */
.cbz[data-cb-page="guide"] .cbg-x2n{display:block;margin:-6px 0 10px;font-size:12.5px;line-height:1.5;
	color:#6b6257;font-weight:600;word-break:keep-all;text-align:center;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbg-card--hi .cbg-cv{font-size:56px;}}

/* --- 참여 방법 3단계 : 3열로 교정(구 4열 그리드에 3개가 들어가 오른쪽이 비어 있었다) --- */
@media(min-width:720px){
  .cbz[data-cb-page="guide"] ol.cb-flow{grid-template-columns:repeat(3,1fr);gap:26px;}
  .cbz[data-cb-page="guide"] .cb-fstep:not(:last-child)::after{right:-21px;}
}
.cbz[data-cb-page="guide"] .cb-fstep{padding-bottom:22px;}
.cbz[data-cb-page="guide"] .cbg-step-cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;margin:14px auto 0;padding:12px 22px;border-radius:999px;background:var(--cb-green);color:#fff;
  font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(44,71,49,.7);transition:background .18s ease,transform .18s ease;}
.cbz[data-cb-page="guide"] .cbg-step-cta:hover{background:var(--cb-green-d);transform:translateY(-2px);}
.cbz[data-cb-page="guide"] .cbg-step-cta:active{transform:none;}

/* --- 어디서 쌓이나요 : 온라인/오프라인 2카드(수치 반복 없음) --- */
.cbz[data-cb-page="guide"] .cbg-where{display:grid;gap:14px;grid-template-columns:1fr;margin-top:6px;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbg-where{grid-template-columns:1fr 1fr;gap:16px;}}
.cbz[data-cb-page="guide"] .cbg-w{display:flex;gap:16px;align-items:flex-start;background:var(--cbg-card);
  border:1px solid var(--cb-line);border-radius:16px;padding:22px 20px;box-shadow:var(--cbg-card-sh);}
.cbz[data-cb-page="guide"] .cbg-wic{flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--cb-leaf);color:var(--cb-green);}
.cbz[data-cb-page="guide"] .cbg-wic svg{width:28px;height:28px;}
.cbz[data-cb-page="guide"] .cbg-w--on .cbg-wic{background:var(--cb-green);color:#fff;}
.cbz[data-cb-page="guide"] .cbg-wtx{flex:1 1 auto;min-width:0;}
.cbz[data-cb-page="guide"] .cbg-wt{display:block;font-size:19px;font-weight:800;color:var(--cb-ink);
  letter-spacing:-.02em;margin:0 0 4px;line-height:1.4;}
.cbz[data-cb-page="guide"] .cbg-wd{display:block;font-size:17px;line-height:1.68;color:var(--cb-ink2);word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbg-wd b{color:var(--cb-green);font-weight:800;}

/* --- 내 포인트(#cbMine) : 구 carbon_mystat.jsp 흡수분 --- */
.cbz[data-cb-page="guide"] #cbMine .cb-desc{margin-bottom:18px;}
.cbz[data-cb-page="guide"] #cbMine .cb-login{border-radius:18px;padding:30px 24px;box-shadow:var(--cbg-card-sh);}
.cbz[data-cb-page="guide"] #cbMine .cb-login h2{font-size:22px;}
.cbz[data-cb-page="guide"] #cbMine .cb-loading{padding:28px 16px;}
.cbz[data-cb-page="guide"] #cbMine .cb-myhero{border-radius:18px;}
.cbz[data-cb-page="guide"] #cbMine .cb-stat-src{text-align:left;font-size:15px;}

/* --- 함께 만든 변화(#cbAll) : 구 carbon_stat.jsp 흡수분 --- */
/* 구 stat 은 초록 밴드 위였다 → 크림 위로 오면서 어두운 배경 전제 색을 되돌린다 */
.cbz[data-cb-page="guide"] .cbg-asof{margin:0 0 4px;font-size:15px;line-height:1.6;color:var(--cb-ink2);}
.cbz[data-cb-page="guide"] #cbAll .cb-desc{margin-bottom:20px;}
.cbz[data-cb-page="guide"] #cbAll .cb-stat-tile{border-radius:16px;box-shadow:var(--cbg-card-sh);}
/* 접근성 : 흰 카드 위 --cb-orange-d(#dc8a00)는 2.73:1 로 큰 글자 기준(3:1)도 못 넘긴다.
   같은 계열의 어두운 금빛(#a05c00, 흰 배경 5.21:1)으로 바꿔 AA 를 넘긴다. guide 스코프 한정. */
.cbz[data-cb-page="guide"] #cbAll .cb-stat-tile.cb-hot .cb-v,
.cbz[data-cb-page="guide"] #cbMine .cb-tile-row .cb-v.cb-hot{color:#a05c00;}
.cbz[data-cb-page="guide"] #cbAll .cb-stat-src{text-align:left;font-size:15px;}
.cbz[data-cb-page="guide"] #cbAll .cb-loading{padding:24px 16px;}
/* 표·막대는 각자 스크롤 상자 안에서만 넘친다(모바일 390 가로 오버플로 0) */
.cbz[data-cb-page="guide"] #cbAll .cb-month-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cbz[data-cb-page="guide"] #cbAll .cb-chart{overflow-x:auto;border-radius:16px;box-shadow:var(--cbg-card-sh);}

/* 상세는 접어 둔다 — 안 그러면 허브가 통계 화면에 잡아먹힌다. FAQ 와 같은 details 문법. */
.cbz[data-cb-page="guide"] details.cbg-all{margin-top:18px;background:var(--cbg-card);border:1px solid var(--cb-line);
  border-radius:16px;box-shadow:var(--cbg-card-sh);overflow:hidden;}
.cbz[data-cb-page="guide"] details.cbg-all > summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:16px 20px;
  font-size:17px;font-weight:800;color:var(--cb-green);line-height:1.45;}
.cbz[data-cb-page="guide"] details.cbg-all > summary::-webkit-details-marker{display:none;}
.cbz[data-cb-page="guide"] details.cbg-all > summary::after{content:'+';font-size:26px;font-weight:900;line-height:1;flex:none;}
.cbz[data-cb-page="guide"] details.cbg-all[open] > summary{border-bottom:1px solid var(--cb-line);color:var(--cb-green-dd);}
.cbz[data-cb-page="guide"] details.cbg-all[open] > summary::after{content:'\2212';}
.cbz[data-cb-page="guide"] .cbg-all-body{padding:6px 18px 22px;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbg-all-body{padding:8px 24px 26px;}}
.cbz[data-cb-page="guide"] .cbg-sub{padding-top:22px;}
.cbz[data-cb-page="guide"] .cbg-sub + .cbg-sub{border-top:1px solid var(--cb-line);margin-top:22px;}
.cbz[data-cb-page="guide"] .cbg-subh{font-size:19px;font-weight:800;color:var(--cb-ink);
  letter-spacing:-.025em;line-height:1.4;margin:0 0 10px;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbg-subh{font-size:22px;}}

/* --- 자주 묻는 질문 : 3묶음 소제목 --- */
.cbz[data-cb-page="guide"] .cbg-fg{display:flex;align-items:center;gap:12px;margin:26px 0 10px;
  font-size:17px;font-weight:800;color:var(--cb-green);letter-spacing:-.02em;line-height:1.4;}
.cbz[data-cb-page="guide"] .cbg-fg:first-of-type{margin-top:6px;}
.cbz[data-cb-page="guide"] .cbg-fg::after{content:"";flex:1 1 auto;height:1px;background:var(--cb-line);}

/* --- 푸터 줄 : 상담 전화 칩 2개 + 운영주체 + 제도 정식명 각주 --- */
.cbz[data-cb-page="guide"] .cbg-foot{background:var(--cbg-sheet);border-top:1px solid var(--cb-line);
  padding:32px 20px 42px;}
.cbz[data-cb-page="guide"] .cbg-foot .cb-inner{text-align:center;}
.cbz[data-cb-page="guide"] .cbg-calls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 16px;}
.cbz[data-cb-page="guide"] .cbg-call{display:flex;flex-direction:column;align-items:center;gap:1px;
  flex:1 1 190px;max-width:280px;min-height:76px;padding:12px 16px;border-radius:16px;
  background:var(--cbg-card);border:1px solid var(--cb-line);box-shadow:var(--cbg-card-sh);
  transition:background .18s ease;}
.cbz[data-cb-page="guide"] .cbg-call:hover{background:var(--cb-leaf);}
.cbz[data-cb-page="guide"] .cbg-call b{font-size:15px;font-weight:800;color:var(--cb-ink2);letter-spacing:-.01em;}
.cbz[data-cb-page="guide"] .cbg-call span{font-size:22px;font-weight:900;color:var(--cb-green);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.25;}
.cbz[data-cb-page="guide"] .cbg-call small{font-size:15px;color:var(--cb-ink2);line-height:1.4;}
.cbz[data-cb-page="guide"] .cbg-org,
.cbz[data-cb-page="guide"] .cbg-note{margin:0;font-size:15px;line-height:1.7;color:var(--cb-ink2);word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbg-note{margin-top:8px;font-size:15px;}
.cbz[data-cb-page="guide"] .cbg-org a{display:inline-block;padding:6px 2px;color:var(--cb-green);font-weight:800;
  text-decoration:underline;text-underline-offset:3px;}
.cbz[data-cb-page="guide"] .cbg-org a:hover{color:var(--cb-green-dd);}

/* --- 모션 줄이기 존중 --- */
@media(prefers-reduced-motion:reduce){
  .cbz[data-cb-page="guide"] .cbg-jl,
  .cbz[data-cb-page="guide"] .cbg-step-cta,
  .cbz[data-cb-page="guide"] .cbg-call,
  .cbz[data-cb-page="guide"] .cb-cta a.cb-btn,
  .cbz[data-cb-page="guide"] .cb-bar-fill{transition:none;}
  .cbz[data-cb-page="guide"] .cbg-jl:hover,
  .cbz[data-cb-page="guide"] .cbg-step-cta:hover,
  .cbz[data-cb-page="guide"] .cb-cta a.cb-btn:hover{transform:none;}
}

/* ===== v1.5.0 (2026-08-26 사용자 지시 "아주 크게 9/1 실적부터 반영됩니다") =====
   시작일 알림 띠 — 히어로 바로 아래 단독 층. 이 화면에서 "9월 1일"의 유일한 자리다.
   · 초록 풀블리드는 마무리 CTA 한 곳뿐이라는 원칙을 지키려고, 이 띠는 초록이 아니라
     따뜻한 금빛 종이(공지 톤)로 간다 — 배경 위계를 흐리지 않으면서 시선은 잡는다.
   · 9/1 이후에는 JSP 가 .is-live 를 붙여 문구가 바뀐다(색은 그린 계열로 전환 = 진행 중 신호).
   · 큰 숫자는 clamp 로 화면 폭에 따라 자란다. tabular-nums 로 자릿수 흔들림 방지. */
.cbz[data-cb-page="guide"] .cbg-startband{
  background:linear-gradient(180deg,#fff8e6 0%,#fdf0d2 100%);
  border-top:1px solid #efdcae; border-bottom:1px solid #efdcae;
  padding:clamp(26px,4.4vw,44px) 0; text-align:center;}
.cbz[data-cb-page="guide"] .cbg-startband .cb-inner{max-width:900px;margin:0 auto;padding:0 20px;}
.cbz[data-cb-page="guide"] .cbg-sb-d{
  margin:0 0 6px; font-family:var(--cb-serif),serif;
  font-size:clamp(32px,7vw,56px); font-weight:800; line-height:1.06;
  letter-spacing:-.035em; color:#8a5a00; font-variant-numeric:tabular-nums;}
.cbz[data-cb-page="guide"] .cbg-sb-t{
  margin:0 0 10px; font-size:clamp(19px,3.2vw,26px); font-weight:800;
  line-height:1.34; letter-spacing:-.03em; color:#5c3d00;}
.cbz[data-cb-page="guide"] .cbg-sb-s{
  margin:0 auto; max-width:44ch; font-size:clamp(15px,1.8vw,17px);
  line-height:1.72; color:#6b5518; font-weight:600;}
/* 9/1 이후 — 진행 중 톤(그린)으로 전환 */
.cbz[data-cb-page="guide"] .cbg-startband.is-live{
  background:linear-gradient(180deg,#f2f7f0 0%,#e7f0e4 100%); border-color:#cfe0cd;}
.cbz[data-cb-page="guide"] .cbg-startband.is-live .cbg-sb-d{color:var(--cb-green);}
.cbz[data-cb-page="guide"] .cbg-startband.is-live .cbg-sb-t{color:var(--cb-green-dd);}
.cbz[data-cb-page="guide"] .cbg-startband.is-live .cbg-sb-s{color:var(--cb-ink2);}

/* ===== v1.6.2 (2026-08-27 사용자 지시 "두레생협 스타일을 묻혀줘") =====
   v1.6.0 은 카톡 카드의 잔디초록·검정 스티커 외곽선을 그대로 가져와 "두레 같지 않다"는 지적. 카드의 *구성*(초록 바탕→크림 카드→
   질문 알약→형광펜 헤드라인→마스코트)은 유지하되, *색과 선*을 두레 토큰으로 교체한다.
   · 바탕 = 헤더 딥그린 #3D6041(--cb-green) / 카드 = 크림 #fbf8f1 / 악센트 = 금 #c9a24b(--gz-gold, 한가위 배지·큐레이션과 동일)
   · 외곽선 = 검정 2.5px → 딥그린 1.5px + 부드러운 그림자(스티커 → 카드 느낌) / 헤드라인 = Black Han Sans → Noto Serif KR(--cb-serif, 허브 기존 헤드)
   · 마스코트는 남기되 잉크선을 딥그린으로, 채도 낮춘 초록 사용. #cbWhat·#cbHow 두 섹션만, id/data-k 무접촉. */
.cbz[data-cb-page="guide"] .cbk{
  --k-grass:var(--cb-green); --k-grass-d:var(--cb-green-d); --k-cream:#fbf8f1; --k-sun:#c9a24b; --k-sun-soft:#e9d9ae;
  --k-ink:var(--cb-green-dd); --k-leaf:var(--cb-green); --k-ink2:#4a5a4e; --k-line:#2c4731;
  background:linear-gradient(180deg,var(--k-grass) 0%,var(--k-grass-d) 100%); border-top:0; border-bottom:0;
  padding-top:26px; padding-bottom:48px; position:relative; overflow:hidden; }
.cbz[data-cb-page="guide"] .cbk .cb-inner{ position:relative; }
.cbz[data-cb-page="guide"] .cbk .cb-eyebrow{
  display:inline-block; background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55); border-radius:999px;
  padding:7px 16px; font-weight:800; font-size:15px; letter-spacing:.02em; box-shadow:none; }
.cbz[data-cb-page="guide"] .cbk .cb-sh{ color:#fff; font-family:var(--cb-serif); font-weight:800; font-size:clamp(26px,5.6vw,40px); letter-spacing:-.02em; }
.cbz[data-cb-page="guide"] .cbk .cbk-st{ position:absolute; right:0; top:-6px; width:132px; height:132px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)); pointer-events:none; opacity:.96; }
/* fill 은 SVG 속성값을 그대로 쓴다 — CSS 로 fill 을 건드리면(attr() 은 무효) 마스코트가 검은 실루엣이 된다(v1.6.1 실측). 선만 CSS. */
.cbz[data-cb-page="guide"] .cbk .cbk-st .k{ stroke:var(--k-line); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.cbz[data-cb-page="guide"] .cbk .cbk-st .e{ fill:#fff; stroke:var(--k-line); stroke-width:4; }
.cbz[data-cb-page="guide"] .cbk .cbk-st .p{ fill:var(--k-line); }
/* 카드 3장 */
.cbz[data-cb-page="guide"] .cbk .cbg-card{ background:var(--k-cream); border:1.5px solid var(--k-sun-soft); border-radius:22px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.45), 0 2px 0 var(--k-sun-soft); padding:26px 22px 28px; text-align:center; }
.cbz[data-cb-page="guide"] .cbk .cbg-card--hi{ background:var(--k-cream); color:var(--k-ink); border-color:var(--k-sun); box-shadow:0 12px 28px -14px rgba(0,0,0,.45), 0 3px 0 var(--k-sun); }
.cbz[data-cb-page="guide"] .cbk .cbg-ck{ display:inline-block; background:var(--k-sun); color:var(--k-ink); border:0;
  border-radius:999px; padding:6px 15px; font-weight:800; font-size:15px; box-shadow:none; margin-bottom:14px; }
.cbz[data-cb-page="guide"] .cbk .cbg-cv{ display:block; color:var(--k-ink); font-family:var(--cb-serif); font-weight:800;
  font-size:clamp(22px,5vw,32px); line-height:1.26; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
.cbz[data-cb-page="guide"] .cbk .cbg-card--hi .cbg-cv{ font-size:clamp(40px,9vw,56px); color:var(--k-leaf); letter-spacing:-.03em; }
.cbz[data-cb-page="guide"] .cbk .cbg-cv small{ font-size:max(12.5px,.5em); }
.cbz[data-cb-page="guide"] .cbk .cbk-mk{ background:linear-gradient(transparent 60%,var(--k-sun-soft) 60%,var(--k-sun-soft) 92%,transparent 92%); color:var(--k-leaf); padding:0 .06em; }
.cbz[data-cb-page="guide"] .cbk .cbg-cd{ color:var(--k-ink2); font-weight:600; font-size:17px; line-height:1.7; }
.cbz[data-cb-page="guide"] .cbk .cbg-cd b{ color:var(--k-ink); font-weight:900; }
/* 참여 3단계 */
.cbz[data-cb-page="guide"] .cbk .cb-fstep{ background:var(--k-cream); border:1.5px solid var(--k-sun-soft); border-radius:18px; box-shadow:0 10px 24px -14px rgba(0,0,0,.45); }
.cbz[data-cb-page="guide"] .cbk .cb-fno{ background:var(--k-leaf); color:#fff; border:0; font-family:var(--cb-serif); font-weight:800; }
.cbz[data-cb-page="guide"] .cbk .cb-fic{ color:var(--k-leaf); }
.cbz[data-cb-page="guide"] .cbk .cb-fl{ color:var(--k-ink); font-weight:800; }
.cbz[data-cb-page="guide"] .cbk .cb-fl small{ color:var(--k-ink2); font-weight:600; }
.cbz[data-cb-page="guide"] .cbk .cbg-step-cta{ background:var(--k-sun); color:var(--k-ink); border:0; border-radius:999px; box-shadow:0 4px 12px -6px rgba(0,0,0,.4); font-weight:900; }
.cbz[data-cb-page="guide"] .cbk .cbg-step-cta:hover{ background:#b8912f; color:var(--k-ink); transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(0,0,0,.45); }
.cbz[data-cb-page="guide"] .cbk .cb-flow-cap{ color:#fff; font-weight:700; }
.cbz[data-cb-page="guide"] .cbk .cb-flow-cap b{ color:#fff; background:linear-gradient(transparent 60%,rgba(201,162,75,.55) 60%,rgba(201,162,75,.55) 92%,transparent 92%); }
@media (max-width:640px){
  .cbz[data-cb-page="guide"] .cbk .cbk-st{ position:static; display:block; width:108px; height:108px; margin:0 auto 6px; }
  .cbz[data-cb-page="guide"] .cbk{ text-align:center; }
  /* [2026-08-28] "어디서 쌓이나요" 카드 본문만 왼쪽 정렬로 되돌린다(사용자 지시).
     [왜] 위 줄이 모바일에서 .cbk 전체를 가운데로 맞추는데, 이 카드는 아이콘이 왼쪽에 있고
          설명이 두 줄로 접히는 구조라 둘째 줄이 가운데로 몰리면서 앞이 텅 빈 것처럼 보였다.
          제목·설명은 왼쪽에서 시작해야 아이콘과 같은 선에 놓여 읽힌다. 섹션 제목·라벨은 가운데 유지. */
  .cbz[data-cb-page="guide"] .cbk--where .cbg-w,
  .cbz[data-cb-page="guide"] .cbk--where .cbg-wtx,
  .cbz[data-cb-page="guide"] .cbk--where .cbg-wt,
  .cbz[data-cb-page="guide"] .cbk--where .cbg-wd{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){ .cbz[data-cb-page="guide"] .cbk .cbg-step-cta:hover{ transform:none; } }


/* ===== v1.7.1 (2026-08-27 "조금 더 적극적으로") — 카드 언어를 상단 절반 전체로 확장 =====
   ① 9/1 띠도 같은 언어(금빛 알약 라벨 + 세리프 큰 숫자) ② 물결 언덕으로 크림→딥그린 전환 ③ 카드마다 마스코트 ④ 4번 섹션까지 스코프
   ⑤ 스크롤 진입 시 카드가 차례로 떠오름(reduced-motion 정지). id/data-k 무접촉. */
.cbz[data-cb-page="guide"] .cbg-startband{ background:linear-gradient(180deg,#fbf8f1 0%,#f3ecd8 100%); border-color:#e9d9ae; }
.cbz[data-cb-page="guide"] .cbg-sb-d{ color:var(--cb-green-dd); font-family:var(--cb-serif); }
.cbz[data-cb-page="guide"] .cbg-sb-d::before{ content:"실적 반영 시작"; display:block; margin:0 auto 12px; width:max-content; background:#FAF6EC; box-shadow:inset 0 0 0 1px #C9A24B; color:var(--cb-green-dd);
  border-radius:999px; padding:6px 16px; font-family:"Pretendard","Noto Sans KR",sans-serif; font-size:15px; font-weight:800; letter-spacing:.02em; line-height:1.2; }
.cbz[data-cb-page="guide"] .cbg-startband.is-live .cbg-sb-d::before{ content:"지금 반영 중"; }
.cbz[data-cb-page="guide"] .cbg-sb-t{ color:var(--cb-green-d); }
.cbz[data-cb-page="guide"] .cbk-wave{ background:#f3ecd8; line-height:0; margin-bottom:-1px; }
.cbz[data-cb-page="guide"] .cbk-wave svg{ display:block; width:100%; height:44px; }
.cbz[data-cb-page="guide"] .cbk-wave path{ fill:var(--cb-green); }
.cbz[data-cb-page="guide"] .cbk .cbg-card{ padding-top:14px; overflow:visible; }
.cbz[data-cb-page="guide"] .cbk .cbk-mi{ display:block; width:112px; height:112px; margin:-58px auto 4px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
.cbz[data-cb-page="guide"] .cbk .cbk-mi .k{ stroke:#2c4731; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.cbz[data-cb-page="guide"] .cbk .cbk-mi .e{ fill:#fff; stroke:#2c4731; stroke-width:4; }
.cbz[data-cb-page="guide"] .cbk .cbk-mi .p{ fill:#2c4731; }
.cbz[data-cb-page="guide"] .cbk .cbg-cards{ margin-top:70px; }
.cbz[data-cb-page="guide"] .cbk--where .cbg-w{ background:#fbf8f1; border:1.5px solid #e9d9ae; border-radius:18px; box-shadow:0 10px 24px -14px rgba(0,0,0,.45); }
.cbz[data-cb-page="guide"] .cbk--where .cbg-w--on{ border-color:#c9a24b; box-shadow:0 10px 24px -14px rgba(0,0,0,.45), 0 3px 0 #c9a24b; }
.cbz[data-cb-page="guide"] .cbk--where .cbg-wic{ color:var(--cb-green); }
/* [2026-08-27 회귀 수정] 바로 위 줄이 546행의 `.cbg-w--on .cbg-wic{color:#fff}` 과 우선순위가 같고
   뒤에 오는 탓에, 강조 카드("두레몰에서는")의 흰 아이콘까지 딥그린으로 덮어 딥그린 원 위에
   딥그린 아이콘 = 아무것도 안 보이는 검은 원이 되었다(모바일 제보). 강조 카드만 흰색으로 되돌린다. */
.cbz[data-cb-page="guide"] .cbk--where .cbg-w--on .cbg-wic{ color:#fff; }
.cbz[data-cb-page="guide"] .cbk--where .cbg-wtx{ color:var(--cb-green-dd); }
.cbz[data-cb-page="guide"] .cbk--where .cbg-wtx b{ color:var(--cb-green-dd); }
.cbz[data-cb-page="guide"] .cbk--where .cb-golist{ color:rgba(255,255,255,.88); }
.cbz[data-cb-page="guide"] .cbk--where .cb-golist a{ color:#fff; text-decoration-color:#c9a24b; text-decoration-thickness:2px; }
@media (prefers-reduced-motion:no-preference){
  /* fail-safe: JS 가 html.cbk-anim 을 붙인 뒤에만 초기 숨김. JS 실패 = 그냥 보임(v1.7.0 실측: 카드 전부 사라지는 사고 방지) */
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cbg-card,
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cb-fstep,
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--where .cbg-w{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.35,1); }
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .is-in{ opacity:1; transform:none; }
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cbg-card:nth-child(2){ transition-delay:.08s; }
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cbg-card:nth-child(3){ transition-delay:.16s; }
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cb-fstep:nth-child(2){ transition-delay:.08s; }
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk .cb-fstep:nth-child(3){ transition-delay:.16s; }
}
@media (max-width:640px){
  .cbz[data-cb-page="guide"] .cbk .cbg-cards{ margin-top:66px; }
  .cbz[data-cb-page="guide"] .cbk .cbg-card + .cbg-card{ margin-top:70px; }
  .cbz[data-cb-page="guide"] .cbk .cbk-mi{ width:100px; height:100px; margin-top:-54px; }
  .cbz[data-cb-page="guide"] .cbk-wave svg{ height:30px; }
}

/* ============================================================
 * [2026-08-27] 한글 줄바꿈 정상화 (모바일 "이상하게 줄띄임" 제보)
 *  [원인] 전역 default.css 의 `p{word-break:break-all}` 이 이 화면 문장까지 잡아,
 *         한글을 낱말이 아니라 아무 글자에서나 끊고 있었다(실측 29곳 · 끝줄에 한 글자만
 *         떨어지는 문장도 있었다). break-all 은 본래 URL·긴 영문용이지 한글용이 아니다.
 *  [조치] .cbz 안에서만 keep-all 로 되돌린다(전역 규칙은 손대지 않는다 — 다른 화면 영향 0).
 *         긴 영문·주소는 overflow-wrap:break-word 가 대신 처리하므로 넘침도 안 생긴다.
 *  [우선순위] `.cbz p`(0,1,1) > `p`(0,0,1) 이라 별도 !important 없이 이긴다.
 * ============================================================ */
.cbz, .cbz p, .cbz span, .cbz b, .cbz strong, .cbz em, .cbz mark, .cbz small,
.cbz li, .cbz dt, .cbz dd, .cbz div, .cbz h1, .cbz h2, .cbz h3, .cbz h4,
.cbz summary, .cbz td, .cbz th, .cbz a, .cbz label{
  word-break:keep-all; overflow-wrap:break-word;
}

/* ============================================================
 * [2026-08-28] 글자 크기 정리 — 사용자 지시 "크기가 왜 이렇게 차이가 나".
 *  [문제] 이 파일 안에 font-size 가 45가지 값으로 180건 흩어져 있었다.
 *         14 / 14.5 / 15 / 15.5 처럼 0.5px 차이는 눈으로 구분되지 않으면서
 *         화면만 어수선하게 만든다(같은 역할의 글이 화면마다 다른 크기로 나옴).
 *  [조치] 눈으로 구분되는 10단계 척도로 전부 스냅했다.
 *         13 · 15 · 17 · 19 · 22 · 26 · 32 · 40 · 48 · 56 (인접 비율 약 1.15~1.25)
 *         같은 거리면 20px 미만은 위로(노안 가독), 이상은 아래로(상자 넘침 방지) 붙였다.
 *  [원칙] 앞으로 이 파일에 글자 크기를 새로 넣을 때는 위 10단계 중에서만 고른다.
 *         중간값이 필요하다고 느껴지면 크기가 아니라 굵기·색·여백으로 차이를 낼 것.
 * ============================================================ */

/* =====================================================================
   v1.10.0 (2026-09-02) 탄소중립포인트 안내 v2 — 집계 시점·정부 지급·2배 적립 (carbon_guide.jsp v5.2)
   · 신설 블록 #cbEarn(.cbg-earn) "포인트는 이렇게 쌓여요" : 기준 카드(.cbe-rule) + 4단계 타임라인(.cbe-tl) + 알아 두실 것(.cbe-notes)
   · #cbMine 상단 한 줄 안내 칩 3개(.cb-mynote)
   · 규칙 : guide 스코프 한정(.cbz[data-cb-page="guide"]) · 10단계 글자 척도(13·15·17·19·22·26·32·40·48·56)만 사용
     · 모바일(≤640) 본문 왼쪽 정렬(가운데 정렬은 앞이 비어 보인다는 제보) · 최소 14px · 인라인 스타일 0
   · 팔레트 : 딥그린(--cb-green) / 크림(#fbf8f1) / 금(#c9a24b) / 강조 감빛(#b4643a, .cbg-x2 와 동일) / 어두운 금빛 텍스트 #a05c00(흰 배경 5.21:1)
   ===================================================================== */
.cbz[data-cb-page="guide"] .cbg-earn{background:var(--cbg-sheet);padding-top:40px;padding-bottom:44px;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbg-earn{padding-top:56px;padding-bottom:60px;}}
.cbz[data-cb-page="guide"] .cbg-earn .cb-inner{max-width:900px;}
.cbz[data-cb-page="guide"] .cbg-earn .cb-desc{max-width:60ch;margin-bottom:22px;}
/* 물결 언덕은 바로 앞 층의 바탕색을 물려받는다(구 #f3ecd8 = 9/1 띠 바닥색). 이 블록이 앞에 오면 크림으로 맞춘다. */
.cbz[data-cb-page="guide"] .cbg-earn + .cbk-wave{background:var(--cbg-sheet);}
.cbz[data-cb-page="guide"] .cbg-earn{scroll-margin-top:72px;}
@media(min-width:1025px){.cbz[data-cb-page="guide"] .cbg-earn{scroll-margin-top:96px;}}

/* --- 기준 카드 : "2,000원 이상 주문 1건 = 500P → 1,000P(12월 말까지)" --- */
.cbz[data-cb-page="guide"] .cbe-rule{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  background:#fbf8f1;border:1.5px solid #e9d9ae;border-radius:22px;padding:24px 22px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.28),0 3px 0 #c9a24b;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbe-rule{grid-template-columns:1.1fr 1fr;gap:16px 28px;padding:28px 30px;}}
.cbz[data-cb-page="guide"] .cbe-rule-what{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.cbz[data-cb-page="guide"] .cbe-k{display:inline-block;background:#c9a24b;color:var(--cb-green-dd);border-radius:999px;
  padding:6px 15px;font-size:15px;font-weight:800;line-height:1.2;}
.cbz[data-cb-page="guide"] .cbe-t{display:block;font-family:var(--cb-serif);font-size:22px;font-weight:800;line-height:1.35;
  letter-spacing:-.02em;color:var(--cb-green-dd);}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbe-t{font-size:26px;}}
.cbz[data-cb-page="guide"] .cbe-mk{background:linear-gradient(transparent 60%,#e9d9ae 60%,#e9d9ae 92%,transparent 92%);color:var(--cb-green);padding:0 .06em;}
.cbz[data-cb-page="guide"] .cbe-rule-pt{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbe-rule-pt{justify-content:flex-end;gap:18px;}}
/* 숫자와 단위(P)는 한 줄, 라벨(i)만 아래 줄 — column flex 로 두면 모바일에서 P 가 숫자 밑으로 떨어진다(신데브 실측 교정) */
.cbz[data-cb-page="guide"] .cbe-val{display:block;line-height:1;white-space:nowrap;}
.cbz[data-cb-page="guide"] .cbe-val b{font-size:40px;font-weight:900;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
.cbz[data-cb-page="guide"] .cbe-val small{font-size:19px;font-weight:900;margin-left:2px;}
.cbz[data-cb-page="guide"] .cbe-val i{display:block;font-style:normal;font-size:15px;font-weight:700;color:var(--cb-ink2);margin-top:6px;line-height:1.3;}
.cbz[data-cb-page="guide"] .cbe-val--base b,.cbz[data-cb-page="guide"] .cbe-val--base small{color:var(--cb-ink2);}
.cbz[data-cb-page="guide"] .cbe-val--x2 b{font-size:48px;color:var(--cb-green);}
.cbz[data-cb-page="guide"] .cbe-val--x2 small{color:var(--cb-green);font-size:22px;}
.cbz[data-cb-page="guide"] .cbe-val--x2 i{color:#a05c00;font-weight:800;}
@media(min-width:720px){
  .cbz[data-cb-page="guide"] .cbe-val b{font-size:48px;}
  .cbz[data-cb-page="guide"] .cbe-val--x2 b{font-size:56px;}
}
/* 좁은 화면(≤480) : "500P → 1,000P" 를 한 줄에 — 줄바꿈되면 화살표가 허공을 가리킨다(신데브 390 실측). 척도 안에서 한 단계씩 내린다. */
@media(max-width:480px){
  .cbz[data-cb-page="guide"] .cbe-rule-pt{flex-wrap:nowrap;gap:10px;}
  .cbz[data-cb-page="guide"] .cbe-val b{font-size:32px;}
  .cbz[data-cb-page="guide"] .cbe-val small{font-size:17px;}
  .cbz[data-cb-page="guide"] .cbe-val--x2 b{font-size:40px;}
  .cbz[data-cb-page="guide"] .cbe-val--x2 small{font-size:19px;}
  .cbz[data-cb-page="guide"] .cbe-arrow{width:26px;}
}
/* 화살표(기본 → 2배) : 짧은 막대 + 꺾쇠 */
.cbz[data-cb-page="guide"] .cbe-arrow{position:relative;width:34px;height:14px;flex:none;align-self:center;margin-bottom:22px;}
.cbz[data-cb-page="guide"] .cbe-arrow::before{content:"";position:absolute;left:0;right:6px;top:50%;height:3px;margin-top:-1.5px;background:#c9a24b;border-radius:2px;}
.cbz[data-cb-page="guide"] .cbe-arrow::after{content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;margin-top:-5.5px;
  border-top:3px solid #c9a24b;border-right:3px solid #c9a24b;transform:rotate(45deg);}
/* 2배 알약 : 카드 전폭 아래 줄(.cbg-x2 와 같은 감빛 채움 — 이 화면의 "2배" 신호색) */
.cbz[data-cb-page="guide"] .cbe-chip{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  margin-top:2px;padding:8px 18px 8px 10px;border-radius:999px;background:#b4643a;border:1px solid #a2542c;
  box-shadow:0 2px 8px rgba(180,100,58,.28);color:#fff6ec;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbe-chip{grid-column:1 / -1;}}
.cbz[data-cb-page="guide"] .cbe-chip b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;
  padding:0 10px;border-radius:999px;background:#fff6ec;color:#8a4420;font-size:19px;font-weight:900;line-height:1;letter-spacing:-.02em;}

/* --- 4단계 타임라인 : 모바일 세로(왼쪽 번호 + 세로선) / PC 가로 4열(위 번호 + 가로선) --- */
.cbz[data-cb-page="guide"] .cbe-tl{display:grid;grid-template-columns:1fr;gap:0;margin:26px 0 0;counter-reset:none;}
.cbz[data-cb-page="guide"] .cbe-st{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:4px;padding:0 0 26px;text-align:left;}
.cbz[data-cb-page="guide"] .cbe-st:last-child{padding-bottom:0;}
.cbz[data-cb-page="guide"] .cbe-st::before{content:"";position:absolute;left:21px;top:44px;bottom:-4px;width:2px;background:#d9dccf;}
.cbz[data-cb-page="guide"] .cbe-st:last-child::before{display:none;}
.cbz[data-cb-page="guide"] .cbe-no{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--cb-green);color:#fff;font-family:var(--cb-serif);font-size:19px;font-weight:800;
  box-shadow:0 3px 8px rgba(44,71,49,.3);position:relative;z-index:1;}
.cbz[data-cb-page="guide"] .cbe-big{display:block;font-family:var(--cb-serif);font-size:26px;font-weight:800;line-height:1.2;
  letter-spacing:-.025em;color:var(--cb-ink);padding-top:6px;}
.cbz[data-cb-page="guide"] .cbe-d{display:block;font-size:17px;line-height:1.68;color:var(--cb-ink2);word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbe-d b{color:var(--cb-ink);font-weight:800;}
.cbz[data-cb-page="guide"] .cbe-d a{color:var(--cb-green);font-weight:800;text-decoration:underline;text-underline-offset:3px;}
/* 3단계(두레 화면) = 딥그린, 4단계(정부 지급) = 어두운 금빛 — 누가 보여 주고 누가 지급하는지 색으로 가른다 */
.cbz[data-cb-page="guide"] .cbe-st--dure .cbe-big{color:var(--cb-green);}
.cbz[data-cb-page="guide"] .cbe-st--gov .cbe-big{color:#a05c00;}
.cbz[data-cb-page="guide"] .cbe-st--gov .cbe-no{background:#a05c00;box-shadow:0 3px 8px rgba(160,92,0,.3);}
@media(min-width:760px){
  .cbz[data-cb-page="guide"] .cbe-tl{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;}
  .cbz[data-cb-page="guide"] .cbe-st{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:6px;padding:0;}
  .cbz[data-cb-page="guide"] .cbe-st::before{left:52px;right:-18px;top:21px;bottom:auto;width:auto;height:2px;}
  .cbz[data-cb-page="guide"] .cbe-no{grid-row:auto;}
  .cbz[data-cb-page="guide"] .cbe-big{font-size:32px;padding-top:4px;}
}

/* --- 알아 두실 것 3줄 : 초록 체크 불릿, 왼쪽 정렬 --- */
.cbz[data-cb-page="guide"] .cbe-notes{display:grid;gap:10px;margin:26px 0 0;padding:20px 20px;background:var(--cb-tint2);
  border:1px solid var(--cb-line);border-radius:16px;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbe-notes{padding:22px 26px;}}
.cbz[data-cb-page="guide"] .cbe-notes li{position:relative;padding-left:30px;font-size:15px;line-height:1.7;color:var(--cb-ink2);text-align:left;word-break:keep-all;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbe-notes li{font-size:17px;}}
.cbz[data-cb-page="guide"] .cbe-notes li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:14px;
  border-right:3px solid var(--cb-green);border-bottom:3px solid var(--cb-green);transform:rotate(45deg);}
.cbz[data-cb-page="guide"] .cbe-notes b{color:var(--cb-ink);font-weight:800;}
.cbz[data-cb-page="guide"] .cbe-notes a{color:var(--cb-green);font-weight:800;text-decoration:underline;text-underline-offset:3px;}

/* --- #cbMine 상단 한 줄 안내 칩 3개 --- */
.cbz[data-cb-page="guide"] .cb-mynote{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 22px;}
.cbz[data-cb-page="guide"] .cb-mynote li{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;
  background:var(--cb-tint2);border:1px solid #cfe0cd;font-size:15px;font-weight:600;line-height:1.3;color:var(--cb-ink2);word-break:keep-all;}
.cbz[data-cb-page="guide"] .cb-mynote li b{color:var(--cb-green);font-weight:800;margin:0 2px;}

/* --- 한눈에 "얼마나" 카드 단서줄 : 12.5px 는 14px 하한 미달 → 15px(척도)로 올린다 --- */
.cbz[data-cb-page="guide"] .cbg-x2n{font-size:15px;}

/* =====================================================================
   v1.11.0 (2026-09-06) 탄소중립포인트 안내 v6 — "운동과 철학" (carbon_guide.jsp v6)
   · 신설 ① .cbg-why (#cbWhy) "왜 함께하나" : 3갈래(.cbw-grid > .cbw-item) + 결(結) 인용(.cbw-thesis)
   · 신설 ② .cbk--dure (#cbDure) "두레의 실천" 4항목(.cbd-grid > .cbd-item) — 구 .cbg-where(카드 1장) 대체
   · 히어로 진입 칩 3 → 4 (.cbg-jump--4)
   · 규칙 준수 : guide 스코프 한정(.cbz[data-cb-page="guide"]) · 10단계 글자 척도(13·15·17·19·22·26·32·40·48·56)만
     · 12.5px 미만 0 · 인라인 스타일 0 · word-break:keep-all · 터치 44px · 모바일 본문 왼쪽 정렬
   · 팔레트 : 딥그린 var(--cb-green) #3d6041 / 크림 #fbf8f1 · var(--cbg-sheet) #f8f6f1 / 금 #c9a24b · 금연 #e9d9ae
     / 본문 회색 var(--cb-ink2) #546055(#5F6B62 보다 진함 = 대비 여유) / 헤어라인 #dfe5dc / radius 16~22
   · 되돌리려면 이 블록만 지우면 v1.10.0 으로 복귀(무수정 tail append).
   ===================================================================== */

/* --- 히어로 진입 칩 4개 : 모바일 2×2 / PC 4열 (3열 그리드 기본값을 이 변형만 덮는다) --- */
.cbz[data-cb-page="guide"] .cbg-jump--4{grid-template-columns:repeat(2,1fr);max-width:420px;}
@media(min-width:720px){
  .cbz[data-cb-page="guide"] .cbg-jump--4{grid-template-columns:repeat(4,1fr);max-width:680px;}
  .cbz[data-cb-page="guide"] .cbg-jump--4 .cbg-jl{font-size:15px;letter-spacing:-.03em;}
}

/* =========================================================
   ① #cbWhy "왜 함께하나" — 이 화면에서 가장 조용한 층
   [왜 조용한가] 앞뒤가 전부 카드·숫자·초록 띠다. 여기까지 카드로 채우면 '왜'가 또 하나의
   적립 안내로 읽힌다. 그래서 카드 상자를 쓰지 않고 왼쪽 초록 세로선 + 본문만 둔다.
   ========================================================= */
.cbz[data-cb-page="guide"] .cbg-why{scroll-margin-top:72px;}
@media(min-width:1025px){.cbz[data-cb-page="guide"] .cbg-why{scroll-margin-top:96px;}}
.cbz[data-cb-page="guide"] .cbg-why .cb-inner{max-width:900px;}
.cbz[data-cb-page="guide"] .cbg-why .cb-desc{max-width:60ch;margin-bottom:28px;}

.cbz[data-cb-page="guide"] .cbw-grid{display:grid;grid-template-columns:1fr;gap:22px;margin:0;}
@media(min-width:860px){.cbz[data-cb-page="guide"] .cbw-grid{grid-template-columns:repeat(3,1fr);gap:30px;}}
.cbz[data-cb-page="guide"] .cbw-item{padding:2px 0 2px 18px;border-left:3px solid #cfe0cd;text-align:left;}
.cbz[data-cb-page="guide"] .cbw-t{margin:0 0 8px;font-family:var(--cb-serif);font-size:19px;font-weight:800;
  line-height:1.4;letter-spacing:-.025em;color:var(--cb-green-dd);word-break:keep-all;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbw-t{font-size:22px;}}
.cbz[data-cb-page="guide"] .cbw-d{margin:0;font-size:17px;line-height:1.75;color:var(--cb-ink2);word-break:keep-all;}

/* 결(結) 인용 : 이 화면 전체의 결론. 옅은 초록 판 + 가운데 정렬로 한 번만 멈추게 한다. */
.cbz[data-cb-page="guide"] .cbw-thesis{margin:32px 0 0;padding:26px 22px;background:var(--cb-tint2);
  border:1px solid #dfe5dc;border-radius:16px;text-align:center;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbw-thesis{margin-top:38px;padding:32px 34px;}}
.cbz[data-cb-page="guide"] .cbw-q{margin:0 0 10px;font-family:var(--cb-serif);font-size:22px;font-weight:800;
  line-height:1.4;letter-spacing:-.03em;color:var(--cb-green);word-break:keep-all;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cbw-q{font-size:26px;}}
.cbz[data-cb-page="guide"] .cbw-qs{margin:0 auto;max-width:52ch;font-size:17px;line-height:1.72;
  color:var(--cb-ink2);word-break:keep-all;}

/* =========================================================
   ② #cbDure "두레의 실천" — 초록 띠 위 크림 카드 4장(2×2)
   구 .cbk--where 의 카드 언어(크림 바탕 + 금 테두리 + 들뜬 그림자)를 그대로 물려받아
   앞 두 섹션(#cbWhat·#cbHow)과 같은 문법으로 읽히게 한다. 다른 점은 개수(1 → 4)뿐이다.
   ========================================================= */
.cbz[data-cb-page="guide"] .cbk--dure{scroll-margin-top:72px;}
@media(min-width:1025px){.cbz[data-cb-page="guide"] .cbk--dure{scroll-margin-top:96px;}}
/* 리드 문장 : PC 는 제목과 같은 왼쪽 선에서 시작해야 한다.
   (margin:0 auto 로 두면 max-width:56ch 블록이 가운데로 밀려 제목보다 오른쪽에서 시작한다 — 신데브 1440 실측 교정.)
   모바일(≤640)은 .cbk{text-align:center} 가 지배하는 구간이라 블록도 가운데로 맞춘다. */
.cbz[data-cb-page="guide"] .cbk--dure .cbd-lead{color:#e2eee4;max-width:56ch;margin:0 0 26px;}
@media(min-width:860px){.cbz[data-cb-page="guide"] .cbk--dure .cbd-lead{margin-bottom:30px;}}
@media(max-width:640px){.cbz[data-cb-page="guide"] .cbk--dure .cbd-lead{margin-left:auto;margin-right:auto;}}

.cbz[data-cb-page="guide"] .cbd-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0;}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbd-grid{grid-template-columns:1fr 1fr;gap:16px;}}
.cbz[data-cb-page="guide"] .cbd-item{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;
  column-gap:15px;row-gap:6px;align-items:start;text-align:left;
  background:#fbf8f1;border:1.5px solid #e9d9ae;border-radius:18px;padding:20px 20px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.45);}
@media(min-width:760px){.cbz[data-cb-page="guide"] .cbd-item{padding:22px 22px;}}
.cbz[data-cb-page="guide"] .cbd-ic{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--cb-green);color:#fff;
  box-shadow:0 3px 8px rgba(44,71,49,.28);}
.cbz[data-cb-page="guide"] .cbd-ic svg{width:27px;height:27px;}
.cbz[data-cb-page="guide"] .cbd-t{display:block;align-self:center;font-family:var(--cb-serif);font-size:19px;
  font-weight:800;line-height:1.35;letter-spacing:-.025em;color:var(--cb-green-dd);word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbd-d{display:block;grid-column:2;font-size:17px;line-height:1.68;
  color:#4a5a4e;word-break:keep-all;}

/* 구 "어디서 쌓이나요"가 답하던 사실 한 줄 — 초록 바탕 위라 흰 글씨 + 금빛 밑줄 강조 */
.cbz[data-cb-page="guide"] .cbk--dure .cbd-note{margin:22px auto 0;max-width:640px;text-align:center;
  font-size:17px;line-height:1.7;color:#e2eee4;word-break:keep-all;}
.cbz[data-cb-page="guide"] .cbk--dure .cbd-note b{color:#fff;font-weight:800;
  background:linear-gradient(transparent 62%,rgba(201,162,75,.55) 62%,rgba(201,162,75,.55) 94%,transparent 94%);}
.cbz[data-cb-page="guide"] .cbk--dure .cb-golist{margin-top:10px;}

/* 카드 떠오름 fail-safe : JS 가 html.cbk-anim 을 붙인 뒤에만 초기 숨김(붙지 않으면 그냥 보인다) */
@media (prefers-reduced-motion:no-preference){
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--dure .cbd-item{opacity:0;transform:translateY(18px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.35,1);}
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--dure .cbd-item.is-in{opacity:1;transform:none;}
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--dure .cbd-item:nth-child(2){transition-delay:.08s;}
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--dure .cbd-item:nth-child(3){transition-delay:.16s;}
  html.cbk-anim .cbz[data-cb-page="guide"] .cbk--dure .cbd-item:nth-child(4){transition-delay:.24s;}
}

/* 모바일(≤640) : .cbk{text-align:center} 가 이 섹션 본문까지 가운데로 몰아
   아이콘 옆 두 줄짜리 설명의 둘째 줄이 앞이 텅 빈 것처럼 보인다(2026-08-28 제보와 같은 원인).
   카드 안쪽만 왼쪽으로 되돌린다 — 섹션 제목·라벨·리드·각주는 가운데 유지. */
@media (max-width:640px){
  .cbz[data-cb-page="guide"] .cbk--dure .cbd-item,
  .cbz[data-cb-page="guide"] .cbk--dure .cbd-t,
  .cbz[data-cb-page="guide"] .cbk--dure .cbd-d{text-align:left;}
}

/* --- 마무리 CTA 위 두레 슬로건 한 줄 --- */
.cbz[data-cb-page="guide"] .cb-ctalead{margin:0 auto 14px;max-width:46ch;font-size:17px;line-height:1.7;
  font-weight:600;color:#cfe7d3;word-break:keep-all;}
@media(min-width:720px){.cbz[data-cb-page="guide"] .cb-ctalead{font-size:19px;}}

/* 2026-09-06 창A 검수8: 탄소 페이지는 헤더 장바구니 수량(#id_basket_top1)을 채우는 JS가 없어
   숫자 없는 빈 원으로 보인다(다른 페이지는 정상). 값이 비면 뱃지를 숨긴다(이 파일은 탄소 화면에만 로드 = 타 페이지 무영향). */
.head_menu_wrap .cart .num:empty{ display:none !important; }