/* =====================================================================
   carbon_page.css — 탄소중립포인트 안내·실적 페이지 전용 (2026-08-21)
   · 루트 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:18px;}}

/* 모바일(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:14.5px;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:28px;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:34px;}}
.cbz .cb-desc{margin:0 0 26px;color:var(--cb-ink2);font-size:17.5px;max-width:56ch;line-height:1.75;}
.cbz .cb-band--green .cb-desc{color:#d3e6d5;}
@media(min-width:720px){.cbz .cb-desc{font-size:18.5px;}}

/* ----- 히어로 ----- */
.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:14.5px;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:44px;}}
.cbz .cb-hero h1 em{font-style:normal;color:#ffd27a;}
.cbz .cb-hero .cb-lead{font-size:18px;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:19.5px;}}
.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:42px;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:52px;}}
.cbz .cb-figure .cb-unit{font-size:20px;font-weight:900;color:var(--cb-orange);}

/* ----- "이게 뭔가요" 한 문장 + 핵심 3줄 ----- */
.cbz .cb-one{font-size:21px;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:25px;}}
.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:15.5px;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:20px;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:14.5px;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:15.5px;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:17.5px;}}

/* ----- 안내 상자(노란) ----- */
.cbz .cb-note{background:var(--cb-note-bg);border:1px solid var(--cb-note-line);border-radius:14px;padding:18px 20px;font-size:16px;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:16.5px;}
.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:14.5px;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:17.5px;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:14px;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:13.5px;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:17.5px;font-weight:700;letter-spacing:-.02em;}
.cbz .cb-cap-total .cb-v{font-size:30px;font-weight:900;color:#ffd27a;font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.cbz .cb-cap-total .cb-v small{font-size:16px;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:20px;letter-spacing:-.025em;color:var(--cb-green);margin:0 0 8px;line-height:1.35;}
.cbz .cb-good p{font-size:16.5px;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:27px;letter-spacing:-.03em;line-height:1.32;color:#fff;}
@media(min-width:720px){.cbz .cb-cta h2{font-size:34px;}}
.cbz .cb-cta p{margin:0 0 24px;color:#d6e7d8;font-size:18px;}
.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:17.5px;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:28px;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:16.5px;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:38px;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:46px;}}
.cbz .cb-headfig .cb-unit{font-size:18px;font-weight:900;color:var(--cb-orange);}
.cbz .cb-asof{margin-top:16px;font-size:14.5px;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:36px;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:42px;}}
.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:15.5px;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:13.5px;}
.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:16px;}
.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:16px;}
.cbz .cb-stat-src{margin-top:14px;font-size:13.5px;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:16px;}
.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:18px;font-weight:800;color:var(--cb-ink);}
.cbz .cb-chart-hd .cb-unit-note{font-size:14px;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:14.5px;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:16.5px;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:15.5px;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:16.5px;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:15.5px;font-weight:800;color:#cfe7d3;margin:0 0 8px;}
.cbz .cb-myhero .cb-lbl{font-size:15.5px;color:#d3e6d5;margin:0 0 4px;}
.cbz .cb-myhero .cb-big{font-size:46px;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:15.5px;color:var(--cb-ink2);}
.cbz .cb-tile-row .cb-v{font-size:20px;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:23px;}
.cbz .cb-emptynote{background:var(--cb-tint2);border:1px solid var(--cb-line);border-radius:14px;padding:16px 18px;margin-top:20px;font-size:15.5px;color:var(--cb-ink2);line-height:1.65;}
.cbz .cb-emptynote b{color:var(--cb-ink);}
.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:15.5px;font-weight:800;color:#cfe7d3;margin:0 0 6px;}
.cbz .cb-myst .cb-big{font-size:44px;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:52px;}}
.cbz .cb-myst .cb-big small{font-size:22px;font-weight:800;}
.cbz .cb-myst .cb-sub{color:#d3e6d5;font-size:15.5px;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:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.cbz .cb-myst .cb-mini span{font-size:14px;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:15.5px;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:13.5px;padding:12px 10px;gap:4px;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow:first-child{font-size:12px;}
  .cbz .cb-month-table.cb-cols5 .cb-mrow b{font-size:13.5px;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:14px;font-weight:800;margin-left:2px;}
.cbz .cb-item-tile .cb-l{font-size:14.5px;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:12.5px;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:14.5px;}
.cbz .cb-tile-row.cb-sub-row .cb-l small{display:block;font-size:12.5px;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:36px;}}
.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:12.5px;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:13.5px;}
.cbz .cb-bars.cb-bars-daily .cb-rv{font-size:14px;}
.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:14px;}
.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:11.5px;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:13.5px;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:"Noto Serif KR","Maru Buri","Nanum Myeongjo",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:38px;font-weight:900;color:#fff;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;}
.cbz .cb-hnum .cb-hv small{font-size:20px;font-weight:900;margin-left:1px;}
.cbz .cb-hnum--max .cb-hv{color:var(--cb-orange);}
.cbz .cb-hnum .cb-hl{font-size:14.5px;font-weight:700;color:#d6e7d8;line-height:1.4;}
@media(min-width:720px){
  .cbz .cb-hnum .cb-hv{font-size:46px;}
  .cbz .cb-hnum .cb-hl{font-size:15.5px;}
}
.cbz .cb-hero-sub{font-size:15.5px;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:17.5px;font-weight:800;color:var(--cb-ink);line-height:1.4;letter-spacing:-.02em;}
.cbz .cb-fl small{display:block;font-size:14px;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:16px;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:42px;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:18px;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:23px;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);}